Laravel view xây dựng logic trong giao diện
Bài viết được sự cho phép của tác giả Kien Dang Hoang
Tìm hiểu về Laravel View
Trong mô hình MVC, V là chữ viết tắt của View. Nó giúp tách biệt giữa application logic và presentation logic giúp quản lý và phát triển mã nguồn tốt hơn. Các view trong Laravel được lưu trữ trong thư mục resources/views. Chúng ta có thể tạo thêm các thư mục trong thư mục resources/views để phân cấp quản lý, trong các ví dụ ở các bài viết trước chúng ta đã tạo thư mục fontend cho tất cả các view liên quan đến fontend, tạo thư mục backend cho các view liên quan đến quản trị. Bạn có thể tạo các thư mục con ở cấp sâu hơn, ví dụ:
- resources/views/backend/product: Các view liên quan đến quản trị sản phẩm trên website.
- resources/views/backend/news: Các view liên quan đến quản trị bài viết trên website.
- …
Các view này có thể chứa mã HTML, CSS, Javascript phục vụ cho hiển thị nội dung cho người dùng.
Tham khảo vị trí tuyển dụng lập trình Laravel lương cao cho bạn
Tạo view trong Laravel
View trong Laravel không tạo được bằng câu lệnh php artisan mà chỉ đơn giản là tạo một file mới trong các thư mục con của resources/views với cấu trúc tên file như sau:
tên-view.blade.phpChú ý phần mở rộng .blade.php là bắt buộc, khi gọi đến view này chỉ đơn giản sử dụng code như sau:
view('tên-view');Với các view nằm ở các thư mục con, chúng ta sử dụng dấu chấm để ngăn cách giữa các thư mục và tên view. Ví dụ view resources/views/backend/product/create.blade.php sẽ được gọi như sau:
view('backend.product.create');Ok, chúng ta sẽ bắt đầu với ví dụ về view. Tạo một file test-view.blade.php trong resources/views/fontend với nội dung như sau:
<html>
<title>Ví dụ Laravel View - Allaravel.com</title>
<body>
<h1>Ví dụ về view trong Laravel</h1>
</body>
</html>Tạo một route trả về view này (routes/web.php)
Route::get('test-view', function(){
return view('fontend.test-view');
});Ok, vào đường dẫn http://laravel.dev/test-view để xem view hiển thị như thế nào?
Chú ý, đôi khi chúng ta xóa mất một view hoặc đã thay đổi tên view mà không để ý đến các đoạn mã gọi đến view này, khi người dùng truy cập vào các đường dẫn liên quan đến view này sẽ báo lỗi. Để tránh việc này xảy ra, chúng ta nên kiểm tra sự tồn tại của một view trước khi trả về view đó.
use IlluminateSupportFacadesView;
Route::get('contact', function(){
if (View::exists('fontend.contact')) {
return view('fontend.contact');
} else {
return 'Trang liên hệ đang bị lỗi, bạn vui lòng quay lại sau';
}
});Truyền dữ liệu cho View
Truyền dữ liệu cho view giúp cho view hiển thị các nội dung động, ví dụ view hiển thị chi tiết một bài viết thì tiêu đề bài viết, nội dung mỗi bài viết khác nhau chúng ta sẽ truyền các giá trị này cho view. Chúng ta hãy xem lại ví dụ về truyền dữ liệu cho view trong bài viết Laravel Controller. Nội dung MainController như sau:
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class MainController extends Controller
{
public function checkRole(){
echo "<br>2. MainController@checkRole";
echo "<br>Main Controller: checkRole function";
echo "<br>Thực hiện sau khi qua bộ lọc Middleware và trước khi gửi HTTP response";
}
public function showNews($news_id_string){
$news_id_arr = explode('-', $news_id_string);
$news_id = end($news_id_arr);
// Thực hiện lấy thông tin về bài viết $news_id, bài viết đưa ra ví dụ ở mức đơn giản
$news_title = 'Bài viết Laravel mới với ID là ' . $news_id;
// Các xử lý khác
return view('fontend.news-detail')->with(['news_id' => $news_id, 'news_title' => $news_title]);
}
}Có thể truyền dữ liệu vào view bằng phương thức with, tham số truyền vào là một mảng giá trị.
return view('fontend.news-detail')->with(['news_id' => $news_id, 'news_title' => $news_title]);Khi đó, muốn in nội dung các giá trị này trong view chúng ta đưa các biến này vào dấu {{ }}, xem nội dung view news-detail.blade.php nằm trong resources/views/fontend
<html>
<head>
<title>{{ $news_title }}</title>
<link href = "https://fonts.googleapis.com/css?family=Arial:100" rel = "stylesheet" type = "text/css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
font-family: 'Arial';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 96px;
}
</style>
</head>
<body>
<div class = "container">
<div class = "content">
<h1>{{ $news_title }}</h1>
<p>
ID bài viết: {{ $news_id }}
<br> Tiêu đề: {{ $news_title }}
<br> Nội dung: Chưa có nội dung gì cả
</p>
</div>
</div>
</body>
</html>
Chia sẻ dữ liệu cho tất cả các View
Có những lúc bạn muốn chia sẻ một dữ liệu để tất cả các view khi được render bởi hệ thống sẽ sử dụng dữ liệu này. Thực hiện bằng cách sử dụng phương thức share() trong phương thức boot() của service provider, đơn giản là thêm vào appProviderAppServiceProvider.php
<?php
namespace AppProviders;
use IlluminateSupportFacadesView;
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
View::share('key', 'value');
}
...
public function register()
{
//
}
}Khi đó, trong các view bạn chỉ cần sử dụng {{ $key }} là nó sẽ in ra ‘value’.
Bài viết gốc được đăng tải tại allaravel.com
Có thể bạn quan tâm:
- 10 Frameworks tốt nhất hiện nay cho PHP
- Xây dựng hệ thống referral trong Laravel
- Laravel 5.5 và Reactjs: Xây dựng CRUD (Create, Read, Update, Delete) từ đầu
Xem thêm Việc làm laravel Developer hấp dẫn trên Station D
Bạn có thể quan tâm
- Vừa đủ để đi (go)(Công Nghệ)
- Applicant Tracking System là gì? ATS hoạt động ra sao(Cẩm Nang Tuyển Dụng)
- Thị trường EdTech Vietnam- Nhiều tiềm năng nhưng còn bị bỏ ngỏ tại Việt Nam(Chuyện IT)
