CRUD : Menampilkan Database ke Halaman WEB dengan Laravel

 PENGANTAR

    Sebelumnya di tabel tema dan tabel kegiatan kita sudah menampilkan data ke dalam tabel. Data tersebut berupa data statis sehingga tidak dapat dirubah. Nah materi kali ini kita akan menampilkan data dari database ke halaman web.

LANGKAH-LANGKAH

Buat Model

    Langkah pertama kita buat model sebagai penampung data dari database. Buka terminal dan ketikan perintah ini di terminal untuk membuat model:

 php artisan make:model TemaModel

    Buka struktur folder App/Models. Sekarang sebuah file bernama TemaModel sudah dibuat. Buka file tersebut dan tambahkan code seperti berikut:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\Factories\HasFactory;// Pastikan tambah code ini

class TemaModel extends Model

{

    use HasFactory;

    protected $table = 'temas';

    protected $primaryKey = 'id_tema';

    protected $fillable = ['tema', 'keterangan'];

}

Keterangan:

• use HasFactory;: Ini adalah trait yang memungkinkan Anda menggunakan factory untuk membuat instance model untuk pengujian atau seeding.
• protected $table = 'temas';: Ini secara eksplisit mendefinisikan nama tabel yang terkait dengan model ini, yaitu temas. Properti ini sangat berguna jika nama tabel tidak mengikuti konvensi penamaan standar Laravel (nama model dalam bentuk tunggal, nama tabel dalam bentuk jamak).
• protected $primaryKey = 'id_tema';: Ini mendefinisikan kunci primer tabel. Secara default, Laravel menganggap kunci primer bernama id. Dengan properti ini, Anda memberitahu Laravel bahwa kunci primer Anda adalah id_tema.
• protected $fillable = ['tema', 'keterangan'];: Properti ini adalah "daftar putih" (whitelist) kolom-kolom yang dapat diisi secara massal (mass assignable). Ini adalah fitur keamanan untuk mencegah pengguna memasukkan data yang tidak diinginkan ke kolom tertentu.

Buat Controller

    Sekarang kita akan membuat controller untuk mengontrol data yang akan ditampilkan ke user. ketikkan perintah berikut di terminal:

php artisan make:controller TemaController

    Buka App/Http/Controller. Buka file TemaController dan buat code ini:

<?php

namespace App\Http\Controllers;

use App\Models\TemaModel;

use Illuminate\Http\Request;

class TemaController extends Controller

{

    public function index()

    {

        $data = [

            'temas' => TemaModel::all()

        ];

        return view('tema', $data);

    }

}

    Perintah diatas akan memanggil model dan memberikan inisial 'temas'. inisial inilah yang akan dipanggil nanti di view.

Edit Route

    Buka web.php dan edit routenya:

Route::get('/', function () {

    return view('dashboard');

});

Route::get('/tema', [TemaController::class, 'index'])->name('tema.index');

    Kita tidak langsung memanggil view, tapi kita memanggil controller terlebih dahulu untuk mengontrol data. pastikan libary ditambah untuk menghubungkan ke TemaController:

use App\Http\Controllers\TemaController;

    

Edit View

    Sekarang mari kita edit view-nya. Kita akan tampilkan data tersebut ke view. Buka tema.blade.php dan rubah <tbody> seperti berikut:

<tbody>

    @php $no = 1; @endphp

    @foreach ($temas as $tema)

        <tr>

            <td>{{ $no++ }}</td>

            <td>{{ $tema->tema }}</td>

            <td>{{ $tema->keterangan }}</td>

            <td>

                <a href="#" class="btn btn-warning btn-sm me-2"><i class="bi bi-pencil-square"></i>

                    Edit</a>

                <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i>

                    Hapus</button>

            </td>

        </tr>

    @endforeach

</tbody>

    Perhatikan pada pengulangan (@foreach) kita memanggil kembali inisial $tema dan kita buat inisial baru dengan nama $tema. 

Buka tem_main.blade.php dan edit route di link tema seperti terlihat berikut ini.

<a class="nav-link" href="{{ route('tema.index') }}">

    <i class="bi bi-list-task"></i> Tema Agenda

</a>

<a class="nav-link" href="/kegiatan">

    <i class="bi bi-activity"></i> Kegiatan

</a>

    

    Sekarang jalankan programnya. Mestinya data dari database sudah tampil di halaman web anda.

    Selanjutnya anda buat desain untuk tampilan kegiatan seperti gambar dibawah ini:

    Selamat Mencoba...