Hello, in this example we will guide you tutorial how to use laravel sweet alert with Laravel 7 for notification delete data. This tutorial will share you how to use sweet alert in laravel as confirmation before deleting data record in Laravel application. We will use beautiful sweet alert message before delete data in Laravel 7. This sweet alert delete event will use with ajax with cancel and yes confirm button before deleting record data in php Laravel application.
Halo, pada contoh kali ini saya akan berbagi tutorial bagaimana menggunakan fitur sweet alert di Laravel 7 sebagai notifikasi penghapusan data. Saya akan berbagi dengan Anda bagaimana menerapkan sweet alert sebagai confirmasi sebelum menghapus record data pada aplikasi Laravel 7. Kita akan menggunakan keindahan sweet alert sebagai pesan konfirmasi sebeleum menghapus data di Laravel 7. Event hapus dengan sweet alert ini akan menggunakan ajax dan menggunakan cancel dan yes button sebagai konfirmasi sebelum melakukan penghapusan record data di php aplikasi Laravel.
Dan disini saya akan menggunakan project tutorial Laravel sebelumnya yang pernah saya buat dengan judul “Laravel 7 CRUD Application Tutorial with modals and ajax“, sehingga saya tidak membuat project dari awal lagi. Dalam menggunakan sweet alert disini saya menggunakan library external seperti CDN, sehingga harus tetap terhubung ke internet.
Berikut adalah step menggunakan sweet alert.
Pertama kita kaitkan link external CDN sweet alert ke file blade “resources\views\layouts\app.blade.php”, sehingga tampak seperti berikut ini.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://lipis.github.io/bootstrap-sweetalert/dist/sweetalert.css" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
@stack('scripts')
</body>
</html>
Lalu kita lakukan sedikit modifikasi file blade “resources\views\pegawai\index.blade.php” dengan menuliskan code jquery sweet alert untuk konfirmasi penghapusan data seperti berikut ini.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Data Pegawai
<button class="btn btn-success btn-sm btn-flat pull-right" id="tambah"><i class="fa fa-plus"></i>Tambah</button>
</div>
<div class="card-body">
<table id="tbl_list" class="data-table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Birthday</th>
<th>Email</th>
<th>Job</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Form Data Pegawai</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form name="frm_add" id="frm_add" class="form-horizontal" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="form-group"><label class="col-lg-3 control-label">Name</label>
<div class="col-lg-12">
<input type="text" name="name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Birthday</label>
<div class="col-lg-12">
<input type="text" name="birthday" id="date" placeholder="Birthday" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Email</label>
<div class="col-lg-12">
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Job</label>
<div class="col-lg-12">
<input type="text" name="job" placeholder="Job" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Address</label>
<div class="col-lg-12">
<textarea name="address" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idpegawai" id="idpegawai">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="saveBtn" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#tbl_list').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('pegawai.datatable') }}",
type: "GET",
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'birthday'},
{ data: 'email'},
{ data: 'job'},
{ data: 'address'},
{ data: 'action'}
],
});
$('#tambah').click(function () {
$('#saveBtn').val("tambah");
$('#idpegawai').val('');
$('#frm_add').trigger("reset");
$('#modal-add').modal('show');
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Menyimpan..');
$.ajax({
data: $('#frm_add').serialize(),
url: "{{ url('pegawai/store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
//console.log(data);
$('#frm_add').trigger("reset");
$('#saveBtn').html('Simpan');
$('#modal-add').modal('hide');
table.draw();
//table.ajax.reload();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Gagal simpan ulang');
}
});
});
$('body').on('click', '.edit', function () {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{route('pegawai.edit')}}?id="+cek,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('#saveBtn').val("edit");
$("#frm_add").find("input[name=idpegawai]").val(data.id);
$("#frm_add").find("input[name=name]").val(data.name);
$("#frm_add").find("input[name=birthday]").val(data.birthday);
$("#frm_add").find("input[name=email]").val(data.email);
$("#frm_add").find("input[name=job]").val(data.job);
$("#frm_add").find("textarea[name=address]").val(data.address);
$("#exampleModalLabel").text("Form Edit Pegawai");
$('#modal-add').modal('show');
}
});
});
$('body').on('click', '.hapus', function () {
var cek = $(this).attr('data-id');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url : "{{url('pegawai/destroy')}}/"+cek,
type: "POST",
error: function() {
alert('Something is wrong');
},
success: function(data)
{
table.draw();
Swal.fire(
'Deleted!',
'Your record has been deleted.',
'success'
)
}
});
}else{
Swal.fire("Cancelled", "Your data is safe :)", "error");
}
});
});
$('#date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
});
});
</script>
@endpush
Sampai tahap ini sweet alert telah berhasil kita terapkan pada project Laravel, sehingga ketika melakukan penghapusan record data pada aplikasi Laravel 7 akan ditampilkan konfirmasi penghapusan data seperti berikut.
Jika penghapusan record data berhasil, maka akan ditampilkan konfirmasi message box sweet alert seperti berikut ini.
Jika melakukan pembatalan penghapusan record data maka akan ditampilkan konfirmasi message box sweet alert seperti berikut.
Selesai, semoga tutorial kali ini bermanfaat, terimakasih…
