Dalam era digital saat ini, penggunaan teknologi web semakin meluas dan mendalam ke berbagai aspek kehidupan kita. Pengembangan aplikasi web yang responsif dan interaktif menjadi sangat penting untuk memberikan pengalaman pengguna yang lebih baik. Salah satu aspek penting dalam pengembangan aplikasi web adalah fasilitas pencarian yang cepat dan akurat. Teknik pencarian langsung atau yang dikenal sebagai live search telah menjadi fitur yang populer dan diharapkan oleh pengguna. Dengan adanya live search, pengguna dapat melihat hasil pencarian yang relevan saat mereka masih mengetik, tanpa perlu menunggu halaman baru dimuat.
Dalam rangka memenuhi tuntutan akan fitur pencarian yang cepat dan responsif, pengembang web dapat mengandalkan berbagai framework modern yang memungkinkan pengembangan aplikasi web dengan cepat dan efisien. Salah satu kombinasi teknologi yang kuat adalah penggunaan Livewire 2 bersama dengan Laravel 9.
LIVEWIRE
Livewire adalah sebuah framework yang dikembangkan untuk memungkinkan pengembangan antarmuka pengguna interaktif tanpa perlu menulis kode JavaScript secara manual. Dengan Livewire, pengembang dapat menciptakan komponen komponen UI dinamis yang dapat berinteraksi dengan server secara real time melalui HTTP. Livewire memungkinkan aplikasi web menjadi lebih responsif dan dinamis tanpa perlu mengorbankan kemudahan pengembangan. Dokumentasi nya bisa kamu kunjungi pada situs laravel-livewire.com. Pada artikel ini di buat, sebenarnya livewire sudah memiliki versi 3 dan sudah di rilis.
LARAVEL
Laravel, di sisi lain adalah salah satu framework pengembangan aplikasi web paling populer yang dibangun dengan bahasa pemrograman PHP. Dikenal karena kemudahan dalam pembuatan dan pemeliharaan kode, Laravel memberikan struktur yang kuat untuk membangun aplikasi web yang kompleks. Dengan adanya Livewire di dalam ekosistem Laravel, pengembang dapat memanfaatkan fitur fitur Livewire untuk membuat antarmuka interaktif yang menarik dan efisien. Pada situs resmi laravel nya kamu bisa kunjungi pada situs laravel.com.
Pada artikel ini penulis akan membuat live search untuk kamu yang lagi belajar mengenai livewire 2 dan laravel 9. Skenario nya adalah, katakanlah penulis memiliki data dalam database server management system mysql di mana data nya terdapat data pasien, data nya hanya menampilkan nama pasien, umur pasien, alamat pasien, penyakit pasien. Penulis akan melakukan pencarian tanpa melakukan reload halaman web untuk di tampilkan pada halaman web dan ini otomatis menggunakan konsep AJAX.
TUTORIAL
- Asumsikan kamu sudah menyalakan web server kamu seperti xampp, mamp, wamp, laragon. Penulis menggunakan web server laragon.
- Buka phpmyadmin kita dengan mengetik url pada browser kita seperti ini :
- Kita buat nama database dengan nama db_livewire.
- Buat tabel dengan nama tbl_pasien menggunakan query SQL nya. Untuk itu masuk ke SQL dan copy paste di phpmyadmin kamu pada query SQL di bawah ini :
- Hasil nya :
- Untuk melakukan insert, kita cukup menambahkan data acak aja. Bisa di copy dan paste lagi query SQL insert di bawah ini :
- Ketika berhasil di eksekusi :
- Untuk penginstallan livewire nya kita lakukan pada terminal menggunakan composer :
- Proses penginstallan livewire harap di tunggu. Penulis asumsikan kamu sudah menginstall framework laravel dan composer nya ya. Jika sudah terinstall livewire nya, kita jalankan laravel nya dulu :
- Lalu langkah selanjutnya kita buat komponen livewire nya pada terminal :
- Jika sudah di buat, livewire otomatis akan membuat dua komponen :
- Sebelum kita masuk ke kode nya, kita atur dulu pengaturan lingkungan laravel nya untuk bisa tersambung dengan nama database db_livewire. Masuk pada .env lalu ubah seperti ini :
- Lalu kita buat model nya agar kita juga bisa melakukan interaksi dengan database, dengan mengetik perintah berikut pada terminal :
- Untuk kode model mengenai file SearchModel.php nya :
- Pada file Search.php yang berada pada folder app/http/livewire kita masukkan kode nya seperti ini :
- Pada langkah ini kita buat base layout nya untuk komponen livewire. Kamu buat view laravel dengan nama base.blade.php dan untuk kode base view nya :
- Selanjutnya bagian file search.blade.php kita melakukan pencarian, pagination, dan beserta tabel nya untuk di tampilkan ke halaman web pada data pasien. Kode nya bisa di lihat pada di bawah ini :
- Jangan lupa kita tambahkan kode pada route nya seperti ini :
- Hasil :
- Selesai.
http://localhost/phpmyadminCREATE TABLE tbl_pasien (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(50),
umur INT,
alamat TEXT,
penyakit VARCHAR(70)
);
INSERT INTO tbl_pasien (nama, umur, alamat, penyakit) VALUES
('John Doe', 30, 'Jl. Merdeka No. 123', 'Flu'),
('Jane Smith', 25, 'Jl. Raya Indah No. 45', 'Migraine'),
('Michael Johnson', 40, 'Jl. Kenanga No. 17', 'Hypertension'),
('Emily Brown', 28, 'Jl. Seruni No. 9', 'Allergies'),
('David Lee', 22, 'Jl. Mawar No. 5', 'Influenza');
composer require livewire/livewirephp artisan servephp artisan make:livewire searchKita buat nama search aja agar sesuai mengenai tema artikel ini.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_livewire
DB_USERNAME=root
DB_PASSWORD=Untuk username dan password nya bisa di sesuaikan pada web server kamu.
php artisan make:model SearchModel<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class SearchModel extends Model
{
use HasFactory;
protected $table = 'tbl_pasien';
protected $fillable = [
'nama',
'umur',
'alamat',
'penyakit'
];
public $timestamps = false;
}Secara ringkas, model ini memanfaatkan trait `HasFactory` untuk pembuatan factory data, menggunakan tabel `tbl_pasien`, mengizinkan kolom yang dapat diisi pada operasi data melalui array `$fillable`, dan tidak menggunakan timestamps dengan mengatur `$timestamps` menjadi `false`.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\SearchModel;
class Search extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $search = '';
public function render()
{
$data_pasien = SearchModel::where(function ($query) {
$query->orWhere('nama', 'like', '%' . $this->search . '%')
->orWhere('umur', 'like', '%' . $this->search . '%')
->orWhere('alamat', 'like', '%' . $this->search . '%')
->orWhere('penyakit', 'like', '%' . $this->search . '%');
})->paginate(3);
return view('livewire.search', ['semua_pasien' => $data_pasien])->layout('base');
}
}Ringkasan poin poin penting kode di atas :
- Komponen 'Search' menggunakan fitur paginasi Livewire dengan trait 'WithPagination'.
- Pengaturan tema paginasi digunakan dengan '$paginationTheme' = 'bootstrap'.
- Variabel publik '$search' menyimpan kata kunci pencarian.
- Dalam fungsi 'render()', data pasien diambil dari model 'SearchModel' dengan kriteria pencarian dalam kolom 'nama', 'umur', 'alamat', dan 'penyakit'.
- Hasil pencarian dipaginasi dengan tiga data per halaman.
- Data pasien hasil pencarian dikirim ke tampilan 'livewire.search' dan di dalam layout 'base'.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live Search Livewire 2 Dan Laravel 9</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
@livewireStyles
</head>
<body>
{{ $slot }}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
@livewireScripts
</body>
</html>Kenapa kita membutuhkan hal tersebut? karena bagian dari base layout umumnya digunakan untuk mengatur elemen elemen umum yang akan ada di semua halaman aplikasi web kita.
<div>
<!-- Content tabel pasien -->
<div class="container mb-4">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<p>Datatable Pasien</p>
<div class="mt-4">
<input type="search" wire:model.debounce.500ms="search" class="form-control float-end mx-2"
placeholder="Search..." style="width: 230px" />
</div>
</div>
<div class="card-body table-responsive">
<table class="table table-bordered text-center">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Umur</th>
<th scope="col">Alamat</th>
<th scope="col">Penyakit</th>
</tr>
</thead>
<tbody class="table-group-divider">
@php
$no = 1;
@endphp
@forelse ($semua_pasien as $data)
<tr>
<td>{{ $no++ }}</td>
<td>{{ $data->nama }}</td>
<td>{{ $data->umur }}</td>
<td>{{ $data->alamat }}</td>
<td>{{ $data->penyakit }}</td>
</tr>
@empty
<tr>
<td colspan="5">Data Tidak Di Temukan.</td>
</tr>
@endforelse
</tbody>
</table>
<div>
{{ $semua_pasien->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </Akhir content tabel pasien -->
</div>Perlu di perhatikan, kita perlu menaruh inputan search seperti pada bagian kode :
<input type="search" wire:model.debounce.500ms="search" class="form-control float-end mx-2" placeholder="Search..." style="width: 230px" />Kode di atas menggunakan atribut Livewire wire:model.debounce.500ms=”search” untuk menghubungkan input dengan variabel search dalam komponen, dengan penundaan 500 milidetik. Ini memungkinkan pengguna untuk melakukan pencarian yang responsif dengan jeda waktu sebelum permintaan dikirim ke server, sehingga memberikan pengalaman yang lebih baik kepada pengguna.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Search;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/pasien', Search::class);Terakhir saat nya kita akses aplikasi web nya dengan url seperti ini pada browser kita :
http://127.0.0.1:8000/pasienPenutup
Dalam artikel ini, kita telah membuat fitur live search menggunakan Livewire 2 dan Laravel 9. Kombinasi teknologi ini memungkinkan pengembang untuk mengimplementasikan pencarian data secara real time dengan responsif dan interaktif dalam aplikasi web. Jika ada kesalahan kode atau apapun bisa komentar pada artikel ini. Penulis akan jawab pertanyaan kamu jika penulis sempat mengecek nya. Semoga bermanfaat!
0 Komentar