Laporan praktikum web 7

1. Konfigurasi Database dan File .env

Langkah pertama adalah menghidupkan Apache dan MySQL melalui XAMPP Control Panel. Setelah itu, buat database baru dengan nama db_mahasiswa melalui phpMyAdmin. Buka project Laravel baru menggunakan VS Code, lalu sesuaikan konfigurasi database pada file .env. Berhubung port MySQL telah diubah untuk menghindari crash, maka port disesuaikan menjadi 3307.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307
DB_DATABASE=db_mahasiswa
DB_USERNAME=root
DB_PASSWORD=

2. Membuat Model dan Migration

Gunakan terminal VS Code untuk membuat berkas Model beserta migrasinya secara bersamaan dengan mengetikkan perintah php artisan make:model Mahasiswa -m. Pada file app/Models/Mahasiswa.php, tambahkan properti $fillable agar kolom nim, nama, dan jurusan diizinkan untuk melakukan pengisian data massal. Selanjutnya, buka file migrasi di folder database/migrations/ dan definisikan skema kolom tabel pada fungsi up(). Jalankan perintah php artisan migrate untuk mencetak tabel ke MySQL.

Bukti sukses menjalankan perintah php artisan migrate di terminal

3. Membuat Seeder (Data Awal)

Seeder digunakan untuk menyiapkan data pancingan awal ke dalam database. Buat file seeder melalui terminal dengan perintah php artisan make:seeder MahasiswaSeeder. Pada file MahasiswaSeeder.php, masukkan data akademik utama berupa NIM, Nama, dan Jurusan. Daftarkan class tersebut ke dalam file induk DatabaseSeeder.php, kemudian jalankan perintah eksekusi seeder menggunakan perintah php artisan db:seed.

(Tabel phpMyAdmin Hasil Browse/Isi Data Seeder):

Bukti data mahasiswa dari seeder berhasil masuk ke tabel database phpMyAdmin

4. Pengaturan Routing Aplikasi

Buka berkas kontrol rute pada file routes/web.php. Tambahkan sebuah resource route yang bertugas untuk memetakan seluruh jalur URL operasi CRUD secara otomatis ke komponen Controller. Isinya diatur seperti baris kode berikut:

use App\Http\Controllers\MahasiswaController;

Route::redirect('/', '/mahasiswa');
Route::resource('mahasiswa', MahasiswaController::class);

5. Membuat Resource Controller

Gunakan perintah artisan php artisan make:controller MahasiswaController --resource untuk membuat file pengontrol logika. File ini berlokasi di direktori app/Http/Controllers/MahasiswaController.php. Isikan fungsi logika CRUD lengkap di dalamnya, yang meliputi method index() untuk mengambil semua data lewat model, create() untuk form input, store() untuk memvalidasi dan menyimpan data baru, edit() untuk mengambil data spesifik, update() untuk menyimpan perubahan, serta destroy() untuk menghapus data mahasiswa.

6. Membuat Komponen Antarmuka (View Blade)

Buat folder baru bernama mahasiswa di dalam direktori resources/views/. Di dalam folder tersebut, buat tiga buah file template berekstensi Blade, yaitu:

  • index.blade.php: Berfungsi menampilkan tabel data daftar seluruh mahasiswa beserta tombol aksi Edit dan Hapus.
  • create.blade.php: Menyediakan struktur form isian input data mahasiswa baru.
  • edit.blade.php: Menyediakan form ubah data dengan box input yang nilainya otomatis terisi data lama.

7. Hasil Output Aplikasi Web

Jalankan server lokal aplikasi Laravel dengan mengetikkan perintah php artisan serve pada terminal, lalu akses tautan halaman web di browser melalui alamat http://127.0.0.1:8000/mahasiswa. Berikut adalah tampilan hasil akhir aplikasi yang telah sukses dikembangkan:

(Tampilan Halaman Utama / Tabel Web):

Tampilan antarmuka web daftar tabel data mahasiswa

(Tampilan Halaman Form Tambah Data):

Tampilan antarmuka web form tambah data mahasiswa baru

(Tampilan Halaman Form Edit Data):

Tampilan antarmuka web form edit data mahasiswa

8. Kesimpulan

Melalui pengerjaan tugas Praktikum 7 ini, pemahaman mengenai implementasi arsitektur pola dasar Model-View-Controller (MVC) menggunakan framework Laravel 11 meningkat secara signifikan. Fitur-fitur otomatisasi seperti migration, seeder, resource route, Eloquent ORM, hingga Blade Template terbukti sangat mempermudah pengembang untuk membangun fondasi sistem database maupun antarmuka program CRUD terstruktur secara lebih ringkas, aman, efektif, dan profesional.

Repositori Proyek Praktikum

Seluruh berkas kode program (source code) proyek aplikasi Laravel untuk pemenuhan tugas praktikum ini telah diunggah dan dapat diakses publik melalui tautan di bawah ini:

Lihat Proyek di GitHub