Ajax

Membuat Select Option Dinamis Menggunakan Ajax

By Muzanni
17 August 2022
Ajax

Materi membuat select option dinamis dengan ajax merupakan salah satu materi yang paling dicari untuk programmer pemula dalam mengembangkan aplikasi. Dikarenakan saya pribadi sering lupa dengan materi seperti ini maka dari itu saya membuatkan catatan dengan harapan bisa membantu pembaca dalam menyelesaikan jika ada kasus seperti ini.

Select Option Dinamis Menggunakan Ajax PHP

Pada materi HTML sebelumnya sudah pernah di jelaskan apa itu element select box (materi). Elemen <select></select> merupakan tag yang digunakan untuk mepresentasikan pilihan yang sudah disedikan. Elemen ini selalu diikuti oleh <option></option> yang berisikan daftar pilihan. Bentuk umum dari elemen select box ini adalah :

</select>

Membuat Select Option Dinamis Menggunakan Ajax

Select option dinamis adalah list pilihan dalam sebuah form yang saling berkaitan. Maksud dari berkaitan disini adalah ketika pilihan ditetapkan maka selanjutkan menampilkan data yang berhubungan pada parent lanjutan. Sebagai contoh misalnya ketika Provinsi dipilih maka akan menampilkan kota/kabupaten yang terkait dengan Provinsi pilihan.

Dalam membuat select option dinamis ini kita memerlukan bantuan Ajax dari library JQuery. Baik langsung saja kita ke contoh kasus disini kita akan menyelesaikan kasus ketika Fakultas dipilih maka akan tampil jurusan yang terkait.

Adapun plugin yang digunakan dalam materi belajar ini adalah sebagai berikut :

JQuery wajib digunakan dalam membuat select option dinamis

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

Boostrap 4 digunakan untuk tampilan lebih menarik, dalam hal ini membuat tampilan select option

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

Langkah pertama siapkan database dengan tabel tbl_fakultas dan tbl_jurusan

Untuk database lengkapnya bisa di copy-kan code berikut dalam sql

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

-- phpMyAdmin SQL Dump

-- version 5.1.1

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Waktu pembuatan: 28 Jul 2022 pada 12.37

-- Versi server: 10.4.21-MariaDB

-- Versi PHP: 7.3.31

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

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: `tutorial_malasngoding`

-- --------------------------------------------------------

-- Struktur dari tabel `tbl_fakultas`

CREATE TABLE `tbl_fakultas` (

`fakultas_id` int(11) NOT NULL,

`fakultas_nama` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `tbl_fakultas`

INSERT INTO `tbl_fakultas` (`fakultas_id`, `fakultas_nama`) VALUES

(1, 'Teknik'),

(2, 'Hukum');

-- --------------------------------------------------------

-- Struktur dari tabel `tbl_jurusan`

CREATE TABLE `tbl_jurusan` (

`jurusan_id` int(11) NOT NULL,

`jurusan_fakultas` int(11) NOT NULL,

`jurusan_nama` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `tbl_jurusan`

INSERT INTO `tbl_jurusan` (`jurusan_id`, `jurusan_fakultas`, `jurusan_nama`) VALUES

(1, 1, 'Teknik Informatika'),

(2, 1, 'Teknik Elektro'),

(3, 1, 'Teknik Sipil'),

(4, 1, 'Teknik Industri'),

(5, 2, 'Hukum Perdata'),

(6, 2, 'Hukum Pidana');

-- Indexes for dumped tables

-- Indeks untuk tabel `tbl_fakultas`

ALTER TABLE `tbl_fakultas`

ADD PRIMARY KEY (`fakultas_id`);

-- Indeks untuk tabel `tbl_jurusan`

ALTER TABLE `tbl_jurusan`

ADD PRIMARY KEY (`jurusan_id`),

ADD KEY `jurusan_fakultas` (`jurusan_fakultas`);

-- AUTO_INCREMENT untuk tabel yang dibuang

-- AUTO_INCREMENT untuk tabel `tbl_fakultas`

ALTER TABLE `tbl_fakultas`

MODIFY `fakultas_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

-- AUTO_INCREMENT untuk tabel `tbl_jurusan`

ALTER TABLE `tbl_jurusan`

MODIFY `jurusan_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

-- Ketidakleluasaan untuk tabel pelimpahan (Dumped Tables)

-- Ketidakleluasaan untuk tabel `tbl_jurusan`

ALTER TABLE `tbl_jurusan`

ADD CONSTRAINT `tbl_jurusan_ibfk_1` FOREIGN KEY (`jurusan_fakultas`) REFERENCES `tbl_fakultas` (`fakultas_id`) ON DELETE CASCADE ON UPDATE CASCADE;

COMMIT;

/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;

/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;

/*!40101 SET [email protected]_COLLATION_CONNECTION */;

Langkah kedua buatkan file koneksi.php file ini akan menghibungkan database dengan project yang sedang kita kerjakan. Untuk code penghubung database dengan projectnya adalah sebagai berikut :

<?php

//$koneksi = mysqli_connect("hostname","username","password","nama_database");

$koneksi = mysqli_connect("localhost","root","","tutorial_malasngoding");

Selanjutkan kita membuat form yang berkaitan dengan kasus select option dinamis menggunakan ajax, dimana ketika Fakultas dipilih maka akan ditampilkan data Jurusan terkait.

<label>FAKULTAS:</label>

<option value="">--Fakultas--</option>

<?php

$fakultas = mysqli_query($koneksi,"select * from tbl_fakultas");

while($f = mysqli_fetch_array($fakultas)){

<?php

}

</select>

</div>

<label>JURUSAN</label>

</select>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

Potongan syntax diatas Kita membuat form dimana fungsinya untuk memproses data. Form ini berisikan data fakultas, dimana ketika fakultas di pilih maka akan menampilkan data jurusan.

Langkah selanjutnya yaitu satu model JavaScrip yang digunakan untuk memproses hasil dari data fakutas yang dikirim pada inputan pertama. Proses ini dikenal juga dengan membuat API dimana data yang ditampilkan berupa string bukan XML atau JSon. Untuk potongan kode JavaScript nya sebagai berikut:

$('#fakultas').change(function() {

var fakultas = $(this).val();

$.ajax({

type: 'POST',

url: 'ajax_jurusan.php',

data: 'fakultas_id=' + fakultas,

success: function(response) {

$('#jurusan').html(response);

}

});

</script>

Penjelasan kodingan diatas, $('#fakultas').change(function() fungsinya menangkap id dengan nama fakultas untuk di proses. var fakultas = $(this).val() simpan data dalam variabel fakultas. $.ajax ini merupakan inisialisasi variabel ajax dimana didalamnya terdapat jenis pemprosesa data, url yang digunakan untuk proses data, data yang akan diproses dan hasil yang ditampilkan.

Untuk kodingan lengkap dalam membuat form dapat dilihat di code berikut ini :

<?php include 'koneksi.php' ?>

<!DOCTYPE html>

<html>

<head>

<title>Mmebuat Select Option Dinamis Dengan Ajax</title>

</head>

<body>

<center><h2>Select Option Dinamis Dengan Ajax</h2></center>

<label>FAKULTAS:</label>

<option value="">--Fakultas--</option>

<?php

$fakultas = mysqli_query($koneksi,"select * from tbl_fakultas");

while($f = mysqli_fetch_array($fakultas)){

<?php

}

</select>

</div>

<label>JURUSAN</label>

</select>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

$('#fakultas').change(function() {

var fakultas = $(this).val();

$.ajax({

type: 'POST',

url: 'ajax_jurusan.php',

data: 'fakultas_id=' + fakultas,

success: function(response) {

$('#jurusan').html(response);

}

});

</script>

</body>

</html>

Langkah selanjutnya buatkan satu file yang digunakan untuk memproses data fakultas, untuk mendapatkan jurusan yang tergolong dalam fakultas inputan. Disini kita menggunakan nama file ajax_jurusan.php

<?php

include("koneksi.php");

$fakultas = $_POST['fakultas_id'];

$tampil=mysqli_query($koneksi,"SELECT * FROM tbl_jurusan WHERE jurusan_fakultas='$fakultas'");

$jml=mysqli_num_rows($tampil);

if($jml > 0){

while($r=mysqli_fetch_array($tampil)){

<?php

}

}else{

echo "<option selected>- Data Wilayah Tidak Ada, Pilih Yang Lain -</option>";

}

Potongan code diatas digunakan untuk proses data jurusan yang akan ditampilkan sesuai dengan fakultas yang dipilih. Untuk hasilnya bisa di lihat di gambar dibawah ini.