Menampilkan data otomatis di Pilihan Combobox Menggunakan Ajax

Ahmad Adzan Azari
14 Apr 2020
Tips & Trik
53 Kali

Sudah tidak asing lagi di dengar soal menampilkan data secara otomatis saat memilih data di combobox, dimana kita memilih data yang di combobox secara otomatis data yang terkait akan tampil di form yang sudah kita siapkan. padahal sudah banyak tutorial tentang ini berterbaran di google tetapi masih juga ada yang bertanya bagai mana cara membuatnya. Untuk itu mimin buat tutorial ini semoga dapat di pahami oleh temen-temen yang mencari tutorial tentang menampilkan data secara otomatis saat pilih data di combobox.

Untuk itu mimin akan membagikan tutorial yang akan diterapkan dengan bahasa pemrograman PHP dan Ajax , untuk databasenya kita menggunakan database pada umumnya yaitu mariaDB (MySQL) yang mudah dipahami dan dipelajari. Untuk proses saat kita memilih data value di combobox dan akan dikirim dan di eksekusi oleh Ajax, maka jika data yang kita pilih tadi di ketemukan maka data akan ditampilkan di form input yang sebelumnya sudah dibuat atau di rancang

Langsung saja bagaimana cara menampilkan data secara otomatis di pilihan combobox Menggunakan Ajax

1. Siapkan database dan tabelnya serta jangan lupa sudah ada record data di dalam tabelnya

Baca Lainnya :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CREATE TABLE `pegawai` (
  `id_pegawai` int(11) NOT NULL,
  `nip` varchar(50) NOT NULL,
  `nama_pegawai` varchar(255) NOT NULL,
  `jenis_kelamin` enum('laki-laki','perempuan') NOT NULL,
  `alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
INSERT INTO `pegawai` (`id_pegawai`, `nip`, `nama_pegawai`, `jenis_kelamin`, `alamat`) VALUES
(1, '1234567', 'Ahmad Adzan Azari', 'laki-laki', 'Kacangan, Tawangsari, Kerjo, Karanganyar'),
(2, '3334897', 'Putri Muryanti S', 'perempuan', 'Kacangan, Tawangsari, Kerjo, Karanganyar'),
(3, '8902344', 'Muhammad Arsenio', 'laki-laki', 'Kacangan, Tawangsari, Kerjo, Karanganyar');
 
ALTER TABLE `pegawai` ADD PRIMARY KEY (`id_pegawai`);
ALTER TABLE `pegawai` MODIFY `id_pegawai` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

2. Koneksi ke Database

Pertama kali yang dilakukan adalah melakukan koneksi ke database, yang berfungsi untuk menghubungkan program kita kedalam database yang dimana untuk penyimpanan data anda. Selanjutnya kita membuat file php yang bernama koneksi.php . Berikut ini adalah sourcodenya :

1
2
3
4
5
6
7
<?php
// Koneksi ke database
$db['host'] = "localhost"; //host
$db['user'] = "root"; //username database
$db['pass'] = ""; //password database
$db['name'] = "db_pegawai"; //nama database
$koneksi = mysqli_connect($db['host'], $db['user'], $db['pass'], $db['name']);

3. Proses Eksekusi/Pengecekan dengan Ajax

Selanjutnya kita akan membuat sebuah file baru untuk memproses data yang dikirimkan dari combobox nip, dan selanjutnya di proses/cek ke database dan kemudian data akan dikembalikan dalam json. buatlah file dengan nama cek_data.php, ketikkan kode berikut :

1
2
3
4
5
6
7
<?php
include "koneksi.php";
$pegawai = mysqli_fetch_array(mysqli_query($koneksi, "select * from pegawai where nip='$_GET[nip]'"));
$data_pegawai = array('nama_pegawai'   	=>  $pegawai['nama_pegawai'],
              		'jenis_kelamin'  	=>  $pegawai['jenis_kelamin'],
              		'alamat'    		=>  $pegawai['alamat'],);
 echo json_encode($data_pegawai);

4. Membuat Form untuk tampilannya

Form ini berfungsi untuk menampilkan data di database yang menjadi wadah segaligus menampung hasil data terkait yang dipilih. buatlah sebuah file dengan nama index.php, dan isikan dengan script berikut ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
    <title>Membuat Form Otomatis menggunakan Ajax</title>
</head>
<body>
<form action="">
    <table>
        <tr><td>NIP</td><td> <select onchange="cek_database()" id="nip">
	<option value='' selected>- Pilih -</option>
	<?php
		include "koneksi.php";
		$pegawai = mysqli_query($koneksi,"SELECT * FROM pegawai");
		while ($row = mysqli_fetch_array($pegawai)) {
			echo "<option value='$row[nip]'>$row[nip]</option>";
		}
	?>
	</select></td></tr>
        <tr><td>Nama Pegawai</td><td> <input type="text" id="nama_pegawai"></td></tr>
        <tr><td>Jenis Kelamin</td><td><input type="radio" name="jenis_kelamin" value="laki-laki"/> Laki-laki
			<input type="radio" name="jenis_kelamin" value="perempuan"/>Perempuan</td></tr>
        <tr><td>Alamat</td><td> <textarea id="alamat" style='width:300px'></textarea></td></tr>
    </table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    function cek_database(){
        var nip = $("#nip").val();
        $.ajax({
            url: 'cek_data.php',
            data:"nip="+nip ,
        }).success(function (data) {
            var json = data,
            obj = JSON.parse(json);
            $('#nama_pegawai').val(obj.nama_pegawai);
            $('#alamat').val(obj.alamat);
 
            var $jenis_kelamin = $('input:radio[name=jenis_kelamin]');
		if(obj.jenis_kelamin == 'laki-laki'){
			$jenis_kelamin.filter('[value=laki-laki]').prop('checked', true);
		}else{
			$jenis_kelamin.filter('[value=perempuan]').prop('checked', true);
		}
        });
    }
</script>
</body>
</html>

Berikut ini adalah hasil eksekusi dari program di atas:

Nah mudah bukan? coba di coba dan di praktekan sendiri semoga bermanfaat. Bagi yang masih bingung silahkan tanyakan di dalam kolom komentar dibawah ini. #GoodLuck

Bagikan Artikel ini:

Ahmad Adzan Azari

Tidak ada kata gagal, selagi kita terus mencoba sampai sukses. Teruslah berusaha dan Berdoa untuk meminta pertolongan-NYA

Baca Lainnya :

apa-saja-yang-harus-dilakukan-untuk-menjadi-fullstack-developer ?>

Tips & Trik