Cara Menampilkan Post : Tutorial Laravel 9 Blog

Cara menampilkan post. Halo sobat edikomputer.com ini adalah lanjutan tutorial Laravel 9 membuat aplikasi blog sederhana. Nah sebelumnya kita sudah menyelesaikan tahapan pembuatan bagian admin dari laravel_blog. Kali ini kita akan membuat bagian frontend, dimana post yang sudah kita buat akan kita tampilkan di halaman depan sehingga bisa di akses oleh pengguna.

Dan di tutorial ini kita tidak akan membuat table baru di database karena kita hanya merequest data melalui framework laravel untuk di tampilkan ke pengguna.

Seting Home Controller

silahkan kalian buka file HomeController.php yang berada di app/Http/Controllers kemudian ubah semua code yang ada di file HomeController.php menjadi seperti di bawah ini :

<?php

namespace App\Http\Controllers;

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('slug', $post_slug)->first();
        return view('frontend.detail', compact('post'));
    }
}

Sekarang Buka web.php yang berada di folder routes kemudian tambahkan Route baru seperti di bawah ini :

Route::get('/', [HomeController::class, 'index']);
Route::get('/post/{post_slug}', [HomeController::class, 'postDetail']);

Untuk Kode lengkap web.php seperti di bawah ini :

<?php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Admin\DashboardController;
use App\Http\Controllers\Admin\CategoryController;
use App\Http\Controllers\Admin\PostController;
use App\Http\Controllers\HomeController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Route::get('/', [HomeController::class, 'index']);
Route::get('/post/{post_slug}', [HomeController::class, 'postDetail']);

Auth::routes();

Route::prefix('admin')->middleware(['auth'])->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index']);
    // Category Route
    Route::controller(CategoryController::class)->group(function () {
        Route::get('/categories', 'index');
        Route::get('/categories/create', 'create');
        Route::post('/categories', 'store');
        Route::get('/categories/edit/{category}', 'edit');
        Route::put('/categories/{category}', 'update');
        Route::get('/categories/delete/{category_id}', 'destroy');
    });
    // Post Route
    Route::controller(PostController::class)->group(function () {
        Route::get('/posts', 'index');
        Route::get('/posts/create', 'create');
        Route::post('/posts', 'store');
        Route::get('/posts/edit/{post}', 'edit');
        Route::put('/posts/{post}', 'update');
        Route::get('/posts/delete/{post_id}', 'destroy');
    });
});

Membuat Halaman View

Sekarang kita akan membuat halaman view, silahkan buka folder resources/views/ lalu buat folder frontend, di dalam folder frontend buat file index.blade.php dan detail.blade.php. di dalam file index.blade.php silahkan copy kode berikut 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>
                    <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

Kemudian untuk file detail.blade.php silahkan copy kode 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>
    </div>
</div>

@endsection

Membuat Custom CSS

Sekarang kita akan membuat sebuah file css yang fungsinya untuk membuat style yang tidak tersedia di bootstrap. silahkan kalian buka folder public/assets. kemudian buat sebuah folder css lalu didalam folder css buat sebuah file dengan nama custom.css kemudian copy kode berikut ini :

.img-frame img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

Selanjutnya kita akan memanggil custom cssnya melalui file app.blade.php dimana file app.blade.php merupakan file extends untuk setiap halaman yang kita buat. silahkan buka folder resources/views/layouts/app.blade.php kemudian tambahkan kode untuk memanggil custom.css seperti di bawah ini :

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

Letakkan kode tersebut di atas penutup tag </head>.

Sekarang silahkan coba akses dengan mengetik http://localhost:8000 jangan lupa nyalakan apache dan mysql aktifkan juga server artisan laravelnya.

Demikian Artikel tutorial cara menampilkan post pada tutorial membuat aplikasi blog sederhana menggunakan framework laravel 9.