Lompat ke isi
Les Laravel DocsTutorial Les Privat · Laravel CRUD
Unduh Starter Pack
Sesi 2: Seeder, Route & ReadEstimasi: 55 menit4 titik periksa

Bab 5 — Read: Menampilkan Daftar Siswa

5.1Konsep

Controller mengirim data ke View

Method index() punya tiga tugas berurutan:

Tiga langkah method index(): minta data, bungkus, kirim ke View.Tiga langkah method index(): minta data, bungkus, kirim ke View.
Tiga langkah method index(): minta data, bungkus, kirim ke View.
  • Siswa::latest() mengurutkan dari yang terbaru (berdasarkan created_at), sesuai kebiasaan Bu Rina melihat murid yang baru masuk.
  • ->get() menjalankan query dan mengembalikan koleksi (kumpulan siswa).
  • compact('siswas') adalah singkatan PHP untuk ['siswas' => $siswas].
  • view('siswa.index', ...) membuka berkas resources/views/siswa/index.blade.php. Titik . mewakili tanda folder.

Blade = HTML yang bisa diisi data

Tampilan sudah disediakan di Paket Starter, jadi kamu membaca dulu sebelum menulis controller. Buka resources/views/siswa/index.blade.php dan temukan potongan-potongan ini:

Potongan Blade Artinya
@extends('layouts.app') "Pakai kerangka halaman dari layouts/app.blade.php."
@section('content') ... @endsection "Isi ini ditaruh di tempat @yield('content') pada layout."
{{ $siswa->nama }} Tampilkan nama. Tanda {{ }} otomatis mengamankan teks dari HTML berbahaya.
@forelse($siswas as $siswa) ... @empty ... @endforelse Perulangan untuk tiap siswa, dan cabang khusus kalau datanya kosong.
{{ $loop->iteration }} Nomor urut 1, 2, 3, … (bukan id dari database).
@if(session('success')) Tampilkan kotak hijau kalau ada pesan sukses dari aksi sebelumnya.

5.2Langkah 1 — Isi method index()

Buka app/Http/Controllers/SiswaController.php dan ganti index() dengan versi yang sebenarnya:

📄 Berkas app/Http/Controllers/SiswaController.php — ganti isi method index()

app/Http/Controllers/SiswaController.phpPHP
    public function index()    {        $siswas = Siswa::latest()->get();        return view('siswa.index', compact('siswas'));    }

Pastikan di bagian atas berkas ada baris use App\Models\Siswa; (biasanya sudah ada karena dibuat dengan -mcr). Kalau tidak ada, tambahkan.

5.3💥 Galat yang sengaja dibuat

Sebelum menguji yang benar, buat dua galat dan baca pesannya. Setiap kali, kembalikan kodenya setelah selesai.

Galat 1: salah nama tampilan. Ubah 'siswa.index' menjadi 'siswa.indeks', simpan, lalu buka /siswa. Kamu akan melihat halaman galat berisi View [siswa.indeks] not found. Tulis di bukumu: Laravel mencari berkas apa, dan di folder mana?

Galat 2: salah nama variabel. Kembalikan nama tampilan, lalu ubah compact('siswas') menjadi ['siswa' => $siswas], jadi barisnya berbunyi return view('siswa.index', ['siswa' => $siswas]);. Data tetap dikirim, tetapi dengan nama siswa. Buka /siswa. Kamu akan melihat Undefined variable $siswas, dan halaman galat menunjuk ke berkas index.blade.php. Tulis di bukumu: kenapa tampilan tidak menemukan $siswas?

5.4Uji coba

Kembalikan kode yang benar, jalankan php artisan serve, lalu buka http://127.0.0.1:8000/siswa. Uji dua keadaan:

  1. Berisi. Setelah seeder Bab 3, tampil 5 siswa dalam tabel dengan tombol Edit dan Hapus (tombolnya belum berfungsi, itu pekerjaan bab berikutnya).
  2. Kosong. Jalankan php artisan migrate:fresh (tanpa seeder) lalu muat ulang halaman. Muncul tulisan Belum ada data siswa. Setelah itu isi lagi dengan php artisan db:seed --class=SiswaSeeder.

5.5Jalankan test

PowerShell
php artisan test --filter=DaftarSiswaTest

Empat test memeriksa: halaman memakai tampilan siswa.index dan variabel siswas, tabel kosong menampilkan pesan, siswa yang ada ditampilkan, dan siswa terbaru berada di baris atas. Harapannya: Tests: 4 passed.

Test urutan sengaja membuat satu siswa dengan tanggal created_at kemarin. Kenapa tidak cukup membuat dua siswa berurutan? Karena keduanya bisa tercatat pada detik yang sama, sehingga urutannya tidak pasti.


Titik periksa Bab 5

Centang setiap butir yang sudah kamu selesaikan.

  • /siswa menampilkan tabel berisi siswa dari database (bukan lagi teks Halo dari index()).
  • Saat tabel dikosongkan, muncul tulisan Belum ada data siswa.
  • Aku sudah menyaksikan dan mencatat galat View [...] not found dan Undefined variable $siswas, lalu mengembalikan kodenya.
  • php artisan test --filter=DaftarSiswaTest → 4 test hijau.

Pertanyaan pemahaman

  1. Sebutkan tiga tugas method index() secara berurutan.
  2. Apa bedanya Siswa::latest()->get() dengan Siswa::all()? Baris mana yang kamu ubah kalau Bu Rina ingin urutan dari yang terlama?
  3. Apa fungsi @forelse dibanding @foreach biasa?
  4. Kolom No di tabel memakai $loop->iteration, bukan $siswa->id. Apa yang akan terjadi pada nomornya kalau siswa ke-2 dihapus, di masing-masing cara?

Tantangan

Ubah ->get() menjadi ->paginate(3) dan tambahkan {{ $siswas->links() }} di bawah tabel pada index.blade.php. Perhatikan apa yang terjadi pada halaman (butuh 4+ siswa untuk melihatnya). Kembalikan lagi setelahnya agar test tetap hijau.

Kesalahan umum

Gejala Penyebab & solusi
View [siswa.index] not found Folder atau nama berkas tampilan salah. Harus ada resources/views/siswa/index.blade.php dari Paket Starter.
Undefined variable $siswas (di index.blade.php) Nama yang dikirim ke tampilan berbeda dengan yang dipakai di tampilan. Samakan.
compact(): Undefined variable $... (di controller) Nama di dalam compact('...') tidak cocok dengan variabel di controller. Cocokkan dengan $siswas = ....
Halaman masih menampilkan Halo dari index() Perubahan belum disimpan, atau browser menyimpan versi lama. Simpan (Ctrl+S) dan muat ulang (Ctrl+F5).
Class "App\Models\Siswa" not found Lupa use App\Models\Siswa; di atas controller.
Tabel kosong padahal sudah seed Pernah menjalankan migrate:fresh tanpa seeder. Jalankan php artisan db:seed --class=SiswaSeeder.
Halaman tampil tanpa gaya (tabel polos) Tidak ada internet, jadi Bootstrap dari CDN tidak termuat. Aplikasi tetap bekerja.

➡️ Lanjut ke Bab 6 — Create: Tambah Siswa dan Validasi.

Tutorial Data Siswa Les — Laravel CRUD untuk les privat.

Kode boleh disalin, tapi coba ketik sendiri dulu: tangan yang mengetik lebih cepat paham.