Menambah Data Dengan jQuery Ajax Dan PHP MySQL

Dalam menampilkan data dari database Anda bisa menampilkannya dengan menggunakan ajax. Baca juga artikel blog Dasar Asynchronous JavaScript And XML. Buatlah nama database dengan nama dumetschool_jqueryajaxphpmysql. Buatlah nama tabel dengan nama student. Berikut adalah nama field-nya id, fullname, email, password, created.

Buatlah baris program html sebagai berikut :

<table>
    <tr>
        <td>Fullname</td>
        <td>:</td>
        <td><input type="text" id="fullname" /></td>
    </tr>
    <tr>
        <td>Email</td>
        <td>:</td>
        <td><input type="text" id="email" /></td>
    </tr>
    <tr>
        <td>Password</td>
        <td>:</td>
        <td><input type="password" id="password" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>
            <input type="submit" id="btn" value="Create" />
            <span id="cancel"></span>
        </td>
    </tr>
</table>

Baris program diatas yang wajib Anda perhatikan adalah attribute id pada setiap input type. Berikut hasil outputnya :

Jika sudah buatlah koneksi ke database server mysql dan memilih nama database serta menampilkan semua data dari tabel student dengan record-nya di sort berdasarkan kolom id descending.

<?php
$connection = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("dumetschool_jqueryajaxphpmysql", $connection) or die(mysql_error());
$sql = mysql_query("SELECT * FROM student ORDER BY id DESC;") or die(mysql_error());
?>

Jika sudah tambahkan baris program dibawah ini untuk menampilkan record dalam perulangan while dengan kondisi di cek terlebih dahulu apakah data lebih besar dari nol.

<table>
    <tr>
        <th>FULLNAME</th>
        <th>EMAIL</th>
        <th>PASSWORD</th>
        <th>CREATED</th>
    </tr>
    <tbody id="output"></tbody>
    <?php if (mysql_num_rows($sql) > 0) { ?>
        <?php while($row = mysql_fetch_array($sql)) { ?>
            <tr id="tr<?php echo $row["id"] ?>">
                <td><?php echo $row["fullname"] ?></td>
                <td><?php echo $row["email"] ?></td>
                <td><?php echo $row["password"] ?></td>
                <td><?php echo $row["created"] ?></td>
            </tr>
        <?php } ?>
    <?php } ?>
</table>

Berikut adalah baris program jquery ajax-nya :

<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            $.ajax({
                type: "POST",
                url: "register.php",
                data: {
                    f: $("#fullname").val(),
                    e: $("#email").val(),
                    p: $("#password").val()
                }
            })
            .done(function(msg) {
                $("input[type=text], input[type=password]").val("");
                $("#output").after(msg).hide().appendTo('#output').fadeTo(2000, 1);
            });
        });
        
        $(document).ready(function(){
            $("#btn_cancel").click(function(){
                $("input[type=text], input[type=password]").val("");
                $("#cancel").html('');
            });
        });
    });
</script>

Ingin kursus jQuery, klik disini. Buatlah file register.php, berikut adalah baris programnya :

<?php

if (isset($_POST["f"])) {
    $connection = mysql_connect("localhost","root","")
    or die(mysql_error());
    
    mysql_select_db("dumetschool_jqueryajaxphpmysql", $connection)
    or die(mysql_error());
    
    $fullname = mysql_real_escape_string(strip_tags(ucwords($_POST["f"])));
    $email = mysql_real_escape_string(strip_tags(strtolower($_POST["e"])));
    $password = mysql_real_escape_string(strip_tags(trim($_POST["p"])));
    
    date_default_timezone_set("Asia/Jakarta");
    $created = date("Y-m-d H:i:s");
    
    mysql_query("
    INSERT INTO student(fullname,email,password,created)
    VALUES('$fullname','$email','$password','$created');")
    or die(mysql_error());
    
    $id = mysql_insert_id();
    
    $sql = mysql_query("SELECT * FROM student WHERE id='$id';")
    or die(mysql_error());
    
    $row = mysql_fetch_array($sql);
    ?>
    <tr id="tr<?php echo $row["id"] ?>">
        <td><?php echo $row["fullname"] ?></td>
        <td><?php echo $row["email"] ?></td>
        <td><?php echo $row["password"] ?></td>
        <td><?php echo $row["created"] ?></td>
    </tr>
    <?php
} else {
    echo "Failed! Access Denied!";
}

Jika sudah berikut adalah hasilnya :