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

  API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth
  Có gì mới trong bản cập nhật Laravel 5.5.33 vừa ra mắt

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?

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

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

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

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

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

Bài viết gốc được đăng tải tại allaravel.com

Có thể bạn quan tâm:

Xem thêm Việc làm laravel Developer hấp dẫn trên TopDev