Blog

You are currently viewing Tutorial Menampilkan Dropdown List Bertingkat Menggunakan PHP MySQL dan Ajax

Tutorial Menampilkan Dropdown List Bertingkat Menggunakan PHP MySQL dan Ajax

Tutorial Menampilkan Dropdown List Bertingkat Menggunakan PHP MySQL dan Ajax – Hello teman-teman semua, bagaimana nih kabarnya? Semoga diberikan kesehatan selalu ya. Pada artikel kali ini kita akan membahas materi tentang menampilkan data dari database ke dalam Dropdown List menggunakan PHP dan Ajax. Pada tutorial ini kita akan menampilkan data wilayah ke dalam 2 level yaitu provinsi dan kabupaten/kota ke dalam dropdown List. Data kabupaten/kota akan muncul berdasarkan data provinsi yang dipilih melalui dropdown list.

Baca Juga: Membuat CRUD (Create, Read, Update, Delete) Dengan PHP Dasar – Menampilkan Data Dari Database

Jadi pada tutorial kita kali ini, kita akan membahas cara menampilkan data dari database MySQL ke dalam dropdown list kita. Sebelum kita masuk ke dalam pembahasan, pertama-tama kita harus menyiapkan file project dan database yang kita gunakan.

Persiapan Membuat Database dan Struktur File

Sebelum Memulai Proses Pembuatan Project kita ini, Pertama-Tama Kita Harus Mempersiapkan Beberapa File Yang Kita Butuhkan Pada Project Kita. Adapun File Project Ini Antara Lain:

  1. koneksi.php
  2. getDataKabupaten.php
  3. index.php

Karena Kita Akan Bermain Dengan Database, Maka Yang Menjadi Langkah Awal Yang Harus Kita Siapkan Yaitu Mempersiapkan Database Yang Akan Digunakan. Pada Artikel Kali Ini Kita Akan Membuat Database Dengan Nama db_wilayah. Dan Membuat 2 Tabel Dengan nama tb_provinsi dan tb_kabupaten_kota. Jadi Langkah-Langkah Yang Harus Kita Siapkan Terlebih Dahulu Adalah:

  1. Membuat Database Dengan Nama tb_wilayah
  2. Membuat Tabel Dengan Nama tb_provinsi Yang Berisikan Kolom (id_prov Dan provinsi)
  3. Membuat Tabel Dengan Nama tb_kabupaten_kota Yang Berisikan Kolom (id_kab, kabupaten_kota Dan id_prov)

Tetapi Teman-Teman Juga Dapat Langsung Membuat Database Dengan Sintak Dibawah Ini. Berikut Ini File Sql Yang Bisa Teman-Teman Langsung Import Pada Database. Cara Untuk Melakukan Import Database Tersebut Pertama-Tama Kita Buat Dulu Nama Database. Lalu Pilih Menu Import Dan Upload File .Sql Dibawah Ini. Tetapi Teman-Teman Juag Dapat Melakukan Copy Paste Sql Berikut Ini Pada Kolom Editing Query Database Teman-Teman.

-- phpMyAdmin SQL Dump
-- version 4.8.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jul 18, 2022 at 08:57 AM
-- Server version: 10.1.34-MariaDB
-- PHP Version: 5.6.37

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

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

--
-- Table structure for table `tb_kabupaten_kota`
--

CREATE TABLE `tb_kabupaten_kota` (
  `id_kab` varchar(25) NOT NULL,
  `kabupaten_kota` varchar(255) NOT NULL,
  `id_prov` varchar(25) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_kabupaten_kota`
--

INSERT INTO `tb_kabupaten_kota` (`id_kab`, `kabupaten_kota`, `id_prov`) VALUES
('1.1', 'KAB. ACEH SELATAN', '1'),
('1.2', 'KAB. ACEH TENGGARA', '1'),
('1.3', 'KAB. ACEH TIMUR', '1'),
('1.4', 'KOTA BANDA ACEH', '1'),
('1.5', 'KOTA LANGSA', '1'),
('2.1', 'KAB. TAPANULI TENGAH', '2'),
('2.2', 'KAB. TAPANULI UTARA', '2'),
('2.3', 'KAB. TAPANULI SELATAN', '2'),
('2.4', 'KOTA MEDAN', '2'),
('2.5', 'KOTA PEMATANGSIANTAR', '2'),
('3.1', 'KAB. KAMPAR', '3'),
('3.2', 'KAB. INDRAGIRI HULU', '3'),
('3.3', 'KAB. BENGKALIS', '3'),
('3.4', 'KOTA PEKANBARU', '3'),
('3.5', 'KOTA DUMAI', '3'),
('4.1', 'KAB. PESISIR SELATAN', '4'),
('4.2', 'KAB. SOLOK', '4'),
('4.3', 'KAB. SIJUNJUNG', '4'),
('4.4', 'KOTA PADANG', '4'),
('4.5', 'KOTA BUKITTINGGI', '4'),
('5.1', 'KAB. BINTAN', '5'),
('5.2', 'KAB. KARIMUN', '5'),
('5.3', 'KAB. NATUN', '5'),
('5.4', 'KOTA BATAM', '5'),
('5.5', 'KOTA TANJUNG PINANG', '5');

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

--
-- Table structure for table `tb_provinsi`
--

CREATE TABLE `tb_provinsi` (
  `id_prov` varchar(25) NOT NULL,
  `provinsi` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_provinsi`
--

INSERT INTO `tb_provinsi` (`id_prov`, `provinsi`) VALUES
('1', 'Aceh'),
('2', 'Sumatera Utara'),
('3', 'Riau'),
('4', 'Sumatera Barat'),
('5', 'Kepulauan Riau');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_kabupaten_kota`
--
ALTER TABLE `tb_kabupaten_kota`
  ADD PRIMARY KEY (`id_kab`);

--
-- Indexes for table `tb_provinsi`
--
ALTER TABLE `tb_provinsi`
  ADD PRIMARY KEY (`id_prov`);
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 */;

Kebetulan Disini Kita Telah Memiliki Beberapa Record Data. Jika Belum Memiliki Beberapa Record Data, Silahkan Teman-Teman Input Terlebih Dulu Beberapa Data Untuk Memastikan Bahwa Data Yang Kita Inginkan Tersebut Akan Muncul Pada Website Kita Nantikan.

Persiapan Membuat Website PHP

Setelah Proses Pembuatan Database Selesai, Selanjutnya Kita Akan Membuat Sebuah File PHP Baru Yang Fungsinya Untuk Menampung Segala Fungsi Yang Kita Butuhkan Pada Pembuatan Fungsi Database Menggunakan PHP. Pada Praktikum Kali Ini Kita Akan Membuat Seluruh Fungsi Database Kita Kedalam Sebuah METHOD. Hal Ini Bertujuan Untuk Mempermudah Dalam Proses Pembuatan Website Nantinya.

Sekarang Kita Buat Nama File PHP Baru Ini Dengan Nama Koneksi.php. Nantinya Seluruh METHOD Yang Kita Gunakan Akan Disimpan Pada File Ini.

<?php 

function koneksiDB() {
    
    $host = "localhost";
    $username = "root";
    $password = "";
    $db = "db_wilayah";

    $conn = mysqli_connect($host, $username, $password, $db);
    
    if(!$conn) {
        die("Koneksi Database Gagal : " .mysqli_connect_error());
    } else {
        return $conn;
    }
}

function selectAllData() {
    $query = "SELECT * FROM tb_provinsi";
    $result = mysqli_query(koneksiDB(), $query);
    return $result;
}

function selectDataKabupaten($id_prov) {
    $query = "SELECT * FROM tb_kabupaten_kota WHERE id_prov = '$id_prov'";
    $result = mysqli_query(koneksiDB(), $query);
    return $result;
}

 ?>

Pada file ini terdapat 3 buah method atau function di dalamnya. Function koneksiDB() digunakan untuk menghubungkan project kita dengan database yang kita miliki. Pada function ini kita harus mendefinisikan pengaturan database yang kita gunakan seperti host database, username, password dan nama database yang digunakan. Function selectAllData() digunakan untuk menampilkan seluruh data provinsi dari tabel tb_provinsi. sedangkan Function selectDataKabupaten() digunakan untuk menampilkan data kabupaten berdasarkan id dari provinsi yang dipilih melalui dropdown nantinya.

Baca Juga: Tutorial Membuat Fungsi Login dan Registrasi Menggunakan Codeigniter 3

Selanjutnya kita buat file php baru nama index.php pada project kita. File ini digunakan untuk menampilkan halaman tampilan dari website dropdown list yang kita buat.

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

    <style type="text/css" media="screen">
        body {
            background: #F2F2F2;
            min-height: 90vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .kotak {
            width: 450px;
            border: 1px solid black;
            margin: 80px auto;
            padding: 20px;
            border-radius: 10px;
            background-color: black;
        }

        h1 {
            text-align: center;
            color: white;
        }

        .FormSelect {
            padding: 10px;
            display: block;
            width: 100%;
            font-size: 15px;
            border-radius: 5px;
            border: none;
            font-weight: bold;
        }

        p {
            font-weight: bold;
            margin-bottom: 5px;
            color: white;
        }
    </style>
    <script type="text/javascript">
        function getDataKabupaten(data) {
            var id = "id_prov=" + data;
            $.ajax({
                type: 'POST',
                url: "getDataKabupaten.php",
                data: id,
                success: function(hasil) {
                    $("#kab_kota").html(hasil);
                }
            });
            }
    </script>
</head>
<body>
    <div class="kotak">
        <h1>TUTORIAL DROPDOWN</h1>
        <hr>
        <p>Provinsi :</p>
        <select class="FormSelect" onchange="getDataKabupaten(this.value)">
            <option value="-">= Pilih Provinsi =</option>
            <?php 
                include 'koneksi.php';
                $result = selectAllData();
                while ($row = mysqli_fetch_assoc($result)) {
             ?>

                <option value="<?= $row["id_prov"] ?>"><?= $row["provinsi"] ?></option>

            <?php } ?>
        </select>
        <p>Kabupaten/Kota :</p>
        <select class="FormSelect" id="kab_kota">
            <option value="tambah">= Pilih Kabupaten/Kota =</option>
        </select>
    </div>
</body>
</html>

perhatikan pada sintak diatas, disini kita menggunakan library jquery untuk proses pengambilan data kabupaten dari file php lain menggunakan fungsi ajax. Untuk library Jquery ini dapat dilihat dan di copy-paste dari sintak dibawah ini.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Pada halaman website ini kita juga menambahkan fungsi CSS untuk memperbagus tampilan dari dropdown list yang kita gunakan.

<style type="text/css" media="screen">
    body {
        background: #F2F2F2;
        min-height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .kotak {
        width: 450px;
        border: 1px solid black;
        margin: 80px auto;
        padding: 20px;
        border-radius: 10px;
        background-color: black;
    }

    h1 {
        text-align: center;
        color: white;
    }

    .FormSelect {
        padding: 10px;
        display: block;
        width: 100%;
        font-size: 15px;
        border-radius: 5px;
        border: none;
        font-weight: bold;
    }

    p {
        font-weight: bold;
        margin-bottom: 5px;
        color: white;
    }
</style>

Data yang akan ditampilkan dari database ini kita letakkan ke dalam tag <body>. Dapat kita lihat pada sintak ini, kita menggunakan 2 Dropdown list yang mana untuk dropdown List pertama digunakan untuk menampilkan data provinsi. Sedangkan untuk dropdown list kedua digunakan untuk menampilkan data kabupaten/kota berdasarkan provinsi yang kita pilih.

<div class="kotak">
    <h1>TUTORIAL DROPDOWN</h1>
    <hr>
    <p>Provinsi :</p>
    <select class="FormSelect" onchange="getDataKabupaten(this.value)">
        <option value="-">= Pilih Provinsi =</option>
        <?php 
            include 'koneksi.php';
            $result = selectAllData();
            while ($row = mysqli_fetch_assoc($result)) {
         ?>

            <option value="<?= $row["id_prov"] ?>"><?= $row["provinsi"] ?></option>

        <?php } ?>
    </select>
    <p>Kabupaten/Kota :</p>
    <select class="FormSelect" id="kab_kota">
        <option value="tambah">= Pilih Kabupaten/Kota =</option>
    </select>
</div>

Pada dropdown List pertama, kita menggunakan fungsi Onchange. fungsi inilah yang kita gunakan untuk proses pengiriman data Id provinsi yang kita pilih untuk menampilkan data kabupaten/kota berdasarkan pilihan provinsi kita. Sedangkan untuk dropdown List kedua kita tambahkan parameter id dengan nama kab_kota sebagai penanda dimana data kabupaten/kota akan kita tampilkan.

Proses untuk menampilkan data kabupaten/kota berdasarkan provinsi yang dipilih ini, kita menggunakan sintak AJAX dari Javascript. Adapun Sintaknya dapat dilihat pada sintak dibawah ini.

<script type="text/javascript">
    function getDataKabupaten(data) {
        var id = "id_prov=" + data;
        $.ajax({
            type: 'POST',
            url: "getDataKabupaten.php",
            data: id,
            success: function(hasil) {
                $("#kab_kota").html(hasil);
            }
        });
        }
</script>

Perhatikan sintak diatas, dapat kita lihat kita mengirim data id_prov ke halaman getDataKabupaten.php. Data id_prov ini didapatkan dari fungsi onChange pada sintak Dropdown List pertama tadi.

Selanjutnya kita buat file PHP baru dengan nama getDataKabupaten.php yang digunakan untuk menampilkan data kabupaten/kota yang dipilih berdasarkan provinsi.

<?php 
    include 'koneksi.php';
    $id_prov = $_POST['id_prov'];
 ?>

<select class="FormSelect" id="kab_kota">
    <option value="tambah">= Pilih Kabupaten/Kota =</option>
    <?php 
        $result = selectDataKabupaten($id_prov);
        while ($row = mysqli_fetch_assoc($result)) {
     ?>

        <option value="<?= $row["id_kab"] ?>"><?= $row["kabupaten_kota"] ?></option>

    <?php } ?>
</select>

Kemudian Kita Jalankan Project Ini Pada Browser Kita Dengan Mengakses Halaman Localhost Dan Panggil Folder Project Kita.

http://localhost/LatihanPHP/DropdownList/

Disini Contohnya Nama Project Saya Yaitu DropdownList. Jadi Kita Panggil Saja Nama Project Kita Pada Browser Kita. Setelah Itu Akan Muncul Hasil Seperti Berikut Ini.

Sekarang kita coba memilih salah satu provinsi yang kita inginkan. Disini contohnya saya memilih Provinsi Riau setelah itu pada bagian Dropdown List Kabupaten/Kota akan menampilkan informasi berupa kabupaten/kota yang hanya ada di Provinsi Riau tersebut.

Sekian Tutorial Menampilkan Dropdown List Bertingkat Menggunakan PHP MySQL dan Ajax Pada WEBSITE kita. Untuk Project Lengkapnya Dapat Didownload Pada Link ((GITHUB)) Kami Ini.

Tags: , , , ,

Leave a Reply