View trong laravel

1. Giới thiệu về View trong laravel

Tiếp tục với seri học laravel cùng Hozitech thì hôm nay Hozitech sẽ tiếp tục giới thiệu đến mọi người về View trong Laravel. View là một thành phần của mô hình MVC (Model-View-Controller). View trong laravel được sử dụng để hiển thị các dữ liệu mà Controller truy vấn từ Model lên trên giao diện người dùng. Với Laravel, chúng ta có thể tạo ra các view rất đẹp và dễ quản lý bằng cách sử dụng Blade Template Engine. Blade cho phép chúng ta tạo ra các template dễ dàng hơn và giảm thiểu số lượng mã HTML cần phải viết.

Trong bài viết này, chúng ta sẽ tìm hiểu về View trong Laravel và cách sử dụng Blade Template Engine. Chúng ta cũng sẽ thực hiện một số ví dụ cụ thể để minh họa cách sử dụng View trong Laravel.

2. Các khái niệm cơ bản trong view

Blade Template Engine

Blade là một template engine được sử dụng trong Laravel. Blade cho phép chúng ta tạo ra các template dễ dàng hơn và giảm thiểu số lượng mã HTML cần phải viết. Blade cung cấp nhiều tính năng hữu ích như các biểu thức điều kiện, vòng lặp, kế thừa, phân nhánh, … để tạo ra các view mạnh mẽ và dễ dàng quản lý.

View trong laravel

View là thành phần của mô hình MVC được sử dụng để hiển thị dữ liệu trên giao diện người dùng. View là nơi chứa các tập tin HTML, CSS, JavaScript, … để hiển thị dữ liệu trên trình duyệt. View được quản lý bởi Laravel và được tách biệt hoàn toàn với Model và Controller.

Layout

Layout là một view chứa các phần mở rộng (extension) và các block để tạo ra các view khác. Layout thường được sử dụng để tạo ra các phần tử chung như header, footer, menu, … và các phần tử mà nhiều view cùng sử dụng.

3. Các ví dụ cụ thể về view trong laravel

Tạo view trong laravel

Để tạo một view trong Laravel, chúng ta có thể sử dụng lệnh view() trong Controller. Ví dụ sau đây sẽ tạo ra một view đơn giản để hiển thị thông báo "Hello, Hozitech!".
```
// app/Http/Controllers/WelcomeController.php




namespace App\Http\Controllers;




use Illuminate\Http\Request;




class WelcomeController extends Controller

{

    public function index()

    {

        return view('welcome', [

            'message' => 'Hello, Hozitech!'

        ]);

    }

}










<!DOCTYPE html>

<html>

<head>

    <title>Welcome to Hozitech</title>

</head>

<body>

    <h1> {{$message}}</h1>

</body>

</html>
```
Trong đoạn mã trên, chúng ta đã tạo một view đơn giản với tên là welcome.blade.php. Trong method index() của WelcomeController, chúng ta đã truyền biến $message có giá trị là "Hello, Hozitech!" cho view welcome.blade.php. Ở phần thân của view, chúng ta sử dụng biểu thức Blade {{ $message }} để hiển thị giá trị của biến $message.

Sử dụng layout

Chúng ta có thể sử dụng layout để tạo ra các phần tử chung như header, footer, menu, … và các phần tử mà nhiều view cùng sử dụng. Để sử dụng layout trong Laravel, chúng ta có thể sử dụng các tính năng của Blade Template Engine.

Ví dụ sau đây sẽ tạo ra một layout đơn giản với header và footer:
```





<!DOCTYPE html>

<html>

<head>

    <title>@yield('title')</title>

</head>

<body>

    <header>

        This is header

    </header>




    <div class="container">

        @yield('content')

    </div>




    <footer>

        This is footer

    </footer>

</body>

</html>
```
Trong đoạn mã trên, chúng ta đã tạo ra một layout với tên là app.blade.php. Layout này bao gồm các phần tử chung như header, footer và một div có class là container để chứa phần thân của các view khác.

Sau đó, chúng ta có thể sử dụng layout này trong các view khác. Ví dụ sau đây sẽ tạo ra một view để hiển thị danh sách các người dùng:
```





@extends('layouts.app')




@section('title', 'List of Users')




@section('content')

    <h1>List of Users</h1>


    <ul>

        @foreach($users as $user)

            <li>{{ $user->name }}</li>

        @endforeach

    </ul>

@endsection
```
Trong đoạn mã trên, chúng ta sử dụng tính năng kế thừa của Blade bằng cách sử dụng @extends('layouts.app') để kế thừa layout app.blade.php. Chúng ta cũng sử dụng @section('title') và @section('content') để xác định phần tử title và content trong layout.

Ở phần thân của view, chúng ta sử dụng biểu thức điều kiện @foreach để lặp qua danh sách các người dùng và hiển thị tên của mỗi người dùng.

Sử dụng các biểu thức Blade

Blade Template Engine cung cấp nhiều tính năng hữu ích như các biểu thức điều kiện, lặp, include, yield, … để tạo ra các view động và dễ dàng sử dụng. Sau đây là một số ví dụ về các biểu thức Blade trong Laravel:

Biểu thức điều kiện @if:
```


<h1>{{ $post->title }}</h1>


@if($post->image)

    <img src="{{ $post->image }}" alt="Post image">

@endif


<p>{{ $post->content }}</p>
```
Trong đoạn code trên, chúng ta sử dụng biểu thức điều kiện @if để kiểm tra xem một bài đăng có ảnh hay không. Nếu có ảnh, chúng ta sẽ hiển thị ảnh đó bằng cách sử dụng thuộc tính src của thẻ img.

Biểu thức lặp @foreach:
```





<h1>List of Products</h1>




<ul>

    @foreach($products as $product)

        <li>{{ $product->name }} - {{ $product->price }}</li>

    @endforeach

</ul>
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức lặp @foreach để lặp qua danh sách các sản phẩm và hiển thị tên và giá của mỗi sản phẩm.

Biểu thức include @include:
```





<!DOCTYPE html>

<html>

<head>

    <title>@yield('title')</title>

</head>

<body>

    @include('layouts.header')




    <div class="container">

        @yield('content')

    </div>




    @include('layouts.footer')

</body>

</html>
```
Ở đoạn code trên, chúng ta sử dụng biểu thức include @include để đưa header và footer vào layout. Chúng ta có thể tạo các file riêng biệt để chứa phần tử header và footer, sau đó sử dụng @include để đưa chúng vào layout.

Biểu thức yield @yield và section @section:
```





@extends('layouts.app')




@section('title', 'Create a new post')




@section('content')

    <h1>Create a new post</h1>




    <form action="{{ route('posts.store') }}" method="POST">

        @csrf




        <div>

            <label for="title">Title</label>

            <input type="text" name="title" id="title">

        </div>




        <div>

            <label for="content">Content</label>

            <textarea name="content" id="content" cols="30" rows="10"></textarea>

        </div>




        <button type="submit">Create</button>

    </form>

@endsection
```
điều kiện, lặp, include, yield, … để tạo ra các view động và dễ dàng sử dụng. Sau đây là một số ví dụ về các biểu thức Blade trong Laravel:

Biểu thức điều kiện @if:
```
 <h1>{{ $post->title }}</h1> @if($post->image) <img src="{{ $post->image }}" alt="Post image"> @endif <p>{{ $post->content }}</p>
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức điều kiện @if để kiểm tra xem một bài đăng có ảnh hay không. Nếu có ảnh, chúng ta sẽ hiển thị ảnh đó bằng cách sử dụng thuộc tính src của thẻ img.

Biểu thức lặp @foreach:
```
 <h1>List of Products</h1> <ul> @foreach($products as $product) <li>{{ $product->name }} - {{ $product->price }}</li> @endforeach </ul>
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức lặp @foreach để lặp qua danh sách các sản phẩm và hiển thị tên và giá của mỗi sản phẩm.

Biểu thức include @include:
```
 <!DOCTYPE html> <html> <head> <title>@yield('title')</title> </head> <body> @include('layouts.header') <div class="container"> @yield('content') </div> @include('layouts.footer') </body> </html>
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức include @include để đưa header và footer vào layout. Chúng ta có thể tạo các file riêng biệt để chứa phần tử header và footer, sau đó sử dụng @include để đưa chúng vào layout.

Biểu thức yield @yield và section @section:
```
 @extends('layouts.app') @section('title', 'Create a new post') @section('content') <h1>Create a new post</h1> <form action="{{ route('posts.store') }}" method="POST"> @csrf <div> <label for="title">Title</label> <input type="text" name="title" id="title"> </div> <div> <label for="content">Content</label> <textarea name="content" id="content" cols="30" rows="10"></textarea> </div> <button type="submit">Create</button> </form> @endsection
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức yield @yield để đặt phần tử title vào layout. Chúng ta cũng sử dụng biểu thức section @section để định nghĩa nội dung cho phần tử content. Các phần tử này sẽ được đưa vào layout bằng cách sử dụng @extends.

Biểu thức component @component:
```





@props(['type' => 'info'])




<div class="alert alert-{{ $type }}">

    {{ $slot }}

</div>
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức component @component để tạo ra một phần tử cảnh báo. Chúng ta sử dụng thuộc tính props để nhận đầu vào, và thuộc tính $slot để nhận nội dung được đặt trong phần tử này.

Biểu thức slot @slot:
```





<!DOCTYPE html>

<html>

<head>

    <title>@yield('title')</title>

</head>

<body>

    @include('layouts.header')




    <div class="container">

        @yield('content')




        @if(session()->has('alert'))

            @component('components.alert', ['type' => session('alert')->type])

                {{ session('alert')->message }}

            @endcomponent

        @endif

    </div>




    @include('layouts.footer')

</body>

</html>
```
Trong đoạn mã trên, chúng ta sử dụng biểu thức slot @slot để đặt nội dung cảnh báo vào phần tử cảnh báo được tạo bởi component alert.

Trên đây là một số ví dụ về các biểu thức Blade trong Laravel. Các biểu thức này giúp chúng ta tạo ra các view động và dễ dàng sử dụng, giúp tăng tính tương tác và trải nghiệm của người dùng trên ứng dụng của chúng ta.

Ví dụ cụ thể về sử dụng Blade trong Laravel

Để minh họa cho việc sử dụng Blade trong Laravel, chúng ta sẽ tạo một trang web đơn giản với các trang view, các component, các biểu thức điều kiện, và các biểu thức lặp lại.

Tạo trang view

Đầu tiên, chúng ta sẽ tạo một trang view đơn giản cho trang chủ. Chúng ta sẽ sử dụng Blade để tạo ra HTML động để hiển thị trang chủ.
```





@extends('layouts.app')




@section('content')

    <div class="jumbotron">

        <h1>Welcome to my site!</h1>

        <p class="lead">This is a simple example of how to use Blade in Laravel.</p>

        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

    </div>

@endsection
```
Ở đây, chúng ta sử dụng @extends để kế thừa layout của trang web. Layout này được định nghĩa trong tệp app.blade.php. Tiếp theo, chúng ta sử dụng @section để định nghĩa phần content của trang chủ. Trong phần content này, chúng ta tạo ra một phần tử jumbotron và sử dụng các lớp CSS của Bootstrap để tạo ra một trang chủ đơn giản.

Sử dụng component

Bây giờ, chúng ta sẽ tạo ra một component để hiển thị thông báo cảnh báo. Đầu tiên, chúng ta sẽ tạo một tệp alert.blade.php trong thư mục resources/views/components:
```


<div class="alert alert-{{ $type }}" role="alert">

    {{ $slot }}

</div>
```
Ở đây, chúng ta sử dụng biểu thức $type để hiển thị một loại thông báo cảnh báo khác nhau (ví dụ: success, warning, danger, vv). Chúng ta sử dụng biểu thức $slot để hiển thị nội dung của thông báo.

Tiếp theo, chúng ta có thể sử dụng component này trong một view như sau:
```





@extends('layouts.app')




@section('content')

    <div class="jumbotron">

        <h1>Welcome to my site!</h1>

        <p class="lead">This is a simple example of how to use Blade in Laravel.</p>

        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>




        @component('components.alert', ['type' => 'success'])

            This is a success message!

        @endcomponent

    </div>

@endsection









@extends('layouts.app')




@section('content')

    <div class="jumbotron">

        <h1>Welcome to my site!</h1>

        <p class="lead">This is a simple example of how to use Blade in Laravel.</p>

        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>




        @component('components.alert', ['type' => 'success'])

            This is a success message!

        @endcomponent

    </div>

@endsection
```
Ở đây, chúng ta sử dụng biểu thức @component để sử dụng component alert và truyền vào biến $type có giá trị là success. Nội dung của component được định nghĩa trong phần @component và sử dụng biểu thức $slot để hiển thị nội dung của thông báo.

Sử dụng biểu thức điều kiện

Tiếp theo, chúng ta sẽ sử dụng biểu thức điều kiện để hiển thị một số phần tử trên trang web dựa trên điều kiện. Ví dụ, chúng ta muốn hiển thị một phần tử nav chỉ khi người dùng đã đăng nhập.
```





<!DOCTYPE html>

<html>

    <head>

        <title>Laravel</title>




        

    </head>

    <body>

        @if (Auth::check())

            <nav>

                

            </nav>

        @endif




        <div class="container">

            @yield('content')

        </div>

    </body>

</html>
```
Ở đây, chúng ta sử dụng biểu thức @if để kiểm tra xem người dùng đã đăng nhập hay chưa. Nếu người dùng đã đăng nhập, chúng ta hiển thị phần tử nav.

Sử dụng biểu thức lặp lại

Cuối cùng, chúng ta sẽ sử dụng biểu thức lặp lại để hiển thị danh sách các phần tử trên trang web. Ví dụ, chúng ta muốn hiển thị danh sách các bài viết trên trang chủ.
```





@extends('layouts.app')




@section('content')

    <div class="jumbotron">

        <h1>Welcome to my site!</h1>

        <p class="lead">This is a simple example of how to use Blade in Laravel.</p>

        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>




        @component('components.alert', ['type' => 'success'])

            This is a success message!

        @endcomponent




        <div class="posts">

            @foreach ($posts as $post)

                <div class="post">

                    <h2>{{ $post->title }}</h2>

                    <p>{{ $post->body }}</p>

                </div>

            @endforeach

        </div>

    </div>

@endsection
```
Ở đây, chúng ta sử dụng biểu thức @foreach để lặp lại danh sách các bài viết và hiển thị chúng trên trang web. Chúng ta sử dụng biểu thức $post->title và $post->body để hiển thị tiêu đề và nội dung của mỗi bài viết.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu về cách sử dụng Blade trong Laravel để tạo ra các giao diện(layout), trong quá trình thiết kế website với laravel. Việc hiểu rõ và nắm vững các kiến thức căn bản về mô hình MVC là tiền đề để giúp bạn có thể chinh phục được mã nguồn mở này. Chúc các bạn thành công!

Bạn có thể tham khảo thêm 1 số bài viết về laravel dưới đây:

Xin chào mình là Hiền hiện đang là Founder của Hozitech. Mình là kỹ sư phần mềm có hơn 9+ năm kinh nghiệm trong lĩnh vực thiết kế website, ứng dụng di động... Gần đây mình đang nghiên cứu thêm về lĩnh vực marketing. Mình rất vui khi được chia sẽ những kiến thức và kinh nghiệm của mình đến mọi người!

View trong laravel

1. Giới thiệu về View trong laravel

2. Các khái niệm cơ bản trong view

Blade Template Engine

View trong laravel

Layout

3. Các ví dụ cụ thể về view trong laravel

Tạo view trong laravel

Sử dụng layout

Sử dụng các biểu thức Blade

Kết luận