Laravel – Views

Chữ V trong MVC framework là Views. Tất cả Views được lưu trữ trong thư mục resources/views. Là nơi chứa code HTML để sử dụng trong ứng dụng.

Ví dụ

Step 1 : Tạo file resources/views/test.blade.php với nội dung sau:

<html>
   <body>
      <h1>Hello, World</h1>
   </body>
</html>

Step 2 : Thêm code sau vào routes/web.php.

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

Step 3 : Vào http://localhost:8000/test để xem kết quả.

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

Nhiều khi, bạn cần truyền dữ liệu vào views. Truyền một mảng đến view helper function, sau đó dùng key để lấy giá trị trong file html.

Ví dụ

Step 1 : Tạo file resources/views/test.blade.php với nội dung sau:

<html>
   <body>
      <h1><?php echo $name; ?></h1>
   </body>
</html>

Step 2 : Thêm code sau vào routes/web.php.

Route::get('/test', function(){
   return view('test',[‘name’=>’Virat Gandhi’]);
});

Step 3 : Vào http://localhost:8000/test để xem kết quả.

Share dữ liệu vào Views

Ở trên chúng ta có thể truyền dữ liệu vào Views. Nhưng đôi khi chúng ta cần chia sẽ dữ liệu này cho tất cả các Views. Lúc này chúng ta cần sử dụng phương thức share().

Phương thức share() được gọi từ phương thức boot của service provider.

Ví dụ

Step 1 : Thêm code sau vào file routes/web.php.

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

Step 2 : Tạo 2 file test.blade.phptest2.blade.php với code bên dưới. Chúng sẽ cùng nhận dữ liệu được share.

<html>
   <body>
      <h1><?php echo $name; ?></h1>
   </body>
</html>

Step 3 : Mở file app/Providers/AppServiceProvider.php và sử function boot() trong file này như code bên dưới.

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
        view()->share('name', 'Virat Gandhi');
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Step 4 : Vào 2 đường dẫn bên dưới để xem kết quả:

http://localhost:8000/test

http://localhost:8000/test2

Như vậy cả 2 cùng nhận kết quả được share ở trên.

Blade Templates

Blade giúp cho việc viết code giao diện trong laravel đơn giả và dễ đọc. Blade Templates chứa phần mở rộng là .blade.php như những ví dụ ở trên và được lưu trữ trong resources/views.

Blade Templates hỗ trợ tất cả các cấu trúc chính trong php để tạo vòng lặp và điều kiện @for, @foreach, @while, @if, và @elseif, tránh việc phải dùng các cặp thẻ <?php ?>

Sử dụng Blade templates có thẻ tạo master template và được kế thừa từ các template khác.

Step 1 : Tạo một master template resources/views/layouts/master.blade.php với code bên dưới.

<html>

   <head>
      <title>@yield('title')</title>
   </head>
  
   <body>
      @section('sidebar')
      This is the master sidebar.
      @show
      
      <div class = "container">
         @yield('content')
      </div>
   
   </body>
</html>
  • @yield(‘title’) hiển thị giá trị title
  • @section(‘sidebar’) Định nghĩa một section tên sidebar
  • @show Hiển thị nội dung của section
  • @yield(‘content’) Hiển thị nội dung của section content

Step 3 : Tạo một file template khác để kế thừ từ master template.
resources/views/page.blade.php

@extends('layouts.master')
@section('title', 'Page Title')

@section('sidebar')
   @parent
      <p>This is appended to the master sidebar.</p>
   @endsection
   
   @section('content')
      <h2>{{$name}}</h2>
      <p>This is my body content.</p>
   @endsection

@extends(‘layouts.master’) : kế thừa từ master layout. trong đó layouts.master chính là file master.blade.php trong thư mục layouts.

  • @section(‘title’, ‘Page Title’) sets giá trị cho section title.
  • @section(‘sidebar’) Định nghĩa section sidebar trong trang con của master layout.
  • @parent Hiển thị nội dung của sidebar section đã được định nghĩa trong master layout.
  • <p>….</p> Thêm đoạn này vào nội dung của sidebar section.
  • @section(‘content’) Định nghĩa nội dung section và thêm nội dung vào content section ở master layout
  • @endsection  Kết thúc section

Step 4 : Thêm code bên dưới vào routes/web.php

Route::get('blade', function () {
   return view('page',array('name' => 'Virat Gandhi'));
});

Step 5 : Vào http://localhost:8000/blade để xem kết quả.