KelasProgrammer.com – Melanjutkan postingan sebelumnya mengenai cara menampilkan data berdasarkan pilihan combo box kali ini saya melanjutkan seri belajar PHP kita untuk cara membuat multiple select di PHP dengan plugin Select2.
Sebelum membaca artikel saya lebih lanjut sebaiknya kalian baca dulu artikel pada postingan yang saya beri link diatas. Karena sebagian tutorial yang dibuat pada postingan kali ini sudah dibahas di sana, dan tidak akan saya bahas kembali hal yang sama dipostingan ini. Misalnya konfigurasi database, membuat tabel, membuat koneksi database dan konfigurasi bootstrap.
Baca juga : Membuat autocomplete di PHP
Pada postingan tersebut saya membahas bagaimana menampilkan data dari database berdasarkan pilihan combo box (dropdown) yang dipilih oleh pengguna. Yang menjadi kekurangannya kita hanya dapat memilih salah satu pilihan dari list yang tersedia. Sehingga data yang ditampilkanpun hanya berdasarkan satu data tersebut.
Pada kesempatan kali ini kita akan mengembangkan dari program sebelumnya yang hanya bisa menampikan berdasarkan satu data, kini bisa menampilkan lebih dari satu kategori data yang ingin ditampilkan.
Untuk Konfigurasi database nya tetap sama, jadi saya tidak perlu mengulang pada tahap ini, kalian bisa baca pada artikel tersebut.
<!-- Load file CSS Bootstrap dan Select2 melalui CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- Load file JS untuk JQuery dan Selec2.js melalui CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>Disini kita menggunakan plugin Select2.js, JQuery dan Bootstrap Semuanya saya menggunakan metode CDN (Content Delivery Network) atau bahasa sederhananya saya langsung load dari internet. Sehingga Butuh koneksi internet ya untuk meload plugin dan library tersebut.
Buat file koneksi database
Pada tahap pertama, kita buat Dulu file koneksi PHP ke databasenya, buat file dengan nama koneksi.php
<?php
$host="localhost";
$user="root";
$password="";
$db="akademik";
$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
die("Koneksi gagal:".mysqli_connect_error());
}
?>Pelajari : Cara membuat database di MySQL
Buat file index.php
Selanjutnya buat file PHP dengan nama index.php Isinya seperti berikut:
<!DOCTYPE html>
<html>
<head>
<!-- Load file CSS Bootstrap dan Select2 melalui CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- Load file JS untuk JQuery dan Selec2.js melalui CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(document).ready(function () {
$(".select2").select2({
});
});
</script>
</head>
<body>
<div class="container">
<br>
<h4>Multiple Select (Combo Box) di PHP</h4>
<form id="form" method="post">
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control select2" multiple="multiple" name="jurusan[]">
<?php
include "koneksi.php";
//Perintah sql untuk menampilkan semua data pada tabel jurusan
$sql="select * from jurusan";
$hasil=mysqli_query($kon,$sql);
$no=0;
while ($data = mysqli_fetch_array($hasil)) {
$no++;
?>
<option value="<?php echo $data['kode_jurusan'];?>"><?php echo $data['nama_jurusan'];?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-info" id="Pilih" value="Pilih">
</div>
</form>
<div id="tampil">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#Pilih").click(function(){
var data = $('#form').serialize();
$.ajax({
type : 'POST',
url : "ambil.php",
data: data,
cache : false,
success : function(data){
$("#tampil").html(data);
}
});
});
});
</script>
</div>
</body>
</html>
Penjelasan:
Saya akan sedikit menjelaskan beberpa bagian penting pada program diatas.
<script>
$(document).ready(function () {
$(".select2").select2({
});
});
</script>Untuk membuat multiple select di PHP kita menggunakan function select2 pada tag select melalui pemanggilan class select2.
<select class="form-control select2" multiple="multiple" name="jurusan[]">
........
</select>Pada bagian tag select (dropdown) kita perlu pastikan pada atribut class menggunakan select2. kemudian ada juga atribut multiple isi nilainya dengan multiple dan pada bagian name isi nama yang mewakili tag select tersebut diikuti dengan tanda []. Mengapa harus menggunakan tanda [] ? Karena nilai yang disimpan lebih dari satu sehingga perlu didimpan dalam bentuk tersebut.
Artikel Lainnya : Cara membuat grafik di PHP
<form id="form" method="post">
........
</form>Pada bagian form yang perlu diperhatikan adalah pada atribut id saya beri nilai ‘form’ nantinya kita akan mengambil nilai yang dikirim didalam form dengan mengacu pada id form tersebut.
<input type="button" class="btn btn-info" id="Pilih" value="Pilih">Seleanjutnya pada bagian button Pilih yang terpenting disini ada pada bagian atribut id. nantinya kita akan membuat event jquery saat tombol ini diklik maka akan memicu event berjalan.
<div id="tampil">
</div>
Pada bagian div dengan atribut id ‘tampil‘ berfungsi sebagai tempat yang nantinya data akan ditampilkan saat diproses melalui server side yang dilakukan dengan AJAX.
<script type="text/javascript">
$(document).ready(function(){
$("#Pilih").click(function(){
var data = $('#form').serialize();
$.ajax({
type : 'POST',
url : "ambil.php",
data: data,
cache : false,
success : function(data){
$("#tampil").html(data);
}
});
});
});
</script>Sintak diatas merupakan sintak javascript dengan menggunakan fungsi JQuery pada atribut id dengan nilai pilih. Dalam hal ini jika tombol pilih di klik maka akan dikerjakan pernyataan didalam fungsi tersebut.
Terdapat fungsi untuk load data secara server side dengan menggunakan ajax. dimana data diambil dari form lewat id form. dan disimpan pada variabel data.
Fungsi ajax dijalnakan menggunakan methode post, dengan url data diload pada file ambil.php yang akan kita buat selanjutnya. dengan membawa data dari form. Nantinya bila berhasil maka akan di tampilkan pada atribut id ‘Tampil‘.
Buat file ambil.php
Kemudian selanjutnya kita buat sebuah file dengan nama ambil.php
<table class="table table-bordered table-hover">
<br>
<thead>
<tr>
<th>No</th>
<th>NIK</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Umur</th>
</tr>
</thead>
<?php
include "koneksi.php";
$jur= "";
foreach ($_POST['jurusan'] as $value)
{
$jur .= "'$value'". ",";
}
$jur = substr($jur,0,-1);
$sql="select * from mahasiswa where jurusan in ($jur) order by jurusan asc";
$hasil=mysqli_query($kon,$sql);
$no=0;
while ($data = mysqli_fetch_array($hasil)) {
$no++;
?>
<tbody>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data["nik"]; ?></td>
<td><?php echo $data["nama"]; ?></td>
<td><?php echo $data["jk"]; ?></td>
<td><?php echo $data["tanggal_lhr"]; ?></td>
<td><?php echo $data["jurusan"]; ?></td>
<td><?php echo $data["umur"]; ?></td>
</tr>
</tbody>
<?php
}
?>
</table>Penjelasan:
Secara singkat file ambil.php berperan untuk mengambil data pada database berdasarkan jurusan yang dipilih melalui dropdown select oleh pengguna. Karena pilihan jurusan bisa lebih dari satu (multiple select) maka kita perlu memecah untuk setiap nilai jurusan dan kita buat fungsi string untuk mengapit setiap nilai dengan tanda ” (karena pada field jurusan di database menggunakan tipe char) dan kita pisahkan masing-masing nilai dengan tanda ,
Lihat pada sintak dibawah ini:
$jur= "";
foreach ($_POST['jurusan'] as $value){
$jur .= "'$value'". ",";
}
$jur = substr($jur,0,-1);Kemudian kita buat perintah query untuk menampilkan data mahasiswa berdasarkan jurusan yang dipilih
$sql="select * from mahasiswa where jurusan in ($jur) order by jurusan asc";Selanjutnya query akan dieksekusi dan datanya akan ditampilkan dalam bentuk tabel.
Setelah kalian mengikuti langkah-langkah yang saya bagikan diatas untuk membuat multiple select dengan PHP. Maka hasilnya dapat kalian lihat seperti gambar dibawah ini:
Sekian artikel saya kali ni mengenai multiple select pada dropdown dengan php, Semoga bisa bermanfaat buat kalian yang sedang belajar php. Sampai jumpa pada pembahasan artikel yang lainnya.
terimakasih,sangat membantu