Tutorial Membuat CMS Sederhana di Laravel #Part 9 - Modul Manajemen Pages

Berikut adalah tutorial untuk membuat modul pages yang bisa dibuat dan dikelola dari administrator serta ditampilkan di frontend dengan slug yang dinamis, seperti About Us, Privacy Policy, atau Contact Us.

Sebelum ke pages, teman-teman diharapkan sudah menyelesaikan tutorial sebelumnya tentang fitur komentar di artikel post. Berikut langkah-lagkah membuat pages:

1. Buat Model, Migration, dan Controller untuk Page

Mulailah dengan membuat model, migration, dan controller untuk halaman dinamis:

php artisan make:model Page -m
php artisan make:controller PageController --resource
php artisan make:controller Frontend\PageController

Dengan peritah di atas, kita sudah membuat model Page di app\Models dan migration di database\migrations.
PageController di PageController akan menangani operasi CRUD di halaman admin.

Controller Frontend\PageController akan menangani tampilan halaman di bagian frontend.

2. Definisikan Kolom Page di Migration

Buka file database/migrations/xxxx_xx_xx_xxxxxx_create_pages_table.php yang baru dibuat, lalu tambahkan kolom yang diperlukan:

public function up()
{
    Schema::create('pages', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('slug')->unique();
        $table->text('content');
        $table->timestamps();
    });
}

Jalankan migrasi untuk membuat tabel:

php artisan migrate

Buka model app\Models\Page.php dan edit menjadi sebagai berikut:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Page extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'slug', 'content'];
}

3. Tambahkan Routing

Tambahkan rute untuk mengelola halaman di routes/web.php:

use App\Http\Controllers\PageController;
use App\Http\Controllers\Frontend\PageController as FrontendPageController;

// Routes for Admin Page Management
Route::prefix('admin')->middleware(['auth', 'admin'])->group(function () {
    Route::resource('admin/pages', PageController::class);
});

// Routes for Frontend Page Display
Route::get('/page/{slug}', [Frontend\PageController::class, 'show'])->name('page.show');

4. Implementasi CRUD di Admin Panel

Buka app/Http/Controllers/PageController.php dan tambahkan kode berikut untuk implementasi CRUD:

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Page;
use Illuminate\Support\Str;

class PageController extends Controller
{
    public function index()
    {
        $pages = Page::all();
        return view('admin.pages.index', compact('pages'));
    }

    public function create()
    {
        return view('admin.pages.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|unique:pages',
            'content' => 'required'
        ]);

        Page::create([
            'title' => $request->title,
            'slug' => Str::slug($request->title),
            'content' => $request->content,
        ]);

        return redirect()->route('pages.index')->with('success', 'Page created successfully');
    }

    public function edit(Page $page)
    {
        return view('admin.pages.edit', compact('page'));
    }

    public function update(Request $request, Page $page)
    {
        $request->validate([
            'title' => 'required|unique:pages,title,' . $page->id,
            'content' => 'required'
        ]);

        $page->update([
            'title' => $request->title,
            'slug' => Str::slug($request->title),
            'content' => $request->content,
        ]);

        return redirect()->route('pages.index')->with('success', 'Page updated successfully');
    }

    public function destroy(Page $page)
    {
        $page->delete();
        return redirect()->route('pages.index')->with('success', 'Page deleted successfully');
    }
}

5. Membuat View untuk CRUD di Admin

Buat folder baru di folder admin dengan nama pages. File: resources/views/admin/pages/index.blade.php

@extends('layouts.admin')

@section('content')
    <h1>Pages</h1>
    <a href="{{ route('pages.create') }}" class="btn btn-primary">Add New Page</a>
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Slug</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($pages as $page)
                <tr>
                    <td>{{ $page->title }}</td>
                    <td>{{ $page->slug }}</td>
                    <td>
                        <a href="{{ route('pages.edit', $page->id) }}" class="btn btn-warning">Edit</a>
                        <form action="{{ route('pages.destroy', $page->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

Kemudian but dua file create.blade. php dan edit.blade.php
File: resources/views/admin/pages/create.blade.php dan edit.blade.php

Kedua file ini mirip, dengan hanya sedikit perbedaan.

create.blade.php

@extends('layouts.admin')

@section('content')
    <h1>Create New Page</h1>
    <form action="{{ route('pages.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label>Title</label>
            <input type="text" name="title" class="form-control">
        </div>
        <div class="form-group">
            <label>Content</label>
            <textarea name="content" class="form-control" rows="5"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create Page</button>
    </form>
@endsection

edit.blade.php

@extends('layouts.admin')

@section('content')
    <h1>Edit Page</h1>
    <form action="{{ route('pages.update', $page->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label>Title</label>
            <input type="text" name="title" class="form-control" value="{{ $page->title }}">
        </div>
        <div class="form-group">
            <label>Content</label>
            <textarea name="content" class="form-control" rows="5">{{ $page->content }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Update Page</button>
    </form>
@endsection

6. Menampilkan Halaman di Frontend Berdasarkan Slug

Buka app/Http/Controllers/Frontend/PageController.php dan tambahkan fungsi untuk menampilkan page:

<?php

namespace App\Http\Controllers\Frontend;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

use App\Models\Page;

class PageController extends Controller
{
    public function show($slug)
    {
        $page = Page::where('slug', $slug)->firstOrFail();
        return view('frontend.pages.show', compact('page'));
    }
}

7. Buat View untuk Halaman Frontend

File: resources/views/frontend/pages/show.blade.php

@extends('layouts.frontend')

@section('content')
<div class="container mt-5">
    <h1>{{ $page->title }}</h1>
    <div>{!! $page->content !!}</div>
</div>
@endsection

Edit file layouts.frontend.blade.php untuk menampilkan menu page di navbar. 

@foreach ($pages as $page)
     <li class="nav-item"><a class="nav-link" href="{{ route('page.show', $page->slug) }}">{{ $page->title }}</a></li>
@endforeach

Agar semua halaman bisa akses page, kita perlu menambahkan code Page::all() ke sebuah view composer atau gunakan middleware untuk menyediakannya ke setiap view frontend.

Buka AppServiceProvider.php di app/Providers:

use Illuminate\Support\Facades\View;
use App\Models\Page;

public function boot()
{
    View::composer('frontend.*', function ($view) {
        $view->with('pages', Page::all());
    });
}

Dengan demikian semua frontend akan bisa akses semua halaman page. 

8. Testing

Buat halaman baru di Admin Panel seperti About Us atau Privacy Policy.

Akses halaman tersebut di frontend dengan http://localhost:8000/page/about-us.

Dengan mengikuti langkah-langkah di atas, Anda kini memiliki sistem dinamis untuk mengelola page yang bisa diakses baik dari admin maupun frontend.