LARAVEL 7 | CRUD Part 2 Menggunakan laravel

Sebelumnya kita telah membuat projek sampai pada tahap retriving data dari database menggunakan query builder dan eloquent ORM, pada tahap ini kita akan melanjutkannya dengan melakukan CRUD sederhana menggunakan eloquent ORM, saya akan membuat beberapa perubahan pada tampilan seperti menambahkan button untuk menambah data pada index.blade.php

1. Tambah Data

Pertama saya buat tombol yang digunakan untuk menambahkan data barang, tombol ini akan mentriger modal box atau pop up yang nantinya modal ini kita isi dengan data yang akan kita simpan kedalam database. Untuk kode button dan modal basenya sama seperti menggunakan bootstrap pada umumnya. Berikut kode program saya :

<button type="button" class="btn btn-success float-right mb-1" data-toggle="modal" data-target="#modalTambahBarang">Tambah Barang</button>

untuk modal box yang akan di trigger oleh tombol diatas

<div class="modal fade" id="modalTambahBarang" tabindex="-1" aria-labelledby="modalTambahBarang" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Tambah Barang</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!--FORM TAMBAH BARANG-->
<form action="" method=" ">
<div class="form-group">
<label for="">Nama Barang</label>
<input type="text" class="form-control" id="addNamaBarang" name="addNamaBarang" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="">Jumlah Barang</label>
<input type="text" class="form-control" id="addJumlahBarang" name="addJumlahBarang">
</div>
<button type="submit" class="btn btn-primary">Simpan Data</button>
</form>
<!--END FORM TAMBAH BARANG-->
</div>
</div>
</div>
</div>

Maka hasil dari tampilannya akan seperti berikut :

hasil dari button dan modal yang baru dibuat

Sesuai dengan dokumentasi Laravel menggunakan eloquent ORM, untuk menyimpan data kita masukkan kedalam method function bernama store. Jadi langsung saja kita buka controller kita yang bernama BarangController dan cuss menuju metho store.

Dimethod store tambahkan kode berikut :

$tambah_barang = new BarangModel;
$tambah_barang->nama_barang = $request->addNamaBarang;
$tambah_barang->jumlah_barang = $request->addJumlahBarang;
$tambah_barang->save();
return redirect('/beranda-yo');

penjelasan kode diatas :

$nama_variabel = new NamaModel //disini kita inisiasi object baru

$nama_variabel->kolom_nama_pada_database = $parameter_request_pada_method_store->dengan input name ‘addNamaBarang’

$nama_variabel->kolom_nama_pada_database = $parameter_request_pada_method_store->dengan input name ‘addJumlahBarang’

Simpan data

Dan redirect ke url beranda-yo

Jika sudah seperti diatas, kita buat routesnya dengan membuka folder routes->web.php
Tambahkan kode berikut pada web.api :

Route::post('/beranda-yo', 'BarangController@store');

Karena kita menambah data pastikan method yang digunakan adalah method ‘POST’ bukan ‘GET’, lalu tambahkan action pada form modal yang telah kita buat sebelumnya dan method yang digunakan adalah method post, seperti berikut :

<div class="modal-body">
<!--FORM TAMBAH BARANG-->
<form action="{{ action('BarangController@store') }}" method="post">

Jika sudah, yuk kita coba menambahkan file gasss 😊

hasil running masih error 419

Jika saat kita menekan tombol simpan data tetapi data kita tidak tersimpan dan muncul halaman seperti diatas, artinya kita membutuhkan token, karena Laravel memiliki security yang baik. Cara menambahkan token dengan menambahkan kode @csrf pada form seperti berikut :

menambahkan token

Pengertian csrf bisa kalian cari sendiri ya, takutnya terlalu Panjang jika dijelaskan 😊. Jika sudah coba refresh halaman dan tambahkan data

Yee tambah data menggunakan eloquent ORM berhasil deh, yuhu yuhu

2. Hapus Data

Selanjutnya kita akan menghapus data tersebut, untuk menghapus data kita membutuhkan id dari data yang akan kita hapus.

pertama saya akan modifikasi sedikit htmlnya dengan menambahkan modal verifikasi apakah data akan dihapus atau tidak supaya lebih bagus aja sih tujuannya hehe. Berikut kode program untuk tombol delete :

<button class="btn btn-danger" data-toggle="modal" data-target="#modalHapusBarang">Delete</button>

Berikut kode program untuk modal-box :

<div class="modal fade" id="modalHapusBarang" tabindex="-1" aria-labelledby="modalHapusBarang" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h4 class="text-center">Apakah anda yakin menghapus barang ini? :</h4>
</div>
<div class="modal-footer">
<form action="" method="post">
<button type="button" class="btn btn-primary">Hapus Barang!</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tidak Jadi</button>
</div>
</div>
</div>
</div>

Hasilnya seperti berikut :

Nah selanjutnya kita modifikasi sedikit pada button deletenya agar mengirimkan id barang dalam kasus kita adalah kode_barang ke modal agar di modal dapat menampilkan nama barang yang akan didelete untuk memastikan kita tidak salah menghapus barang saat kita mengirim id atau kode_barang kedalam controller. Tambahkan kode berikut pada tombol delete :

<button class="btn btn-danger" data-toggle="modal" data-target="#modalHapusBarang{{ $barang->kode_barang }}">Delete</button>

perhatikan pada data-target. dan kita tambahkan juga kode berikut pada modal yang telah kita buat

<div class="modal fade" id="modalHapusBarang{{ $barang->kode_barang }}" tabindex="-1" aria-labelledby="modalHapusBarang" aria-hidden="true">

Kode diatas digunakan untuk menerima id atau kode_barang yang dikirimkan dari button delete ke model perhatikan pada bagian idnya terdapat tambahan kode :

{{ $barang->kode_barang }}

Dan kode dibawah merupakan cara untuk menampilkan nama barang yang akan didelete, perhatikan terdapat kode tambahan yang dimulai dari tag <span>

<h4 class="text-center">Apakah anda yakin menghapus barang ini? : <span>{{ $barang->nama_barang}} </span></h4>

modal yang saya gunakan bukan modal yang menggunakan JQuery, triknya adalah masukkan modal kedalam looping

Jika untuk urusan front-end sudah selesai. Kita bisa menambahkan beberapa kode untuk mengirimkan id atau kode_barang yang akan kita hapus ke controller, berikut caranya :

Pada form action kita tambahkan route seperti berikut :

<form action="/beranda-yo/{{ $barang->kode_barang }}" method="post">
@csrf
@method('delete')

Nah untuk method kita menggunakan method post, tetapi kita harus menambahkan juga tag method blade seperti ini :

@method('delete')

Yang digunakan pada routes, agar routes dapat menangkap apa yang kita perbuat seperti delete, put, get dan post. Jangan lupa untuk menambahkan @csrf. Jika dilihat keseluruhan seperti ini :

Selanjutnya kita buka web.api dan tambahkan routes seperti berikut :

Route::delete('/beranda-yo/{BarangModel}', 'BarangController@destroy');

Jika sudah lanjutkan ke Controller dengan menambahkan kode berikut pada method function destroy :

public function destroy($id){
return dd($id);
}

Kita cek dulu apakah data yang kita kirimkan ke controller sudah sesuai dengan id atau kode_barang yang ingin kita delete, kita gunakan fungsi dd($id) untuk melihat nilai idnya. Missal saya akan mendelete data yang bernama teh gelas, yaitu data nomor 1 pada kode_barang dalam table stuff. Dan id yang direturn oleh method destroy adalah id nomor 1, berarti data yang ingin dihapus sudah benar

gambar output kode_barang

Jika sudah sesuai tambahkan kode berikut pada method destroy :

public function destroy($id){
BarangModel::destroy($id);
return redirect('/beranda-yo');
}

Dan kita coba delete data dengan nama delete

Hore data dengan nama delete pun terhapus 😊

3. Update Data

Kembali lagi kita buat modal untuk mengupdate data, anda dapat mengcopynya dari modal delete barang atau modal tambah barang, namun jangan lupa untuk menambahkan 3 hal penting :

1. Pertama action pada form, pastikan sudah sesuai
2. Kedua method yang digunakan
3. Dan token @csrf

Seperti kode berikut, saya juga menambahkan kode untuk menampilkan barang yang diupdate agar tidak keliru saat mengupdate data. Dapat dilihat pada kode berikut :

<!-- Modal Update Barang-->
<div class="modal fade" id="modalUpdateBarang{{ $barang->kode_barang }}" tabindex="-1" aria-labelledby="modalUpdateBarang" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Barang</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!--FORM UPDATE BARANG-->
<form action="/beranda-yo/{{ $barang->kode_barang }}" method="post">
@csrf
@method('put')
<div class="form-group">
<label for="">Nama Barang</label>
<input type="text" class="form-control" id="updateNamaBarang" name="updateNamaBarang"
value="{{ $barang->nama_barang}}">
</div>
<div class="form-group">
<label for="">Jumlah Barang</label>
<input type="text" class="form-control" id="updateJumlahBarang" name="updateJumlahBarang"
value="{{ $barang->jumlah_barang}}">
</div>
<button type="submit" class="btn btn-primary">Perbarui Data</button>
</form>
<!--END FORM UPDATE BARANG-->
</div>
</div>
</div>
</div>
<!-- End Modal UPDATE Barang-->

Dan untuk button updatenya :

<button class="btn btn-primary" data-toggle="modal" data-target="#modalUpdateBarang{{ $barang->kode_barang }}">Update</button>

Jika sudah kita bisa menambahkan routes seperti berikut :

Route::put('/beranda-yo/{BarangModel}', 'BarangController@update');

Dan pada controller kita tambahkan kode berikut, jangan lupa untuk mengecek datanya terlebih dahulu :

public function update(Request $request, $id)
{
$update_barang = BarangModel::find($id);
$update_barang->nama_barang = $request->updateNamaBarang;
$update_barang->jumlah_barang = $request->updateJumlahBarang;
return dd($update_barang);
}

Saya akan merubah data Mie Sedap menjadi indomie dan jumlahnya bertambah menjadi 24

Terlihat data yang original dan data yang baru, berarti data kode sudah benar tinggal kita tambahkan kode untuk menyimpand ata perubahan dan kita arahkan ke halaman beranda lagi

Terdiri dua parameter pada method function update, parameter pertama adalah parameter $request yang berisikan data data baru dibuktikan dengan kode $request->updateNamaBarang. Nilai updateNamaBarang ini didapat dari name pada form input nama barang
$id merupakan kode_barang yang kita kirim

Dan jenjeng, kita berhasil melakukan update pada data menggunakan modal

Untuk tombol detail sepertinya saya akan menampilkan data seperti update hanya saja tidak bisa diedit dan tidak dapat disimpan, tetapi tidak saya sertakan karena nanti terlalu Panjang, lagi pula CRUDnya sudah terpenuhi, sekian terima kasihhh dan selamat membaca 😊