Archive for Mei 2013
Menampilkan Data Hasil Pencarian tanpa Me-Reload Page dengan PHP dan JQuery
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
namakan folder diatas INDEX.PHP
lanjooooooooot ! sekarang kita bikin file jquery.js nya say :*
okeyyy
nah sekarang kita bikin search.php yayayayayayayayaya :* disini aku ga misahin file koneksi database sama prosesnya, jadi yaudahlah disatufolderin aja :D hahaha
Kyaaaaaaaaaaaaaaa beres juga :D selamat dicoba ya ^_^ mianhae gak ada source downloadnya :v
cukup sekian dari RAZIBELIEVE :D bye bye~~~
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~~~
