Penggunaan Popup dengan Alertsweet2 di Codeigniter



Dalam tutorial kali ini anda akan belajar tentang pustaka dengan nama SweetAlert2 yang mungkin kita untuk membuat pesan peringatan dengan tampilan yang menarik.
Masukan tag  javascript di bawah ini, simpan di file codeigniter  application->view->index.php


Selain file javascript, anda juga harus memuat file  CSS yang digunakan untuk mengatur tampilan box  lebih menarik tag seperti dibawah ini.


Setelah anda menginstal pustaka di atas, Sebenernya membuat AlertSweet sangatlah mudah.
Scriptnya untuk keseluruhannya seperti ini.


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alertsweet to CodeIgniter</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<
body>
<button class="third">Alertsweet</button> 


</body>
<Script>
document.querySelector(".third").addEventListener('click', function(){ //function klik ketika di jalankan
swal({
title: "Are you sure about deleting this file?",  //judul dari alretsweet
type: "info", //tipe yang digunakan info
showCancelButton: true,//tampilkan Button cancel
confirmButtonText: "Delete It", // tampilkan Button dengan nama Delete It
confirmButtonColor: "#ff0055",//menampilkan warna di button delete it  dengan warna merah muda
cancelButtonColor: "#999999",//menampilkan button dengan warna abu-abu
reverseButtons: true,
focusConfirm: false,
focusCancel: true
});
});
</Script>
</html>


Lalu jalankan script di atas dan hasilnya seperti di bawah ini ketika button Alertsweet nya diklik.




Terimakasih telah mengunjungi blog saya semoga bermafaat. Selamat mencoba.



Comments

Popular posts from this blog

Cara Memasang Buku Tamu di Blog

Cara Setup Virtual Hosts Menggunakan XAMPP