- Back to Home »
- AJAX , JQuery , PHP , RPL »
- Menampilkan Data Hasil Pencarian tanpa Me-Reload Page dengan PHP dan JQuery
Posted by : Unknown
Senin, 06 Mei 2013
Ahahahaha tumben nih ya kali ini ane ngepost yg berbau IT :D ya gpplah kan ane juga anak RPL.
yupz langsung aja ya, sekarang ane kasih tutorialnya. Disini database yg ane gunakan adalah Oracle, bukannya sombong yee abisnya disini udah terlanjur biasa pke Oracle :v *jiiahhh maaf2 bukannya sombong :) razibelieve ga punya niat sedikitpun buat menyombongkan diri. O:)
ceritanya disini ntu, databasenya berisi ttg alamat2 :) fieldnya ada 3 yaitu ID, JALAN, KOTA. hehehehehe
<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.2.min.js'></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<form action='' method='post' id='myform'>
<table border='0'>
<tr>
<td>Street</td>
<td><input type='text' name='street' maxlength='50' id='street' ></td> </tr>
<tr>
<td>City</td>
<td><input type='text' name='city' maxlength='50' id='city' ></td>
</tr>
<tr>
<td colspan='2' style=' text-align:right;'>
<input type='submit' id='submit' name='search' value='Search' onClick='markersPoint();'></td>
</tr>
</table>
</form>
<div id="results"><div>
</body></html>
<head>
<script type='text/javascript' src='js/jquery-1.5.2.min.js'></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<form action='' method='post' id='myform'>
<table border='0'>
<tr>
<td>Street</td>
<td><input type='text' name='street' maxlength='50' id='street' ></td> </tr>
<tr>
<td>City</td>
<td><input type='text' name='city' maxlength='50' id='city' ></td>
</tr>
<tr>
<td colspan='2' style=' text-align:right;'>
<input type='submit' id='submit' name='search' value='Search' onClick='markersPoint();'></td>
</tr>
</table>
</form>
<div id="results"><div>
</body></html>
namakan folder diatas INDEX.PHP
lanjooooooooot ! sekarang kita bikin file jquery.js nya say :*
okeyyy
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
street: "required",
city: "required",
},
submitHandler: function(form) {
$.post('search.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
street: "required",
city: "required",
},
submitHandler: function(form) {
$.post('search.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
nah sekarang kita bikin search.php yayayayayayayayaya :* disini aku ga misahin file koneksi database sama prosesnya, jadi yaudahlah disatufolderin aja :D hahaha
<?php
if(!function_exists('OCI_CONNECT')) die ('NOT CONNECT');
PutEnv("PATH=C:/instantclient");
$username="username";
$password="password";
$database="localhost/nama_database";
$connection=oci_connect($username,$password,$database);
IF($_POST['search'])
{
IF($_POST['street'] || $_POST['city'] != '')
{
$qr="SELECT * FROM ALAMAT WHERE JALAN LIKE '%".$_POST['street']."%' AND KOTA LIKE '%".$_POST['city']."%' ";
}
}
$result = oci_parse($connection,$qr);
oci_execute($result);
while ($row = oci_fetch_row($result)) {
$data.=" <tr >
<td>".$row[0]."</td>
<td>".$row[1]."</td>
<td>".$row[2]."</td>
</tr>";
}
if(oci_num_rows($result) != 0)
{
echo '<div id="box">
<table id="datatables" class="display" width=100%>
<thead>
<tr bgcolor="#ddd">
<th>ID</th>
<th>JALAN</th>
<th>KOTA</th>
</tr>
</thead>
<tbody>
'.$data.'
</tbody>
</table>
</div>';
}
?>
if(!function_exists('OCI_CONNECT')) die ('NOT CONNECT');
PutEnv("PATH=C:/instantclient");
$username="username";
$password="password";
$database="localhost/nama_database";
$connection=oci_connect($username,$password,$database);
IF($_POST['search'])
{
IF($_POST['street'] || $_POST['city'] != '')
{
$qr="SELECT * FROM ALAMAT WHERE JALAN LIKE '%".$_POST['street']."%' AND KOTA LIKE '%".$_POST['city']."%' ";
}
}
$result = oci_parse($connection,$qr);
oci_execute($result);
while ($row = oci_fetch_row($result)) {
$data.=" <tr >
<td>".$row[0]."</td>
<td>".$row[1]."</td>
<td>".$row[2]."</td>
</tr>";
}
if(oci_num_rows($result) != 0)
{
echo '<div id="box">
<table id="datatables" class="display" width=100%>
<thead>
<tr bgcolor="#ddd">
<th>ID</th>
<th>JALAN</th>
<th>KOTA</th>
</tr>
</thead>
<tbody>
'.$data.'
</tbody>
</table>
</div>';
}
?>
Kyaaaaaaaaaaaaaaa beres juga :D selamat dicoba ya ^_^ mianhae gak ada source downloadnya :v
cukup sekian dari RAZIBELIEVE :D bye bye~~~
bagaimana cara menambah Pagination di sini? tanpa reload page
BalasHapus