» » Cara Menciptakan Inputan Autocomplete Dari Database Dengan Jquery Dan Php

Cara Menciptakan Inputan Autocomplete Dari Database Dengan Jquery Dan Php

Edit

Cara Membuat Inputan Autocomplete dari Database dengan JQuery dan PHP - sebelum kita membahas bagaimana cara menciptakan form autocomplete, sebaiknya kita harus tau dulu apa itu form autocomplete.

Jika kita penasaran ibarat apa itu autocomplete, nih lihat gambar dibawah…

saya memberi teladan eksklusif dari form pencarian dari google.


Coba saja teman perhatikan atau eksklusif peraktekan, ketika kita akan mencari sebuah artikel di google maka kita akan menuliskan sesuatu yang kita akan cari di form pencarian google, ketika kata pertama di ketikan dan kita menekan space maka di bawah kolom akan terdapat beberapa sugest atau pilihan kata selanjutnya yang mungkin akan kita ketik…

dengan autocomplete sebuah isian kolom menyebabkan kegiatan sanggup lebih interaktif dan gampang dalam pengisiannya..
Baca : Cara Membuat Blok Catatan tips, warning, dan Info di Blog
Baca : Perbedaan PHP4 dan PHP5 yang Lebih Mencolok
Baca : Cara menciptakan readmore pada artikel di PHP
Nahh pada tutorial kali ini kita akan menciptakan sendiri nih..

 bagaimana menciptakan form inputan autocomplete yang dimana datanya berasal dari database…

Petama kita harus membaut databasenya dulu yaa…tinggal copas aja tu di bawah,,database sudah saya siapkan kq..
 -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 13 Mar 2017 pada 05.49 -- Versi Server: 10.1.9-MariaDB -- PHP Version: 5.6.15  SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00";   /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */;  -- -- Database: `kasir-pk` --  -- --------------------------------------------------------  -- -- Struktur dari tabel `barang` --  CREATE TABLE `barang` (   `kode_barang` varchar(5) NOT NULL,   `nama_barang` varchar(50) NOT NULL,   `satuan` varchar(20) NOT NULL,   `harga_jual` int(25) NOT NULL,   `harga_beli` int(25) NOT NULL,   `stok_awal` int(4) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;  -- -- Dumping data untuk tabel `barang` --  INSERT INTO `barang` (`kode_barang`, `nama_barang`, `satuan`, `harga_jual`, `harga_beli`, `stok_awal`) VALUES ('B001', 'Tepung Beras', 'BOX', 25000, 20000, 1000), ('B002', 'Gula', 'KG', 9000, 6000, 1000), ('B003', 'ale-ale', 'BOX', 12000, 10000, 1000), ('B004', 'Sampoerna', 'BOX', 20000, 19000, 1000), ('B005', 'mentega 1/2', 'KG', 5000, 4500, 1000), ('B006', 'Beras Jembrana', 'KG', 12000, 11000, 1000), ('B007', 'Tepung LM', 'KG', 12000, 13000, 1000);  -- -- Indexes for dumped tables --  -- -- Indexes for table `barang` -- ALTER TABLE `barang`   ADD PRIMARY KEY (`kode_barang`);  /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Setelah itu buat file index.php dan copas script dibawah..
 <!DOCTYPE html> <html>  <head>  <style>  #caribarang{  margin-top:100px;  margin-left:600px;  margin-bottom:200px;  float:left;  width:500px;  height: 100px;  border:1px solid #cccccc;  background: #ffffff; }  #caribarang table{  width:500px;  height: 100px;  box-shadow:   5px 10px 5px #ccc;  -webkit-box-shadow: 5px 10px 5px #ccc;  -moz-box-shadow:  5px 10px 5px #ccc; }  #caribarang table th{  background:#2d309f;  color:#ffffff; }  #caribarang table td{  padding-left:20px; }  </style>  <script type="text/javascript" src="js/jquery-1.4.js"></script>  <script type='text/javascript' src='js/jquery.autocomplete.js'></script>  <link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />    <script type="text/javascript">    $(function() {         $("#txtnamabarang").autocomplete("nama_barang.php", {     width:300,     max: 10,     scroll:false,  });     $("#txtnamabarang").result(function(event, data, formatted) {     $('#pilihan').html("<p>Barang yang anda pilih adalah: " + formatted + "</p>");   });     }); </script>  </head>  <body>   <div id="caribarang">   <table align="center">   <tr>   <th colspan="3">Masukan Pencarian</th>   </tr>   <tr>    <td>Nama Barang</td>    <td>:</td>    <td align='center'>    <input type='text' name='txtnamabarang' id='txtnamabarang' class='input_detail' style="width: 200px;">    <div id="pilihan"></div>    </td>   </tr>   </table>   </div>  </body>  </html>

Dan terakhir buat file nama_barang.php dan copas juga script di bawah ini untuk mengambil data yang ada di databse..
 <?php mysql_connect("localhost","root",""); mysql_select_db("barang");  $q = $_GET["q"]; if (!$q) return;  $sql = mysql_query("SELECT * FROM barang WHERE kode_barang like '%$q%' OR nama_barang like '%$q%' "); while($r=mysql_fetch_array($sql)){  extract($r);  echo"$nama_barang \n"; } ?>
Jika semua langkah di lakukan dengan benar, saya yakin semua akan berjalan..

aba-aba kegiatan tersebut sanggup teman modifikasi sesuai kebutuhan kegiatan yang teman kerjakan juga.karna memang dengan autocomplete suatu inputan memang terihat lebih friendly…

ooyaaa saya ga pelit juga kq,,dibawah postingan tidak lupa juga saya memperlihatkan link download untuk kegiatan yang sudah jadi…

Semoga tutorialnya berhasil dan bermamfaat yaa.

Subscribe to receive free email updates:

0 Response to "Cara Menciptakan Inputan Autocomplete Dari Database Dengan Jquery Dan Php"

Posting Komentar

Langganan: Posting Komentar (Atom)