Tutorial CRUD File di Laravel 6 (Disertai Screenshot dan Penjelasan Lengkap!)

Februari 5, 2020


Estimasi Waktu Baca: 10 menit

Kembali lagi di kopiding.in setelah sebelumnya berbagi ilmu tentang Tutorial CRUD di Laravel 6 kini saatnya kopiding.in berbagi ilmu kembali seputar CRUD namun dengan ditambah file. File yang dimaksud di sini berupa gambar dan dokumen. Pada tutorial kali ini saya membuat projek laravel baru dengan studi kasus CRUD data buku. Baik tak perlu berlama lagi, mari kita belajar bersama.


Requirements dan Tools

Adapun requirements yang diperlukan sebelum menginstal projek laravel versi 6:

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

Kemudian untuk tools nya kalian memerlukan:

  • Composer
  • Teks Editor
  • Web Browser
  • Server Lokal

Install Projek Laravel

Seperti biasa untuk langkah awalnya kita mulai dengan menginstal projek laravelnya, bisa dengan laravel installer atau composer. Namun lebih enak pakai composer saja supaya cepat. Ketikkan perintah berikut di terminal atau cmd kalian

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

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

Jika ingin melalui laravel installer ya tidak apa-apa atau kalian yang tidak tahu caranya silahkan disimak tutorial berikut Cara Install Laravel di Linux.


Setup Database

Kemudian buat database di localhost/phpmyadmin/ dengan nama crud_file.

Kembali ke projek laravel, buka file tersembunyi .env melalui teks editor kalian dan edit terutama pada bagian DB_DATABASE, DB_USERNAME, dan DB_PASSWORD

Menjadi seperti ini, isi sesuai dengan info DBMS beserta info usernya di pc kalian.


Buat Tabel di Laravel 6

Setelah setup database selesai kita lanjutkan dengan membuat tabel, karena studi kasusnya tentang CRUD data buku, maka kita namakan tabelnya buku, karena penamaan tabel di laravel pada umumnya menggunakan kata jamak jadi kita namakan bukus. Aturan ini sebenarnya tidak mutlak, penamaan setiap tabel hak masing-masing individu asal sesuai dengan kegunaan tabel itu sendiri.

php artisan make:migration create_nama_table

php artisan make:migration create_bukus_table

Ketika perintah di atas dieksekusi maka akan lahir tabel migrasi bukus di database/migrations/. Dalam folder tersebut juga terdapat tabel migrasi users, password_resets, dan failed_jobs bawaan laravel.

Lalu edit isi struktur tabel yang semula hanya berisi kolom id dan timestamps.

Menjadi seperti berikut.

Saya edit id menjadi id_buku dan menambahkan kolom, judul_buku dan penulis_buku bernilai string, tanggal_terbit_buku bernilai date, serta terakhir sampul_buku dan sampel_buku yang juga bernilai string.

Untuk timestamps biarkan saja karena nanti dia akan menggenerate 2 kolom created_at (digunakan untuk mencatat waktu kapan data dibuat) dan updated_at (digunakan untuk mencatat waktu kapan terakhir data diubah).

Jika file tabel bukus kalian sudah sama seperti di atas, sekarang saatnya untuk kita migrasikan ke database yang ada di phpmyadmin yang sebelumnya sudah kita buat dengan perintah:

php artisan migrate

Perintah di atas akan menggenerate tabel buku beserta tabel-tabel migrasi default laravel lainnya.

Tunggu proses migrasinya jika tidak ada error. Selamat!

Untuk membuktikannya silahkan lihat di phpmyadmin apakah tabel benar-benar sukses dimigrasikan? Lihat juga struktur tabelnya, nilai dari setiap kolom apakah sesuai dengan yang kita minta? Jika semuanya sesuai kita lanjutkan!


Membuat View di Laravel 6

Sebelum masuk ke Model dan Controller alangkah baiknya kita atur view layoutnya dulu, saya sarankan kalian mendownload template berikut ini agar tampilan CRUD kalian lebih menarik Template Gratisan. Ya walaupun templatenya tidak menarik-menarik sekali.

Setelah template didownload masukkan semua file template (css dan js) tersebut ke public/ kecuali file layout.html yang harus kalian masukkan ke folder resources/view/ dan rename ekstensinya menjadi blade (layout.blade.php)

Buka teks editor kalian, edit link file css pada <head> dan link skrip javascript pada <script> dalam file layout.blade.php yang awalnya seperti ini.

Rubah jadi seperti ini.

Begitulah cara menghubungkan file css dan javascript di laravel dengan menggunakan asset().

Kemudian pada bagian ini kita tambahkan directive yield()

Directive @yield() digunakan sebagai penanda bahwa di bagian tersebut nantinya akan diisi oleh template anak yang mewarisi komponen dari template induknya (layout.blade.php).

Untuk melihat sukses tidaknya template layout dipasang kalian bisa setting dulu di routes/web.php. Kita edit saja route defaultnya, arahkan routenya ke file layout.blade.php yang sebelumnya diisi oleh layout bawaan laravel welcome.blade.php


Membuat Model di Laravel 6

Agar data inputan dapat diorganisir secara baik dan bisa diarahkan ke tabel yang diminta, maka kita perlu membuat model. Buka terminal atau cmd dan ketikkan:

php artisan make:model Buku

Perlu dicatat nama model disarankan sama dengan nama tabel yang akan dituju tapi dengan kata tunggal dan huruf kapital seperti di atas (Buku).

Untuk mengedit model maka kalian harus pergi ke folder app/Buku.php

selanjutnya kita deklarasikan tabel bukus ke dalam variabel $table dan deklariskan pula primary key ke dalam variabel $primaryKey seperti di bawah ini.

Jika sudah mari lanjutkan dengan pembuatan controller


Membuat Controller di Laravel

Setup view dan model sudah, sekarang saatnya membuat jembatan yang berguna untuk menghubungkan keduanya atau mengatur inputan yang mana di laravel kita sebut controller.

Ketikkan perintah berikut via terminal atau cmd:

php artisan make:controller BukuController

Atau jika kalian ingin menggenerate secara otomatis 7 fungsi penting untuk CRUD seperti index(), create(), store(), edit(), update(), show(), dan delete(). Maka yang perlu kalian tambahkan adalah opsi –resource

php artisan make:controller BukuController --resource

Perlu dicatat juga bahwa nama controller di laravel pada umumnya sama dengan model dengan huruf kapital juga. Namun yang membedakan karena ini sebuah controller, maka kita juga kasih embel-embel controller sama seperti contoh di atas.

Lokasi BukuController.php berada di app/Http/Controllers/

Oh ya pastikan model Buku.php sudah terhubung dengan BukuController.php.


Setup Route di Laravel 6

Selangkah lagi sebelum memulai praktek CRUD File, kita persiapkan dulu routenya. route di laravel berguna untuk alamat yang nantinya akan dituju, seperti sebelumnya path route berada di routes/web.php.

Tambahkan baris kode singkat berikut di routes/web.php:

Route::resource('buku', 'BukuController');

Dapat dilihat pada kode di atas kita buat halaman beranda dari crud data buku dengan nama 'buku' maka nantinya ketika kita ingin menampilkan data buku atau halaman indeks buku kita perlu mengunjungi alamat localhost:8000/buku

Kemudian kita menggunakan route resource yang mana dengan menggunakan route ini kita tidak perlu menghubungkan satu-persatu antara method di BukuController dengan route, hanya dengan 1 baris kode ini sudah mewakili semuanya.

Untuk melihat detail setiap route seperti url, name, controller, dan method bisa kita gunakan perintah:

php artisan route:list

Coba lihat untuk nantinya menampilkan fitur create misalnya, kita perlu mengunjungi dan mangarahkan ke alamat buku.create() yang berarti localhost:8000/buku/create/, untuk edit buku ke alamat buku.edit() yang berarti localhost:8000/buku/edit/ dan seterusnya.


CRUD File di Laravel 6

Sebelum membuat program CRUD Filenya tolong kalian buat folder uploads di dalam folder public/. Kemudian di dalam folder uploads/ tersebut buat 2 folder lagi dengan nama gambar dan dokumen yang nantinya digunakan untuk menyimpan file sesuai dengan jenisnya masing-masing.


Tambah Data di Laravel 6

Tambah data atau membuat data di laravel 6 merupakan fitur pertama yang akan kita buat. Awal mula kalian salin view di bawah ini dan simpan di resources/view/ dengan nama tambah.blade.php.

Karena ini adalah fitur tambah data maka kita perlu method create() dan store() di BukuController.php. Keduanya harus kita ubah seperti ini.

Setelah selesai kita buka alamat localhost:8000/buku/create/ (ingat route:list tadi yang mana uri dari create adalah buku.create). Jika tidak ada error maka seharusnya kalian sudah bisa melihat tampilan form untuk tambah data seperti ini.

Kemudian coba masukkan data sesuai masing-masing field yang tertera dan klik button simpan jika sudah.

Selanjutnya coba kalian tengok ke phpmyadmin apakah data yang tadi dimasukkan ada? Jika ada selamat fitur Create berhasil dibuat.


Penjelasan Kode Beserta Langkah-Langkahnya:

Pertama, buka alamat localhost:8000/buku/create/ yang mana pada alamat ini method create() dipanggil guna untuk menampilkan view tambah.blade.php.

Pada baris awal view tambah.blade.php wariskan template induk (layout.blade.php) ke template anak (tambah.blade.php) dengan menggunkaan directive @extends(‘nama_template_induk’) kemudian di sinilah kegunaan directive @yield pada template induk, sebagai penanda dimana tag html pada file yang berbeda akan diletakkan, sedangkan tag html tersebut didefinisikan di dalam directive @section(‘nama_yield_induk).

Kedua, setelah view tambah.blade.php ditampilkan maka akan muncul form dengan field sesuai data buku yang dibutuhkan. Field-field tersebut diberi atribut name sebagai identifikasi data request untuk kolom-kolom yang ada di tabel crud_file. Sebelum nantinya field data diisi dan disubmit pentingnya kita menambahkan crsf_field() untuk menggenerate token crsf agar sistem kalian terhindar dari serangan crsf. Selanjutnya setelah disubmit, data dikirim ke method store() menggunakan method POST. Oh ya karena dalam fitur ini juga menginputkan file maka diperlukan atribut enctype dalam form.

Ketiga, pada method store() dipanggil kelas Buku yang mana kelas Buku ini merupakan model, selanjutnya masukkan satu persatu data request tadi sesuai dengan kolom yang bersangkutan.

Namun untuk sampul_buku dan sampel_buku karena yang disimpan adalah url file yang bersangkutan, jadi kita uraikan dahulu.

Langkah pertama buat variabel untuk menyimpan lokasi/path awal dari file gambar dan dokumen buku yang telah diinputkan.

$sampul_buku = $request->file('sampul_buku');

$sampel_buku = $request->file('sampel_buku');

Kemudian buat variabel untuk menyimpan ekstensi dari file yang berhasil diupload tadi dengan method getClientOriginalExtension().

$ekstensi_sampul = $sampul_buku->getClientOriginalExtension();

$ekstensi_sampel = $sampel_buku->getClientOriginalExtension();

Lalu buat variabel lagi untuk menyimpan nama baru untuk file inputan tersebut. Struktur nama file yang baru, tersusun atas "sampul_" atau "sampel_", dilanjutkan dengan nama file, yang mana nama file ini diambil dari data request judul_buku, dan diakhiri dengan ekstensi file tersebut.

$nama_sampul = "sampul_" . $request->input('judul_buku').".".$ekstensi_sampul;

$nama_sampel = "sampel_" . $request->input('judul_buku').".".$ekstensi_sampel;

Terakhir pindahkan file tersebut ke folder gambar atau dokumen yang ada di dalam folder public/ dengan nama baru yang sudah dibuat sebelumnya. Nama baru tersebut juga disimpan ke dalam tabel buku.

$sampul_buku->move('gambar/',$nama_sampul);
$data->sampul_buku = $nama_sampul;

$sampel_buku->move('dokumen/',$nama_sampel);
$data->sampel_buku = $nama_sampel;

Keempat, simpan seluruh data request tadi dan jika berhasil akan diredirect ke halaman buku.index atau localhost:8000/buku/index dengan pesan seperti di bawah.

$data->save();
return redirect()->route('buku.index')->with('success','Selamat! Data buku ' . $data->judul_buku . ' berhasil ditambahkan!');

Dengan menambahkan kode berikut pada file beranda.blade.php, maka pesan alert ataupun pesan error akan ditampilkan.


Membuat Fitur Read di Laravel 6

Untuk melihat data yang masuk kita tidak bisa terus login phpmyadmin dan mengeceknya, maka dari itu fitur Read di sini digunakan untuk menampilkan daftar data yang berhasil dimasukkan.

Langkah pertama sama seperti sebelumnya kita buat dulu view dengan nama beranda.blade.php. Copy kode berikut:

Kemudian pada method index() di BukuController.php.

Kode di atas akan menampilkan seluruh data yang berhasil disimpan di tabel bukus.

Lalu kita cek dengan mengunjungi localhost:8000/buku/ apakah data inputan tadi berhasil ditampilkan? Jika iya selamat.


Penjelasan Kode Beserta Langkah-Langkahnya:

Pertama kita ambil semua data pada tabel buku melalui model Buku dan simpan di variabel datas, kemudian kembalikan nilai dari data ke beranda.blade.php dengan method compact, method ini bertipe array.

Finally, pada beranda.blade.php buat tampilan tabel dan masukkan data-data tersebut sesuai kolom yang bersangkutan, karena datanya bertipe array maka cara kita mengaksesnya perlu menggunakan perulangan (foreach).

Tambahan, beri button “Tambah Data” agar kita lebih mudah mengakses form tambah data


Membuat Fitur Edit di Laravel 6

Waduh data yang saya inputkan salah nih? Bagaimana cara editnya? Mudah saja, kalian hanya perlu membuat fitur Update! Yuh segera dibuat.

Seperti biasa siapkan view nya dulu, karena view fitur Update tidak jauh beda nantinya dengan view dari fitur Create. Alangkah mudahnya kita copy saja view dari fitur Create tambah.blade.php dan beri nama ubah.blade.php.

Kemudian ubah sedikit

Lanjut ke controller untuk fitur ubah data ini gunakan fungsi edit() dan update(). Isi kedua fungsi tersebut dengan kode berikut:

Akhirnya, tes di localhost:8000/buku/id_buku/edit (id_buku) diisi dengan nomor id_buku misalnya 1. Jadi localhost:8000/buku/1/edit.

Ubah setiap inputan sebelumnya dan simpan, apakah berhasil berubah?

Untuk memudahkan kita mengedit data maka tolong tambahkan kolom Kelola Data di bawah kolom sampel_data

Pada file beranda.blade.php. Kemudian pada <tbody> tambahkan kode berikut yang berguna untuk mengarahkan kita ke fitur edit tiap data berdasarkan id_buku.


Penjelasan Kode Beserta Langkah-Langkahnya:

Pertama, kita buat form yang mengarah ke alamat buku.update atau fungsi update(), method yang digunakan sama dengan fitur Create yaitu POST dan karena terdapat inputan berupa file perlu juga ditambahkan enctype.

Kedua, tambahkan kode methode crsf untuk menggenerate token crsf agar sistem kalian terhindar dari serangan crsf, kemudian method PUT yang digunakan untuk mereplace resources secara keseluruhan.

{{ csrf_field() }} {{ method_field('PUT') }}

Ketiga, buat field masing-masing inputan, bedanya dengan form Create, pada form Update setiap field diberi atribut value yang mana akan menampilkan data sebelumnya.

Namun untuk field upload gambar dan dokumen tidak bisa diberi atribut value maka dari itu untuk mengelabuinya, saya tampilkan saja data gambar sebelumnya dengan tag img sedangkan untuk dokumen saya tampilkan dengan tag label.

Keempat, setelah data dikirim ke method update, kita panggil tabel buku melalui model Buku, kemudian gunakan method findOrFail() dengan patokan id_buku. Method ini berguna untuk mencari data pertama yang diinginkan oleh user, jika method tidak menemukan data yang dimaksud maka akan melempar pesan error.

public function update(Request $request, $id_buku){
   $data = Buku::findOrFail($id_buku);

Kelima, masukkan tiap data request ke kolom pada tabel buku sesuai namanya.

$data->judul_buku = $request->judul_buku;
$data->penulis_buku = $request->penulis_buku;
$data->tanggal_terbit_buku = $request->input('tanggal_terbit_buku');

Untuk data gambar dan dokumen buat percabangan dengan struktur yang sama dengan kondisi bila field gambar atau dokumen kosong maka akan diinputkan data yang lama

Sedangkan jika ada gambar/dokumen baru maka gambar/dokumen lama akan dihapus menggunakan method unlink dengan parameter nama folder dan nama file.

unlink('uploads/gambar/'.$data->sampul_buku);

unlink('uploads/dokumen/'.$data->sampel_buku);

Setelah gambar/dokumen dihapus maka akan dilakukan proses input seperti dalam method store(). Data nama gambar dan nama dokumen dalam tabel bukus akan direplace dengan data baru.


Membuat Fitur Hapus Data

Fitur terakhir yang paling saya sukai dan gampang dibuat adalah fitur Delete data atau hapus data. Kita cukup menambahkan form berikut tepat di atas button edit data pada file beranda.blade.php.

Kemudian pada controller juga cukup tambahkan kode berikut.

Nah karena kita menghapus file gambar dan dokumen menggunakan File::delete() maka pastikan di atas BukuController.php kita masukkan method File.

Testing apakah berhasil?


Penjelasan Beserta Langkah-Langkah Kode:

Pertama, buat button di dalam form dengan action yang nantinya memanggil method destroy berdasar data id_buku lalu gunakan method POST untuk mengirimnya.

Kedua, tambahkan crsf_field dan method_field DELETE untuk menghapus resource-nya nanti, kemudian buat button dengan alert konfirmasi apakah data akan dihapus?

{{ csrf_field() }}
{{ method_field('DELETE') }}

Ketiga, jika iya maka form akan menuju url buku.delete dan memanggil method delete() untuk selanjutnya menghapus data melalui model Buku dan untuk menghapus filenya gunakan File::delete().

$data = Buku::findOrFail($id_buku);
File::delete('gambar/'.$data->lokasi_sampul_buku, 'dokumen/'.$data->lokasi_sampel_buku);
$data->delete();

Baiklah mungkin materi CRUD File di Laravel 6 ini sudah bisa diakhiri, jika kalian terkendala error tolong komen di bawah ya, kalau ada waktu pasti akan saya balas. Btw untuk source codenya bisa di download di bawah ini. Tetap semangat belajar. 🙂


Download Program CRUD File di Laravel 6

Source code program CRUD filenya bisa di download di link berikut.

Download
Referensi

https://laravel.com/docs/6.x/releases

Kategori