04. Menampilkan Chirp

Pada langkah sebelumnya kita telah menambahkan kemampuan untuk membuat Chirp, sekarang kita siap untuk menampilkannya!

Mengambil Chirp

Pertama, kita harus memperbarui view resources/views/chirps.blade.php untuk menampilkan daftar Chirp. Untuk itu, kita bisa menggunakan komponen Livewire baru:

resources/views/chirps.blade.php

 <x-app-layout>
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
         <livewire:chirps.create />
+        
+        <livewire:chirps.list />
     </div>
 </x-app-layout>

Kemudian, mari kita buat komponen Livewire chirps.list baru:

php artisan make:volt chirps/list --class

php artisan make:volt chirps/list

Perintah tersebut akan membuat komponen Livewire baru di resources/views/livewire/chirps/list.blade.php. Mari perbarui komponen Livewire tersebut untuk menampilkan daftar Chirp kita:

resources/views/livewire/chirps/list.blade.php

 <?php
  
+use App\Models\Chirp; 
+use Illuminate\Database\Eloquent\Collection; 
 use Livewire\Volt\Component;
  
 new class extends Component
 {
+    public Collection $chirps; 
+ 
+    public function mount(): void
+    {
+        $this->chirps = Chirp::with('user')
+            ->latest()
+            ->get();
+    } 
 }; ?>
  
-<div> 
-    // 
+<div class="mt-6 bg-white shadow-sm rounded-lg divide-y"> 
+    @foreach ($chirps as $chirp)
+        <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+            </svg>
+            <div class="flex-1">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <span class="text-gray-800">{{ $chirp->user->name }}</span>
+                        <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
+                    </div>
+                </div>
+                <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
+            </div>
+        </div>
+    @endforeach 
 </div>

resources/views/livewire/chirps/list.blade.php

 <?php
  
+use App\Models\Chirp; 
 use function Livewire\Volt\{state};
  
+state(['chirps' => fn () => Chirp::with('user')->latest()->get()]); 
  
 ?>
  
-<div> 
-    // 
+<div class="mt-6 bg-white shadow-sm rounded-lg divide-y"> 
+    @foreach ($chirps as $chirp)
+        <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+            </svg>
+            <div class="flex-1">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <span class="text-gray-800">{{ $chirp->user->name }}</span>
+                        <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
+                    </div>
+                </div>
+                <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
+            </div>
+        </div>
+    @endforeach 
 </div>

Di sini kita telah menggunakan metode with milik Eloquent untuk melakukan eager-loading pada relasi user di setiap Chirp. Kita juga menggunakan scope latest untuk mengembalikan data dalam urutan kronologis terbalik (terbaru di atas).

Terakhir, setiap kali ada Chirp baru yang dibuat, kita perlu memperbarui daftar Chirp tersebut. Kita bisa melakukannya menggunakan Livewire events. Mari kita kirimkan (dispatch) sebuah event setiap kali Chirp baru berhasil dibuat:

resources/views/livewire/chirps/create.blade.php

 <?php
  ...
 use Livewire\Attributes\Validate;
 use Livewire\Volt\Component;
  
 new class extends Component
 {
     #[Validate('required|string|max:255')]
     public $message = '';
  
     public function store(): void
     {
         $validated = $this->validate();
  
         auth()->user()->chirps()->create($validated);
  
         $this->message = '';
+ 
+        $this->dispatch('chirp-created'); 
     }
 }; ?> 
  
 <div> ...
     <form wire:submit="store">
         <textarea
             wire:model="message"
             placeholder="{{ __('What\'s on your mind?') }}"
             class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
         />
         <x-input-error :messages="$errors->get('message')" class="mt-2" />
         <x-primary-button class="mt-4">{{ __('Chirp') }}</x-primary-button>
     </form> 
 </div>

resources/views/livewire/chirps/create.blade.php

 <?php
  ...
 use function Livewire\Volt\{state};
 use function Livewire\Volt\{rules, state};
  
 state(['message' => '']);
  
 rules(['message' => 'required|string|max:255']);
  
 $store = function () {
     $validated = $this->validate();
  
     auth()->user()->chirps()->create($validated);
  
     $this->message = '';
+ 
+    $this->dispatch('chirp-created'); 
 };
  
 ?>
  
 <div> ...
     <form wire:submit="store">
         <textarea
             wire:model="message"
             placeholder="{{ __('What\'s on your mind?') }}"
             class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
         />
  
         <x-input-error :messages="$errors->get('message')" class="mt-2" />
         <x-primary-button class="mt-4">{{ __('Chirp') }}</x-primary-button>
     </form> 
 </div>

Sekarang, kita bisa memperbarui komponen chirps.list untuk mendengarkan (listening) event chirp-created, dan memperbarui daftar Chirp:

resources/views/livewire/chirps/list.blade.php

 <?php
  
 use App\Models\Chirp;
 use Illuminate\Database\Eloquent\Collection;
+use Livewire\Attributes\On; 
 use Livewire\Volt\Component;
  
 new class extends Component
 {
     public Collection $chirps;
  
     public function mount(): void
     {
-        $this->chirps = Chirp::with('user') 
-            ->latest()
-            ->get(); 
+        $this->getChirps(); 
     }
+ 
+    #[On('chirp-created')]
+    public function getChirps(): void
+    {
+        $this->chirps = Chirp::with('user')
+            ->latest()
+            ->get();
+    } 
 }; ?>
  
 <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
     ...
     @foreach ($chirps as $chirp)
         <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
             </svg>
             <div class="flex-1">
                 <div class="flex justify-between items-center">
                     <div>
                         <span class="text-gray-800">{{ $chirp->user->name }}</span>
                         <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
                     </div>
                 </div>
                 <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
             </div>
         </div>
     @endforeach 
 </div>

resources/views/livewire/chirps/list.blade.php

 <?php
  
 use App\Models\Chirp;
-use function Livewire\Volt\{state}; 
+use function Livewire\Volt\{on, state}; 
  
-state(['chirps' => Chirp::with('user')->latest()->get()]); 
+$getChirps = fn () => $this->chirps = Chirp::with('user')->latest()->get(); 
+ 
+state(['chirps' => $getChirps]);
+ 
+on(['chirp-created' => $getChirps]); 
  
 ?>
  
 <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
     ...
     @foreach ($chirps as $chirp)
         <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
             </svg>
             <div class="flex-1">
                 <div class="flex justify-between items-center">
                     <div>
                         <span class="text-gray-800">{{ $chirp->user->name }}</span>
                         <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
                     </div>
                 </div>
                 <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
             </div>
         </div>
     @endforeach 
 </div>

Menghubungkan pengguna ke Chirp

Kita telah menginstruksikan Laravel untuk mengembalikan relasi user agar kita dapat menampilkan nama penulis Chirp. Namun, relasi user pada model Chirp belum didefinisikan. Untuk memperbaikinya, mari kita tambahkan relasi "belongs to" baru ke model Chirp kita:

app/Models/Chirp.php

 <?php
  ...
 namespace App\Models;
  
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
  
 class Chirp extends Model
 {
  ...
     use HasFactory;
  
     protected $fillable = [
         'message',
     ];
  
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
 }

Relasi ini adalah kebalikan dari relasi "has many" yang kita buat sebelumnya pada model User.

Sekarang silakan lihat peramban Anda untuk melihat pesan yang Anda Chirp tadi!

Silakan kirimkan Chirp lagi, atau bahkan daftarkan akun lain dan mulailah percakapan!

Lanjutkan untuk mengizinkan pengeditan Chirp...

04. Menampilkan Chirp

#Mengambil Chirp

#Menghubungkan pengguna ke Chirp

Mengambil Chirp

Menghubungkan pengguna ke Chirp