Laravel - Pandangan: Panduan untuk Pemula

Hai sana, para pengembang Laravel masa depan! Hari ini, kita akan melihat salah satu bagian yang paling menarik dari Laravel - Pandangan. Jangan khawatir jika Anda belum pernah mengoding sebelumnya; saya akan memandu Anda langkah demi langkah. Pada akhir panduan ini, Anda akan dapat membuat halaman web yang indah seperti seorang profesional!

Laravel - Views

Apa itu Pandangan?

Pandangan di Laravel adalah seperti wajah cantik aplikasi Anda. Mereka bertanggung jawab atas apa yang pengguna Anda lihat saat mereka mengunjungi website Anda. Bayangkan pandangan sebagai template HTML yang menyajikan data Anda dengan cara yang user-friendly.

Membuat Pandangan Pertama Anda

mari mulai dengan contoh sederhana. Bayangkan kita ingin membuat halaman selamat datang untuk website kita. Berikut cara kita melakukannya:

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

<!DOCTYPE html>
<html>
<head>
<title>Selamat Datang di Situs Saya</title>
</head>
<body>
<h1>Hallo, Dunia!</h1>
<p>Selamat datang di website Laravel yang menakjubkan saya.</p>
</body>
</html>

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

Menampilkan Pandangan

Sekarang kita memiliki pandangan, 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, tunjukkan pandangan 'welcome'."

Mengirimkan Data ke Pandangan

Pandangan bagus, tetapi mereka menjadi benar-benar kuat saat kita dapat secara dinamis memasukkan data ke dalamnya. Mari lihat bagaimana kita dapat melakukannya itu.

Mengirimkan Data Sederhana

Bayangkan kita ingin personalisasi pesan selamat datang kita. Kita dapat mengirimkan data ke pandangan 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>Selamat Datang di Situs Saya</title>
</head>
<body>
<h1>Hallo, {{ $name }}!</h1>
<p>Selamat datang di website Laravel yang menakjubkan saya.</p>
</body>
</html>

Sintaks {{ $name }} adalah cara Blade untuk mencetak data. Saat Anda mengunjungi halaman sekarang, Anda akan melihat "Hallo, Sarah!" instead of "Hallo, Dunia!".

Mengirimkan Banyak Variabel

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

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

Dan perbarui pandangan kita:

<!DOCTYPE html>
<html>
<head>
<title>Selamat Datang di Situs Saya</title>
</head>
<body>
<h1>Hallo, {{ $name }}!</h1>
<p>Selamat datang di website Laravel yang menakjubkan saya.</p>
<p Anda berumur {{ $age }} tahun.</p>
<p>Hobi Anda adalah:</p>
<ul>
@foreach($hobbies as $hobby)
<li>{{ $hobby }}</li>
@endforeach
</ul>
</body>
</html>

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

Mengirimkan Data ke Semua Pandangan

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

Menggunakan View Composers

Laravel menyediakan fitur yang disebut View Composers untuk tujuan ini. Berikut 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' => [
// Provider lain...
App\Providers\ViewServiceProvider::class,
],

Sekarang, $currentUser akan tersedia di semua pandangan Anda!

Kesimpulan

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

Berikut adalah tabel referensi cepat metode yang kita bahas:

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

Selamat coding, dan semoga pandangan Anda selalu mempesona! ?

Credits: Image by storyset

Tutorial Sebelumnya:

Laravel - Respons

Tutorial Seterusnya:

Laravel - Templat Blade