Jumat, 08 Maret 2013

Update Data Langsung Dengan Ajax

Alhamdulillah bisa posting lagi di blog. Streesss banget sama skripsi (curhat sedikit hehehe).
Kali ini postingannya yang sederhana-sederhana aja yee, namanya juga blog "dasar", seperti moto dari blog ini "semua bearawal dari dasar :)".
Oke langsung aja, bagi yang males klik tombol submit untuk setiap update data atau bagi yang ingin serba cepat, cara ini sangat efektif. Dengan menggunakan ajax tanpa harus mereload halaman data yang diproses disisi server tidak terlihat, dengan begitu pemrosesan data jadi lebih cepat, karena tidak mereload halaman. Pertama buat database dengan nama test dan juga tabel beserta isi datanya. Tabel dan field-nya yang sederhana aja seperti dibawah ini

CREATE TABLE IF NOT EXISTS `orang` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `first_name` varchar(40) NOT NULL,
  `last_name` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

INSERT INTO `orang` (`id`, `first_name`, `last_name`) VALUES
(1, 'Willy', 'Kristianto'),
(2, 'Roronoa', 'Zoro'),
(3, 'Nico', 'Robin'),
(4, 'Hashirama', 'Senju'),
(5, 'Madara', 'Uchiha');


Setelah itu buat file db.php yang di dalamnya berisi konfigurasi untuk konek ke database. Berikut adalah script-nya.

<?php
$hostname = "localhost";
$user = "root";
$password = "";
$database = "test";
$bd = mysql_connect($hostname, $user, $password) or die ("Opps some thing went wrong");
mysql_select_db($database, $bd) or die ("Opps some thing went wrong");
?>



Lanjut ke pembuatan script list-data.php, script ini berisi list data pada tabel orang.

<?php
include('db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Live Table Edit</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".edit_tr").click(function() {
                    var ID=$(this).attr('id');
                    $("#first_"+ID).hide();
                    $("#last_"+ID).hide();
                    $("#first_input_"+ID).show();
                    $("#last_input_"+ID).show();
                }).change(function() {
                    var ID=$(this).attr('id');
                    var first=$("#first_input_"+ID).val();
                    var last=$("#last_input_"+ID).val();
                    var dataString = 'id='+ ID +'&first_name='+first+'&last_name='+last;
                    $("#first_"+ID).html('<img src="load.gif" />');

                    if(first.length && last.length>0) {
                        $.ajax({
                            type: "POST",
                            url: "table_edit_ajax.php",
                            data: dataString,
                            cache: false,
                            success: function(html) {
                                $("#first_"+ID).html(first);
                                $("#last_"+ID).html(last);
                            }
                        });
                    }
                    else {
                        alert('Enter something.');
                    }
                });

                $(".editbox").mouseup(function() {
                    return false
                });

                $(document).mouseup(function() {
                    $(".editbox").hide();
                    $(".text").show();
                });
            });
        </script>
        <style>
            body {
                font-family:Arial, Helvetica, sans-serif;
                font-size:14px;
            }
            .editbox {
                display:none
            }
            td {
                padding:7px;
            }
            .editbox {
                font-size:14px;
                width:270px;
                background-color:#ffffcc;
                border:solid 1px #000;
                padding:4px;
            }
            .edit_tr:hover {
                background:url(edit.png) right no-repeat #80C8E5;
                cursor:pointer;
            }
            th {
                font-weight:bold;
                text-align:left;
                padding:4px;
            }
            .head {
                background-color:#333;
                color:#FFFFFF
            }
        </style>
    </head>

    <body bgcolor="#dedede">
        <div style="margin:0 auto; width:750px; padding:10px; background-color:#fff; height:800px;">
            <h1>Live Table Edit with Jquery Demo</h1>
            Tutorial Link <a href="http://9lessons.info">Click Here</a><br /><br/>
            <table width="100%">
                <tr class="head">
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
    <?php
        $sql=mysql_query("select * from orang");
        $i=1;
        while($row=mysql_fetch_array($sql)) {
            $id=$row['id'];
            $first_name=$row['first_name'];
            $last_name=$row['last_name'];

            if($i%2) {
    ?>
                <tr id="<?php echo $id; ?>" class="edit_tr">
        <?php
            } else {
        ?>
                <tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
        <?php
            }
        ?>
                    <td width="50%" class="edit_td">
                        <span id="first_<?php echo $id; ?>" class="text"><?php echo $first_name; ?></span>
                        <input type="text" name="first_name" value="<?php echo $first_name; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
                    </td>
                    <td width="50%" class="edit_td">
                        <span id="last_<?php echo $id; ?>" class="text"><?php echo $last_name; ?></span>
                        <input type="text" name="last_name" value="<?php echo $last_name; ?>"  class="editbox" id="last_input_<?php echo $id; ?>"/>
                    </td>
                </tr>
    <?php
            $i++;
        }
    ?>
            </table>
        </div>
    </body>
</html>

Untuk merubah datanya, cukup di klik pada nama tersebut, seperti gambar di bawah


Setelah itu buat file bernama table_edit_ajax.php, script ini berisi proses perubahan data update.


<?php
include("db.php");
if($_POST['id'])
{
    $id=$_POST['id'];
    $first_name=$_POST['first_name'];
    $last_name=$_POST['last_name'];
    mysql_query("update orang set first_name='$first_name',last_name='$last_name' where id='$id'");
}
?>


Referensi : http://www.9lessons.info

Diposting oleh blog willy pada 19:57
Label: , ,

4 komentar:

Langganan: Posting Komentar (Atom)