Học Laravel 10 cơ bản – Bài 4: Blade Template trong Laravel 10

0
Laravel PHP framework

Học Laravel 10 cơ bản: Blade Template

1. Blade là gì?

  • Blade là template engine tích hợp sẵn trong Laravel.

  • Giúp viết HTML kết hợp PHP dễ dàng.

  • Hỗ trợ layout, include, component, vòng lặp, điều kiện.

  • File Blade nằm trong thư mục: resources/views/ → đuôi .blade.php.

Ví dụ: resources/views/welcome.blade.php

2. Tạo View đơn giản

Trong routes/web.php:

Route::get('/hello', function () { 
        return view('hello', ['name' => 'Laravel']); 
});

Tạo file: resources/views/hello.blade.php

<h1>Xin chào {{ $name }}!</h1>

👉 Truy cập http://localhost:8000/hello → hiển thị: Xin chào Laravel!

3. Blade Syntax cơ bản

Hiển thị biến:

{{ $name }}

Escape HTML:

{{ $content }}      {{-- Escape (an toàn) --}} 
{!! $content !!}    {{-- In raw HTML --}}

 

Điều kiện:

@if($age >= 18) 
    <p>Người lớn</p> 
@else 
    <p>Trẻ em</p> 
@endif

Vòng lặp:

@foreach($users as $user) //Vòng lặp foreach
     <li>{{ $user->name }}</li> 
@endforeach 

@for($i = 1; $i <= 5; $i++) //Vòng lặp for
     <p>Số: {{ $i }}</p> 
@endfor

Kiểm tra biến tồn tại:

@isset($email) 
   <p>Email: {{ $email }}</p> 
@endisset

4. Layout & Section

Layout chính (master layout)

Tạo file: resources/views/layouts/app.blade.php

<!DOCTYPE html> 
<html> 
<head> 
      <title>@yield('title', 'Laravel App')</title> 
</head> 
<body> 
      <header> 
          <h1>My Website</h1> 
      </header> 

      <main> 
          @yield('content') 
      </main> 

      <footer> 
         <p>Copyright 2025</p> 
      </footer> 
</body> 
</html>

View con kế thừa layout

Tạo file: resources/views/home.blade.php

@extends('layouts.app') 

@section('title', 'Trang chủ')
 
@section('content') 
     <h2>Xin chào, đây là trang chủ</h2> 
@endsection

Route test:

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

 

👉 http://localhost:8000/home → hiển thị trong layout.

5. Include (tách file nhỏ)

Tạo resources/views/partials/nav.blade.php:

<nav> 
     <a href="/">Home</a> | 
     <a href="/about">About</a> 
</nav>

Trong layout:

@include('partials.nav')

6. Blade Component

Laravel Blade hỗ trợ component tái sử dụng.

Tạo component:

php artisan make:component Alert

 

Tạo 2 file:

  • app/View/Components/Alert.php (logic)

  • resources/views/components/alert.blade.php (giao diện)

File alert.blade.php:

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

Dùng trong view:

<x-alert type="success"> 
      Đăng ký thành công! 
</x-alert>

👉 Tái sử dụng nhiều lần mà không cần viết lại.

7. CSRF Token trong Form

Khi dùng form POST → Laravel yêu cầu CSRF token để chống tấn công.

<form method="POST" action="/users"> 
      @csrf 
      <input type="text" name="name"> 
      <button type="submit">Lưu</button> 
</form>

👉 Nếu thiếu @csrf → sẽ bị lỗi 419 Page Expired.

✅ Tổng kết

Trong bài này bạn đã học:

  • Tạo view với Blade.

  • Cú pháp Blade cơ bản (biến, điều kiện, vòng lặp).

  • Layout & Section.

  • Include file nhỏ.

  • Component Blade.

  • CSRF trong form.

Blade Template Học Laravel cơ bản laravel Laravel cho người mới Laravel cơ bản

Content Nguyen

Related Articles

Học Laravel 10 cơ bản – Bài 5: Database & Eloquent ORM trong Laravel 10
Read More
Học Laravel 10 cơ bản – Bài 3: Controller & Request Laravel 10
Read More
Học Laravel 10 cơ bản – Bài 2: Routing trong Laravel 10
Read More