Thursday, February 28, 2013

Tutorial AJAX : Cek Username secara Run Time

Halo, hari ini gw akan sedikit menulis mengenai tutorial ajax. Jadi ceritanya adalah bahwa beberapa waktu ini gw mendapatkan project-project kantor yang berhubungan dengan ajax. Agak rempong juga seh karena kudu belajar lagi. Tetapi, mw gimana lagi, namanya juga kerjaan, ya kudu bisa lah hehe. So, kali ini gw akan memberikan tutorial cara memeriksa username secara real time tanpa harus mengirim username ke server terlebih dahulu. Jadi lebih hemat bandwith bro hehe..

Pertama sudah pasti harus buat dulu tabelnya. Kita bikin tabel yang simpel aja, yang muat username, password dan juga id. Berikut command sql untuk membuat tabel tersebut.
CREATE TABLE IF NOT EXISTS `users` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `priviledges_id` varchar(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
Tabel diatas hanya sekedar contoh, yang paling penting ada field usernamenya. Nah tabel diatas akan gw isi seperti ini.
INSERT INTO `users` (`id`, `username`, `password`, `priviledges_id`) VALUES
(1, 'admin', 'cdf3fb64ec8851b5d7bc8056a8d71798', '1'),
(5, 'Viking', 'b9b5169b5f936044cf1ae8c01b9b5d8e', '2'),
(6, 'Yofie', '8d2c18a13302e772f0be96288fa41ea2', '2'),
(7, 'Fauzan', '40cdf041f03172245b12ae442e0f813f', '2');

Nah setelah ini mari kita mulai masuk ke kodingnya. Berikut kodingnya...
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Username</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#username').change(function(e){
            //tampilkan animasi loading saat pengecekan ke database
            $('#pesan').html("<img src='loading.gif' />checking...");
            var username = $('#username').val();
            $.ajax({
                type:"POST",
                url:"check.php",
                data:"username="+username,
                success: function(data){
                    if(data == 0){
                        $('#pesan').html("<img src='accepted.gif' /><span style='color:green;margin-left:10px;'>Username belum digunakan</span>");
                    } else {
                        $('#pesan').html("<img src='rejected.png' /><span style='color:red;margin-left:10px;'>Username sudah dipakai</span>");
                    }
                }
            });
        });
    });
</script>
</head>

<body>
    <table>
        <form>
            <tr>
                <td><label for="username">Username</label></td>
                <td>:</td>
                <td><input type="text" size="20" name="username" id="username"/></td>
                <td><span id="pesan"></span></td>
            </tr>
            <tr>
                <td><label for="password">Password</label></td>
                <td>:</td>
                <td><input type="password" size="20" name="password" id="password"/></td>
            </tr>
            <td><input type="submit" value="submit" name="submit" /></td>
        </form>
    </table>
</body>
</html>
Koding diatas merupakan koding html. Cara kerjanya adalah ketika user mengisi username maka secara otomatis akan dikirim data melalui ajax untuk menembak langsung ke database. Jadi ajaxnya akan memeriksa setiap inputan yang dimasukkan oleh user dan akan dikirim secara otomatis via ajax. Nah untuk fungsi checking sendirinya adalah sebagai berikut.
<?php
    mysql_connect("localhost", "root", ""); //connect dengan mysql
    mysql_select_db("projecte"); //ini nama database
  
    $username = $_POST['username'];
  
    $sql = mysql_query("select username from users where username='$username'");
    $find = mysql_num_rows($sql);
  
    echo $find;
?>
Nah, koding php diatas akan menangkap username yang di post via ajax dan mengecek di database. Jika terdapat data maka nilainya adalah 1 dan jika tidak ada maka nilainya 0. Demikian tutorial saya hari ini, semoga bermanfaat buat kalian semua. Salam damai dan super.

0 comments: