[Laravel] Membuat Dropdown Dependency dengan Ajax Pada Contoh Pemilihan Nama Daerah

[Laravel] Membuat Dropdown Dependency dengan Ajax Pada Contoh Pemilihan Nama Daerah

   1/17/2014       Dida Nurwanda

---

Belum seminggu saya kenal dengan framework ini, entah kenapa saya mulai luluh dan suka. Entah karena rasa penasaran atau mungkin kebosenan pada framework lain. Ah ya sudahlah. Pada kesempatan ini, saya akan sedikit memberikan contoh penggunaan Dropdown Dependency dengan Ajax jQuery pada laravel. Nah loh, apa itu Dropdown Dependency ? "Mungkin" Dropdown Dependency merupakan cara atau kelakuan dropdown atau combobox dimana jika kita memilih suatu pilihan pada combobox pertama, maka otomatis combobox berikutnya akan mengikuti hasil dari pilihan pertama tai, sebaga contoh, Jika pada dropdown pertama itu pilihan indonesia, dan malaysia. maka jika kita pilih indonesia otomatis pada combobox kedua akan mengikuti hasil pilihan tersebut, yaitu nama propinsi-propinsi yang ada di indonesia, dan jika kita pilih propinsi maka otomatis pada combobox berikutnya lagi akan berisi nama kota atau kabupaten yang berada pada propinsi yang kita pilih, dan begitu seterusnya.

Ok persiapkan project laravel anda, dan atur database dengan table terserah anda. Saya disini menggunakan database 'test'. setelah itu buka command line yang telah di set pada folder project laravel anda. kemudian buat Migrate seperti berikut

php artisan migrate:make create_table_propinsi

Kemudian buka folder app/database/migrations dan buka file yang belakangnya ada nama create_table_propinsi dan edit seperti berikut

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTablePropinsi extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('propinsi', function(Illuminate\Database\Schema\Blueprint $table) {
            $table->increments('id');
            $table->string('propinsi', 50);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('propinsi');
    }

}

Selanjutnya ulangi langkah diatas tadi tetapi dengan nama file berbeda, yaitu create_table_kota dan edit lagi

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTableKota extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('kota', function(Illuminate\Database\Schema\Blueprint $table){
            $table->increments('id');
            $table->string('kota', 100);
            $table->unsignedInteger('propinsi_id');
            $table->foreign('propinsi_id')
                ->references('id')->on('propinsi')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('kota');
    }

}

ulangi lagi langkah diatas dengan nama file create_table_kecamatan

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTableKecamatan extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('kecamatan', function(Illuminate\Database\Schema\Blueprint $table){
            $table->increments('id');
            $table->string('kecamatan', 100);
            $table->unsignedInteger('kota_id');
            $table->foreign('kota_id')
                ->references('id')->on('kota')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('kecamatan');
    }

}

ulangi lagu dengan nama create_table_desa

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTableDesa extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('desa', function(Illuminate\Database\Schema\Blueprint $table){
            $table->increments('id');
            $table->string('desa', 100);
            $table->unsignedInteger('kecamatan_id');
            $table->foreign('kecamatan_id')
                ->references('id')->on('kecamatan')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('desa');
    }

}

Jika sudah, pada command line ketik

php artisan migrate

Lihat database anda, maka otomatis akan berisi table-table sesuai isi migrate di atas. Selanjutnya buka folder app/database/seeds dan buat file dengan nama AllSeeder.php dan isi seperti berikut

<?php

class AllSeeder extends Seeder {

    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
    
        // TABLE PROPINSI
        DB::table('propinsi')->insert(array(
            array('propinsi' => 'Banten')
        ));
        
        // TABLE KOTA
        DB::table('kota')->insert(array(
            array('kota' => 'Pandeglang', 'propinsi_id' => 1),
            array('kota' => 'Serang', 'propinsi_id' => 1),
        ));
        
        // TABLE KECAMATAN
        DB::table('kecamatan')->insert(array(
            array('kecamatan' => 'Picung', 'kota_id' => 1),
            array('kecamatan' => 'Munjul', 'kota_id' => 1),
            array('kecamatan' => 'Cikeusal', 'kota_id' => 2),
            array('kecamatan' => 'Curug', 'kota_id' => 2)
        ));
        
        // TABLE DESA
        DB::table('desa')->insert(array(
            array('desa' => 'Cililitan', 'kecamatan_id' => 1),
            array('desa' => 'Kadupandak', 'kecamatan_id' => 1),
            array('desa' => 'Ciodeng', 'kecamatan_id' => 2),
            array('desa' => 'Pasir Tenjo', 'kecamatan_id' => 2),
            array('desa' => 'Dahu', 'kecamatan_id' => 3),
            array('desa' => 'Katulisan', 'kecamatan_id' => 3),
            array('desa' => 'Tinggar', 'kecamatan_id' => 4),
            array('desa' => 'Cipete', 'kecamatan_id' => 4),
        ));
    }

}

Buka file DatabaseSeeder.php yang juga terdapat pada folder seeds tersebut dan edit seperti berikut

<?php

class DatabaseSeeder extends Seeder {

    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Eloquent::unguard();

        $this->call('AllSeeder');
    }

}

Pada command line ketik seperti berikut

php artisan db:seed

 Pembuatan database dan table selesai, selanjutnya buat Controller dengan nama SiteController.php dan isi seperti berikut.

<?php

class SiteController extends \BaseController {

    public function getIndex() {
        $propinsi = array('' => '');
        foreach(Propinsi::all() as $row)
            $propinsi[$row->id] = $row->propinsi;
        
        return View::make('index', array(
            'propinsi' => $propinsi
        ));
    }
    
    public function postData() {
        switch(Input::get('type')):
            case 'kota':
                $return = '<option value=""></option>';
                foreach(Kota::where('propinsi_id', Input::get('id'))->get() as $row) 
                    $return .= "<option value='$row->id'>$row->kota</option>";
                return $return;
            break;
            case 'kecamatan':
                $return = '<option value=""></option>';
                foreach(Kecamatan::where('kota_id', Input::get('id'))->get() as $row) 
                    $return .= "<option value='$row->id'>$row->kecamatan</option>";
                return $return;
            break;
            case 'desa':
                $return = '<option value=""></option>';
                foreach(Desa::where('kecamatan_id', Input::get('id'))->get() as $row) 
                    $return .= "<option value='$row->id'>$row->desa</option>";
                return $return;
            break;
        endswitch;    
    }
}

Kode diatas tampak berantakan, silahkan rapihkan sesuai selera anda.

selanjutnya buat 4 buah model dengan nama Propinsi.php, Kota.php, Kecamatan.php dan Desa.php dan isi seperti berikut.

// Untuk Propinsi.php
<?php

class Propinsi extends Eloquent {
    
    protected $table = 'propinsi';
    public $timestamps = false;
    
}

// Untuk Kota.php
<?php

class Kota extends Eloquent {
    
    protected $table = 'kota';
    public $timestamps = false;
        
}


// Untuk Kecamatan.php
<?php

class Kecamatan extends Eloquent {
    
    protected $table = 'kecamatan';
    public $timestamps = false;
    
}


// Untuk Desa.php
<?php

class Desa extends Eloquent {
    
    protected $table = 'desa';
    public $timestamps = false;
    
}

Untuk selanjutnya buka folder view dan buat file dengan nama layouts.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dropdown Depedency - Studi kasus Pemilihan Propinsi Indonesia</title>
        {{ HTML::script("assets/jquery.js") }}
    </head>
    <body>
        @yield('content')
        <script type="text/javascript">
            $(document).ready(function() {
                @yield('script')
            });
        </script>
    </body>
</html>

Buat lagi dengan nama index.blade.php

@extends('layouts')

@section('content')
{{ Form::open(array('url' => '#', 'id' => 'wilayah')) }}

<table width="500px" align="center">
    <tr>
        <td>{{ Form::label('propinsi', 'Propinsi') }}</td>
        <td>: {{ Form::select('propinsi', $propinsi, null, array('id' => 'sPropinsi', 'style'=>'width: 200px'))  }}</td>
    </tr>
    <tr>
        <td>{{ Form::label('kota', 'Kabupaten / Kota') }}</td>
        <td>: {{ Form::select('kota', array(), null, array('id' => 'sKota', 'style'=>'width: 200px'))  }}</td>
    </tr>
    <tr>
        <td>{{ Form::label('kecamatan', 'Kecamatan') }}</td>
        <td>: {{ Form::select('kecamatan', array(), null, array('id' => 'sKecamatan', 'style'=>'width: 200px'))  }}</td>
    </tr>
    <tr>
        <td>{{ Form::label('desa', 'Desa / Kelurahan') }}</td>
        <td>: {{ Form::select('desa', array(), null, array('id' => 'sDesa', 'style'=>'width: 200px'))  }}</td>
    </tr>
</table>

{{ Form::close() }}

@stop

@section('script')
$('#sPropinsi').on('change', function(){
    $.post('{{ URL::to('site/data') }}', {type: 'kota', id: $('#sPropinsi').val()}, function(e){
        $('#sKota').html(e);
    });
    
    $('#sKecamatan').html('');
    $('#sDesa').html('');
    
});
$('#sKota').on('change', function(){
    $.post('{{ URL::to('site/data') }}', {type: 'kecamatan', id: $('#sKota').val()}, function(e){
        $('#sKecamatan').html(e);
    });
    $('#sDesa').html('');
});
$('#sKecamatan').on('change', function(){
    $.post('{{ URL::to('site/data') }}', {type: 'desa', id: $('#sKecamatan').val()}, function(e){
        $('#sDesa').html(e);
    });
});
@stop

Buka file routes.php dan isi seperti berikut

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the Closure to execute when that URI is requested.
|
*/

Route::get('/', 'SiteController@getIndex');
Route::controller('site', 'SiteController');

Selesai deh, berikut penampakannya.

Download

Password : didanurwanda.blogspot.com