laravel 6 autocomplete | java php laravel linux mysql sql bootstrap html css query java php laravel linux mysql sql bootstrap html css query: laravel 6 autocomplete

java linux php mysql bootstrap sql sping boot linuxmint laravel



Senin, 09 Desember 2019

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 :

Database :
ada pada sourcecode di atas

Tidak ada komentar:

Posting Komentar

saifiahmada.com adalah blog belajar programming Indonesia, membahas lengkap materi bahasa pemrograman: code HTML, CSS, Bootstrap, Desain, PHP, MySQL, coding Java, Query, SQL, dan dunia linux