Technology

Membuat Email Validation pada Form Registrasi Menggunakan Ajax/PHP

 

   

Mungkin anda pernah melakukan proses Sign Up di suatu website. Pada beberapa website, setelah memasukan alamat email akan muncul secara otomatis sebuah proses validasi yang mengecek apakah email yang kita masukkan sudah pernah registrasi di website tersebut atau belum. Seperti apa pembuatannya? Berikut langkah-langkah bagaimana menerapkan proses validasi tersebut pada halaman Sign Up website anda. Dalam tutorial kali ini kita gunakan frame work CodeIgniter :)

1. Pertama silakan download dulu file jquery disini: http://code.jquery.com/jquery-1.7.2.js. Berikutnya kita buat formnya terlebih dahulu dengan script berikut:

<script type="text/javascript" src="<?=base_url()?>assets/js/jquery-1.7.2.js"></script>
<form id="myform" class="cols" method="post">
   <table width="100%">
     <tr>
	<td>
	<label> Nama Lengkap <br><input type="text" name="name" id="name" required="required" maxlength="30" class="satu"> </label>
	</td>
	<td><label> Website <br><input type="url" name="website" id="website" maxlength="30" required="required" class="satu" value="http://"> </label>
	</td></tr>
	<tr>
	<td colspan="2"><label> Alamat Lengkap <br><input type="text" name="address" id="address" required="required" maxlength="30" class="dua"> </label></td></tr>							
	<tr>
	  <td><label> Email <br><input type="email" name="email" id="emaile" required="required"  class="satu"><span id="msgboxe" style="display:none"></span></label></td>
	  <td><label> Phone Number <br><input type="number" name="phone" id="phone" minlength="10" class="satu"> </label></td>
	</tr>
	<tr>
	  <td style="font-family: Arial, Verdana;font-size: 20px;color:#C78C45;">Login Information</td>
	</tr>
	<tr><td><label> Password <br><input type="password" required="required" name="password" id="passworde" minlength="4" class="satu"> </label></td>
	<td><label> Password check <br><input type="password" required="required" name="check" data-equals="password" class="satu"> </label> </td></tr>
	<tr><td style="font-family: Arial, Verdana;font-size: 20px;color:#C78C45;">Verify Registration</td>
	</tr>
	<tr>
	  <td colspan="2">
		<img src="<?=base_url()?>assets/captcha/captcha.php" id="captcha" /><br/>
				<!-- CHANGE TEXT LINK -->
		<a href="#" onclick="document.getElementById('captcha').src='<?=base_url()?>assets/captcha/captcha.php?'+Math.random();
								document.getElementById('captcha-form').focus();"
								id="change-image">Not readable? Change text.</a><br/>
		<input type="text" name="captcha" id="captcha-form" autocomplete="off" required="required"/><br/>
		</tr>
	</table>  
</form>

2. Kemudian tambahkan script berikut di halaman form registrasi.

<script language="javascript" type="text/javascript">
$(document).ready(function()
{
	$("#emaile").blur(function()
	{

		$("#msgboxe").removeClass().addClass('messagebox').text('Checking.....').fadeIn("slow");
		$.post("<?=base_url();?>assets/auto/checkemail.php",{ emaile:$('#emaile').val() } ,function(data)
        {
		  if(data=="no") //if email is there
		  {

		  	$("#msgboxe").fadeTo(200,0.1,function() //start fading the messagebox
			{ 
			  $(this).html('Email already registered').addClass('messageboxerror').fadeTo(900,1);
			});		
          }
		  else // if the email is not there
		  {
			$("#msgboxe").fadeTo(200,0.1,function()  //start fading the messagebox
			{ 
			  //add message and change the class of the box and start fading
			  $(this).html('Available').addClass('messageboxok').fadeTo(900,1);	
			});
		  }		
        });
	});
});
</script>

yang perlu diperhatikan pada script Ajax di atas adalah pada baris berikut:

$.post("<?=base_url();?>assets/auto/checkemail.php",{ emaile:$('#emaile').val() } ,function(data)

Maksud dari script di atas adalah mengirimkan data dari form input email ke file “checkemail.php” untuk dilakukan validasi, di mana file tersebut kita disimpan dulu di dalam folder /root_folder/assets/auto/

3. Sekarang buat file checkemail.php dengan source code sebagai berikut:

<?php
/**
The only piece of code you should touch in this file is the 
dreamweaver connection string, and the recordset dbname which 
matches your own connection string

Script to check and see if the username provided 
has already been used, if this is the case then 
show them a message using JQuery to switch css class,
connect to the database and retreive any usernames 
that match the value passed via querystring

if its a match or if any rows return then show the 
username in use message or if the rows return nothing 
then that username hasnt been used yet and can be used

*/

	$server = "localhost";
	$username = "root"; //masukin username database
	$password = ""; //masukin password database
	$database = "voucher"; //masukin nama database

	// script untuk melakukan koneksi dan memilih database diserver
	mysql_connect($server,$username,$password) or die("Koneksi gagal");

/////////////////////////
// START DREAMWEAVER CODE
/////////////////////////

//
// Change this to match your dreamweaver
// or other connection method
//

// Dreamweaver creats its own code to 
// collect information from the POST or GET method

  $colname_rsUnameCheck = $_POST['emaile'];

// conenct to the database and 
// Run the SQL code to retreice our records

mysql_select_db($database) or die("Database tidak bisa dibuka");
$query_rsUnameCheck = sprintf("SELECT email FROM users WHERE email='".$colname_rsUnameCheck."'");
$rsUnameCheck = mysql_query($query_rsUnameCheck) or die(mysql_error());
$row_rsUnameCheck = mysql_fetch_assoc($rsUnameCheck);
$totalRows_rsUnameCheck = mysql_num_rows($rsUnameCheck);

?>
<?php 

// Quick iff statment to see if there was 
// any records returned from the query
// either way echo (print) our result

if(mysql_num_rows($rsUnameCheck)> 0 ){
	echo "no";
}else{
	//username already exists
	echo "yes";
}
?>
<?php 
mysql_free_result($rsUnameCheck);
?>

Sesuaikan username, password dan database dengan yang anda gunakan.

4. Untuk memunculkan notifikasi, kita bisa tambahkan script berikut. Penempatan dan modifikasi tampilan bisa anda definisikan pada file CSS.

<span id="msgboxe" style="display:none" style="margin-left:250px;"></span>

5. CSS untuk notifikasi bisa menggunakan script berikut:

<style type="text/css">
/*
Our CSS for the message box
*/
.messagebox{
	width:70px;
	margin-top:-30px;
	border:1px solid #0064A1;
	background:#5F81D7;
	padding:3px;
	color:#ffffff;
}
.messageboxok{
	width:70px;
	margin-top:-30px;
	border:1px solid #000000;
	background:#0064A1;
	padding:3px;
	font-weight:bold;
	color:#ffffff;	
}
.messageboxerror{
	width:250px;
	margin-top:-30px;
	border:1px solid #ff0000;
	background:none;
	padding:3px;
	font-weight:bold;
	color:#ff0000;
}

</style>

6. Setelah langkah-langkah diatas dilakukan  sekarang mari dicoba cek form registrasi anda. Jika email sudah terdaftar maka hasilnya sebagai berikut:

Sedangkan bila email yang kita masukkan belum terdaftar, akan muncul hasil seperti berikut:

Jadi, selamat mencoba

Dapatkan Segera! Video Marketplace Domination: Cara Sukses Jualan di Tokopedia dan Bukalapak. Download Now!


Artikel Terkait

4 komentar

  • 16 November 2012 - pukul 2:42

    database gk dibuat dulu mas..?
    kira2 databasenya apa mas..?

  • 4 February 2013 - pukul 13:49

    Mas, boleh minta tolong kirimin file captcha.php nya ngga?

    Thanks

  • 22 April 2015 - pukul 18:39

    I just added this weblog to my feed reader, excellent stuff. Cannot get enough!

  • 22 May 2017 - pukul 21:27

    Thanks for shring such a good idea, paragraph iss good, thatfs why i have read iit fully

Berikan Komentar

Your email address will not be published. Required fields are marked *