Tutorial Membuat CMS Sederhana di Laravel #Part 7 - Membuat Frontend Post atau Article

Berikut adalah tutorial untuk menampilkan data artikel atau post yang sudah dibuat di halaman admin ke halaman frontend. Kita akan merancang tampilan yang menarik dengan Bootstrap agar terlihat profesional dan menarik bagi pembaca.

Langkah 1: Buat Route di web.php

Tambahkan route untuk halaman artikel di routes/web.php. Route ini akan memuat semua artikel dan juga menampilkan artikel perorangan berdasarkan slug-nya.

use App\Http\Controllers\Frontend\PostController as FrontendPostController;

Route::get('/articles', [FrontendPostController::class, 'index'])->name('articles.index');
Route::get('/articles/{slug}', [FrontendPostController::class, 'show'])->name('articles.show');

Langkah 2: Buat Controller untuk Frontend

Buat controller khusus frontend di folder dengan cmd dan beri nama PostController.php:

php artisan make:controller \Frontend\PostController

di file app/Http/Controllers/Frontend isi code berikut:

<?php

namespace App\Http\Controllers\Frontend;

use App\Http\Controllers\Controller;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->paginate(6);
        return view('frontend.posts.index', compact('posts'));
    }

    public function show($slug)
    {
        $post = Post::where('slug', $slug)->firstOrFail();
        return view('frontend.posts.show', compact('post'));
    }
}

Langkah 3: Buat Views untuk Artikel di Frontend

Sekarang kita akan membuat dua view untuk daftar artikel (index.blade.php) dan tampilan detail artikel (show.blade.php). Buat folder baru resources/views/frontend/posts/.

index.blade.php - Tampilan daftar artikel

<!-- resources/views/frontend/articles/index.blade.php -->
@extends('layouts.frontend')

@section('content')
<div class="container mt-5">
    <h1 class="text-center mb-5">Explore Our Latest Articles</h1>
    <div class="row">
        @foreach($posts as $post)
            <div class="col-md-4 mb-4">
                <div class="card article-card h-100 shadow-sm border-0">
                    <div class="article-image-wrapper">
                        <img src="{{ asset('storage/' . $post->image) }}" class="card-img-top article-image" alt="{{ $post->title }}">
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ $post->title }}</h5>
                        <p class="card-text">{{ Str::limit(strip_tags($post->content), 100) }}</p>
                        <a href="{{ route('articles.show', $post->slug) }}" class="mt-auto btn btn-primary stretched-link">Read More</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="d-flex justify-content-center mt-4">
        {{ $posts->links() }}
    </div>
</div>
@endsection

<style>
    .article-card {
        transition: transform 0.3s ease;
    }
    .article-card:hover {
        transform: translateY(-10px);
    }
    .article-image-wrapper {
        overflow: hidden;
        border-radius: 10px 10px 0 0;
    }
    .article-image {
        transition: transform 0.4s ease;
    }
    .article-image:hover {
        transform: scale(1.1);
    }
</style>

show.blade.php - Tampilan detail artikel

<!-- resources/views/frontend/articles/show.blade.php -->
@extends('layouts.frontend')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-lg-10 offset-lg-1">
            <div class="card shadow-sm border-0">
                <div class="article-image-wrapper">
                    <img src="{{ asset('storage/' . $post->image) }}" class="card-img-top article-image-detail" alt="{{ $post->title }}">
                </div>
                <div class="card-body">
                    <h1 class="card-title mb-4">{{ $post->title }}</h1>
                    <p class="text-muted">Published on {{ $post->created_at->format('F j, Y') }}</p>
                    <div class="content mt-4">
                        {!! $post->content !!}
                    </div>
                    <a href="{{ route('articles.index') }}" class="btn btn-secondary mt-5">Back to Articles</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<style>
    .article-image-wrapper {
        overflow: hidden;
        border-radius: 10px 10px 0 0;
    }
    .article-image-detail {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-height: 400px;
    }
</style>

Langkah 4: Tambahkan Styling pada Layout

Jika Anda ingin menggunakan layout yang sama dengan halaman frontend, tambahkan navbar dan footer yang minimalis di resources/views/layouts/frontend.blade.php.

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'My Blog')</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>
<body style="font-family: 'Roboto', sans-serif;">
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm py-3">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">My Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="{{ route('articles.index') }}">Articles</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ route('login') }}">Admin</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="py-5">
        @yield('content')
    </main>

    <footer class="bg-light text-center py-4">
        <p>&copy; {{ date('Y') }} My Blog. All rights reserved.</p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

<style>
    .navbar-brand {
        font-weight: bold;
        font-size: 1.25rem;
    }
    footer p {
        font-size: 0.9rem;
        color: #888;
    }
</style>

Langkah 5: Tes Hasil

Sekarang buka http://localhost:8000/articles di browser untuk melihat daftar artikel, hasil akan seperti berikut:

Klik read more dan hasil akan seperti berikut:

Silahkan dicoba!! tinggalkan kolom komenter jika ada yang mau didiskusikan