contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Simple Autocomplete PHP MYSQL HTML5

Posted in PHP MYSQL Life at 03 Maret 2016 With 0 Comments

Jika pada sebelumnya kita membahas fitur <datalist> di HTML 5 , Kali ini suckittrees dot Com akan Membahas Membuat Autocomplete dengan PHP MYSQL dan HTML5  , Dengan fitur  <datalist> yang ada di HTML 5 Kita dapat dengan mudah membuat fitur autocomplete dengan data yang kita ambil dari database mysql.

Untuk Membuat Autocomplete PHP MYSQL , terlebih dahulu kita harus membuat koneksi dengan database mysql dan mysqli,  dan untuk dasar dari HTML 5 datalist anda bisa Membaca artikel saya HTML5 datalis.

▼ Download Source Code Dibawah Ini ▼



Bira lebih Gampang Silahkan baca dulu :

  1. membuat koneksi dengan database mysql dan mysql
  2. HTML5 datalis.

Ok Setelah anda Paham dan sudah membaca artikel tentang membuat koneksi di database mysql dan mysqli serta HTML5 datalist, sekarang kita lanjutkan Membuat Fitur Autocomplete PHP MYSql dengan HTML5

auto complate PHP MYSQL HTML5

Buat Sebuah Database dengan nama db_propinsi , insertkan query dibawah ini

CREATE TABLE `propinsi` (
  `id_propinsi` int(10) NOT NULL AUTO_INCREMENT,
  `nama_propinsi` varchar(100) NOT NULL,
  PRIMARY KEY (`id_propinsi`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

Masukkan data dibawah ini kedalam sql table propinsi

INSERT INTO `propinsi` (`id_propinsi`, `nama_propinsi`) VALUES
(11, 'Nanggroe Aceh Darussalaam'),
(12, 'Sumatra Utara'),
(13, 'Sumatra Barat'),
(14, 'Riau'),
(15, 'Jambi'),
(16, 'Sumatra Selatan'),
(17, 'Bengkulu'),
(18, 'Lampung'),
(19, 'Kep. Bangka Belitung'),
(21, 'Kep. Riau'),
(31, 'DKI Jakarta'),
(32, 'Jawa Barat'),
(33, 'Jawa Tengah'),
(34, 'DI Yogyakarta'),
(35, 'Jawa Timur'),
(36, 'Banten'),
(51, 'Bali'),
(52, 'Nusa Tenggara Barat'),
(53, 'Nusa Tenggara Timur'),
(61, 'Kalimantan Barat'),
(62, 'Kalimantan Tengah'),
(63, 'Kalimantan Selatan'),
(64, 'Kalimantan Timur'),
(71, 'Sulawesi Utara'),
(72, 'Sulawesi Tengah'),
(73, 'Sulawesi Selatan'),
(74, 'Sulawesi Tenggara'),
(75, 'Gorontalo'),
(81, 'Maluku'),
(82, 'Maluku Utara'),
(91, 'Papua'),
(92, 'Irian Jaya Barat');

Setelah itu, Kita buat syntak autocomplete untuk menampilkan data tersebut di textbox

Buat file index.php

<!DOCTYPE html>
<html>
<head>
<title>Autocomplete With PHP MYSQL HTML5 datalist</title>
</head>
<body>
<div align="center">
<h2>Create Autocomplete PHP MYSQL HTML5</h2>

<input type="text" list="propinsi" placeholder="Riau, etc" size="50">
<datalist id="propinsi">
<?php
include "koneksi.php";
$qry=mysql_query("SELECT nama_propinsi From propinsi");
while ($t=mysql_fetch_array($qry)) {
echo "<option value='$t[nama_propinsi]'>";
}
?>
</datalist>
</div>
</body>
</html>

Jika anda Melakukan dengan Benar, Maka akan Menampilkan autocomplete PHP mYsqlseperti gambar dibawah ini :

auto complate PHP MYSQL HTML5

 Amazing Kalkulator dengan HTML5 dan CSS3

 Download

Artikel Terkait

Diskusi