Tanggal :13 Juli 2024
Menampilkan Data di Laravel Livewire

Belajar Laravel Livewire : Menampilkan Data

Artikel ini bagian ke 3 dari total 8 artikel di seri Belajar Laravel Livewire

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 -m

Untuk 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 migrate

Setelah itu mari kita isi tabel students dengan beberapa data sebagai data contoh.

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 StudentIndex

kemudian akan muncul pesan seperti ini, ada dua file yang dibuat, satu file class untuk komponen, satu untuk file tampilan / view.

Tampilan setelah membuat komponen livewire

Kemudian lanjutkan untuk membuat komponen StudentSingle.

php artisan livewire:make StudentSingle

Setelah 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>
@endsection

Pada 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.

Tampilan data siswa.

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.

Series Navigation<< Belajar Laravel Livewire : Menginstal Laravel LivewireBelajar Laravel Livewire : Menampilkan Data Dengan Component >>

Hai semua, saya Amirul seorang Software Engineer, suka membuat konten pembelajaran berupa artikel, video tutorial maupun podcast

4 Comments

  1. Ardyan

    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.

Tinggalkan Balasan