Menampilkan Post Category: Tutorial Aplikasi Blog Laravel

Menampilkan Post Category

Menampilkan Post Category. Halo semua kembali lagi di artikel tentang tutorial laravel membuat aplikasi blog sederhana. Sebelumnya kita sudah membahas bagaimana menampilkan post di halaman depan. Kali ini kita akan membuat halaman untuk menampilkan post berdasarkan kategory yang di pilih. misalnya kita pilih kategory laravel maka post yang muncul adalah yang memiliki kategory laravel.

Oke sekarang silahkan buka projek laravel blog yang sebelumnya sudah kita buat, menggunakan visual studio code. Lalu runing server laravel dengan mengetik perintah php artisan serve melalui terminal, aktifkan juga apache dan mysql di aplikasi xampp.

Read More

Menampilkan list Category di menu

Sebelum kita membuat fungsi menalpilkan post category kita akan menampilkan list category di menu caranya, silahkan buka file AppServiceProvider.php yang ada di folde app/providers lalu tambahkan kode ini di bagian fungsi boot

view()->composer(
            'layouts.app',
            function ($view) {
                $view->with('categories', Category::all());
            }
        );

Lalu panggil juga category modelnya dengan kode seperti di bawah ini :

use App\Models\Category;

Sehingga Kode lengkap file AppServiceProvider.php seperti dibawah ini:

<?php

namespace App\Providers;

use App\Models\Category;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        view()->composer(
            'layouts.app',
            function ($view) {
                $view->with('categories', Category::all());
            }
        );
        Paginator::useBootstrapFive();
    }
}

Kemudian silahkan buka file app.blade.php yang berada di folder resources/views/layouts kemudian tambahkan kode seperti ini di bagian ul class navbar :

@foreach($categories as $key => $category)
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('category/' .$category->slug)}}">{{$category->name}}</a>
                        </li>
                        @endforeach

Sehingga kode lengkap app.blade.php menjadi seperti di bawah ini :

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->

    <link href="{{asset('assets/lib/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/css/custom.css')}}" rel="stylesheet">

</head>

<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">
                        @foreach($categories as $key => $category)
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('category/' .$category->slug)}}">{{$category->name}}</a>
                        </li>
                        @endforeach

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                        @if (Route::has('login'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @endif

                        @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                        @endif
                        @else
                        <li class="nav-item dropdown">

                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }}
                            </a>

                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <a href="{{url('admin/dashboard')}}" class="dropdown-item">Dashboard</a>
                                <a href="{{url('admin/categories')}}" class="dropdown-item">Categories</a>
                                <a href="{{url('admin/posts')}}" class="dropdown-item">Posts</a>
                                <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <script src="{{asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{asset('assets/lib/jquery/jquery-3.6.3.min.js')}}"></script>
</body>

</html>

Jika sudah silahkan di simpan maka tampilan menu menjadi seperti ini :

Menampilkan Post Category

Membuat fungsi Post Category Item

Silahkan Buka HomeController.php yang ada di folder app/Http/Controollers kemudian buat fungsi baru dengan kode seperti di bawah ini :

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'));
    }

Maka kode lengkap dari 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::where('status', 1)->orderBy('id', 'desc')->paginate(6);
        return view('frontend.index', compact('posts'));
    }
    public function postDetail($post_slug)
    {
        $post = Post::where('posts.slug', $post_slug)->first();
        return view('frontend.detail', compact('post'));
    }
    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'));
    }
}

Membuat View Category Item

Silahkan buat file view baru di folder resources/views/frontend/ kemudian buat file dengan nama category_item.blade.php lalu copy code di bawah ini :

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{$category->name}}</li>
            </ol>
        </nav>
        @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>
                    <a href="{{url('post/'.$post->slug)}}" class="btn btn-primary">Read More...</a>
                </div>
            </div>
        </div>

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

@endsection

Jika sudah silahkan klik category yang ada di menu, maka akan menampilkan post sesuai dengan category yang di pilih. Oke demikian Artikel tutorial yang saya berikan, mudah mudahan bermanfaat untuk tutorial Laravel video silahakan kunjungi channel @edikomputer jangan lupa untuk share like dan subscribe. sampai ketemu lagi di tutorial selanjutnya

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

2 comments

    1. Tambahkan code ini di file route web.php Route::get(‘/category/{category_slug}’, [HomeController::class, ‘categoryItem’]);