Tutorial Membuat CMS Sederhana di Laravel #Part 8 - Menambahkan fitur komentar

Berikut adalah tutorial lengkap untuk menambahkan fitur komentar dengan CAPTCHA di halaman artikel (show.blade.php), yang masuk ke halaman administrator untuk persetujuan sebelum tampil di frontend. Sebelum lanjut ke tutorial ini, silahkan ikuti tutorial sebelumnya tentang Membuat Frontend Post. Berikut langkah-langkahnya:

Langkah 1: Membuat Tabel comments

Buat migration untuk tabel comments yang menyimpan komentar yang masuk, sekaligus approval administrator.

php artisan make:migration create_comments_table

Buka file migration yang baru dan tambahkan struktur berikut:

// database/migrations/xxxx_xx_xx_create_comments_table.php
public function up()
{
    Schema::create('comments', function (Blueprint $table) {
        $table->id();
        $table->foreignId('post_id')->constrained()->onDelete('cascade');
        $table->string('name');
        $table->string('email');
        $table->text('comment');
        $table->boolean('approved')->default(false);
        $table->timestamps();
    });
}

Jalankan migration:

php artisan migrate

Langkah 2: Membuat Model Comment

Buat model Comment dengan relasi ke Post.

php artisan make:model Comment

Tambahkan relasi di dalam model Comment dan Post.

// app/Models/Comment.php
namespace App\Models;

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

class Comment extends Model
{
    use HasFactory;

    protected $fillable = ['post_id', 'name', 'email', 'comment', 'approved'];

    public function post()
    {
        return $this->belongsTo(Post::class);
    }
}

Di dalam model Post, tambahkan relasi ke Comment.

// app/Models/Post.php
public function comments()
{
    return $this->hasMany(Comment::class);
}

Langkah 3: Menambahkan CAPTCHA

Install package CAPTCHA menggunakan Google reCAPTCHA atau Laravel Captcha.

Install mews/captcha:

composer require mews/captcha

Lalu tambahkan konfigurasi di dalam config/app.php:

'providers' => [
    // ...
    Mews\Captcha\CaptchaServiceProvider::class,
],
'aliases' => [
    // ...
    'Captcha' => Mews\Captcha\Facades\Captcha::class,
],

Lakukan publish dengan ketik cmd berikut:

php artisan vendor:publish --provider="Mews\Captcha\CaptchaServiceProvider"

Langkah 4: Membuat Form Komentar dengan CAPTCHA

Buka show.blade.php dan tambahkan form komentar di bagian bawah artikel.

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

@section('content')
<div class="container mt-5">
    <!-- Artikel -->
    <div class="row">
        <div class="col-lg-10 offset-lg-1">
            <h1>{{ $post->title }}</h1>
            <img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}" class="img-fluid">
            <div class="mt-3">{!! $post->content !!}</div>
        </div>
    </div>

    <!-- Form Komentar -->
    <div class="row mt-5">
        <div class="col-lg-8 offset-lg-1">
            <h4>Leave a Comment</h4>
            <form action="{{ route('comments.store', $post->id) }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" name="email" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" rows="4" required></textarea>
                </div>
                <div class="form-group">
                    <label>CAPTCHA</label>
                    {!! captcha_img() !!}
                    <input type="text" name="captcha" class="form-control mt-2" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>

    <!-- Daftar Komentar -->
    <div class="row mt-5">
        <div class="col-lg-8 offset-lg-1">
            <h4>Comments</h4>
            @foreach($post->comments->where('approved', true) as $comment)
                <div class="mb-3">
                    <strong>{{ $comment->name }}</strong>
                    <p>{{ $comment->comment }}</p>
                    <hr>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

Langkah 5: Menambahkan Route dan Controller

Tambahkan route untuk menyimpan komentar.

// routes/web.php
use App\Http\Controllers\CommentController;

Route::post('/comments/{post}', [CommentController::class, 'store'])->name('comments.store');

Buat CommentController untuk menyimpan komentar berikut:

php artisan make:controller CommentController

Edit file CommentController

// app/Http/Controllers/CommentController.php
namespace App\Http\Controllers;

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

class CommentController extends Controller
{
    public function store(Request $request, Post $post)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'comment' => 'required',
            'captcha' => 'required|captcha',
        ]);

        Comment::create([
            'post_id' => $post->id,
            'name' => $request->name,
            'email' => $request->email,
            'comment' => $request->comment,
            'approved' => false,
        ]);

        return back()->with('message', 'Comment submitted, awaiting approval.');
    }
}

Langkah 6: Admin Approval di Halaman Administrator

Buat halaman di admin untuk mengelola komentar.

Route Admin:

use App\Http\Controllers\AdminCommentController;

// routes/web.php
Route::get('/admin/comments', [AdminCommentController::class, 'index'])->name('admin.comments.index');
Route::post('/admin/comments/{comment}/approve', [AdminCommentController::class, 'approve'])->name('admin.comments.approve');

Controller Admin:

Buat AdminCommentController untuk melihat dan meng-approve komentar.

php artisan make:controller AdminCommentController

Edit file  AdminCommentControlle

// app/Http/Controllers/AdminCommentController.php
namespace App\Http\Controllers;

use App\Models\Comment;

class AdminCommentController extends Controller
{
    public function index()
    {
        $comments = Comment::where('approved', false)->get();
        return view('comments.index', compact('comments'));
    }

    public function approve(Comment $comment)
    {
        $comment->update(['approved' => true]);
        return back()->with('message', 'Comment approved');
    }
}

View untuk Admin Komentar:

Buat file index.blade.php untuk tampilan komentar yang perlu di-approve.

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

@section('content')
<div class="container mt-5">
    <h2>Pending Comments</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Comment</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($comments as $comment)
                <tr>
                    <td>{{ $comment->name }}</td>
                    <td>{{ $comment->email }}</td>
                    <td>{{ $comment->comment }}</td>
                    <td>
                        <form action="{{ route('admin.comments.approve', $comment->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-success">Approve</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

Setelah menyelesaikan langkah-langkah ini, sistem komentar dengan CAPTCHA dan persetujuan admin akan bekerja di halaman artikel frontend dan bisa dikelola di halaman admin.

Jika tutorial ini berhasil, akses detail article di frontend, dan tambahkan komentar seperti berikut:

Setelah input komentar, maka akan muncul di halaman admin:

Dan jika kita approve, maka sudah muncul di komentar artikel sebagai berikut: