Cara membuat AutoSelected dengan Ajax & PHP

Selamat malam semuanya. pada malam hari ini saya akan share Cara membuat AutoSelected dengan Ajax & PHP. Autoselected adalah sebuah tag select di dalam html yang digunakan untuk membuat form yang didalamnya berupa list pilihan yang dapat dipilih oleh user. gunanya autoselected ini untuk memaksa user untuk memilih salah satu dari pilihan yang tersedia didalam sistem.

Lalu cara membuatnya bagaimana ? simak tutorial berikut ini

Untuk tutorial kali ini kita akan membuat Autoselected benua dengan negara

Langkah pertama kita buat databasenya terlebih dahulu, buka xampp control panel kemudian nyalakan apache dan mysqlnya. Buka browser ketik http://localhost/phpmyadmin
Buat database baru dengan nama autoselected

Buka tab SQL lalu copy paste script dibawah ini

-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: 01 Nov 2019 pada 19.33
-- Versi Server: 10.1.25-MariaDB
-- PHP Version: 5.6.31

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
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: `autoselected`
--

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

--
-- Struktur dari tabel `benua`
--

CREATE TABLE `benua` (
  `id` int(11) NOT NULL,
  `nama_benua` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `benua`
--

INSERT INTO `benua` (`id`, `nama_benua`) VALUES
(1, 'Asia Tenggara'),
(2, 'Asia Timur'),
(3, 'Asia Barat'),
(4, 'Asia Selatan');

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

--
-- Struktur dari tabel `negara`
--

CREATE TABLE `negara` (
  `id` int(11) NOT NULL,
  `nama_negara` varchar(200) NOT NULL,
  `benua_id` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `negara`
--

INSERT INTO `negara` (`id`, `nama_negara`, `benua_id`) VALUES
(1, 'Indonesia', '1'),
(2, 'Thailand', '1'),
(3, 'Jepang', '2'),
(4, 'Korea Selatan', '2'),
(5, 'oman', '3'),
(6, 'Qatar', '3'),
(7, 'Malaysia', '1'),
(8, 'Vietnam', '1'),
(9, 'China', '2'),
(10, 'Hongkong', '2'),
(11, 'Arab Saudi', '3'),
(12, 'Bahrain', '3'),
(13, 'Timor Leste', '1'),
(14, 'Laos', '1'),
(15, 'India', '4'),
(16, 'Bangladesh', '4'),
(17, 'Maladewa', '4'),
(18, 'Afganistan', '4'),
(19, 'Irak', '3'),
(20, 'Iran', '3'),
(21, 'Suriah', '3'),
(22, 'Yaman', '3'),
(23, 'Brunei Darussalam', '1'),
(24, 'Myanmar', '1'),
(25, 'Filipina', '1'),
(26, 'Singapura', '1'),
(27, 'Macau', '2'),
(28, 'Taiwan', '2'),
(29, 'Mongolia', '2'),
(30, 'Korea utara', '2');

--
-- Indexes for dumped tables
--

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

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `benua`
--
ALTER TABLE `benua`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
--
-- AUTO_INCREMENT for table `negara`
--
ALTER TABLE `negara`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=31;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 */;

Kalau sudah klik tombol Kirim

Buka text editor andalan kalian , kalau saya disini pakai Sublime Text buat file koneksi.php copy paste script di bawah ini kemudian buat folder di htdoc dengan nama autoselected

<?php
$con = mysqli_connect('localhost','root','','autoselected');
if(!$con){
die(mysqli_connect_error());
}

?>

Selanjutnya buat file Index.php Silahkan copy paste script dibawah ini dan simpan di folder autoselected yang tadi kita buat di htdoc

<?php 
require_once "koneksi.php";
 ?>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Auto Selected Benua & Negara</title>
    <link href="https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

  <div class="container">
  <h4>Auto Selected Benua & Negara With Ajax & PHP</h4>
  <div class="form-group">
  <div class="col-md-5">
  <label>Pilih Benua</label>
  <?php 
  $sql_benua = mysqli_query($con, 'select * from benua');    
  ?>
    <form action="" method="post">
    <select class="form-control" name="benua" id="benua">
      <option value="">Pilih Benua</option>
      <?php while($row_benua = mysqli_fetch_array($sql_benua)){ ?>
      <option value="<?php echo $row_benua['id'] ?>"><?php echo $row_benua['nama_benua'] ?></option>
    <?php } ?>
    </select>
    <label>Negara</label>
        <select class="form-control" name="negara" id="negara">
      <option value="">Pilih Negara</option>
      <option></option>
    </select>
    </form>
  </div>
  </div>


    </div> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


    <script>
      $(document).ready(function(){
        $('#benua').change(function(){
      var id_benua  = $(this).val();  
      $.ajax({
            type: 'POST',
            url: 'negara.php',
            data: 'benua_id='+id_benua,
            success: function(response){
            $('#negara').html(response);
            }

            });  
          })
      });

    </script>
  </body>
</html>

Langkah terakhir buat file negara.php Silahkan copy paste script dibawah ini dan simpan di folder autoselected yang tadi kita buat di htdoc

<?php 
require_once "koneksi.php";
$benua_id  = $_POST['benua_id'];
$sql_negara = mysqli_query($con, "select * from negara where benua_id = $benua_id");
echo '<option>Pilih Negara</option>';
while($row_negara = mysqli_fetch_array($sql_negara)){
echo '<option value="'.$row_negara['id'].'">'.$row_negara['nama_negara'].'</option>';
}
 ?>

coba kalian test dibrowser dengan cara ketik di address bar http://localhost/autoselected/ nanti akan seperti ini

Jika kalian ingin filenya, silahkan Download Disini atau Download Disini
Password : muhdannyblog

Mungkin Cukup Sekian Artikel Cara membuat AutoSelected dengan Ajax & PHP, Kurang lebihnya mohon maaf.
Jika ada yang ingin di tanyakan silahkan komentar dibawah

Wassalamualaikum warahmatullahi wabarakatuh

Danny Blog

Ad Unit (Iklan) BIG

Cara membuat AutoSelected dengan Ajax & PHP

Related Posts

Comments

Post a Comment

Translate

Kategori

Popular