WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (5) – Single Post and SEO Friendly URL
In this fifth part of creating WordPress-Like Blog using Laravel 5.6/5.7 and AdminLTE 3, we will :
- Create the single post
- Create SEO Friendly URL
In the previous part, we have successfully created a page shows all the post from the posts table. Now we will create a single page to show the single post. First, let’s modify routes/web.php
|
1 2 3 4 |
Route::get('/blog/{posts}',[ 'uses' => 'BlogController@show', 'as' => 'blog.show', ]); |
Next, open BlogController.php and create new method show() :
|
1 2 3 4 5 |
public function show($id){ $post = Post::findOrFail($id); return view("blog.show", compact('post')); } |
Open resources/views/blog/index.blade.php and modify the href part for the post title :
|
1 |
<h2 class="card-title"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></h2> |
Open resources/views/layouts/main.blade.php and add styling to the header. This styling is added to make the post title color stays black and no underline :
|
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> |
Open resources/views/blog/show.blade.php and do some modifications. The end result will be as follows :
|
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 |
Open terminal and php artisan serve. Open your laravel blog project, and click the title.
SEO Friendly URL
Before we start changing the url to be more SEO friendly, let’s change the method show() in the BlogController using model binding :
|
1 2 3 4 |
public function show(Post $post){ return view("blog.show", compact('post')); } |
Next, we will start to use the SEO friendly url.
Open app\Providers\RouteServiceProvider.php and modify the boot method :
|
1 2 3 4 5 6 7 |
public function boot() { parent::boot(); route::bind('posts', function($slug){ return Post::published()->where('slug', $slug)->first(); }); } |
The ‘posts’ inside the bind method should be the same with the {posts} we use in the routes/web.php. Published() is used to prevent visitor to open unpublished posts.
Don’t forget to use App\Post in RouteServiceProvider.php
Next, modify the blog/index.blade.php and change $post->id to $post->slug.
|
1 |
<h2 class="card-title"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></h2> |
Head over to your home url, and click one of the title :
Github Commit.