CoretanKode.com – Membuat CMS Blogging (Part 5) – Pagination & LiveSearch Livewire Laravel 8, Selamat datang di part 5 dari seri membuat CMS blog menggunakan laravel dari CoretanKode.com

Selanjutnya kita akan membuat dua fitur lagi yakni Paginating dan Live Search menggunakan livewire dari projek laravel 8 yang sedang kita garap. Nah kedua fungsionalitas ini sebenarnya sangatlah mudah dibuat, walaupun mudah tetapi tidak bisa dianggap remeh yah.

SERI MEMBUAT CMS SENDIRI DENGAN LARAVEL 8:

Dengan menggunakan Livewire aplikasi berbasis website yang kita buat bisa berjalan secara live alias langsung oleh karena itu sangat cocok apabila kalian membuat fitur livesearch dengan memanfaatkan livewire ini.

Nah sekalian dengan pagination agar website terlihat lebih rapih lagi. selain itu pagination ini termasuk salah satu ilmu penting dalam pembuatan aplikasi, selanjutnya pagination ini tidak hanya digunakan untuk halaman dashboard saja tetapi halaman front-end untuk pengunjung juga akan menggunakan-nya.

Membuat Pagination di Livewire Laravel 8

Pertama kita akan membuat pagination untuk projek laravel kita ini, pertama kalian harus menambahkan header use Livewire\WithPagination;pada bagian awal dari komponen livewire kalian.

Hal itu dibutuhkan agar kita bisa mengakses function dasar yang disediakan oleh projek laravel 8 yang telah kita download. Setelah menggunakan headernya, sama halnya dengan file uploads yang dibahas pada part 4 kita juga harus menegaskan penggunaan header didalam class komponen.

Tambahkan kode use WithPagination;letakkan saja dibawah kode file upload kalian. nah setelah itu kalian langsung berurusan dengan function render pada livewire kalian.

Silahkan ubah return kalian seperti berikut

public function render()
{
return view('livewire.kontens',['content' => Konten::All()->paginate(5)]);
}

Setelah itu kita bisa lanjut ke proses selanjutnya yakni menambahkan live search / pencarian live di projek laravel kita.

Tambahan kalian juga bisa melakukan kustomisasi tampilan paginating kalian dengan cara mempublikasikan vendor pagination kalian terlebih dahulu lalu mengubah style-nya. Selanjutnya pada view kalian bisa menggunakan {{ $content->links(‘path/nama-file-style-pagination-kalian’) }}.

Untuk dokumentasi styling pagination kalian bisa cek dihalaman Livewire Pagination

Membuat Live Search LiveWire Laravel 8

Untuk membuat sebuah livewire kalian bisa langsung membuat satu variabel publik terlebih dahulu $searchTerm adalah nama yang akan admin gunakan.

Setelah mendeklarasikan variable yang nantinya akan menampung string dari kolom pencarian, maka sekarang kita akan mengedit kembali function render() pada livewire projek laravel tersebut.

Sintak rendernya berubah menjadi seperti dibawah ini :

public function render()
{
$searchTerm = '%'.$this->searchTerm.'%';
return view('livewire.kontens',['content' => Konten::Where('title','like', $searchTerm)->paginate(5)]);
}

Selanjutnya untuk menghindari error CRUD pada saat telah menggunakan fungsionalitas pencarian ini maka kita akan membuat sebuah Function yang bertugas untuk mereset fields.

public function updatingSearch()
{
$this->resetPage();
}

Jadi pada saat kalian sudah menghapus string pada kolom pencarian, CRUD kalian akan kembali normal dan sebisa mungkin Function updatingSearch() tersebut disimpan diatas kode function render() kalian yah.

Sehingga live kalian lengkapnya seperti ini:

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Konten; use Livewire\WithFileUploads;use Livewire\WithPagination;
class Kontens extends Component
{use WithFileUploads;use WithPagination;
public $kontens, $photo, $judul, $searchTerm, $shortdescription, $isikonten, $kategori, $konten_id;
public $isModal = 0;public function updatingSearch()
{

$this->resetPage();

}public function render()

{

$searchTerm = '%'.$this->searchTerm.'%';

return view('livewire.kontens',['content' => Konten::Where('title','like', $searchTerm)->paginate(5)]);

}

//Function Tombol Create
public function create()
{
$this->resetFields();
$this->openModal();
}
//Function Tutup Modal
public function closeModal()
{
$this->isModal = false;
}
//Function Buka Modoal
public function openModal()
{
$this->isModal = true;
}
//Function Reset Kolom Inputan
public function resetFields()
{
$this->judul = '';
$this->shortdescription = '';
$this->isikonten = '';
$this->kategori = '';$this->photo = '';
$this->konten_id = '';
}
//Function Store ke Database
public function store()
{
$this->validate([
'judul' => 'required|string',
'shortdescription' => 'required',
'kategori' => 'required','photo' => 'required|image',
'isikonten' => 'required'
]);$storedImage = $this->photo->store('public');
Konten::updateOrCreate(['id' => $this->konten_id], [
'judul' => $this->judul,
'shortdescription' => $this->shortdescription,
'isikonten' => $this->isikonten,'photo' => $storedImage,
'kategori' => $this->kategori,
]);
session()->flash('message', $this->konten_id ? $this->judul . ' Diperbaharui': $this->judul . ' Ditambahkan');
$this->closeModal();
$this->resetFields();
}
public function edit($id)
{
$konten = Konten::find($id);
$this->konten_id = $id;
$this->judul = $konten->judul;
$this->isikonten = $konten->isikonten;
$this->shortdescription = $konten->shortdescription;
$this->kategori = $konten->kategori;$this->photo = $konten->photo;
$this->openModal();
}
public function delete($id)
{
$konten = Konten::find($id);$this->photo = $konten->photo; Storage::delete($this->photo);
$konten->delete();
session()->flash('message', $konten->judul . ' Dihapus');
}
}

Nah selanjutnya kalian hanya perlu mengedit halaman render kalian yakni kontens.blade.php dengan menambahkan sintak paginating-nya dan juga membuat sebuah kolom pencarian.

<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Manajemen Konten
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
@if (session()->has('message'))
<div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert">
<div class="flex">
<div>
<p class="text-sm">{{ session('message') }}</p>
</div>
</div>
</div>
@endif
<button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Tambah Post</button>
@if($isModal)
@include('livewire.create')
@endif<input type="text" class="w-full h-11" placeholder="Looking for Something ??" wire:model="searchTerm" />
<table class="table-fixed w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-4 py-2">Judul</th>
<th class="px-4 py-2">Short Description</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
@forelse($kontens as $row)
<tr>
<td class="border px-4 py-2">{{ $row->judul }}</td>
<td class="border px-4 py-2">{{ $row->shortdescription }}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $row->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $row->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Hapus</button>
</td>
</tr>
@empty
<tr>
<td class="border px-4 py-2 text-center" colspan="5">No Record</td>
</tr>
@endforelse
</tbody>
</table>{{ $content->links() }}
</div>
</div>
</div>

Nah selanjutnya tinggal kalian save dan coba sendiri hasil projekan kalian yah. cek apakah sudah berhasil muncul pagination dan juga pencarian livewire-nya atau belum tuh.

Bila berhasil selamat kalian bisa lanjut ke part 6 dimana kita akan menambahkan Text Editor bernama Trix Text Editor kedalam projek laravel 8 kita tetap menggunakan LiveWire.

Terima kasih telah berkunjung dan Assalamualaikum Warahmatullahi Wabarakatu.