Membuat Blog dengan Laravel 5.7 – Menampilkan Popular Post
Pada bagian kedelapan ini kita akan :
- Membuat kolom view_count pada tabel post
- Menampilkan widget popular post pada sidebar
- Melakukan increment untuk setiap post yang dilihat
Membuat kolom view_count pada tabel post
Konsepnya adalah view_count akan bertambah satu setiap kali suatu halaman post dibuka. Kita perlu kolom baru untuk menyimpan informasi berapa kali sudah suatu post dilihat.
Buat migration :
|
1 |
php artisan make:migration alter_posts_add_viewcount --table=posts |
|
1 2 3 4 5 6 |
public function up() { Schema::table('posts', function (Blueprint $table) { $table->integer('view_count'); }); } |
Jalankan migration : php artisan migrate
Tambahkan view_count seed ke PostsTableSeeder.php
|
1 |
'view_count' => rand(1,10) * 10, |
Jalankan seeder : php artisan db:seed
Buka Post model dan tambahkan scopePopular() dan image_thumb_url() method :
|
1 2 3 |
public function scopePopular($query){ return $query->orderBy('view_count', 'desc'); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public function getImageThumbUrlAttribute($value){ $imageUrl = ""; if(!is_null($this->image)){ $ext = substr(strrchr($this->image, '.'), 1); $thumbnail = str_replace(".{$ext}", "_thumb.{$ext}", $this->image); $imagePath = public_path() . "/img/" . $thumbnail; if(file_exists($imagePath)) $imageUrl = asset("img/" . $thumbnail); $imageUrl = $this->image; }else{ $imageUrl = ""; } return $imageUrl; } |
Menampilkan popular posts widget pada sidebar
Buka layouts/sidebar.blade.php dan tambahkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="card my-4"> <h5 class="card-header">Popular Posts</h5> <div> <ul class="list-group list-group-flush"> @foreach($popularPosts as $popularPost) <li class="list-group-item"><img src="{{ $post->image_thumb_url }}" width=35% alt=""><a href="{{ route('blog.show', $popularPost->slug)}}"> {{ substr($popularPost->title, 0, 20) }} ...<span class="badge badge-pill badge-secondary float-right">{{ $popularPost->view_count }} {{ str_plural('hit', $popularPost->view_count)}}</span></a></li> @endforeach </ul> </div> </div> |
Modifikasi ComposerServiceProvider.php untuk menambahkan posts , jangan lupa menambahkan use App\Post
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public function boot() { view()->composer('layouts.sidebar', function($view){ $categories = Category::with(['posts' => function($query){ $query->published(); }])->orderBy('title','asc')->get(); return $view->with('categories',$categories); }); view()->composer('layouts.sidebar', function($view){ $popularPosts = Post::published()->popular()->take(3)->get(); return $view->with('popularPosts', $popularPosts); }); } |
Buka project url, di sidebar akan muncul popular postnya.
Melakukan increment pada post
Modifikasi BlogController show() method :
|
1 2 3 4 5 |
public function show(Post $post){ $post->increment('view_count',1); return view("blog.show", compact('post')); } |
Selanjutnya, kita akan merapihkan kode di ComposerServiceProvider.php .
Buatlah folder View di dalam direktori app, dan buat folder Composers di dalamnya. Kita akan menaruh view composer di folder ini. Buat satu file yang bernama NavigationComposer.php (bebas namanya).
|
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 |
<?php namespace App\Views\Composers; use Illuminate\View\View; use App\Category; use App\Post; class NavigationComposer{ public function compose(View $view){ $this->composeCategories($view); $this->composePopularPosts($view); } private function composeCategories(View $view){ $categories = Category::with(['posts' => function($query){ $query->published(); }])->orderBy('title', 'asc')->get(); $view->with('categories', $categories); } private function composePopularPosts(View $view){ $popularPosts = Post::published()->popular()->take(3)->get(); $view->with('popularPosts', $popularPosts); } } |
Modifikasi ComposerServiceProvider.php
|
1 2 3 4 |
public function boot() { view()->composer('layouts.sidebar', NavigationComposer::class); } |
Jangan lupa untuk menambahkan namespace :
|
1 |
use App\Views\Composers\NavigationComposer; |
Selesai!
Github Commit.