ユーザ用ツール

サイト用ツール


このページの翻訳:



最近の更新



Tag Cloud

11_php:02_framework:01_laravel:28_laravel_voyger_front-end

28 Laravel Voyager フロントページ用意

Post

一覧ページ

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

1.コントローラ

コントローラ作成
※コントローラ内でテーブルを指定しない場合、同じ名前のテーブルを参照する。

php artisan make:model Post

下記ができる

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}

2.ルーティング

routes/web.php

Route::get('/foo', function () {
    $posts = App\Post::all();
    return view('home', compact('posts'));
});

3.Viewを作成

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>

4.ページ完成

URL: http://hogehoge.com/foo

一覧のページが完成

シングルページ

個々のページへのアクセス

1.ルーティング

routes/web.php

Route::get('post/{slug}', function($slug){
	$post = App\Post::where('slug', '=', $slug)->firstOrFail();
	return view('post', compact('post'));
});

2.View

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>

3.ページ完成

Pages

1.コントローラ

php artisan make:model Pages

下記のコントローラが作成される

app/Pages.php

 
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Pages extends Model
{
    //
}

2.ルーティング

routes/web.php

Route::get('pages/{slug}', function($slug){
    $pages = App\Pages::where('slug', '=', $slug)->firstOrFail();
    return view('pages', compact('pages'));
});

3.View

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>

4.完成

11_php/02_framework/01_laravel/28_laravel_voyger_front-end.txt · 最終更新: 2021/02/04 14:08 by matsui