Laravel - Views: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future Laravel developers! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những phần thú vị nhất của Laravel - Views. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây; tôi sẽ hướng dẫn bạn từng bước một. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra những trang web đẹp mắt như một chuyên gia!

Laravel - Views

Views là gì?

Views trong Laravel giống như là gương mặt đẹp của ứng dụng bạn. Chúng chịu trách nhiệm cho những gì người dùng thực sự thấy khi họ truy cập vào trang web của bạn. Hãy nghĩ về views như là các mẫu HTML để trình bày dữ liệu của bạn một cách thân thiện với người dùng.

Tạo View đầu tiên của bạn

Hãy bắt đầu với một ví dụ đơn giản. Giả sử chúng ta muốn tạo một trang chào mừng cho trang web của mình. Dưới đây là cách chúng ta làm:

Đi tới thư mục resources/views trong dự án Laravel của bạn.
Tạo một tệp mới có tên welcome.blade.php.
Thêm mã sau:

<!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>

Đây là cấu trúc HTML cơ bản với một thông điệp chào mừng ấm áp. Phần mở rộng .blade.php cho biết Laravel sẽ sử dụng động cơ templating của nó, Blade, mà chúng ta sẽ khám phá sâu hơn sau này.

渲染视图

Bây giờ chúng ta đã có view, hãy hiển thị nó khi ai đó truy cập trang web của chúng ta. Trong tệp routes/web.php, thêm mã sau:

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

Điều này cho biết: "Khi ai đó truy cập trang chủ, hiển thị cho họ view 'welcome'."

Truyền dữ liệu vào Views

Views rất tuyệt vời, nhưng chúng trở nên thực sự mạnh mẽ khi chúng ta có thể chèn dữ liệu một cách động vào chúng. Hãy xem chúng ta có thể làm thế nào.

Truyền dữ liệu đơn giản

Giả sử chúng ta muốn cá nhân hóa thông điệp chào mừng. Chúng ta có thể truyền dữ liệu vào view như sau:

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

Bây giờ, hãy cập nhật welcome.blade.php để sử dụng dữ liệu này:

<!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>

Cú pháp {{ $name }} là cách Blade hiển thị dữ liệu. Khi bạn truy cập trang này bây giờ, bạn sẽ thấy "Hello, Sarah!" thay vì "Hello, World!".

Truyền nhiều biến

Chúng ta có thể truyền nhiều biến tùy ý. Hãy thêm một vài biến nữa:

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

Và cập nhật view của chúng ta:

<!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>

Ở đây, chúng ta đã giới thiệu một hướng dẫn Blade @foreach để vòng lặp qua mảng hobbies. Blade làm cho việc làm việc với dữ liệu trong views trở nên siêu dễ dàng!

Chia sẻ dữ liệu với tất cả Views

Đôi khi, bạn có thể muốn chia sẻ dữ liệu nhất định với tất cả các views trong ứng dụng của bạn. Ví dụ, bạn có thể muốn hiển thị tên người dùng hiện tại trong thanh điều hướng trên mỗi trang.

Sử dụng View Composers

Laravel cung cấp một tính năng gọi là View Composers cho mục đích này. Dưới đây là cách bạn có thể sử dụng nó:

Tạo một tệp mới app/Providers/ViewServiceProvider.php (nếu chưa tồn tại).
Thêm mã sau:

<?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');
});
}
}

Đăng ký nhà cung cấp này trong config/app.php:

'providers' => [
// Các nhà cung cấp khác...
App\Providers\ViewServiceProvider::class,
],

Bây giờ, $currentUser sẽ khả dụng trong tất cả các views của bạn!

Kết luận

Views là trái tim của giao diện người dùng trong ứng dụng Laravel của bạn. Chúng cho phép bạn tách biệt logic hiển thị khỏi logic kinh doanh, làm cho mã của bạn sạch sẽ và dễ bảo trì hơn. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các bố cục và kỹ thuật truyền dữ liệu khác nhau!

Dưới đây là bảng tham khảo nhanh các phương thức chúng ta đã bao gồm:

Phương thức	Mô tả
`view('name')`	Trả về một view
`view('name', ['key' => 'value'])`	Trả về một view với dữ liệu
`View::composer('*', function)`	Chia sẻ dữ liệu với tất cả views

Chúc các bạn viết mã vui vẻ, và hy vọng rằng các views của bạn luôn ấn tượng! ?

Credits: Image by storyset