Skip to content Skip to sidebar Skip to footer
Home / HTML dan CSS / Javascript / Pemrograman / PHP / Tutorial

Cara Membuat Multiple Select Di PHP Dengan Jquery Select 2

by Gerai Anime Post a Comment

Multiple Select Dalam Satu Tag

Halo kembali lagi dengan saya disitus ini, kali ini saya akan membagikan sebuah tutorial yang pastinya banyak sekali dicari, yaitu membuat multiple select dalam satu tag select dengan jquery select2.js yang kemudian hasilnya dimasukkan ke database . 

 

Terus Apa Sih Multiple Select Tersebut?

Seperti yang kalian lihat gambar diatas, multiple select berfungsi untuk kita bisa memilih beberapa pilihan dalam satu tag atau input, yang mana fungsi sangat berguna jika kita membuat sebuah website atau aplikasi seperti resto, yang pastinya memiliki beberapa pilihan menu dan pelanggan pastinya akan memilih beberapa menu yang ada di resto tersebut. Ok langsung saja ketutorial nya.


Membuat Multiple Select Dalam Satu Tag Select Dengan Jquery Select2.js 

  • Buat sebuah folder baru dengan nama pos dan file dengan nama index.php didalam folder tersebut.
  • Selanjutnya buat database mysql baru dengan nama paket di phpmyadmin lalu buat tabel paket, atau kalian bisa copy pastekan query dibawah.
-- phpMyAdmin SQL Dump
-- version 5.1.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 05, 2022 at 09:12 AM
-- Server version: 10.4.22-MariaDB
-- PHP Version: 7.4.28

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

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

--
-- Table structure for table `paket`
--

CREATE TABLE `paket` (
  `id` int(11) NOT NULL,
  `paket` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `paket`
--
ALTER TABLE `paket`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `paket`
--
ALTER TABLE `paket`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 
  • Selanjutnya ketikkan query dibawah di file index.php.

<?php

$koneksi =new mysqli("localhost","root","","paket");

?>

    <!doctype html>

    <html>

        <head>

            <title>Cara Membuat Multiple Select Di Satu Tag Select</title>

            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

            <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

        </head>

        <body style="background: lightblue">

            <div style="width: 500px; padding: 15px; margin:200px auto;">

                <div class="form-group">

                   <h1>Cara Membuat Multiple Select Di Satu Tag Select</h1>

                    <h2><a href="https://djazuli.my.id">Djazuli IT</a></h2>
                    <form method="post">
                    <select id="paket" name="paket[]" class="form-control" multiple="multiple">

                        <option value=""></option>

                        <option value="Web Master">Web Master</option>

                        <option value="Web Programming">Web Programming</option>

                        <option value="Web Design">Web Design</option>

                        <option value="Digital Marketing">Digital Marketing</option>

                        <option value="Coding For Kids">Coding For Kids</option>

                        <option value="Grafic Desain">Grafic Desain</option>

                        <option value="Motion Grafic">Motion Grafic</option>

                    </select>
                    <button type="submit" name="simpan">Simpan</button>
                    </form>
                </div>

            </div>

            <?php
            if(isset($_POST['simpan'])) {

                $paket=implode(",", $_POST['paket']);
                
                $koneksi->query("INSERT INTO paket(paket) VALUES('$paket')");

                echo "<script>alert('Paket berhasil disimpan');</script>";

            }
            ?>
            <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 () {

                    $("#paket").select2({

                        placeholder: "Silahkan Pilih"

                    });

                });

            </script>

    </body>

    </html>

  • Setelah itu kalian coba, dengan cara buka browser kalian lalu ketikkan "localhost/pos" lalu enter maka muncul halaman seperti dibawah, kemudian kalian bisa coba sendiri

 

Multiple Select

Penjelasan  

  • Pertama di baris pertama bagian query dibawah adalah untuk menyambungkan dengan database kita
 
<?php

$koneksi =new mysqli("localhost","root","","paket");

?>
  • Selanjutnya bagian link dan script seperti query dibawah adalah yaitu untuk memanggil library bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

            <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
 
  • Bagian query dibawah adalah tampilan multiple select, dan bagian name pada tag select itu harus beri tanda setelah nama tag dengan "[]", fungsi itu untuk menyimpan data dalam bentuk array. 
 
<form method="post">
                    <select id="paket" name="paket[]" class="form-control" multiple="multiple">

                        <option value=""></option>

                        <option value="Web Master">Web Master</option>

                        <option value="Web Programming">Web Programming</option>

                        <option value="Web Design">Web Design</option>

                        <option value="Digital Marketing">Digital Marketing</option>

                        <option value="Coding For Kids">Coding For Kids</option>

                        <option value="Grafic Desain">Grafic Desain</option>

                        <option value="Motion Grafic">Motion Grafic</option>

                    </select>
                    <button type="submit" name="simpan">Simpan</button>
                    </form>

  • Selanjutnya query dibawah adalah untuk memasukkan atau menyimpan hasil tag kedalam tabel didalam database, pada bagian "implode" itu merupakan fungsi untuk menggabungkan sebuah array menjadi satu dengan dipisah dengan tanda koma.

<?php
            if(isset($_POST['simpan'])) {

                $paket=implode(",", $_POST['paket']);
                
                $koneksi->query("INSERT INTO paket(paket) VALUES('$paket')");

                echo "<script>alert('Paket berhasil disimpan');</script>";

            }
            ?>

  • Dan query yang terakhir ini adalah untuk memanggil jquery select2.js dan bagian bawahnya sebagai perintah untuk menampilkan fungsi dari select2.js pada id paket dalam tag select.

<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 () {

                    $("#paket").select2({

                        placeholder: "Silahkan Pilih"

                    });

                });

            </script>


Mungkin itu saja yang bisa saya bagikan, dan untuk tutorial lebih lengkapnya kalian bisa lihat pada video dibawah dan pastinya jangan lupa untuk subscribe. Link source code ada dibawah ini.

Link Source Code multiple select php dari db mysql


Post a Comment for "Cara Membuat Multiple Select Di PHP Dengan Jquery Select 2 "