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.
<!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
<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();
?>
$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>";
?>
$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
Post a Comment
Selamat berkunjung di blog saya, terima kasih.