Pengecekan Username dan Email dengan Ajax Jquery pada Codeigniter

Bismillah…
Pernah mendaftar pada suatu forum atau mungkin website yang menggunakan username dan pemasukan email. Saat kita memasukan username atau email terdapat pengecekan apakah username dan email kita telah tersedia atau sudah ada yang menggunakan. Bagaimana cara membuatnya ya…Berikut adalah pengecekan username dan email secara langsung dengan menggunakan Codeigniter.

Awalnya setting terlebih dahulu codeigniter sesuai dengan settingan komputer kita. Berikut adalah beberapa settingan saya.

autoload.php

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/*
| -------------------------------------------------------------------
| AUTO-LOADER
| -------------------------------------------------------------------
| This file specifies which systems should be loaded by default.
|
| In order to keep the framework as light-weight as possible only the
| absolute minimal resources are loaded by default. For example,
| the database is not connected to automatically since no assumption
| is made regarding whether you intend to use it.  This file lets
| you globally define which systems you would like loaded with every
| request.
|
| -------------------------------------------------------------------
| Instructions
| -------------------------------------------------------------------
|
| These are the things you can load automatically:
|
| 1. Libraries
| 2. Helper files
| 3. Plugins
| 4. Custom config files
| 5. Language files
| 6. Models
|
*/

/*
| -------------------------------------------------------------------
|  Auto-load Libraries
| -------------------------------------------------------------------
| These are the classes located in the system/libraries folder
| or in your system/application/libraries folder.
|
| Prototype:
|
|	$autoload['libraries'] = array('database', 'session', 'xmlrpc');
*/

$autoload['libraries'] = array('database','encrypt');


/*
| -------------------------------------------------------------------
|  Auto-load Helper Files
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['helper'] = array('url', 'file');
*/

$autoload['helper'] = array('url','form_helper');


/*
| -------------------------------------------------------------------
|  Auto-load Plugins
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['plugin'] = array('captcha', 'js_calendar');
*/

$autoload['plugin'] = array();


/*
| -------------------------------------------------------------------
|  Auto-load Config files
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['config'] = array('config1', 'config2');
|
| NOTE: This item is intended for use ONLY if you have created custom
| config files.  Otherwise, leave it blank.
|
*/

$autoload['config'] = array();


/*
| -------------------------------------------------------------------
|  Auto-load Language files
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['language'] = array('lang1', 'lang2');
|
| NOTE: Do not include the "_lang" part of your file.  For example 
| "codeigniter_lang.php" would be referenced as array('codeigniter');
|
*/

$autoload['language'] = array();


/*
| -------------------------------------------------------------------
|  Auto-load Models
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['model'] = array('model1', 'model2');
|
*/

$autoload['model'] = array();



/* End of file autoload.php */
/* Location: ./system/application/config/autoload.php */

config.php

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/*
|--------------------------------------------------------------------------
| Base Site URL
|--------------------------------------------------------------------------
|
| URL to your CodeIgniter root. Typically this will be your base URL,
| WITH a trailing slash:
|
|	http://example.com/
|
*/
$config['base_url']	= "http://localhost/user_regis";

/*
|--------------------------------------------------------------------------
| Index File
|--------------------------------------------------------------------------
|
| Typically this will be your index.php file, unless you've renamed it to
| something else. If you are using mod_rewrite to remove the page set this
| variable so that it is blank.
|
*/
$config['index_page'] = "index.php";

/*
|--------------------------------------------------------------------------
| URI PROTOCOL
|--------------------------------------------------------------------------
|
| This item determines which server global should be used to retrieve the
| URI string.  The default setting of "AUTO" works for most servers.
| If your links do not seem to work, try one of the other delicious flavors:
|
| 'AUTO'			Default - auto detects
| 'PATH_INFO'		Uses the PATH_INFO
| 'QUERY_STRING'	Uses the QUERY_STRING
| 'REQUEST_URI'		Uses the REQUEST_URI
| 'ORIG_PATH_INFO'	Uses the ORIG_PATH_INFO
|
*/
$config['uri_protocol']	= "AUTO";

/*
|--------------------------------------------------------------------------
| URL suffix
|--------------------------------------------------------------------------
|
| This option allows you to add a suffix to all URLs generated by CodeIgniter.
| For more information please see the user guide:
|
| http://codeigniter.com/user_guide/general/urls.html
*/

$config['url_suffix'] = "";

/*
|--------------------------------------------------------------------------
| Default Language
|--------------------------------------------------------------------------
|
| This determines which set of language files should be used. Make sure
| there is an available translation if you intend to use something other
| than english.
|
*/
$config['language']	= "english";

/*
|--------------------------------------------------------------------------
| Default Character Set
|--------------------------------------------------------------------------
|
| This determines which character set is used by default in various methods
| that require a character set to be provided.
|
*/
$config['charset'] = "UTF-8";

/*
|--------------------------------------------------------------------------
| Enable/Disable System Hooks
|--------------------------------------------------------------------------
|
| If you would like to use the "hooks" feature you must enable it by
| setting this variable to TRUE (boolean).  See the user guide for details.
|
*/
$config['enable_hooks'] = FALSE;


/*
|--------------------------------------------------------------------------
| Class Extension Prefix
|--------------------------------------------------------------------------
|
| This item allows you to set the filename/classname prefix when extending
| native libraries.  For more information please see the user guide:
|
| http://codeigniter.com/user_guide/general/core_classes.html
| http://codeigniter.com/user_guide/general/creating_libraries.html
|
*/
$config['subclass_prefix'] = 'MY_';


/*
|--------------------------------------------------------------------------
| Allowed URL Characters
|--------------------------------------------------------------------------
|
| This lets you specify with a regular expression which characters are permitted
| within your URLs.  When someone tries to submit a URL with disallowed
| characters they will get a warning message.
|
| As a security measure you are STRONGLY encouraged to restrict URLs to
| as few characters as possible.  By default only these are allowed: a-z 0-9~%.:_-
|
| Leave blank to allow all characters -- but only if you are insane.
|
| DO NOT CHANGE THIS UNLESS YOU FULLY UNDERSTAND THE REPERCUSSIONS!!
|
*/
$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';


/*
|--------------------------------------------------------------------------
| Enable Query Strings
|--------------------------------------------------------------------------
|
| By default CodeIgniter uses search-engine friendly segment based URLs:
| example.com/who/what/where/
|
| You can optionally enable standard query string based URLs:
| example.com?who=me&what=something&where=here
|
| Options are: TRUE or FALSE (boolean)
|
| The other items let you set the query string "words" that will
| invoke your controllers and its functions:
| example.com/index.php?c=controller&m=function
|
| Please note that some of the helpers won't work as expected when
| this feature is enabled, since CodeIgniter is designed primarily to
| use segment based URLs.
|
*/
$config['enable_query_strings'] = FALSE;
$config['controller_trigger'] 	= 'c';
$config['function_trigger'] 	= 'm';
$config['directory_trigger'] 	= 'd'; // experimental not currently in use

/*
|--------------------------------------------------------------------------
| Error Logging Threshold
|--------------------------------------------------------------------------
|
| If you have enabled error logging, you can set an error threshold to 
| determine what gets logged. Threshold options are:
| You can enable error logging by setting a threshold over zero. The
| threshold determines what gets logged. Threshold options are:
|
|	0 = Disables logging, Error logging TURNED OFF
|	1 = Error Messages (including PHP errors)
|	2 = Debug Messages
|	3 = Informational Messages
|	4 = All Messages
|
| For a live site you'll usually only enable Errors (1) to be logged otherwise
| your log files will fill up very fast.
|
*/
$config['log_threshold'] = 0;

/*
|--------------------------------------------------------------------------
| Error Logging Directory Path
|--------------------------------------------------------------------------
|
| Leave this BLANK unless you would like to set something other than the default
| system/logs/ folder.  Use a full server path with trailing slash.
|
*/
$config['log_path'] = '';

/*
|--------------------------------------------------------------------------
| Date Format for Logs
|--------------------------------------------------------------------------
|
| Each item that is logged has an associated date. You can use PHP date
| codes to set your own date formatting
|
*/
$config['log_date_format'] = 'Y-m-d H:i:s';

/*
|--------------------------------------------------------------------------
| Cache Directory Path
|--------------------------------------------------------------------------
|
| Leave this BLANK unless you would like to set something other than the default
| system/cache/ folder.  Use a full server path with trailing slash.
|
*/
$config['cache_path'] = '';

/*
|--------------------------------------------------------------------------
| Encryption Key
|--------------------------------------------------------------------------
|
| If you use the Encryption class or the Sessions class with encryption
| enabled you MUST set an encryption key.  See the user guide for info.
|
*/
$config['encryption_key'] = "";

/*
|--------------------------------------------------------------------------
| Session Variables
|--------------------------------------------------------------------------
|
| 'session_cookie_name' = the name you want for the cookie
| 'encrypt_sess_cookie' = TRUE/FALSE (boolean).  Whether to encrypt the cookie
| 'session_expiration'  = the number of SECONDS you want the session to last.
|  by default sessions last 7200 seconds (two hours).  Set to zero for no expiration.
| 'time_to_update'		= how many seconds between CI refreshing Session Information
|
*/
$config['sess_cookie_name']		= 'ci_session';
$config['sess_expiration']		= 7200;
$config['sess_encrypt_cookie']	= FALSE;
$config['sess_use_database']	= FALSE;
$config['sess_table_name']		= 'ci_sessions';
$config['sess_match_ip']		= FALSE;
$config['sess_match_useragent']	= TRUE;
$config['sess_time_to_update'] 	= 300;

/*
|--------------------------------------------------------------------------
| Cookie Related Variables
|--------------------------------------------------------------------------
|
| 'cookie_prefix' = Set a prefix if you need to avoid collisions
| 'cookie_domain' = Set to .your-domain.com for site-wide cookies
| 'cookie_path'   =  Typically will be a forward slash
|
*/
$config['cookie_prefix']	= "";
$config['cookie_domain']	= "";
$config['cookie_path']		= "/";

/*
|--------------------------------------------------------------------------
| Global XSS Filtering
|--------------------------------------------------------------------------
|
| Determines whether the XSS filter is always active when GET, POST or
| COOKIE data is encountered
|
*/
$config['global_xss_filtering'] = FALSE;

/*
|--------------------------------------------------------------------------
| Output Compression
|--------------------------------------------------------------------------
|
| Enables Gzip output compression for faster page loads.  When enabled,
| the output class will test whether your server supports Gzip.
| Even if it does, however, not all browsers support compression
| so enable only if you are reasonably sure your visitors can handle it.
|
| VERY IMPORTANT:  If you are getting a blank page when compression is enabled it
| means you are prematurely outputting something to your browser. It could
| even be a line of whitespace at the end of one of your scripts.  For
| compression to work, nothing can be sent before the output buffer is called
| by the output class.  Do not "echo" any values with compression enabled.
|
*/
$config['compress_output'] = FALSE;

/*
|--------------------------------------------------------------------------
| Master Time Reference
|--------------------------------------------------------------------------
|
| Options are "local" or "gmt".  This pref tells the system whether to use
| your server's local time as the master "now" reference, or convert it to
| GMT.  See the "date helper" page of the user guide for information
| regarding date handling.
|
*/
$config['time_reference'] = 'local';


/*
|--------------------------------------------------------------------------
| Rewrite PHP Short Tags
|--------------------------------------------------------------------------
|
| If your PHP installation does not have short tag support enabled CI
| can rewrite the tags on-the-fly, enabling you to utilize that syntax
| in your view files.  Options are TRUE or FALSE (boolean)
|
*/
$config['rewrite_short_tags'] = FALSE;


/*
|--------------------------------------------------------------------------
| Reverse Proxy IPs
|--------------------------------------------------------------------------
|
| If your server is behind a reverse proxy, you must whitelist the proxy IP
| addresses from which CodeIgniter should trust the HTTP_X_FORWARDED_FOR
| header in order to properly identify the visitor's IP address.
| Comma-delimited, e.g. '10.0.1.200,10.0.1.201'
|
*/
$config['proxy_ips'] = '';


/* End of file config.php */
/* Location: ./system/application/config/config.php */

database.php

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/*
| -------------------------------------------------------------------
| DATABASE CONNECTIVITY SETTINGS
| -------------------------------------------------------------------
| This file will contain the settings needed to access your database.
|
| For complete instructions please consult the "Database Connection"
| page of the User Guide.
|
| -------------------------------------------------------------------
| EXPLANATION OF VARIABLES
| -------------------------------------------------------------------
|
|	['hostname'] The hostname of your database server.
|	['username'] The username used to connect to the database
|	['password'] The password used to connect to the database
|	['database'] The name of the database you want to connect to
|	['dbdriver'] The database type. ie: mysql.  Currently supported:
				 mysql, mysqli, postgre, odbc, mssql, sqlite, oci8
|	['dbprefix'] You can add an optional prefix, which will be added
|				 to the table name when using the  Active Record class
|	['pconnect'] TRUE/FALSE - Whether to use a persistent connection
|	['db_debug'] TRUE/FALSE - Whether database errors should be displayed.
|	['cache_on'] TRUE/FALSE - Enables/disables query caching
|	['cachedir'] The path to the folder where cache files should be stored
|	['char_set'] The character set used in communicating with the database
|	['dbcollat'] The character collation used in communicating with the database
|
| The $active_group variable lets you choose which connection group to
| make active.  By default there is only one group (the "default" group).
|
| The $active_record variables lets you determine whether or not to load
| the active record class
*/

$active_group = "default";
$active_record = TRUE;

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "user_regis_db";
$db['default']['dbdriver'] = "mysql";
$db['default']['dbprefix'] = "";
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = "";
$db['default']['char_set'] = "utf8";
$db['default']['dbcollat'] = "utf8_general_ci";


/* End of file database.php */
/* Location: ./system/application/config/database.php */

<strong>routes.php</strong>
1
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/*
| -------------------------------------------------------------------------
| URI ROUTING
| -------------------------------------------------------------------------
| This file lets you re-map URI requests to specific controller functions.
|
| Typically there is a one-to-one relationship between a URL string
| and its corresponding controller class/method. The segments in a
| URL normally follow this pattern:
|
| 	example.com/class/method/id/
|
| In some instances, however, you may want to remap this relationship
| so that a different class/function is called than the one
| corresponding to the URL.
|
| Please see the user guide for complete details:
|
|	http://codeigniter.com/user_guide/general/routing.html
|
| -------------------------------------------------------------------------
| RESERVED ROUTES
| -------------------------------------------------------------------------
|
| There are two reserved routes:
|
|	$route['default_controller'] = 'welcome';
|
| This route indicates which controller class should be loaded if the
| URI contains no data. In the above example, the "welcome" class
| would be loaded.
|
|	$route['scaffolding_trigger'] = 'scaffolding';
|
| This route lets you set a "secret" word that will trigger the
| scaffolding feature for added security. Note: Scaffolding must be
| enabled in the controller in which you intend to use it.   The reserved 
| routes must come before any wildcard or regular expression routes.
|
*/

$route['default_controller'] = "member";
$route['scaffolding_trigger'] = "";


/* End of file routes.php */
/* Location: ./system/application/config/routes.php */

Setelah itu saya membuat controller Member.

member.php

<?php
class Member extends Controller{
	# konstruktor Member
        # panggil model m_member
	function Member(){
		
		parent::Controller();
		$this->load->model("m_member");
		
	}
	
        # fungsi untuk menampilkan form daftar
	function view_daftar_member(){
		
		$this->load->view("form_daftar");
		
	}
	
	# fungsi untuk mengecek status username dari db
	function cek_status_username(){
		# ambil username dari form
		$username = $_POST['username'];
		
                # select ke model member username yang diinput user
		$hasil_username = $this->m_member->cek_username($username);
		
                # pengecekan value $hasil_username
		if(count($hasil_username)!=0){
		  # kalu value $hasil_username tidak 0
                  # echo 1 untuk pertanda username sudah ada pada db	
                        echo "1"; 
		}else{
                  # kalu value $hasil_username = 0
                  # echo 2 untuk pertanda username belum ada pada db
			echo "2";
		}
		
	}
	
	function cek_status_email(){
		
		$email = $_POST['email'];
		
		$hasil_email = $this->m_member->cek_email($email);
		
		if(count($hasil_email)!=0){
			echo "1";
		}else{
			echo "2";
		}
		
	}
	
	function proses_tambah(){
		
		$data = array(
			"email" => $this->input->xss_clean($_POST['email']),
			"username" => $this->input->xss_clean($_POST['username']),
			"password" => $this->input->xss_clean($_POST['password']),
			"nama" => $this->input->xss_clean($_POST['nama'])
		);
		
		$hasil_insert = $this->m_member->insert_member($data);
		
		$hasil = array_values($hasil_insert);
		
		echo $hasil[0];
	}
	
	
}

lalu saya membuat model m_member.
m_member.php

<?php
class M_member extends Model{
	
	function cek_email($email){
		
		$sql = "select * from member where email='$email'";
		
		$hasil = $this->db->query($sql);
		
		return $hasil->result();
		
	}
	
	function cek_username($username){
		
		$sql = "select * from member where username='$username'";
		
		$hasil = $this->db->query($sql);
		
		return $hasil->result();
		
	}
	
	function insert_member($data){
		
		for ($i=0; $i<count($data); $i++){
			
			$email = $data['email'];
			$username = $data['username'];
			$password = $data['password'];
			$nama = $data['nama'];
			
		}
		
		$pass_encrypt = $this->encrypt->sha1($password);
		
		$sql = "SELECT tambah_member ('$email','$username','$pass_encrypt','$nama')";
		
		$hasil = $this->db->query($sql);
		
		return $hasil->row_array();
		
	}
	
}

Lalu saya membuat view untuk tampilannya form_daftar

form_daftar.php

<html>
<head>
<style type='text/css'>
	label {
		display: block;
	}
	
	#container {
		width: 450px;
		border: 1px solid black;
		background-color: 
		margin-top: 120px;
		margin-left: 340px;
	}
	
	#pesan {
		border: 1px solid green;
		margin: 5px;
		padding-left: 5px;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	
	#form_tambah {
		border: 1px solid blue;
		margin: 5px;
		padding: 3px;
		padding-left: 35px;
	}
	
	#form_tambah input {
		margin-bottom: 10px;
	}
	
	#pesan_email, #pesan_nama, #pesan_password, #pesan_c_password, #pesan_username{
		width: 250px;
		margin-top: 2px;
		margin-bottom: 10px;
		border: 1px dott
	}
	
	
</style>
<script type='text/javascript' src='<?php echo base_url() . 'js/jquery-1.3.2.min.js'; ?>'></script>
<script type='text/javascript'>
	var error = 1; // nilai default untuk error 1
	
	function cek_email(){
		$("#pesan_email").hide();

		// ambil value email dari form
		var email = $("#email").val();

		// regex email
  	  	var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

		if(email != ""){
			if(filter.test(email) == false){ // jika email tidak valid
				$("#pesan_email").css('color','#fc5d32');
				$("#email").css('border-color','#fc5d32');
				$("#pesan_email").html('Maaf email anda tidak valid');
				$("#pesan_email").fadeIn(1000);

				error = 1;
				
			}else{
				// proses pengecekan email tersedia atau tidak.
				$.ajax({
					url: "<?php echo site_url() . '/member/cek_status_email'; ?>", //arahkan pada proses_tambah di controller member
					data: 'email='+email,
					type: "POST",
					success: function(msg){
						if(msg==1){
							$("#pesan_email").css("color","#fc5d32");
							$("#email").css("border-color","#fc5d32");
							$("#pesan_email").html("Maaf Email sudah digunakan.");

							error = 1;
						}else{
							$("#pesan_email").css("color","#59c113");
							$("#email").css("border-color","#59c113");
							$("#pesan_email").html("Email anda valid");
							
							error = 0;
						}

						$("#pesan_email").fadeIn(1000);
					}
				});
			}
		}
  	  	
	}

	function cek_nama(){
		$("#pesan_nama").hide(); // hilangkan dulu pesan nama
		
		var nama = $("#nama").val(); // ambil value dari nama

		if(nama==""){ // jika nama kosong
			$("#pesan_nama").css('color','#fc5d32');
			$("#nama").css('border-color','#fc5d32');
			$("#pesan_nama").html('Maaf nama tidak boleh kosong');
			$("#pesan_nama").fadeIn(1000);

			error = 1;
		}else{
			$("#pesan_nama").css("color","#59c113");
			$("#nama").css("border-color","#59c113");
			$("#pesan_nama").html("Hai.."+nama);
			$("#pesan_nama").fadeIn(1000);
			
			error = 0; // setting error 0;
		}
	}

	function cek_username(){
		$("#pesan_username").hide();

		var username = $("#username").val();

		if(username != ""){
			$.ajax({
				url: "<?php echo site_url() . '/member/cek_status_username'; ?>", //arahkan pada proses_tambah di controller member
				data: 'username='+username,
				type: "POST",
				success: function(msg){
					if(msg==1){
						$("#pesan_username").css("color","#fc5d32");
						$("#username").css("border-color","#fc5d32");
						$("#pesan_username").html("Maaf username sudah dipakai.");

						error = 1;
					}else{
						$("#pesan_username").css("color","#59c113");
						$("#username").css("border-color","#59c113");
						$("#pesan_username").html("Username anda valid");
						error = 0;
					}

					$("#pesan_username").fadeIn(1000);
				}
			});
		}		
		
	}

	function cek_password(){
		$("#pesan_password").hide();

		var password = $("#password").val();

		if(password==""){
			$("#pesan_password").css('color','#fc5d32');
			$("#password").css('border-color','#fc5d32');
			$("#pesan_password").html('Maaf password tidak boleh kosong');
			$("#pesan_password").fadeIn(1000);

			error = 1;
		}else{
			$("#pesan_password").css("color","#59c113");
			$("#password").css("border-color","#59c113");
			$("#pesan_password").html("Valid Password");
			$("#pesan_password").fadeIn(1000);
			
			error = 0;
		}
	}

	function cek_c_password(){
		$("#pesan_c_password").hide();

		var password = $("#password").val();
		var c_password = $("#c_password").val();

		if(c_password != ""){
			if(c_password != password){
				$("#pesan_c_password").css('color','#fc5d32');
				$("#c_password").css('border-color','#fc5d32');
				$("#pesan_c_password").html('Maaf Confirm password tidak valid');
				$("#pesan_c_password").fadeIn(1000);

				error = 1;
			}else{
				$("#pesan_c_password").css("color","#59c113");
				$("#c_password").css("border-color","#59c113");
				$("#pesan_c_password").html("Valid Confirm Password");
				$("#pesan_c_password").fadeIn(1000);
				
				error = 0;
			}
		}
		
	}

	function cek_kosong(){
		if($("#email").val()==""){
			$("#email").css("border-color","#fc5d32");
			error = 1;
		}else if($("#nama").val()==""){
			$("#nama").css("border-color","#fc5d32");
			error = 1;
		}else if($("#username").val()==""){
			$("#username").css("border-color","#fc5d32");
			error = 1;
		}else if($("#password").val()==""){
			$("#password").css("border-color","#fc5d32");
			error = 1;
		}else if($("#c_password").val()==""){
			$("#c_password").css("border-color","#fc5d32");
			error = 1;
		}
	}

	$(function(){

		// jika user menekan tombol F5 (refress)..
		$(window).load(function(){
			$("#email").val("");
			$("#nama").val("");
			$("#username").val("");
			$("#password").val("");
			$("#c_password").val("");

			$("#email").focus();
			
			error = 1;
		});


		$("#simpan").click(function(){
			
			// hilangkan kotak pesan
			$(".isi_pesan").fadeOut(100);

			// cek kekosongan data
			cek_kosong();
			
			if(error==1){
				$(".isi_pesan").css("color","#fc5d32");
				$(".isi_pesan").html("Data mesti terisi semua dan valid!!!");
				$(".isi_pesan").fadeIn(1000);
			}else{
				// ambil data dari form lalu simpan pada variable data_post
				
				var data_post = {
					email: $("#email").val(),
					nama: $("#nama").val(),
					username: $("#username").val(),
					password: $("#password").val()
				};
				
				// ajax mulai disini
				$.ajax({
					url: "<?php echo site_url() . '/member/proses_tambah'; ?>", //arahkan pada proses_tambah di controller nasabah
					data: data_post,
					type: "POST",
					success: function(msg){
						if(msg==1){
							$(".isi_pesan").css("color","#fc5d32");
							$(".isi_pesan").html("Proses Daftar Gagal...");
							$(".isi_pesan").fadeIn(1000);	
						}else{
							$(".isi_pesan").css("color","#59c113");
							$(".isi_pesan").html("Proses Daftar Berhasil...");
							$(".isi_pesan").fadeIn(1000);

							// hapus data							
							$("#email").val("");
							$("#nama").val("");
							$("#username").val("");
							$("#password").val("");
							$("#c_password").val("");
							$("#email").focus();

						}
						
					}
				});
			}
			
			return false;
			
		});
	});
	
</script>
</head>
<body>
	<div id='container'>
		
		<div id='pesan'>
			<div class='isi_pesan'>Form Pendaftaran Member Baru.</div>
		</div>
		
		<div id='form_tambah'>
			<?php echo form_open('nasabah/proses_tambah'); ?>
			<label for='email'>Email</label>
				<input type='text' name='email' id='email' onkeyup='cek_email()'/>
					<span id='pesan_email'>Silahkan mengisi email</span>
			
			<label for='nama'>Nama</label>
				<input type='text' name='nama' id='nama' onblur='cek_nama()'/>
					<span id='pesan_nama'>Silahkan mengisi nama</span>

			<label for='username'>Username</label>
				<input type='text' name='username' id='username' onkeyup='cek_username()'/>
					<span id='pesan_username'>Silahkan mengisi username</span>

				
			<label for='password'>Password</label>
				<input type='password' name='password' id='password' onblur='cek_password()' />
					<span id='pesan_password'>Silahkan mengisi password</span>
					
			<label for='c_password'>Confirm Password</label>
				<input type='password' name='c_password' id='c_password' onkeyup='cek_c_password()' />
					<span id='pesan_c_password'>Silahkan mengulangi isi password</span>
			
			
			<br />
			<input type='submit' name='simpan' value='Simpan' id='simpan' />
			
			<?php echo form_close(); ?>
		</div>
	</div>
</body>
</html>

Logika dasarnya adalah, misalnya saat email kita ketikan pada form ( kondisi event pada form adalah onkeyup ) lalu saat itulah kita lakukan pengecekan email tersebut baik dari valid atau tidaknya dan pengecekan apakah email yang diketikan user sudah ada belum pada database. Hal yang sama saat kita melakukan pengecekan username.

Berikut tampilannya :

Pengecekan email

Pengecekan username

Hasil akhir

Seperti itulah kurang lebihnya, maaf terlalu kepanjangan..moga ada manfaatnya…mohon koreksinya kalu ada yang kurang…

Yu mari bagi2 ilmu…

[ download code ] – [ database ]

About these ads

23 thoughts on “Pengecekan Username dan Email dengan Ajax Jquery pada Codeigniter

  1. udah saya coba dan bisa mas. tapi ada masalah untuk pengecekan dengan ti pe data varchar(kecuali email). cek nya gak mua mas. mohon pencerahannya.

    *untuk int dan email bisa mas.

  2. @azmi :
    maksud pengecekan dengan tipe data varchar seperti apa ya ???
    apa seperti varchar yg dimasukan mesti lebih dari 6 huruf ??
    ato setiap varchar mesti terdapat huruf dan angka seperti pada password…??

  3. Waduuh, ga bisa di donlod napa ya? bisa tolong diupload di mediafire aja mas??
    Tanya sekalian, itu di controllernya echo “2” tapi di scriptnya hanya ada “0” dan “1” ?!?

  4. @eko budi :
    maaf mas..sy cari file nya ndak ketemu,,entah ngumpet dimana..
    trus mengenai yg mas tanyakan itu,
    pada baris 17-29 di controller member, fungsi itu untuk mengecek ada atau tidaknya email yang di input sama user. kenapa 2 tapi di sisi client cuma ada 0 dan 1 ?

    2 dan 1 pada baris 24 dan 26 di controller member itu hanya mengecek jumlah value queri di model saja, kalu tidak sama dengan 0 (!=0) maka dipastikan email sudah ada pada database, dan value 2 dan 1 itu hanya identifikasi kalau 1 berarti email sudah ada pada database dan kalu 2 maka kebalikannya, email belum ada pada database.

    nah di sisi client nya, si JS nangkep value yg dikeluarkan dari fungsi cek_status_email() dimana fungsi itu ngereturn 1 atau 2. hasil return ditangkep sm variable JS “msg”. dan dikondisikan kalu “msg” itu sama dengan 1 berarti email belum ada pada database, begitu sebaliknya. Lalu 0 dan 1 itu hanya identifikasi error pada sisi client.

    moga bisa ngebantu…maaf penulisan source code yg kurang informatif..:)

  5. lagi mau belajar, tapi source codenya nggak bisa di download lagi. Mau dong di share? soalnya copy paste kok nggak jalan ya. ditunggu ya

  6. I am sure this article has touched all the internet viewers, its really
    really good article on building up new web site.

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s