Laravel 12 CRUD #13: Menambahkan Nama Pengguna di Halaman (Opsional)

Laravel 12 CRUD
#13 Menambahkan Nama Pengguna di Halaman (Opsional)

✨ Tampilkan siapa yang sedang login • Biar lebih seru!

🧑‍💻 Sekarang kita buat aplikasi lebih personal! Setelah berhasil memasang sistem login dan melindungi halaman, ada baiknya kita menampilkan nama pengguna yang sedang login di pojok kanan atas halaman.
Dengan begitu, anak-anak yang menggunakan aplikasi akan tahu siapa yang sedang memakainya. Rasanya lebih seru dan seperti aplikasi sungguhan! 😊

Langkah 1: Mengakses Data Pengguna yang Login

1 Laravel menyediakan cara mudah untuk mendapatkan data pengguna yang sedang login. Kita bisa menggunakan helper auth() atau Auth::user(). Contoh:

// Mengambil nama pengguna {{ auth()->user()->name }} // Atau jika ingin cek apakah sudah login @auth // Tampilkan untuk yang login @endauth @guest // Tampilkan untuk yang belum login @endguest

Kita akan menggunakan ini di file tampilan (Blade).

Langkah 2: Temukan File Navigasi

2 Saat kita menginstal Breeze, ia membuat file navigasi di resources/views/layouts/navigation.blade.php. File ini berisi menu navbar yang muncul di semua halaman setelah login.

Buka file navigation.blade.php. Di dalamnya, akan ada bagian yang menampilkan dropdown nama pengguna. Biasanya sudah ada kode seperti:

<div class="relative" x-data="{ open: false }"> <div class="flex items-center"> <button @click="open = !open" class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"> <div>{{ Auth::user()->name }}</div> ... </button> </div> ... </div>

Nah, sebenarnya Breeze sudah menampilkan nama pengguna! Tapi kadang tampilannya hanya inisial atau ikon. Kita bisa memodifikasinya agar lebih jelas. Jika belum ada, kita tambahkan sendiri.

💡 Tips: Jika kamu menggunakan layout sendiri, kamu bisa menambahkan kode di atas di mana pun kamu ingin menampilkan nama pengguna.

Langkah 3: Modifikasi Tampilan Nama (Opsional)

3 Di file navigation.blade.php, cari bagian yang menampilkan nama. Biasanya ada seperti ini:

<div>{{ Auth::user()->name }}</div>

Kita bisa menambahkan teks "Halo," agar lebih ramah:

<div>Halo, {{ Auth::user()->name }}! 👋</div>

Atau jika ingin lebih menonjol, tambahkan emoji dan warna:

<div class="font-bold text-indigo-600">😊 {{ Auth::user()->name }}</div>

Simpan file, lalu segarkan halaman. Kamu akan melihat nama pengguna dengan sapaan hangat di pojok kanan atas.

🎨 Kreatif! Kamu bisa mengubah gaya (warna, ukuran, ikon) sesuai selera. Yang penting, pengguna merasa aplikasi ini milik mereka.

Langkah 4: Menambahkan Pengecekan Login (Keamanan)

4 Agar tidak error saat pengguna belum login (misalnya di halaman login atau register), kita perlu mengecek apakah sudah login. Gunakan @auth dan @guest:

@auth <div>Halo, {{ Auth::user()->name }}! 👋</div> @else <div>Halo, Tamu! 👋</div> @endauth

Breeze biasanya sudah melakukan ini dengan baik. Tapi jika kamu menambahkan sendiri di luar area yang sudah dilindungi, pastikan menggunakan pengecekan.

Langkah 5: Uji Coba

5 Sekarang uji aplikasi:

• Jalankan server: php artisan serve
• Login dengan akun yang sudah didaftarkan.
• Lihat pojok kanan atas halaman (di dashboard atau halaman siswa). Nama pengguna akan muncul.
• Coba logout → nama akan berubah menjadi "Halo, Tamu!" (atau hilang sama sekali jika Breeze menyembunyikannya).

📌 Catatan: Jika tidak muncul, cek kembali file navigation.blade.php. Pastikan ada kode yang menampilkan {{ Auth::user()->name }}. Jika tidak ada, tambahkan sendiri di bagian yang sesuai.

🎉 Selamat! Sekarang pengguna bisa melihat namanya sendiri di aplikasi. Sentuhan kecil ini membuat aplikasi terasa lebih personal dan menyenangkan. Anak-anak pasti senang melihat namanya muncul! 😊

Ringkasan Langkah

• ✅ Buka resources/views/layouts/navigation.blade.php
• ✅ Cari bagian yang menampilkan nama pengguna (biasanya {{ Auth::user()->name }})
• ✅ Modifikasi dengan tambahan teks, emoji, atau gaya CSS
• ✅ Gunakan @auth jika perlu mengecek login
• ✅ Uji coba dengan login dan logout

📌 Catatan: Jika kamu tidak menggunakan Breeze, kamu tetap bisa menambahkan kode ini di file layout utama (misalnya app.blade.php) dengan cara yang sama.

⬅️ Kembali ke #12: Membatasi Halaman dengan Login ➡️ Lanjut ke #14: Finishing – Uji Coba dan Eksplorasi

(Link akan aktif saat artikel sebelumnya dan selanjutnya terbit)

📘 Laravel 12 CRUD untuk Sekolah Dasar • #13 Menambahkan Nama Pengguna di Halaman • 👋 Selamat mencoba!