laravel 6 autocomplete

Laravel 6 autocomplete

Sebagai catatan cara membuat autocomplete pada laravel 6, dimulai dengan membuat project laravel dengan fresh installation, namun pada bagian bawah bisa langsung di-clone projectnya yang ada di github.

Semoga hasil dari belajar ini sukses membuat autocomplete seperti pada gambar di bawah ini :

Install Laravel

Instal fresh laravel menggunakan composer, jalankan perintah ini pada terminal atau command prompt, perintah ini akan membuat folder project yang bernama autocomplete

composer create-project --prefer-dist laravel/laravel autocomplete

Membuat Migration

Buat migration untuk membuat table propinsis, table ini berisi daftar propinsi yang ada di Indonesia pada saat tulisan ini dibuat, kembali lagi ke command line interface via terminal, tapi masuk dlu ke porject laravel yang barusan selesai kita buat,,

cd autocomplete

kemudian jalankan perintah ini untuk membuat migration

php artisan make:migration create_propinsis_table

Isi migration tersebut dengan

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreatePropinsisTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('propinsis', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('nama'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('propinsis'); } }

Buat database

Login ke database mariadb / mysql, jika menggunakan CLI (Command Line Interface), ketikkan perintah ini

mysql -uroot -p

Jalankan perintah untuk membuat database, database yang dibuat misalnya diberi nama dengan autocomplete

create database autocomplete;

Edit file .env

Buka file .env untuk merubah konfigurasi koneksi ke database

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

Jalankan Perintah Migrate

Jalankan migrate untuk membuat table pada database autocomplete
php artisan migrate

Cek apakah table sudah berhasil di-create, masuk lagi ke database mysql dengan command line atau menggunakan GUI, bisa menggunakan phpmyadmin

untuk versi comman line interface, bisa ikuti perintah ini :

mysql -uroot -p autocomplete

kemudian jalankan show tables, untuk melihat isi table pada database autocomplete :

failed_jobs migrations password_resets propinsis users list table di atas adalah contoh table yang berhasil di-create ketika perintah php artisan migrate dijalankan

Isi Data

untuk mengisi data table propinsis, bisa menggunakan script di bawah ini :

insert into propinsis (nama) values ('Aceh'); insert into propinsis (nama) values ('Bali'); insert into propinsis (nama) values ('Banten'); insert into propinsis (nama) values ('Bengkulu'); insert into propinsis (nama) values ('Gorontalo'); insert into propinsis (nama) values ('Jakarta'); insert into propinsis (nama) values ('Jambi'); insert into propinsis (nama) values ('Jawa Barat'); insert into propinsis (nama) values ('Jawa Tangah'); insert into propinsis (nama) values ('Jawa Timur'); insert into propinsis (nama) values ('Kalimantan Barat'); insert into propinsis (nama) values ('Kalimantan Selatan'); insert into propinsis (nama) values ('Kalimantan Tengah'); insert into propinsis (nama) values ('Kalimantan Timur'); insert into propinsis (nama) values ('Kalimantan Utara'); insert into propinsis (nama) values ('Kepulauan Bangka Belitung'); insert into propinsis (nama) values ('Kepulauan Riau'); insert into propinsis (nama) values ('Lampung'); insert into propinsis (nama) values ('Maluku'); insert into propinsis (nama) values ('Maluku Utara'); insert into propinsis (nama) values ('Nusa Tenggara Barat'); insert into propinsis (nama) values ('Nusa Tenggara Timur'); insert into propinsis (nama) values ('Papua'); insert into propinsis (nama) values ('Papua Barat'); insert into propinsis (nama) values ('Riau'); insert into propinsis (nama) values ('Sulawesi Barat'); insert into propinsis (nama) values ('Sulawesi Selatan'); insert into propinsis (nama) values ('Sulawesi Tengah'); insert into propinsis (nama) values ('Sulawesi Tenggara'); insert into propinsis (nama) values ('Sulawesi Utara'); insert into propinsis (nama) values ('Sumatera Barat'); insert into propinsis (nama) values ('Sumatera Selatan'); insert into propinsis (nama) values ('Sumatera Utara'); insert into propinsis (nama) values ('Yogyakarta');

pada sourcecode yang ada di github (link di bawah ini) juga disertakan script sql untuk membuat database tersebut.

Buat Model Propinsi

Buat model Porpinsi, dengan perintah ini :

php artisan make:model Propinsi

Buat Controller CariController

php artisan make:controller CariController

Isi coding CariController

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Propinsi; use DB; class CariController extends Controller { public function index() { return view('cari'); } public function autocomplete() { $term = request('term'); $result = Propinsi::where('nama', 'LIKE', '%' . $term . '%')->get(['id', 'nama as value']); return response()->json($result); } }

Buat Route :
Route::get('cari', 'CariController@index')->name('cari'); Route::get('autocomplete', ['as' => 'autocomplete', 'uses' => 'CariController@autocomplete']);

Buat View

Buat View : cari.blade.php

File cari.blade.php diletakkan pada folder resources/view

isi dari file tersebut adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>Autocompete </title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style> .container{ padding: 10%; text-align: center; } </style>
</head>
<body>
<div class="container">
<h1>Laravel 6 Autocomplete</h1>
<input type="text" class="form-control" name="term" id="q" data-action="{{ route('autocomplete') }}"> </div>
<script> $('#q').each(function() { var $this = $(this); var src = $this.data('action'); $this.autocomplete({ source: src, minLength: 2, select: function(event, ui) { $this.val(ui.item.value); $('#id').val(ui.item.id); } }); });
</script>
</body>
</html>

Jalankan aplikasi

php artisan serve

Kemudian akses aplikasi dengan url :

http://localhost:8000/cari

Hasilnya :

Source Code :

https://github.com/saifiahmada/autocomplete

Database :

ada pada sourcecode di atas