Membuat Data Multiple Combobox dengan Select2 dan PHP

Membuat Data Multiple Combobox dengan Select2 dan PHP - Hallo sahabat Teman Koding, Pada Artikel yang anda baca kali ini dengan judul Membuat Data Multiple Combobox dengan Select2 dan PHP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Data Multiple Combobox dengan Select2 dan PHP
link : Membuat Data Multiple Combobox dengan Select2 dan PHP

Baca juga


Membuat Data Multiple Combobox dengan Select2 dan PHP

 Tutorial kali ini kami akan belajar bagaimana menyimpan knowledge multiple combobox atau select dropdown gunakan PHP. Combobox merupakan komponen inputan yang digunakan untuk memilih keliru satu kata atau kata-kata dari list knowledge yang telah di tentukan. Normalnya pengguna hanya sanggup memilih satu dari sebagian list knowledge yang di tampilkan, namun dengan memberikan attribute multiple pengguna sanggup memilih lebih dari satu pilihan.

Penggunaan multiple combobox html tidak terlampau nyaman menurut saya, karena Pengguna mesti menekan tombol Ctrl atau Shift pas memilih sebagian data. Kita sanggup gunakan plugin Select2 untuk menunjang mempermudah di dalam memilih sebagian knowledge combobox. 

Membuat Data Multiple Combobox dengan Select2 dan PHP

Pertama-tama kami membuat database lebih-lebih dahulu untuk menyimpan knowledge dari combobox yang telah dipilih oleh Pengguna. Contoh database yang akan kami gunakan yaitu knowledge hobi. Buat database dan tabel hobi seperti di bawah 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 terhadap inputan hobi mengfungsikan kurung siku sebab knowledge yang dipilih bakal di eksekusi sebagai knowledge array.

Tambahkan Jquery dan plugin select2 di antara tag head. Teman-teman mampu mengunduh plugin select2 di web resminya  select2.org atau mampu terhubung 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>temankoding.site</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>temankoding.site</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  

Latihan2.php
<!DOCTYPE html>
<html>
<head>
 <title>temankoding.site</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>temankoding.site</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>


Demikianlah Artikel Membuat Data Multiple Combobox dengan Select2 dan PHP

Sekianlah artikel Membuat Data Multiple Combobox dengan Select2 dan PHP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Data Multiple Combobox dengan Select2 dan PHP dengan alamat link http://www.temankoding.site/2021/02/membuat-data-multiple-combobox-dengan.html

Tidak ada komentar untuk "Membuat Data Multiple Combobox dengan Select2 dan PHP"