Pengerjaan Project Laravel + Livewire Lebih Cepat dengan Package Berikut

Abd Asis 29 Juli 2022

Pengerjaan Project Laravel + Livewire Lebih Cepat dengan Package Berikut

Halo Coder! Bagi teman-teman yang mengerjakan project pasti kalian ingin mengerjakannya secepat mungkin, selain lebih cepat cuan juga tanggung jawab segera selesai, bukannya gitu kan? Untuk project yang skal besar mungkin membuat sebuah component sendiri lebih bagus, karna kita lebih mengerti alur dari package yang kita buat, disisi lain untuk maintenance juga lebih mudah, namun ketika kita mengerjakan sebuah project yang skala menengah kebawah dengan budget yang pas-pasan, mungkin menggunakan package yang ada lebih alternative yang bagus.

Jika kamu pengguna Laravel dengan Front end menggunakan Livewire berikut ini beberapa package yang mungkin kamu harus coba.

Livewire Sweetalert

Siapa yang tidak tau dengan library Javascript ini, library ini sering di gunakan untuk membuat sebuah notifikasi pada sebuah aplikasi yang berbasis web, selain membuat sebuah notifikasi, sweetalert juga bisa digunakan untuk membuat sebuah tombol konfirmasi.

Dengan Package ini kamu bisa membuat sebuah component notifikasi tanpa harus membuatnya dari awal, singkatnya untuk memasang Package ini untuk project kamu bisa jalankan perintah berikut ini

composer require jantinnerezo/livewire-alert

Kemudian kamu tambahkan beberapa baris scripts dibawah dibawah ini pada master layout yang akan kamu gunakan

<body> 
@livewireScripts
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<x-livewire-alert::scripts />
</body>

Jika kamu ingin membuat konfigurasi tambahan pada package ini kamu bisa jalankan perintah berikut ini

php artisan vendor:publish --tag=livewire-alert:config

Secara Otomasi kamu akan membuat sebuah file livewire-alert.php pada folder config project kamu dan sekarang kamu bisa membuat alert pada komponent yang kamu inginkan, contoh penggunaannya seperti berikut ini

use Jantinnerezo\LivewireAlert\LivewireAlert;
 
class Index extends Component
{
    use LivewireAlert;
    
    public function submit()
    {
        $this->alert('success', 'Basic Alert');
    }
}

Untuk dokumentasi lengkapnya kamu bisa langsung berkunjung ke repositorinya langsung yaa

Link : https://github.com/jantinnerezo/livewire-alert

Livewire Form Component

Selanjutnya adalah package yang sangat mempermudah banget jika kamu sering mengelola form.

Kegunaan dari package ini kamu akan lebih mudah dan simple dalam membuat form, dan juga package ini membawakan banyak pilihan library CSS yang sedang populer saat ini, mulai dari Tailwind CSS, Bootstrap 4 & 5, hanya dengan 1 baris konfigurasi saja.

Selain itu dengan package ini kita tidak perlu membuat element untuk menampilkan validasi error yang dilakukan Livewire, karena dengan package ini kamu sudah di sediakan secara bawaannya

dari setiap jenis tipe form yang akan di buat.

Berikut Sekilas untuk cara penginstalan dari Package ini

composer require protonemedia/laravel-form-components

Jika kamu tertarik juga untuk menggunakan package ini silahkan kamu bisa langsung baca di dokumen officialnya di

Link: https://github.com/protonemedia/laravel-form-components

Livewire Datatable

Datatable merupakan komponen yang sangat sering kita gunakan di dalam membuat sebuah aplikasi, fungsinya tidak lain untuk menampilkan data yang ada pada aplikasi, namun jika kamu menggunakan Livewire, component datatable tidak bisa langsung digunakan, alternative yang bisa kita pakai dengan menggunakan package https://github.com/rappasoft/laravel-livewire-tables ini.

Pada Package ini sudah di sediakan banyak fungsi pada datatablenya, diantaranya:

  1. Pengurutan Data
  2. Filter Data
  3. Pemilihan Kolom yang ingin di tampilkan
  4. Pencarian

Tidak hanya itu dengan package ini kita dimanjakan banget untuk membuat sebuah tabel hehe.

Untuk pemasangannya sebagai berikut:

composer require rappasoft/laravel-livewire-tables

Dan berikut aku berikan contoh simplenya dalam pembuatan tabel dengan package ini

<?php

namespace App\Http\Livewire\Admin\User;

use App\Domains\Auth\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends DataTableComponent
{

    protected $model = User::class;

    public function columns(): array
    {
        return [
            Column::make('Name')
                ->sortable()
                ->searchable(),
            Column::make('E-mail', 'email')
                ->sortable()
                ->searchable(),
            Column::make('Verified', 'email_verified_at')
                ->sortable(),
        ];
    }
}

Gimana mudah bukan?, jika kamu tertarik menggunakannya selebihnya kamu bisa membaca dokumentasi dari official repositorinya di

Link: https://rappasoft.com/docs/laravel-livewire-tables

Dengan 3 Package diatas kamu bisa lebih hemat waktu dalam pengembangan aplikasi yang sedang kamu kerjakan, mungkin hanya ini yang bisa aku tulis untuk artikel kali ini, sampai jumpa pada artikel selanjutnya

Selamat Mencoba dan Happy Ngoding

Tags
InfolaravelpluginsweetalertLivewire
Share to
FacebookTwitterLinkedIn