Laporan Praktikum Pemrograman Web: Laravel Relationship
1. Pendahuluan
Praktikum ini berfokus pada pembuatan sistem akademik sederhana untuk memahami secara mendalam tentang konsep relasi antar tabel pada database menggunakan framework Laravel. Dalam membangun aplikasi yang nyata, data yang kita miliki jarang sekali berdiri sendiri pada satu tabel saja. Oleh karena itu, kita membangun hubungan antara tabel mahasiswa, tabel jurusan, dan tabel mata kuliah. Melalui pemahaman materi relasi ini, kita dapat menghubungkan berbagai data yang terpisah tersebut menjadi satu kesatuan informasi yang utuh dan sangat mudah dikelola melalui fitur yang sudah disediakan oleh Laravel.
Tujuan Praktikum:
- Memahami konsep dasar relationship atau relasi tabel di dalam Laravel.
- Mengimplementasikan relasi jenis One to Many dan Many to Many.
- Membuat file migration yang dilengkapi dengan kunci tamu (foreign key).
- Menggunakan fitur Eloquent dari Laravel untuk melakukan query pemanggilan data.
- Menampilkan data gabungan hasil relasi ke halaman antarmuka website.
2. Tahapan Kerja dan Implementasi
Berikut adalah penjabaran lengkap dari setiap tahapan praktikum yang telah dilakukan beserta penjelasan detail mengenai fungsi dari perintah dan kode programnya:
A. Migrasi Tabel Jurusan
Tahapan paling awal dalam membuat database yang saling berelasi adalah membuat tabel induk yang posisinya tidak bergantung pada tabel lain. Tabel jurusan ini bertindak sebagai tabel induk pertama. Kita memulai dengan menjalankan perintah artisan make migration di dalam terminal untuk menciptakan file struktur tabel jurusan. Setelah file tersebut tercipta, kita membuka kodenya dan menambahkan kolom nama jurusan yang menggunakan tipe data string. Tabel ini sengaja dibuat pertama kali karena nantinya data dari tabel jurusan ini akan ditarik dan dirujuk oleh tabel mahasiswa.
Gambar 2.1: Perintah membuat file migrasi jurusan
di terminal
Gambar 2.2: Kode migrasi untuk merancang struktur
tabel jurusan
B. Migrasi Tabel Mahasiswa
Setelah tabel induk selesai dibuat, kita melanjutkannya dengan membuat file migrasi untuk tabel mahasiswa. Tabel mahasiswa ini memiliki hubungan relasi dengan tabel jurusan dengan jenis relasi banyak ke satu. Artinya banyak mahasiswa bisa tergabung ke dalam satu jurusan yang sama. Oleh karena itu pada kode migrasinya, selain kita menambahkan kolom identitas diri seperti nama dan Nomor Induk Mahasiswa, kita juga wajib menambahkan sebuah kolom foreign key bernama major id. Kolom inilah yang akan bertugas menyimpan nomor urut jurusan dan menghubungkan identitas mahasiswa tersebut secara langsung dengan tabel jurusan yang sudah kita buat sebelumnya.
Gambar 2.3: Perintah pembuatan file migrasi
mahasiswa di terminal
Gambar 2.4: Kode migrasi penambahan foreign key
menuju tabel jurusan
C. Migrasi Tabel Mata Kuliah
Tahapan ketiga adalah mempersiapkan wadah untuk menampung seluruh daftar mata kuliah. Serupa dengan langkah awal tadi, file migrasi baru dibuat melalui pengetikan perintah di terminal. Pada bagian pengisian kode migrasinya, kita cukup mendefinisikan kolom untuk menampung nama mata kuliah serta sebuah kolom tambahan bertipe data angka bulat untuk menyimpan jumlah Satuan Kredit Semester. Tabel mata kuliah ini dirancang untuk berdiri sendiri terlebih dahulu sebelum nantinya dihubungkan dengan para mahasiswa yang memilih kelas tersebut pada tahap berikutnya.
Gambar 2.5: Perintah pembuatan file migrasi mata
kuliah
Gambar 2.6: Kode migrasi penambahan kolom nama
dan satuan kredit semester
D. Migrasi Tabel Perantara
Karena satu mahasiswa bisa mengambil banyak pilihan mata kuliah dan satu mata kuliah juga bisa diambil oleh banyak peserta mahasiswa, maka kita dihadapkan pada jenis relasi banyak ke banyak. Sistem database mewajibkan kita untuk membuat sebuah tabel perantara khusus guna menjembatani relasi yang rumit ini. Tabel perantara ini diberi nama gabungan yaitu tabel student subject. Di dalam susunan kodenya kita hanya perlu memasukkan dua kolom rujukan utama yaitu kolom yang memuat ID dari tabel mahasiswa dan kolom yang memuat ID dari tabel mata kuliah. Kita juga menambahkan satu baris aturan kode unik pada kedua kolom tersebut untuk menolak masuknya data kembar jika ada seorang mahasiswa yang mendaftarkan kelas yang persis sama dua kali.
Gambar 2.7: Perintah pembuatan file migrasi tabel
perantara
Gambar 2.8: Kode tabel perantara dengan tambahan
sistem pencegahan data ganda
E. Pembuatan Model dan Definisi Relasi
Setelah struktur tabel di dalam database rampung dikerjakan, langkah selanjutnya adalah menciptakan file Model untuk tiap tabel tersebut. Model ini bertugas memberitahu bahasa pemrograman PHP mengenai hubungan apa saja yang terjalin antar tabel. Pada model jurusan, kita menyisipkan fungsi yang memberitahu bahwa jurusan ini memiliki banyak mahasiswa melalui tipe relasi hasMany. Selanjutnya pada model mahasiswa, kita membuat fungsi kebalikan yang menandakan bahwa ia merupakan bagian dari sebuah jurusan menggunakan relasi belongsTo. Selain itu pada model mahasiswa juga ditambahkan fungsi relasi belongsToMany yang mengarah kepada model mata kuliah. Seluruh file model ini turut diamankan dengan mendaftarkan nama kolom yang diizinkan untuk menerima inputan data dari pengguna.
Gambar 2.9: Perintah pembuatan model
jurusan
Gambar 2.10: Penulisan fungsi relasi yang
mengarah ke tabel anak
Gambar 2.11: Perintah pembuatan model
mahasiswa
Gambar 2.12: Penulisan kombinasi dua buah relasi
pada model mahasiswa
Gambar 2.13: Perintah pembuatan model mata
kuliah
Gambar 2.14: Penulisan relasi banyak ke banyak
pada model mata kuliah
F. Persiapan Data Awal Menggunakan Seeder
Supaya aplikasi bisa langsung diuji coba dengan data yang menyerupai kondisi asli, kita memanfaatkan fitur pengisi data otomatis bernama Seeder. Pada file pengisi data jurusan dan mata kuliah, kita menuliskan daftar program studi beserta beban SKS ke dalam format himpunan array. Data tersebut lalu dimasukkan secara otomatis menggunakan fungsi perulangan. Bagian paling menarik berada pada file pengisi data mahasiswa, karena selain menyimpan profil lengkap mahasiswa, skrip ini turut ditugaskan untuk memilih rentetan mata kuliah secara acak. Pilihan mata kuliah acak tersebut langsung diikatkan kepada identitas mahasiswa dengan memanggil fungsi tempel bernama attach. Terakhir semua susunan kelas pengisi data ini disatukan ke dalam satu file pemanggil utama agar siap dieksekusi secara serentak pada terminal.
Gambar 2.15: Perintah pembuatan seeder
jurusan
Gambar 2.16: Skrip penyimpanan data barisan
jurusan melalui perulangan
Gambar 2.17: Perintah pembuatan seeder mata
kuliah
Gambar 2.18: Skrip pendataan nama mata kuliah
beserta nominal SKS
Gambar 2.19: Perintah pembuatan seeder
mahasiswa
Gambar 2.20: Skrip pemilihan kombinasi mata
kuliah secara acak bagi mahasiswa
Gambar 2.21: Kompilasi pendaftaran pemanggilan
seeder pada file utama
Gambar 2.22: Hasil laporan dari eksekusi serentak
seluruh skrip pengisian data
G. Perancangan Logika pada Controller
Langkah esensial sesudah pendataan selesai adalah mengatur lalu lintas data menggunakan file Controller. Saat memanggil data mahasiswa untuk ditampilkan ke layar, kita menggunakan teknik cerdas bernama Eager Loading. Teknik ini difungsikan agar data jurusan beserta kumpulan data mata kuliah ditarik dalam satu kali kerja saja sehingga database tidak merasa terbebani. Pada fungsi untuk menyimpan data peserta baru, pengontrol akan menampung seluruh isian dari form, mengecek kebenarannya, menyimpan ke tabel mahasiswa, lalu mengaitkan deretan mata kuliah yang dicentang ke dalam tabel perantara menggunakan fungsi attach. Sedangkan pada saat pengguna ingin mengedit profil mahasiswa, pengontrol menggunakan fungsi pintar bernama sync yang akan otomatis menghapus catatan mata kuliah lama dan menggantinya dengan susunan mata kuliah yang baru saja dipilih.
Gambar 2.23: Pembuatan file pengontrol utama
untuk halaman mahasiswa
Gambar 2.24: Penulisan fungsi pemuatan data
gabungan dan fungsi penambahan peserta
Gambar 2.25: Penulisan fungsi pembaruan rekaman
serta penghapusan data relasi
H. Pendaftaran Rute dan Perancangan Tampilan Web
Untuk menjamin seluruh fungsi di dalam pengontrol tadi dapat diakses dari browser, kita diwajibkan mendaftarkan rutenya. Penggunaan format rute resource sangat menghemat waktu karena semua kombinasi alamat URL untuk kebutuhan manipulasi data akan disediakan secara otomatis. Selanjutnya untuk mendesain wajah aplikasi, kita merakit satu file tampilan induk bernama app blade php yang sudah disuntikkan dengan komponen desain Bootstrap. Halaman penyaji tabel dirancang secara teliti dengan menambahkan perulangan bersarang di dalam struktur kolom tabelnya agar daftar panjang mata kuliah bisa disulap menjadi deretan label warna yang sedap dipandang. Halaman untuk mendaftar mahasiswa baru juga dirancang menjadi sebuah form yang dinamis dimana kotak isian jurusan disajikan dalam bentuk pilihan menu tarik turun sementara daftar mata kuliah disajikan melalui form centang yang lebih bersahabat dengan pengguna.
Gambar 2.26: Konfigurasi jalur rute serba guna
untuk operasi database
Gambar 2.27: Kode penyusunan kerangka desain
induk antarmuka halaman
Gambar 2.28: Kode penyusunan tabel penampil data
keseluruhan secara perulangan
Gambar 2.29: Kode perancangan kotak isian
formulir penambahan peserta baru
I. Pengujian Antarmuka Aplikasi
Tahap pembuktian akhir dilakukan dengan membuka aplikasi tersebut melalui browser. Layar akan langsung menampilkan sebuah tabel lebar yang sangat rapi memuat kolom nama jurusan dari tabel sebelah serta menampilkan setiap mata kuliah ke dalam bentuk label berwarna abu-abu beserta penjumlahan angka total SKS nya. Apabila tombol tambah disentuh, pengguna akan diarahkan menuju halaman pendaftaran yang sangat rapi. Apabila seluruh proses pendaftaran berhasil disimpan tanpa kendala, sistem dengan sendirinya memulangkan pengguna menuju daftar tabel dan menyematkan satu kotak notifikasi keberhasilan yang menyejukkan mata. Pengujian mendalam pada fitur membaca riwayat utuh seorang mahasiswa maupun upaya untuk merombak susunan data lamanya turut membuktikan bahwa seluruh intruksi yang dititipkan pada bagian pengontrol berhasil tereksekusi dengan ketelitian yang tinggi.
Gambar 2.30: Antarmuka utama halaman tabel
rekapitulasi daftar mahasiswa
Gambar 2.31: Tampilan halaman form isian khusus
penambahan mahasiswa baru
Gambar 2.32: Tampilan kotak pemberitahuan
bahwasanya penyimpanan berjalan sukses
Gambar 2.33: Tampilan halaman saat melihat
rincian detail profil setiap mahasiswa
Gambar 2.34: Tampilan formulir untuk memperbarui
atau mengoreksi data lama
J. Latihan Penerapan Kueri Pemanggilan Data
Pada tahapan kueri pertama, penarikan data berhasil mengambil seluruh nama peserta lengkap membawa atribut jurusan beserta mata kuliahnya tanpa ada bagian yang cacat. Pada pengujian kueri kedua, fokus diarahkan pada perhitungan matematis untuk memunculkan nama jurusan yang paling banyak digemari atau paling padat penduduknya. Latihan ketiga menyajikan praktik filterasi pencarian yang hanya akan memuntahkan daftar mata kuliah milik satu sampel nama mahasiswa yang diincar. Pada latihan pamungkas, implementasi kueri dirancang secara brilian untuk mengakumulasi setiap digit angka Satuan Kredit Semester secara akurat untuk tiap individu mahasiswa.
Gambar 2.35: Hasil tangkapan kueri pertama
menampilkan relasi keseluruhan anggota
Gambar 2.36: Hasil tangkapan kueri kedua memilah
populasi jurusan terbanyak
Gambar 2.37: Hasil tangkapan kueri ketiga
membidik informasi riwayat studi secara personal
Gambar 2.38: Hasil tangkapan kueri keempat memuat
kalkulasi bersih nilai Satuan Kredit Semester
3. Kesimpulan
Berdasarkan hasil praktikum yang telah dilakukan, dapat disimpulkan bahwa penggunaan model pada framework Laravel mempermudah pengelolaan relasi antar tabel dalam database. Pembuatan struktur database melalui migration, pengisian data awal menggunakan seeder, serta pengambilan data melalui model dapat dilakukan dengan lebih efisien dibandingkan menggunakan query database secara langsung. Selain itu, kode program menjadi lebih terstruktur, mudah dipelihara, dan lebih mudah dikembangkan untuk penambahan fitur di masa mendatang.