Membuat Check Available Data Dari Table Secara Realtime Dengan Ajax

Pada tutorial kali ini saya akan memberikan materi tutorial tentang PHP dan AJAX yaitu Membuat Check Available Data Dari Table Secara Realtime Dengan Ajax.

Pengertian dari check available ini yang saya maksud di sini adalah kita memiliki dataada table misalnya table user yang berisikan username, nah lalu saya memiliki sebuah inputan untuk mengecek ke database apakah username yang saya inputkan ada atau tidak pada database tanpa harus submit atau refresh page. Sampai di sini paham ya ? oke kita lanjut kalau paham

oke kita mulai saja berikut langkah-langkahnya :

buat table bernama user yang berisikan data dan struktrur seperti berikut :

buat file index.php dan paste kan code berikut :

<style>
body{width:50%;}
#frmCheckUsername {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.demoInputBox{padding:7px; border:#F0F0F0 1px solid; border-radius:4px;}
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function checkAvailability() {
	$("#loaderIcon").show();
	jQuery.ajax({
	url: "check_availability.php",
	data:'username='+$("#username").val(),
	type: "POST",
	success:function(data){
		$("#user-availability-status").html(data);
		$("#loaderIcon").hide();
	},
	error:function (){}
	});
}
</script>

<div id="frmCheckUsername">
  <label>Check Username:</label>
  <input name="username" type="text" id="username" class="demoInputBox" onBlur="checkAvailability()"><span id="user-availability-status"></span>    
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>

<style>

body{width:50%;}

#frmCheckUsername {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}

.demoInputBox{padding:7px; border:#F0F0F0 1px solid; border-radius:4px;}

.status-available{color:#2FC332;}

.status-not-available{color:#D60202;}

</style>

function checkAvailability() {

$("#loaderIcon").show();

jQuery.ajax({

url: "check_availability.php",

data:'username='+$("#username").val(),

type: "POST",

success:function(data){

$("#user-availability-status").html(data);

$("#loaderIcon").hide();

error:function (){}

});

}

</script>

<label>Check Username:</label>

</div>

Lalu bikin file koneksi yang bernama dbcontroller.php:

<?php
class DBController {
	private $host = "localhost";
	private $user = "root";
	private $password = "";
	private $database = "task_latihan";
	
	function __construct() {
		$conn = $this->connectDB();
		if(!empty($conn)) {
			$this->selectDB($conn);
		}
	}
	
	function connectDB() {
		$conn = mysql_connect($this->host,$this->user,$this->password);
		return $conn;
	}
	
	function selectDB($conn) {
		mysql_select_db($this->database,$conn);
	}
	
	function runQuery($query) {
		$result = mysql_query($query);
		while($row=mysql_fetch_assoc($result)) {
			$resultset[] = $row;
		}		
		if(!empty($resultset))
			return $resultset;
	}
	
	function numRows($query) {
		$result  = mysql_query($query);
		$rowcount = mysql_num_rows($result);
		return $rowcount;	
	}
}
?>

<?php

class DBController {

private $host = "localhost";

private $user = "root";

private $password = "";

private $database = "task_latihan";

function __construct() {

$conn = $this->connectDB();

if(!empty($conn)) {

$this->selectDB($conn);

}

function connectDB() {

$conn = mysql_connect($this->host,$this->user,$this->password);

return $conn;

}

function selectDB($conn) {

mysql_select_db($this->database,$conn);

}

function runQuery($query) {

$result = mysql_query($query);

while($row=mysql_fetch_assoc($result)) {

$resultset[] = $row;

}

if(!empty($resultset))

return $resultset;

}

function numRows($query) {

$result = mysql_query($query);

$rowcount = mysql_num_rows($result);

return $rowcount;

}

lalu buat file untuk pengecekanya bernama : check_availability.php

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();


if(!empty($_POST["username"])) {
  $result = mysql_query("SELECT count(*) FROM user WHERE username='" . $_POST["username"] . "'");
  $row = mysql_fetch_row($result);
  $user_count = $row[0];
  if($user_count>0) {
      echo "<span class='status-available'> Username Available.</span>";
  }else{
      echo "<span class='status-not-available'> Username Not Available.</span>";
  }
}
?>

<?php

require_once("dbcontroller.php");

$db_handle = new DBController();

if(!empty($_POST["username"])) {

$result = mysql_query("SELECT count(*) FROM user WHERE username='" . $_POST["username"] . "'");

$row = mysql_fetch_row($result);

$user_count = $row[0];

if($user_count>0) {

echo "<span class='status-available'> Username Available.</span>";

}else{

echo "<span class='status-not-available'> Username Not Available.</span>";

}

setelah selesai coba di jalankan file index.php nya maka tampilanya akan seperti ini jika di inputkan username yang tidak ada di database maka akan muncul alert not available :

namun jika kita memasukan username sesua maka akan tampil alert available seperti ini :

oke itu saja teman-teman untuk artikel tentang Membuat Check Available Data Dari Table Secara Realtime Dengan Ajax.

Membuat Check Available Data Dari Table Secara Realtime Dengan Ajax

Blogroll