Entri yang Diunggulkan

Membuat Nomor Acak dengan PHP

Nomor acak atau random number merupakan sebuah fungsi untuk membuat nomor acak secara otomatis. Dalam pembuatan sebuah aplikasi tentu ...

Simpan Data Multiple Combobox dengan Select2 dan PHP

Senin, 13 Januari 2020 Tambah Komentar Edit


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.
See the Pen Multiple Combobox by Singgih Saputro (@singgih-saputro) on CodePen.

Contoh form combobox menggunakan plugin select2.
See the Pen Multiple Combobox Select2 by Singgih Saputro (@singgih-saputro) on CodePen.

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.
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.
<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>

Simpan Data Multiple Combobox dengan Select2 dan PHP

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  
Simpan Data Multiple Combobox dengan Select2 dan PHP
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 

Belum ada Komentar untuk "Simpan Data Multiple Combobox dengan Select2 dan PHP"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel