Filter Email pada Backend PHP dan Ajax

Pada sebuah form, biasanya terdapat inputan berupa email yang harus diisi. Terutama form registrasi. Terdapat banyak cara dalam penggunaan filter email ini. Salah satunya menggunakan attribut type dengan nama email pada tag input. Namun kali ini kita tidak menggunakan cara tersebut, karena apabila terdapat visitor nakal, dapat melakukan cheat pada form tersebut. Oleh karena itu, kita akan melakukan filter email pada sisi back end pada aplikasi ini. Ada banyak cara juga filter aplikasi menggunakan back end. Namun kita menggunakan yang sangat mudah juga. Kali ini kita menggunakan ajax dalam pembuatannya.

Pertama tama kita buat form simple saja yang hanya berisi inputan email. Berikut adalah form tersebut :

 <form class="emailFilter" method="POST" autocomplete="off" enctype="multipart/form-data">
	<div class="row" style="margin-left: 20px;">
		<div class="col-12">
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<input type="text" name="email" id="email" class="form-control">
					</div>
				</div>
			</div>									
		</div>
		<input type="submit" name="insertUser" value="Insert" id="buttonSimpan" class="btn btn-success" />	
	</div>  	          	
</form>

Letakkan code form diatas didalam tag body yang sudah kita import code css dan javascript yang dibutuhkan.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Date Diff</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
		<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
	<!-- letakkan code disini form disini -->
</body>
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</html>

Sedikit penjelaan, pada form diatas terdapat 1 buah tag css dan 2 tag javascript yang memilik fungsi berbeda. Diantaranya adalah :

bootstrap.min.css : berfungsi memanggil css bootstrap untuk mempercantik UI.
sweetalert2@11 : berfungsi memanggil javascript sweet alert untuk mempercantik popup alert.
jquery-3.6.0.js : disini berfungsi untuk menjalankan code ajax yang nantinya akan kita gunakan.

Setelah selesai, sekarang kita buat code ajax nya. Code ini berfungsi untuk mengirim nilai dari form utama untuk diolah lebih lanjut. Berikut adalah code sederhana ajax yang kita gunakan.

<script type="text/javascript">
	$(document).on('submit','.emailFilter',function(event){
		event.preventDefault();
		var email = $('#email').val();
		$.ajax({
			url: "<?php echo "email.php";?>",
			method: "POST",
			data:{email:email},
			dataType: 'JSON',  
			success: function(data){    	
				Swal.fire({
					title: data.title,
					html: data.info,
					icon: data.icon,
					confirmButtonText: 'OK',									
					confirmButtonColor: "#0da49d"
				});
			},error: function(){
				Swal.fire("Info Failed","Email gagal disimpan" , "error");
			}
		});
	});
</script>

Letakkan code javascript diatas sebelum </body> dan setelah import file jquery-3.6.0.js. Sedikit penjelasan kembali dari code di atas adalah :

Code ajax yang memanggil form dengan nama class emailFilter.
Mengirimkan paramater file email.php degan metode POST dan balikan data berbentuk JSON.
Data yang didapat, akan di tampilkan menggunakan Sweet Alert.
Variabel yang dikirim menggunakan nama email dimana sudah kita define terhadam attribut id dengan nama email.

Setelah itu, kita akan membuat file dengan nama email.php dimana pada file tersebu kita akan melakukan proses validasi penulisan email. Terdapat beberapa cara untuk melakukannya diantaranya adalah :

Menggunakan function filter_var() dan FILTER_VALIDATE_EMAIL.
Cara penggunaan function di atas cukup mudah. Begini cara singkatnya :

//membuat function dengan nama validasi
function validasi($email) {
    //pengkondisian untuk mengolah email yang didapat
    if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
        return "valid";
    }
    else {
        return "invalid";
    }
}
//validasi('admin@contohnya.net');// email valid
//validasi('admin@contohnya.123');// email tidak valid

Menggunakan FILTER_VALIDATE_EMAIL, FILTER_SANITIZE_EMAIL dan filter_var().
Penggunaannya hampir mirip dengan nomer 1 di atas, hanya saja terdapat tambahan FILTER_SANITIZE_EMAIL yang berfungsi untuk menghilangkan semua karakter ilegal pada penulisan email. Berikut cara singkatnya :
```
function validasi($email){
	$newMail = filter_var($email, FILTER_SANITIZE_EMAIL);
	if(filter_var($newMail, FILTER_VALIDATE_EMAIL)) {
    	return "valid";
	}
	else{
    	return "invalid";
	}
}
//contoh inputan : ad(min)@cont//ohnya.net
//output : admin@codenya.net
```

Menggunakan preg_match()
Pada car nomer 3 ini, kita menggunakan sistem regex atau regular expression sebagai validasinya. Berikut adalah cara mudah penulisannya :

function vaidasi($email) {
    //regex yang digunakan
    $regex = "/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/";
    //pengkondisian output yang dikeluarkan
    return preg_match($regex, $email) ? "valid":"invalid";
}

Ketiga function di atas dapat kita gunakan dan akan kita modifikasi agar dapat diterima oleh code ajax pada tampilan utama. Berikut adalah contoh code untuk membalikkan menjadi JSON:

//value yang didapatkan dari form
$email = $_POST['email'];

//pengkondisian yang mengirimkan ke code function
if (validasi($email)=="invalid") {
	$result['title'] = "Gagal";
	$result['info']  = "Format Email salah";
	$result['icon']  = "error";
}else{
	$result['title'] = "Sukses";
	$result['info']  = "Format Email benar";
	$result['icon']  = "success";		
}	

echo json_encode($result);

Nah, hasil yang didapat nantinya akan menjadi callback pada code ajax sebelumnya tergantung email yang diinputkan. Sangat mudah bukan? Demikianlah beberapa cara untuk membuat filter validasi pada email menggunakan PHP. Selamat mencoba.

Filter Email pada Backend PHP dan Ajax

Postingan Terkait:

2 Trackbacks / Pingbacks

Leave a Reply Batalkan balasan