Một website doanh nghiệp có thể thiếu hiệu ứng đẹp, nhưng gần như không thể thiếu Form.

Từ trang liên hệ, đăng nhập, đăng ký, tìm kiếm, đặt hàng, gửi yêu cầu báo giá đến hệ thống CRM hay ERP, tất cả đều hoạt động thông qua biểu mẫu.

HTML5 đã bổ sung rất nhiều tính năng giúp Form trở nên thông minh hơn, giảm lượng JavaScript phải viết và mang lại trải nghiệm tốt hơn cho người dùng.

---

🎯 Mục tiêu bài học

Sau bài này bạn sẽ:

• Hiểu cấu trúc chuẩn của một Form HTML5.

• Biết sử dụng các loại input hiện đại.

• Áp dụng các thuộc tính kiểm tra dữ liệu.

• Tạo Form thân thiện với người dùng.

• Chuẩn bị nền tảng để tích hợp PHP, Laravel hoặc Node.js.

  

---

Form là gì?

Form là nơi người dùng nhập dữ liệu và gửi về máy chủ.

Ví dụ:

• Đăng nhập

• Đăng ký

• Liên hệ

• Thanh toán

• Đặt lịch

• Gửi CV

• Tìm kiếm

---

Cấu trúc cơ bản

<form action="/login" method="post">

    <label>Email</label>
    <input type="email">

    <label>Password</label>
    <input type="password">

    <button type="submit">
        Đăng nhập
    </button>

</form>

Form luôn bắt đầu bằng thẻ:

<form>

và kết thúc bằng:

</form>

---

Hai thuộc tính quan trọng

action

Là địa chỉ sẽ nhận dữ liệu.

Ví dụ:

<form action="/contact">

hoặc

<form action="save.php">

---

method

Có hai giá trị phổ biến.

GET

<form method="get">

Dữ liệu xuất hiện trên URL.

Ví dụ

/search?q=html

Phù hợp cho:

• tìm kiếm

• lọc dữ liệu

• phân trang

---

POST

<form method="post">

Dữ liệu gửi trong phần thân của request.

Phù hợp cho:

• đăng nhập

• đăng ký

• thanh toán

• cập nhật dữ liệu

• upload file

---

Label

Luôn nên sử dụng label.

Ví dụ:

<label>Email</label>

<input type="email">

Hoặc tốt hơn:

<label for="email">
    Email
</label>

<input
    id="email"
    type="email">

Khi nhấn vào chữ Email, con trỏ sẽ tự động chuyển vào ô nhập liệu.

---

Các loại Input quan trọng

Text

<input type="text">

Dùng nhập:

• họ tên

• địa chỉ

• tên công ty

---

Email

<input type="email">

HTML5 tự kiểm tra định dạng email.

---

Password

<input type="password">

Ẩn ký tự khi nhập.

---

Number

<input type="number">

Chỉ cho phép nhập số.

---

Date

<input type="date">

Hiển thị lịch chọn ngày.

---

Time

<input type="time">

---

Tel

<input type="tel">

Nhập số điện thoại.

---

URL

<input type="url">

Kiểm tra định dạng website.

---

Search

<input type="search">

Dùng cho ô tìm kiếm.

---

File

<input type="file">

Cho phép tải tệp lên.

---

Placeholder

<input
type="text"
placeholder="Nhập họ tên">

Placeholder chỉ mang tính gợi ý.

Không thay thế Label.

---

Required

Bắt buộc nhập.

<input
type="email"
required>

Nếu bỏ trống, trình duyệt sẽ không cho gửi Form.

---

Minlength

<input
type="text"
minlength="6">

Ít nhất 6 ký tự.

---

Maxlength

<input
maxlength="50">

Giới hạn số ký tự.

---

Min và Max

<input
type="number"
min="18"
max="65">

---

Pattern

Cho phép kiểm tra bằng biểu thức chính quy.

Ví dụ:

<input
pattern="[A-Za-z]{5,20}">

Chỉ chấp nhận chữ cái.

---

Readonly

<input
readonly>

Có thể xem nhưng không sửa.

---

Disabled

<input
disabled>

Không thể thao tác.

Giá trị cũng sẽ không được gửi lên máy chủ.

---

Autofocus

<input
autofocus>

Con trỏ tự động đứng tại ô này khi mở trang.

---

Autocomplete

<input
autocomplete="email">

Giúp trình duyệt gợi ý dữ liệu đã lưu.

---

Checkbox

<input type="checkbox">

Có thể chọn nhiều.

Ví dụ:

• HTML

• CSS

• JavaScript

---

Radio

<input
type="radio"
name="gender">

Chỉ chọn một.

Ví dụ:

• Nam

• Nữ

• Khác

---

Select

<select>

<option>Việt Nam</option>

<option>Hoa Kỳ</option>

<option>Nhật Bản</option>

</select>

Danh sách lựa chọn.

---

Textarea

<textarea
rows="5">
</textarea>

Dùng nhập nội dung dài.

---

Button

<button
type="submit">

Gửi

</button>

---

Reset

<button
type="reset">

Làm lại

</button>

Xóa dữ liệu đã nhập.

---

Ví dụ Form doanh nghiệp

<form action="/contact" method="post">

    <label for="name">Họ và tên</label>
    <input
        id="name"
        type="text"
        required>

    <label for="email">Email</label>
    <input
        id="email"
        type="email"
        required>

    <label for="phone">Số điện thoại</label>
    <input
        id="phone"
        type="tel">

    <label for="message">Nội dung</label>

    <textarea
        id="message"
        rows="5">
    </textarea>

    <button type="submit">
        Gửi liên hệ
    </button>

</form>

Đây là cấu trúc phù hợp cho hầu hết website doanh nghiệp.

---

Những lỗi thường gặp

❌ Không dùng label.

❌ Chỉ dùng placeholder thay cho label.

❌ Dùng method="get" cho đăng nhập.

❌ Không kiểm tra dữ liệu bằng required.

❌ Không đặt type phù hợp cho từng trường.

❌ Không liên kết label với input bằng thuộc tính for và id.

❌ Quên thêm name cho các trường, khiến dữ liệu không được gửi lên máy chủ.

---

Thực hành

Tạo một Form Đăng ký khóa học gồm:

• Họ và tên

• Email

• Số điện thoại

• Ngày sinh

• Giới tính

• Khóa học muốn đăng ký

• Nội dung ghi chú

• Nút Đăng ký

• Nút Làm lại

Yêu cầu:

• Sử dụng Semantic HTML.

• Mỗi trường đều có label.

• Áp dụng required cho các trường quan trọng.

• Chọn đúng type cho từng ô nhập liệu.

---

Tổng kết

Form là cầu nối giữa người dùng và hệ thống. Một biểu mẫu được xây dựng đúng chuẩn HTML5 không chỉ giúp nhập liệu nhanh hơn mà còn giảm lỗi, cải thiện trải nghiệm người dùng và tạo nền tảng vững chắc để tích hợp với PHP, Laravel, Node.js hay bất kỳ công nghệ backend nào.

Trong các bài tiếp theo, chúng ta sẽ tiếp tục tối ưu cấu trúc HTML để website thân thiện hơn với công cụ tìm kiếm và sẵn sàng cho các dự án thực tế.

---

📌 Kiến thức đạt được

• ✅ Hiểu cấu trúc của thẻ form.

• ✅ Phân biệt GET và POST.

• ✅ Sử dụng các loại input phổ biến trong HTML5.

• ✅ Áp dụng các thuộc tính kiểm tra dữ liệu như required, minlength, maxlength, pattern.

• ✅ Biết cách tạo Form theo chuẩn Enterprise.

• ✅ Nắm được các lỗi phổ biến khi xây dựng biểu mẫu.

➡️ Bài tiếp theo: Bài 03 — SEO Friendly HTML: Xây dựng HTML thân thiện với công cụ tìm kiếm.

Ở các bài trước, mỗi Relationship đều liên kết giữa các Model cố định.

Ví dụ:

• User ↔ Profile

• User ↔ Post

• Post ↔ Tag

Tuy nhiên trong thực tế, có nhiều trường hợp nhiều Model khác nhau cùng chia sẻ một loại dữ liệu.

Ví dụ:

• Post có Comment.

• Video có Comment.

• Product có Comment.

Nếu tạo riêng ba bảng bình luận thì sẽ rất khó quản lý.

Laravel giải quyết vấn đề này bằng Polymorphic Relationship.

---

Polymorphic Relationship là gì?

Polymorphic Relationship cho phép một bảng được dùng chung cho nhiều Model khác nhau.

Ví dụ:

Post
      │
      │
Video │──────► Comments
      │
Product

Tất cả đều dùng chung bảng comments.

---

Ví dụ cơ sở dữ liệu

Bảng posts

id	title
1	Laravel 12

Bảng videos

id	title
1	Laravel Tutorial

Bảng comments

id	body	commentable_id	commentable_type
1	Hay quá	1	App\Models\Post
2	Rất hữu ích	1	App\Models\Video

Thay vì dùng post_id hoặc video_id, Laravel sử dụng:

• commentable_id
• commentable_type

để xác định Comment thuộc về Model nào.

Chuẩn bị Model Comment

Để lưu các bình luận, trước tiên chúng ta cần tạo Model Comment kèm Migration.

php artisan make:model Comment -m

Laravel sẽ tạo:

app/
└── Models/
    └── Comment.php

database/
└── migrations/
    xxxx_create_comments_table.php

tạo Video thì:

php artisan make:model Video -m

---

Ít nhất nên có:

Schema::create('videos', function (Blueprint $table) {
    $table->id();

    $table->string('title');

    $table->text('description')->nullable();

    $table->timestamps();
});

Trong model Video:

class Video extends Model
{
    protected $fillable = [
        'title',
        'description'
    ];

    public function comments()
    {
        return $this->morphMany(
            Comment::class,
            'commentable'
        );
    }
}

---

Migration

Ví dụ tạo bảng comments:

Schema::create('comments', function (Blueprint $table) {

    $table->id();

    $table->text('body');

    $table->morphs('commentable');

    $table->timestamps();

});

Lệnh:

$table->morphs('commentable');

sẽ tự tạo hai cột:

commentable_id

commentable_type

Đây là chuẩn của Laravel.

---

morphMany()

Trong model Post:

class Post extends Model
{
    public function comments()
    {
        return $this->morphMany(
            Comment::class,
            'commentable'
        );
    }
}

Model Video cũng tương tự:

class Video extends Model
{
    public function comments()
    {
        return $this->morphMany(
            Comment::class,
            'commentable'
        );
    }
}

Một bảng comments có thể phục vụ nhiều Model.

---

morphTo()

Trong model Comment:

class Comment extends Model
{
    protected $fillable = [
        'body'
    ];

    public function commentable()
    {
        return $this->morphTo();
    }
}

Laravel sẽ tự xác định Comment thuộc Post hay Video.

Tạo Comment

use App\Models\Post;
use App\Models\Comment;

Route::get('/test', function () {

 $post = Post::find(1);

 $post->comments()->create([
    'body' => 'Bài viết rất hay!'
 ]);
});

Laravel sẽ tự lưu:

commentable_id = 1

commentable_type = App\Models\Post

---

Lấy Comment của Post

$post = Post::find(1);

foreach ($post->comments as $comment) {

    echo $comment->body;

}

---

Xác định Comment thuộc Model nào

$comment = Comment::find(1);

$item = $comment->commentable;

Nếu Comment thuộc Post:

echo $item->title;

Nếu thuộc Video:

echo $item->title;

Bạn không cần kiểm tra thủ công.

---

Một ví dụ thực tế

Ngoài Comment, Polymorphic còn được dùng cho:

Post
Video
Product
Course
        │
        ▼
     Images

Một bảng images có thể lưu hình ảnh cho nhiều Model.

Hoặc:

Post
Video
Product
        │
        ▼
      Likes

Hay:

Post
Video
Product
Course
        │
        ▼
     Attachments

Đây đều là các ứng dụng phổ biến của Polymorphic Relationship.

---

Ưu điểm

Polymorphic Relationship giúp:

• Giảm số lượng bảng.

• Tránh trùng lặp dữ liệu.

• Dễ mở rộng hệ thống.

• Không cần tạo nhiều bảng giống nhau.

Đây là lý do tính năng này được sử dụng trong rất nhiều hệ thống CMS và mạng xã hội.

---

Tổng kết

Trong bài này chúng ta đã học:

• Polymorphic Relationship là gì.

• morphs().

• morphMany().

• morphTo().

• Chia sẻ một bảng cho nhiều Model.

• Tạo và truy cập dữ liệu bằng Polymorphic.

Đây là Relationship nâng cao nhưng rất mạnh mẽ của Eloquent ORM, đặc biệt hữu ích trong các ứng dụng có nhiều loại đối tượng cùng sử dụng chung dữ liệu như bình luận, hình ảnh hoặc tệp đính kèm.

---

Bài tập

1. Tạo model Comment.

2. Tạo bảng comments sử dụng $table->morphs('commentable').

3. Khai báo morphMany() trong model Post.

4. Khai báo morphMany() trong model Video.

5. Khai báo morphTo() trong model Comment.

6. Tạo một Comment cho Post.

7. Hiển thị tất cả Comment của một Video.

---

Kết thúc phần Relationship

Đến đây, bạn đã hoàn thành toàn bộ các Relationship quan trọng trong Eloquent ORM:

• One To One

• One To Many

• Many To Many

• Has Many Through

• Polymorphic Relationship

Đây là nền tảng để xây dựng hầu hết các ứng dụng Laravel hiện đại như Blog, CMS, hệ thống bán hàng, LMS, ERP và REST API.

---

Bài tiếp theo

Ở Bài 18, chúng ta sẽ chuyển sang Phần 5 — FORM với chủ đề Request, tìm hiểu cách Laravel tiếp nhận và xử lý dữ liệu từ biểu mẫu (Form), URL và các yêu cầu HTTP trước khi thực hiện kiểm tra dữ liệu (Validation).

x1

"Đừng tự nối đường dẫn bằng dấu /. Hãy để Node.js xử lý điều đó bằng module path để chương trình hoạt động đúng trên mọi hệ điều hành."

---

🎯 Mục tiêu bài học

Sau bài này bạn sẽ:

• Hiểu module path là gì.

• Biết vì sao cần dùng path thay vì tự nối chuỗi.

• Thành thạo các hàm:

  • join()

  • resolve()

  • basename()

  • dirname()

  • extname()

• Biết kết hợp path với fs.

• Viết chương trình tương thích trên Windows, Linux và macOS.

  

---

path là gì?

path là module có sẵn của Node.js dùng để xử lý đường dẫn (path).

Không cần cài đặt thêm.

Import:

import path from "node:path";

Hoặc

import { join } from "node:path";

---

Vì sao cần dùng path?

Giả sử bạn tự nối đường dẫn:

const file = "images/" + "logo.png";

Có thể hoạt động trên máy bạn.

Nhưng:

Windows

images\logo.png

Linux

images/logo.png

macOS

images/logo.png

Node.js sẽ tự chọn dấu phân cách phù hợp nếu dùng path.

---

join()

Đây là hàm được sử dụng nhiều nhất.

import path from "node:path";

const file =
    path.join(
        "images",
        "logo.png"
    );

console.log(file);

Windows

images\logo.png

Linux

images/logo.png

---

Có nhiều cấp:

path.join(
    "public",
    "uploads",
    "avatar.png"
);

Kết quả

public/uploads/avatar.png

(hoặc \ trên Windows)

---

resolve()

resolve() tạo đường dẫn tuyệt đối.

Ví dụ

import path from "node:path";

console.log(
    path.resolve("data.txt")
);

Kết quả

C:\Projects\basic\data.txt

Hoặc

/home/user/basic/data.txt

---

Ví dụ

const file =
    path.resolve(
        "images",
        "logo.png"
    );

console.log(file);

---

basename()

Lấy tên file.

import path from "node:path";

console.log(
    path.basename(
        "images/logo.png"
    )
);

Kết quả

logo.png

---

Bỏ phần mở rộng

console.log(

path.basename(
"logo.png",
".png"
)

);

Kết quả

logo

---

dirname()

Lấy thư mục cha.

console.log(

path.dirname(
"images/logo.png"
)

);

Kết quả

images

---

extname()

Lấy phần mở rộng.

console.log(

path.extname(
"photo.jpg"
)

);

Kết quả

.jpg

Ví dụ

path.extname("index.html");

↓

.html

---

parse()

Chuyển path thành object.

console.log(

path.parse(
"images/logo.png"
)

);

Kết quả

{
 root:'',
 dir:'images',
 base:'logo.png',
 ext:'.png',
 name:'logo'
}

---

format()

Ngược lại với parse().

const file =
path.format({

dir:"images",

name:"logo",

ext:".png"

});

console.log(file);

↓

images/logo.png

---

isAbsolute()

Kiểm tra đường dẫn tuyệt đối.

console.log(

path.isAbsolute(
"C:\\temp"
)

);

↓

true

---

Ví dụ

path.isAbsolute(
"images/logo.png"
);

↓

false

---

normalize()

Chuẩn hóa đường dẫn.

console.log(

path.normalize(
"images//logo.png"
)

);

↓

images/logo.png

---

Ví dụ

path.normalize(

"public/uploads/../avatar.png"

);

↓

public/avatar.png

---

Kết hợp path và fs

Đây là cách viết phổ biến.

File data/users.json

[
    {
        "id": 1,
        "name": "An"
    },
    {
        "id": 2,
        "name": "Bình"
    }
]

Sau đó:

import fs from "node:fs";

import path from "node:path";

const file =

path.join(
"data",
"users.json"
);

const data =
fs.readFileSync(
file,
"utf8"
);

console.log(data);

---

__dirname trong ES Module

Trong CommonJS có:

console.log(__dirname);

Nhưng ES Module không hỗ trợ trực tiếp.

Thay vào đó:

import { fileURLToPath } from "node:url";

import path from "node:path";

const __filename =
fileURLToPath(import.meta.url);

const __dirname =
path.dirname(__filename);

console.log(__dirname);

Đây là cách chuẩn khi cần lấy thư mục chứa file hiện tại trong ES Module.

---

Ví dụ thực tế

Cấu trúc

project/

app.js

uploads/

avatar.png

Đọc ảnh

const avatar =

path.join(
"uploads",
"avatar.png"
);

Không cần quan tâm Windows hay Linux.

---

Khi nào dùng join()?

✔ Nối thư mục

✔ Tạo đường dẫn file

✔ Đọc file

✔ Upload

✔ Express

✔ Prisma

Đây là hàm được dùng nhiều nhất.

---

resolve() hay join()?

join()

path.join(
"images",
"logo.png"
);

↓

images/logo.png

Là đường dẫn tương đối.

---

resolve()

path.resolve(
"images",
"logo.png"
);

↓

C:\Project\images\logo.png

Là đường dẫn tuyệt đối.

---

Những lỗi thường gặp

Tự nối chuỗi

const file =
"images/" +
"logo.png";

Không nên.

Hãy dùng

path.join(
"images",
"logo.png"
);

---

Hard-code dấu ""

"images\\logo.png"

Sai trên Linux.

---

Hard-code dấu "/"

"images/logo.png"

Có thể chạy trong nhiều trường hợp, nhưng không phải là cách viết đa nền tảng và dễ bảo trì.

---

Không dùng resolve()

Ví dụ

fs.readFileSync(
"data.txt"
);

Nếu chạy ở thư mục khác có thể báo lỗi:

ENOENT

Giải pháp

path.resolve(
"data.txt"
);

---

Tổng kết

Module path giúp xử lý đường dẫn một cách an toàn, rõ ràng và tương thích trên nhiều hệ điều hành. Thay vì tự nối chuỗi bằng dấu / hoặc \, bạn nên sử dụng các hàm như join(), resolve(), basename(), dirname() và extname() để giảm lỗi và tăng tính chuyên nghiệp cho mã nguồn.

Trong các dự án thực tế, path gần như luôn đi cùng với fs, Express và các thư viện khác để truy cập tệp, thư mục và tài nguyên của ứng dụng.

---

Bài tiếp theo

👉 Bài 08 — OS

Bạn sẽ học:

• Module os là gì.

• Lấy thông tin hệ điều hành.

• Kiểm tra CPU, RAM và kiến trúc máy.

• Xem thư mục Home và thư mục tạm (Temp).

• Ứng dụng module os để xây dựng các công cụ giám sát và thu thập thông tin hệ thống bằng Node.js.

x1
quay về MỤC LỤC

Trong hành trình trở thành một lập trình viên Front-End hoặc Full Stack, nhiều người thường chỉ quan tâm đến việc giao diện có đẹp hay không. 

Tuy nhiên, với các dự án thực tế, đặc biệt là website doanh nghiệp, thương mại điện tử, CRM hay Dashboard, điều quan trọng hơn là cấu trúc HTML phải rõ ràng, chuẩn và có ý nghĩa.

Đó chính là lý do Semantic HTML5 luôn là bài học đầu tiên.

---

🎯 Mục tiêu bài học

Sau bài này bạn sẽ hiểu được:

• Semantic HTML là gì?

• Tại sao Google thích Semantic HTML?

• Vì sao Screen Reader cần Semantic HTML?

• Cách tổ chức bố cục website chuẩn Enterprise.

• Khi nào dùng <section> và khi nào dùng <article>.

• Những lỗi Semantic phổ biến mà người mới thường mắc phải.

  

---

Semantic HTML là gì?

Semantic nghĩa là "mang ý nghĩa".

Thay vì viết toàn bộ website bằng:

<div>
<div>
<div>
<div>

HTML5 cung cấp những thẻ mô tả đúng chức năng của từng khu vực.

Ví dụ:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Chỉ cần nhìn vào source code cũng hiểu được bố cục của trang.

---

Vì sao phải dùng Semantic HTML?

1. Dễ đọc source

Ví dụ:

<header>

thay vì

<div class="header">

người khác sẽ hiểu ngay đây là phần đầu trang.

---

2. SEO tốt hơn

Google không nhìn website giống con người.

Google đọc HTML.

Ví dụ:

<article>

Google hiểu đây là một bài viết.

<nav>

Google hiểu đây là menu điều hướng.

<footer>

Google hiểu đây là phần cuối trang.

Semantic giúp công cụ tìm kiếm hiểu nội dung nhanh và chính xác hơn.

---

3. Accessibility

Người khiếm thị sử dụng Screen Reader.

Screen Reader sẽ đọc:

Header

Navigation

Main Content

Footer

Nếu website chỉ dùng <div> thì trải nghiệm sẽ kém hơn rất nhiều.

---

4. Code dễ bảo trì

Một website có thể tồn tại nhiều năm và được nhiều lập trình viên cùng phát triển.

Semantic HTML giúp:

• dễ đọc

• dễ sửa

• dễ mở rộng

• giảm nhầm lẫn khi làm việc nhóm

---

Những thẻ Semantic quan trọng

Thẻ	Ý nghĩa
<header>	Đầu trang
<nav>	Thanh điều hướng
<main>	Nội dung chính
<section>	Một khu vực nội dung
<article>	Một bài viết độc lập
<aside>	Nội dung phụ
<footer>	Chân trang

---

Cấu trúc website chuẩn

<body>

<header>
    Logo
</header>

<nav>
    Menu
</nav>

<main>

    <section>

        <article>
            Nội dung bài viết
        </article>

    </section>

    <aside>
        Sidebar
    </aside>

</main>

<footer>
    Copyright
</footer>

</body>

Đây là bố cục được sử dụng trong rất nhiều website doanh nghiệp.

---

Ý nghĩa từng khu vực

Header

Thông thường chứa:

• Logo

• Hotline

• Search

• Login

• Banner

Ví dụ:

<header>
    <h1>Lớp Học Vi Tính</h1>
</header>

---

Nav

Chứa menu.

<nav>

<ul>

<li>Trang chủ</li>

<li>Khóa học</li>

<li>Blog</li>

<li>Liên hệ</li>

</ul>

</nav>

---

Main

Mỗi trang chỉ nên có một thẻ <main>.

Ví dụ:

<main>

...

</main>

---

Section

Section là một nhóm nội dung có cùng chủ đề.

Ví dụ:

<section>

<h2>Khóa học nổi bật</h2>

...

</section>

---

Article

Article là nội dung có thể đứng độc lập.

Ví dụ:

• bài blog

• bài báo

• bài hướng dẫn

• tin tức

• sản phẩm

<article>

<h2>Semantic HTML là gì?</h2>

<p>...</p>

</article>

---

Aside

Nội dung phụ.

Ví dụ:

• quảng cáo

• bài viết liên quan

• tag

• category

• widget

<aside>

Bài viết mới

</aside>

---

Footer

Thông thường gồm:

• Copyright

• Chính sách

• Liên hệ

• Social

<footer>

© 2026

</footer>

---

Section khác Article như thế nào?

Đây là phần rất nhiều người nhầm.

Section

Là một khu vực.

Ví dụ:

Khóa học nổi bật

bên trong có nhiều khóa học.

---

Article

Là một nội dung độc lập.

Ví dụ:

Bài 01

Bài 02

Bài 03

Mỗi bài đều là một Article.

---

Ví dụ

<section>

<h2>Tin mới</h2>

<article>

Tin số 1

</article>

<article>

Tin số 2

</article>

</section>

Section chứa nhiều Article.

---

Những lỗi Semantic phổ biến

❌ Dùng <div> cho mọi thứ.

❌ Không có <main>.

❌ Có nhiều <main> trên cùng một trang.

❌ Đặt <footer> bên trong <article> khi không cần thiết.

❌ Dùng <section> nhưng không có tiêu đề.

❌ Chỉ dùng <br> để tạo khoảng cách thay vì CSS.

---

Thực hành

Tạo bố cục sau:

Header

Menu

Banner

Giới thiệu

Khóa học

Tin tức

Sidebar

Footer

Yêu cầu:

• sử dụng Semantic HTML

• không dùng <div> nếu có thể thay thế bằng thẻ Semantic

• mỗi khu vực có tiêu đề rõ ràng

---

Tổng kết

Semantic HTML không làm website đẹp hơn, nhưng giúp website chuyên nghiệp hơn.

Một cấu trúc HTML chuẩn sẽ mang lại nhiều lợi ích:

• SEO tốt hơn

• Dễ bảo trì

• Dễ mở rộng

• Thân thiện với công cụ tìm kiếm

• Hỗ trợ người dùng sử dụng Screen Reader

• Tạo nền tảng vững chắc cho CSS, JavaScript và các framework hiện đại

Trong các bài tiếp theo, chúng ta sẽ tiếp tục xây dựng trên nền tảng này để tạo nên những giao diện doanh nghiệp hiện đại, dễ bảo trì và sẵn sàng mở rộng.

---

📌 Kiến thức đạt được

• ✅ Hiểu Semantic HTML5 là gì.

• ✅ Biết cách sử dụng các thẻ header, nav, main, section, article, aside, footer.

• ✅ Phân biệt được section và article.

• ✅ Biết cách xây dựng bố cục website chuẩn Enterprise.

• ✅ Nắm được những lỗi Semantic HTML thường gặp và cách tránh.

➡️ Bài tiếp theo: Bài 02 — Form Enterprise: Xây dựng biểu mẫu chuyên nghiệp với HTML5.

Sau khi đã học One To One, One To Many và Many To Many, chúng ta sẽ tìm hiểu thêm một kiểu Relationship đặc biệt của Eloquent là Has Many Through.

Kiểu quan hệ này cho phép truy cập các bản ghi ở bảng cuối cùng thông qua một Model trung gian mà không cần tự viết câu lệnh JOIN.

---

Has Many Through là gì?

Has Many Through là quan hệ một - nhiều - nhiều.

Ví dụ:

• Một Country có nhiều User.

• Một User có nhiều Post.

Suy ra:

• Một Country có nhiều Post thông qua User.

Sơ đồ:

Country
   │
   └──── User
            │
            ├── Post
            ├── Post
            └── Post

Country không liên kết trực tiếp với Post.

Laravel sẽ đi qua bảng User.

---

Ví dụ cơ sở dữ liệu

Bảng countries

id	name
1	Việt Nam
2	Nhật Bản

Bảng users

id	name	country_id
1	An	1
2	Bình	1
3	Ken	2

Bảng posts

id	title	user_id
1	Laravel	1
2	PHP	2
3	MySQL	3

Quan hệ:

Country
      ↓
    Users
      ↓
    Posts

1. Tạo Country Model

php artisan make:model Country -m

---

2. Tạo bảng countries

Schema::create('countries', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

---

3. Thêm country_id vào bảng users

Nếu bảng users đã tồn tại từ các bài trước:

php artisan make:migration add_country_id_to_users_table --table=users

Migration:

Schema::table('users', function (Blueprint $table) {
    $table->foreignId('country_id')
          ->nullable()
          ->constrained()
          ->nullOnDelete();
});

---

4. Quan hệ trong các Model

Country

public function posts()
{
    return $this->hasManyThrough(
        Post::class,
        User::class
    );
}

Ý nghĩa:

• Bắt đầu từ Country.
• Đi qua User.
• Lấy tất cả Post.

User

public function country()
{
    return $this->belongsTo(Country::class);
}

📋 Chạy lệnh php artisan migrate

Tạo Country Seeder

php artisan make:seeder CountrySeeder

📋 Copy

CountrySeeder.php

use App\Models\Country;

public function run(): void
{
    Country::insert([
        [
            'name' => 'Việt Nam',
        ],
        [
            'name' => 'Nhật Bản',
        ],
        [
            'name' => 'Hoa Kỳ',
        ],
        [
            'name' => 'Hàn Quốc',
        ],
    ]);
}

📋 Copy

---

Đăng ký trong DatabaseSeeder

public function run(): void
{
    $this->call([
        CountrySeeder::class,
    ]);

    // các seeder khác...
}

UserFactory

'country_id' => Country::query()->inRandomOrder()->value('id'),

Khi đó chỉ cần:

User::factory()->count(10)->create();

Mỗi User sẽ được chọn Country ngẫu nhiên.

Chạy

php artisan migrate:fresh --seed

---

Lấy dữ liệu

/* PHẦN THÊM VÀO routes/web.php*/
use App\Models\Post;
use App\Models\Country;

Route::get('/test', function () {

    $country = Country::first();

    if (!$country) {
        return 'Chưa có dữ liệu Country.';
    }

    $posts = $country->posts;

Hoặc:

foreach ($country->posts as $post) {

    echo $post->title;
    echo " - ";
    echo $country->name;
    echo "<br>";

}  

Laravel sẽ tự tạo các câu lệnh JOIN cần thiết.

---

SQL tương đương

Laravel sẽ sinh câu lệnh có ý tưởng tương tự:

SELECT posts.*

FROM posts

JOIN users
ON posts.user_id = users.id

WHERE users.country_id = 1;

Bạn không cần tự viết SQL.

---

eager loading

Có thể tải trước:

$countries = Country::with('posts')->get();
if ($countries->isEmpty()) {
        return 'Chưa có dữ liệu Country.';
    }

Sau đó:

foreach ($countries as $country) {

     echo "<h3>Quốc gia:". $country->name . "</h3>";

     foreach ($country->posts as $post) {

       echo $post->title . "<br>";

     }

}

Điều này giúp giảm số lượng truy vấn.

Nếu muốn lấy luôn User của từng Post

Khi đó eager loading nên viết:

$countries = Country::with('posts.user')->get();

và:

foreach ($country->posts as $post) {

    echo $post->title;
    echo " - ";
    echo "<i>Tác giả: " . $post->user->name . "</i>";
    echo "<br>";

}

---

Đánh giá

---

Một ví dụ thực tế

Giả sử hệ thống bán hàng:

Customer
      │
      ▼
    Order
      │
      ▼
 OrderItem

Một Customer có nhiều Order.

Một Order có nhiều OrderItem.

Ta có thể khai báo:

public function orderItems()
{
    return $this->hasManyThrough(
        OrderItem::class,
        Order::class
    );
}

Khi đó:

$customer->orderItems;

sẽ trả về toàn bộ sản phẩm mà khách hàng đã đặt.

---

Khi nào nên dùng?

Has Many Through phù hợp khi:

• Muốn truy cập dữ liệu gián tiếp.

• Không muốn tự viết JOIN.

• Muốn giữ mã nguồn ngắn gọn và dễ đọc.

Ví dụ:

• Country → Posts.

• Customer → OrderItems.

• Company → Employees thông qua Department.

• School → Students thông qua ClassRoom.

---

So sánh

Relationship	Ví dụ
One To One	User → Profile
One To Many	User → Posts
Many To Many	Post ↔ Tags
Has Many Through	Country → Posts → User

---

Tổng kết

Trong bài này chúng ta đã học:

• Khái niệm Has Many Through.

• Truy cập dữ liệu thông qua Model trung gian.

• Khai báo hasManyThrough().

• Lấy dữ liệu bằng Eloquent.

• with() để tối ưu truy vấn.

Đây là một Relationship mạnh mẽ giúp giảm đáng kể số lượng câu lệnh JOIN thủ công trong các dự án lớn.

---

Bài tập

1. Tạo model Country.

2. Thêm khóa ngoại country_id vào bảng users.

3. Khai báo hasManyThrough() trong model Country.

4. Hiển thị tất cả Post của Country có id = 1.

5. Sử dụng with('posts') để lấy danh sách Country cùng các Post liên quan.

---

Bài tiếp theo

Ở bài sau, chúng ta sẽ tìm hiểu Polymorphic Relationship, một kiểu quan hệ linh hoạt cho phép nhiều Model khác nhau cùng chia sẻ một bảng dữ liệu, chẳng hạn như Post và Video đều có thể sử dụng chung bảng comments.

x1