Single Post and SEO Friendly URL
Pada bagian kelima ini, kita akan :
- Membuat halaman untuk single post
- Membuat SEO Friendly URL
Di bagian sebelumnya, kita sudah berhasil membuat halaman utama yang menampilkan seluruh post. Sekarang kita akan menampilkan satu post saja ketika salah satu post pada halaman utama di klik. Modifikasi routes/web.php
|
1 2 3 4 |
Route::get('/blog/{posts}',[ 'uses' => 'BlogController@show', 'as' => 'blog.show', ]); |
Selanjutnya, buka BlogController.php dan buat method show() :
|
1 2 3 4 5 |
public function show($id){ $post = Post::findOrFail($id); return view("blog.show", compact('post')); } |
Buka resources/views/blog/index.blade.php dan modifikasi bagian href dari post title :
|
1 |
<h2 class="card-title"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></h2> |
Buka resources/views/layouts/main.blade.php dan tambahkan css pada header. Styling ini ditambahkan supaya judul pada halaman utama tidak berubah menjadi warna biru dan digaris bawah.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Custom styles for this template --> <link href="{{ asset('css/blog-home.css') }}" rel="stylesheet"> <style> a { color: black; } a:hover { text-decoration: none; font-size: 105%; } </style> |
Buka resources/views/blog/show.blade.php dan lakukan beberapa modifikasi. Hasil akhirnya seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
@extends('layouts.main') @section('content') <!-- Page Content --> <div class="container"> <div class="row"> <!-- Post Content Column --> <div class="col-lg-8"> <!-- Title --> <h1 class="mt-4">{{ $post->title }}</h1> <!-- Author --> <p class="lead"> by <a href="#">{{ $post->author->name }}</a> </p> <hr> <!-- Date/Time --> <p>Posted {{ $post->date }}</p> <hr> @if($post->image_url) <!-- Preview Image --> <img class="img-fluid rounded" src="http://placehold.it/900x300" alt=""> <hr> @endif <!-- Post Content --> {{ $post->body }} <hr> </div> @include('layouts.sidebar') </div> <!-- /.row --> </div> <!-- /.container --> @endsection |
Buka terminal dan ketik php artisan serve. Buka halaman utama laravel dan klik salah satu judul :
SEO Friendly URL
Kita akan mengganti method show() pada BlogController menggunakan model binding :
|
1 2 3 4 |
public function show(Post $post){ return view("blog.show", compact('post')); } |
Buka app\Providers\RouteServiceProvider.php dan modifikasi method boot() :
|
1 2 3 4 5 6 7 |
public function boot() { parent::boot(); route::bind('posts', function($slug){ return Post::published()->where('slug', $slug)->first(); }); } |
Tulisan ‘posts’ didalam method bind() harus sama dengan {posts} yang ada di dalam routes/web.php. Published() method digunakan agar pengunjung tidak bisa melihat post yang belum di publish.
Jangan lupa untuk menambahkan use App\Post di RouteServiceProvider.php
Lalu, modifikasi blog/index.blade.php dan ubah $post->id menjadi $post->slug.
|
1 |
<h2 class="card-title"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></h2> |
Buka home url, dan klik salah satu title :
Github Commit.