Penjelasan Sederhana: AJAX dengan PHP untuk Saran Nama
AJAX memungkinkan halaman web berkomunikasi dengan server tanpa harus me-reload halaman. Dalam contoh ini, kita akan membuat fitur yang memberikan saran nama secara otomatis saat pengguna mengetik.
Bagaimana Cara Kerjanya?
1.Pengguna Mengetik Nama di Input Field
showHint() akan dijalankan.2.Mengirim Data ke Server dengan AJAX
gethint.php menggunakan AJAX.3.Server Memproses Data dengan PHP
gethint.php akan mencari nama yang sesuai dari daftar yang sudah ada.4.Menampilkan Hasil di Halaman
Kode HTML + JavaScript
Kode ini membuat input field dan menangani permintaan AJAX.
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) { // Jika input kosong
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Ketik nama pada kotak input di bawah:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Saran nama: <span id="txtHint"></span></p>
</body>
</html>
Berikut Hasilnya
Penjelasan Kode HTML + JavaScript
Saat pengguna mengetik, fungsi showHint(str) akan dijalankan.
Jika input kosong, bagian saran akan dikosongkan.
Jika ada input, sistem akan mengirim permintaan AJAX ke gethint.php.
Hasilnya akan muncul di bagian txtHint tanpa perlu reload halaman.
Kode PHP (gethint.php)
Kode ini menangani permintaan dari AJAX dan memberikan saran nama.
<?php
// Array dengan daftar nama
$a = ["Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona",
"Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina",
"Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris",
"Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza",
"Elizabeth", "Ellen", "Wenche", "Vicky"];
// Ambil input dari pengguna
$q = $_REQUEST["q"];
$hint = "";
// Cari nama yang cocok dengan input
if ($q !== "") {
$q = strtolower($q);
$len = strlen($q);
foreach ($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Jika tidak ada hasil, tampilkan "no suggestion"
echo $hint === "" ? "no suggestion" : $hint;
?>
Penjelasan Kode PHP
PHP menerima input dari AJAX dan mencocokkannya dengan daftar nama yang tersedia.
Jika ada nama yang cocok, nama tersebut akan dikembalikan sebagai saran.
Jika tidak ada kecocokan, akan muncul teks "no suggestion".
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar XML #01 Pengenalan Penjelasan Dasar XML
2. Belajar XML #02 Bagaimana XML Digunakan?
3. Belajar XML #03 Pohon XML dengan Penjelasan Sederhana
4. Belajar XML #04 Aturan Dasar Sintaks XML
5. Belajar XML #05 Memahami Elemen XML
6. Belajar XML #06 Memahami XML Attributes
7. Belajar XML #07 Mengenal XML Namespaces: Solusi Menghindari Konflik Nama Elemen
8. Belajar XML #08 Bagaimana XML Ditampilkan di Browser
9. Belajar XML #09 Cara Mengambil Data dari Server Tanpa Reload Halaman
10. Belajar XML #10 Mengenal XML Parser
11. Belajar XML #11 Memahami XML DOM
12. Belajar XML #12 Cara Menavigasi dan Memilih Data dalam XML
13. Belajar XML #13 Pengertian dan Penggunaan XPath dalam XML
14. Belajar XML #14 Mengubah XML Menjadi HTML dengan XSLT
15. Belajar XML #15 Bahasa Query untuk XML Seperti SQL untuk Database
16. Belajar XML #16 Membuat dan Menautkan Hyperlink dalam XML
17. Belajar XML #17 Memastikan XML Anda Bebas dari Kesalahan
18. Belajar XML #18 Struktur dan Validasi Dokumen XML
19. Belajar XML #19 Standar Struktur Dokumen XML
20. Belajar XML #20 Penyimpanan dan Generasi XML
21. Belajar XML #21 Teknologi untuk Website Lebih Interaktif
22. Belajar XML #22 Teknik Mengambil Data Tanpa Reload Halaman
23. Belajar XML #23 Kirim & Ambil Data Tanpa Reload
24. Belajar XML #24 Memahami AJAX dan Respon Server
25. Belajar XML #25 AJAX untuk Menampilkan Data XML
26. Belajar XML #26 Autocomplete Nama dengan AJAX dan PHP
27. Belajar XML #27 Autocomplete dengan AJAX dan ASP
28. Belajar XML #28 Menampilkan Data dari Database Secara Dinamis
29. Belajar XML #29 Menampilkan Data XML di Tabel HTML dengan JavaScript
30. Belajar XML #30 Contoh dan Aplikasi AJAX
31. Belajar XML #31 Pengertian dan Penggunaan XML DOM
32. Belajar XML #32 Memahami XML DOM Nodes
33. Belajar XML #33 Mengakses dan Menavigasi Node XML dengan DOM
34. Belajar XML #34 Properti Node dalam XML DOM
35. Belajar XML #35 Node List dan Atribut di XML DOM
36. Belajar XML #36 Node Tree & Data Handling
37. Belajar XML #37 Parent, Child, & Sibling
38. Belajar XML #38 Mengambil Data XML dengan JavaScript DOM
39. Belajar XML #39 Mengubah Nilai XML dengan JavaScript
40. Belajar XML #40 Menghapus Node dan Atribut XML dengan JavaScript
41. Belajar XML #41 Mengganti Node dan Teks di XML DOM dengan JavaScript
42. Belajar XML #42 Cara Menambahkan Node Baru di XML DOM dengan JavaScript
43. Belajar XML #43 Cara Menambahkan Node dan Atribut di XML DOM
44. Belajar XML #44 Cara Menambahkan Node dan Atribut di XML DOM dengan JavaScript
45. Belajar XML #45 Cara Menyalin Elemen XML dengan cloneNode() di JavaScript
46. Belajar XML #46 Contoh Lengkap XML DOM JavaScript
47. Belajar XML #47 Cara Menelusuri Data di XML
48. Belajar XML #48 Pengenalan Simpul dan Hubungan Node dalam XPath
49. Belajar XML #49 Cara Menyeleksi Node dalam XML
50. Belajar XML #50 Arah dan Hubungan Antar Node XML
51. Belajar XML #51 Cara Mudah Filter Data di XML
52. Belajar XML #52 Contoh Dasar XPath dalam XML
53. Belajar XML #53 Cara Mengubah Data XML Menjadi HTML
54. Belajar XML #54 Bahasa Penting untuk Mengelola XML
55. Belajar XML #55 Transformasi XML ke XHTML dengan XSLT
56. Belajar XML #56 Mengenal Elemen <xsl:template> dalam XSLT
57. Belajar XML #57 Apa itu <xsl:value-of> dalam XSLT?
58. Belajar XML #58 Apa Itu <xsl:for-each>?
59. Belajar XML #59 Apa Itu <xsl:sort>
60. Belajar XML #60 Apa Itu <xsl:if>
61. Belajar XML #61 Apa Itu <xsl:choose>
62. Belajar XML #62 Apa Itu <xsl:apply-templates>
63. Belajar XML #63 Transformasi XSLT di Sisi Klien
64. Belajar XML #64 Apa Itu XSLT di Server
65. Belajar XML #65 menampilkan data dari file XML dalam bentuk formulir
66. Belajar XML #66 Mengenal Elemen Penting dalam XSLT
67. Belajar XML #67 Apa Itu XQuery
68. Belajar XML #68 Pengenalan Dasar XQuery
69. Belajar XML #69 Apa Itu FLWOR
70. Belajar XML #70 Menampilkan Judul Buku dalam Format HTML
71. Belajar XML #71 Memahami Istilah dalam XQuery
72. Belajar XML #72 Memahami Sintaksis XQuery
73. Belajar XML #73 Menggunakan XQuery untuk Menambahkan Elemen
74. Belajar XML #74 Memilih dan Memfilter dengan XQuery
75. Belajar XML #75 Memahami Fungsi dalam XQuery
76. Belajar XML #76 Memahami DTD
77. Belajar XML #77 DTD - Struktur Dasar XML
78. Belajar XML #78 DTD - Elemen
79. Belajar XML #79 DTD - Atribut
80. Belajar XML #80 Elemen vs. Atribut dalam XML
81. Belajar XML #81 DTD - Entitas
82. Belajar XML #82 Penjelasan Mudah DTD
83. Belajar XML #83 Pengertian XML Schema
84. Belajar XML #84 Memahami XSD dan DTD
85. Belajar XML #85 Penjelasan tentang Elemen <schema>
86. Belajar XML #86 Penjelasan tentang Elemen Sederhana
87. Belajar XML #87 Cara Validasi Data di XML dengan Tepat
88. Belajar XML #88 Memahami XSD Complex Elements
89. Belajar XML #89 Apa itu XSD Empty Element
90. Belajar XML #90 Apa Itu "Elements-Only" dalam XSD
91. Belajar XML #91 Apa Itu XSD Text-Only Element
92. Belajar XML #92 Apa itu Mixed Content
93. Belajar XML #93 Apa itu XSD Indicators
94. Belajar XML #94 Apa itu Elemen <any> dalam XSD
95. Belajar XML #95 Apa itu <anyAttribute> dalam XSD
96. Belajar XML #96 Element Substitution dalam XSD
97. Belajar XML #97 Memahami XML Schema (XSD)
98. Belajar XML #98 Mengenal XSD String Data Types
99. Belajar XML #99 Tipe Data Tanggal & Waktu di XSD
100. Belajar XML. #100 Jenis Tipe Data Angka di XML Schema (XSD)
101. Belajar XML. #101 Tipe Data Tambahan di XML Schema (XSD) dan Fungsinya
102. Belajar XML. #102 Elemen & Batasan Nilai di XML Schema (XSD)
103. Belajar XML. #103 Pengenalan Singkat XML Web Services
104. Belajar XML. #104 Apa itu WSDL
105. Belajar XML. #105 Apa itu SOAP
106. Belajar XML. #106 Apa itu RDF
107. Belajar XML. #107 Apa itu RSS
108. Belajar XML. #108 Contoh XML dan Cara Menampilkannya
109. Belajar XML. #109 Kuis XML
110. Belajar XML. #110 Apa Itu Syllabus XML
111. Belajar XML. #111 Apa Itu Sertifikat XML
112. Belajar XML. #112 Apa itu XML DOM Node Types
113. Belajar XML. #113 Apa itu Node dalam XML DOM
114. Belajar XML. #114 Penjelasan Singkat NodeList di XML DOM
115. Belajar XML. #115 Apa itu NamedNodeMap
116. Belajar XML. #116 Apa itu Document Object
117. Belajar XML. #117 Apa itu Element Object
118. Belajar XML. #118 Apa itu Attr Object
119. Belajar XML. #119 Penjelasan Mudah Objek Teks dalam XML DOM
120. Belajar XML. #120 Apa itu Objek CDATASection
121. Belajar XML. #121 Apa itu Comment Object dalam XML DOM
122. Belajar XML. #122 Apa itu XMLHttpRequest Object
123. Belajar XML. #123 Apa itu XML Parser Error
124. Belajar XML. #124 Penjelasan Mudah XSLT
125. Belajar XML. #125 Fungsi String dalam XPath, XQuery, dan XSLT
