fl8 Wiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 28 Laravel Voyager フロントページ用意 ======

https://devdojo.com/tutorials/working-with-voyager-on-the-front-end

===== Post =====

==== 一覧ページ ====
Postのデータ一覧を表示するページ

=== 1.コントローラ ===

コントローラ作成
※コントローラ内でテーブルを指定しない場合、同じ名前のテーブルを参照する。
<code>
php artisan make:model Post
</code>

下記ができる
<code|app/Post.php>
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}
</code>

=== 2.ルーティング ===

<code|routes/web.php>
Route::get('/foo', function () {
    $posts = App\Post::all();
    return view('home', compact('posts'));
});
</code>

=== 3.Viewを作成 ===

<code|resources/views/home.blade.php>
<!DOCTYPE html>
<html>
<head>
	<title>Homepage</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

	<div class="container">
		<br><br>
		<div class="row">
		@foreach($posts as $post)
			<div class="col-md-3">
				<a href="/post/{{ $post->slug }}">
					<img src="{{ Voyager::image( $post->image ) }}" style="width:100%">
					<span>{{ $post->title }}</span>
				</a>
			</div>
		@endforeach
		</div>
	</div>

</body>
</html>
</code>


=== 4.ページ完成 ===

URL: http://hogehoge.com/foo

一覧のページが完成
{{:11_php:02_framework:01_laravel:post_1.png?400|}}


==== シングルページ ====

個々のページへのアクセス
=== 1.ルーティング ===

<code|routes/web.php>
Route::get('post/{slug}', function($slug){
	$post = App\Post::where('slug', '=', $slug)->firstOrFail();
	return view('post', compact('post'));
});
</code>

=== 2.View ===

<code|resources/views/post.blade.php>
<!DOCTYPE html>
<html>
<head>
	<title>{{ $post->title }}</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">

				<h1>{{ $post->title }}</h1>
				<img src="{{ Voyager::image( $post->image ) }}" style="width:100%">
				<p>{!! $post->body !!}</p>

			</div>
		</div>
	</div>

</body>
</html>
</code>


=== 3.ページ完成 ===

URL: http://hogehoge.com/post/yarr-post

{{:11_php:02_framework:01_laravel:post_2.png?400|}}


===== Pages =====

=== 1.コントローラ ===

<code>
php artisan make:model Pages
</code>

下記のコントローラが作成される
<code|app/Pages.php> 
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Pages extends Model
{
    //
}
</code>

=== 2.ルーティング ===

<code|routes/web.php>
Route::get('pages/{slug}', function($slug){
    $pages = App\Pages::where('slug', '=', $slug)->firstOrFail();
    return view('pages', compact('pages'));
});
</code>

=== 3.View ===


<code|resources/views/pages.blade.php>
<!DOCTYPE html>
<html>
<head>
    <title>{{ $pages->title }}</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <h1>{{ $pages->title }}</h1>
                <img src="{{ Voyager::image( $pages->image ) }}" style="width:100%">
                <p>{!! $pages->body !!}</p>

            </div>
        </div>
    </div>

</body>
</html>
</code>


=== 4.完成 ===

http://hogehoge.com/pages/hello-world

{{:11_php:02_framework:01_laravel:pages_01.png?400|}}

{{tag>Laravel Voyager}}
fl8 Wiki

ユーザ用ツール

サイト用ツール

ページ用ツール
