Multiple Select Menggunakan PHP Ajax Bootstrap

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
October 01, 2018




Selamat malam kali ini kami akan share bagaimana membuat multiple select menggunakan PHP Ajax Bootsrap. Pada aplikasi dibawah kita akan memilih lantai (floor), Kemudian id floor akan memanggil nilai atau id ruangan berdasarkan floor yang dipilih.



Aplikasi dibawah merupakan aplikasi yang sangat sederhana dan sangat cocok buat teman-teman yang baru memulai belajar.

Pertmaa buat database terlebih dahulu, buat database dengan nama select_multiple kemudian masukkan struktur databse dibawah ini.


 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";



CREATE TABLE `floor` (
  `id` int(11) NOT NULL,
  `floorName` varchar(50) NOT NULL,
  `floorDescription` longtext NOT NULL,
  `creationDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updationDate` varchar(25) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `floor`
--

INSERT INTO `floor` (`id`, `floorName`, `floorDescription`, `creationDate`, `updationDate`) VALUES
(1, 'Ground Floor', '', '2018-03-06 04:29:53', '22-03-2018 09:42:48 PM'),
(2, 'Upper Ground Floor', '', '2018-03-06 04:29:59', ''),
(3, '2nd Floor', '', '2018-03-06 04:30:07', ''),
(4, '3nd Floor', '', '2018-03-06 04:30:13', ''),
(5, '4nd Floor', '', '2018-03-06 04:30:33', '20-03-2018 10:32:50 PM'),
(8, '5nd Floor', '', '2018-03-10 07:03:10', '15-03-2018 03:58:51 PM'),
(9, 'Tesnah', '', '2018-06-10 04:17:50', '');

--
-- Table structure for table `room`
--

CREATE TABLE `room` (
  `id` int(11) NOT NULL,
  `floorid` int(11) NOT NULL,
  `room` varchar(25) NOT NULL,
  `creationDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updationDate` varchar(25) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `room`
--

INSERT INTO `room` (`id`, `floorid`, `room`, `creationDate`, `updationDate`) VALUES
(1, 1, 'Academic Room', '2018-03-06 04:31:51', ''),
(2, 1, 'Library ', '2018-03-06 04:32:02', ''),
(3, 1, 'Student Club', '2018-03-06 04:32:14', ''),
(4, 1, 'Architecture Room', '2018-03-06 04:32:36', ''),
(5, 2, 'Computer Lab', '2018-03-06 04:32:48', '07-03-2018 07:18:07 PM'),
(6, 2, 'Aquarium Room', '2018-03-06 04:33:08', ''),
(7, 3, '201', '2018-03-06 04:33:18', ''),
(8, 3, '202', '2018-03-06 04:33:25', '20-03-2018 11:56:49 PM'),
(9, 3, '203', '2018-03-06 04:33:31', ''),
(10, 3, '204', '2018-03-06 04:33:37', ''),
(11, 3, '205', '2018-03-06 04:33:42', ''),
(12, 3, '206', '2018-03-06 04:33:56', ''),
(13, 3, '207', '2018-03-06 04:34:03', ''),
(14, 3, '208', '2018-03-06 04:34:09', ''),
(15, 4, '301', '2018-03-06 04:34:21', ''),
(16, 4, '302', '2018-03-06 04:34:27', ''),
(17, 4, '303', '2018-03-06 04:34:35', ''),
(18, 4, '304', '2018-03-06 04:34:42', ''),
(19, 4, '305', '2018-03-06 04:34:48', ''),
(20, 4, '306', '2018-03-06 04:34:54', ''),
(21, 4, '307', '2018-03-06 04:34:59', ''),
(22, 4, '308', '2018-03-06 04:35:05', ''),
(23, 5, '401', '2018-03-06 04:35:55', ''),
(24, 5, '402', '2018-03-06 04:36:02', ''),
(25, 5, '403', '2018-03-06 04:36:08', ''),
(26, 5, '404', '2018-03-06 04:36:13', ''),
(27, 3, 'Mushollah', '2018-03-06 04:36:52', ''),
(32, 2, 'Engineering and Technolog', '2018-03-21 12:52:38', ''),
(36, 1, 'Dean School of Management', '2018-03-21 12:57:35', '21-03-2018 08:36:53 PM'),
(37, 2, 'Dean School of Engineerin', '2018-03-21 12:58:18', '21-03-2018 08:36:22 PM'),
(38, 3, 'SPMI Room', '2018-03-21 13:01:11', ''),
(39, 3, 'IT Room', '2018-03-21 13:01:21', ''),
(40, 3, 'Marketing Room', '2018-03-21 13:01:32', ''),
(41, 3, 'Secretary Rector Room', '2018-03-21 13:03:05', '21-03-2018 08:03:33 PM'),
(42, 3, 'HRD Room', '2018-03-21 13:05:00', ''),
(43, 3, 'Vice Rector Room', '2018-03-21 13:05:33', ''),
(44, 3, 'Rector Room', '2018-03-21 13:05:48', ''),
(45, 4, 'Ballroom Room', '2018-03-21 13:06:51', '21-03-2018 08:07:09 PM'),
(52, 2, 'Head of Civil Engineering', '2018-03-21 13:32:00', ''),
(53, 2, 'Head of Informatic Engine', '2018-03-21 13:32:29', ''),
(54, 2, 'Head Of Information Syste', '2018-03-21 13:33:07', '21-03-2018 08:33:48 PM'),
(55, 2, 'Head Of Petroleum Enginee', '2018-03-21 13:34:12', ''),
(56, 1, 'Head of Accounting Study ', '2018-03-21 13:39:44', ''),
(57, 1, 'Head of Bussiness Adminis', '2018-03-21 13:40:00', ''),
(58, 1, 'Head of Communication Sci', '2018-03-21 13:40:12', '');

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

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

--
-- AUTO_INCREMENT for table `floor`
--
ALTER TABLE `floor`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

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

Kedua buat file dengan nama config.php fungsinya adalah untuk koneksi kedatabase.

 <?php
define('DB_HOST', 'localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'multiple_select');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Ketiga buat file dengan nama getroom.php kemudian masukkan script dibawah ini. Pada script dibawah id floor akan memanggil nilai atau id ruangan berdasarkan floor yang dipilih.

 <?php
include('config.php');
if(!empty($_POST["catid"])) 
{
 $id=intval($_POST['catid']);
 if(!is_numeric($id)){
 
  echo htmlentities("invalid Floorid");exit;
 }
 else{
 $stmt = mysqli_query($con,"SELECT room FROM room WHERE floorid ='$id'");
 ?><option selected="selected">Select Room Available </option><?php
 while($row=mysqli_fetch_array($stmt))
 {
  ?>
  <option value="<?php echo htmlentities($row['room']); ?>"><?php echo htmlentities($row['room']); ?></option>
  <?php
 }
}

}
?> 

Keempat dan yang terkahir buat file dengan nama index.php file ini berisi script untuk form konfigurasi.

 <?php session_start();
error_reporting(0);
include('config.php');
?>

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Select</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script>
    function getCat(val) {
            //alert('val');
            $.ajax({
              type: "POST",
              url: "getroom.php",
              data: 'catid=' + val,
              success: function(data) {
                $("#room").html(data);
              }
            });
          }
        </script>

      </head>
      <body>
        <br /><br />
        <div class="container">
         <nav class="navbar navbar-inverse">
          <div class="container-fluid">
           <div class="navbar-header">
            <a class="navbar-brand" href="https://www.tutorialswb.com/">Home</a>
            <a class="navbar-brand" href="index.php">Multiple Select</a>
          </div>
        </div>
      </nav>
      <br />
      <h2 align="center">Multiple Select Menggunakan PHP Ajax Bootstrap</h2>
      <br />
      <p style="padding-left:20%; color:green">
        <?php if($msg){ echo htmlentities($msg); }?>
        <form class="login-form" method="post">
          <form method="post" name="complaint" class="login-form">

            <div class="form-group">
              <label for="exampleSelect4" class="control-label">Select Floor</label>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>Required (*)</color></font>
              <div class="controls">
                <select name="floor" id="floor" onChange="getCat(this.value);" required="" class="form-control" id="exampleSelect4" required="required">
                  <option value="">Select Floor</option>
                  <?php $sql=mysqli_query($con, "select id,floorName from floor "); while ($rw=mysqli_fetch_array($sql)) { ?>
                    <option value="<?php echo htmlentities($rw['id']);?>">
                      <?php echo htmlentities($rw[ 'floorName']);?>
                    </option>
                  <?php } ?>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="exampleSelect3" class="control-label">Select Room</label>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>Required (*)</color></font>
              <div class="controls">
                <select name="room" id="room" class="form-control" id="exampleSelect3">
                  <option value="">Select Room</option>
                </select>
              </div>
            </div>

          </form>

        </div>
      </body>
      </html>
       

Kalian bisa melihat demonya langsung dibawah, kalian juga bisa langsung download dan mencoba sendiri tutorial diatas.

DEMO        DOWNLOAD

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda semua, Jika kalian belum paham dan ingin request post atau project silahkan tinggalkan komentar dibawah ini.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed