Fauzian Sebastian (Zian Tech)
Menu
  • Home
  • TKJ
    • Perakitan
    • Installasi
    • Konfigurasi
    • TroubleHosting
  • Rekayasa Perangkat Lunak
    • WEB Design
    • Software Aplication
  • Multimedia
    • Animation
    • Desain Graphic
  • Trending Topic
  • Tentang Saya

Tuesday, 2 September 2014

Membuat Pencarian Data dengan jQuery Ajax dan PHP

By zianovel21:45:00 No comments
Karena sudah sangat lama sekali saya tidak memposting tentang PHP, pada malam hari ini saya memutuskan untuk memposting tentang PHP, pada postingan malam hari ini saya akan share tentang cara membuat Pencarian Data dengan jQuery Ajax dan PHP. dengan cara ini Ajax akan melakukan request data ke php lalu data tersebut akan di tampilkan ke website tanpa perlu reload halaman web.

Langkah - langkah Membuat Pencarian Data dengan jQuery Ajax dan PHP

1.  Buat sebuah database dengan nama latihan lalu buat table dengan nama mhs
create table mhs (
npm varchar(15) primary key,
nama varchar(30),
jurusan varchar(30),
alamat varchar(50)
)

2. Buat sebuah file dengan nama index.php dan masukan script dibawah ini
<!-- include file koneksi.php -->
<?php include "koneksi.php";?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[Tutorial_Koding]_pencarian_data_Jquery-Ajax-PHP</title>
<!-- menginclude file jquery.min.js -->
<script src="jquery.min.js"></script>
</head>

<body>

<script type="text/javascript">
$(document).ready(function() {
<!-- event textbox keyup
$("#txtcari").keyup(function() {
var strcari = $("#txtcari").val(); <!-- mendapatkan nilai dari textbox -->
if (strcari != "") <!-- jika value strcari tidak kosong-->
{
$("#hasil").html("<img src='loading.gif'/>") <!-- menampilkan animasi loading -->
<!-- request data ke cari.php lalu menampilkan ke <div id="hasil"></div> -->
$.ajax({
type:"post",
url:"cari.php",
data:"q="+ strcari,
success: function(data){
$("#hasil").html(data);
}
});
}
});
});
</script>

<div>Cari Data : <input type="text" name="textcari" id="txtcari" /></div>
<div id="hasil"></div>
</body>
</html>

3. Buat sebuah file dengan nama koneksi.php dan masukan script dibawah ini
<?php
$koneksi=mysql_connect("localhost","root","root"); // koneksi ke server
$db=mysql_select_db("latihan"); // memilih database yang akan digunakan
?>

4. Buat sebuah file dengan nama cari.php dan masukan script dibawah ini
<?php 
include "koneksi.php";
$q=$_POST['q'];

// query untuk melakukan pencarian
$query=mysql_query("select * from mhs where nama like '%".$q."%'");
// mendapatkan jumlah baris
$row=mysql_num_rows($query);

if ($row > 0) // jika baris lebih dari 0 / data ditemukan
{
while ($data=mysql_fetch_array($query)) // perulangna untuk menampilkan data
{
// menampilkan data dalam bentuk table
echo "<table width='500'>
<tr>
<td>NPM</td>
<td>Nama</td>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
<tr>
<td>".$data['npm']."</td>
<td>".$data['nama']."</td>
<td>".$data['jurusan']."</td>
<td>".$data['alamat']."</td>
</tr>
</table>";
}
}
else // jika data tidak ditemukan
{
echo "<strong>Data tidak ditemukan</strong>";
}
?>

5. Buka browser lalu masukan url http://localhost/nama_folder_tempat_menyimpan_file_php/

Membuat Pencarian Data dengan jQuery Ajax dan PHP

Membuat Pencarian Data dengan jQuery Ajax dan PHP

Anda bisa mendownload source codenya disini
dan untuk passwordnya disini

Sekian dari saya.
Terima kasih atas kunjugannya semoga bermanfaat
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 komentar:

Post a Comment

Popular Posts

  • Mengatasi error "String or binary data would be truncated. The statement has been terminated."
    Malam semua setelah beberapa jam yang lalu saya memposting tentang CRUD dengan VB.NET Bagian 1  kali ini saya akan memposting  C ara mengata...
  • Tutorial Sql Injection Dengan SQLMAP Kali Linux
    Tutorial Sql Injection Dengan SQLMAP Kali Linux - SQL Injection merupakan sebuah teknik hacking dimana seorang penyerang dapat memasukka...
  • Memutuskan Koneksi Orang Lain Dengan Tuxcut Kali Linux
    Memutuskan Koneksi Orang Lain Dengan Tuxcut Kali Linux - Tuxcut adalah sebuah program kecil yang berfungsi ( netcut ) "memotong ...
  • Cara Dual Boot Kali Linux dan Windows
    Kali Linux Indonesia - Cara Install Dual Boot Kali Linux dan Windows halo sobat dimana pun berada disini penulis blog Kali Linux Indonesia...
  • Cara Mengatasi Error di Kali Linux
    Cara Mengatasi Error di Kali Linux - Pernah kah anda mengalami error di kali linux anda? jika pernah pasti menjengkelkan tidak bisa update t...

Blog Archive

  • ►  2020 (1)
    • ►  March (1)
  • ►  2016 (26)
    • ►  October (10)
    • ►  May (1)
    • ►  February (3)
    • ►  January (12)
  • ►  2015 (35)
    • ►  December (2)
    • ►  October (4)
    • ►  September (18)
    • ►  August (1)
    • ►  June (1)
    • ►  May (2)
    • ►  April (1)
    • ►  March (1)
    • ►  January (5)
  • ▼  2014 (99)
    • ►  December (1)
    • ►  November (3)
    • ►  October (1)
    • ▼  September (6)
      • Perulangan Foreach di VB.NET dan C#
      • Menampilkan Progress bar di Taskbar dengan VB.NET ...
      • Membuat Chained Combobox dengan jQuery Ajax PHP
      • Membuat Fitur Load More dengan jQuery Ajax PHP
      • Membuat Pencarian Data dengan jQuery Ajax dan PHP
      • Export Data ke HTML dengan VB.NET dan C#
    • ►  August (3)
    • ►  July (3)
    • ►  June (9)
    • ►  May (9)
    • ►  April (27)
    • ►  March (20)
    • ►  February (10)
    • ►  January (7)
  • ►  2013 (17)
    • ►  December (6)
    • ►  November (1)
    • ►  October (9)
    • ►  March (1)

Tentangku Yang tak pernah Usai

My Photo
zianovel
Kenalan dulu yu, karena ada istilah tak kenal maka tak sayang. Ya walaupun terkadang udah lama kenal eh ga disayang-sayang. Giliran udah kenal dan udah sayang, eh malah ditinggal pas lagi sayang-sayangnya.
View my complete profile

Copyright © Design by Muhamad Fauzian