mungkin anda pernah melihan form yang mengisi secara otomatis ketika di ketikan variabel yang dijadikan sebgai primary key maka muncul data nya di form seperti di bawah ini
Kali ini saya akan membagikan tutorial singkat cara membuat autocomplete form dengan ajax dan jquery di php mysql langsung saja untuk hal yang pertama kali di lakukan adalah import db dengan dumping SQL, silahkan anda copy SQL script di bawah ini kemudian dumping SQL di menu SQL seperti di bawah ini
Kemudian lanjut dengan copy SQL Text di bawah ini
-- phpMyAdmin SQL Dump
-- version 4.8.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 22 Agu 2022 pada 09.14
-- Versi server: 10.1.31-MariaDB
-- Versi PHP: 7.1.16
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
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: `mahasiswa`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `mahasiswa`
--
CREATE TABLE `mahasiswa` (
`id` int(10) NOT NULL,
`nim` varchar(5) NOT NULL,
`nama` varchar(40) NOT NULL,
`ipk` double NOT NULL,
`jurusan` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data untuk tabel `mahasiswa`
--
INSERT INTO `mahasiswa` (`id`, `nim`, `nama`, `ipk`, `jurusan`) VALUES
(59, 'M0002', 'Hakko Bio Richard', 3, 'Manajemen Informatika'),
(60, 'M0003', 'Dede Rizki Ramadhan', 2.8, 'Manajemen Informatika'),
(61, 'M0004', 'Anton Sugianto', 3.2, 'Teknik Informatika'),
(62, 'M0005', 'Ujang Walim', 3.1, 'Sistem Informasi'),
(63, 'M0016', 'Dony', 3, 'Teknik Industri'),
(64, 'M0100', 'Dimas', 3.1, 'Psikologi');
--
-- Indexes for dumped tables
--
--
-- Indeks untuk tabel `mahasiswa`
--
ALTER TABLE `mahasiswa`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT untuk tabel yang dibuang
--
--
-- AUTO_INCREMENT untuk tabel `mahasiswa`
--
ALTER TABLE `mahasiswa`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=88;
COMMIT;
/*!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 */;
kemudian klik go / jalankan, jika berhasil maka anda akan mendapatkan sebuah database dengan nama mahasiswa dan sebuah tabel dengan nama mahasiswa.
Buatlah sebuah folder di c:/xampp/htdocs/ dengan nama autocomplete
Langkah selanjutnya adalah membuat form yang akan di isi dengan autofill / autocomplete ajax jquery, silahkan copy dan pastekan code di bawah ini kemudian simpan file di bawah ini dengan nama index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Rubber Check System">
<meta name="author" content="Hakko Bio Richard">
<link rel="icon" href="../../../../favicon.ico">
<title>Autocomplete Ajax | www. hakkoblogs.com</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body class="text-center">
<p class="login-box-msg" style="color : red; font-weight: bold;"></p>
<form class="form-signin" style="margin-top: 20px;" action="hasil.php" method="post" name="barcode-form">
<h1 class="h3 mb-3 font-weight-normal">Auto Complete <a href="login.php"><sup>Ajax</sup></a> </h1>
<label for="inputPassword" class="sr-only">Nim</label>
<input type="text" id="nim" name="nim" class="form-control" onchange="isi_otomatis()" autocomplete="off" placeholder="Nim" required autofocus><br/>
<label for="inputPassword" class="sr-only">Nama</label>
<input type="text" id="nama" name="nama" class="form-control" autocomplete="off" placeholder="Nama" readonly><br/>
<label for="inputPassword" class="sr-only">IPK</label>
<input type="text" id="ipk" name="ipk" class="form-control" autocomplete="off" placeholder="IPK" readonly><br/>
<label for="inputPassword" class="sr-only">Jurusan</label>
<input type="text" id="jurusan" name="jurusan" class="form-control" autocomplete="off" placeholder="Jurusan" readonly><br/>
<input type="reset" class="btn btn-lg btn-primary btn-block" value="Reset" />
<br/>
<!--<a href="login.php"> Admin Panel</a>-->
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
function isi_otomatis(){
var nim = $("#nim").val();
$.ajax({
url: 'ajax.php',
data:"nim="+nim ,
}).success(function (data) {
var json = data,
obj = JSON.parse(json);
$('#nim').val(obj.nim);
$('#nama').val(obj.nama);
$('#ipk').val(obj.ipk);
$('#jurusan').val(obj.jurusan);
});
}
</script>
</body>
</html>
Lanjut membuat file ajax.php untuk pemanggilan data dari database silahkan copy dan pastekan kode berikut ini kemudian simpan dengan nama ajax.php ke dalam folder c:/xampp/htdocs/autocomplete
<?php
//membuat koneksi ke database
$koneksi = mysqli_connect("localhost", "root", "", "mahasiswa");
//variabel nim yang dikirimkan form.php
$nim = $_GET['nim'];
//mengambil data
$query = mysqli_query($koneksi, "select * from mahasiswa where nim='$nim'");
$userid = mysqli_fetch_array($query);
$data = array(
'nim' => @$userid['nim'],
'nama' => @$userid['nama'],
'ipk' => @$userid['ipk'],
'jurusan' => @$userid['jurusan'],);
//tampil data
echo json_encode($data);
?>
Penjelasan singkat kode
Kode di bawah ini adalah untuk pemanggilan data beradasarkan id dari inputan dengan method on change function isi_otomatis() yang kemudian di kirim ke file ajax.php
function isi_otomatis(){
var nim = $("#nim").val();
$.ajax({
url: 'ajax.php',
data:"nim="+nim ,
Kode di bawah ini melakukan pengechekan dari id di file index.php ke database mahasiswa yang kemudian mengirim data berupa object array yang sudah di deklarasi (nim, nama, ipk, jurusan)
$query = mysqli_query($koneksi, "select * from mahasiswa where nim='$nim'");
$userid = mysqli_fetch_array($query);
$data = array(
'nim' => @$userid['nim'],
'nama' => @$userid['nama'],
'ipk' => @$userid['ipk'],
'jurusan' => @$userid['jurusan'],);
//tampil data
echo json_encode($data);
Kode di bawah ini mengirimkan data array yang sudah di deklarasi ke dalam inputan berdasarkan variabel id yang sudah di buat.
.success(function (data) {
var json = data,
obj = JSON.parse(json);
$('#nim').val(obj.nim);
$('#nama').val(obj.nama);
$('#ipk').val(obj.ipk);
$('#jurusan').val(obj.jurusan);
});
Semoga tutorial singkat ini bisa membantu anda untuk membuat membuat auto complete form dengan ajax jquery di PHP MySQL dengan mudah, jika masih terkendala maupun bingung saya sudah siapkan source code lengkap untuk anda download dan anda pelajari
DOWNLOAD
Silahkan di coba dan dipraktekkan karena tanpa tidak akan pernah ada hasil yang tanpa usaha, begitu juga sebaliknya tidak ada usaha yang tanpa hasil, jika artikel ini bermanfaat jangan sungkan untuk membagikannya.
Selamat Mencoba
