Laravel view xây dựng logic trong giao diện

Mô hình MVC

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.

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.php

Chú ý 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?

Ví dụ 1: View trong Laravel

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 Illuminate\Support\Facades\View;

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 App\Http\Controllers;

use Illuminate\Http\Request;

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

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

Ví dụ về Controller trong Laravel

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 app\Provider\AppServiceProvider.php

<?php
namespace App\Providers;
use Illuminate\Support\Facades\View;

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’.

3 thoughts on “Laravel view xây dựng logic trong giao diện

  1. Mình chưa hiểu lắm phần cuối, chỉ nói qua là Chia sẻ dữ liệu cho tất cả các view là khai báo ở AppServiceProvider
    Vậy ứng dụng thế nào?
    Có nghĩa khi truyền 1 key – value cho 1 view này thì tất cả các view khác cũng nhận được biến đó sao ạ?

    1. Nghĩa là bạn khai báo 1 giá trị cho view ở AppServiceProvider thì trong tất cả các view đều sử dụng được giá trị đó

Add Comment