Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita belajar bagaimana menyimpan data multiple checkbox menggunakan PHP. Tutorial kali ini kita akan belajar bagaimana menyimpan data multiple combobox atau select dropdown menggunakan PHP. Combobox merupakan komponen inputan yang digunakan untuk memilih salah satu kata atau kalimat dari list data yang telah di tentukan. Normalnya pengguna hanya dapat memilih satu dari beberapa list data yang di tampilkan, namun dengan menambahkan attribute multiple pengguna dapat memilih lebih dari satu pilihan.
Penggunaan multiple combobox html tidak terlalu nyaman menurut saya, karena Pengguna harus menekan tombol Ctrl atau Shift saat memilih beberapa data. Kita dapat menggunakan plugin Select2 untuk membantu mempermudah dalam memilih beberapa data combobox.
Contoh dibawah ini form combobox tanpa menggunakan plugin select2.
Contoh form combobox menggunakan plugin select2.
Simpan Data Multiple Combobox dengan Select2 dan PHP
Pertama-tama kita buat database terlebih dahulu untuk menyimpan data dari combobox yang telah dipilih oleh Pengguna. Contoh database yang akan kita gunakan yaitu data hobi. Buat database dan tabel hobi seperti dibawah ini.
Pertama-tama kita buat database terlebih dahulu untuk menyimpan data dari combobox yang telah dipilih oleh Pengguna. Contoh database yang akan kita gunakan yaitu data hobi. Buat database dan tabel hobi seperti dibawah ini.
CREATE DATABASE `hobi`;
USE `hobi`;
CREATE TABLE `hobi` (
`id_hobi` int(11) NOT NULL AUTO_INCREMENT,
`hobi` varchar(255),
PRIMARY KEY (`id_hobi`)
);
Selanjutnya buat form inputan seperti dibawah ini.
<form method="POST">
<table>
<tr>
<td width="60px" valign="top">Hobi</td>
<td valign="top">
<select id="hobi" name="hobi[]" multiple="multiple" style="width:300px">
<option value="Nonton">Nonton</option>
<option value="Menulis">Menulis</option>
<option value="Traveling">Traveling</option>
<option value="Otomotif">Otomotif</option>
<option value="Fotografi">Fotografi</option>
<option value="Programming">Programming</option>
</select>
</td>
</tr>
<tr>
<td width="60px" valign="top"></td>
<td valign="top">
<input type="submit" name="simpan" value="Simpan">
</td>
</tr>
</table>
</form>
Keterangan:
Penggunaan atribute name pada inputan hobi menggunakan kurung siku karena data yang dipilih akan di eksekusi sebagai data array.
Tambahkan Jquery dan plugin select2 di antara tag head. Teman-teman bisa mengunduh plugin select2 di web resminya select2.org atau bisa mengakses langsung melalui cdn seperit dibawah ini.
Penggunaan atribute name pada inputan hobi menggunakan kurung siku karena data yang dipilih akan di eksekusi sebagai data array.
Tambahkan Jquery dan plugin select2 di antara tag head. Teman-teman bisa mengunduh plugin select2 di web resminya select2.org atau bisa mengakses langsung melalui cdn seperit dibawah ini.
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/id.js" type="text/javascript"></script>
Konfigurasi Combobox dengan plugin select2.
<script type="text/javascript">
$(document).ready(function() {
$('#hobi').select2({
placeholder: "Pilih Hobi",
allowClear: true,
language: "id"
});
});
</script>
Buat koneksi database dan proses simpan data.
<?php
//koneksi kedatabase
mysql_connect("localhost","root","");
mysql_select_db("hobi");
//proses simpan data
if (isset($_POST['simpan'])) {
//perulangan data array dari inputan combobox
foreach ($_POST['hobi'] as $value) {
mysql_query("INSERT into hobi(hobi) VALUES('".$value."')");
}
}
?>
Kode lengkapnya seperti dibawah ini, simpan kode berikut ini dengan nama file latihan1.php.
<!DOCTYPE html>
<html>
<head>
<title>Maribelajarcoding.com</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/id.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hobi').select2({
placeholder: "Pilih Hobi",
allowClear: true,
language: "id"
});
});
</script>
</head>
<body>
<div align="center">
<h3>Simpan Data Multiple Select Dropdown dengan Plugin Select2</h3>
<h4>maribelajarcoding.com</h4>
<form method="POST">
<table>
<tr>
<td width="60px" valign="top">Hobi</td>
<td valign="top">
<select id="hobi" name="hobi[]" multiple="multiple" style="width:300px">
<option value="Nonton">Nonton</option>
<option value="Menulis">Menulis</option>
<option value="Traveling">Traveling</option>
<option value="Otomotif">Otomotif</option>
<option value="Fotografi">Fotografi</option>
<option value="Programming">Programming</option>
</select>
</td>
</tr>
<tr>
<td width="60px" valign="top"></td>
<td valign="top">
<input type="submit" name="simpan" value="Simpan">
</td>
</tr>
</table>
</form>
<?php
//koneksi kedatabase
mysql_connect("localhost","root","");
mysql_select_db("hobi");
//proses simpan data
if (isset($_POST['simpan'])) {
//perulangan data array dari inputan combobox
foreach ($_POST['hobi'] as $value) {
mysql_query("INSERT into hobi(hobi) VALUES('".$value."')");
}
}
?>
<table border="1" width="500px">
<tr>
<th width="10%">No</th>
<th>Hobi</th>
</tr>
<?php
$i=1;
$sql=mysql_query("SELECT * FROM hobi");
while ($data=mysql_fetch_array($sql)) {
?>
<tr>
<td><?=$i++;?></td>
<td><?=$data['hobi']?></td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
Kita dapat menyimpan multiple data combobox dalam satu baris data di database seperti gambar dibawah ini dengan mengubah proses simpan data. Buat file latihan2.php
<!DOCTYPE html>
<html>
<head>
<title>Maribelajarcoding.com</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/id.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hobi').select2({
placeholder: "Pilih Hobi",
allowClear: true,
language: "id"
});
});
</script>
</head>
<body>
<div align="center">
<h3>Simpan Data Multiple Select Dropdown dengan Plugin Select2</h3>
<h4>maribelajarcoding.com</h4>
<form method="POST">
<table>
<tr>
<td width="60px" valign="top">Hobi</td>
<td valign="top">
<select id="hobi" name="hobi[]" multiple="multiple" style="width:300px">
<option value="Nonton">Nonton</option>
<option value="Menulis">Menulis</option>
<option value="Traveling">Traveling</option>
<option value="Otomotif">Otomotif</option>
<option value="Fotografi">Fotografi</option>
<option value="Programming">Programming</option>
</select>
</td>
</tr>
<tr>
<td width="60px" valign="top"></td>
<td valign="top">
<input type="submit" name="simpan" value="Simpan">
</td>
</tr>
</table>
</form>
<?php
//koneksi kedatabase
mysql_connect("localhost","root","");
mysql_select_db("hobi");
//proses simpan data
if (isset($_POST['simpan'])) {
$data = implode(",", $_POST['hobi']);
mysql_query("INSERT into hobi(hobi) VALUES('".$data."')");
}
?>
<table border="1" width="500px">
<tr>
<th width="10%">No</th>
<th>Hobi</th>
</tr>
<?php
$i=1;
$sql=mysql_query("SELECT * FROM hobi");
while ($data=mysql_fetch_array($sql)) {
?>
<tr>
<td><?=$i++;?></td>
<td><?=$data['hobi']?></td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
Tutorial simpan data multiple combobox dengan PHP telah selesai. Sekian, semoga bermanfaat.
Source Code:
multiselect.rar
Source Code: