Jumat, 17 Januari 2014

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
Download
Password : didanurwanda.blogspot.com

12 komentar:

  1. wah mantep mas bro dida :d ijin unduh

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. gimana caranya supaya halaman edit.blade.php saya hanya menampilkan data kecamatan berdasarkan data kabupaten yang terpilih saja, misal :

      Kabupaten : Kediri, Ngawi
      Kecamatan : Kediri memiliki [Timur, Selatan, Utara] sedangkan Ngawi [Barat]

      case yang sekarang di halaman edit.blade.php menampilkan data kecamatan semuanya, padahal data kecamatan tersebut tidak berada di kabupaten yang terpilih itu.

      Hapus
  3. Assalamu'alaikum,

    saya telah mencoba source diatas pada laravel 5, tapi ada yang erorr,
    pilihan di subkategorinya tidak mau..

    mohon bantuannya

    terima kasih

    BalasHapus
    Balasan
    1. route yang saya buat

      Route::resource('site', SiteController);

      Hapus
    2. solved ga bos masalahnya ?

      Hapus
    3. ambil idenya aja, mungkin cara pemakaian laravel 4 dan 5 berbeda ...

      Hapus
  4. gan itu untuk table yang sama yah ? kalau untuk table yang berbeda gimana yah gan

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.