This post is also available in:
English
Hallo apa kabar teman teman semuanya, semoga sehat dan sukses selalu.
Kali ini kita akan membuat notifikasi menggunakan SweetAlert. Kalian dapat mempelajari tutorial codeigniter 4 yang lainnya di sini:
Tutorial CodeIgniter 4 part 2 ~ Rest Api CRUD Codeigniter 4
Tutorial Codeigniter 4 ~ Load more menggunakan ajax
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication
SweetAlert merupakan plugin dari jquery yang berguna untuk membuat notofikasi pada aplikasi. saya anggap teman teman semuanya telah dapat menginstall Framework Codeigniter 4. bagi yang belum bisa silahkan pelajari di sini.
Required Plugin Files
JS File
https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.jsCSS File
https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.cssKalian perlu untuk menggunakan CSS dan JS sweetAlert yaitu untuk merubah tampilan dari notifikasi. Untuk dokumentasinya kalian dapat memperlajarinya di sini Klik di Sini.
Implementasi Plugin Jquery SweetAlert
Mari kita buat contoh aplikasi menggunakan SweetAlert, ikuti langkah langkahnya di bawah ini.
Create Route
Kita konfigurasi Routes.php yang berlokasi di folder /app/config.
//...
$routes->get('notification', 'MessageController::showSweetAlertMessages');
//...
Create Controller
$ php spark make:controller Message --suffixOpen MessageController.php from /app/Controllers
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
class MessageController extends BaseController
{
public function showSweetAlertMessages()
{
// Flash messages settings
session()->setFlashdata("success", "This is success message");
session()->setFlashdata("warning", "This is warning message");
session()->setFlashdata("info", "This is information message");
session()->setFlashdata("error", "This is error message");
return view("sweetalert-notification");
}
}Create Blade Template File
Buatlah file yang diberi nama sweetalert-notification.php pada folder /app/Views.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.css">
<script>
$(function(){
<?php if(session()->has("success")) { ?>
Swal.fire({
icon: 'success',
title: 'Great!',
text: '<?= session("success") ?>'
})
<?php } ?>
});
</script>Di bawah ini beberapa kode untuk menampilkan notifikasi berdasarkan informasi yang di terima.
Error Block
<script>
$(function(){
<?php if(session()->has("error")) { ?>
Swal.fire({
icon: 'error',
title: 'Oops...',
text: '<?= session("error") ?>'
})
<?php } ?>
});
</script>Warning Block
<script>
$(function(){
<?php if(session()->has("warning")) { ?>
Swal.fire({
icon: 'warning',
title: 'Great!',
text: '<?= session("warning") ?>'
})
<?php } ?>
});
</script>Information Block
<script>
$(function(){
<?php if(session()->has("info")) { ?>
Swal.fire({
icon: 'info',
title: 'Hi!',
text: '<?= session("info") ?>'
})
<?php } ?>
});
</script>Jalankan apliaksi kalian dengan menggunakan
$ php spark serve
URL – http://localhost:8080/notification
Success
Warning
Informastion
Error
Demikian tutorial kali ini yang bisa saya sampaikan, semoga bermanfaat.
