andriajah Fri Jun 2022 1 year ago

Cara Membuat Dropdown Select2 di Laravel 9 Livewire

Laravel Livewire select2 dropdown tutorial pencarian dinamis; dalam contoh lengkap ini, kita akan memahami cara membuat dropdown dinamis menggunakan plugin jQuery Select2 di aplikasi Laravel Livewire.

Contoh dropdown laravel livewire select2 ini tidak lengkap tanpa paket Select2.

Paket berbasis JavaScript Select2 memberikan solusi yang tidak rumit untuk membuat kotak pilih yang dapat disesuaikan bersama dengan dukungan terbaik untuk pencarian, penandaan, kumpulan data jarak jauh, pengguliran tak terbatas, dan banyak opsi lain yang sangat dimanfaatkan.

Berikut adalah langkah-langkah bertahap yang menjelaskan secara mendalam tentang contoh sederhana pencarian dinamis dropdown select2 di aplikasi livewire laravel:

Buat Proyek Laravel

Mulailah langkah pertama dengan bergerak menuju konsol dan jalankan perintah untuk membuat aplikasi laravel baru:

composer create-project --prefer-dist laravel/laravel d5-demo

Tambahkan Paket Livewire

Livewire adalah kerangka kerja full-stack yang fleksibel untuk ekosistem Laravel, yang membantu membangun antarmuka yang menarik tanpa meremehkan kemudahan Laravel.

Jadi, jalankan perintah yang disediakan untuk menambahkan paket livewire di laravel:

composer require livewire/livewire

Buat Komponen Select2 dengan Livewire

Selanjutnya, Anda harus memahami cara membuat komponen livewire untuk membangun dropdown dinamis livewire dengan select2.

 

Karenanya, pergilah ke terminal dan jalankan perintah yang disarankan:

php artisan make:livewire select2-dropdown

Ada dua file yang dihasilkan secara bersamaan; berikut lokasi filenya :

app/Http/Livewire/Select2Dropdown.php
resources/views/livewire/select2-dropdown.blade.php

Selanjutnya, buka file app/Http/Livewire/Select2Dropdown.php dan perbarui kode yang disarankan:

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Select2Dropdown extends Component
{
    public $ottPlatform = '';
 
    public $webseries = [
        'Wanda Vision',
        'Money Heist',
        'Lucifer',
        'Stranger Things'
    ];     
    public function render()
    {
        return view('livewire.select2-dropdown')->extends('layouts.app');
    }
}

Selanjutnya, buka lagi file app/resources/views/livewire/select2-dropdown.blade.php dan perbarui kode yang disediakan:

<div>
    <div wire:ignore>
        <select class="form-control" id="select2-dropdown">
            <option value="">Select Option</option>
            @foreach($webseries as $item)
            <option value="{{ $item }}">{{ $item }}</option>
            @endforeach
        </select>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function () {
        $('#select2-dropdown').select2();
        $('#select2-dropdown').on('change', function (e) {
            var data = $('#select2-dropdown').select2("val");
            @this.set('ottPlatform', data);
        });
    });
</script>
@endpush

Buat Route

Selanjutnya, buat rute untuk mengakses dropdown select2 untuk pencarian dinamis dan pilih opsi pilih. Jadi, buka dan perbarui file route/web.php:

<?php
   
use Illuminate\Support\Facades\Route;
  
use App\Http\Livewire\Select2Dropdown;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
   
Route::get('/', Select2Dropdown::class);

Mengatur Tampilan Blade

Pada langkah terakhir, buat folder baru, beri nama layout, simpan di dalam direktori views, juga buat file app.blade.php di dalamnya.

Karenanya, buka resources/views/layouts/app.blade.php dan perbarui file:

<!DOCTYPE html>
<html>
<head>
   
    <title>Laravel 8 Livewire Dropdown Example | Medikre.com</title>
    @livewireStyles
    <link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
@livewireScripts
@stack('scripts')
</html>

Aplikasi Demo Uji

Semuanya telah dilakukan; maka inilah saatnya untuk memeriksa apa yang telah kita bangun. Pertimbangkan untuk memulai aplikasi laravel menggunakan perintah artisan.

 

Akibatnya, buka konsol dan jalankan perintah yang disediakan:

php artisan serve

Seperti yang Anda lihat di url dasar konsol yang dimanifestasikan setelah menjalankan server pengembangan laravel, maka gunakan url berikut di browser untuk menjalankan aplikasi demo laravel livewire select2:

http://127.0.0.1:8000

Kesimpulan

Tutorial dropdown Laravel Livewire select2 telah berakhir; dalam tutorial ini, kita telah melihat bagaimana menerapkan select2 di aplikasi livewire laravel untuk membangun pencarian dinamis yang menampilkan hasil dalam dropdown.

 

Saya rasa Anda akan menyukai panduan ini dan membaginya dengan orang lain.

livewire laravel laravel livewire select2 example laravel 9