Hapus data dengan modal bootstrap laravel

Pada langkah ini, silahkan teman-teman install laravel dulu, disini saya menggunakan laravel versi 8. Saya menggunakan composer untuk menginstallnya.

composer create-project laravel/laravel:^8.0 laravel-datatable

cd example-app
 
php artisan serve

Jika teman-teman menggunakan install laravel global bisa gunakan kode berikut:

composer global require laravel/installer
 
laravel new laravel-datatable
 
cd laravel-datatable
 
php artisan serve

Namun, jika menggunakan cara tersebut. Project kita akan menggunakan versi terbaru dari laravel. Sedangkan requirement di laravel terbaru terkadang berbeda.

Route

Route::resource('spj',EntrySpjController::class);

Saya menggunakan Route Resource bawaan dari laravel. Method @destroy yang akan kita gunakan pada delete confirmation ini.

Tombol Hapus

<a class="dropdown-item delete" data-toggle="modal" data-target="#modal-delete" data-id="{{ $dt->id }}"><i class="fa fa-trash" aria-hidden="true"></i> Hapus</a>

Pad script di atas, tambahkan attribute “data-id”. fungsinya untuk menyimpan nilai ID yang akan kita gunakan untuk menghapus data sesuai dengan ID nya tersebut.

Akhirnya sampailah kita pada part akhir dalam seri pembahasan membuat aplikasi CRUD dengan framework 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.

- Advertisement -

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

Oke langsung saja kita bahas tutorial membuat operasi 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.

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..

Facebook

Twitter

Pinterest

WhatsApp

Previous articleTutorial Laravel Part 3: CRUD Edit dan Update Data Dengan Laravel

Next articleLaravel Part 5: Tutorial Laravel Membuat Tabel Dengan Migration Laravel

JogjaTech

Web Developer | Jasa Pembuatan Website Yogyakarta | Jasa Koding | Jasa Coding | Laravel | Codeigniter