Membuat Dependent Dropdown di Laravel 8 dengan jQuery AJAX

Membuat Dependent Dropdown di Laravel 8 dengan jQuery AJAX

Admin
Admin・ 24 September 2021
10 min read ・ 8717 views

Laravel Dependent Dropdown - Hi Coders 👋 Di artikel ini, saya akan share tentang cara membuat dynamic dependent dropdown di laravel 8 dengan jQuery AJAX. 

Apa itu Dependent Dropdown ?

Dependent dropdown merupakan istilah yang umum digunakan untuk dropdown atau select-option yang menampilkan data-data yang bergantung pada dropdown lainnya. Contoh dependent dropdown yang paling umum kita jumpai adalah saat melakukan pendaftaran atau pengisian form yang terdapat pilihan country, state dan city. Misalnya, saat memilih country Indonesia maka data yang ditampilkan di dropdown atau select-option state akan menampilkan data-data provinsi di Indonesia. Kemudian jika kita memilih state atau provinsi Jawa Timur, maka di dropdown atau select-option city akan menampilkan data-data kota atau kabupaten yang ada di state atau provinsi Jawa Timur.

Dan di tutorial ini, kita akan simulasikan membuat dependent dropdown untuk menampilkan data-data course di dropdown atau select-option berdasarkan data parent atau course category. Jadi bayangkan saja, kita mempunyai sistem pendaftaran course sederhana, dimana saat si user akan mendaftar course tersebut, user perlu memilih course berdasarkan category (online atau offline).

Oke, langsung saja kita ke step by step membuat dynamic dependent dropdown di laravel 8 dengan jQuery AJAX. 👇

Step 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new laravel-dependent-dropdown

//via Composer
composer create-project laravel/laravel laravel-dependent-dropdown

Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita coba untuk membuat atau menampilkan data di dropdown atau select-option berdasarkan data parent atau data master (Dynamic Dependent Dropdown). Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-dependent-dropdown.

Tunggu hingga proses installasi selesai dan jika sudah selesai, jangan lupa untuk masuk ke direktori project menggunakan perintah cd laravel-dependent-dropdown.

Step 2: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_dependent_dropdown
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk menyimpan data-data sample yang akan kita gunakan pada percobaan ini yaitu data category dan course. Jika kamu menggunakan xampp sebagai local development, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel_dependent_dropdown. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Step 3: Buat Model & Migration

Kemudian kita akan membuat dua file model & migration baru yaitu Category dan Course.

php artisan make:model Category -m

Pertama, kita buat file model dan migration untuk category. Jalankan perintah artisan seperti di atas untuk generate file model dan migration category

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
   });
}

Setelah berhasil generate file model dan migration category, sekarang buka file category migration yang terletak di database/migrations/xxxx_xx_xx_xxxxxx_create_categories_table.php. Kemudian pada method up, tambahkan string name seperti kode di atas.

php artisan make:model Course -m

Untuk yang kedua, kita perlu generate file model dan migration untuk course. Untuk itu, jalankan perintah artisan seperti di atas untuk generate file course model dan migration.

public function up()
{
    Schema::create('courses', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->integer('category_id');
        $table->timestamps();
    });
}

Kemudian, buka file course migration yang baru saja digenerate dan terletak di database/migrations/xxxx_xx_xx_xxxxx_create_courses_table.php. Pada method up, tambahkan string name dan integer category_id seperti kode di atas.

php artisan migrate

Jika sudah generate dua file model dan migration untuk category dan course dan sudah melakukan setup pada kedua file migration tersebut, lanjutkan dengan menjalankan perintah php artisan migrate untuk memigrasi semua file migration ke database.

Step 4: Buat Seeder

OK. Kita sudah membuat dua tabel yaitu categories dan courses, sekarang kita akan insert data ke kedua table tersebut menggunakan seeder. 

php artisan make:seeder CategorySeeder

Yang pertama, kita perlu membuat file seeder untuk category. Jalankan perintah artisan seperti di atas untuk membuat file CategorySeeder.

public function run()
{
    \DB::table('categories')->insert([
        ['name' => 'online'],
        ['name' => 'offline']
    ]);
}

Kemudian, buka file CategorySeeder yang telah digenerate dan ubah method run menjadi seperti kode di atas.

php artisan make:seeder CourseSeeder

Selanjutnya, kita buat file CourseSeeder dengan perintah seperti di atas.

public function run()
    {
         \DB::table('courses')->insert([
            [
                'name'          => 'Laravel Master Class',
                'category_id'   => 1
            ],
            [
                'name'          => 'Laravel for Beginners',
                'category_id'   => 1
            ],
            [
                'name'          => 'CodeIgniter 4: Build a Complete Web Application from Scratch',
                'category_id'   => 1
            ],
            [
                'name'          => 'The Modern JavaScript Bootcamp',
                'category_id'   => 2
            ],
            [
                'name'          => 'JavaScript: The Advanced Concepts (2021)',
                'category_id'   => 2
            ],
            [
                'name'          => 'Learning Alpine.JS',
                'category_id'   => 2
            ],
            [
                'name'          => 'Start with TALL: Use Tailwind, Alpine, Laravel & Livewire',
                'category_id'   => 2
            ],
        ]);
}

Jika sudah berhasil melakukan generate atau membuat file CourseSeeder, sekarang buka file tersebut dan ubah method run menjadi seperti kode di atas. Disini, kita akan insert beberapa data course dengan category_id yang berbeda ke table courses.

public function run()
{
    $this->call([
        CategorySeeder::class,
        CourseSeeder::class
    ]);
}

Selanjutnya, buka file DatabaseSeeder.php dan pada method run, panggil class CategorySeeder dan CourseSeeder seperti kode di atas.

php artisan db:seed

Untuk menjalankan atau insert data category dan course ke database berdasarkan file Seeder yang telah kita buat dan kita setup, kita perlu menjalankan perintah php artisan db:seed.

Step 5: Setup Route

Route::get('/', function () {
    $category = App\Models\Category::all();
    return view('welcome',['category' => $category]);
});

Route::get('getCourse/{id}', function ($id) {
    $course = App\Models\Course::where('category_id',$id)->get();
    return response()->json($course);
});

Oke. Di step kelima ini, kita akan melakukan setup route dengan memperbarui route bawaan dari laravel dan menambahkan route baru untuk mengambil atau menampilkan data course berdasarkan data category yang dipilih.

Jadi, silahkan buka file routes/web.php dan sesuaikan kode yang ada menjadi seperti kode di atas.

Step 6: Setup View

<!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.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <title>Laravel 8: Dynamic Dependent Dropdown</title>
    </head>
    <body>
        <div class="container my-5">
            <h1 class="fs-5 fw-bold my-4 text-center">How to Create Dependent Dropdown in Laravel</h1>
            <div class="row">
                <form action="">
                    <div class="mb-3">
                        <label for="category" class="form-label">Category</label>
                        <select class="form-control" name="" id="category">
                            <option hidden>Choose Category</option>
                            @foreach ($category as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="course" class="form-label">Course</label>
                        <select class="form-control" name="course" id="course"></select>
                    </div>
                </form>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {
            $('#category').on('change', function() {
               var categoryID = $(this).val();
               if(categoryID) {
                   $.ajax({
                       url: '/getCourse/'+categoryID,
                       type: "GET",
                       data : {"_token":"{{ csrf_token() }}"},
                       dataType: "json",
                       success:function(data)
                       {
                         if(data){
                            $('#course').empty();
                            $('#course').append('<option hidden>Choose Course</option>'); 
                            $.each(data, function(key, course){
                                $('select[name="course"]').append('<option value="'+ key +'">' + course.name+ '</option>');
                            });
                        }else{
                            $('#course').empty();
                        }
                     }
                   });
               }else{
                 $('#course').empty();
               }
            });
            });
        </script>
    </body>
</html>

Langkah terakhir, kita akan mengubah semua kode yang ada di file resources/views/welcome.blade.php bawaan dari laravel menjadi seperti kode di atas. Di file welcome.blade.php ini, kita menggunakan starter template dari bootstrap 5 dan tambahan menggunakan jQuery.

Kemudian kita menambahkan dua dropdown atau select-option untuk menampilkan data category dan course. Selain itu, kita juga menggunakan jQuery AJAX untuk dapat menampilkan data course di dropdown atau select-option secara dinamis berdasarkan category yang dipilih.

Dengan script jQuery AJAX tersebut, misalnya ketika user memilih category online (id 1) maka id category tersebut (1) akan dilempar ke route getCourse yang selanjutnya digunakan sebagai parameter untuk mengambil atau menampilkan data course yang memiliki value category_id 1 (atau online) dan data tersebut akan ditampilkan di dropdown atau select-option course.

Step 7: Testing

Sampai diakhir artikel tutorial ini, kita bisa melakukan testing untuk menampilkan data di dropdown atau select-option berdasarkan parent (Dynamic Dependent Dropdown). Untuk mengujinya, silahkan jalankan laravel project terlebih dahulu dengan perintah php artisan serve, kemudian coba buka laravel project di browser.

Pertama, kita coba pilih salah satu category, maka data-data di dropdown atau select-option course akan menampilkan data-data course yang mempunyai value category_id sama dengan category yang kamu pilih sebelumnya.

Cukup sekian artikel kali ini yang membahas tentang cara membuat dynamic dependent dropdown di laravel 8 dengan jQuery AJAX. Semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. 👋

Tinggalkan Komentar
Loading Comments