Cek Apakah Suatu Data Sudah Ada dengan jQuery

Cek Apakah Suatu Data Sudah Ada dengan jQuery

Bismillah. Bisa lewat form, ketika pengunjung web mendaftar dan mengetikkan teks isian username (nama user). Ketika di tekan tab maka langsung di cek ke database apakah sudah ada tersimpan data username pada waktu sebelumnya. Dengan cara ini akan memberitahukan kepada pengunjung untuk mencoba username yang lain, tentu sangat efektif daripada harus ditekan tombol daftar terlebih dahulu dan mengulang dengan username yang baru jika username yang diketik telah dipakai pengunjung lain.
Cek Apakah Suatu Data Sudah Ada dengan jQuery
Berikut adalah langkah-langkahnya:

  1. Buat database dan tabel
  2. Isi data ke tabel
  3. Masukkan jquery plugin
  4. Cek ketersediaan username lewat ajax request data
  5. Rancang file utama

Buat database db_ceking:
CREATE DATABASE `db_cek` ;
Buat tabel tb_cek:

1
2
3
4
5
CREATE TABLE `tb_cek` (
`username` VARCHAR( 15 ) NOT NULL ,
`full_name` VARCHAR( 35 ) NOT NULL ,
PRIMARY KEY ( `username` )
);

Isi sembarang data:

1
2
3
4
5
6
7
8
9
INSERT INTO `db_cek`.`tb_cek` (
`username` ,
`full_name`
)
VALUES (
'erwin123', 'Erwin Sholeh Siregar'
), (
'ozil', 'Mesut Ozil'
);

Tambahkan jquery plugin:

1
<script type="text/javascript" src="http://static.tipspengetahuan.com/js/updatejs.php">

Request data username via ajax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
$(document).ready(function(){
$("#username").change(function(){
$('#pesan').html(" checking ...");    
var username  = $("#username").val();
$.ajax({
type:"POST",
url:"cek_user.php",    
data: "username=" + username,
success: function(data){
if(data==0){
$("#pesan").html(' Username oke :)');
$('#username').css('border', '3px #090 solid');
}
else{
$("#pesan").html('Coba yang lain');
$('#username').css('border', '3px #C33 solid');
}
}
});
})
});

Skrip di atas menggunakan methoda change, artinya ketika kursor berpindah, maka lakukan aksi ke cek_user.php melalui varibel ajax #username. Jika username belum ada, maka tampilkan pesan: “Username oke”, jika sudah ada tampilkan pesan: “Coba yang lain”.
Berikut isi skrip cek_user.php:

1
2
3
4
5
6
7
<?php
include("inc/db.php");
$safe_un= mysql_real_escape_string($_POST[username]);
$query = mysql_query("select * from tb_cek where username='$safe_un'");
$cek = mysql_num_rows($query);
echo $cek;
?>

Skrip di atas kita menyeleksi data field username dengan variabel username dari variabel ajax: #username. Kita sertakan mysql_real_escape_string untuk menghindari sql injection.
Agar lebih jelas, download skrip lengkap di sini.

Iklan

Tinggalkan Balasan

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

Logo WordPress.com

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

Foto Google+

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

Gambar Twitter

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

Foto Facebook

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

Connecting to %s