Tutorial CRUD Laravel 6 Terlengkap! (Disertai Screenshot)

Oktober 17, 2019


Hosting Unlimited Indonesia

Tak berasa laravel sudah memasuki versi 6, dimana fitur-fitur yang disediakan semakin canggih, modern, dan menarik untuk dicoba. Framework buatan Taylor Otwell ini dirilis perdana pada Juni 2011 sekitar 8 tahun yang lalu, 2 tahun setelahnya pada 2013 dan hingga sekarang laravel telah membuktikan dirinya sebagai framework PHP terpopuler. Laravel bersifat open source, artinya kalian dapat mendownloadnya secara gratis dan menggunakannya sesuka kalian.


Salah satu faktor dari sekian banyak faktor yang membuat saya memberi melirik framework ini adalah perihal dokumentasi yang disajikan selalu baru dan ‘terjaga’. Kenapa saya katakan terjaga? karena selain selalu update setiap versi, laravel juga tidak menghilangkan dokumentasi terhadap versi sebelumnya. Hal inilah kenapa kebanyakan pengembang web bahkan pemula seperti saya lebih memilih laravel.


Pada artikel kali ini kita akan mulai mempelajari dan praktekan secara langsung bagaimana membuat CRUD di laravel versi 6. Isi dari artikel ini meliputi sebagai berikut.



Artikel ini sengaja saya buat panjang karena di dalamnya berisi penjelasan tambahan agar kita mengerti sedikit banyak tentang laravel dan materi apa yang kita pelajari ini. Namun jika kalian masih tetap bingung, mohon maaf sebesar-besarnya, hehehe. :p



Persyaratan dan Peralatan yang Dibutuhkan

Sebelum menginstal laravel, kalian perlu menyiapkan beberapa persyaratan (requirements) dan peralatan (tools) sebagai berikut:


Requirements

Berikut merupakan requirement atau persyaratan yang dibutuhkan laravel agar bisa dijalankan dan digunakan dengan benar.


  • PHP >= 7.1.3
  • BCMath PHP Extension
  • Ctype PHP Extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Tools

Tools yang saya maksudkan di sini bisa secara teknis berupa peralatan atau juga bisa sebagai persyaratan tambahan untuk menjalankan laravel beserta pembuatan fitur CRUD, saya sengaja sertakan agar menjadi informasi tambahan bagi para programmer pemula.


  • Composer
  • Teks Editor
  • Web Browser
  • Web Server

Setelah semua persyaratan dan peralatan terpenuhi, saatnya eksekusi!


Cara Install Laravel 6

Cara menginstall laravel dengan baik ada dua. Cara pertama menggunakan laravel installer yang kedua menggunakan composer. Untuk yang via laravel installer kalian bisa pelajari di sini Cara Install Laravel di Linux!. Nah, untuk kali ini kita akan menggunakan yang via composer saja biar cepat. Caranya?


composer create-project --prefer-dist laravel/laravel nama_projek

Ketikkan perintah di atas melalui cmd di LocalDisk(C)/xampp/htdocs/ bagi pengguna Windows.


Sedangkan untuk pengguna linux ketikkan perintah tersebut pada direktori /var/www/html/ via terminal. Sebenarnya projek laravel tidak harus diletakkan pada direktori server lokal, kalian dapat letakkan dimana saja, tapi saya lebih suka dan menyarankan pada direktori server lokal.


Perintah tersebut akan mendownload file projek laravel dengan versi yang paling baru. Untuk nama projeknya terserah kalian, pada artikel ini saya namakan biodata.


composer create-project --prefer-dist laravel/laravel biodata

Sedangkan jika kalian ingin menginstal sesuai versi tertentu bisa dengan perintah berikut


composer create-project --prefer-dist laravel/laravel biodata "6.0.*"

Dapat dilihat perintah diatas akan mendownload laravel versi 6.0


Cek Versi Laravel dan Cara Menjalankannya

Untuk mengecek versi laravel yang telah kita install gunakan perintah


php artisan --version

Ketik perintah berikut pada cmd atau terminal di dalam projek laravel kalian untuk menjalankannya


php artisan serve

Buka web browser dan kunjungi url berikut localhost:8000/. Bagi pengguna Windows jangan lupa dinyalakan dulu XAMPP-nya.


Perlu diingat setiap aktifitas dengan perintah php artisan harus diketik di dalam folder projek laravel



Setup Database di Laravel 6

Setelah instalasi laravel sukses kita berlanjut membuat database di phpmyadmin, di sini saya namakan databasenya biodata_db


Selanjutnya kembali ke folder laravel dan kita cari file .env.


Buka file tersebut dengan teks editor dan ubah sedikit kode terutama dibagian DB_DATABASE, DB_USERNAME, dan DB_PASSWORD.


Menjadi seperti ini, penjelasan setiap code di atas sudah saya cantumkan dalam bentuk komentar di bawah ini


Oke kita sudah setup database, langkah selanjutnya adalah…


Membuat Tabel di Laravel 6

Pada laravel, untuk setting database terutama saat pembuatan tabel ada istilah yang namanya migrations, migrations ini merupakan kerangka kerja (blueprint) sebuah tabel yang akan kita buat nantinya atau bisa juga disebut Control Version System untuk database. Fitur ini sangat memanjakan pengembang web dan timnya dalam mengelola database.


Tabel migrations terletak di dalam folder /database/migrations/. Semenjak laravel 6 terdapat tabel default tambahan selain tabel users dan tabel password_resets yang bernama failed_jobs. Namun kita tidak akan menggunakan tabel tersebut jadi biarkan saja. Kita hanya akan menggunakan tabel users sebagai percobaan, kalian juga dapat membuat tabel migrations sendiri menggunakan perintah di bawah ini via cmd atau terminal


php artisan make:migration create_nama_tabel

Sebelum dimigrasikan atau diimport ke phpmyadmin kita edit dulu struktur tabel users tersebut atau bagi kalian yang membuat tabel baru dengan nama sesuka kalian tolong disamakan ya struktur tabelnya.


Yosh selanjutnya langsung kita migrasikan.


php artisan migrate

Berhasil? Cek di phpyadmin kalian juga!



Mengatur View di Laravel 6

Tampilan di laravel lebih dikenal dengan sebutan view. View dapat kita atur pada folder resources/views/. Setelah masuk ke folder view pada artikel ini saya membuat folder baru dengan nama users di dalamnya.


Kemudian buat file dengan nama layout.blade.php di dalam resources/views/users yang isinya sebagai berikut.


Kita cek apakah view berhasil dibuat dengan mengubah alamat root default dari projek kalian di routes/web.php. Edit kode bawaan laravel di bawah ini


Route::get('/', function () {
    return view('welcome'); // Edit
});

Menjadi seperti ini


Route::get('/', function () {
    return view('users.layout'); // Redirect ke users/layout.blade.php
});

Fungsi di atas memanggil file layout.blade.php yang ada di dalam folder views/users/layout.blade.php. Sedangkan halaman default laravel sebelumnya ada di file views/welcome.blade.php. Karena ekstensinya .blade kita cukup memanggil namanya saja dan simbol titik (.) gunanya seperti simbol slash (/).


Pada tag <head> di atas kita menggunakan framework Bootstrap untuk teknologi front-end secara online. Jika kalian ingin menggunakan Bootstrap secara offline maka kalian download dulu filenya di sini https://getbootstrap.com/


Kemudian pindahkan file Bootstrapnya ke dalam folder /public/.


Gunakan fungsi asset() di dalam tanda double kurung kurawal untuk memuat file css (.css). Cara ini juga berlaku untuk memuat file javascript (.js).


Kemudian terdapat pula directive @yield() yang akan dijelaskan nanti.



Membuat Controller dan Model di Laravel 6

Controller digunakan untuk mengatur apa yang harus dilakukan model dan view sedangkan model bertugas untuk mengorganisasikan data dari database. Nama model dan controller lebih baik disamakan dengan nama tabel kalian serta gunakan huruf kapital di awal.


Untuk membuat controller dan model dapat menggunakan perintah berikut via cmd atau terminal. Ingat ya di dalam folder laravelnya kalau mau ngetik.


// Perintah membuat Controller
php artisan make:controller NamaController

Contoh:
php artisan make:controller UserController

// Perintah membuat Model
php artisan make:model NamaModel

Contoh:
php artisan make:model User

Namun kita juga dapat membuatnya sekaligus dengan perintah


php artisan make:controller nama_controller --resource --model=nama_model

Contoh:
php artisan make:controller UserController --resource --model=User

Karena sebelumnya kita sudah menggunakan tabel bawaan laravel (tabel users) maka laravel juga sudah menyiapkan model untuk tabel users tersebut. Namun tetap saja kita tambahkan sedikit kolom sesuai struktur tabel kita


Jadi selanjutnya kita hanya perlu membuat controller bernama UserController.php


Namun bagi kalian yang sempat membuat tabel sendiri, kalian butuh membuat model dengan perintah tadi dan definisikan nama tabel serta primary key dari tabel tersebut seperti di bawah ini.



Setup Routes di Laravel 6

untuk membuat rute atau alamat dari suatu halaman kita mengaturnya pada file web.php di folder /routes/web.php.


Tambahkan kode berikut di routes/web.php


Nah ini juga merupakan salah satu keunggulan laravel ketika kita membuat controller dan model alangkah baiknya diberi opsional --resource seperti contoh sebelumnya, yang berguna untuk menggenerate action route yang tipikalnya digunakan dalam pembuatan fitur CRUD.


Untuk mengecek informasi routes seperti metode dan action apa saja yang digunakan pada tiap route gunakan perintah berikut


php artisan route:list

Info selebihnya tentang action dapat dilihat di sini https://laravel.com/docs/6.x/controllers#resource-controllers.


Selain itu controller yang dibuat dengan opsional –resource akan menghasilkan 7 fungsi antara lain index(), create(), store(), show(), edit(), update(), destroy(). Fungsi-fungsi tersebut sangat umum digunakan pada pembuatan fitur CRUD.


Sudah selesai masalah routes? Selanjutnya saat yang ditunggu-tunggu….



Membuat Fitur CRUD di Laravel 6


Fitur Create Laravel 6

Fitur pertama yang akan kita buat adalah Create atau biasa dikenal dengan fitur tambah data. Untuk membuatnya pertama pergi ke app/Http/Controllers/UserController.php yang sudah kita buat sebelumnya.


Edit fungsi create() dan store()


Pada fungsi store() saya beri validasi menggunakan metode validate. Saya beri atribut required yang intinya tiap field tidak boleh diisi kosong! Jika memaksa maka peringatan akan muncul!


Pastikan pada file UserController.php model User.php juga dimuat



Mengatur Tampilan Fitur Create

Sebelum saya jelaskan silahkan copy file berikut dan beri nama create.blade.php di dalam folder resources/view/users


Kemudian jalankan projek laravelnya dan kunjungi url berikut localhost:8000/users/create/


*Penjelasan Kode


Pada baris pertama terdapat @extends().


@extends('users.layout')

@extends() merupakan sebuah directive di laravel, ketika mendefinisikan view anak (child) kita gunakan directive yang dimiliki file .blade yaitu @extends() untuk menentukan dimana tata letak yang harus diwariskan oleh view anak.


Gampangnya, @extends() memberitahukan pada kita bahwa view child ini (create.blade.php) mewarisi komponen dari view induknya (layout.blade.php).


Agar ‘pewarisan’ bekerja maka kita perlu menentukan dengan tepat path atau lokasi dari view induk berada. Lokasinya dimulai dari dalam folder view (users/layout.blade), dalam file .blade slash diganti titik (.) menjadi users.layout tanpa ekstensi .blade. Jangan lupa diberi tanda petik. *Pembahasan ini sebenarnya sudah sedikit dijelaskan tadi.


Nah, di sini lah kegunaan directive @yield() yang sempat disinggung sebelumnya. @yield() digunakan sebagai penanda dimana tag html selanjutnya akan diletakkan, sedangkan tag html tersebut didefinisikan di dalam directive @section().


Jadi kita buat komponennya di @section() lalu kita tandai dimana tata letak dari komponen tersebut yang akan ditampilkan dengan @yield() pada view ‘induk’. Nama dalam kurung @section() dan @yield() harus sama


Kemudian skrip berikut untuk menampilkan peringatan saat pengisian field yang tidak sesuai persyaratan validasi.


Lalu kita buat form dengan metode post dan action yang mengarah pada fungsi store(). Selanjutnya beri @crsf token dalam form tersebut untuk menghindari serangan cross-site request forgery (CRSF). Dilanjutkan dengan membuat field sesuai struktur datanya.


Pada akhirnya kita coba eksekusi fitur tersebut, pertama coba kita isi dengan data kosong apa yang terjadi?


Yah muncul peringatan, ini dikarenakan validasi di fungsi store() pada file UserController.php meminta kita untuk wajib memasukkan data tiap field.


Gantian sekarang coba masukkan data dengan benar.


Berhasil? Untuk memastikannya cek database yang ada di phpmyadmin



Fitur Read Laravel 6

Tidak mungkin jika setiap kita inputkan data selalu menengok phpmyadmin untuk memastikan data tersebut masuk, nah maka dari itu perlu dibuatnya fitur Read data atau tampil data untuk memudahkan kita melihat list data yang berhasil dibuat.


Oke pertama-tama edit fungsi index() pada file UserController.php sebagaimana berikut ini.


Gunakan fungsi compact() untuk mengembalikan variabel beserta nilainya.


Mengatur View Fitur Read

Setelah fungsi index diedit berganti ke view lalu copy full kode di bawah ini, beri nama index.blade.php dan simpan di folder view/users/


Jalankan dan coba periksa url berikut localhost:8000/users/

Penjelasan

Pada skrip berikut akan menampilkan pesan sukses dari fungsi store() ketika data berhasil diinputkan

Lalu juga dibuatkan tombol tambah data yang berguna untuk mengarahkan pengguna ke halaman form tambah data dengan rute users/create/.


Buat tabel dengan nama perkolom sesuai struktur database (kecuali timestamp) plus satu kolom kelola data untuk meletakkan tombol aksi edit dan hapus data.


Panggil objek atau data yang ditampung di variabel $users pada fungsi index() di UserController.php sebagai $user menggunakan perulangan @foreach dan diakhiri dengan @endforeach.



Fitur Update Laravel 6

Ada kekeliruan dengan data? Bagaimana cara memperbaikinya? Nah disaat seperti ini fitur edit data sangat diperlukan. Langsung saja buka app\Http\Controller\UserController.php


Ubah fungsi edit() dan update() menjadi seperti berikut


Berlanjut ke view dan buat file dengan nama edit.blade.php. Copy kode berikut dan simpan.


Kemudian edit file index.blade.php di bagian berikut


Full kode index.blade.php


Jalankan dan klik tombol edit di kolom kelola data atau bisa langsung cek url localhost:8000/users/1/edit. URL ini akan menampilkan data dengan id=1 ke dalam form edit.


Beberapa code sudah saya jelaskan sebelumnya, jadi langsung saja ke form edit. Attribute action pada form html hanya mengenali dua aksi saja yaitu POST dan GET. Ketika menginputkan data melalui form kita memerlukan method POST. Namun kita juga memerlukan method lain untuk mengubah data yang sudah ada menggunakan @method(‘PUT’) dan jangan lupa beri token @crsf.


Panggil tiap nilai data dengan attribute html value sebagai nilai default.


Untuk radio button pada gender saya beri statement if.


Jadi jika nilai sebelumnya adalah ‘pria’ maka radio button Pria akan default tertandai jika bukan pria maka sebaliknya.


Selanjutnya kita kirim data berdasarkan id tersebut ke fungsi update(). Sama seperti fungsi store() sebelum data disimpan di database, data divalidasi dahulu.


Jika data berhasil dirubah maka akan diredirect ke halaman index (localhost:8000/users/) dan selamat fitur edit sudah berfungsi dengan baik.


Fitur Delete Laravel 6

Terakhir adalah fitur hapus, fitur hapus akan dibuat pada fungsi destroy().


Fitur ini adalah fitur yang paling mudah yang bisa kita buat, hanya perlu menambahkan tombol delete yang berisi form di dalam kolom kelola data pada file index.blade.php.


Form tersebut akan mengarahkan data yang kita klik berdasarkan id ke fungsi destroy() di UserController.php dan jika data berhasil dihapus maka akan diredirect kembali ke file index.blade.php yang beralamat di localhost:8000/users/


Saatnya mencoba!


Cek juga di phpmyadmin apakah data benar-benar telah terhapus?


Oke jika tidak ada error mungkin artikel Tutorial CRUD Laravel 6 Terlengkap! (Disertai Screenshot) ini sudah bisa di akhiri. Sekian kesempatan kali ini, kalau ada yang tidak beres pada artikel atau ingin bertanya bisa cantumkan di kolom komentar ya.


Satu hal lagi untuk full codenya bisa dilihat dan didownload di link github yang tersedia berikut. Oke see you next week. Terimakasih 🙂



Info Tambahan


Lihat Kode

Berikut link kode lengkap setiap filenya



Download CRUD Laravel 6

Download programnya bisa klik tombol di bawah ini.

Download

Ekstrak filenya pada folder web server kalian dan sebelum menggunakannya setup dulu databasenya serta ketikkan perintah berikut di dalam projek laravel via cmd atau terminal


composer update

Kemudian ketikkan


php artisan migrate

Jalankan!


php artisan serve

Referensi

  1. https://laravel.com/docs/6.x
  2. https://jagongoding.com/blog/post/memahami-konsep-mvc

Kata Kunci

  1. Install Laravel 6 di Windows dan Linux
  2. Belajar CRUD Laravel 6 di Windows dan Linux
  3. Tutorial CRUD Laravel 6 Untuk Pemula

Kategori