Pemrograman Web

Student, Major, dan Subject

A. Pendahuluan

Pada modul praktikum kali ini, materi yang dibahas berpusat pada penerapan relasi antar entitas dalam framework Laravel. Pemahaman konsep relasi ini merupakan hal yang sangat penting ketika membangun aplikasi web yang terhubung dengan basis data. Dengan materi ini, mahasiswa dapat memahami bagaimana satu sistem informasi akademik dapat bekerja secara cepat, terstruktur, dan mudah untuk dikembangkan di kemudian hari.

Studi kasus yang digunakan adalah sistem akademik sederhana yang menyambungkan tiga komponen data utama, yaitu Mahasiswa atau Student, Jurusan atau Major, dan Mata Kuliah atau Subject. Pada pola pertama terdapat relasi One-to-Many antara Major dan Student, karena satu jurusan dapat memiliki banyak mahasiswa, sedangkan satu mahasiswa hanya berada pada satu jurusan.

Pola relasi kedua adalah Many-to-Many antara Student dan Subject. Dalam skenario ini, seorang mahasiswa dapat mengambil lebih dari satu mata kuliah, dan satu mata kuliah yang sama dapat diikuti oleh banyak mahasiswa. Untuk menjembatani hubungan tersebut, Laravel memanfaatkan tabel perantara yang sering disebut sebagai pivot table.

B. Tujuan

Tujuan dari praktikum ini adalah sebagai berikut.

  1. Mendapatkan pemahaman teoritis dan teknis mengenai cara kerja relasi antar entitas menggunakan fitur-fitur pada framework Laravel.
  2. Mengimplementasikan logika relasi One-to-Many dan Many-to-Many secara langsung ke dalam basis data akademik.
  3. Menulis dan merancang instruksi migration dengan konfigurasi foreign key yang tepat dan aman antar tabel.
  4. Mengeksekusi proses manipulasi dan penarikan data secara efisien dengan memanfaatkan metode Eloquent relationship.
  5. Membangun halaman antarmuka atau views yang mampu menampilkan kumpulan data saling terhubung dalam format yang terorganisir.

C. Alat dan Tools

  • Laptop
  • XAMPP
  • Visual Studio Code
  • Composer
  • Git
  • Node JS

D. Langkah-Langkah

1. Persiapan Struktur Database

Sistem akademik sederhana ini memuat tiga relasi utama. Mahasiswa berada di satu jurusan dengan pola Many-to-One, jurusan memiliki banyak mahasiswa dengan pola One-to-Many, dan mahasiswa mengambil banyak mata kuliah melalui tabel pivot dengan pola Many-to-Many.

Langkah pertama adalah menyiapkan konfigurasi database pada file .env, mulai dari koneksi MySQL, host, port, nama database, username, sampai password.

Konfigurasi database pada file .env

2. Membuat File Migration

Migration digunakan untuk membangun struktur tabel secara otomatis melalui Laravel. Pada praktikum ini, migration dibuat untuk tabel majors, students, subjects, dan tabel pivot student_subject.

a) Migration Tabel Majors

Perintah php artisan make:migration create_majors_table digunakan untuk membuat tabel jurusan. Tabel ini memuat kolom dasar seperti id, name, dan timestamps, sedangkan fungsi down() disiapkan untuk menghapus tabel ketika rollback dijalankan.

Migration create_majors_table

b) Migration Tabel Students

Migration tabel students mengatur relasi mahasiswa dengan jurusan. Tabel ini memiliki kolom NIM, nama, alamat, dan major_id sebagai foreign key ke tabel majors. Pengaturan onDelete('cascade') membuat data mahasiswa ikut terhapus jika data jurusan terkait dihapus.

Migration create_students_table

c) Migration Tabel Subjects

Migration tabel subjects disiapkan untuk menampung data mata kuliah. Kolom yang digunakan adalah nama mata kuliah dan jumlah SKS yang disimpan dengan tipe data integer.

Migration create_subjects_table

d) Migration Tabel Pivot Student_Subject

Tabel pivot student_subject digunakan sebagai penghubung relasi Many-to-Many antara mahasiswa dan mata kuliah. Tabel ini menyimpan student_id dan subject_id, dilengkapi aturan unique agar kombinasi mahasiswa dan mata kuliah yang sama tidak tersimpan berulang.

Migration create_student_subject_table

Setelah semua file migration selesai dibuat, jalankan perintah php artisan migrate untuk mengeksekusi struktur tabel ke database.

3. Konfigurasi Model dan Relasi

a) Model Major

Model Major dibuat menggunakan perintah php artisan make:model Major. Pada model ini, kolom name diizinkan untuk mass assignment, lalu relasi hasMany ke model Student didefinisikan karena satu jurusan dapat memiliki banyak mahasiswa.

Model Major dengan relasi hasMany Student

b) Model Student

Model Student dibuat menggunakan perintah php artisan make:model Student. Model ini memuat relasi belongsTo ke Major karena mahasiswa masuk ke satu jurusan, serta relasi belongsToMany ke Subject karena mahasiswa dapat mengambil banyak mata kuliah.

Model Student dengan relasi major dan subjects

c) Model Subject

Model Subject dibuat menggunakan perintah php artisan make:model Subject. Model ini mendefinisikan relasi timbal balik belongsToMany ke model Student agar dapat diketahui siapa saja mahasiswa yang mengambil mata kuliah tertentu.

Model Subject dengan relasi belongsToMany Student

4. Pembuatan Seeder

a) MajorSeeder

MajorSeeder dibuat untuk mengisi data awal jurusan seperti Teknik Informatika, Sistem Informasi, Teknik Komputer, dan Manajemen Informatika. Data tersebut disimpan menggunakan metode Major::create().

MajorSeeder untuk data jurusan

b) SubjectSeeder

SubjectSeeder berfungsi menyimpan daftar mata kuliah beserta bobot SKS-nya, seperti Pemrograman Web, Database, Algoritma, Jaringan Komputer, dan Sistem Operasi.

SubjectSeeder untuk data mata kuliah

c) StudentSeeder

StudentSeeder dibuat untuk mengisi data beberapa mahasiswa lengkap dengan jurusannya. Seeder ini juga mengacak dan menautkan mata kuliah ke setiap mahasiswa menggunakan metode attach() pada relasi pivot.

StudentSeeder dengan attach subject

d) DatabaseSeeder

DatabaseSeeder digunakan untuk memanggil beberapa seeder sekaligus, yaitu MajorSeeder, SubjectSeeder, dan StudentSeeder. Setelah itu, perintah php artisan db:seed dijalankan untuk memasukkan semua data awal ke database.

DatabaseSeeder memanggil semua seeder

5. Controller

Controller dibuat menggunakan perintah php artisan make:controller StudentController. Controller ini berfungsi sebagai pengendali data mahasiswa, mulai dari menampilkan daftar mahasiswa, melihat detail, membuka form tambah data, menyimpan data baru, mengedit data, memperbarui data, sampai menghapus data.

Pada method index(), data mahasiswa diambil menggunakan eager loading dengan with() agar relasi major dan subjects langsung ikut terbaca. Cara ini membantu mencegah masalah N+1 query dan membuat proses pengambilan data menjadi lebih efisien.

StudentController untuk CRUD mahasiswa

6. Routing

Routing ditambahkan pada file web.php menggunakan Route::resource('students', StudentController::class). Route resource membuat seluruh route CRUD terbentuk otomatis, mulai dari index, create, store, show, edit, update, sampai destroy.

Route resource untuk StudentController

7. Views

a) Layout Utama app.blade.php

File app.blade.php dibuat sebagai layout utama. File ini menggunakan Bootstrap untuk merapikan tampilan, menyediakan navbar sederhana, dan menyiapkan tempat konten melalui @yield('content').

Layout utama app.blade.php

b) Halaman Utama index.blade.php

Halaman index.blade.php digunakan untuk menampilkan tabel data mahasiswa. Nama jurusan diambil melalui relasi $student->major->name, sedangkan daftar mata kuliah ditampilkan sebagai badge atau label agar mudah dibaca.

Halaman index.blade.php untuk daftar mahasiswa

c) Halaman Formulir create.blade.php

Halaman ini digunakan untuk menambahkan mahasiswa baru. Form berisi input NIM, nama, alamat, pilihan jurusan, dan pilihan mata kuliah agar data mahasiswa dapat langsung tersambung dengan major dan subject.

Bagian awal form create mahasiswa
Bagian lanjutan form create mahasiswa dengan pilihan jurusan dan mata kuliah

8. Output

Setelah semua bagian selesai dibuat, jalankan php artisan serve, lalu buka halaman http://127.0.0.1:8000/students untuk melihat hasil aplikasi.

Daftar mahasiswa pada halaman students
Form tambah mahasiswa
Halaman detail mahasiswa
Halaman edit mahasiswa

E. Tugas

1. Buat StudentController

Untuk membuat file StudentController, jalankan perintah php artisan make:controller StudentController. Setelah dijalankan, file controller akan terbentuk dan siap diisi dengan logika pengelolaan data mahasiswa.

2. Tambahkan Route untuk StudentController

Route ditambahkan pada file web.php dengan mengarahkan halaman utama ke route students dan menambahkan Route::resource('students', StudentController::class).

Route students pada file web.php

3. Perbarui StudentController

Pada method index(), controller diperbarui untuk menampilkan seluruh mahasiswa beserta jurusan, mata kuliah, dan total SKS. Controller juga mencari jurusan dengan mahasiswa terbanyak, serta mengambil daftar mata kuliah dari salah satu mahasiswa tertentu sebagai contoh relasi.

Pada bagian edit, update, dan destroy, relasi mata kuliah tetap dijaga menggunakan sync() untuk memperbarui pilihan subject dan detach() untuk memutus relasi sebelum data mahasiswa dihapus.

StudentController bagian index sampai store
StudentController bagian edit, update, dan destroy

4. Perbarui Index.blade.php

Halaman index diperbarui dengan dua kotak informasi tambahan untuk menampilkan jurusan dengan mahasiswa terbanyak dan daftar mata kuliah yang diambil oleh mahasiswa tertentu. Pada tabel utama, total SKS juga ditampilkan agar informasi akademik menjadi lebih lengkap.

Bagian awal index.blade.php dengan ringkasan jurusan dan total SKS
Bagian lanjutan index.blade.php untuk tabel mahasiswa

5. Output

Hasil akhir menunjukkan halaman daftar mahasiswa yang sudah dilengkapi informasi jurusan, mata kuliah, total SKS, serta kotak ringkasan data akademik.

Output akhir halaman Student Management

F. Kesimpulan

Melalui praktikum ini, mahasiswa berhasil mempraktikkan proses perancangan relasi One-to-Many dan Many-to-Many menggunakan framework Laravel. Relasi tersebut membantu aplikasi menghubungkan data mahasiswa, jurusan, dan mata kuliah dengan struktur database yang lebih rapi.

Praktikum ini juga menunjukkan pentingnya penggunaan foreign key, model relationship, eager loading, seeder, controller, routing, dan view dalam membangun aplikasi web berbasis database. Dengan pendekatan ini, data yang saling berhubungan dapat ditampilkan secara efisien, kodenya lebih mudah dirawat, dan aplikasi siap dikembangkan menjadi sistem yang lebih besar.