Membuat Related Post : Tutorial Laravel blog

Membuat Related Post. Halo sobat edikomputer kita kembali di artikel tutorial lanjutan pembuatan aplikasi blog sederhana menggunakan laravel. kali ini kita akan membahas tentang bagaimana cara membuat related post pada detail artikel.

Tapi sebelum kita membuat related post kita akan menambahkan teks kategory yang ada di halaman list artikelnya dulu supaya nanti kita bisa tau post tersebut adalah kategori apa gitu.

Menampilkan nama kategori di post

Seperti yang sudah kita buat di table posts tidak ada nama kategory hanya saja kita mengambil id kategorynya sehingga ketika kita panggil field category_id maka yang muncul hanya angka id dari kategory yang tertaut. Nah gimana caranya supaya nama kategorynya bisa muncul di table posts, nah kita bisa menggunakan fitur join, seperti apa caranya, silahkan kalian buka file HomeController.php yang ada di app/Http/Controllers untuk membuat join kamu hanya mengubah query yang ada di variable posts yang ada di bagian method index

$posts = Post::join('categories', 'categories.id', '=', 'posts.category_id')
            ->select('posts.*', 'categories.name as category_name')
            ->where('status', 1)
            ->orderBy('id', 'desc')
            ->paginate(6);

Selain itu kita juga merubah di bagian method postDetail

$post = Post::join('categories', 'categories.id', '=', 'posts.category_id')
            ->select('posts.*', 'categories.name')->where('posts.slug', $post_slug)->first();

dan kita juga menambahkan query baru di bagian method postDetail

$relatedPost = Post::where('category_id', $post->category_id)->take(3)->get();

Nah untuk kode lengkap yang ada di file HomeController.php adalah seperti di bawah ini

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use App\Models\Post;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        $posts = Post::join('categories', 'categories.id', '=', 'posts.category_id')
            ->select('posts.*', 'categories.name as category_name')
            ->where('status', 1)
            ->orderBy('id', 'desc')
            ->paginate(6);
        return view('frontend.index', compact('posts'));
    }
    public function postDetail($post_slug)
    {
        $post = Post::join('categories', 'categories.id', '=', 'posts.category_id')
            ->select('posts.*', 'categories.name')->where('posts.slug', $post_slug)->first();
        $relatedPost = Post::where('category_id', $post->category_id)->take(3)->get();
        return view('frontend.detail', compact('post', 'relatedPost'));
    }
    public function categoryItem($category_slug)
    {
        $category = Category::where('slug', $category_slug)->first();
        $posts = Post::where('category_id', $category->id)->paginate(9);
        return view('frontend.category_item', compact('posts', 'category'));
    }
}

Seting halaman view

Sekarang kita akan seting halaman viewnya tapi sebelumnya kita akan menambahakn kode css untuk image thumbnail di bagian related postnya silahkan kalian buka file custom.css yang berada di folder public/assets/css/custom.css tambahkan class seperti ini :

.img-related img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

Nah sekarang kita akan menampilkan nama kategory di bagian list post dan juga di detail post. Silahkan buka file index.blade.php yang ada di folder resources/views/frontend/ lalu ubah semua kode menjadi seperti di bawah ini :

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        @forelse($posts as $key => $post)

        <div class="col-md-4 mb-3">
            <div class="card rounded-4">
                <div class="img-frame">
                    <img src="{{url('uploads/post/' .$post->image)}}" class="card-img-top img-fluid rounded-top-4"
                        alt="{{$post->title}}">
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{$post->title}}</h5>
                    <p class="card-text">{{$post->description}}</p>
                    <p class="d-flex justify-content-between align-items-start">
                        <a href="{{url('post/'.$post->slug)}}" class="btn btn-primary">Read More...</a>
                        <span class="badge text-bg-success">{{$post->category_name}}</span>
                    </p>

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

        @empty
        <div class="text-center">
            No Post Available
        </div>
        @endforelse
        <div class="my-4">
            {!! $posts->links() !!}
        </div>
    </div>
</div>

@endsection

Sekarang silahkan di save dan hasilnya akan seperti di bawah ini :

Lalu ubah juga semua kode yang ada di file detail.blade.php menjadi seperti di bawah ini :

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="col-md-7 mx-auto">
        <h2 class="fw-bold fs-1">{{$post->title}}</h2>
        <p>{{$post->created_at}} </p>
        <img src="{{url('uploads/post/' .$post->image)}}" class="img-fluid rounded-4 my-3">
        <p class="lh-lg fs-5">
            {{$post->content}}
        </p>
        <span class="badge text-bg-success">{{$post->name}}</span>
        <h4 class="my-4">Related Post</h4>
        <div class="row">
            @foreach($relatedPost as $key => $post)

            <div class="col-md-4 mb-3">
                <div class="card rounded-4">
                    <div class="img-related">
                        <img src="{{url('uploads/post/' .$post->image)}}" class="card-img-top img-fluid rounded-top-4"
                            alt="{{$post->title}}">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{$post->title}}</h5>
                        <p class="card-text">{{$post->description}}</p>
                        <p class="d-flex justify-content-between align-items-start">
                            <a href="{{url('post/'.$post->slug)}}" class="btn btn-primary">Read More...</a>
                            <span class="badge text-bg-success">{{$post->name}}</span>
                        </p>

                    </div>
                </div>
            </div>
            @endforeach

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

@endsection

Nah jika sudah silahkan save dan hasilnya akan seperti di bawah ini :

Oke demikian tutorial yang saya berikan pada kesempatan kali ini semoga bermanfaat. Buat kamu yang ingin belajar laravel melalui video kalian bisa simak di channel youtube edikomputer