Cara Menampilkan Data dari Database ke Website dengan Controller dan Blade Laravel 13

Tujuan Tutorial Part 3

Di Part 1 kita sudah install Laravel 13. Di Part 2 kita sudah konek ke database. Nah di Part 3 ini adalah bagian paling penting: kita akan belajar cara mengambil data dari tabel posts dan menampilkannya di website CuloboStore kita.

Kita akan menggunakan 3 komponen utama MVC di Laravel: Model, Controller, dan Blade View.

Langkah 1: Membuat Model dan Controller

Buka terminal di folder project culobostore. Kita akan membuat Model dan Controller sekaligus dengan 1 perintah ajaib:

php artisan make:model Post -mcr

Penjelasan:

• Post: Nama Model. Otomatis akan terhubung ke tabel posts
• -m: Buat file Migration
• -c: Buat file Controller
• -r: Buat Controller dengan method Resource: index, create, show, dll

Langkah 2: Setting Model Post

Buka file app/Models/Post.php. Karena kita tidak pakai Migration, kita perlu kasih tahu Laravel nama tabel kita. Tambahkan ini:

protected $table = "posts";

Langkah 3: Mengambil Data di Controller

Buka file app/Http/Controllers/PostController.php. Di dalam function index() isi dengan kode berikut:

public function index()
{
    $posts = Post::latest()->get();
    return view("posts.index", compact("posts"));
}

Kode ini artinya: Ambil semua data dari tabel posts, urutkan dari yg terbaru, lalu kirim ke file view posts.index

Langkah 4: Membuat File Blade untuk Menampilkan Data

Buat folder baru: resources/views/posts. Di dalam folder itu buat file index.blade.php. Isi dengan:

@foreach($posts as $post)
    

{{ $post->title }}

{{ $post->excerpt }}

@endforeach

Langkah 5: Membuat Route

Buka file routes/web.php. Tambahkan route berikut:

use AppHttpControllersPostController;
Route::get("/posts", [PostController::class, "index"]);

Langkah 6: Testing

Jalankan php artisan serve lalu buka http://localhost:8000/posts. Jika berhasil, maka judul artikel "Cara Install Laravel 13" dan "Cara Koneksi Database" akan muncul di halaman.

Kesimpulan

Selamat! Kamu sudah berhasil membuat fitur utama website: Menampilkan data dari database. Di Part 4 kita akan belajar membuat halaman Detail Artikel dan styling dengan Bootstrap 5 agar tampilan CuloboStore lebih profesional. #Part 4 akan segera rilis.