Belajar Laravel Livewire 2.0 – Kotak Kode Pemograman

1. Install Laravel Livewire

Buat project laravel dulu, lakukan dengan Command Prompt ketikkan:

composer create-project laravel/laravel livewire-app

untuk livewire-app bebas untuk diganti karena itu nama folder project

Pasang atau install livewire di project laravel

composer require livewire/livewire

oke sampai di situ livewire sudah terpasang di projek laravel

2. Configurasi Livewire

Buat file view di folder resources/views dengan nama latihan.blade.php seperti ini letak filenya

resources/views/latihan.blade.php

pada file latihan.blade.php isi dengan kode berikut html seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Livewire</title>
  @livewireStyles
</head>
<body>
  

  @livewireScripts
</body>
</html>

seperlu di perhatikan yaitu meng include script livewire yaitu @livewireStyles di head html dan @livewireScripts di body html tepatnya di atas tag penutup body yaitu </body>

3. Membuat Component

Untuk membuat sebuah komponen baru, kita perlu menjalankan perintah “php artisan make:livewire” diikuti dengan nama komponen yang ingin dibuat.

Livewire juga mendukung notasi “kebab” untuk pembuatan komponen baru. Jadi, jika kita ingin membuat komponen dengan nama “show-posts” maka kita bisa menggunakan perintah “php artisan make:livewire show-posts”.

Setelah menjalankan perintah tersebut, akan dibuat dua file baru di dalam project kita yaitu “app/Http/Livewire/ShowPosts.php” dan “resources/views/livewire/show-posts.blade.php”.

Jika kita ingin membuat komponen dalam sub-folder, kita bisa menggunakan beberapa sintaks yang berbeda, seperti “php artisan make:livewire Post\Show”, “php artisan make:livewire Post/Show”, atau “php artisan make:livewire post.show”.

Jika kita menggunakan salah satu perintah di atas, maka dua file yang dibuat akan berada di dalam sub-folder yang sesuai dengan nama komponen, seperti “app/Http/Livewire/Post/Show.php” dan “resources/views/livewire/post/show.blade.php”.

Dengan menggunakan perintah artisan ini, kita bisa dengan mudah membuat komponen baru di dalam project Laravel dan mengatur struktur folder yang lebih teratur.

itu penjelasan sesuai dokumentasi livewire, sekarang kita praktek:

keteikkan php artisan livewire:make ArtikelPost dianjurkan untuk menulis dengan format CamelCase yaitu kapital per kata atau membentuk punuk unta dan harus disambung tanpasa sepasi. atau bisa juga dengan tanda – contoh: php artisan livewire:make artikel-post maka akan dibuat dua file baru di dalam project kita yaitu “app/Http/Livewire/ArtikelPost.php” dan “resources/views/livewire/artikel-post.blade.php”.

kenapa berbeda penamaan controller dan dan view nya hal ini untuk membedakan antara controller dan views

Berikut isi file controller ArtikelPost.php

namespace App\Http\Livewire;
use Livewire\Component;

class ArtikelPost extends Component
{
public function render()
    {
         return view('livewire.artikel-post');
    }

}

Setiap komponen Livewire harus memiliki function render() yang mengembalikan tampilan HTML yang akan ditampilkan ke dalam halaman web. Function ini akan dipanggil oleh Livewire dan tampilan yang dihasilkan akan digabungkan dengan tampilan utama di Laravel.

Secara default, function render() akan menampilkan template view yang memiliki nama yang sama dengan nama komponen. Namun, jika kita ingin menampilkan tampilan yang berbeda, kita bisa menentukan nama tampilan dengan menggunakan function view() pada function render().

untuk menampilkan livewire di tuorial.blade.php yaitu menggunakan sintak <livewire:artikel-post /> atau @livewire(‘artikel-post’) sintak tersebut bisa ditulis berulang-ulang

Jadi komponen livewire adalah controller yang ada pada app\Http\livewire dan view yang ada di resource\views\livewire\ kesemuanya saling terkait. dan untuk memanggilnya menggunakan sintak @livewire(‘file view laife wire’)

Aturan penditng dalam menulis html di view livewire dalam hal ini di file artikel-post.blade.php tidak disarankan untuk menulis blok code yang sama ber ulang-ulang misa:

  
<h2>belajar Livewire</h2>
<h2>belajar Livewire</h2>
<h2>belajar Livewire</h2>
<h2>belajar Livewire</h2>

<!-- atau -->

<div>
  <div>pilihan 1</div>
  <div>pilihan 2</div>
  <div>pilihan 3</div>
  <div>pilihan 4</div>
  <div>pilihan 5</div>
</div>
<div>
  <div>pilihan 1</div>
  <div>pilihan 2</div>
  <div>pilihan 3</div>
  <div>pilihan 4</div>
  <div>pilihan 5</div>
</div>

<!-- kode di atas cukup ditulis -->

<h2>belajar Livewire</h2>

<!-- dan -->

<div>
  <div>pilihan 1</div>
  <div>pilihan 2</div>
  <div>pilihan 3</div>
  <div>pilihan 4</div>
  <div>pilihan 5</div>
</div>

hal ini karena kita bisa menggunakan @livewire(‘artikel-post’)

Leave a Reply Cancel reply