Trik PHP Update dan Menampilkan Data MySql Tanpa Loading Halaman

بسم الله الرحمن الرحيم


Pada umumnya ketika dalam menginput data ke dalam database, halaman web akan melalukan reload atau memuat ulang halaman, untuk merefresh data yang ditampilkan.
Dengan library JQuery, menginput data dan menampilkan kembali pada halaman web dapat berjalan cepat tanpa loading pada halaman web.
Berikut langkah-langkahnya:


 Buat file .html dengan isi kode berikut:
 
<!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>
<title>AJAX Form</title>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#result').load('data.php');
    $('#myForm').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').load('data.php');
            }
        })
        return false;
    });
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
</style>
</head>
<body>
<h4>AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" ></div>
<form id="myForm" method="post" action="proses.php">
    <table>
        <tr>
            <td width="100">NIM</td>
            <td>
                <input name="nim" size="30" type="text" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>
                <input name="nama" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td>
                <input name="alamat" size="40" type="text" />
            </td>
        </tr>       
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </td>
        </tr>
    </table>
</form>
</body>
</html>


kemudian buat file proses.php
<?php
$koneksi = mysql_connect("localhost","root","") or die ('<h1>Database tidak terkoneksi</h1>');
$pilih = mysql_select_db("db_demo",$koneksi);
if (!$pilih) {
    echo mysql_error();
}
//validasi
if (trim($_POST['nim']) == '') {
    $error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
    $error[] = '- Nama harus diisi';
}
if (trim($_POST['alamat']) == '') {
    $error[] = '- Alamat harus diisi';
}
//dan seterusnya

if (isset($error)) {
    echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
    $txtnim = $_POST['nim'];
    $txtnama = $_POST['nama'];
    $txtalamat = $_POST['alamat'];
    $mysqlstr = "INSERT INTO tabelbiodata (nim,nama,alamat) VALUES ('$txtnim', '$txtnama', '$txtalamat');";
    $mysqlq = mysql_query($mysqlstr);
    $data = '';
    include_once('data.php');
}
die();
?>

buat lagi file data.php
<?php
$koneksi = mysql_connect("localhost","root","") or die ('<h1>Database tidak terkoneksi</h1>');
$pilih = mysql_select_db("db_demo",$koneksi);
if (!$pilih) {
    echo mysql_error();
}
$mysqlstr = "SELECT nim,nama,alamat FROM tabelbiodata";
    $mysqlq = mysql_query($mysqlstr);
    echo "<table style = 'border:2px solid'>
    <tr>
        <th>NIM</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>";
    while ($adadata = mysql_fetch_row($mysqlq)) {
        list($nim,$nama,$alamat) = $adadata;
        echo "
            <tr style = 'background:silver;'>
                <td>$nim</td>
                <td>$nama</td>
                <td>$alamat</td>
            </tr>
        ";
    };
    echo "</table>";
?>
Kemudian silahkan jalankan dengan web browser. Jika tidak ada kesalahan, hasilnya akan seperti gambar berikut:


download demo - no pass
[pass : alhamdulillah]
Terima kasih, mohon maaf jika banyak terdapat kekurangan. Mohon kritik dan saran dari pengunjung terhormat, Wassalamu 'Alaikum Warohmatullahi Wabarokatuh

Comments

Popular posts from this blog

Membuat File Resource (*.res)