{"id":239,"date":"2025-06-17T20:59:06","date_gmt":"2025-06-17T20:59:06","guid":{"rendered":"https:\/\/indahsyah.infokand23.my.id\/blog\/?p=239"},"modified":"2025-06-29T08:10:12","modified_gmt":"2025-06-29T08:10:12","slug":"pemrogramanweb10","status":"publish","type":"post","link":"https:\/\/indahsyah.infokand23.my.id\/blog\/pemrogramanweb10\/","title":{"rendered":"LARAVEL RELATIONSHIP #10"},"content":{"rendered":"\n

Hello, there! It’s me again. Nah, kali ini, saya akan membahas mengenai apa saja yang saya pelajari pada Praktikum Laravel Relationship contoh kasusnya yakni antara Student, Major, <\/em>dan Subject<\/em>.<\/p>\n\n\n\n

So, check this out!<\/p>\n\n\n\n

TUJUAN<\/h2>\n\n\n\n

Setelah menyelesaikan praktikum ini, mahasiswa diharapkan dapat:<\/p>\n\n\n\n

    \n
  1. Memahami konsep relationship dalam Laravel<\/li>\n\n\n\n
  2. Mengimplementasikan One-to-Many dan Many-to-Many relationship<\/li>\n\n\n\n
  3. Membuat migration dengan foreign key<\/li>\n\n\n\n
  4. Menggunakan Eloquent relationship untuk query data<\/li>\n\n\n\n
  5. Menampilkan data dengan relationship di view<\/li>\n<\/ol>\n\n\n\n

    1. Buat Folder Proyek Laravel Baru di Cmder<\/h2>\n\n\n\n

    Seperti biasa, pertama-tama kita perlu membuat folder Laravel baru, kali ini saya membuat folder dengan nama laravel-relationship di Cmder menggunakan composer.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Tunggu beberapa saat hingga penginstallan selesai dan folder sudah ada di vscode.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    2. Membuat Migration<\/h2>\n\n\n\n

    Selanjutnya, kita bisa membuat migration sebagai blueprint untuk membuat, mengubah, atau menghapus tabel dan kolom dalam database secara terstruktur menggunakan perintah artisan. Di praktikum kali ini, kita akan membuat migration untuk tabel majors (jurusan), students (mahasiswa), subjects (mata kuliah), dan student subjects (mata kuliah yang dipilih mahasiswa).<\/p>\n\n\n\n

    Kita dapat mengetikkan perintah berikut. <\/p>\n\n\n\n

    php artisan make:migration create_majors_table
    php artisan make:migration create_students_table
    php artisan make:migration create_subjects_table
    php artisan make:migration create_student_subject_table<\/p>\n\n\n\n

    Jika berhasil, akan muncul tampilan seperti berikut.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file migration\/create_majors_table, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk membuat tabel majors dengan kolom id, name, created_at, dan updated_at saat migration dijalankan. Jika migration di-rollback (membatalkan perubahan migration terakhir), maka tabel majors akan dihapus kembali.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file migration\/create_student_table, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk membuat tabel students yang menyimpan data mahasiswa seperti id, nim, name, address, dan major_id (relasi ke tabel majors). Relasi menggunakan foreign key, dan jika data jurusan (majors) dihapus, maka data mahasiswa terkait ikut dihapus karena onDelete(‘cascade’).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file migration\/create_subject_table, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk membuat subjects di database yang menyimpan data mata kuliah, terdiri dari kolom id, name, sks, serta created_at dan updated_at.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file migration\/create_student_subject_table, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk membuat tabel pivot student_subject yang menghubungkan banyak mahasiswa (students) dengan banyak mata kuliah (subjects) dalam relasi many-to-many.<\/p>\n\n\n\n

    Tabel ini menyimpan:<\/p>\n\n\n\n

    student_id \u2192 foreign key ke tabel students, subject_id \u2192 foreign key ke tabel subjects, dan timestamps \u2192 menyimpan waktu dibuat & diubah<\/p>\n\n\n\n

    Selain itu, ditambahkan juga constraint unik pada kombinasi student_id dan subject_id untuk mencegah satu mahasiswa mengambil mata kuliah yang sama lebih dari sekali.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Setelah file migrations tersebut dibuat, kita perlu menerapkan perintah php artisan migrate di terminal karena perintah tersebut berfungsi untuk mengeksekusi semua migrasi yang ada, sehingga struktur database terbentuk sesuai dengan skema yang didefinisikan dalam file migration.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    3. Membuat Model dengan Relationship<\/h2>\n\n\n\n

    Selanjutnya adalah membuat model untuk Student, Major, dan Subject dengan perintah: <\/p>\n\n\n\n

    php artisan make:model Student<\/p>\n\n\n\n

    php artisan make:model Subject<\/p>\n\n\n\n

    php artisan make:model Major<\/p>\n\n\n\n

    Ini berfungsi untuk membuat file model Student, Major, dan Subject di folder app\/Models yang merepresentasikan tabel-tabel tersebut di database. Jika berhasil, maka tampilannya akan muncul seperti berikut.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file Models\/Major, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk mewakili tabel majors di database dalam bentuk class PHP, serta mendefinisikan relasi satu ke banyak (one-to-many) antara jurusan (Major) dan mahasiswa (Student).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file Models\/Student, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk mewakili tabel students di database, serta mengatur relasi mahasiswa dengan jurusan (majors) dan mata kuliah (subjects) menggunakan Eloquent ORM Laravel.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file Models\/Subject, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk mewakili tabel subjects di database, sekaligus mengatur relasi many-to-many antara mata kuliah (subjects) dan mahasiswa (students) melalui Eloquent ORM di Laravel, sehingga berfungsi sebagai model Subject untuk tabel subjects, yang menyimpan data mata kuliah dan relasi banyak ke banyak dengan model Student menggunakan tabel pivot student_subject.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    4. Membuat Seeders<\/h2>\n\n\n\n

    Seeder digunakan untuk mengisi tabel database dengan data awal secara otomatis, baik untuk keperluan pengujian, pengembangan, maupun data default sistem. Kita dapat membuat seeder dengan perintah php artisan make:seeder MajorSeeder<\/p>\n\n\n\n

    php artisan make:seeder SubjectSeeder<\/p>\n\n\n\n

    php artisan make:seeder StudentSeeder<\/p>\n\n\n\n

    Jika berhasil, maka tampilannya akan seperti berikut.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file database\/seeders\/MajorSeeder, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk mengisi tabel majors dengan daftar jurusan awal menggunakan model Major (yakni Teknik Informatika, SI, Teknik Komputer, dan Manajemen Informatika) yang berguna untuk menyediakan data default saat pengembangan atau testing aplikasi.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file database\/seeders\/SubjectSeeder, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk menambahkan data awal ke tabel subjects, berisi nama-nama mata kuliah dan jumlah SKS, untuk keperluan testing atau pengembangan sistem akademik.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Di file database\/seeders\/StudentSeeder, kita dapat mengetikkan kode berikut. Kode ini berfungsi untuk mengisi tabel students dengan data awal mahasiswa, masing-masing berisi nim, name, address, dan major_id yang menghubungkan mahasiswa ke jurusannya. Selain itu, setiap mahasiswa juga secara otomatis akan dihubungkan dengan 2 hingga 4 mata kuliah secara acak melalui relasi many-to-many menggunakan tabel pivot student_subject.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Kemudian, kita dapat memperbarui kode DatabaseSeeder dengan kode berikut.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Ini bertujuan untuk mendaftarkan dan menjalankan seluruh seeder (MajorSeeder, SubjectSeeder, dan StudentSeeder) secara otomatis ketika perintah php artisan db:seed dijalankan.<\/p>\n\n\n\n

    Setelahnya, barulah seeders dijalankan dengan perintah php artisan.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    5. Membuat Controller<\/h2>\n\n\n\n

    Next, membuat controller. Sama seperti sebelumnya, kita dapat membuat Controller dengan php artisan make:controller StudentController yang nantinya jika berhasil akan muncul file StudentController.php di folder app\/Http\/Controllers, yang akan berisi logika pemrosesan permintaan (request) terkait data mahasiswa seperti menampilkan, menambahkan, mengedit, dan menghapus data.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Kode di StudentController ini berfungsi untuk mengelola seluruh logika CRUD (Create, Read, Update, Delete) data mahasiswa dalam aplikasi Laravel, termasuk pengelolaan relasi mahasiswa dengan jurusan (majors) dan mata kuliah (subjects), serta menampilkan statistik tambahan seperti jumlah SKS.<\/p>\n\n\n\n

    6. Perbarui Routes<\/h2>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Selanjutnya, kita perlu melakukan perubahan di file routes\/web.php yang berfungsi untuk mengatur routing utama aplikasi agar pengguna langsung diarahkan ke daftar mahasiswa, serta mendaftarkan semua rute CRUD mahasiswa secara otomatis menggunakan controller StudentController.<\/p>\n\n\n\n

    7. Membuat Views<\/h2>\n\n\n\n

    Selanjutnya, kita dapat membuat folder baru di resources\/views, yakni layout dan students, mengelompokkan file tampilan (view) berdasarkan fungsinya agar struktur proyek lebih rapi dan mudah dipelihara. Folder layout menyimpan template dasar tampilan, sedangkan folder students menyimpan file tampilan khusus mahasiswa seperti daftar, tambah, edit, dan detail. Ini membuat struktur view lebih terorganisir dan mudah digunakan dalam pengembangan jangka panjang.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Setelah itu, kita dapat membuat kode di file app.blade.php seperti berikut. Kode ini berfungsi untuk membuat layout tampilan utama aplikasi manajemen mahasiswa, yang akan digunakan sebagai kerangka dasar semua halaman web melalui @extends(‘layout.app’), menyatukan struktur HTML, navbar, notifikasi session, dan tempat untuk meletakkan konten halaman tertentu dengan @yield(‘content’).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Selanjutnya, kita dapat membuat file index.blade.php seperti berikut. Kode ini berfungsi untuk menampilkan daftar seluruh mahasiswa dalam bentuk tabel, lengkap dengan informasi seperti NIM, nama, jurusan, dan mata kuliah yang diambil. Selain itu, halaman ini juga menyediakan tombol untuk menambah, mengedit, melihat detail, dan menghapus data mahasiswa.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Selanjutnya, kita dapat membuat file create.blade.php seperti berikut. Kode ini berfungsi untuk menampilkan form tambah data mahasiswa baru, lengkap dengan input NIM, nama, alamat, jurusan, dan daftar mata kuliah (subjects) yang bisa dipilih lebih dari satu. Form ini akan mengirim data ke route students.store untuk disimpan ke database.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Latihan 1: Query dengan Relationship<\/h2>\n\n\n\n

    Buat query untuk menampilkan:<\/p>\n\n\n\n

      \n
    1. Semua mahasiswa beserta jurusan dan mata kuliahnya<\/li>\n\n\n\n
    2. Jurusan yang memiliki mahasiswa terbanyak<\/li>\n\n\n\n
    3. Mata kuliah yang diambil oleh mahasiswa tertentu<\/li>\n\n\n\n
    4. Total SKS yang diambil setiap mahasiswa<\/li>\n<\/ol>\n\n\n\n

      Untuk mengerjakan latihan berikut, kita perlu menambahkan file baru dalam views\/students. <\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Selanjutnya, kita dapat menambahkan kode baris ke-12 untuk mendaftarkan route baru dengan URL \/latihan yang akan menjalankan method latihan() pada StudentController, dan memberikan nama route tersebut sebagai students.latihan.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Kita dapat memperbarui kode di StudentController::index seperti berikut untuk mengambil seluruh data mahasiswa beserta relasinya (jurusan dan mata kuliah) secara efisien menggunakan eager loading, dan mengambil data jurusan disertai jumlah mahasiswanya untuk ditampilkan di view students.index.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Kita juga dapat menambahkan method baru di Controller dengan nama method latihan() yang berfungsi untuk menampilkan halaman latihan yang berisi daftar mahasiswa lengkap dengan jurusan dan mata kuliah mereka, statistik jumlah mahasiswa per jurusan, detail mahasiswa dengan ID 1 beserta mata kuliahnya, serta total jumlah SKS yang diambil oleh masing-masing mahasiswa.<\/p>\n\n\n\n

      Selanjutnya, file latihan.blade.php ini berfungsi untuk menampilkan berbagai hasil latihan query relasi antar tabel dalam bentuk tampilan HTML, seperti daftar mahasiswa dengan jurusan dan mata kuliah mereka, statistik jurusan dengan mahasiswa terbanyak, detail mata kuliah mahasiswa tertentu, serta total SKS yang diambil tiap mahasiswa.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Next, file show.blade.php ini berfungsi untuk menampilkan halaman detail lengkap dari seorang mahasiswa, mencakup informasi NIM, nama, alamat, jurusan, serta daftar mata kuliah yang diambil beserta jumlah SKS-nya. Tampilan ini juga menyertakan tombol “Kembali” untuk kembali ke daftar mahasiswa.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Kode edit.blade.php ini berfungsi untuk menampilkan form edit data mahasiswa, yang memungkinkan pengguna untuk memperbarui informasi seperti NIM, nama, alamat, jurusan, dan mata kuliah yang diambil. Form ini akan mengirim data ke route students.update dengan metode PUT.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Lalu, kode pada file app.blade.php dapat diperbarui seperti berikut untuk menyediakan layout utama yang responsif dan terstruktur menggunakan Bootstrap, serta menambahkan navigasi antar halaman seperti daftar mahasiswa (students.index) dan halaman latihan (students.latihan). Layout ini juga menampilkan pesan sukses dari session dan menjadi kerangka dasar tampilan semua halaman dengan @yield(‘content’).<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Untuk mempercantik tampilan UI agar lebih menarik dan interaktif, index.blade.php dapat dibuat seperti berikut.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Kita dapat menjalankan kode yang sudah dibuat dengan php artisan serve untuk menjalankan server development bawaan Laravel, sehingga bisa diakses lewat browser.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Jika berhasil, maka akan muncul tampilan web seperti berikut. Di sini sudah muncul semua yang dibutuhkan, yakni informasi jurusan, nim, nama, mata kuliah yang diambil, dan jumlah SKS yang ditempuh. Juga, data bisa diedit, ditampilkan detailnya, ataupun dihapus. Terdapat juga tombol tambah mahasiswa untuk menambah data baru. Terakhir, terdapat juga statistik jurusan dengan mahasiswa terbanyak untuk menampilkan perbedaan jumlah mahasiswa antarjurusan pada data. <\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Sekian praktikum kali ini. Mohon berikan kritik dan saran yang membangun untuk saya. Terima kasih! ^^<\/p>\n","protected":false},"excerpt":{"rendered":"

      Hello, there! It’s me again. Nah, kali ini, saya akan membahas mengenai apa saja yang saya pelajari pada Praktikum Laravel […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-239","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":6,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"predecessor-version":[{"id":365,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions\/365"}],"wp:attachment":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}