Ilmu Dasar PHP, JQuery, HTML, AJAX Dll: Check data ajax + jquery

Mungkin kita sering bertemu dengan registry form saat ingin bergabung forum atau yang lainnya. nah sekarang gw akan memberikan sedikit contoh membuat validasi cek sederhana mengunakan ajax tapi di modif ke jquery karna klo ajax murni pegel ane nulisnya buayak bener.. bisa di bilang jamu campur aja juga boleh..hehehehe langsung aja ya gan ke TKP..xixixixixi

sebelum mulai kita buat database dan table nya dulu ya...
create database test;
use test;
create table anggota;

create table anggota(id anggota int(5) auto_increament,usernmae varchar(20), primary key(id_anggota));
insert into anggota(id_anggota,username) values ('Rudi');
insert into anggota(id_anggota,username) values ('Kurniawan');
insert into anggota(id_anggota,username) values ('Awan');

selesai bikin table dan database nya langjut ke script php aja ya.. ok langsung ke tkp.

cek_username.php
<html>
<head>
<script src="jquery-1.4.js"></script> 
    <script>
$(document).readry(function (){
$('#username').change(function(){
   // tampilkan animasi loading saat pengecekan ke database

   $('#pesan').html("<img src='loading.gif'/>checking..." );// ini cari di mbah google ya loading.gif
               var username = $("#username").val();

               $.ajax({
type: "POST",
    url: "checking.php",
data: "username=" +username,
success: function(data){
if(data==0){
$("#pesan").html('<img src="tick.png">Username belum digunakan');
                                              // tick.png cari di mbah google juga ya... hehehehehe

                                         $('#username').css('border','3px #090 solid');
                                    }else{
$('#pesan').html('<img src="cross.png">Username sudah dipakai');
// cross.png cari di mbah juga ya... hehehehehe

   $('#username').css('border','3px #C33 solid');
                                    }
                        }
               });
                });
          });
    </script>
</head>
<body>
<p>Username : <br/><input type="text" id="username"/>
    <span id="pesan"></span></p>
<p>Password : <br/><input type="text" id="password"/></p>
</body>
</html>

selesain file pertama oh iya jangan lupa ya semua file .png atau .gif di dalam satu folder ya jangan misah entar nga muncul loh... ok langsung ke proses pengecekan berangkat ke TKP

checking.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");

$sql = mysql_query("select * from anggota where username='".$_POST['username']."'");

$ketemu = mysql_num_rows($sql);

echo $ketemu;
?>

selesai deh sekarang tingal di test bisa nga klo ada yang error jangan malu" komen ya saya siap membantu.. hehehe semoga bermanfaat gan...

Ilmu Dasar PHP, JQuery, HTML, AJAX Dll

Selasa, 18 September 2012

Check data ajax + jquery

Tidak ada komentar:

Posting Komentar