Laravel 12 CRUD #8: Membuat Halaman Daftar Siswa (Read)

👀 Waktunya melihat data siswa yang sudah kita simpan! Di artikel sebelumnya kita sudah membuat model, controller, dan rute. Sekarang kita akan mengisi method index() di controller untuk mengambil semua data siswa dari database, lalu menampilkannya dalam bentuk tabel menggunakan Blade (template Laravel). Siap? Yuk mulai! 🚀

Langkah 1: Ambil Data dari Database di Controller

1 Buka file controller app/Http/Controllers/SiswaController.php. Cari method index(). Sekarang kita akan mengambil semua data siswa menggunakan model Siswa. Ubah method index() menjadi seperti ini:

use App\Models\Siswa; // tambahkan di bagian atas file

public function index()
{
    $siswa = Siswa::all(); // ambil semua data dari tabel siswa
    return view('siswa.index', compact('siswa')); // kirim data ke view
}
            

Penjelasan:

Siswa::all() → perintah untuk mengambil semua data dari tabel siswa.
compact('siswa') → mengirim variabel $siswa ke file tampilan.
view('siswa.index', ...) → menampilkan file resources/views/siswa/index.blade.php.

💡 Jangan lupa tambahkan use App\Models\Siswa; di bagian atas file controller agar bisa menggunakan model Siswa.

Langkah 2: Buat Tampilan dengan Blade (Tabel)

2 Sekarang kita buat file tampilan yang akan menampilkan data dalam tabel. Buka file resources/views/siswa/index.blade.php (jika belum ada, buat file baru). Isi dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Siswa</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f4f9f4;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #059669;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #10b981;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin: 2px;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
        }
        .btn-primary {
            background: #10b981;
            color: white;
        }
        .btn-warning {
            background: #f59e0b;
            color: white;
        }
        .btn-danger {
            background: #ef4444;
            color: white;
        }
        .btn-success {
            background: #059669;
            color: white;
            margin-bottom: 10px;
            display: inline-block;
        }
        .empty {
            text-align: center;
            color: #888;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Daftar Siswa</h1>
        
        <a href="#" class="btn btn-success">+ Tambah Siswa</a> <!-- nanti kita buat link ini -->
        
        <table>
            <thead>
                
                    <th>ID</th>
                    <th>Nama</th>
                    <th>Kelas</th>
                    <th>Alamat</th>
                    <th>Aksi</th>
                
            </thead>
            <tbody>
                @forelse ($siswa as $s)
                
                    {{ $s->id }}
                    {{ $s->nama }}
                    {{ $s->kelas }}
                    {{ $s->alamat }}
                    
                        <a href="#" class="btn btn-primary">Detail</a>
                        <a href="#" class="btn btn-warning">Edit</a>
                        <a href="#" class="btn btn-danger">Hapus</a>
                    
                
                @empty
                
                    Belum ada data siswa. Yuk tambah data! 🎉
                
                @endforelse
            </tbody>
        </table>
    </div>
</body>
</html>
            

Penjelasan Blade yang digunakan:

@forelse ($siswa as $s) → loop untuk menampilkan setiap data siswa.
{{ $s->nama }} → menampilkan nilai kolom 'nama' dari data siswa.
@empty → jika tidak ada data, tampilkan pesan.
@endforelse → penutup loop.

🎨 Rapi, kan? Blade membuat kode HTML kita terlihat bersih dan mudah dipahami. Nanti kita akan membuat link "Tambah Siswa", "Edit", dan "Hapus" berfungsi.

Langkah 3: Uji Coba dengan Data Contoh

3 Sebelum menguji, pastikan database sudah ada tabel siswa dan kamu sudah menjalankan migration. Jika tabel masih kosong, kita bisa menambahkan data contoh sementara menggunakan Tinker. Buka terminal, jalankan:

php artisan tinker

Kemudian masukkan perintah berikut untuk menambah data contoh:

App\Models\Siswa::create(['nama' => 'Budi Santoso', 'kelas' => '6A', 'alamat' => 'Jl. Mawar No. 10']);
App\Models\Siswa::create(['nama' => 'Ani Wijaya', 'kelas' => '5B', 'alamat' => 'Jl. Melati No. 5']);
App\Models\Siswa::create(['nama' => 'Citra Dewi', 'kelas' => '6A', 'alamat' => 'Jl. Anggrek No. 8']);
            

Ketik exit untuk keluar dari Tinker.

Sekarang jalankan server: php artisan serve, lalu buka http://localhost:8000/siswa. Kamu akan melihat halaman daftar siswa dengan tiga data di dalam tabel! 🎉

📌 Catatan: Jika tabel masih kosong, kamu akan melihat pesan "Belum ada data siswa". Itu wajar.

🎯 Selamat! Fitur Read (membaca data) sudah selesai! Kamu sekarang bisa melihat semua data siswa yang tersimpan. Selanjutnya kita akan membuat fitur Tambah Data (Create) agar bisa memasukkan siswa baru melalui halaman web. Terus semangat! 💪

Ringkasan Langkah

✅ Di controller index(), ambil data: $siswa = Siswa::all();
✅ Kirim data ke view: return view('siswa.index', compact('siswa'));
✅ Buat file Blade di resources/views/siswa/index.blade.php dengan tabel dan loop @forelse.
✅ Uji coba dengan menambah data contoh menggunakan Tinker.
✅ Akses http://localhost:8000/siswa dan lihat hasilnya.

📌 Blade itu keren! Dengan Blade kita bisa menulis HTML yang dicampur dengan kode PHP secara rapi. {{ }} untuk menampilkan data, @forelse untuk looping.

⬅️ Kembali ke #7: Controller dan Rute ➡️ Lanjut ke #9: Membuat Halaman Tambah Siswa (Create)

(Link akan aktif saat artikel sebelumnya dan selanjutnya terbit)

Laravel 12 CRUD #8: Membuat Halaman Daftar Siswa (Read)

Laravel 12 CRUD
#8 Membuat Halaman Daftar Siswa (Read)

Langkah 1: Ambil Data dari Database di Controller

Langkah 2: Buat Tampilan dengan Blade (Tabel)

Langkah 3: Uji Coba dengan Data Contoh

Ringkasan Langkah

ASP.NET Core API #4: Menghubungkan API dengan Database Menggunakan Entity Framework Core

Categories

Main Tags

Latest Posts

Popular Posts

ASP.NET Core API #4: Menghubungkan API dengan Database Menggunakan Entity Framework Core

ASP.NET Core API #2: Membuat Project API Pertama dan Menampilkan Hello World

ASP.NET Core API untuk Pemula

نموذج الاتصال

Laravel 12 CRUD #8: Membuat Halaman Daftar Siswa (Read)

Laravel 12 CRUD #8 Membuat Halaman Daftar Siswa (Read)

Langkah 1: Ambil Data dari Database di Controller

Langkah 2: Buat Tampilan dengan Blade (Tabel)

Langkah 3: Uji Coba dengan Data Contoh

Ringkasan Langkah

ASP.NET Core API #4: Menghubungkan API dengan Database Menggunakan Entity Framework Core

ASP.NET Core API #2: Membuat Project API Pertama dan Menampilkan Hello World

ASP.NET Core API untuk Pemula

نموذج الاتصال

Laravel 12 CRUD
#8 Membuat Halaman Daftar Siswa (Read)