Langsung ke konten

04. Menampilkan Chirp

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

Mengambil data Chirp

Mari perbarui metode index pada kelas ChirpController kita untuk meneruskan Chirp dari setiap pengguna ke halaman indeks:

app/Http/Controllers/ChirpController.php
 <?php
  ...
 namespace App\Http\Controllers;
  
 use App\Models\Chirp;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\View\View;
  
 class ChirpController extends Controller
 {
     /**
      * Menampilkan daftar resource.
      */
     public function index(): View
     {
-        return view('chirps.index');
+        return view('chirps.index', [
+            'chirps' => Chirp::with('user')->latest()->get(),
+        ]);
     }
  ...
     /**
      * Menampilkan formulir untuk membuat resource baru.
      */
     public function create()
     {
         //
     }
  
     /**
      * Menyimpan resource yang baru dibuat ke dalam penyimpanan.
      */
     public function store(Request $request): RedirectResponse
     {
         $validated = $request->validateWithBag('store', [
             'message' => 'required|string|max:255',
         ]);
  
         $request->user()->chirps()->create($validated);
  
         return redirect(route('chirps.index'));
     }
  
     /**
      * Menampilkan resource yang dipilih/spesifik.
      */
     public function show(Chirp $chirp)
     {
         //
     }
  
     /**
      * Menampilkan formulir untuk mengedit resource yang dipilih/spesifik.
      */
     public function edit(Chirp $chirp)
     {
         //
     }
  
     /**
      * Memperbarui resource yang dipilih/spesifik di dalam penyimpanan.
      */
     public function update(Request $request, Chirp $chirp)
     {
         //
     }
  
     /**
      * Menghapus resource yang dipilih/spesifik dari penyimpanan.
      */
     public function destroy(Chirp $chirp)
     {
         //
     }
  
 }

Di sini kita telah menggunakan metode with milik Eloquent untuk melakukan eager-load terhadap setiap pengguna (user) yang terkait dengan Chirp. Kita juga menggunakan scope latest untuk mengembalikan data dalam urutan kronologis terbalik (terbaru ke terlama).

Menghubungkan pengguna ke Chirp

Kita telah memerintahkan Laravel untuk mengembalikan relasi user sehingga kita dapat menampilkan nama penulis Chirp. Namun, relasi user pada model Chirp belum didefinisikan. Untuk memperbaikinya, mari tambahkan relasi baru "belongs to" 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.

Memperbarui view

Selanjutnya, mari perbarui komponen chirps.index kita untuk menampilkan Chirp di bawah formulir:

resources/views/chirps/index.blade.php
 <x-app-layout>
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
         <form method="POST" action="{{ route('chirps.store') }}">
             @csrf
             <textarea
                 name="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"
             >{{ old('message') }}</textarea>
             <x-input-error :messages="$errors->store->get('message')" class="mt-2" />
             <x-primary-button class="mt-4">{{ __('Chirp') }}</x-primary-button>
         </form>
  
+        <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
+            @foreach ($chirps as $chirp)
+                <div class="p-6 flex space-x-2">
+                    <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>
     </div>
 </x-app-layout>

Sekarang lihatlah peramban Anda untuk melihat pesan yang Anda Chirp sebelumnya!

Daftar Chirp

Jangan ragu untuk membuat Chirp lebih banyak lagi, atau bahkan daftarkan akun lain dan mulailah percakapan!

Lanjutkan untuk mengizinkan pengeditan Chirp...