Press "Enter" to skip to content

Belajar CRUD Laravel dari 0 sampai Mahir

Published June 16, 2021 by fadli
fadli 3
belajar crud laravel

Belajar CRUD Laravel dari awal – Seperti yang sudah kita bahas pada artikel sebelum nya yaitu 27 Trik Belajar Eloquent di Laravel..

Disini kita akan mulai praktek dalam pembuatan CRUD nya menggunakan Eloquent pada Laravel, akan kita mulai semuanya dari awal, mulai dari proses instalasi, sampai nanti yang terakhir yaitu proses hapus data..

Jadi langsung saja yaa.. Kita mulai dari tahap pertama terlebih dahulu..

Instalasi laravel Via Composer

Untuk versi Laravel yang saya gunakan saat ini yaitu versi 8, karena ini adalah versi terbaru untuk saat ini..

Kalo teman-teman ingin menggunakan versi yang lain, silahkan saja, karena kurang lebih hampir secara keseluruhan cara nya sama saja, ga jauh berbeda..

Untuk panduan instalasi Laravel, sebetulnya teman-teman bisa langsung ikutin panduan yang ada pada official website nya, silahkan klik disini..

Tapi disini saya juga akan mengarahkan cara instalasi laravel nya menggunakan cara saya sendiri..

Jadi kita akan coba lakukan instalasi laravel versi 8 nya dengan menggunakan composer.

Trending
Cara Looping Diantara 2 Tanggal Menggunakan PHP

Bagi teman-teman yang belum nginstall composer, silahkan install dulu disini..

Setelah terinstall composer nya, di CMD jalankan perintah ini:

composer create-project laravel/laravel belajar-crud

Kemudian setelah proses instalasi nya selesai, kita jalankan perintah php artisan serve..

php artisan serve

Buka web browser kalian, akses : http://127.0.0.1:8000

http://127.0.0.1:8000

Nanti kita akan melihat tampilan yang seperti ini:

Belajar CRUD Laravel
Belajar CRUD Laravel

Belajar CRUD Laravel – Database

Sekarang kita mulai integrasikan project kita dengan database nya terlebih dahulu..

Pertama, temen-temen buat database baru terlebih dahulu dengan nama apa saja, kalo disini nama database nya adalah belajar_crud..

phpmyadmin
phpmyadmin

Kalian bisa buat database nya menggunakan phpmyadmin seperti yg sedang saya gunakan sekarang..

Setelah itu, kalian hubungkan database nya melalui file .env, edit seperti dibawah ini:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar_crud
DB_USERNAME=root
DB_PASSWORD=

Untuk username dan password nya, silahkan kalian sesuaikan sendiri dengan komputer nya masing-masing, untuk password, secara default dia kosong gitu aja.. tapi kalo kamu sudah mengubah nya, silahkan diisi dengan password yang baru..

Sekarang selanjutnya kita akan buat table baru, disini kita akan membuat table siswa yang didalam nya terdapat nama, nisn, no_hp, email, dan alamat..

Kita buat terlebih dahulu  file model, migration, dan juga controller nya..

php artisan make:model Siswa -mc

Nanti teman-teman bisa lihat di struktur folder nya..

Untuk file model berada di App/Models..

Controller berada di App/Http/Controllers..

Dan file migration berada di database/migrations..

Untuk trik trik lainnya, kalian bisa baca artikel sebelum nya tentang 27 Trik Belajar Eloquent di Laravel..

sekarang buka file migration nya, dan isi seperti berikut:

....
public function up()
    {
        Schema::create('siswas', function (Blueprint $table) {
            $table->id();
            $table->string('nama');
            $table->string('nisn');
            $table->string('no_hp');
            $table->string('email');
            $table->text('alamat')->nullable();
            $table->timestamps();
        });
    }
....

$table->id() ini digunakan untuk menciptakan kolom id sekaligus dengan nilai auto increment nya,,

$table->timestamps() ini digunakan untuk menciptakan kolom created_at dan updated_at..

Setiap field yang ditambahkan atribut nullable() dibelakang nya, artinya value untuk kolom tersebut boleh null, atau tidak wajib untuk diisi..

Kemudian di CMD jalankan perintah php artisan migrate

php artisan migrate

Kemudian cek di database kamu, akan terdapat beberapa table, salah satunya ada table siswas yang barusan sudah kita buat melalui migration..

belajar crud laravel
belajar crud laravel

Create Data Siswa

Sekarang langkah selanjut nya, kita mulai dengan menambahkan data siswa nya terlebih dahulu, nanti kita akan coba memasukkan data nya kedalam table siswa..

Tambahkan route baru terlebih dahulu di file ../routes/web.php seperti dibawah ini:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SiswaController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::get('siswa/create',[SiswaController::class,'create']);
Route::post('siswa/create',[SiswaController::class,'store']);

Pertama kita panggil dulu SiswaController nya..

....
use App\Http\Controllers\SiswaController;
....

Kemudian kita tambahkan 2 route baru, route pertama adalah untuk memanggil halaman form nya.. Disini kita mengarahkan nya ke SiswaController function create..

....
Route::get('siswa/create',[SiswaController::class,'create']);
....

Kemudian route kedua digunakan untuk memproses penyimpanan datanya kedalam table siswas, disini kita mengarahkan nya ke SiswaController function store..

....
Route::post('siswa/create',[SiswaController::class,'store']);

Beda nya di antara kedua route tersebut adalah perbedaan di jenis method nya, route pertama menggunakan method get, yang kedua menggunakan method post..

Sekarang kita buka SiswaController nya, dan isi seperti berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Siswa;

class SiswaController extends Controller
{
    public function create(){
    	return view('siswa.create');
    }

    public function store(Request $request){
    	$data = new Siswa;
    	$data->nama = $request->nama_siswa;
    	$data->nisn = $request->nisn;
    	$data->no_hp = $request->no_hp;
    	$data->email = $request->email;
    	$data->alamat = $request->alamat;
    	$data->save();

    	return redirect('siswa/create');
    }
}

Pertama, kita panggil dulu model Siswa nya..

....
use App\Models\Siswa;
....

Kemudian kita buat function create..

....
public function create(){
    	return view('siswa.create');
    }
....

Dimana di function create tersebut, kita mengarahkan ke view ../siswa/create..

Kemudian kita buat function store untuk proses penyimpanan data nya..

....
public function store(Request $request){
    	$data = new Siswa;
    	$data->nama = $request->nama_siswa;
    	$data->nisn = $request->nisn;
    	$data->no_hp = $request->no_hp;
    	$data->email = $request->email;
    	$data->alamat = $request->alamat;
    	$data->save();

    	return redirect('siswa/create');
    }
....

Didalam function store kita wajib membawa parameter Request $request, ini kita butuhkan karena kita akan memanggil value dari sebuah form..

....
public function store(Request $request){
....

Dan setelah proses penyimpanan data nya berhasil, maka kita akan langsung di arah kembali ke url siswa/create..

....
return redirect('siswa/create');
....

Sekarang kita buat view nya..

Didalam folder ../resources/views kamu buat folder baru terlebih dahulu dengan nama siswa..

Kemudian didalam folder siswa kamu buat file baru dengan nama create.blade.php.

Sekarang kamu buka file tersebut..

../resources/views/siswa/create.blade.php

Dan isi seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>sangcahaya.id</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form role="form" method="post" action="{{ url('siswa/create') }}">
                    @csrf
                  <div class="box-body">
                    <div class="form-group">
                      <label for="exampleInputEmail1">Nama</label>
                      <input type="text" class="form-control" placeholder="Nama" name="nama_siswa">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Nisn</label>
                      <input type="text" class="form-control" placeholder="Nisn" name="nisn">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">No HP</label>
                      <input type="text" class="form-control" placeholder="No HP" name="no_hp">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email</label>
                      <input type="text" class="form-control" placeholder="Email" name="email">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Alamat</label>
                      <textarea class="form-control" name="alamat" rows="5"></textarea>
                    </div>
                  </div>
                  <!-- /.box-body -->
     
                  <div class="box-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

Diatas kita membuat form, dan mengarahkan action nya siswa/create, serta menggunakan method post

....
<form role="form" method="post" action="{{ url('siswa/create') }}">
....

Kemudian karena form ini menggunakan method post, maka kita wajib membawa csrf field, kita cukup menambahkan nya dengan perintah @csrf, seperti berikut:

....
<form role="form" method="post" action="{{ url('siswa/create') }}">
@csrf
....

Sekarang kalo kita buka url nya, maka seharusnya akan tampil sebuah form seperti berikut:

http://127.0.0.1:8000/siswa/create

laravel crud

Kemudian coba kalian test submit form nya, jika berhasil maka sistem akan kembali ke halaman form penambahan data siswa..

Kamu juga bisa cek di database nya, data nya sudah masuk atau belum..

belajar laravel crud
belajar laravel crud

Menampilkan List Data Siswa

Sekarang saat nya kita menampilkan data siswa yang tadi sudah kita tambahkan..

Kita buat terlebih dahulu route nya:

....
Route::get('siswa/list',[SiswaController::class,'index']);

Pada route siswa/list, kita masih mengarahkan nya ke SiswaController, tetapi ke function index..

Kita buka aja file SiswaController nya, kemudian tambahkan function baru dengan nama index..

....
public function index(){
   $data = Siswa::all();

   return view('siswa.index',compact('data'));
}
....

Coba kita perhatikan pada function index di atas, kita membuat sebuah variable data untuk menampung seluruh data siswa nya..

....
$data = Siswa::all();
....

baca juga : 27 Trik Belajar Eloquent di Laravel

Kemudian kita mengarahkan nya ke view ../siswa/index, dan mempassing variable data nya kedalam view tersebut menggunakan perintah compact()..

return view('siswa.index',compact('data'));

Sekarang kita buat dulu file index.blade.php didalam folder siswa nya..

../resources/views/siswa/index.blade.php

Kemudian isi seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>sangcahaya.id</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>NISN</th>
                                <th>No HP</th>
                                <th>Email</th>
                                <th>Alamat</th>
                                <th>Created At</th>
                                <th>Updated At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $dt)
                            <tr>
                                <td>{{$dt->nama}}</td>
                                <td>{{$dt->nisn}}</td>
                                <td>{{$dt->no_hp}}</td>
                                <td>{{$dt->email}}</td>
                                <td>{{$dt->alamat}}</td>
                                <td>{{$dt->created_at}}</td>
                                <td>{{$dt->updated_at}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

Perhatikan di atas, disana kita membuat sebuah table dengan beberapa kolom..

....
<thead>
   <tr>
      <th>Nama</th>
      <th>NISN</th>
      <th>No HP</th>
      <th>Email</th>
      <th>Alamat</th>
      <th>Created At</th>
      <th>Updated At</th>
   </tr>
</thead>
....

Kemudian didalam tbody, kita foreach variabel data yang sebelum nya variable tersebut berada di SiswaController yang kemudian kita passing ke file view nya..

<tbody>
    @foreach($data as $dt)
        <tr>
            <td>{{$dt->nama}}</td>
            <td>{{$dt->nisn}}</td>
            <td>{{$dt->no_hp}}</td>
            <td>{{$dt->email}}</td>
            <td>{{$dt->alamat}}</td>
            <td>{{$dt->created_at}}</td>
            <td>{{$dt->updated_at}}</td>
        </tr>
    @endforeach
</tbody>

Kita foreach variabel data nya yang kemudian kita kasih initial dengan nama variabel dt..

Kemudian didalam foreach nya, kita tinggal panggil atribut-atribut yang ingin kita tampilkan..

Sekarang kalo kita buka halaman nya: http://127.0.0.1:8000/siswa/list, maka seharusnya akan tampil seperti berikut:

list data siswa
list data siswa

Edit Data Siswa

Untuk dapat melakukan edit data siswa, pertama kita harus buat kolom baru terlebih dahulu di table siswa nya..

Kita beri nama aja kolom action, dimana nanti didalam kolom action ini terdapat button edit dan juga button delete..

Berarti buka kembali file index nya..

../resources/views/siswa/index.blade.php

Kemudian didalam element thead, kita tambahkan th baru, kita beri nama action dan kita taruh di paling atas saja:

....
<thead>
    <tr>
        <th>Action</th>
        <th>Nama</th>
        <th>NISN</th>
        <th>No HP</th>
        <th>Email</th>
        <th>Alamat</th>
        <th>Created At</th>
        <th>Updated At</th>
    </tr>
</thead>
....

Maka berarti didalam element tbody nya, kita juga wajib menambahkan td baru, kita isi dengan button edit seperti berikut:

....
<tbody>
    @foreach($data as $dt)
    <tr>
        <td>
            <a href="{{ url('siswa/'.$dt->id) }}">Edit</a>
        </td>
        <td>{{$dt->nama}}</td>
        <td>{{$dt->nisn}}</td>
        <td>{{$dt->no_hp}}</td>
        <td>{{$dt->email}}</td>
        <td>{{$dt->alamat}}</td>
        <td>{{$dt->created_at}}</td>
        <td>{{$dt->updated_at}}</td>
    </tr>
    @endforeach
</tbody>
....

Coba perhatikan pada button edit tersebut kita mengarahkan url nya ke ../siswa/id_siswa nya.. dimana id siswa tersebut kita jadikan  sebagai parameter pada url nya.. yang artinya parameter id siswa tersebut dapat berubah-rubah sesuai dengan data siswa yang ditampilkan..

.... 
<a href="{{ url('siswa/'.$dt->id) }}">Edit</a> 
....

Kalo kita refresh halaman list siswa nya, maka akan menjadi seperti ini:

list siswa
list siswa

Kalo kita arahkan cursor kita button edit, kita bisa cek url nya di pojok kiri bawah pada browser kita:

list siswa
list siswa

angka 2 setelah siswa adalah id dari siswa tersebut..

Oh iya, kita juga harus membuat route nya.. buka file web.php nya

../routes/web.php

Kemudian tambahkan 2 route baru seperti berikut:

....
Route::get('siswa/{id}',[SiswaController::class,'edit']);
Route::put('siswa/{id}',[SiswaController::class,'update']);

Route pertama digunakan untuk mengarahkan kita ke view edit nya..

Dan route kedua digunakan untuk memproses update data ke database nya..

Sama mengarah ke url yang sama: siswa/{id}, tapi memiliki method yang berbeda..

Yang pertama menggunakan method get, sedangkan yang kedua menggunakan method put..

Sama-sama di arahkan ke SiswaController, tapi berbeda function..

Arti dari kurung kurawal adalah menandakan bahwa itu adalah parameter..

Sekarang kita tambahkan function edit didalam SiswaController seperti berikut:

....
public function edit($id){
    	$siswa = Siswa::where('id',$id)->first();
    	return view('siswa.edit',compact('siswa'));
}
....

Coba perhatikan, kita menambahkan 1 parameter pada function tersebut..

....
public function edit($id){
....

Kemudian kita membuat variable siswa yang digunakan untuk menampung data siswa yang kita ambil sesuai dengan parameter yang dikirim..

....
$siswa = Siswa::where('id',$id)->first();
....

Jadi yang dikirim sebagai parameter adalah si id siswa nya, yang kemudian si parameter tersebut kita gunakan sebagai patokan untuk mencari data siswa nya yang akan kita edit nanti nya..

Kemudian kita arahkan ke view ../siswa/edit, dan juga mempassing variable siswa nya kedalam view tersebut dengan perintah compact..

....
return view('siswa.edit',compact('siswa'));
....

Sekarang buat terlebih dahulu file view edit nya, kemudian buka file tersebut..

../resources/views/siswa/edit.blade.php

Kemudian isi seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>sangcahaya.id</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form role="form" method="post" action="{{ url('siswa/'.$siswa->id) }}">
                    @csrf
                    {{ method_field('PUT') }}
                  <div class="box-body">
                    <div class="form-group">
                      <label for="exampleInputEmail1">Nama</label>
                      <input type="text" class="form-control" placeholder="Nama" name="nama_siswa" value="{{$siswa->nama}}">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Nisn</label>
                      <input type="text" class="form-control" placeholder="Nisn" name="nisn" value="{{$siswa->nisn}}">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">No HP</label>
                      <input type="text" class="form-control" placeholder="No HP" name="no_hp" value="{{$siswa->no_hp}}">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email</label>
                      <input type="text" class="form-control" placeholder="Email" name="email" value="{{$siswa->email}}">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Alamat</label>
                      <textarea class="form-control" name="alamat" rows="5">{{$siswa->alamat}}</textarea>
                    </div>
                  </div>
                  <!-- /.box-body -->
     
                  <div class="box-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

Coba kamu perhatikan, sebetulnya view tersebut di copy dari file create.blade.php, karena struktur secara keseluruhan nya adalah sama..

Yang membedakan nya yaitu adalah form action, kita mengarahkan nya ke url siswa/id_siswa_nya.. dimana id siswa nya diambil dari variable siswa yang sudah kita passing ke view tersebut, kemudian dari variable siswa tersebut kita get atribut id nya..

....
<form role="form" method="post" action="{{ url('siswa/'.$siswa->id) }}">
....

Kemudian karena di route nya menggunakan method PUT..

....
Route::put('siswa/{id}',[SiswaController::class,'update']);

Maka di form edit nya kita perlu menambahkan method_field(‘PUT’)..

....
@csrf
{{ method_field('PUT') }}
....

Sisa nya, untuk setiap inputan form nya masih sama seperti pada saat create, cuma kalo pada saat edit, kita sudah mendefinisikan value nya sesuai dengan data siswa yang akan di edit..

Misal pada inputan nama, kita tampilkan nama siswa tersebut kedalam atribut value..

....
<label for="exampleInputEmail1">Nama</label>
<input type="text" class="form-control" placeholder="Nama" name="nama_siswa" value="{{$siswa->nama}}">
....

Ini untuk menandakan bahwa nama siswa tersebut sebelum di edit adalah blablabla..

Begitu juga untuk inputan yang lainnya seperti nisn, no hp, email..

Sekarang kalo kamu klik button edit yang berada di paling sebelah kiri..

list siswa
list siswa

Maka seharusnya kita akan diarahkan ke halaman seperti berikut:

edit siswa
edit siswa

Selanjutnya kita buka kembali SiswaController nya, dan tambahkan function update di dalam nya seperti berikut:

public function update(Request $request,$id){
        $data = Siswa::where('id',$id)->first();
        $data->nama = $request->nama_siswa;
        $data->nisn = $request->nisn;
        $data->no_hp = $request->no_hp;
        $data->email = $request->email;
        $data->alamat = $request->alamat;
        $data->save();

        return redirect('siswa/list');
}

Coba perhatikan function diatas, kita membawa Request $request karena memang kita akan mengambil setiap nilai dari suatu form, dan ada juga parameter kedua yang akan dibawa oleh id dari url form action nya..

....
public function update(Request $request,$id){
....

Kemudian didalam function tersebut kita melakukan query update data nya, menggunakan trik eloquent..

Untuk trik-trik yang lainnya, kamu bisa baca di 27 Trik Belajar Eloquent di Laravel

....
$data = Siswa::where('id',$id)->first();
        $data->nama = $request->nama_siswa;
        $data->nisn = $request->nisn;
        $data->no_hp = $request->no_hp;
        $data->email = $request->email;
        $data->alamat = $request->alamat;
        $data->save();
....

Setelah melakukan proses update data, kita arahkan kembali ke halaman list siswa nya..

....
return redirect('siswa/list');
....

Sekarang coba kamu edit salah satu data, kemudian kamu submit, maka seharusnya kita akan di arahkan kembali ke halaman list siswa, dan data siswa tersebut akan berubah sesuai dengan data yang sudah kita ubah barusan..

Delete Data Siswa

Oke next terakhir adalah delete data atau hapus data..

Kita akan coba hapus data siswa nya..

Pertama kita buat route nya terlebih dahulu..

....
Route::delete('siswa/{id}',[SiswaController::class,'delete']);

Diatas kita membuat sebuah route dengan method delete.. untuk url nya masih sama seperti pada saat kita proses update data yaitu ../siswa/parameter_id_nya.. Kemudian kita mengarahkan nya ke SiswaController function delete..

Kalo begitu selanjutnya kita tambahkan sebuah function baru di SiswaController dengan nama delete, seperti berikut:

....
public function delete($id){
        $siswa = Siswa::find($id);
        $siswa->delete();

        return redirect('siswa/list');
    }
....

Coba kita perhatikan function diatas, pada function delete diatas terdapat 1 parameter yaitu id siswa, karena memang di route nya kita mendefine sebuah parameter, maka di function juga harus membawa parameter..

public function delete($id){

Kemudian didalam function tersebut kita membuat query hapus data, tentunya dengan teknik eloquent..

....
$siswa = Siswa::find($id);
$siswa->delete();
....

Pertama kita find dulu data siswa nya, kita berpatokan kepada parameter yang dikirim ke function tersebut, setelah ketemu maka kita hapus data nya dengan function delete..

Setelah proses penghapusan data terjadi, kita lanjut mengarahkan sistem nya ke halaman list data siswa..

....
return redirect('siswa/list');
....

Sekarang kita modifikasi lagi file index.blade.php nya..

../resources/views/siswa/index.blade.php

Kita modifikasi di kolom action nya, kita tambahkan sebuah button baru disamping button edit seperti berikut:

....
<td>
    <a href="{{ url('siswa/'.$dt->id) }}">Edit</a> | 
    <form method="post" action="{{ url('siswa/'.$dt->id) }}">
        @csrf
        {{ method_field('delete') }}
        <button type="submit">Hapus</button>
    </form>
</td>
....

crud laravel

karena route untuk hapus data ini menggunakan method “delete”.. Maka kita harus membungkusnya dengan sebuah form..

....
<form method="post" action="{{ url('siswa/'.$dt->id) }}"> 
    @csrf 
    {{ method_field('delete') }} 
    <button type="submit">Hapus</button> </form>
</form>
....

Dan didalam form nya, kita juga perlu men define jenis method field nya..

....
{{ method_field('delete') }}
....

Sekarang kalo kita buka halaman list siswa nya, di kolom action akan tampil seperti berikut:

list siswa
list siswa

terdapat button edit dan hapus, kalo kamu klik button hapus, maka akan menghapus data tersebut..

Konfirmasi Hapus Data

Ketika kita ingin menghapus data, pastinya kita tidak ingin data tersebut langsung terhapus begitu saja..

Sebaiknya kita memunculkan confirmation alert terlebih dahulu untuk memberikan warning kepada si user apakah data tersebut benar-benar akan dihapus atau tidak..

Untuk melakukan hal tersebut, kita butuh yang nama nya asset jquery.. Kalian bisa include asset terebut langsung ke file index.blade.php, kita bisa taruh di bagian bawah file seperti berikut:

....    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

</body>
</html>

asset jquery crud laravel

Bisa kita lihat, kita menambahkan file cdn jquery sebelum cdn bootstrap, kenapa?? Karena memang source jquery harus selalu ditaruh di paling atas..

Nah sekarang selanjutnya, di button hapus nya kita tambahkan sebuah atribut class, kita beri nama class “btn-hapus”..

....
    {{ method_field('delete') }}
    <button type="submit" class="btn-hapus">Hapus</button>
</form>
....

crud laravel

Dan sekarang kita mulai bermain dengan jquery nya, kalian buat seperti ini:

....
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.btn-hapus').click(function(e){
              var result = confirm("Yakin Hapus?");
              if (result) {
                      
              }else{
                    e.preventDefault();
              }
        })
    })
</script>
....

Setiap kali kita ingin bermain dengan jquery, kita wajib buka terlebih dahulu dengan perintah document ready..

$(document).ready(function(){
  ....
  ....			
})

Kemudian didalam nya kita berikan trigger bahwa ketika setiap element yang memiliki atribut class “btn-hapus” di klik, maka sistem akan menjalankan perintah yang ada didalam nya..

$('.btn-hapus').click(function(e){
    var result = confirm("Yakin Hapus?");
    if (result) {
        
    }else{
        e.preventDefault();
    }
})

perintah dari confirm(“Yakin Cancel?”); adalah untuk menampilkan notifikasi berupa alert apakah yakin akan melakukan aksi tersebut? Aksi tersebut kita simpan kedalam variabel result..

Jika ternyata variable result bernilai true atau si user mengkonfirmasi untuk melanjutkan proses aksi tersebut, maka sistem akan melanjutkan pemrosesan data nya..

....
if (result) {
//
}
....

if(result){ diatas maksudnya adalah jika variable result bernilai true.. kita tidak perlu mengisi apa apa lagi didalam nya, cukup dikosongkan saja, kenapa? karena kita akan membiarkan sistem melakukan aksi default nya, yaitu menghapus data siswa..

Jika ternyata variable result tidak true, maka sistem akan menjalankan perintah yang ada didalam else..

....
}else{
    e.preventDefault();
}
....

preventDefault() adalah sebuah perintah dari javascript untuk menghentikan sistem melanjutkan pemrosesan nya..

Sekarang coba kamu refresh halaman list siswa, kemudian kamu klik button hapus, maka seharusnya akan muncul konfirmasi hapus seperti berikut:

konfirmasi hapus data
konfirmasi hapus data

Kalo kamu klik cancel, maka tidak akan terjadi apa-apa, tapi kalo kamu klik ok, maka akan terjadi proses hapus data..

Soft Delete Pada Laravel

Soft Delete adalah sebuah teknik penghapusan data yang sebetulnya data tersebut tidaklah benar-benar dihapus dari table nya..

Mirip seperti fungsi recycle bin pada OS Windows, jadi data yang dihapus akan ditaruh di tong sampah terlebih dahulu, nanti selanjutnya kita bisa memilih untuk menghapus nya secara permanen atau me restore nya kembali..

Untuk mempelajari Soft Delete, kamu bisa buka Postingan berikut: Cara Menggunakan Soft Delete Pada Laravel..

Menampilkan data dengan pagination

Jika kita mempunyai ribuan data atau bahkan jutaan data, kita tidak mungkin akan menampilkan datanya dengan menggunakan metode seperti diatas..

Karena kita tidak mungkin menampilkan seluruh datanya dalam 1 halaman, bisa menyebabkan server timeout bahkan browser pada client mungkin akan nge freeze..

Nah salah satu solusi nya yaitu dengan menggunakan pagination..

Dengan pagination, kita bisa menentukan berapa jumlah data yang ingin ditampilkan dalam 1 halaman..

Sekarang mari kita praktekkan..

Pada function index di SiswaController, kita modifikasi seperti berikut:

public function index()
{ 
    $data = Siswa::paginate(1); 

    return view('siswa.index',compact('data')); 
}

Pada variabel data, yang sebelum nya kita get data siswa dengan perintah seperti ini:

$data = Siswa::all();

Kita ubah menjadi seperti ini:

$data = Siswa::paginate(1);

didalam method paginate(), kita bisa memasukkan angka berapapun untuk menentukan jumlah datanya dalam 1 halaman.. Dalam kasus diatas saya hanya ingin menampilkan 1 data saja dalam 1 halaman..

Nah kemudian kita juga perlu memodifikasi file index.blade.php nya

        </tbody>
    </table>
    {{ $data->links() }}
</div>

crud laravel

Kita perlu memanggil method links() untuk dapat berpindah halaman..

Sekarang kalo kalian coba refresh halaman list siswa nya, maka seharusnya akan tampil seperti berikut:

crud laravel

Informasi Tambahan

Sedikit informasi tambahan..

Sebetulnya kita boleh gak sih nge define beberapa route tapi dengan url yang sama???

....
Route::get('siswa/{id}',[SiswaController::class,'edit']);
Route::put('siswa/{id}',[SiswaController::class,'update']);

Route::delete('siswa/{id}',[SiswaController::class,'delete']);
....

Jawaban nya adalah boleh aja, asalkan dengan method yang berbeda.. sebagai contoh 3 route diatas memiliki url yang sama.. Tapi memiliki route yang berbeda-beda..

Ada get, put, dan delete.. Walaupun masih mengarah ke controller yang sama, tapi memiliki function yang berbeda-beda..

Nah mungkin itu saja untuk artikel kali ini, semoga bisa bermanfaat buat teman-teman semua..

Jika dirasa ada kesulitan, silahkan bertanya di kolom komentar yaa.. Terima Kasih..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..

fadli

fadli

Published in Tutorial Laravel

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: