Ini Dia.. Code sederhana registrasi pendaftaran dengan AJAX jQuery dan PHP serta aktivasi via email

By. AlgoritmaNews - Pernah mendaftar social networking ? Facebook atau Twitter atau milis-milis dan forum-forum ?? Anda mesti aktifkan account anda lewat email bukan ? apabila anda tidak mengaktifkan,,maka account yang baru saja anda buat tidak akan aktif. Proses tersebut kadang disebut verifikasi account via email yang tentu saja membutuhkan autoresponder email. Bagaimana cara membuatnya ya ?? Berikut ini saya coba share bagaimana membuat codingan seperti tersebut.
Secara logika, mungkin sederhananya seperti ini, di table member, kita kasih status aktif. Status aktif akan menentukan apakah member dapat login atau belum dengan adanya code aktifasi.

Pada gambar diatas, terlihat bahwa ada member yang sudah daftar namun belum melakukan aktivasi. Terlihat bahwa field aktifnya masih 0. Member yg sudah aktif ditandai dengan value field aktif adalah 1.
Untuk pertama kali, jangan lupa setting konfigurasi database hostingan kamu. Lalu import file member.sql.
Bila sudah melakukan settingan db dan import database.
Di dalam folder codingan terdapat file-file terpisah,,bisa liat gambar dibawah ini.

Di folder css hanya berisi code css yang jujur belum mahir banget dengan css, maksain aja dah…berikut codenya :

@charset "utf-8";
.judul {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #0033FF;
}
.author {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	font-weight: normal;
	color: #666666;
	text-align: center;
	width: 220px;
	text-decoration: none;
}
.link_author {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}

table {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 12px;
	background-position: center center;
	margin-left: 46px;
}

.input_username {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #CCCCCC;
	padding-left: 3px;
}

.input_email {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #CCCCCC;
	padding-left: 3px;
}

.input_password {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #CCCCCC;
	padding-left: 3px;
}

.tampil_info {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-color: #E7E8E3;
	text-align: center;
	margin-left: 47px;
	border: thin dashed #CCCCCC;
	clear: right;
	float: left;
	width: 200px;
}

.info_email {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-color: #E7E8E3;
	text-align: center;
	margin-left: 47px;
	border: thin dashed #CCCCCC;
	clear: right;
	float: left;
	width: 200px;
}

Trus di folder image cuma ada file loading.gif dimana image ini digunakan untuk loading saat ajax melakukan akses ke database.
Di folder inc ada 5 file :

inc.db.php, berisi setingan database aja

<?php
      $host = "localhost";
	$user = "root";
	$pass = "adiputra";
	$db   = "blog_tes";

	mysql_connect($host,$user,$pass) or die('error : '.mysql_error());

	mysql_select_db($db) or die('error : '.mysql_error());
?>

lib_func.php, kumpulan fungsi-fungsi php seperti fungsi untuk autoresponder,dll.

<?php
	include "inc.db.php";

	function secure_input($data){
		$secure_data = mysql_real_escape_string($data);
		return $secure_data;
	}

	function auto_respon($email,$username,$kode){
		include_once("class.phpmailer.php");
		$mail         = new PHPMailer();
		$mail->IsMail();
		$mail->FromName   = "Admin TokoBukuBekas.Co.Tv"; // silakan isi dengan email kamu..itu hanya sample,, $mail->FromName = "Admin TokoBukuBekas.Co.Tv";
		$mail->Subject = "Aktifasi Member";
		$mail->Body = "Terimakasih ".$username." telah mendaftar..<br />Klik link dibawah ini untuk mengaktifkan account anda<br /><br />http://tokobukubekas.co.tv/tutorial/form_daftar/aktifasi.php?kode=$kode";
		$mail->AddAddress($email);
		$mail->IsHTML(true);
		if(!$mail->Send()){
			return FALSE;
		}else{
			return TRUE;
		}
	}

	function cek_kode_aktifasi($kode){
		$sql = "select * from member where code='$kode' and aktif=1";
		$res = mysql_query($sql);
		$data = mysql_fetch_array($res);
		$cek_ada = mysql_num_rows($res);

		if($cek_ada == 0){
			$cek = 1; # member belum aktifasi
		}else{
			$cek = 0; # member sudah aktifasi
		}

		return cek;
	}
?>

Class_phpmailer.php, Class_smtp.php dan Class_pop3.php adalah class-class untuk melakukan autoresponder. Saya dapatkan di phpclasses.org

Di folder js terdapat code-code jquery untuk settingan ajax dan validasi lainnya.

js_form_daftar.js : berisi code jQuery untuk form daftar (index.php)

$(document).ready(function(){
	$(".tampil_info").hide();
	$('.loading').hide();
});

function aksi_daftar(){

	$(".tampil_info").fadeOut('slow');

	$('.loading').show();

	var cek = cek_kosong();

	var email = $(".input_email").val();

	if(cek_kosong()==1){
		$('.loading').hide();
		$(".tampil_info").html("maaf, data mesti diisi semua");
		$(".tampil_info").fadeIn('slow');
	}else if(cek_email(email)==1){
		$('.loading').hide();
		$(".tampil_info").html("maaf, email anda tidak valid");
		$(".tampil_info").fadeIn('slow');
	}else{
		var username 	= $(".input_username").val();
		var email 		= $(".input_email").val();
		var password 	= $(".input_password").val();
		var input_data = "username="+username+"&email="+email+"&password="+password;

		//alert(username+' - '+email+' - '+password);

		$.ajax({
			url:"proses.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});
	}

	return false;
}

function cek_kosong(){
	var cek;
	$(function(){

		data_username = $(".input_username").val().length;
		data_email = $(".input_email").val().length;
		data_password = $(".input_password").val().length;

		if((data_username<1) || (data_email)<1 || (data_password<1)){
			cek = 1;
		}else{
			cek = 0;
		}

	});

	return cek;
}

function cek_email(data){
	var regex_email= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);

	isi_email = data;

	if(regex_email.test(isi_email)){
		return 0;
	}else{
		return 1;
	}
}

js_form_login.js : berisi code jQuery untuk form login(login.php)

$(document).ready(function(){
	$(".tampil_info").hide();
	$('.loading').hide();
});

function aksi_daftar(){

	$(".tampil_info").fadeOut('slow');

	$('.loading').show();

	var cek = cek_kosong();

	var email = $(".input_email").val();

	if(cek_kosong()==1){
		$('.loading').hide();
		$(".tampil_info").html("maaf, data mesti diisi semua");
		$(".tampil_info").fadeIn('slow');
	}else{
		var username 	= $(".input_username").val();
		var password 	= $(".input_password").val();
		var input_data = "username="+username+"&password="+password;

		//alert(username+' - '+email+' - '+password);

		$.ajax({
			url:"proses_login.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});
	}

	return false;
}

function cek_kosong(){
	var cek;
	$(function(){

		data_username = $(".input_username").val().length;
		data_password = $(".input_password").val().length;

		if((data_username<1) || (data_password<1)){
			cek = 1;
		}else{
			cek = 0;
		}

	});

	return cek;
}

Awalnya saya arahkan terlebih dahulu untuk melakukan pendaftaran member baru. Lihat index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Form  Registrasi</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/js_form_daftar.js"></script>
<body>
<div class="judul">Tutorial Registrasi-Login Form Dengan Ajax-jQuery dan Aktifasi Email</div>
<div class="author">Author : <a href="http://www.terusbelajar.wordpress.com" class="link_author">Adiputra</a></div>
<form action="" method="post" name="form_reg">
	<table width="200" border="0" cellspacing="2" cellpadding="2">
      <tr>
        <td>Username</td>
        <td>:</td>
        <td><input name="username" type="text" class="input_username" /></td>
      </tr>
      <tr>
        <td>Email</td>
        <td>:</td>
        <td>
        	<input name="email" type="text" class="input_email"/>
        </td>
      </tr>
      <tr>
        <td>Password</td>
        <td>:</td>
        <td><input name="password" type="password" class="input_password" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" class='tombol' value="Daftar" onclick="return aksi_daftar();"/></td>
      </tr>
	</table>

</form>
<div class="loading">
  <img src='image/loading.gif' />
</div>
<div class="tampil_info">

</div>
</body>
</html>

Index.php ini memanggil jquery-1.4.2.min.js, jadi tolong sesuaikan pula pathnya dengan folder kamu (maaf tidak disertakan di donlotan, jadi donlot heula nyak), juga memanggil file js_form_daftar.js dimana settingan validasi dan ajax dengan jquery. Di dalam file js_form_daftar.js terdapat code ajax :

          $.ajax({
			url:"proses.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});

Terlihat di code tersebut memanggil file proses.php yang berisi query ke database :

<?php
	include "inc/inc.db.php";
	include "inc/lib_func.php";

	$username = secure_input($_POST['username']);
	$email = secure_input($_POST['email']);
	$password = md5(secure_input($_POST['password']));

	$kode = rand(11111,99999);

	$sql = "insert into member values ('','$username','$email','$password','$kode','0')";
	$res = mysql_query($sql);

	if($res){
		//echo "berhasil query";
		if(auto_respon($email,$username,$kode)){
			echo "Silahkan melihat email anda untuk mengaktifkan account anda<br >";
			echo "Apabila tidak ditemukan balasan ke inbox email Anda, silahkan cek inbox spam email Anda...";
		}else{
			echo "Gagal mengirim aktifasi email";
		}
	}else{
		echo "Gagal melakukan query";
	}

?>

Sampai sini adalah proses pendaftaran, lalu dengan code file proses.php ini pula, code aktifasi di kirim melalui email responder melalui email yang sudah didaftarkan. Sekarang bisa kita cek, apakah data aktifasi sudah ke kirim via email atau belum.

Untuk email yahoo,,cek di kotak Spamnya, kalau di kotak Inbox tidak ada. kenapa ya ???
Lihat terdapat link di kedua email yang saya coba,,lalu liat pula bahwa link tersebut mengarah ke aktifasi.php yang isinya hanya codingan untuk mengubah status aktif member. Berikut codenya :

<?php
	include "inc/inc.db.php";
	include "inc/lib_func.php";

	$kode = secure_input($_GET['kode']);
	//echo $kode."<br />";

	$cek = cek_kode_aktifasi($kode);
	//echo $cek."<br />";

	if($cek == 1){
		$sql = "update member set aktif=1 where code = '$kode'";
		mysql_query($sql);
		echo "Terimakasih anda telah melakukan aktifasi account anda <br />";
		echo "Untuk login silahkan anda ke halaman <a href='http://tokobukubekas.co.tv/tutorial/form_daftar/login.php'>[ login ]</a>";
	}else{
		echo "Account anda telah aktif";
	}
?>

File ini hanya untuk mengubah status aktif dari member. Bila berhasil, status aktif bernilai 1. Sampai sini, kita selesai mengaktifkan member dengan kode aktifasi.
Kita coba untuk login (login.php) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Form  Registrasi Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/js_form_login.js"></script>
<body>
<div class="judul">Tutorial Registrasi-Login Form Dengan Ajax-jQuery-PHP dan Aktifasi Email</div>
<div class="author">Author : <a href="http://www.terusbelajar.wordpress.com" class="link_author">Adiputra</a></div>
<form action="" method="post" name="form_reg">
	<table width="200" border="0" cellspacing="2" cellpadding="2">
      <tr>
        <td>Username</td>
        <td>:</td>
        <td><input name="username" type="text" class="input_username" /></td>
      </tr>
      <tr>
        <td>Password</td>
        <td>:</td>
        <td><input name="password" type="password" class="input_password"/></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" class='tombol' value="Login" onclick="return aksi_daftar();"/></td>
      </tr>
	</table>

</form>
<div class="loading">
  <img src='image/loading.gif' />
</div>
<div class="tampil_info">

</div>
</body>
</html>

Proses login berisi validasi baik dari validasi username, validasi password, dan validasi status aktifnya. Berikut kode-nya (proses_login.php):

<?php
	include "inc/inc.db.php";
	include "inc/lib_func.php";

	$username = secure_input($_POST['username']);
	$password = md5(secure_input($_POST['password']));

	$sql = "select * from member where username = '$username'";
	$res = mysql_query($sql);
	$jml = mysql_num_rows($res);

	if($jml==0){
		echo "Username tidak dikenal, silahkan mendaftar";
	}else{
		while($data = mysql_fetch_assoc($res)){

			$pass_db = $data['password'];

			if($pass_db != $password){
				echo "Password Anda salah, silahkan ulangi..";
			}else{

				$aktif = $data['aktif'];
				$email = $data['email'];

				if($aktif == 0){
					echo "Anda belum melakukan aktifasi via email..<br />Silahkan cek email Anda <br />[ ".$email." ]";
				}else{
					echo "Anda telah login  ";
				}

			}

		}
	}

?>

Dimana file ini dipanggil dari file js_form_login.js dengan ajaxnya jquery :

              $.ajax({
			url:"proses_login.php",
			type:"POST",
			data:input_data,
			success:function(data){
				$('.loading').hide();
				$(".tampil_info").html(data);
				$(".tampil_info").fadeIn('slow');
				//alert('ada');
			}
		});

Sampai sini, selesai,,
Demo dan file-filenya bisa dicomot di bawah ini..
maaf klu demonya agak berat,,karena maklum pake hostingan yg gratisan…:)
[ Demo ] [ Download ]
Moda ada manfaatnya ya dan mohon koreksinya…thanks,,

Refrensi

Posted in: Ajax,design,Email,jQuery,PHP,Tips Trik,Web

Contact US

Tunick Service

sitty

Code sederhana registrasi pendaftaran dengan AJAX jQuery dan PHP serta aktivasi via email

0 Comments:

Post a Comment

Share

BLog Teman