Cara menggunakan alert in php

Question

Alert dialog adalah kotak pemberitahuan yang biasanya muncul untuk memberitahukan sesuatu kepada pengguna. Dalam pemanfaatannya, alert dialog juga banyak digunakan pada form entah itu form login, form registrasi, atau form apapun itu. Di sekolah-sekolah bahkan di kampus pun mengajari hal seperti itu juga sih, tapi sayang aja tampilannya terlalu mainstream~ kira-kira seperti ini :

Cara membuatnya mudah, biasanya di halaman proses dibuatkan sebuah echo dengan isi tag [script], lalu diredirect dengan window.location = ...... . Di postingan kali ini kita akan belajar membuat alert dialog yang lebih cantik, dan tentunya secara kode pun juga akan jauh lebih rapi dan mudah dikembangkan daripada teknik ini.

File yang kita butuhkan adalah jQuery versi terbaru (di contoh saya menggunakan jQuery versi 1.12.3), bisa didownload di https://code.jquery.com/ dan juga plugin javascript AlertifyJS (bisa didownload di http://alertifyjs.com/). Jika sudah, kita buat file halaman form ujicoba seperti ini..

<?php
session_start(); //jangan lupa, ini wajib~

?>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Latihan Cool Form Validation</title>
<link rel="stylesheet" href="assets/bootstrap.min.css">
<link rel="stylesheet" href="assets/alertify.min.css">
<style>
	*{margin:0 auto;}
	body{background:#f0f0f0;}
	form{padding:3em; background:#fff; width:60%;}
</style>
</head>
<body>

<form action="proses.php" method="post">
	<h2>Form Registrasi</h2>
	<div class="form-group row">
		<label for="name" class="col-sm-3">Nama Lengkap</label>
		<div class="col-sm-9">
			<input type="text" name="name" id="name" class="form-control">
		</div>
	</div>

	<div class="form-group row">
		<label for="eml" class="col-sm-3">Email</label>
		<div class="col-sm-9">
			<input type="text" name="email" id="eml" class="form-control">
		</div>
	</div>

	<div class="form-group row">
		<label for="telp" class="col-sm-3">No Telp</label>
		<div class="col-sm-9">
			<input type="tel" name="telp" id="telp" class="form-control">
		</div>
	</div>
	
	<div class="row">
		<div class="col-sm-9 col-sm-push-3">
			<button class="btn btn-primary">
				Proses
			</button>		
		</div>		
	</div>

</form>

<script src="assets/jquery-1.12.3.min.js"></script>	
<script src="assets/alertify.min.js"></script>	
<script>
$(document).ready(function(){
	//KONDISI PENGECEKAN ALERTIFY AKAN DILAKUKAN DISINI
});
</script>
</body>
</html>

Dari script diatas, kita masih perlu membuat fungsi PHP yang berisi teknik penyimpanan dan cara memunculkan alert. Sekarang kita buat file dengan nama function.php, dan didalamnya kita akan membuat 2 fungsi untuk menyimpan session alert dan memunculkan session alert.

<?php
function create_validasi($judul,$isi_pesan,$header=null){
	//buat validation session
	$_SESSION['validation-title'] = $judul;
	$_SESSION['validation-isi'] = $isi_pesan;

	//parameter header diisi apabila ingin meredirect ke suatu halaman
	if(!is_null($header)){
		header("location:".$header);
		exit();
	}
}


function echo_validasi(){
	//mengecek apakah session validasi ada atau tidak
	if(isset($_SESSION['validation-title']) && isset($_SESSION['validation-isi'])){
		$judul_alert = $_SESSION['validation-title'];
		$isi_alert = $_SESSION['validation-isi'];
		//setelah disimpan ke variabel, session langsung dihapus agar tidak kedobelan di halaman selanjutnya
		unset($_SESSION['validation-title']);
		unset($_SESSION['validation-isi']);

		echo 'alertify.alert("<b>'.$judul_alert.'</b>", "'.$isi_alert.'")';
	}
}

Perlu diingat, kedua snippet fungsi diatas hanya berguna apabila session di semua halaman dalam keadaan aktif, alias sudah dilakukan session_start() di semua halaman. Kalau nggak ya pasti nggak akan jalan~

Jika sudah, kita akan membuat halaman proses.php sebagai ujicoba fungsi-fungsi yang sudah dibuat ini..

<?php
session_start(); //jangan lupa ini wajib~
require "function.php";


if(isset($_POST)){
	$name = $_POST['name'];
	$email = $_POST['email'];
	$telp = $_POST['telp'];

	if(empty($name) or empty($email)){
		create_validasi(
			"Form Tidak Lengkap",
			"Kelihatannya belum semua kolom diisi dengan benar, silakan dicek lagi..",
			"index.php");
	}
	else{
		if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
			create_validasi(
				"Invalid Email",
				"Email yang anda masukkan tidak valid, silakan dicek lagi..",
				"index.php"
			);
		}
		else{
			//ceritanya ada perintah penyimpanan disini
			//setelah selesai, dibuat alert success
			create_validasi(
				"Success!!!",
				"Anda sudah terdaftar di sistem kami",
				"index.php"
			);
		}
	}

}

Dan terakhir, kita akan memanggil function.php di index.php, dan sekalian menyelipkan fungsi echo_validasi() yang sudah dibuat tadi ke tempat jquery yang sudah tersedia.. Letakkan di dalam $(document).ready(function(){ ......... }).

<?php
session_start(); //jangan lupa, ini wajib~
require "function.php"; //<-----
?>
.....
.....
.....
.....
.....
<script src="assets/jquery-1.12.3.min.js"></script>	
<script src="assets/alertify.min.js"></script>	
<script>
$(document).ready(function(){
	//KONDISI PENGECEKAN ALERTIFY AKAN DILAKUKAN DISINI
	<?php
	echo_validasi(); //<-----
	?>
});
</script>

Sampai disini, kalau semua terjadi tanpa ada masalah maka tampilan alertnya sekarang akan menjadi seperti ini :

kode php