Materi Ajax & PHP (Display data with Criteria) dan Buat file pertama dengan nama : display_data.php

Download file Latihan Ajax 1 di Link : https://drive.google.com/open?id=0B0ZPc1ao_KX-NjZNU0FCVWd5WEk

Download file Latihan Ajax 2 di Link : https://drive.google.com/open?id=0B0ZPc1ao_KX-Y0t5Yml0SmVfUzA

 

Materi Ajax & PHP (Display data with Criteria)
Buat file pertama dengan nama : display_data.php

Coding …

<html>
<head>
<script>
// membuat fungsi yang akan menarik data di file ke 2 tempat_cari_data.php
function tampilkan_data(str) {
if (str.length == 0) {
// membuat ID yang akan ditarik di HTML
document.getElementById(“tarik_input”).innerHTML = “”;
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {
//// membuat ID yang akan ditarik di HTML
document.getElementById(“tarik_input”).innerHTML = this.responseText;
}
};
// mengambil data dari file tempat cari data dengan metode get
xmlhttp.open(“GET”, “tempat_cari_data.php?cari_data=” + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Pencarian Dengan Input Data :</b></p>
<form>
Masukkan Kata Yang dicari: <input type=”text” onkeyup=”tampilkan_data(this.value)”>
</form>
<!—id yang harus sama dengan yang diatas 
<p>Data yang Dicari: <span id=”tarik_input”></span></p>
</body>
</html>

 

Buat File ke 2 dengan nama : tempat_cari_data.php

<?php
// membuat tipe data Array (tipe data yang bisa menyimpan banyak nilai/value)
$nam[] = “Ahmad”;
$nam[] = “ayyub”;
$nam[] = “yusuf”;
$nam[] = “bani”;
$nam[] = “ismail”;
$nam[] = “Aisyah”;
$nam[] = “fatimah”;
$nam[] = “zainab”;
$nam[] = “kulsum”;
$nam[] = “gazali”;
$nam[] = “ibnu”;
$nam[] = “fakhitah”;
$nam[] = “Rumaisha”;
$nam[] = “Khamdiyah”;
$nam[] = “Filza”;
// menerima permintaan dari display data dan memasukkannya ke variabel
//$_REQUEST punya fungsi menerima method $_GET dan $_POST
$c = $_REQUEST[“cari_data”];
$ketemu = “”;
// mencari data dari display data
if ($c !== “”) {
// fungsi strtolower adalah mengubah semua huruf yang kita buat jadi kecil
$c = strtolower($c);
$len=strlen($c);
// logika looping, seperti while
foreach($nam as $name) {

if (stristr($c, substr($name, 0, $len))) {
if ($ketemu === “”) {
$ketemu = $name;
} else {
$ketemu .= “, $name”;
}
}
}
}
// kalau data tidak ada , maka tidak ketemu, pahami logikanya
echo $ketemu === “” ? “data tidak ada” : $ketemu;
?>

Setelah selesai coding tarik data dengan memanggil display_data.php tadi .
Tugas Program :
1. buat display data seperti yang diatas dan yang dimunculkan adalah tabel keterangan setelah kita menginput di text box
2. buat display data sama yang diatas tapi menggunakan combo box (dropdown) bukan textbox

 

sumber : Pak Afri Yudha (Ajax 2)

Cara Daftar Google Adsense Indonesia Agar Cepat Diterima

Google Adsense adalah salah satu program PPC (Pay Per Click) yang paling banyak digemari oleh ...

Learn more
Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *