Cek username menggunakan Ajax ala google

cek-username-ala-google

Di pagi hari yang indah, ada seorang kawan lama bertanya tentang bagaimana cara membuat cek username ala google, jadi teringat juga di salah satu group facebook ada yang menanyakan serupa. Agar menjadi manfaat untuk keduanya, kami mencoba share tutorial singkat ini.

Study Kasusnya :

  1. User mendaftar dengan memasukkan username
  2. Jika jumlah karakter kurang dari 3 maka akan muncul pesan “Jumlah karakter kurang dari 3”
  3. Jika karakter lebih dari 3, maka dilakukan pengecekan ke database, jika tersedia, pesan tersedia akan muncul, jika tidak tersedia, maka pesan tidak tersedia akan muncul
  4. Sebagai pembelajaran menggunakan php native sederhana.
  5. Untuk pengiriman data dari frontend ke backend menggunakan $.post

Tutorial lengkapnya sebagai berikut :

Tahap 1 : Membuat form

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Tutorial jQuery</title>

		<!-- Bootstrap CSS -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet">

		<!-- Custom styles -->
		<link href="assets/css/styles.css" rel="stylesheet">

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Header -->

<nav class="navbar navbar-default navbar-top-fixed" role="navigation">

<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">Kinta Mahadji</a>
					</div>

<div class="collapse navbar-collapse navbar-ex1-collapse">						

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Signin</a></li>

						</ul>

					</div>

<!-- /.navbar-collapse -->
		</nav>

		<!-- container -->

<div class="container">

<h3 class="header-title text-center">Mendaftarkan akun baru</h3>

<div class="row">

				<!-- content kiri -->

<div class="col-xs-6">

<strong>Satu akun untuk semua</strong>

Aplikasi sederhana yang diperuntukan khusus untuk tutorial ini, silahkan dikembangakan sesuai dengan kebutuhan, jika mengalami kesulitan bisa share di facebook : php indonesia, happy coding. Salam, Kinta Mahadji, Enginer

				</div>

				<!-- content kanan -->

<div class="col-xs-6">

<div class="well well-lg">

<form action="" method="POST" class="form-horizontal" role="form">

<div class="form-group">
								<label for="username">Username</label>
								<input type="text" name="username" class="form-control" placeholder="masukkan username" id="check_username">

							</div>

<div class="form-group">
								<label for="password">Password</label>
								<input type="text" class="form-control" placeholder="masukkan password">
							</div>

<div class="form-group">
								<label for="password">Ulangi Password</label>
								<input type="text" class="form-control" placeholder="masukkan password">
							</div>

<div class="form-group">

<hr>

								<button type="submit" class="btn btn-primary pull-right">Submit</button>
							</div>

						</form>

					</div>

				</div>

			</div>

		</div>

		<!-- end container -->

		<!-- footer -->

<div class="container-fluid">

<hr>

			copyright &copy; Kinta Mahadji - 2015
		</div>

		<!-- end footer -->

		<!-- jQuery -->
		<script src="assets/js/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="assets/js/bootstrap.min.js"></script>
	</body>
</html>

Tahap 2 : Membuat script php

<?php   // Fungsi untuk mengecek username // koneksi ke mysql mysql_connect('localhost', 'root', ''); // koneksi ke database mysql_select_db('tutorial_kintamahadji'); // mendapatkan username $username = mysql_real_escape_string($_POST['username']); // query untuk mengecek username $result = mysql_query('select username from tbl_user where username = "'. $username .'"'); // jika username lebih dari 0, maka return available if(mysql_num_rows($result) > 0){

	echo 0;

// echo 1, menunjukan bahwa username tersedia
}else{

	echo 1;
}

?>

Script ini digunakan untuk mengecek apakah username tersedia atau tidak, untuk callback menggunakan output dengan echo 0 & 1

Copy-paste script berikut dan beri nama check_username.php, agar script berjalan dengan baik, pastikan mysql_connect sudah sesuai dengan settingan database kamu.

Saya juga menyertakan contoh databasenya, ada di dalam folder database : tutorial_kintamahadji.sql

Tahap 3 : Membuat javascript

		<script>
		$(document).ready(function() {

			// jumlah karakter minimal
			var jum_karakter_minimal = 3;

			// pesan error jika username < 3
			var karakter_minimal_error = "Karakter kurang dari 3";

			// pesan cek username
			var pesan_cek = 'cek username ...';

			// variabel username
			var check_username = $('#check_username');

			// variabel result hasil cek
			var check_username_result = $('.check_username_result')

			// menggunakan onkeyup untuk mendeteksi setiap inputan
			check_username.on('keyup', function(){

				if(check_username.val().length <= jum_karakter_minimal) {

					check_username_result.html(karakter_minimal_error);

				} else {

					check_username_result.html(pesan_cek);

					// check username
					cek_username();
				}

			});

			// fungsi untuk mengecek username
			function cek_username() {
				// mendapatkan username
				var username = $('input[name="username"]').val();

				// mengirimkan username ke check_username.php
				$.post("check_username.php", { username: username }, function(result) {

					// jika hasilnya 1, tampilkan pesan tersedia
					if(result == 1) {
						check_username_result.html('<strong>'+username+'</strong> tersedia');

					// jika hasilnya 0, tampilkan pesan user tidak tersedia
					} else {
						check_username_result.html('<strong>'+username+'</strong> tidak tersedia');
					}
				});
			}

		});

		</script>

Tahap 4 : Hasil Testing

Jika username tersedia

Screen Shot 2015-08-06 at 16.21.22

Jika username tidak tersedia

Screen Shot 2015-08-06 at 16.21.09

Download script lengkap di sini :

jquery cek username ala google

Jangan lupa beri komentar ya 🙂

About Author:

Leave A Comment

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