Dropdown Dinamis Dengan Laravel Jquery Ajax

13 May 2021 | Tags: , ,

Pada tutorial kali ini kita akan membahas bagaimana cara membuat dropdown dinamis dengan Laravel Jquery Ajax. Dropdown dinamis berguna dalam mengambil data dari tabel yang berrelasi misalnya kabupaten dengan kecamatan, kategori dengan produk. Dengan cara ini dropdown akan terisi secara dinamis tanpa harus me-refresh halaman.
Dropdown Dinamis Dengan Laravel Jquery Ajax

Contoh kasus yang akan kita ulas adalah bagaimana menerapkan dropdown dinamis untuk relasi antara kabupaten, kecamatan dan desa. Begitu kita memilih salah satu kabupaten, maka pada dropdown kecamatan akan terisi daftar kecamatan yang sesuai dengan kabupaten yang dipilih. Begitu juga daftar desa akan difilter sesuai dengan kecamatan yang dipilih.

Implementasi kasus ini menggunakan Laravel 8, database MariaDB atau MySql.

Adapun langkah-langkahnya adalah sebagai berikut:

  1. Persiapan Database
  2. Pembuatan Model
  3. Pembuatan Controller
  4. Pembuatan View
  5. Pengaturan Route
  6. Pembuatan File Javascript

Persiapan Database

Pada tahap awal anda buat dulu sebuah database. Pada materi ini database diberi nama: dbwilayah. berikutnya atur file .env pada bagian database sesuai dengan konfigurasi pada komputer anda. Misalnya:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dbwilayah
DB_USERNAME=root
DB_PASSWORD=info

Tabel yang kita perlukan ada 3 yaitu: tbl_kabupaten, tbl_kecamatan dan tbl_desa. Untuk membuat tabel yang diperlukan anda bisa menggunakan fasilitas migration atau langsung membuatnya di MariaDB/MySql. Adapun relasinya dapat dilihat pada gambar berikut.Dropdown Dinamis Dengan Laravel Jquery Ajax: ERD

Tabel: tbl_kabupaten 

CREATE TABLE `tbl_kabupaten` (
  `kab_kode` char(4) PRIMARY KEY,
  `kab_nama` varchar(100) DEFAULT NULL,
  `kab_prov` char(2) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Tabel: tbl_kecamatan

CREATE TABLE `tbl_kecamatan` (
  `kec_kode` char(7) PRIMARY KEY,
  `kec_nama` varchar(100) DEFAULT NULL,
  `kec_kab` char(4) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Tabel: tbl_desa

CREATE TABLE `tbl_desa` (
  `desa_kode` char(10) PRIMARY KEY,
  `desa_nama` varchar(100) DEFAULT NULL,
  `desa_kec` char(7) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Pembuatan Model

Untuk mengakses database kita akan menggunakan Eloquent, sehingga perlu membuat 3 buah model yaitu: Kabupaten, Kecamatan, dan Desa. Untuk membuat model bisa dengan menggunakan perintah PHP Artisan maupun manual.

Model: Kabupaten

Pada command line ketikkan perintah:

php artisan make:model Kabupaten

Sehingga akan terbentuk model dengan nama Kabupaten.php. Berikutnya ubah file tersebut menjadi:

<?php
//Lokasi File : App/Models/Kabupaten.php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Kabupaten extends Model
{
    use HasFactory;
    protected $table = 'tbl_kabupaten';
    protected $fillable = [
        'kab_nama',
        'kab_prov'
    ];
    protected $primaryKey = 'kab_kode';
    public $incrementing = false;
    protected $keyType = 'string';
}

Model: Kecamatan

Pada command line ketikkan perintah:

 
php artisan make:model Kecamatan

Edit file Kecamatan.php menjadi:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Kecamatan extends Model
{
    use HasFactory;
    protected $table = 'tbl_kecamatan';
    protected $fillable = [
        'kec_nama',
        'kec_kab'
    ];
    protected $primaryKey = 'kec_kode';
    public $incrementing = false;
    protected $keyType = 'string';
}

Model: Desa

Pada command line ketikkan perintah:

 
php artisan make:model Desa

Ubah file Desa.php menjadi:

<?php
//Lokasi File: App/Models/Desa.php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Desa extends Model
{
    use HasFactory;
    protected $table = 'tbl_desa';
    protected $fillable = [
        'desa_nama',
        'desa_kec'
    ];
    protected $primaryKey = 'desa_kode';
    public $incrementing = false;
    protected $keyType = 'string';
}

Pembuatan Controller

Pada materi ini kita akan membuat sebuah controller untuk menangani tampilan awal dan akses data dengan nama HomeController. Pada command line ketikkan perintah:

php artisan make:controller HomeController

Kita ubah HomeController menjadi:

<?php
//Lokasi File: app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;
use App\Models\Kabupaten;
use App\Models\Kecamatan;
use App\Models\Desa;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index(){
        $kabupaten = Kabupaten::all();
        return view('home',['page_title'=>'Daftar Kabupaten','kabupaten'=>$kabupaten]);
    }
    public function getKecamatan(Request $request){
        $kecamatan = Kecamatan::where("kec_kab",$request->kabID)->pluck('kec_kode','kec_nama');
        return response()->json($kecamatan);
    }
    public function getDesa(Request $request){
        $desa = Desa::where("desa_kec",$request->kecID)->pluck('desa_kode','desa_nama');
        return response()->json($desa);
    }
}

Pada HomeController tersebut semua model yang kita buat dipanggil semuanya. Controller ini terdiri dari 3 method yaitu: index, getKecamatan, dan getDesa. Method index berfungsi untuk memanggil view untuk tampilan awal. Method getKecamatan berfungsi untuk menghasilkan data kecamatan sesuai dengan kabupaten yang dipilih dalam format JavaScript Object Notation (JSON). Dimana JSON ini akan digunakan pada file Javascript untuk mengisi dropdown kecamatan secara dinamis. Terakhir method getDesa akan menghasilkan data JSON desa sesuai dengan kecamatan yang dipilih.

Pembuatan View

Disini kita akan membuat sebuah user interfaces yang berisi form dropdown dinamis. View ini menggunakan Bootstrap versi 5.0. Adapun Jquery yang digunakan versi 3.6.0. View kita beri nama dengan : home.blade.php (Lokasi: resources/views/home.blade.php)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <title>Form Dinamis</title>
  </head>
  <body class="bg-secondary text-white">
    <div class="container">
      <h1 class="text-center mt-5">Dropdown Dinamis Dengan Laravel Jquery Ajax</h1>
      <hr />
      <form>
      <div class="row mb-3">
      <div class="col-3">
        <label  class="form-label">Kabupaten</label>
        </div>
        <div class="col-9">
          <select class="form-select form-select-lg" name="kabupaten" id="kabupaten">
            <option selected>---Pilih Kabupaten/Kota---</option>
            @foreach ($kabupaten as $r_kab)
                <option  value="{{$r_kab->kab_kode}}">{{$r_kab->kab_nama}}</option>
            @endforeach
          </select>
          </div>
        </div>

        <div class="row mb-3">
        <div class="col-3">
        <label  class="form-label">Kecamatan</label>
        </div>
        <div class="col-9">
          <select class="form-select form-select-lg" name="kecamatan" id="kecamatan">
            <option selected>---Pilih Kecamatan---</option>
          </select>
        </div>
        </div>

        <div class="row mb-3">
        <div class="col-3">
        <label  class="form-label">Desa</label>
        </div>
        <div class="col-9">
          <select class="form-select form-select-lg" name="desa" id="desa">
            <option selected>---Pilih Desa---</option>
          </select>
        </div>
        </div>

      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{url('wilayah.js')}}"></script>
  </body>
</html>

Pengaturan Route

Adapun route yang kita perlukan adalah seperti berikut:

<?php

//Lokasi: routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;


Route::get('/', [HomeController::class, 'index']);
Route::get('/getkecamatan', [HomeController::class, 'getKecamatan']);
Route::get('/getdesa', [HomeController::class, 'getDesa']);

Pembuatan File Javascript

Langkah terakhir dari materi ini adalah membuat file Javascript berupa Jquery. Adapun perintahnya adalah sebagai berikut:

//Lokasi: public/wilayah.js
$('#kabupaten').change(function(){
    var kabID = $(this).val();    
    if(kabID){
        $.ajax({
           type:"GET",
           url:"/getkecamatan?kabID="+kabID,
           dataType: 'JSON',
           success:function(res){               
            if(res){
                $("#kecamatan").empty();
                $("#desa").empty();
                $("#kecamatan").append('<option>---Pilih Kecamatan---</option>');
                $("#desa").append('<option>---Pilih Desa---</option>');
                $.each(res,function(nama,kode){
                    $("#kecamatan").append('<option value="'+kode+'">'+nama+'</option>');
                });
            }else{
               $("#kecamatan").empty();
               $("#desa").empty();
            }
           }
        });
    }else{
        $("#kecamatan").empty();
        $("#desa").empty();
    }      
   });

   $('#kecamatan').change(function(){
    var kecID = $(this).val();    
    if(kecID){
        $.ajax({
           type:"GET",
           url:"getdesa?kecID="+kecID,
           dataType: 'JSON',
           success:function(res){               
            if(res){
                $("#desa").empty();
                $("#desa").append('<option>---Pilih Desa---</option>');
                $.each(res,function(nama,kode){
                    $("#desa").append('<option value="'+kode+'">'+nama+'</option>');
                });
            }else{
               $("#desa").empty();
            }
           }
        });
    }else{
        $("#desa").empty();
    }      
   });

File tersebut berisi 2 event function yaitu ketika perubahan pada kabupaten dan kecamatan. Pada saat memilih salah satu kabupaten pada dropdown, maka AJAX akan mengakses URL getkecamatan. URL getkecamatan akan mengakses method getKecamatan dari HomeController yang menghasilkan JSON data kecamatan. Data kecamatan yang dihasilkan akan diisi pada dropdown kecamatan secara dinamis. Begitu juga ketika mengakses getdesa, proses kerjanya sama.

Untuk menjalankan aplikasi, pada command line kita perintah: php artisan serve.

Kalau berhasil, mungkin anda bisa mengembangkannya dengan mulai dari memilih provinsi terlebih dahulu. Jika anda memahami konsepnya, seharusnya tidak akan menemui kendala berarti. Selamat mencoba

Download Dropdown Dinamis Dengan Laravel Jquery Ajax

Download

Klik tombol Facebook / Twitter / Google + untuk Download


Komentar via Facebook tentang Dropdown Dinamis Dengan Laravel Jquery Ajax

Komentar tentang Dropdown Dinamis Dengan Laravel Jquery Ajax

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *