Mungkin sudah gak asing lagi ya tentang sistem mengecek ketersediaan data disebuah database hehe..tapi ga apa2 lah pengen berbagi sedikit mengenai sistem ini, kebetulan kemarin ada sedikit pekerjaan yang mengharuskan menggunakan sistem ini dan alhamdulillah sekarang dapat memposting pada blog ini.

Sebetulnya ada banyak sekali library jquery yang mungkin lebih canggih lagi dari sistem yang akan kita buat sekarang, tapi pada dasarnya sama saja dalam penggunaannya, yakni ketika kita mengecek suatu data maka data tersebut di proses dengan memanfaatkan ajax :). Baiklah langsung aja ya.. Semoga bermanfaat :D

Database

CREATE TABLE `users` (
          `id` int(11) NOT NULL AUTO_INCREMENT,
          `username` varchar(32) NOT NULL,
          `password` varchar(32) NOT NULL,
          PRIMARY KEY (`id`)
        );

selanjutnya isi tabel nya

INSERT INTO `users` (`id`, `username`, `password`) VALUES
(1, 'budi', 'budi'),
(2, 'rudi', 'rudi'),
(3, 'tian', 'tian')

Langkah Pertama

Buatlah sebuah file index.html yang berisi dua input text login dan password. Setelah itu buatlah tag anchor yang nantinya digunakan untuk mengecek username yang akan kita ketik. Jika sudah maka tampilan ketersediaan username akan ditampilkan pada tag span yang ada pada HTMLnya. Berikut adalah sintaks HTML nya

<html>
	<head>
		<title>Mengecek Username</title>
		<style>
			body {
				font-family: Arial;
			}
			input, textarea {
				vertical-align: top;
			}
			fieldset {
				width: 400px;
			}
			label {
				float: left;
				width: 150px;
			}
			#error {
				font-weight: bold;
				color: #ff0000;
			}
		</style>
	</head>
	<body>
		<fieldset>
			<legend><strong>Tambahkan Username dan Password</strong></legend>
			<form action="" method="POST" id="loginForm">
				<p>
					<label>Username</label>
					<input type="text" name="loginName" id="loginName" />
					<a href="#" id="check">Check</a>
					<span id="status" style="float: right;"></span>
				</p>
				<p>
					<label>Password</label>
					<input type="password" name="password" />
				</p>
				<p>
					<span id="error"></span>
				</p>
				<p>
					<input type="submit" value="Save" name="save" id="save" />
				</p>
			</form>
		</fieldset>
	</body>
</html>

Jika kita jalankan sintaks diatas maka akan tampil seperti gambar dibawah ini

cek_user1

Langkah Kedua

Langkah selanjutnya adalah menambahkan beberapa fungsi jquery kedalam head pada file HTML diatas dengan ditambahkan sintaks berikut ini..

<script src="jquery.js"></script>
		<script>
			$(document).ready(function (){

				var checked = false;

				$('#check').click(function (){

					$('#error').empty();
					var inputValue = $('#loginName').val();

					if (jQuery.trim(inputValue) == ''){
						return false;
					}
					$.post(
						'proses.php',
						{ username : inputValue },
						function (data)
						{
							if (data)
							{
								checked = true;
								$('#status').html('Username Tersedia');
							}
							else
							{
								checked = false;
								$('#status').html('Username sudah dipakai');
								return false;
							}
						}
					);
				});
				$('#loginForm').submit(function (){

					if (checked == false)
					{
						$('#error').html('Silahkan Cek Username');
						return false;
					}
					else
					{
						return false;
					}
				});
				$('#loginName').focus(function (){
					checked == false;
				});
			});
		</script>

Dapat dilihat bahwa sintaks diatas mengandung beberapa event jQuery yang berfungsi ketika kita mengklik check pada elemen ID check akan mengirim data berupa ajax request kepada file proses.php yang akan kita buat selanjutnya yang mengembalikan nilai true atau false tergantung kepada username yang kita cek. Oke supaya lebih jelas kita lanjutkan dulu ke langkah selanjutnya yaitu pembuatan file proses.php.. Oke cekidot

Langkah Ketiga

Langkah selanjutnya yaitu membuat file proses.php yang mana akan berhubungan dengan database nanti, langsung aja ke sintaksnya ya..

<?php
mysql_connect("localhost","root","") or die("Koneksi gagal");
mysql_select_db("") or die("Database tidak bisa dibuka");

	$sql = mysql_query("SELECT username as user FROM users WHERE username = '".$_POST['username']."' LIMIT 1");

	$hitung = mysql_num_rows($sql);

	if ($sql)
	{
		if ($hitung > 0)
		{
			echo false;
		}
		else
		{
			echo true;
		}
	}
	else
	{
		echo false;
	}
?>

Jika sudah maka silahkan jalankan file index.html tadi yang telah kita buat diawal. Setelah itu ketika username didalam input text nya. Ketika kamu mengklik pada pada anchor Check anda akan menerima pesan seperti dibawah ini. Ketika kamu mengetikan username yang sudah tersedia didalam table database maka akan tampil seperti gambar dibawah ini..

cek_user2 ⤧  Next post Membuat CMS Blog PHP dan MySQL Part-1 ⤧  Previous post Membuat Responsive Web Part 1 – Hello World