Asmaul Husna

Asmaul Husna

Pesan

Kebahagian itu karena adanya cinta,maka jika tanpa cinta kebahagiaan akan sirna,jika kebahagian sirna akan tampaklah kegalauan hati, karena hati pengendali raga, maka jikalau sakit hati, sakitlah semua, oleh karenanya perolehlah cinta, kemanakah mencari cinta,tak perlulah mencarinya,karena cinta ada di manapun kita berada, bukanlah kiranya mencari,tetapi perkenankanlah mendekatinya, mendekat kepada penguasa cinta,pemilik alam semesta & tentulah sang Maha Agung yg bersifat tak seperti makhluk-Nya ...

Pages - Menu

Friday, October 11, 2013

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

0 komentar:

Post a Comment

Selamat berkunjung di blog saya, terima kasih.

Labels