Panduan Awal Mengenai Views di Laravel

Halo teman-teman pengembang Laravel masa depan! Hari ini, kita akan melihat salah satu bagian yang paling menarik di Laravel - Views. Jangan khawatir jika Anda belum pernah mengoding sebelumnya; saya akan mengajarkan Anda langkah demi langkah. Pada akhir panduan ini, Anda akan dapat membuat halaman web yang indah seperti seorang ahli!

Laravel - Views

Apa Itu Views?

Views di Laravel adalah seperti wajah cantik dari aplikasi Anda. Mereka bertanggung jawab atas apa yang pengguna Anda lihat saat mereka mengunjungi website Anda. Pandang views sebagai template HTML yang menampilkan data Anda dalam cara yang user-friendly.

Membuat View Pertama Anda

Mari kita mulai dengan contoh sederhana. Bayangkan kita ingin membuat halaman welcome untuk website kita. Berikut adalah cara kita melakukannya:

Buka direktori resources/views dalam proyek Laravel Anda.
Buat file baru bernama welcome.blade.php.
Tambahkan kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my awesome Laravel website.</p>
</body>
</html>

Ini adalah struktur HTML dasar dengan pesan welcome yang hangat. Ekstensi .blade.php memberitahu Laravel untuk menggunakan mesin template Blade, yang kita akan jelajahi lebih lanjut nanti.

Menampilkan View

Sekarang kita punya view, mari kita tampilkan itu saat seseorang mengunjungi website kita. Dalam file routes/web.php, tambahkan kode ini:

Route::get('/', function () {
return view('welcome');
});

Ini memberitahu Laravel: "Saat seseorang mengunjungi halaman utama, tampilkan view 'welcome'."

Mengirimkan Data ke Views

Views sangat bagus, tetapi mereka menjadi sangat kuat saat kita dapat secara dinamis memasukkan data ke dalamnya. Mari kita lihat bagaimana kita dapat melakukan itu.

Mengirimkan Data Sederhana

Bayangkan kita ingin personalisasi pesan welcome kita. Kita dapat mengirimkan data ke view seperti ini:

Route::get('/', function () {
$name = "Sarah";
return view('welcome', ['name' => $name]);
});

Sekarang, perbarui welcome.blade.php untuk menggunakan data ini:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, {{ $name }}!</h1>
<p>Welcome to my awesome Laravel website.</p>
</body>
</html>

Sintaks {{ $name }} adalah cara Blade untuk menampilkan data. Saat Anda mengunjungi halaman ini, Anda akan melihat "Hello, Sarah!" instead of "Hello, World!".

Mengirimkan Banyak Variabel

Kita dapat mengirimkan sebanyak apa pun variabel yang kita butuhkan. Mari kita tambahkan beberapa lagi:

Route::get('/', function () {
$data = [
'name' => "Sarah",
'age' => 28,
'hobbies' => ['reading', 'coding', 'hiking']
];
return view('welcome', $data);
});

Dan perbarui view kita:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, {{ $name }}!</h1>
<p>Welcome to my awesome Laravel website.</p>
<p>You are {{ $age }} years old.</p>
<p>Your hobbies are:</p>
<ul>
@foreach($hobbies as $hobby)
<li>{{ $hobby }}</li>
@endforeach
</ul>
</body>
</html>

Di sini, kita memperkenalkan direktif Blade @foreach untuk meloop melalui array hobbies. Blade membuatnya sangat mudah untuk bekerja dengan data di views Anda!

Mengirimkan Data ke Semua Views

kadang-kadang, Anda mungkin ingin mengirimkan data tertentu ke semua views di aplikasi Anda. Misalnya, Anda mungkin ingin menampilkan nama pengguna saat ini di navigasi bar pada setiap halaman.

Menggunakan View Composers

Laravel menyediakan fitur yang disebut View Composers untuk tujuan ini. Berikut adalah cara Anda dapat menggunakannya:

Buat file baru app/Providers/ViewServiceProvider.php (jika belum ada).
Tambahkan kode berikut:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\View;

class ViewServiceProvider extends ServiceProvider
{
public function boot()
{
View::composer('*', function ($view) {
$view->with('currentUser', 'John Doe');
});
}
}

Daftarkan provider ini di config/app.php:

'providers' => [
// Providers lainnya...
App\Providers\ViewServiceProvider::class,
],

Sekarang, $currentUser akan tersedia di semua views Anda!

Kesimpulan

Views adalah hati dari antarmuka pengguna aplikasi Laravel Anda. Mereka memungkinkan Anda memisahkan logika presentasi dari logika bisnis Anda, membuat kode Anda lebih bersih dan mudah dipelihara. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba berbagai macam layout dan teknik pengiriman data!

Berikut adalah tabel referensi singkat metode yang kita pelajari:

Metode	Deskripsi
`view('name')`	Mengembalikan view
`view('name', ['key' => 'value'])`	Mengembalikan view dengan data
`View::composer('*', function)`	Mengirimkan data ke semua views

Selamat mengoding, dan semoga views Anda selalu menakjubkan! ?

Credits: Image by storyset

Tutorial Sebelumnya:

Laravel - Tanggapan

Tutorial Selanjutnya:

Laravel - Template Blade