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"></script>
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("<img src='loader.gif' /> checking ...");    
var username  = $("#username").val();
$.ajax({
type:"POST",
url:"cek_user.php",    
data: "username=" + username,
success: function(data){
if(data==0){
$("#pesan").html('<img src="tick.png"> Username oke :)');
$('#username').css('border', '3px #090 solid');
}
else{
$("#pesan").html('<img src="cross.png">Coba yang lain');
$('#username').css('border', '3px #C33 solid');
}
}
});
})
});
</script>
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.
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)