- Apa Itu Laravel Livewire ?
- Belajar Laravel Livewire : Menginstal Laravel Livewire
- Belajar Laravel Livewire : Menampilkan Data
- Belajar Laravel Livewire : Menampilkan Data Dengan Component
- Belajar Laravel Livewire : Menambahkan Data Tanpa Reload Halaman
- Belajar Laravel Livewire : Membuat Validasi Form Livewire
- Belajar Laravel Livewire : Membuat Pagination Tanpa Reload
- Belajar Laravel Livewire : Membuat Pencarian Realtime
Assalamualailum Warohmatulloh Wabarokatuh, setelah meginstal Laravel Livewire di Projek Laravel, maka padaperintah artisan akan terdapat beberapa perintah baru yang berasal dari Laravel Livewire.
livewire
livewire:copy Copy a Livewire component.
livewire:delete Delete a Livewire component.
livewire:discover Regenerate Livewire component auto-discovery manifest.
livewire:make Create a new Livewire component.
livewire:move Move a Livewire component.
livewire:stubs Publish Livewire stubs.Perintah di atas tentunya adalah untuk memudahkan kita dalam penggunaan Laravel Livewire.
Membuat Database & Tabel
Baiklah, langsung saja kita mulai untuk menampilkan data menggunakan Laravel Livewire. Dengan membuat sebuah tabel sederhana untuk menyimpan nama siswa.
Maka pertama tentu kawan kawan buat database terlebih dahulu dan sesuaikan konfigurasi pada file .env. Contoh saya membuat database dengan nama livewire dan pada file .env saya pada bagian database akan seperti ini.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire
DB_USERNAME=root
DB_PASSWORD=Berikutnya, mari kita buat model dan tabel untuk menyimpan data nama siswa tadi, sesuai konvensi Laravel dan menggunakan bahasa Inggris tentunya ya, kita akan buat migration sekaligus dengan model.
php artisan make:model Student -mUntuk file modelnya kita biarkan saja dulu, kita langsung lanjut ke file migration untuk tabel students. Kita hanya akan membuat field name saja untuk tabel ini, maka kode pada method up() akan seperti ini.
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});Kemudian jalankan perintah untuk migrate tabelnya.
php artisan migrateSetelah itu mari kita isi tabel students dengan beberapa data sebagai data contoh.
Menambahkan Aset Laravel Livewire
Ohya, kita akan gunakan Livewire pada file resources/views/layouts/app.blade.php bawaan Laravel ya, jadi kita pasang style dan script Livewire pada file tersebut.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
...
{{-- banyak kode di atasnya --}}
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
</head>
<body>
...
{{-- lebih banyak lagi kode di atasnya pokoknya taruh sebelum </body> --}}
@livewireScripts
</body>
</html>
Oke setelah kita pasang asetnya, sekarang kita akan buat dua komponen Livewire dengan nama StudentIndex dan StudentSingle dengan menggunakan perintah artisan dari Livewire.
Membuat Komponen Livewire
php artisan livewire:make StudentIndexkemudian akan muncul pesan seperti ini, ada dua file yang dibuat, satu file class untuk komponen, satu untuk file tampilan / view.
Kemudian lanjutkan untuk membuat komponen StudentSingle.
php artisan livewire:make StudentSingleSetelah membuat dua komponen tersebut, kita lanjutkan untuk menampilkan data siswa. Masuk ke file app/Livewire/StudentIndex.php , file class component ini mirip dengan controller cara kerjanya, jadi kita akan kirim data ke view layaknya controller.
<?php
namespace App\Http\Livewire;
use App\Student;
use Livewire\Component;
class StudentIndex extends Component
{
public function render()
{
return view('livewire.student-index', [
'students' => Student::latest()->get(),
]);
}
}
Kemudian kita masuk pada resources/views/livewire/student-index.blade.php dan tampilkan data seperti pada file blade biasanya.
Mem<div>
@foreach ($students as $student)
{{ $student->name }} <br>
@endforeach
</div>Membuat Route & Tampilan Utama
Nah sekarang menampilkannya kita butuh sebuah route dan sebuah file view untuk halamannya, mari kita buat file view pada resources/views dengan nama student.blade.php, kemudian isi dengan seperti ini.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Student</div>
<div class="card-body">
<livewire:student-index>
</div>
</div>
</div>
</div>
</div>
@endsectionPada kode komponen Livewire jika kawan kawan menggunakan Laravel sebelum versi 7, bisa gunakan @livewire('nama-komponen').
<livewire:student-index>
{{-- jika menggunakan Laravel sebelum versi 7 bisa diganti dengan --}}
@livewire('student-index')Kemudian kita butuh routing untuk menampilkannya, buat sebuah route baru pada routes/web.php.
Route::get('students', function() {
return view('student');
});Kemudian setelahnya kita coba akses halamannya pada http://localhost:8000/students dan akan tampil seperti ini.
Sampai saat ini kita belum melihat keistimewaan dari Livewire ya? memang belum, kita lanjutkan untuk memisahkan tampilan dengan menjadikan komponen yang lebih kecil.
Wassalamualailum Warohmatulloh Wabarokatuh.
Saya kecewa dengan tutorial laravel livewire nya karena tidak ramah untuk pemula contohnya saya tidak melihat anda menyuruh kami menambahkan @yield(‘content’) di layouts/app.blade.php.
Untung saja saya punya sedikit pengetahuan menggunakan laravel 8 jadi saya bisa mengatasinya tapi bagaimana dengan mereka yang masih belum terbiasa dengan laravel 8? entahlah saya rasa mereka akan menyerah.
pada dasarnya saat di tulisnya artike ini, syntax @yield(‘content’) sudah tersedia dalam file layouts/app.blade.php 🙂
bang kok punya saya gak bisa ya ?
ada tulisan seperti ini “Undefined variable: header (View: C:\Laravel_Apps\lat5-laravel\resources\views\layouts\app.blade.php)” itu knp ya ?
harus definisikan header kalo punya variable header