Akhirnya sampailah kita pada part akhir dalam seri pembahasan CRUD dengan Laravel.

Pada tutorial sebelumnya kita telah belajar menyelesaikan pembuatan operasi CRUD Laravel lainnya, seperti membuat koneksi database, menampilkan data dari database dengan Laravel, melakukan edit dan update data menggunakan laravel.

Pada tutorial kali ini kita akan melengkapi tutorial sebelumnya dengan melengkapi proses CRUD hapus data dengan laravel.

Oke langsung saja kita bahas tutorial membuat CRUD hapus data dengan laravel, berikut langkahnya.

Menghapus Data Dari Database Dengan Laravel
Pada file view kelas/index.blade.php sebelumnya kita telah menyertakan dua buah tombol button, yaitu tombol edit dan tombol hapus. Dimana tombol edit sudah kita bahas pada pembahasan membuat CRUD edit dan update data dengan laravel, maka kali ini kita akan membahas tombol hapus yang berfungsi untuk menjalankan fungsi penghapusan data.

CRUD Hapus Data Laravel
CRUD Hapus Data Laravel

Saat tombol hapus ini kita klik maka akan mengarah ke route ‘hapuskelas’ sambil mengirimkan data id_kelas yang dipilih untuk dihapus. Sehingga link route nya akan kita buat seperti ‘/hapuskelas/{id}’.

Oke teman-teman, saatnya sekarang kita tambahkan satu buah route yang berfungsi untuk menghapus data pada laravel. Berikut ini adalah routenya.

//hapus data
 Route::POST('/hapuskelas/{id}','KelasController@destroy')->name('hapuskelas');

Kalau kita perhatikan route disini terlihat berbeda dari route sebelumnya, iyah teman-teman sebenarnya membuat route itu tidak mengikat seperti apa yang saya tulis disini, itu bisa beragam penulisannya.

Selanjutnya maka kita tambahkan satua buah method yang berfungsi untuk menghapus data, oke kita buka kembali file controller KelasController.php dan tambahkan satu buah method dan disini saya beri nama ‘destroy’, sehingga penulisannya akan menjadi seperti berikut.

    public function destroy($id)
    {		
        $hapus = DB::table('tbl_kelas')->where('id_kelas', '=', $id)->delete();
        if($hapus){
			Session::flash('status','Data berhasil dihapus.');
		}else{
			Session::flash('status','Data gagal dihapus.');
		}
	}

Oke teman-teman bisa kita perhatikan pada method ‘destroy’ diatas, kita masih menggunakan query builder nya laravel untuk menghapus data, dimana method diatas menangkap parameter id yang dikirim.

Selanjutnya adalah kita menambahkan javascript pada file view ‘kelas/index.blade.php’ yang berfungsi untuk hapus datanya, berikut ini scriptnya.

	 //hapus data
	 $('.hapus').on("click",function() {
		 var id = $(this).attr('data-id');
		 $.ajax({
				url : "{{url('hapuskelas')}}/"+id,
				type: "POST",
				success: function(data)
				{	
					window.location ="{{url('kelas')}}";							
				}				
			 });	
	 });

Sehingga keseluruhan file view ‘kelas/index.blade.php’ setelah mengalami beberapa penambahan code, maka secara lengkapnya akan menjadi seperti berikut.

@extends('layouts.app')

@section('content')
	<div class="row">
                <div class="col-lg-12">
				@include('_partials.flash_message')
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Data Kelas</h5>						
                        <div class="ibox-tools">
                            <button class="btn btn-primary btn-sm btn-flat" data-toggle="modal" data-target="#modal-add"><i class="fa fa-plus"></i>Tambah</button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive">
							<table class="table table-striped table-bordered table-hover dataTables-example" >
							<thead>
							<tr>    
                                <th>Kelas</th>
								<th>Aksi</th>
							</tr>
							</thead>
							<tbody>                            
                            @foreach($kelas as $row)
                            <tr>
                                <td>{{$row->kelas}}</td>
                                <td>
                                    <button type="button" class="btn btn-xs btn-success edit" data-id="{{$row->id_kelas}}"><i class="fa fa-pencil"></i></button>
                                    <button type="button" class="btn btn-xs btn-danger hapus" data-id="{{$row->id_kelas}}"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                            @endforeach
							</tbody>
							<tfoot>
							
							</tfoot>
							</table>
                        </div>
                    </div>
                </div>
            </div>
            </div>
<!-- modal add data-->
<div class="modal inmodal fade" id="modal-add" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-xs">
	<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('simpandata')}}" method="POST" enctype="multipart/form-data"> 
		@csrf
		<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			<h4 class="modal-title">Tambah Data</h4>
		</div>
		<div class="modal-body">
			<div class="form-group"><label class="col-lg-2 control-label">Kelas</label>
				<div class="col-lg-10"><input type="text" name="kelas" placeholder="Kelas" class="form-control"></div>
			</div>  			 
		</div>
		<div class="modal-footer">			
			<button type="button" class="btn btn-white" data-dismiss="modal">Tutup</button>
			<button type="submit" class="btn btn-primary">Simpan</button>
		</div>
		</div>
	</form>
	</div>
</div>
<!-- moda edit data -->
<div class="modal inmodal fade" id="modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-xs">
	<form name="frm_edit" id="frm_edit" class="form-horizontal" action="{{route('updatedata')}}" method="POST" enctype="multipart/form-data"> 
		@csrf
		<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			<h4 class="modal-title">Edit Data</h4>
		</div>
		<div class="modal-body">
			<div class="form-group"><label class="col-lg-2 control-label">Kelas</label>
				<div class="col-lg-10"><input type="text" name="kelas" id="kelas" placeholder="Kelas" class="form-control"></div>
			</div>  			 
		</div>
		<div class="modal-footer">		
			<input type="hidden" name="id" id="id">	
			<button type="button" class="btn btn-white" data-dismiss="modal">Tutup</button>
			<button type="submit" class="btn btn-primary">Simpan</button>
		</div>
		</div>
	</form>
	</div>
</div>
<script src="{{ asset('public/assets/js/jquery-3.1.1.min.js') }}"></script>
<script>
 $(document).ready(function() {
	 //edit data
	 $('.edit').on("click",function() {
		 var id = $(this).attr('data-id');		 
		 $.ajax({						
				url : "{{route('edit')}}?id="+id,
				type: "GET",
				dataType: "JSON",
				success: function(data)
				{					
					$('#id').val(data.id_kelas);						
					$('#kelas').val(data.kelas);						
					$('#modal-edit').modal('show'); 							
				}
			});	
	 });

	 //hapus data
	 $('.hapus').on("click",function() {
		 var id = $(this).attr('data-id');
		 $.ajax({
				url : "{{url('hapuskelas')}}/"+id,
				type: "POST",
				success: function(data)
				{	
					window.location ="{{url('kelas')}}";							
				}				
			 });	
	 });

 });
</script>
@endsection

Oke teman-teman, sampai disini selesai sudah pembahasan tutorial CRUD dengan laravel, semoga tutorial kali ini dapat membantu dan bermanfaat.

Pada tutorial laravel selanjutnya akan kita bahas tutorial CRUD dengan laravel dengan teknik-tenik lainnya. Terimakasih..