Blog Request tutorial? klik disini!

  • Menambah Data Dengan JQuery Ajax Dan PHP MySQL

    Ditulis oleh: Arya Febiyan
    5872 kali dibaca
    18 Jul / 2014 23:10

    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 :

    Menambah Data Dengan jQuery Ajax Dan PHP MySQL

    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 :

    Menambah Data Dengan jQuery Ajax Dan PHP MySQL






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155