CRUD Laravel 11 – Menampilkan Data dari Database

Dwi Purnomo
Posted by Dwi Purnomo 13 Oktober 2024
CRUD Laravel 11 – Menampilkan Data dari Database
CRUD Laravel 11 – Menampilkan Data dari Database

CRUD Laravel 11 – Menampilkan Data dari Database – Menampilkan data dari database adalah salah satu fitur dasar dalam aplikasi berbasis Laravel. Dengan menggunakan prinsip CRUD, langkah pertama dalam membangun aplikasi adalah kemampuan untuk menampilkan data yang tersimpan dalam database ke tampilan frontend. Pada artikel ini, kita akan membahas cara menampilkan data dari database di Laravel 11 menggunakan Eloquent ORM, controller, dan view.

Artikel ini akan menjelaskan langkah-langkah menampilkan data dengan jelas dan terstruktur, mulai dari penyiapan model hingga penggunaan view untuk menampilkan data. Selain itu, kita juga akan membahas beberapa fitur bawaan Laravel seperti pagination dan filtering.

 

Menampilkan Data dari Database

1. Menambahkan Method di Controller

Untuk menampilkan data, kita memerlukan controller yang akan mengelola logika penarikan data dari database dan mengirimkannya ke view. Buka file PostController.php yang ada di app/Http/Controllers/ dan tambahkan metode untuk mengambil data dari model Post:

namespace App\Http\Controllers;

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

class PostController extends Controller
{
    public function index()
    {
        // Mengambil semua data post dari database
        $posts = Post::all();
        
        // Mengirim data ke view 'posts.index'
        return view('posts.index', compact('posts'));
    }
}

Pada contoh di atas, kita mengambil semua data dari tabel posts menggunakan metode all() pada model Post dan mengirimkan data tersebut ke view menggunakan fungsi compact.

2. Membuat View untuk Menampilkan Data

Sekarang, kita perlu membuat tampilan yang akan menampilkan data yang sudah diambil dari database. Kita akan membuat file view di folder resources/views/posts. Buat file index.blade.php di dalam folder resources/views/posts/:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Post</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Daftar Post</h1>

        <table class="table" border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Judul</th>
                    <th>Konten</th>
                    <th>Tanggal Dibuat</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($posts as $post)
                    <tr>
                        <td>{{ $post->id }}</td>
                        <td>{{ $post->title }}</td>
                        <td>{{ $post->content }}</td>
                        <td>{{ $post->created_at }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
        </script>
    </div>
</body>

</html>

Pada view ini, kita menggunakan blade template untuk melakukan iterasi pada variabel $posts yang dikirimkan dari controller dan menampilkan data di dalam tabel. Pada view diatas, saya juga telah menambahkan framework css yaitu Bootstrap agar tampilan lebih rapi.

3. Pastikan Sudah Menambahkan Route

Untuk mengakses data yang sudah ditampilkan, kita perlu menambahkan route yang mengarah ke metode index dari PostController. Pada part sebelumnya, kita sudah membuat route resource untuk menangani semua method pada controller yaitu seperti ini :

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;

Route::resource('posts', PostController::class);

4. Menambahkan Data Dummy untuk Uji Coba

Agar data bisa ditampilkan di halaman, kita perlu menambahkan beberapa data ke tabel posts. Carannya, masuk ke DatabaseSeeder.php dari yang berada di database > seeders > DatabaseSeeder.php. Kemudian masukkan datanya seperti ini :

<?php

namespace Database\Seeders;

use App\Models\Post;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        Post::create([
            'title' => 'Judul Post 1',
            'content'   => 'Konten untuk post 1'
        ]);
        Post::create([
            'title' => 'Judul Post 2',
            'content'   => 'Konten untuk post 2'
        ]);
    }
}

Setelah itu, Jalankan perintah berikut untuk memasukkan data dummy ke database menggunakan seeder :

php artisan migrate:fresh --seed

Hasilnya akan seperti ini :

Manambahkan data dummy menggunakan seeders - Inovasicode.com
Manambahkan data dummy menggunakan seeders

5. Hasil Proses Menampilkan Data dari Database

Menampilkan data dari database - Inovasicode.com
Menampilkan data dari database – Inovasicode.com

 

Kesimpulan

Menampilkan data dari database di Laravel 11 sangatlah mudah dengan bantuan Eloquent ORM. Langkah-langkah yang dibahas di atas, mulai dari membuat model, controller, hingga view, adalah dasar dalam membangun aplikasi berbasis CRUD. Dengan fitur pagination dan kemampuan untuk mengelola data dalam skala besar, Laravel 11 memberikan solusi yang powerful dan efisien untuk pengembangan aplikasi modern.

 

Part Selanjutnya

Tags: