Contoh Tutorial Livewire Laravel Datatables

Tutorial ini difokuskan pada livewire laravel datatables. jika Anda memiliki pertanyaan tentang livewire laravel datatable maka saya akan memberikan contoh sederhana dengan solusi. Anda akan mempelajari tabel data dalam contoh livewire laravel. Artikel ini akan memberi Anda contoh sederhana dari laravel mediconesystems/livewire-datatables.

Dalam tutorial ini, kita akan membuat laravel livewire datatables menggunakan paket MedicOneSystems/livewire-datatables laravel. Anda dapat menggunakan laravel livewire datatables dengan versi laravel 6, laravel 7 dan laravel 8.

Livewire adalah kerangka kerja tumpukan penuh untuk kerangka kerja Laravel yang membuat membangun antarmuka dinamis sederhana, tanpa meninggalkan kenyamanan Laravel. Jika Anda menggunakan livewire dengan laravel maka Anda tidak perlu khawatir menulis kode ajax jquery, livewire akan membantu menulis kode ajax jquery dengan cara yang sangat sederhana menggunakan php. tanpa penyegaran halaman, validasi laravel akan berfungsi, formulir akan dikirim, dll.

Di sini, saya akan memberi Anda contoh yang sangat sederhana untuk membuat tabel data dengan pengguna dan saya akan menampilkan data menggunakan tabel data dalam file blade. kami hanya akan menggunakan paket livewire/livewire.

Jadi, mari ikuti langkah berikut dan Anda akan mendapatkan tata letak di bawah ini:

livewire laravel datatables example tutorial

Langkah 1: Instal Laravel 8

pertama-tama kita perlu mendapatkan aplikasi Laravel 8 versi baru menggunakan perintah di bawah ini, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Buat Data Dummy menggunakan Tinker Factory

Anda perlu menjalankan perintah berikut untuk membuat data dummy di tabel users Anda. ayo jalankan kedua perintah:

php artisan tinker
User::factory()->count(100)->create()

Langkah 3: Instal Paket Livewire & livewire-datatables

Sekarang di langkah ini, kita hanya akan menginstal livewire ke aplikasi laravel 8 kita menggunakan perintah di bawah ini:

composer require livewire/livewire
composer require mediconesystems/livewire-datatables

Langkah 4: Buat Komponen

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah ini untuk membuat komponen datatables.

php artisan make:livewire user-datatables

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/UserDatatables.php
resources/views/livewire/user-datatables.blade.php

Sekarang kedua file akan kami perbarui seperti di bawah untuk form contact us.

app/Http/Livewire/UserDatatables.php

<?php
  
namespace App\Http\Livewire;
   
use Livewire\Component;
use App\Models\User;
use Illuminate\Support\Str;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;
use Mediconesystems\LivewireDatatables\DateColumn;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
  
class UserDatatables extends LivewireDatatable
{
    public $model = User::class;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->sortBy('id'),
  
            Column::name('name')
                ->label('Name'),
  
            Column::name('email'),
  
            DateColumn::name('created_at')
                ->label('Creation Date')
        ];
    }
}

Langkah 5: Buat Route

sekarang kita akan membuat satu route untuk memanggil contoh kita, jadi mari tambahkan route baru ke file web.php seperti di bawah ini:

routes/web.php

Route::get('user-datatables', function () {
    return view('default');
});

Langkah 6: Buat File Blade View

Di sini, kita akan membuat file blade untuk route memanggil form. di file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('contact-form'). jadi mari tambahkan.

resource/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Tutorial Livewire Laravel Datatables - Medikre.com</title>
    @livewireStyles
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.min.css" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" />
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        Contoh Laravel Livewire - Medikre.com
      </div>
      <div class="card-body">
        <livewire:user-datatables 
            searchable="name, email"
            exportable
         />
  
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
</html>

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Buka di bawah URL:

http://localhost:8000/user-datatables

Saya harap ini dapat membantu Anda...

laravel laravel 8 livewire-laravel datatables with livewire-laravel example tutorial