Tutorial Autocomplete Dengan Select2 dan Laravel – Kasus User Role

Pada tutorial berikut ini saya ingin membahas sederhana cara membuat autocomplete dengan Select2 pada Laravel. Pada tutorial ini diharapkan kawan-kawan bisa mengintegrasikan autocomplete ini pada project atau aplikasi Laravel kawan-kawan.

Asumsi disini adalah saya memiliki data user yang cukup banyak, jadi tidak mungkin kita tampilkan semua karena pasti akan membuat aplikasi Laravel kita jadi lambat.

Setiap user memiliki 1 role. Role ini seperti jabatan dan pada kasus autocomplete ini, data role tidak dibuat autocomplete karena data role tidak begitu banyak di aplikasi. Jika nanti kedepan banyak, mungkin saatnya kita buatkan autocomplete pada data role juga.

Pada tutorial autocomplete dengan select2 ini saya menggunakan Select2 versi 4.0.3. Laravel yang saya gunakan masih 5.4 namun tenang, versi laravel yang terbaru pun masih bisa sebenarnya karena tutorial ini sederhana. Saya buat controller, saya buat Repository / Model dan saya panggil bladenya šŸ™‚

Baik, saya Controller UserroleController.php

/**
 * Show the form for creating a new resource.
 *
 * @return \Illuminate\Http\Response
 */
public function create()
{
    $role_repository = new RoleRepository;
    $roles = $role_repository->getAll();
    return view('userrole.create', compact('roles'));
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
    $this->validate($request, [
        'role_id' => 'required',
        'user_id' => 'required',
    ]);

    $this->repo->insert($request->user_id, $request->role_id);

    return redirect('userrole');
}

/**
 * Get user from ajax
 *
 * @return json
 */
public function getAutocompleteUser() {
    $q = \Request::input('q');
    $UserRepository = new UserRepository;

    $users = $UserRepository->getAutocomplete($q);
    echo json_encode($users);
}

Kode diatas hanya berupa potongan saja. Terdapat function create, store dan getAutocompleteUser.

Di function create() saya mengambil data role dengan repo/model RoleRepository.

Lalu di function store(), saya akan menyimpan data role dan user ke Repository Role. Kawan-kawan nanti bisa sesuaikan dengan model yang kawan-kawn punya. Itu hanya menyimpan data role_id dan user_id ke table roles saja šŸ™‚

Di function getAutocompleteUser() ini memanggil data user untuk dikeluarkan dan dimanipulasi oleh select2 dalam bentuk json.

Oke kita lanjut ke file Repository/Model: UserRepository.php

/**
     * Get user autocomplete depending the keyword
     *
     * @param string $q
     * @return object
     */
    public function getAutocomplete(string $q) {
        return DB::table('users AS c')
            ->select(DB::raw('
                c.id, c.name, c.email
            '))
            ->where(function($query) use ($q) {
                $query->where('c.name', 'like', "%$q%")
                    ->orWhere('c.email', 'like', "%$q%");
            })
            ->get();
    }

Berikut ini Model/Repository User. Ada function getAutocomplete dengan parameter $q alias keyword yang nanti kita dapat dari view blade. $q itu adalah string yang diketik user ketika ingin mencari user. Querynya hanya ke name dan email. Jadi ini nanti disesuaikan ya dengan database kawan-kawan dan tentu kebutuhan aplikasi.


[crp]


Lalu kita lihat file view bladenya: create.blade.php

@extends('layouts.app')

@section('content')
<div class="panel panel-default">
    <div class="panel-heading">User Role > New</div>
    <div class="panel-body">
        {!! Form::open(array('action' => 'UserroleController@store', 'class'=>'form-horizontal', 'method' => 'POST')) !!}
            
            {{ csrf_field() }}

            <div class="form-group{{ $errors->has('user_id') ? ' has-error' : '' }}">
                <label for="user_id" class="col-md-4 control-label">User</label>

                <div class="col-md-6">
                    <select id="user_id" class="form-control select2" name="user_id">
                        <option value="">Choose User...</option>
                    </select>

                    @if ($errors->has('user_id'))
                        <span class="help-block">
                            <strong>{{ $errors->first('user_id') }}</strong>
                        </span>
                    @endif
                </div>
            </div>

            <div class="form-group{{ $errors->has('role_id') ? ' has-error' : '' }}">
                <label for="role_id" class="col-md-4 control-label">Role</label>

                <div class="col-md-6">
                    <select id="role_id" class="form-control select2" name="role_id">
                        <option value="">Choose Role...</option>
                        @foreach($roles as $role)
                        <option value="{{$role->id}}">{{$role->name}}</option>
                        @endforeach
                    </select>

                    @if ($errors->has('role_id'))
                        <span class="help-block">
                            <strong>{{ $errors->first('role_id') }}</strong>
                        </span>
                    @endif
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-6 col-md-offset-4">
                    <button type="button" class="btn btn-default" onclick="history.go(-1);">
                        <i class="fa fa-btn fa-arrow-left"></i> Back
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-btn fa-save"></i> Save
                    </button>
                </div>
            </div>
        {!! Form::close() !!}
    </div>
</div>
@endsection

@section('js_content')
<script>
    $("#user_id").select2({
        ajax: {
            url: base_url + "/userrole/getAutocompleteUser",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        placeholder: function(){
            $(this).data('placeholder');
        },
        templateResult: ResultTemplater,
        templateSelection: SelectionTemplater
    });

    function ResultTemplater(item) {
        return item.name + ' - ' + item.email;
    } 

    function SelectionTemplater(item) {
        if(typeof item.name !== "undefined") {
            return ResultTemplater(item);
        }
        return item.name;
    }
</script>
@endsection

Jika dilihat ada select dengan id #user_id yang kita jalankan prosesnya untuk memanggil url getAutocompleteUser. Terlihat datatype json dan data yang kita kirim adalah variable q. Selain itu ada templateResult dan templateSelection jika hasil dari url tersebut mengeluarkan response json yang sesuai.

Kalau dilihat, kok ga ada select2.js nya ya?

select2.js dan select2.css ada di app.blade.php karena view ini extends ke sana šŸ™‚

Jangan lupa menambahkan routes/web.php nya ya.

Route::get('/userrole',['as'=>'userrole.index', 'uses'=>'UserroleController@index']);
Route::get('/userrole/create',['as'=>'userrole.create', 'uses'=>'UserroleController@create']);
Route::post('/userrole/store',['as'=>'userrole.store', 'uses'=>'UserroleController@store']);
Route::get('/userrole/getAutocompleteUser', 'UserroleController@getAutocompleteUser');

Hasilnya bisa lihat di video ini šŸ™‚

Artikel lainnya

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: