Từ bài này, chúng ta nâng cấp lên các phép cộng có số từ 100 đến 999.&

Bạn vẫn chỉ cần sử dụng phép cộng (+), không cần phép trừ hay phép chia làm kỹ thuật chính.

Bài hôm nay nâng cấp từ cộng 2 số lên cộng 3 số.&

Bí quyết quan trọng nhất là: Đừng cộng theo thứ tự đề bài.&

Hãy tìm hai số cộng lại thành số tròn chục hoặc tròn trăm trước!

Mục tiêu hôm nay: cộng hai số từ 10 đến 99 bằng cách tách chục, tách đơn vị hoặc bù tròn.&

Bạn sẽ học cách chọn phương pháp nhanh nhất thay vì lúc nào cũng cộng từ phải sang trái.

1. Mục tiêu bài học

Sau bài học này, bạn sẽ hiểu cách JavaScript trao đổi dữ liệu với Laravel thông qua JSON và HTTP, nền tảng quan trọng để xây dựng ứng dụng Vue + Laravel REST API.

Bạn sẽ học được:

• JSON là gì và tại sao frontend cần JSON?

• Chuyển đổi dữ liệu giữa JSON và JavaScript.

• HTTP Request và HTTP Response hoạt động như thế nào?

• Các HTTP Method: GET, POST, PUT, PATCH, DELETE.

• Các HTTP Status Code phổ biến.

• Xử lý lỗi khi gọi API.

• Thực hành gửi và nhận dữ liệu JSON bằng fetch().

• Chuẩn bị cho Bài 08: JavaScript gọi Laravel REST API.

2. JSON là gì?

JSON (JavaScript Object Notation) là một định dạng văn bản dùng để lưu trữ và trao đổi dữ liệu giữa các hệ thống.

Ví dụ, Laravel có thể trả về thông tin một bài viết dưới dạng JSON:

{
    "id": 1,
    "title": "Học Laravel 13",
    "author": "Nguyen Van A",
    "published": true
}

JavaScript nhận dữ liệu này, sau đó hiển thị tiêu đề, tác giả và trạng thái bài viết lên giao diện.

Lưu ý: JSON là định dạng dữ liệu, còn HTTP là giao thức truyền dữ liệu. Hai khái niệm này thường được sử dụng cùng nhau khi xây dựng REST API.

3. JSON khác JavaScript Object như thế nào?

Hai dạng dữ liệu trông khá giống nhau nhưng không hoàn toàn giống nhau.

JavaScript Object

const post = {
    id: 1,
    title: "Học JavaScript",
    published: true
};

console.log(post.title);

Đây là một object mà JavaScript có thể sử dụng trực tiếp.

JSON String

const jsonString = `{
    "id": 1,
    "title": "Học JavaScript",
    "published": true
}`;

Đây là một chuỗi văn bản có nội dung theo cú pháp JSON.

Một số quy tắc quan trọng của JSON:

• Tên thuộc tính phải đặt trong dấu ngoặc kép " ".

• Chuỗi ký tự phải dùng dấu ngoặc kép.

• Không cho phép comment trong JSON chuẩn.

• Không hỗ trợ trực tiếp các giá trị undefined, function hoặc Symbol.

Ví dụ JSON không hợp lệ:

{
    title: 'Laravel 13',
    // Đây là bài viết mới
    published: true
}

Nguyên nhân: title không được đặt trong dấu ngoặc kép và JSON không hỗ trợ comment.

4. Chuyển đổi JSON và JavaScript

JavaScript cung cấp hai phương thức quan trọng: JSON.parse() và JSON.stringify().

4.1. JSON.parse() — Chuyển JSON thành Object

const jsonString = '{"id":1,"title":"Laravel 13"}';

const post = JSON.parse(jsonString);

console.log(post.id);
console.log(post.title);

Kết quả:

1
Laravel 13

Luồng chuyển đổi:

4.2. JSON.stringify() — Chuyển Object thành JSON String

const post = {
    id: 1,
    title: "Học Vue",
    published: true
};

const jsonString = JSON.stringify(post);

console.log(jsonString);

Kết quả:

{"id":1,"title":"Học Vue","published":true}

Phương thức này thường được sử dụng khi gửi dữ liệu từ JavaScript lên Laravel.

Ví dụ:

const user = {
    name: "Minh",
    email: "minh@example.com"
};

const body = JSON.stringify(user);

Biến body chứa chuỗi JSON sẵn sàng để gửi trong HTTP Request.

Ghi nhớ nhanh:

5. HTTP là gì?

HTTP là giao thức giúp client và server trao đổi dữ liệu.

Trong một ứng dụng Laravel, client có thể là trình duyệt chạy JavaScript hoặc Vue. Server là ứng dụng Laravel tiếp nhận yêu cầu và trả về kết quả.

Một HTTP Request thường có:

• Method: Hành động muốn thực hiện.

• URL: Địa chỉ tài nguyên.

• Headers: Thông tin mô tả request.

• Body: Dữ liệu gửi lên, nếu có.

Một HTTP Response thường có:

• Status Code: Kết quả xử lý.

• Headers: Thông tin phản hồi.

• Body: Dữ liệu trả về, chẳng hạn JSON.

Ví dụ một request lấy danh sách bài viết:

GET /api/posts HTTP/1.1
Accept: application/json

Ví dụ response:

HTTP/1.1 200 OK
Content-Type: application/json

[
    {
        "id": 1,
        "title": "Bài viết đầu tiên"
    },
    {
        "id": 2,
        "title": "Bài viết thứ hai"
    }
]

Đây là cách frontend yêu cầu Laravel cung cấp danh sách bài viết.

6. Năm HTTP Method cần biết

Ví dụ các endpoint Laravel:

GET     /api/posts
GET     /api/posts/1
POST    /api/posts
PUT     /api/posts/1
PATCH   /api/posts/1
DELETE  /api/posts/1

Các endpoint trên là ví dụ theo quy ước REST API. Bạn cần khai báo route tương ứng ở phía Laravel để chúng hoạt động.

7. HTTP Status Code phổ biến

Status Code giúp frontend biết request đã thành công hay gặp vấn đề.

Một điểm rất quan trọng: fetch() thường không tự động reject Promise khi server trả về HTTP 404 hoặc 500. Bạn cần kiểm tra response.ok hoặc response.status.

8. Đọc JSON từ Fetch API

Ở Bài 06, bạn đã học fetch(). Bây giờ chúng ta kết hợp Fetch API với JSON.

async function getPosts() {
    try {
        const response = await fetch("/api/posts", {
            headers: {
                Accept: "application/json"
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }

        const posts = await response.json();

        console.log(posts);
    } catch (error) {
        console.error("Không thể tải bài viết:", error.message);
    }
}

getPosts();

Giải thích:

1. fetch() gửi HTTP Request đến /api/posts.

2. await chờ server trả về Response.

3. response.ok kiểm tra status thuộc nhóm 200–299.

4. response.json() đọc body và chuyển JSON thành dữ liệu JavaScript.

5. try...catch xử lý lỗi mạng, lỗi đọc dữ liệu hoặc lỗi do chúng ta chủ động ném ra.

Lưu ý: response.json() là một thao tác bất đồng bộ và trả về Promise. Bạn thường phải dùng await response.json().

9. Gửi JSON từ JavaScript lên Laravel(---)

Giả sử bạn muốn tạo một bài viết mới với tiêu đề và nội dung.

async function createPost() {
    const postData = {
        title: "Học Laravel 13",
        content: "Bài học về JSON và HTTP"
    };

    try {
        const response = await fetch("/api/posts", {
            method: "POST",

            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },

            body: JSON.stringify(postData)
        });

        const data = await response.json();

        if (!response.ok) {
            console.error("API trả lỗi:", data);
            return;
        }

        console.log("Đã tạo bài viết:", data);
    } catch (error) {
        console.error("Lỗi kết nối:", error.message);
    }
}

createPost();

Ba dòng cần nhớ nhất:

method: "POST"

Cho server biết chúng ta đang gửi request tạo tài nguyên.

"Content-Type": "application/json"

Cho server biết body được gửi lên có định dạng JSON.

body: JSON.stringify(postData)

Chuyển JavaScript Object thành chuỗi JSON để gửi qua HTTP.

Phía Laravel vẫn cần khai báo route, kiểm tra dữ liệu, xác thực và lưu dữ liệu. Đoạn JavaScript này không tự tạo API backend.

10. Xử lý lỗi validation từ Laravel

Khi Laravel validation thất bại, API thường trả về HTTP 422 cùng dữ liệu lỗi, nếu request được xử lý theo cơ chế JSON.

Ví dụ response:

{
    "message": "The title field is required.",
    "errors": {
        "title": [
            "The title field is required."
        ]
    }
}

JavaScript có thể xử lý như sau:

async function createPost() {
    const response = await fetch("/api/posts", {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            title: "",
            content: "Nội dung bài viết"
        })
    });

    const data = await response.json();

    if (response.status === 422) {
        console.log("Lỗi tiêu đề:", data.errors?.title);
        return;
    }

    if (!response.ok) {
        console.error("Có lỗi xảy ra:", data.message);
        return;
    }

    console.log("Tạo bài viết thành công:", data);
}

Trong dự án thực tế, bạn nên bổ sung try...catch để xử lý lỗi mạng và trường hợp body không phải JSON hợp lệ.

Toán tử ?. là optional chaining, giúp truy cập thuộc tính an toàn khi thuộc tính trước nó có thể không tồn tại.

Ví dụ:

data.errors?.title

Nếu data.errors không tồn tại, JavaScript trả về undefined thay vì phát sinh lỗi khi truy cập title.

11. Ví dụ thực hành hoàn chỉnh

Bây giờ chúng ta xây dựng một trang HTML nhỏ để tải danh sách bài viết từ API và hiển thị kết quả.

Ví dụ dưới đây sử dụng endpoint /api/posts. Endpoint cần tồn tại và trả về một mảng JSON có các thuộc tính id và title.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách bài viết</title>
</head>
<body>
    <h1>Danh sách bài viết</h1>

    <button id="loadPosts">Tải bài viết</button>

    <p id="message" role="status"></p>
    <ul id="posts"></ul>

    <script>
        const button = document.querySelector("#loadPosts");
        const postsElement = document.querySelector("#posts");
        const messageElement = document.querySelector("#message");

        button.addEventListener("click", async () => {
            postsElement.replaceChildren();
            messageElement.textContent = "Đang tải dữ liệu...";

            try {
                const response = await fetch("/api/posts", {
                    headers: {
                        Accept: "application/json"
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }

                const posts = await response.json();

                if (!Array.isArray(posts)) {
                    throw new Error("API không trả về danh sách hợp lệ.");
                }

                for (const post of posts) {
                    const item = document.createElement("li");
                    item.textContent = `${post.id}: ${post.title}`;
                    postsElement.appendChild(item);
                }

                messageElement.textContent =
                    `Đã tải ${posts.length} bài viết.`;
            } catch (error) {
                messageElement.textContent =
                    `Không thể tải dữ liệu: ${error.message}`;
            }
        });
    </script>
</body>
</html>

Phân tích chương trình

• querySelector() tìm các phần tử HTML.

• addEventListener() lắng nghe thao tác nhấn nút.

• fetch() gọi API.

• response.json() chuyển body JSON thành dữ liệu JavaScript.

• Array.isArray() kiểm tra dữ liệu có phải mảng hay không.

• createElement() và appendChild() tạo danh sách bài viết.

• textContent hiển thị nội dung văn bản an toàn hơn so với đưa dữ liệu API trực tiếp vào innerHTML.

Nếu Laravel và frontend chạy trên các origin khác nhau, bạn cần cấu hình URL API chính xác và xử lý CORS phù hợp. Nếu sử dụng cookie để xác thực, cấu hình credentials và CSRF cũng sẽ cần được xem xét.

12. Bài tập thực hành

13. Tổng kết bài 07

Sau bài học này, bạn cần nắm chắc những kiến thức sau:

• JSON dùng để trao đổi dữ liệu giữa frontend và backend.

• JSON.parse() chuyển JSON String thành giá trị JavaScript.

• JSON.stringify() chuyển dữ liệu JavaScript thành JSON String.

• HTTP Method xác định loại thao tác với tài nguyên.

• HTTP Status Code cho biết kết quả xử lý request.

• fetch() kết hợp response.json() giúp nhận dữ liệu từ API.

• Khi gửi JSON, thường sử dụng Content-Type: application/json.

• Luôn kiểm tra response.ok và xử lý các lỗi có thể xảy ra.

14. Bài tiếp theo — Bài 08

JavaScript gọi Laravel REST API

Ở bài tiếp theo, chúng ta sẽ đưa các kiến thức JSON, HTTP, Promise, Async/Await và Fetch API vào một tình huống thực tế:

1. Kết nối JavaScript với Laravel 13.

2. Gọi API lấy danh sách bài viết.

3. Hiển thị dữ liệu Laravel trên trình duyệt.

4. Gửi dữ liệu tạo bài viết mới.

5. Xử lý lỗi validation và HTTP Response.

6. Hoàn thiện luồng giao tiếp frontend–backend trước khi chuyển sang Vue.

Đây là bước chuyển từ học JavaScript riêng lẻ sang xây dựng ứng dụng frontend thực sự.

Gợi ý: Hãy thử chạy bài thực hành với một endpoint /api/posts của Laravel trước khi sang Bài 08; bạn sẽ dễ hiểu cách Vue kết nối backend hơn.

✦ Made by AI ✦

1. Fetch API là gì?

Trong các bài trước, chúng ta đã học Promise và Async/Await.&

Bây giờ, chúng ta sẽ sử dụng những kiến thức đó để giao tiếp với máy chủ thông qua Fetch API.

fetch() là API có sẵn trong trình duyệt, cho phép JavaScript gửi HTTP request đến máy chủ và nhận dữ liệu trả về.

Ví dụ, 01 website có thể sử dụng Fetch API để:

• Lấy danh sách bài viết từ Laravel.

• Tìm kiếm bài viết mà không cần tải lại trang.

• Gửi dữ liệu từ biểu mẫu đăng ký.

• Lấy thông tin người dùng từ REST API.

• Thêm, sửa, xóa dữ liệu thông qua API.

Hãy hình dung quy trình như sau:

Lưu ý: Fetch API không kết nối trực tiếp đến database. Nó giao tiếp với máy chủ thông qua HTTP.

2. Cú pháp cơ bản của Fetch API

Cú pháp đơn giản nhất:

fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Lỗi:", error);
    });

Giải thích từng phần:

Trong ví dụ trên, chúng ta dùng một API công khai để thực hành, chưa cần cài đặt Laravel.

3. Sử dụng Fetch với Async/Await

Ở Bài 05, chúng ta đã học async/await.&

Đây là cách viết thường dễ đọc hơn khi xử lý nhiều bước bất đồng bộ.

async function getPosts() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/posts"
        );

        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.error("Lỗi:", error);
    }
}

getPosts();

Phân tích:

1. async cho phép sử dụng await bên trong hàm.

2. await fetch(...) chờ request hoàn tất và nhận response.

3. await response.json() chờ đọc và phân tích nội dung JSON.

4. try/catch giúp xử lý những lỗi có thể xảy ra.

Điểm quan trọng: fetch() mặc định chỉ sử dụng phương thức GET nếu không khai báo phương thức khác.

4. Hiển thị dữ liệu lên giao diện HTML

Đây là ví dụ thực tế hơn: lấy danh sách bài viết và hiển thị chúng trên trang web.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API - Danh sách bài viết</title>
</head>
<body>
    <h1>Danh sách bài viết</h1>

    <button id="loadPosts">Tải bài viết</button>

    <p id="status"></p>
    <ul id="postList"></ul>

    <script>
        const button = document.getElementById("loadPosts");
        const postList = document.getElementById("postList");
        const status = document.getElementById("status");

        button.addEventListener("click", async () => {
            status.textContent = "Đang tải dữ liệu...";
            postList.replaceChildren();

            try {
                const response = await fetch(
                    "https://jsonplaceholder.typicode.com/posts?_limit=5"
                );

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }

                const posts = await response.json();

                posts.forEach(post => {
                    const li = document.createElement("li");
                    const title = document.createElement("h3");
                    const body = document.createElement("p");

                    title.textContent = post.title;
                    body.textContent = post.body;

                    li.append(title, body);
                    postList.appendChild(li);
                });

                status.textContent = "Tải dữ liệu thành công!";
            } catch (error) {
                status.textContent = "Không thể tải dữ liệu.";
                console.error(error);
            }
        });
    </script>
</body>
</html>

Bạn có thể lưu thành file index.html và mở bằng trình duyệt có kết nối Internet để thử nghiệm.

Kết quả mong đợi:

• Ban đầu chỉ có tiêu đề và nút tải bài viết.

• Nhấn nút, trình duyệt gửi request đến API.

• Năm bài viết được hiển thị trên giao diện.

• Nếu xảy ra lỗi, trang hiển thị thông báo tương ứng.

Ở đây, chúng ta sử dụng textContent thay vì chèn trực tiếp dữ liệu bên ngoài bằng innerHTML.&

Đây là thói quen tốt để hạn chế rủi ro khi hiển thị dữ liệu không đáng tin cậy.

5. Kiểm tra lỗi HTTP khi dùng Fetch

Đây là kiến thức rất quan trọng khi làm việc với Laravel REST API.

Nhiều người mới học thường viết:

const response = await fetch("/api/posts");
const data = await response.json();

Cách viết này có thể hoạt động, nhưng vẫn còn thiếu một bước kiểm tra.

Vấn đề: fetch() thường không tự ném lỗi khi máy chủ trả về các mã HTTP như 404 Not Found hoặc 500 Internal Server Error.

Vì vậy, nên kiểm tra response.ok:

async function getPosts() {
    try {
        const response = await fetch("/api/posts");

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const posts = await response.json();

        console.log(posts);
    } catch (error) {
        console.error("Không thể lấy bài viết:", error);
    }
}

Cần phân biệt ba tình huống:

Một lưu ý khác: nếu Laravel trả về JSON lỗi, chẳng hạn 422 Unprocessable Content, bạn có thể đọc phần JSON đó để hiển thị lỗi xác thực cho người dùng. Tuy nhiên, cần kiểm tra response.ok trước khi coi request là thành công.

6. Gửi dữ liệu bằng Fetch API

Fetch API không chỉ dùng để lấy dữ liệu. Chúng ta còn có thể gửi dữ liệu đến backend bằng các phương thức như POST, PUT, PATCH và DELETE.

Ví dụ gửi một bài viết mới:

async function createPost() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/posts",
            {
                method: "POST",

                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },

                body: JSON.stringify({
                    title: "Học Fetch API",
                    body: "Thực hành JavaScript với REST API",
                    userId: 1
                })
            }
        );

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const result = await response.json();

        console.log("Kết quả:", result);
    } catch (error) {
        console.error("Lỗi gửi dữ liệu:", error);
    }
}

createPost();

Giải thích:

• method: "POST": khai báo phương thức gửi dữ liệu.

• headers: mô tả định dạng dữ liệu gửi và loại response mong muốn.

• JSON.stringify(): chuyển object JavaScript thành chuỗi JSON.

• body: nội dung request gửi lên máy chủ.

API dùng trong ví dụ là API mô phỏng.&

Nó có thể trả về kết quả giả lập, không đồng nghĩa với việc dữ liệu đã được lưu bền vững vào database.

Fetch API và Laravel 13

Khi áp dụng vào dự án Laravel, quy trình có thể như sau:

Vue / JavaScript
       |
       | fetch("/api/posts")
       v
Laravel Route
       |
       v
Controller
       |
       v
Model / Database
       |
       v
JSON Response
       |
       v
JavaScript cập nhật giao diện

Ví dụ, Laravel định nghĩa route:

use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::get('/posts', [PostController::class, 'index']);

Giả sử controller trả về danh sách bài viết dưới dạng JSON.&

Phía JavaScript có thể lấy dữ liệu bằng:

async function getPosts() {
    try {
        const response = await fetch("/api/posts", {
            headers: {
                "Accept": "application/json"
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const posts = await response.json();

        console.log(posts);

    } catch (error) {
        console.error("Lỗi:", error);
    }
}

getPosts();

Đường dẫn /api/posts ở đây chỉ hoạt động khi Laravel đã được cấu hình route tương ứng và frontend có thể truy cập đúng máy chủ.&

Nếu frontend và backend ở hai origin khác nhau, cần cấu hình CORS phù hợp.&

Các API cần xác thực cũng phải sử dụng cơ chế xác thực tương ứng; chỉ biết URL API không đồng nghĩa với việc được phép truy cập mọi dữ liệu.

7. Bài tập thực hành

8. Tổng kết Bài 06

Sau bài này, bạn cần nắm được:

• fetch() dùng để gửi HTTP request từ JavaScript.

• async/await giúp viết mã bất đồng bộ dễ đọc hơn.

• response.json() đọc và phân tích dữ liệu JSON.

• response.ok giúp kiểm tra kết quả HTTP.

• JSON.stringify() chuyển object thành chuỗi JSON để gửi đi.

• Fetch API là một trong những cầu nối giữa frontend và Laravel REST API.

Bài 07 — Xử lý JSON & HTTP sẽ đi sâu vào cấu trúc JSON, HTTP methods, status codes, request headers, response headers và cách xử lý lỗi API. Đây là nền tảng cần thiết trước khi sang Bài 08: JavaScript gọi Laravel REST API.

✦ Made by AI ✦

x1

Nguyên tắc đầu tiên:

Đừng cộng theo cách thông thường nếu có cách làm ngắn hơn.

Ví dụ, gặp phép tính:

  68 + 27 = ?

Cách thông thường: 8+7=15, nhớ 1, rồi cộng hàng chục.

Cách tính nhẩm nhanh hơn:

• 68 cần thêm 2 để thành 70.

• Tách 27 thành 2+25.

• Tính 70+25=95.

Vậy 68+27=95.

CÔNG THỨC TƯ DUY

68 + 27 = 70 + 25 = 95

Làm tròn một số, điều chỉnh số còn lại.

10 bài tập khởi động

Hãy thử tính trong đầu trước khi xem đáp án. Bạn có thể bấm nút để kiểm tra từng câu.

Câu 1

48 + 27 = ?

✓ Chính xác!

48 cần thêm 2 để thành 50; 27 giảm 2 còn 25.

Xem lại đáp án

Câu 2

67 + 18 = ?

✓ Chính xác!

67 cần thêm 3 để thành 70; 18 giảm 3 còn 15.

Xem lại đáp án

Câu 3

96 + 37 = ?

✓ Chính xác!

96 cần thêm 4 để thành 100; 37 giảm 4 còn 33.

Xem lại đáp án

Câu 4

258 + 37 = ?

✓ Chính xác!

258 cần thêm 42 để thành 300; tách 37 thành 42 − 5 sẽ không tiện. Hãy tính 258 + 40 − 3.

Xem lại đáp án

Câu 5

175 + 49 = ?

✓ Chính xác!

Cộng 50 rồi bớt 1: 175 + 50 − 1.

Xem lại đáp án

Câu 6

399 + 86 = ?

✓ Chính xác!

Cộng 400 rồi bớt 1: 400 + 86 − 1.

Xem lại đáp án

Câu 7

246 + 198 = ?

✓ Chính xác!

Cộng 200 rồi bớt 2.

Xem lại đáp án

Câu 8

375 + 125 = ?

✓ Chính xác!

375 cần thêm 125 để đạt đúng 500.

Xem lại đáp án

Câu 9

487 + 36 = ?

✓ Chính xác!

Cộng 13 để thành 500, sau đó cộng 23.

Xem lại đáp án

Câu 10

698 + 197 = ?

✓ Chính xác!

Cộng 200 rồi bớt 3.

Xem lại đáp án

Xem tất cả đáp án

Điểm tự luyện: 10/10

Mục tiêu của bài 1: Không cần thuộc lòng nhiều mẹo. Chỉ cần hình thành phản xạ nhìn thấy số gần 10, 100 hoặc 500 là biết cách bù tròn.

Sau khi bạn làm xong, ta sẽ chuyển sang Bài 2: Cộng nhẩm các số có hai chữ số nhanh hơn cách cộng thông thường, rồi tăng dần độ khó đến phép nhân ba chữ số.

✦ Made by AI ✦

Lộ trình 12 bài

Mỗi bài sẽ gồm: mẹo tư duy → ví dụ giải thích → bài tập thực hành → thử thách tính giờ. Ta sẽ học từ dễ đến khó, không cần dùng phép trừ hay phép chia làm kỹ thuật chính.

1. Vì sao cần học Promise?

Trong JavaScript, có những công việc hoàn thành gần như ngay lập tức:

const name = 'Doraemon';

console.log(name);

Nhưng cũng có những công việc cần thời gian chờ:

• Gọi Laravel REST API.

• Tải danh sách bài viết từ Database thông qua API.

• Đọc dữ liệu từ máy chủ.

• Tải hình ảnh.

• Gửi Form đăng nhập.

• Chờ kết quả từ một dịch vụ bên ngoài.

Ví dụ, khi ứng dụng cần lấy danh sách bài viết từ Laravel:

JavaScript
    │
    │ Gửi yêu cầu
    ▼
Laravel REST API
    │
    ▼
Controller
    │
    ▼
Database
    │
    │ Trả kết quả
    ▼
JavaScript nhận dữ liệu

Quá trình này có thể mất một khoảng thời gian.

JavaScript cần cơ chế xử lý công việc bất đồng bộ mà không phải chặn toàn bộ hoạt động của trình duyệt trong lúc chờ.

Hai kiến thức quan trọng chúng ta cần học là:

• Promise

• async/await

2. JavaScript đồng bộ và bất đồng bộ

2.1. Đồng bộ — Synchronous

Ví dụ:

console.log('Doraemon');

console.log('Nobita');

console.log('Pikachu');

Kết quả:

Doraemon
Nobita
Pikachu

Các câu lệnh được thực thi theo thứ tự.

2.2. Bất đồng bộ — Asynchronous

Ví dụ:

console.log('Doraemon');

setTimeout(() => {
    console.log('Nobita');
}, 2000);

console.log('Pikachu');

Kết quả:

Doraemon
Pikachu
Nobita

setTimeout() lên lịch thực thi callback sau khoảng thời gian chỉ định.

Trong thời gian đó, JavaScript tiếp tục thực hiện các công việc khác.

Điều quan trọng cần hiểu là: bất đồng bộ không có nghĩa là JavaScript luôn chạy nhiều đoạn code cùng lúc.

JavaScript trong trình duyệt thường thực thi code trên một luồng chính, trong khi các thao tác như I/O có thể tiến hành mà không chặn luồng đó.

3. Callback là gì?

Callback là một hàm được truyền vào một hàm khác để được gọi sau đó.

Ví dụ:

function greet(name, callback) {
    console.log(`Xin chào ${name}`);

    callback();
}

greet('Doraemon', () => {
    console.log('Bắt đầu học JavaScript');
});

Kết quả:

Xin chào Doraemon
Bắt đầu học JavaScript

Callback cũng xuất hiện trong các thao tác bất đồng bộ:

console.log('Bắt đầu');

setTimeout(() => {
    console.log('Đã hoàn thành');
}, 1000);

console.log('Tiếp tục công việc');

Callback có thể xử lý những trường hợp đơn giản.

Tuy nhiên, khi nhiều công việc phụ thuộc lẫn nhau, code có thể trở nên khó đọc nếu lồng nhiều callback.

Đây là một trong những lý do Promise ra đời.

4. Promise là gì?

Promise là một đối tượng đại diện cho kết quả của một công việc bất đồng bộ, có thể hoàn thành thành công hoặc thất bại.

Một Promise có ba trạng thái:

Ví dụ tưởng tượng:

Doraemon gửi yêu cầu lấy bánh
             │
             ▼
          Pending
             │
       ┌─────┴─────┐
       ▼           ▼
  Có bánh      Hết bánh
       │           │
       ▼           ▼
  Fulfilled    Rejected

Đây chỉ là ví dụ minh họa.

Trong ứng dụng thật, Promise có thể đại diện cho 01 yêu cầu API, 01 thao tác đọc file hoặc 01 công việc bất đồng bộ khác.

5. Tạo Promise đầu tiên

Chúng ta có thể tự tạo Promise bằng new Promise().

const promise = new Promise((resolve, reject) => {
    const hasCake = true;

    if (hasCake) {
        resolve('Doraemon đã nhận được bánh!');
    } else {
        reject(new Error('Đã hết bánh!'));
    }
});

Hai hàm quan trọng:

• resolve(value): hoàn thành Promise thành công.

• reject(error): hoàn thành Promise với trạng thái thất bại.

Để nhận kết quả, chúng ta sử dụng .then() và .catch().

promise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error.message);
    });

Kết quả:

Doraemon đã nhận được bánh!

Lưu ý:

• Promise chỉ chuyển từ pending sang trạng thái cuối cùng một lần.
• Sau khi đã fulfilled hoặc rejected, nó không chuyển sang trạng thái khác.

6. .then() — nhận kết quả thành công

Ví dụ:

const getScore = new Promise(resolve => {
    resolve(100);
});

getScore.then(score => {
    console.log(`Điểm của Pikachu: ${score}`);
});

Kết quả:

Điểm của Pikachu: 100

.then() nhận kết quả khi Promise hoàn thành thành công.

Có thể nối nhiều bước xử lý:

Promise.resolve(10)
    .then(number => number * 2)
    .then(number => number + 5)
    .then(result => {
        console.log(result);
    });

Kết quả:

25

Mỗi .then() có thể trả về một giá trị hoặc một Promise.

Giá trị đó sẽ được chuyển sang bước tiếp theo.

Đây là cơ chế Promise chaining — nối chuỗi Promise.

7. .catch() — xử lý lỗi

Ví dụ:

const promise = new Promise((resolve, reject) => {
    reject(new Error('Conan không tìm thấy dữ liệu!'));
});

promise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error.message);
    });

Kết quả:

Conan không tìm thấy dữ liệu!

.catch() xử lý trường hợp Promise bị reject hoặc lỗi phát sinh trong các bước xử lý trước đó của chuỗi Promise.

Trong ứng dụng Laravel, lỗi có thể xuất phát từ:

• API không truy cập được.

• Server trả về lỗi.

• Dữ liệu không đúng định dạng mong đợi.

• Code xử lý dữ liệu phát sinh exception.

Tuy nhiên, một điểm quan trọng: fetch() không tự reject Promise chỉ vì máy chủ trả về HTTP 404 hoặc 500.

Chúng ta sẽ xử lý trường hợp đó ở Bài 06.

8. .finally() — luôn thực hiện bước kết thúc

Giả sử trong lúc tải dữ liệu, giao diện hiển thị:

Đang tải dữ liệu...

Khi công việc kết thúc, dù thành công hay thất bại, chúng ta muốn ẩn thông báo tải.

Có thể dùng .finally():

Promise.resolve('Dữ liệu của Doraemon')
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error.message);
    })
    .finally(() => {
        console.log('Kết thúc quá trình xử lý');
    });

.finally() thường được dùng để:

• Ẩn trạng thái Loading.

• Bật lại nút Submit.

• Dọn dẹp tài nguyên.

• Thực hiện công việc kết thúc.

Giá trị trả về từ .finally() thông thường không thay thế kết quả của Promise trước đó, trừ khi callback trong .finally() phát sinh lỗi hoặc trả về Promise bị reject.

9. Ví dụ Promise với setTimeout()

Tạo 01 hàm giả lập việc tải dữ liệu từ máy chủ:

function getCharacter() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({
                name: 'Doraemon',
                power: 100
            });
        }, 2000);
    });
}

getCharacter().then(character => {
    console.log(character);
});

Sau khoảng hai giây, Console hiển thị:

{
    name: 'Doraemon',
    power: 100
}

Hàm getCharacter() trả về một Promise ngay lập tức.

Giá trị dữ liệu chỉ được cung cấp khi Promise hoàn thành.

Đây là mô hình gần giống việc chờ một API trả dữ liệu.

10. Async/Await là gì?

async/await là cú pháp giúp viết code sử dụng Promise theo cách dễ đọc hơn.

Thay vì viết:

getCharacter()
    .then(character => {
        console.log(character.name);
    })
    .catch(error => {
        console.error(error.message);
    });

Chúng ta có thể viết:

async function showCharacter() {
    try {
        const character = await getCharacter();

        console.log(character.name);
    } catch (error) {
        console.error(error.message);
    }
}

showCharacter();

Kết quả vẫn là:

Doraemon

Sự khác biệt chủ yếu nằm ở cách tổ chức code.

async/await không thay thế Promise.

Nó sử dụng Promise và giúp chúng ta viết các bước bất đồng bộ dễ theo dõi hơn.

11. Từ khóa async

Khi khai báo một hàm bằng async, hàm đó luôn trả về một Promise.

Ví dụ:

async function sayHello() {
    return 'Xin chào Doraemon!';
}

sayHello().then(message => {
    console.log(message);
});

Kết quả:

Xin chào Doraemon!

Ngay cả khi chúng ta trả về một chuỗi thông thường, JavaScript cũng bọc kết quả đó trong Promise đã hoàn thành thành công.

Có thể viết Arrow Function với async:

const sayHello = async () => {
    return 'Xin chào Pikachu!';
};

sayHello().then(console.log);

Cú pháp này sẽ xuất hiện thường xuyên khi viết Vue và React.

12. Từ khóa await(---)

await dùng để chờ một Promise hoàn thành và lấy kết quả của nó bên trong hàm async.

Ví dụ:

function getPower() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(100);
        }, 1000);
    });
}

async function showPower() {
    console.log('Đang kiểm tra sức mạnh...');

    const power = await getPower();

    console.log(`Sức mạnh của Pikachu: ${power}`);
}

showPower();

console.log('JavaScript vẫn tiếp tục thực hiện công việc khác');

Thứ tự kết quả:

Đang kiểm tra sức mạnh...
JavaScript vẫn tiếp tục thực hiện công việc khác
Sức mạnh của Pikachu: 100

Khi chạy đến await, hàm showPower() tạm dừng tại đó để chờ Promise, nhưng luồng JavaScript vẫn có thể thực hiện những công việc khác.

Lưu ý:

• await thường được sử dụng bên trong hàm async.
• JavaScript cũng hỗ trợ top-level await trong ES Modules ở những môi trường tương thích, nhưng trong bài này chúng ta sử dụng await bên trong hàm để dễ tổ chức code.

13. Xử lý lỗi với try/catch

Khi sử dụng await, chúng ta có thể dùng try/catch để xử lý lỗi.

function getCake() {
    return new Promise((resolve, reject) => {
        reject(new Error('Không còn bánh cho Nobita!'));
    });
}

async function receiveCake() {
    try {
        const cake = await getCake();

        console.log(cake);
    } catch (error) {
        console.error(error.message);
    }
}

receiveCake();

Kết quả:

Không còn bánh cho Nobita!

Cách này giúp chúng ta tổ chức code rõ ràng hơn khi có nhiều thao tác bất đồng bộ.

Ví dụ với Laravel API:

async function loadPosts() {
    try {
        // Gọi API tại đây.
    } catch (error) {
        // Xử lý lỗi tại đây.
    }
}

Ở Bài 06, chúng ta sẽ thay phần giả lập bằng fetch() để gọi API thật.

14. So sánh Promise và Async/Await

02 cách đều hợp lệ.

Ví dụ Promise chaining:

getCharacter()
    .then(character => character.name)
    .then(name => console.log(name))
    .catch(console.error);

Ví dụ Async/Await:

async function showName() {
    try {
        const character = await getCharacter();

        console.log(character.name);
    } catch (error) {
        console.error(error);
    }
}

showName();

Trong các bài tiếp theo, chúng ta sẽ ưu tiên async/await cho các ví dụ gọi API vì cách viết này dễ theo dõi khi có nhiều bước xử lý.

15. Chạy nhiều công việc với Promise.all()

Giả sử cần lấy thông tin của ba nhân vật.

function getCharacter(name, delay) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(name);
        }, delay);
    });
}

async function loadCharacters() {
    const characters = await Promise.all([
        getCharacter('Doraemon', 2000),
        getCharacter('Pikachu', 1000),
        getCharacter('Conan', 1500)
    ]);

    console.log(characters);
}

loadCharacters();

Kết quả:

['Doraemon', 'Pikachu', 'Conan']

Thứ tự kết quả vẫn theo thứ tự các Promise được truyền vào Promise.all(), không phụ thuộc vào thứ tự hoàn thành.

Trong ví dụ này, ba công việc được bắt đầu gần như cùng lúc, nên tổng thời gian chờ thường xấp xỉ công việc lâu nhất thay vì tổng thời gian của cả ba.

Khi nào dùng Promise.all()?

Khi cần thực hiện nhiều công việc độc lập, chẳng hạn:

• Tải danh sách bài viết.

• Tải danh mục.

• Tải thông tin thống kê.

Nếu một Promise bị reject, Promise tổng hợp từ Promise.all() cũng reject.

Nếu cần nhận kết quả thành công và thất bại riêng của từng công việc, chúng ta có thể tìm hiểu Promise.allSettled() ở phần mở rộng sau này.

16. Promise tuần tự và Promise song song

Hai cách viết dưới đây có ý nghĩa khác nhau.

Cách 1 — Chờ tuần tự

async function loadData() {
    const a = await getCharacter('Doraemon', 1000);
    const b = await getCharacter('Pikachu', 1000);

    console.log(a, b);
}

Công việc thứ hai chỉ bắt đầu sau khi công việc thứ nhất hoàn thành.

Cách 2 — Chờ song song

async function loadData() {
    const promiseA = getCharacter('Doraemon', 1000);
    const promiseB = getCharacter('Pikachu', 1000);

    const [a, b] = await Promise.all([
        promiseA,
        promiseB
    ]);

    console.log(a, b);
}

Hai Promise được tạo trước khi await chờ kết quả.

Vì vậy, các công việc có thể tiến hành đồng thời.

Quy tắc:

• nếu công việc B cần kết quả của A, hãy xử lý tuần tự.
• Nếu A và B độc lập, có thể cân nhắc chạy song song.

17. Thực hành trong Laravel 13

Chúng ta sẽ tạo một trang đơn giản mô phỏng việc tải danh sách bài viết.

Ở bài này, dữ liệu vẫn là dữ liệu giả lập. Chúng ta chưa cần Laravel API thật.

Bước 1 — Tạo file resources/js/modules/posts.js

export function getPosts() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([
                {
                    id: 1,
                    title: 'Laravel 13',
                    author: 'Doraemon'
                },
                {
                    id: 2,
                    title: 'JavaScript hiện đại',
                    author: 'Nobita'
                },
                {
                    id: 3,
                    title: 'Vue cơ bản',
                    author: 'Pikachu'
                }
            ]);
        }, 1500);
    });
}

Hàm getPosts() trả về một Promise, mô phỏng API mất khoảng 1,5 giây để trả dữ liệu.

Bước 2 — Tạo file resources/js/app.js

import { getPosts } from './modules/posts.js';

const postList = document.querySelector('#postList');
const loading = document.querySelector('#loading');
const errorMessage = document.querySelector('#errorMessage');

async function loadPosts() {
    try {
        if (loading) {
            loading.hidden = false;
        }

        if (errorMessage) {
            errorMessage.textContent = '';
        }

        const posts = await getPosts();

        if (!postList) {
            return;
        }

        postList.replaceChildren();

        posts.forEach(post => {
            const li = document.createElement('li');
            const title = document.createElement('strong');
            const author = document.createElement('span');

            title.textContent = post.title;
            author.textContent = ` — ${post.author}`;

            li.append(title, author);
            postList.append(li);
        });
    } catch (error) {
        if (errorMessage) {
            errorMessage.textContent = error.message;
        }
    } finally {
        if (loading) {
            loading.hidden = true;
        }
    }
}

loadPosts();

Trong ví dụ này:

• async khai báo hàm bất đồng bộ.

• await chờ dữ liệu.

• try/catch xử lý lỗi.

• finally ẩn trạng thái Loading sau khi quá trình kết thúc.

Bước 3 — Tạo Blade View

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

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Promise & Async/Await</title>

    @vite(['resources/js/app.js'])
</head>
<body>
    <h1>Thư viện bài học</h1>

    <p id="loading" hidden>
        Đang tải dữ liệu...
    </p>

    <p id="errorMessage" role="alert"></p>

    <ul id="postList"></ul>
</body>
</html>

Nếu đã có trang /javascript từ những bài trước, hãy dùng lại trang đó hoặc tạo một view và Route mới để tránh khai báo Route trùng.

Bước 4 — Khởi chạy

Trong terminal thứ nhất:

npm run dev

Trong terminal thứ hai:

php artisan serve

Mở trang Laravel tương ứng trong trình duyệt.

Bạn sẽ thấy thông báo “Đang tải dữ liệu...” xuất hiện trong khoảng 1,5 giây.

Sau đó, danh sách ba bài viết sẽ hiện ra.

Đây là cách mô phỏng trạng thái Loading mà chúng ta thường gặp khi chờ dữ liệu từ API.

18. Một số lỗi thường gặp

Lỗi 1 — Quên await

async function loadPosts() {
    const posts = getPosts();

    console.log(posts);
}

Biến posts lúc này chứa một Promise, chưa phải danh sách bài viết.

Cách đúng:

async function loadPosts() {
    const posts = await getPosts();

    console.log(posts);
}

Lỗi 2 — Dùng await nhưng không xử lý lỗi

async function loadPosts() {
    const posts = await getPosts();

    console.log(posts);
}

Nếu Promise bị reject, lỗi có thể trở thành một rejected Promise của hàm loadPosts() mà không được xử lý tại đây.

Nên chủ động dùng try/catch khi cần xử lý lỗi tại chỗ.

Lỗi 3 — Nghĩ rằng fetch() trả lỗi khi HTTP 404

fetch() thường vẫn hoàn thành thành công ở cấp độ Promise khi nhận được phản hồi HTTP 404 hoặc 500.

Muốn phát hiện lỗi HTTP, chúng ta cần kiểm tra thuộc tính response.ok.

Nội dung này sẽ được thực hành trong Bài 06 — Fetch API.

Lỗi 4 — Dùng await bên trong forEach()

Ví dụ không nên dùng khi muốn chờ toàn bộ công việc hoàn thành:

posts.forEach(async post => {
    await savePost(post);
});

forEach() không chờ các Promise do callback async trả về.

Nếu cần chạy tuần tự, có thể dùng vòng lặp for...of:

for (const post of posts) {
    await savePost(post);
}

Nếu các công việc độc lập và có thể chạy song song:

await Promise.all(posts.map(post => savePost(post)));

Chỉ sử dụng cách thứ hai nếu hàm savePost() trả về Promise và việc chạy các thao tác song song là an toàn đối với ứng dụng.

19. Bài tập cuối bài

Bài tập 1 — Promise cơ bản

Tạo Promise trả về chuỗi:

Doraemon đã hoàn thành nhiệm vụ!

Sau đó dùng .then() để in kết quả.

Bài tập 2 — Xử lý lỗi

Tạo Promise bị reject với thông báo:

Pikachu không tìm thấy năng lượng!

Dùng .catch() để hiển thị lỗi.

Bài tập 3 — Async/Await

Viết hàm getCharacter() trả về Promise chứa thông tin:

{
    name: 'Conan',
    level: 10
}

Viết hàm showCharacter() sử dụng async/await để hiển thị tên và cấp độ.

Bài tập 4 — Loading

Dựa trên ví dụ Laravel ở phần 17, bổ sung một nút “Tải lại”.

Khi bấm nút, danh sách được tải lại và trạng thái Loading được hiển thị trong lúc chờ.

Bài tập 5 — Promise.all

Tạo ba Promise trả về tên Doraemon, Nobita và Pikachu sau những khoảng thời gian khác nhau.

Dùng Promise.all() để nhận kết quả và in ra Console.

20. Tổng kết

Điều cần nhớ nhất:

1. Promise giúp xử lý các công việc bất đồng bộ.

2. async/await là cách viết thuận tiện hơn khi làm việc với Promise.

3. try/catch giúp xử lý lỗi khi chờ Promise bằng await.

4. Promise.all() phù hợp khi cần chờ nhiều công việc độc lập.

5. Khi gọi API thật, cần phân biệt lỗi mạng với lỗi HTTP.

Bài 06 — Fetch API: chúng ta sẽ dùng fetch() để gửi HTTP request, nhận JSON từ Laravel REST API, hiển thị Loading và xử lý lỗi thực tế.

x1

1. Module là gì?

Trong các bài trước, chúng ta thường viết JavaScript trong một file:

resources/
└── js/
    └── app.js

Cách này phù hợp với những ví dụ đơn giản.

Nhưng hãy tưởng tượng ứng dụng Laravel của chúng ta có các chức năng:

• Quản lý bài viết.

• Quản lý danh mục.

• Tìm kiếm.

• Đăng nhập.

• Hiển thị thông báo.

• Gọi Laravel REST API.

Nếu tất cả code đều nằm trong app.js, file này sẽ ngày càng dài và khó bảo trì.

Module cho phép chúng ta chia code thành nhiều file, mỗi file đảm nhiệm một nhiệm vụ riêng.

Ví dụ:

resources/
└── js/
    ├── app.js
    ├── modules/
    │   ├── posts.js
    │   ├── users.js
    │   ├── search.js
    │   └── notification.js
    └── services/
        └── api.js

Mỗi file có thể xuất những thành phần cần sử dụng và nhập các thành phần từ file khác.

Hai từ khóa quan trọng nhất là:

• export: xuất dữ liệu, hàm hoặc class để module khác sử dụng.

• import: nhập dữ liệu, hàm hoặc class từ module khác.

2. Export — xuất dữ liệu từ một module

Có hai cách xuất thường gặp:

1. Named Export.

2. Default Export.

2.1. Named Export

Tạo file resources/js/modules/characters.js:

export const doraemon = {
    name: 'Doraemon',
    type: 'Robot mèo',
    color: 'blue'
};

export const nobita = {
    name: 'Nobita',
    type: 'Học sinh',
    color: 'yellow'
};

export function sayHello(name) {
    return `Xin chào ${name}!`;
}

Trong file này, chúng ta đã xuất ba thành phần:

• Biến doraemon.

• Biến nobita.

• Hàm sayHello().

Các module khác có thể nhập những thành phần này.

Lưu ý: export ở đây là Named Export vì mỗi thành phần được xuất bằng tên của nó.

2.2. Default Export

Một module cũng có thể xuất một thành phần mặc định.

Tạo file resources/js/modules/pikachu.js:

const pikachu = {
    name: 'Pikachu',
    type: 'Electric',
    power: 100
};

export default pikachu;

Ở đây, pikachu được xuất bằng export default.

Mỗi module chỉ có một default export, nhưng có thể có nhiều Named Export.

3. Import — nhập dữ liệu từ module khác

3.1. Import Named Export

Tạo file resources/js/app.js:

import {
    doraemon,
    nobita,
    sayHello
} from './modules/characters.js';

console.log(doraemon);
console.log(nobita);

console.log(sayHello('Nobita'));

Kết quả:

{
    name: 'Doraemon',
    type: 'Robot mèo',
    color: 'blue'
}

{
    name: 'Nobita',
    type: 'Học sinh',
    color: 'yellow'
}

Xin chào Nobita!

Cú pháp:

import { tenThanhPhan } from './duong-dan-module.js';

Tên được import phải khớp với tên Named Export.

Ví dụ, nếu module xuất doraemon, chúng ta không thể import trực tiếp bằng tên robotMeo nếu chưa đổi tên khi import.

3.2. Import Default Export

Để nhập Pikachu:

import pikachu from './modules/pikachu.js';

console.log(pikachu.name);
console.log(pikachu.power);

Kết quả:

Pikachu
100

Điểm khác biệt: Default Export có thể được nhập bằng một tên khác.

Ví dụ:

import pokemon from './modules/pikachu.js';

console.log(pokemon.name);

Code vẫn hoạt động vì pokemon chỉ là tên biến chúng ta chọn khi import Default Export.

4. Phân biệt Named Export và Default Export

Ví dụ kết hợp cả hai cách.

File resources/js/modules/pokemon.js:

export const pokemonType = 'Electric';

export function attack() {
    return 'Thunderbolt!';
}

export default {
    name: 'Pikachu',
    power: 100
};

File resources/js/app.js:

import pikachu, {
    pokemonType,
    attack
} from './modules/pokemon.js';

console.log(pikachu.name);
console.log(pokemonType);
console.log(attack());

Kết quả:

Pikachu
Electric
Thunderbolt!

Chúng ta có thể import Default Export và Named Export trong cùng một câu lệnh.

5. Đổi tên khi Import

Giả sử module xuất hàm sayHello():

export function sayHello(name) {
    return `Xin chào ${name}!`;
}

Khi import, chúng ta có thể đổi tên:

import {
    sayHello as greeting
} from './modules/characters.js';

console.log(greeting('Doraemon'));

Kết quả:

Xin chào Doraemon!

Từ khóa as cho phép đổi tên thành phần khi import.

Cách này hữu ích khi hai module có các thành phần trùng tên hoặc khi muốn tên gọi rõ nghĩa hơn trong file đang sử dụng.

6. Import tất cả bằng dấu *

Giả sử file characters.js có nhiều Named Export:

export const doraemon = {
    name: 'Doraemon'
};

export const nobita = {
    name: 'Nobita'
};

export const shizuka = {
    name: 'Shizuka'
};

Chúng ta có thể nhập tất cả Named Export:

import * as characters from './modules/characters.js';

console.log(characters.doraemon.name);
console.log(characters.nobita.name);
console.log(characters.shizuka.name);

Kết quả:

Doraemon
Nobita
Shizuka

characters là một namespace chứa các Named Export của module.

Lưu ý: cú pháp import * as ... không nhập Default Export như một thuộc tính mặc định của namespace theo cách này; nếu cần, hãy import Default Export riêng.

7. Module có thể xuất Function, Object, Array và Class

Module không chỉ xuất biến đơn giản.

7.1. Xuất Function

File resources/js/modules/math.js:

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

Sử dụng:

import { add, multiply } from './modules/math.js';

console.log(add(10, 20));
console.log(multiply(10, 20));

7.2. Xuất Array

File resources/js/modules/characters.js:

export const characters = [
    'Doraemon',
    'Nobita',
    'Shizuka',
    'Pikachu',
    'Conan'
];

Sử dụng:

import { characters } from './modules/characters.js';

characters.forEach(character => {
    console.log(character);
});

7.3. Xuất Class

File resources/js/modules/Character.js:

export default class Character {
    constructor(name, power) {
        this.name = name;
        this.power = power;
    }

    introduce() {
        return `${this.name} có sức mạnh ${this.power}`;
    }
}

Sử dụng:

import Character from './modules/characters.js';

const pikachu = new Character('Pikachu', 100);

console.log(pikachu.introduce());

Kết quả:

Pikachu có sức mạnh 100

8. Tổ chức JavaScript trong Laravel 13

Đến đây, chúng ta sẽ áp dụng Module vào cấu trúc Laravel thực tế.

Thay vì để toàn bộ code trong app.js, hãy chia thành các file theo nhiệm vụ.

resources/
└── js/
    ├── app.js
    ├── modules/
    │   ├── characters.js
    │   ├── posts.js
    │   └── search.js
    └── services/
        └── api.js

Ý nghĩa:

• app.js: điểm khởi đầu của JavaScript.

• characters.js: dữ liệu minh họa nhân vật.

• posts.js: xử lý danh sách bài viết.

• search.js: chức năng tìm kiếm.

• api.js: nơi tổ chức những hàm gọi API.

Trong ứng dụng thực tế, không nhất thiết phải tạo đủ tất cả file. Chỉ nên tách module khi có chức năng cần tái sử dụng hoặc cần quản lý độc lập.

Bước 1 — Tạo module dữ liệu bài viết

Tạo file resources/js/modules/posts.js:

export const posts = [
    {
        id: 1,
        title: 'Laravel 13',
        author: 'Doraemon',
        views: 120
    },
    {
        id: 2,
        title: 'JavaScript ES6+',
        author: 'Nobita',
        views: 80
    },
    {
        id: 3,
        title: 'Vue cơ bản',
        author: 'Pikachu',
        views: 200
    }
];

export function getPostById(id) {
    return posts.find(post => post.id === id);
}

export function getTotalViews() {
    return posts.reduce(
        (total, post) => total + post.views,
        0
    );
}

Module này xuất:

• posts: danh sách bài viết.

• getPostById(): tìm bài viết theo ID.

• getTotalViews(): tính tổng lượt xem.

Bước 2 — Tạo module tìm kiếm

Tạo file resources/js/modules/search.js:

export function searchPosts(posts, keyword) {
    const normalizedKeyword = keyword.trim().toLowerCase();

    return posts.filter(post =>
        post.title.toLowerCase().includes(normalizedKeyword)
    );
}

Hàm tìm kiếm nhận danh sách và từ khóa, sau đó trả về danh sách phù hợp.

Hàm không phụ thuộc vào một Array cố định nên có thể tái sử dụng ở nhiều nơi.

Bước 3 — Import các module trong app.js

Mở resources/js/app.js:

import {
    posts,
    getPostById,
    getTotalViews
} from './modules/posts.js';

import {
    searchPosts
} from './modules/search.js';

console.log('Danh sách bài viết:', posts);

console.log('Bài viết số 2:', getPostById(2));

console.log('Tổng lượt xem:', getTotalViews());

console.log('Kết quả tìm kiếm:', searchPosts(posts, 'javascript'));

Khi Laravel nạp app.js thông qua Vite, các module được import sẽ được xử lý theo quan hệ phụ thuộc.

Chúng ta không cần đưa từng file module vào Blade bằng một thẻ script riêng.

9. Thực hành: tạo trang tìm kiếm bài viết bằng Module

Bây giờ, hãy xây dựng một ví dụ hoàn chỉnh.

Bước 1 — Tạo file posts.js

Đường dẫn:

resources/js/modules/posts.js

export const posts = [
    { id: 1, title: 'Laravel 13', author: 'Doraemon', views: 120 },
    { id: 2, title: 'JavaScript hiện đại', author: 'Nobita', views: 80 },
    { id: 3, title: 'Vue cơ bản', author: 'Shizuka', views: 200 },
    { id: 4, title: 'React cơ bản', author: 'Pikachu', views: 150 },
    { id: 5, title: 'REST API', author: 'Conan', views: 90 }
];

export function getTotalViews(items) {
    return items.reduce((total, post) => total + post.views, 0);
}

Bước 2 — Tạo file search.js

Đường dẫn:

resources/js/modules/search.js

export function searchPosts(posts, keyword) {
    const query = keyword.trim().toLowerCase();

    return posts.filter(post => {
        const title = post.title.toLowerCase();
        const author = post.author.toLowerCase();

        return title.includes(query) || author.includes(query);
    });
}

Hàm tìm kiếm theo cả tiêu đề và tên nhân vật.

Bước 3 — Tạo file app.js

Đường dẫn:

resources/js/app.js

import { posts, getTotalViews } from './modules/posts.js';
import { searchPosts } from './modules/search.js';

const searchInput = document.querySelector('#searchInput');
const postList = document.querySelector('#postList');
const totalViews = document.querySelector('#totalViews');

function renderPosts(items) {
    if (!postList) {
        return;
    }

    postList.replaceChildren();

    if (items.length === 0) {
        const li = document.createElement('li');
        li.textContent = 'Không tìm thấy bài viết.';
        postList.append(li);
        return;
    }

    items.forEach(post => {
        const li = document.createElement('li');
        const title = document.createElement('strong');
        const author = document.createElement('span');

        title.textContent = post.title;
        author.textContent = ` — Tác giả: ${post.author} — ${post.views} lượt xem`;

        li.append(title, author);
        postList.append(li);
    });
}

function updateTotalViews(items) {
    if (totalViews) {
        totalViews.textContent = getTotalViews(items);
    }
}

function handleSearch() {
    const keyword = searchInput?.value ?? '';
    const filteredPosts = searchPosts(posts, keyword);

    renderPosts(filteredPosts);
    updateTotalViews(filteredPosts);
}

if (searchInput) {
    searchInput.addEventListener('input', handleSearch);
}

renderPosts(posts);
updateTotalViews(posts);

Bước 4 — Tạo Blade View

Tạo file:

resources/views/javascript.blade.php

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript Modules - Laravel 13</title>

    @vite(['resources/js/app.js'])
</head>
<body>
    <h1>Thư viện bài học</h1>

    <label for="searchInput">Tìm kiếm:</label>

    <input
        type="search"
        id="searchInput"
        placeholder="Nhập tên bài học hoặc nhân vật..."
    >

    <h2>Danh sách bài viết</h2>

    <ul id="postList"></ul>

    <p>
        Tổng lượt xem:
        <strong id="totalViews">0</strong>
    </p>
</body>
</html>

Bước 5 — Khai báo Route

Trong routes/web.php:

use Illuminate\Support\Facades\Route;

Route::view('/javascript', 'javascript');

Nếu đã có Route /javascript từ Bài 02 hoặc Bài 03, hãy sử dụng lại Route đó, không khai báo trùng.

Bước 6 — Chạy ứng dụng

Mở terminal thứ nhất:

npm run dev

Mở terminal thứ hai:

php artisan serve

Truy cập:

http://127.0.0.1:8000/javascript

Thử nhập:

• Laravel

• Doraemon

• Vue

• Pikachu

Danh sách và tổng lượt xem sẽ được cập nhật theo kết quả tìm kiếm.

Điều quan trọng: Blade chỉ cần nạp app.js.&

Các module còn lại được app.js import.&

Đây là cách tổ chức JavaScript mà chúng ta sẽ tiếp tục sử dụng trong những ứng dụng Laravel lớn hơn.

10. Module và Vite hoạt động như thế nào?

Trong Laravel, Vite giúp xử lý các file JavaScript và quan hệ import giữa chúng.

javascript.blade.php
        │
        │ @vite()
        ▼
      app.js
        │
        ├── posts.js
        │
        └── search.js
                │
                ▼
          JavaScript chạy
          trong trình duyệt

Trong chế độ phát triển, Vite hỗ trợ cập nhật nhanh khi chúng ta chỉnh sửa code.&

Khi build production, Vite xử lý các module để tạo tài nguyên frontend phục vụ triển khai.

Không cần tự nối nội dung tất cả file JavaScript vào một file bằng tay.

Có thể import trực tiếp trong trình duyệt không?

Có. JavaScript hiện đại hỗ trợ ES Modules với type="module":

<script type="module" src="/js/app.js"></script>

Tuy nhiên, trong project Laravel sử dụng Vite, hãy ưu tiên:

@vite(['resources/js/app.js'])

Vite sẽ đảm nhiệm việc phục vụ và build tài nguyên theo cấu hình của dự án.

11. Một số lỗi thường gặp

Lỗi 1 — Sai đường dẫn import

import { posts } from './post.js';

Nhưng file thực tế là posts.js.

Hãy kiểm tra đúng tên file và đường dẫn tương đối tính từ file đang import.

Lỗi 2 — Quên dấu ngoặc nhọn

Nếu module xuất:

export const doraemon = {
    name: 'Doraemon'
};

Thì cách import đúng là:

import { doraemon } from './modules/characters.js';

Lỗi 3 — Dùng sai chữ hoa, chữ thường

import { Doraemon } from './modules/characters.js';

Nếu tên export là doraemon, đoạn trên không đúng vì JavaScript phân biệt chữ hoa và chữ thường.

Lỗi 4 — Hai module import lẫn nhau

Ví dụ:

posts.js → search.js
search.js → posts.js

Đây là quan hệ phụ thuộc vòng.&

Một số trường hợp vẫn hoạt động, nhưng có thể gây lỗi khởi tạo hoặc làm code khó hiểu.&

Nên thiết kế module theo hướng mỗi module có nhiệm vụ rõ ràng, tránh phụ thuộc vòng không cần thiết.

Lỗi 5 — Import nhưng không Export

Nếu file khác không xuất thành phần mà bạn đang import, JavaScript sẽ báo lỗi module.

Hãy kiểm tra tên và loại export trong file nguồn.

12. Bài tập cuối bài

Bài tập 1 — Tạo module nhân vật

Tạo file characters.js và xuất ba nhân vật:

• Doraemon

• Nobita

• Pikachu

Mỗi nhân vật có name và power.

Bài tập 2 — Import và hiển thị

Trong app.js, import danh sách nhân vật và in tên từng nhân vật ra Console.

Bài tập 3 — Tạo module toán học

Tạo file math.js, xuất hai hàm:

• add(a, b)

• multiply(a, b)

Import vào app.js và kiểm tra kết quả.

Bài tập 4 — Tách chức năng tìm kiếm

Tách hàm tìm kiếm bài viết khỏi app.js thành search.js.&

Sau đó import lại và đảm bảo chức năng vẫn hoạt động.

Bài tập 5 — Tự tổ chức project

Tạo cấu trúc:

resources/js/
├── app.js
├── modules/
│   ├── characters.js
│   └── posts.js
└── services/
    └── api.js

Chưa cần gọi API thật.&

Hãy tập trung vào việc xuất và nhập dữ liệu giữa các file.

13. Tổng kết

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

Ghi nhớ: app.js không nhất thiết phải chứa toàn bộ logic của ứng dụng. Nó có thể đóng vai trò điểm khởi đầu, nhập các module cần thiết rồi khởi tạo chức năng.

Khi chuyển sang Vue và React, chúng ta vẫn sử dụng import và export để tổ chức Component, hàm xử lý dữ liệu và các module dùng chung.

Bài 05 — Promise & Async/Await: học cách xử lý các công việc bất đồng bộ, chờ kết quả API và quản lý lỗi khi giao tiếp giữa JavaScript với Laravel.

x1

1. Array & Object là gì?

Trong ứng dụng web, dữ liệu thường được tổ chức dưới hai dạng phổ biến: Array và Object.

Array dùng để lưu một danh sách dữ liệu.

const languages = [
    'PHP',
    'JavaScript',
    'Python',
    'Java'
];

console.log(languages[0]);
console.log(languages[1]);

Kết quả:

PHP
JavaScript

Array sử dụng chỉ số bắt đầu từ 0.

Object dùng để lưu dữ liệu theo cặp khóa và giá trị.

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com',
    role: 'user'
};

console.log(user.name);
console.log(user.email);

Kết quả:

Pi
pi@example.com

Trong thực tế, một danh sách thường chứa nhiều Object:

const users = [
    { id: 1, name: 'Pi', role: 'admin' },
    { id: 2, name: 'Hùng', role: 'user' },
    { id: 3, name: 'Chi', role: 'user' }
];

Đây là cấu trúc dữ liệu rất phổ biến khi Laravel trả về danh sách người dùng hoặc bài viết dưới dạng JSON.

2. Khai báo và truy cập Array

2.1. Tạo Array

const posts = [
    'Laravel 13',
    'JavaScript',
    'Vue'
];

Lấy phần tử theo chỉ số:

console.log(posts[0]);
console.log(posts[1]);
console.log(posts[2]);

Kết quả:

Laravel 13
JavaScript
Vue

2.2. Lấy số lượng phần tử

Sử dụng thuộc tính length:

console.log(posts.length);

Kết quả:

3

2.3. Thêm phần tử với push()

posts.push('React');

console.log(posts);

Kết quả:

[
    'Laravel 13',
    'JavaScript',
    'Vue',
    'React'
]

push() thêm phần tử vào cuối Array và thay đổi Array ban đầu.

2.4. Xóa phần tử cuối với pop()

posts.pop();

console.log(posts);

pop() xóa và trả về phần tử cuối cùng.

2.5. Kiểm tra phần tử với includes()

const frameworks = ['Vue', 'React', 'Angular'];

console.log(frameworks.includes('Vue'));
console.log(frameworks.includes('Laravel'));

Kết quả:

true
false

includes() hữu ích khi cần kiểm tra một danh sách có chứa một giá trị hay không.

3. Duyệt Array với forEach()

Giả sử có danh sách bài viết:

const posts = [
    { id: 1, title: 'Laravel 13' },
    { id: 2, title: 'JavaScript' },
    { id: 3, title: 'Vue' }
];

Duyệt bằng vòng lặp for:

for (let i = 0; i < posts.length; i++) {
    console.log(posts[i].title);
}

Có thể viết ngắn hơn bằng forEach():

posts.forEach(post => {
    console.log(post.title);
});

Kết quả:

Laravel 13
JavaScript
Vue

Nếu cần chỉ số của phần tử:

posts.forEach((post, index) => {
    console.log(index, post.title);
});

Lưu ý: forEach() chủ yếu dùng để thực hiện một hành động với từng phần tử.&

Nó không tạo ra Array mới và không chờ các hàm async bên trong hoàn thành.

4. map() — biến đổi dữ liệu

map() duyệt từng phần tử và trả về một Array mới chứa kết quả biến đổi.

Ví dụ:

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Kết quả:

[2, 4, 6, 8, 10]

Array ban đầu không bị thay đổi:

console.log(numbers);

Kết quả:

[1, 2, 3, 4, 5]

Ứng dụng: lấy danh sách tiêu đề bài viết

const posts = [
    { id: 1, title: 'Laravel 13' },
    { id: 2, title: 'JavaScript' },
    { id: 3, title: 'Vue' }
];

const titles = posts.map(post => post.title);

console.log(titles);

Kết quả:

['Laravel 13', 'JavaScript', 'Vue']

Ứng dụng: định dạng dữ liệu từ API

const posts = [
    { id: 1, title: 'Laravel', views: 100 },
    { id: 2, title: 'Vue', views: 80 }
];

const formattedPosts = posts.map(post => ({
    ...post,
    url: `/posts/${post.id}`
}));

console.log(formattedPosts);

Kết quả sẽ là danh sách bài viết có thêm thuộc tính url.

Lưu ý dấu ngoặc đơn quanh Object trong Arrow Function: chúng giúp JavaScript hiểu rằng đây là Object được trả về, không phải phần thân hàm.

Ghi nhớ: dùng map() khi muốn biến đổi từng phần tử thành dữ liệu mới.

5. filter() — lọc dữ liệu

filter() tạo một Array mới chỉ chứa những phần tử thỏa mãn điều kiện.

Ví dụ:

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Kết quả:

[2, 4, 6]

Ứng dụng: lọc bài viết đã xuất bản

const posts = [
    { id: 1, title: 'Laravel', status: 'published' },
    { id: 2, title: 'Vue', status: 'draft' },
    { id: 3, title: 'React', status: 'published' }
];

const publishedPosts = posts.filter(
    post => post.status === 'published'
);

console.log(publishedPosts);

Kết quả chứa bài viết Laravel và React.

Ứng dụng: lọc người dùng theo vai trò

const users = [
    { id: 1, name: 'Pi', role: 'admin' },
    { id: 2, name: 'Hùng', role: 'user' },
    { id: 3, name: 'Chi', role: 'admin' }
];

const admins = users.filter(user => user.role === 'admin');

console.log(admins);

Ghi nhớ: filter() dùng để lọc danh sách, không xóa dữ liệu khỏi Array ban đầu.

Việc lọc ở JavaScript chỉ ảnh hưởng dữ liệu đang có trong trình duyệt. Nếu cần phân quyền hoặc bảo vệ dữ liệu, Laravel vẫn phải kiểm tra ở phía Server.

6. find() — tìm một phần tử

find() trả về phần tử đầu tiên thỏa mãn điều kiện. Nếu không tìm thấy, kết quả là undefined.

const users = [
    { id: 1, name: 'Pi' },
    { id: 2, name: 'Hùng' },
    { id: 3, name: 'Chi' }
];

const user = users.find(user => user.id === 2);

console.log(user);

Kết quả:

{ id: 2, name: 'Hùng' }

Nếu tìm ID không tồn tại:

const user = users.find(user => user.id === 99);

console.log(user);

Kết quả:

undefined

Ứng dụng: tìm bài viết cần hiển thị

const posts = [
    { id: 10, title: 'Laravel' },
    { id: 20, title: 'JavaScript' },
    { id: 30, title: 'Vue' }
];

const post = posts.find(post => post.id === 20);

console.log(post?.title);

Kết quả:

JavaScript

Dấu ?. giúp tránh lỗi khi không tìm thấy bài viết.

Phân biệt:

• find() trả về một phần tử đầu tiên phù hợp.

• filter() trả về một Array chứa tất cả phần tử phù hợp.

7. some() và every() — kiểm tra điều kiện

7.1. some()

Trả về true nếu có ít nhất một phần tử thỏa mãn điều kiện.

const scores = [4, 6, 8, 9];

const hasExcellentScore = scores.some(score => score >= 9);

console.log(hasExcellentScore);

Kết quả:

true

7.2. every()

Trả về true nếu tất cả phần tử đều thỏa mãn điều kiện.

const scores = [7, 8, 9, 10];

const allPassed = scores.every(score => score >= 5);

console.log(allPassed);

Kết quả:

true

Ứng dụng với danh sách bài viết:

const posts = [
    { title: 'Laravel', published: true },
    { title: 'Vue', published: true }
];

console.log(posts.some(post => !post.published));
console.log(posts.every(post => post.published));

Kết quả:

false
true

Lưu ý: gọi some() hoặc every() trên Array rỗng sẽ lần lượt trả về false và true.

8. reduce() — tổng hợp dữ liệu

reduce() duyệt Array và tích lũy kết quả thành một giá trị.

Ví dụ tính tổng:

const prices = [100, 200, 300];

const total = prices.reduce((sum, price) => {
    return sum + price;
}, 0);

console.log(total);

Kết quả:

600

Trong đó:

• sum: giá trị tích lũy.

• price: phần tử đang xử lý.

• 0: giá trị khởi tạo của bộ tích lũy.

Có thể viết ngắn hơn:

const total = prices.reduce((sum, price) => sum + price, 0);

Ứng dụng: tính tổng lượt xem bài viết

const posts = [
    { title: 'Laravel', views: 100 },
    { title: 'Vue', views: 200 },
    { title: 'React', views: 150 }
];

const totalViews = posts.reduce(
    (total, post) => total + post.views,
    0
);

console.log(totalViews);

Kết quả:

450

Ứng dụng: thống kê bài viết theo trạng thái

const posts = [
    { status: 'published' },
    { status: 'draft' },
    { status: 'published' },
    { status: 'published' }
];

const statistics = posts.reduce((result, post) => {
    result[post.status] = (result[post.status] ?? 0) + 1;

    return result;
}, {});

console.log(statistics);

Kết quả:

{
    published: 3,
    draft: 1
}

reduce() rất mạnh, nhưng không cần sử dụng nó cho mọi việc. Nếu chỉ cần biến đổi danh sách, hãy dùng map(); nếu chỉ cần lọc, hãy dùng filter().

9. Sắp xếp dữ liệu với sort()

sort() sắp xếp các phần tử và thay đổi Array ban đầu.

Ví dụ sắp xếp số tăng dần:

const numbers = [40, 5, 100, 20];

numbers.sort((a, b) => a - b);

console.log(numbers);

Kết quả:

[5, 20, 40, 100]

Nếu viết numbers.sort() mà không có hàm so sánh, các số sẽ được sắp xếp theo thứ tự chuỗi, nên có thể cho kết quả không như mong muốn.

Sắp xếp bài viết theo lượt xem

const posts = [
    { title: 'Laravel', views: 100 },
    { title: 'Vue', views: 300 },
    { title: 'React', views: 200 }
];

const sortedPosts = [...posts].sort((a, b) => b.views - a.views);

console.log(sortedPosts);

Kết quả: Vue, React, Laravel.

Ở đây, [...posts] tạo một bản sao nông trước khi sắp xếp để tránh thay đổi thứ tự của Array gốc.

10. Object — làm việc với dữ liệu có cấu trúc

10.1. Truy cập thuộc tính

const post = {
    id: 1,
    title: 'Laravel 13',
    views: 100
};

console.log(post.title);
console.log(post['views']);

Cả hai cách đều hợp lệ.

10.2. Thêm và cập nhật thuộc tính

const post = {
    id: 1,
    title: 'Laravel'
};

post.views = 100;
post.title = 'Laravel 13';

console.log(post);

10.3. Xóa thuộc tính

const user = {
    name: 'Pi',
    email: 'pi@example.com'
};

delete user.email;

console.log(user);

delete xóa thuộc tính email khỏi Object hiện tại.

Nếu muốn giữ nguyên Object ban đầu, hãy tạo Object mới thay vì sửa trực tiếp.

10.4. Lấy danh sách khóa và giá trị

const user = {
    name: 'Pi',
    role: 'admin'
};

console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));

Kết quả:

['name', 'role']
['Pi', 'admin']
[['name', 'Pi'], ['role', 'admin']]

Những phương thức này hữu ích khi cần kiểm tra, duyệt hoặc chuyển đổi dữ liệu Object.

11. Array chứa Object — cấu trúc thường gặp trong Laravel API

Giả sử Laravel trả về danh sách bài viết:

{
    "data": [
        {
            "id": 1,
            "title": "Laravel 13",
            "status": "published",
            "views": 120
        },
        {
            "id": 2,
            "title": "JavaScript",
            "status": "draft",
            "views": 50
        },
        {
            "id": 3,
            "title": "Vue",
            "status": "published",
            "views": 200
        }
    ]
}

Khi dữ liệu đã được chuyển thành JavaScript Object, chúng ta có thể xử lý bằng các phương thức Array.

const responseData = {
    data: [
        { id: 1, title: 'Laravel 13', status: 'published', views: 120 },
        { id: 2, title: 'JavaScript', status: 'draft', views: 50 },
        { id: 3, title: 'Vue', status: 'published', views: 200 }
    ]
};

const posts = responseData.data;

// Lấy danh sách tiêu đề.
const titles = posts.map(post => post.title);

// Lấy các bài đã xuất bản.
const publishedPosts = posts.filter(
    post => post.status === 'published'
);

// Tìm bài viết có ID bằng 3.
const post = posts.find(post => post.id === 3);

// Tính tổng lượt xem.
const totalViews = posts.reduce(
    (total, post) => total + post.views,
    0
);

console.log(titles);
console.log(publishedPosts);
console.log(post);
console.log(totalViews);

Đây là những thao tác nền tảng khi xây dựng trang danh sách bài viết bằng JavaScript, Vue hoặc React.

12. Kết hợp tìm kiếm và lọc bài viết

Giả sử có danh sách:

const posts = [
    { id: 1, title: 'Laravel 13 cơ bản', category: 'Laravel' },
    { id: 2, title: 'JavaScript hiện đại', category: 'JavaScript' },
    { id: 3, title: 'Laravel REST API', category: 'Laravel' },
    { id: 4, title: 'Vue cơ bản', category: 'Vue' }
];

Tạo chức năng tìm kiếm:

const searchPosts = (posts, keyword) => {
    const normalizedKeyword = keyword.trim().toLowerCase();

    return posts.filter(post =>
        post.title.toLowerCase().includes(normalizedKeyword)
    );
};

console.log(searchPosts(posts, 'laravel'));

Kết quả là hai bài viết có tiêu đề chứa từ laravel, không phân biệt chữ hoa và chữ thường.

Tiếp tục lọc theo danh mục:

const searchAndFilter = (posts, keyword, category) => {
    const normalizedKeyword = keyword.trim().toLowerCase();

    return posts.filter(post => {
        const matchesKeyword = post.title
            .toLowerCase()
            .includes(normalizedKeyword);

        const matchesCategory =
            category === 'all' || post.category === category;

        return matchesKeyword && matchesCategory;//phải thỏa cả title và category
    });
};

console.log(searchAndFilter(posts, 'laravel', 'Laravel'));

Đây là logic có thể tái sử dụng khi xây dựng chức năng Search & Filter trong các bài Vue sau này.

Với danh sách lớn, nên cân nhắc tìm kiếm và phân trang ở phía Laravel thay vì tải toàn bộ dữ liệu về trình duyệt.

13. Thực hành trong Laravel 13

Mục tiêu: hiển thị danh sách bài viết, tìm kiếm theo tiêu đề và tính tổng lượt xem.

Bước 1 — Tạo file JavaScript

Mở:

resources/js/app.js

Thêm code:

const posts = [
    { id: 1, title: 'Laravel 13', views: 120 },
    { id: 2, title: 'JavaScript hiện đại', views: 80 },
    { id: 3, title: 'Vue cơ bản', views: 200 },
    { id: 4, title: 'Laravel REST API', views: 150 }
];

const renderPosts = (items) => {
    const list = document.querySelector('#postList');

    if (!list) {
        return;
    }

    list.replaceChildren();

    items.forEach(post => {
        const li = document.createElement('li');
        const title = document.createElement('strong');
        const views = document.createElement('span');

        title.textContent = post.title;
        views.textContent = ` — ${post.views} lượt xem`;

        li.append(title, views);
        list.append(li);
    });
};

const searchInput = document.querySelector('#searchInput');
const totalViews = document.querySelector('#totalViews');

const updateTotalViews = (items) => {
    const total = items.reduce(
        (sum, post) => sum + post.views,
        0
    );

    if (totalViews) {
        totalViews.textContent = total;
    }
};

if (searchInput) {
    searchInput.addEventListener('input', () => {
        const keyword = searchInput.value.trim().toLowerCase();

        const filteredPosts = posts.filter(post =>
            post.title.toLowerCase().includes(keyword)
        );

        renderPosts(filteredPosts);
        updateTotalViews(filteredPosts);
    });
}

renderPosts(posts);
updateTotalViews(posts);

Bước 2 — Tạo Blade View

Tạo file:

resources/views/javascript.blade.php

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Array & Object - Laravel 13</title>

    @vite(['resources/js/app.js'])
</head>
<body>
    <h1>Quản lý bài viết</h1>

    <label for="searchInput">Tìm kiếm bài viết:</label>

    <input
        type="search"
        id="searchInput"
        placeholder="Nhập tiêu đề..."
    >

    <h2>Danh sách</h2>
    <ul id="postList"></ul>

    <p>
        Tổng lượt xem:
        <strong id="totalViews">0</strong>
    </p>
</body>
</html>

Bước 3 — Khai báo Route

Mở routes/web.php:

use Illuminate\Support\Facades\Route;

Route::view('/javascript', 'javascript');

Nếu file đã có khai báo Route, không cần import thêm lần nữa.

Bước 4 — Chạy ứng dụng

Nếu dự án Laravel của bạn đã cài Node dependencies:

npm run dev

Mở terminal khác:

php artisan serve

Truy cập:

http://127.0.0.1:8000/javascript

Thử nhập Laravel vào ô tìm kiếm.&

Danh sách sẽ chỉ hiển thị những bài viết phù hợp và tổng lượt xem sẽ được tính lại.

Ví dụ này sử dụng dữ liệu giả lập để tập trung vào Array & Object.&

Ở Bài 08, chúng ta sẽ thay dữ liệu này bằng dữ liệu nhận từ Laravel REST API.

14. Bài tập cuối bài

Bài 1 — Lọc sản phẩm

Cho dữ liệu:

const products = [
    { id: 1, name: 'Laptop', price: 15000000 },
    { id: 2, name: 'Mouse', price: 300000 },
    { id: 3, name: 'Keyboard', price: 800000 },
    { id: 4, name: 'Monitor', price: 4000000 }
];

Hãy lọc các sản phẩm có giá lớn hơn hoặc bằng 1.000.000 đồng.

Bài 2 — Tìm người dùng

const users = [
    { id: 1, name: 'Pi', role: 'user' },
    { id: 2, name: 'Hùng', role: 'admin' },
    { id: 3, name: 'Chi', role: 'user' }
];

Dùng find() để tìm người dùng có ID bằng 2.

Bài 3 — Tính tổng đơn hàng

const orders = [
    { id: 1, total: 100000 },
    { id: 2, total: 250000 },
    { id: 3, total: 150000 }
];

Dùng reduce() để tính tổng giá trị các đơn hàng.

Bài 4 — Tìm kiếm bài viết

Cho danh sách bài viết ở phần 12.&

Viết hàm tìm kiếm tiêu đề không phân biệt chữ hoa và chữ thường.

Bài 5 — Cập nhật Object

Cho dữ liệu:

const user = {
    id: 1,
    name: 'Pi',
    role: 'user'
};

Tạo một Object mới bằng Spread Operator, đổi role thành admin và giữ nguyên Object ban đầu.

15. Tổng kết

Điều quan trọng nhất không phải là thuộc lòng các phương thức, mà là biết chọn đúng công cụ cho từng công việc.

• Muốn biến đổi dữ liệu: dùng map().

• Muốn lọc danh sách: dùng filter().

• Muốn tìm một phần tử: dùng find().

• Muốn tính tổng: dùng reduce().

• Muốn kiểm tra điều kiện: dùng some() hoặc every().

Đây là nền tảng xử lý dữ liệu mà chúng ta sẽ tiếp tục sử dụng khi gọi Laravel REST API, xây dựng danh sách bài viết bằng Vue và phát triển Blog SPA.

Bài 04 — Module & Import / Export: chia JavaScript thành nhiều file, tái sử dụng hàm và tổ chức code theo cấu trúc của một ứng dụng thực tế.

x1

1. ES6+ là gì?

ES6 (ECMAScript 2015) là phiên bản lớn của JavaScript ra mắt năm 2015, bổ sung nhiều cú pháp và tính năng giúp code ngắn gọn, dễ đọc và dễ bảo trì hơn.

ES6+ là cách gọi chung các tính năng ES6 và những phiên bản JavaScript hiện đại ra đời sau đó.

Trong khóa học Laravel 13, chúng ta sẽ sử dụng ES6+ để:

• Viết JavaScript trong ứng dụng Laravel.

• Xử lý dữ liệu từ REST API.

• Xây dựng giao diện bằng Vue.

• Làm việc với React.

• Tổ chức code thành các module độc lập.

2. Khai báo biến: var, let, const

JavaScript có ba từ khóa thường gặp để khai báo biến.

2.1. var — cách khai báo cũ

var name = 'Laravel';

name = 'JavaScript';

console.log(name);

Kết quả:

JavaScript

var có phạm vi hàm và một số hành vi về phạm vi khiến code lớn khó kiểm soát hơn. Trong code JavaScript hiện đại, chúng ta thường ưu tiên let và const.

2.2. let — biến có thể thay đổi

let count = 0;

count = 1;
count = 2;

console.log(count);

Kết quả:

2

Sử dụng let khi giá trị cần được gán lại.

Ví dụ:

let page = 1;

page = page + 1;

console.log(page);

Đây là cách có thể dùng khi quản lý trang hiện tại của chức năng phân trang.

2.3. const — không cho phép gán lại biến

const appName = 'Laravel 13';

console.log(appName);

Không thể gán lại:

const appName = 'Laravel 13';

appName = 'Vue';

Đoạn code trên sẽ phát sinh lỗi.

Tuy nhiên, nếu const chứa một object, các thuộc tính của object vẫn có thể thay đổi:

const user = {
    name: 'Pi',
    role: 'user'
};

user.role = 'admin';

console.log(user.role);

Kết quả:

admin

const ngăn việc gán lại biến, không làm cho object trở thành bất biến.

Quy tắc thực hành: ưu tiên const; dùng let khi cần gán lại; hạn chế sử dụng var trong code mới.

3. Arrow Function — hàm mũi tên

Trong JavaScript truyền thống, chúng ta viết hàm như sau:

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));

Kết quả:

8

Với Arrow Function:

const add = (a, b) => {
    return a + b;
};

console.log(add(5, 3));

Nếu hàm chỉ có một biểu thức trả về, có thể viết ngắn hơn:

const add = (a, b) => a + b;

console.log(add(5, 3));

Nếu chỉ có một tham số, có thể bỏ cặp ngoặc đơn:

const double = number => number * 2;

console.log(double(5));

Kết quả:

10

Ứng dụng trong Laravel

Giả sử nhận danh sách bài viết từ API:

const posts = [
    { id: 1, title: 'Laravel 13' },
    { id: 2, title: 'JavaScript' },
    { id: 3, title: 'Vue' }
];

posts.forEach(post => {
    console.log(post.title);
});

Kết quả:

Laravel 13
JavaScript
Vue

Arrow Function được sử dụng rất thường xuyên trong các callback, xử lý mảng, Fetch API và Vue.

Lưu ý: Arrow Function không có this riêng như function thông thường. Vì vậy, không nên xem hai cách viết này là hoàn toàn tương đương trong mọi trường hợp.

4. Template Literal — chuỗi mẫu

Cách nối chuỗi cũ:

const name = 'Pi';
const age = 25;

const message = 'Xin chào ' + name + ', bạn ' + age + ' tuổi.';

console.log(message);

Cách hiện đại:

const name = 'Pi';
const age = 25;

const message = `Xin chào ${name}, bạn ${age} tuổi.`;

console.log(message);

Kết quả:

Xin chào Pi, bạn 25 tuổi.

Template Literal sử dụng dấu backtick ` và cú pháp ${...} để chèn biến hoặc biểu thức vào chuỗi.

Ví dụ với dữ liệu bài viết:

const post = {
    id: 10,
    title: 'Học JavaScript hiện đại'
};

const url = `/posts/${post.id}`;

console.log(url);

Kết quả:

/posts/10

Đây là cách viết thuận tiện khi tạo URL, thông báo và nội dung HTML.

5. Default Parameter — tham số mặc định

Giả sử một hàm chào hỏi:

function greeting(name) {
    return `Xin chào ${name}`;
}

console.log(greeting());

Kết quả sẽ là:

Xin chào undefined

Chúng ta có thể khai báo giá trị mặc định:

function greeting(name = 'bạn') {
    return `Xin chào ${name}`;
}

console.log(greeting());
console.log(greeting('Pi'));

Kết quả:

Xin chào bạn
Xin chào Pi

Arrow Function cũng hỗ trợ tham số mặc định:

const getPage = (page = 1) => page;

console.log(getPage());
console.log(getPage(3));

Kết quả:

1
3

Lưu ý: giá trị mặc định được sử dụng khi tham số nhận undefined, không phải mọi giá trị thiếu hoặc rỗng đều được thay thế.

6. Destructuring — phân rã dữ liệu

Destructuring giúp lấy dữ liệu từ object hoặc array một cách ngắn gọn.

6.1. Object Destructuring

Cách thông thường:

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com'
};

const name = user.name;
const email = user.email;

console.log(name, email);

Cách dùng Destructuring:

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com'
};

const { name, email } = user;

console.log(name, email);

Kết quả giống nhau.

Có thể đổi tên biến:

const user = {
    name: 'Pi'
};

const { name: userName } = user;

console.log(userName);

Kết quả:

Pi

6.2. Destructuring dữ liệu API

Giả sử Laravel trả về:

{
    "id": 1,
    "title": "Laravel 13",
    "status": "published"
}

JavaScript có thể lấy dữ liệu:

const post = {
    id: 1,
    title: 'Laravel 13',
    status: 'published'
};

const { id, title, status } = post;

console.log(id);
console.log(title);
console.log(status);

6.3. Array Destructuring

const colors = ['red', 'green', 'blue'];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

Kết quả:

red
green
blue

Destructuring sẽ xuất hiện rất nhiều trong Vue và React, đặc biệt khi lấy dữ liệu từ object, props hoặc kết quả của hàm.

7. Spread Operator — toán tử trải

Spread Operator sử dụng dấu ... để trải các phần tử của array hoặc các thuộc tính của object trong những ngữ cảnh được hỗ trợ.

7.1. Sao chép array

const numbers = [1, 2, 3];

const newNumbers = [...numbers];

console.log(newNumbers);

Kết quả:

[1, 2, 3]

Có thể kết hợp nhiều array:

const first = [1, 2];
const second = [3, 4];

const result = [...first, ...second];

console.log(result);

Kết quả:

[1, 2, 3, 4]

7.2. Sao chép và cập nhật object

const user = {
    name: 'Pi',
    role: 'user'
};

const updatedUser = {
    ...user,
    role: 'admin'
};

console.log(updatedUser);

Kết quả:

{
    name: 'Pi',
    role: 'admin'
}

Object mới có các thuộc tính từ user, sau đó thuộc tính role được ghi đè.

7.3. Ứng dụng trong giao diện

const post = {
    id: 1,
    title: 'Laravel'
};

const updatedPost = {
    ...post,
    title: 'Laravel 13'
};

Spread Operator hữu ích khi tạo bản sao nông (shallow copy) và cập nhật dữ liệu. Nó không tự sao chép sâu các object lồng nhau.

8. Rest Parameter — gom các tham số

Rest Parameter cũng sử dụng dấu ..., nhưng có mục đích gom nhiều tham số còn lại thành một array.

function sum(...numbers) {
    return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40));

Kết quả:

6
100

Có thể phân biệt:

• Spread: trải các phần tử hoặc thuộc tính.

• Rest: gom các phần tử hoặc tham số còn lại.

Cùng ký hiệu ..., nhưng ý nghĩa phụ thuộc vào vị trí sử dụng.

9. Optional Chaining — truy cập an toàn

Giả sử dữ liệu người dùng có dạng:

const user = {
    name: 'Pi',
    address: {
        city: 'Ho Chi Minh City'
    }
};

console.log(user.address.city);

Nhưng nếu address không tồn tại:

const user = {
    name: 'Pi'
};

console.log(user.address.city);

JavaScript sẽ phát sinh lỗi vì user.address là undefined.

Sử dụng Optional Chaining:

console.log(user.address?.city);

Kết quả:

undefined

Ví dụ dữ liệu bài viết có thể không chứa thông tin tác giả:

const post = {
    id: 1,
    title: 'Laravel 13'
};

console.log(post.author?.name);

Optional Chaining giúp truy cập thuộc tính lồng nhau an toàn hơn.&

Nó không thay thế việc kiểm tra dữ liệu hoặc xử lý lỗi API.

10. Nullish Coalescing — toán tử ??

Giả sử API trả về số lượt xem:

const views = null;

const totalViews = views ?? 0;

console.log(totalViews);

Kết quả:

0

?? chỉ sử dụng giá trị mặc định khi biểu thức bên trái là null hoặc undefined.

Điểm khác biệt với ||:

const a = 0 || 100;
const b = 0 ?? 100;

console.log(a);
console.log(b);

Kết quả:

100
0

Vì 0 là giá trị hợp lệ nhưng được xem là falsy trong JavaScript.

Khi xử lý dữ liệu API, ?? hữu ích nếu chúng ta muốn giữ nguyên các giá trị như 0, false hoặc chuỗi rỗng.

11. Tổ hợp ES6+ trong một ví dụ thực tế

Giả sử chúng ta có danh sách bài viết:

const posts = [
    {
        id: 1,
        title: 'Laravel 13',
        views: 120
    },
    {
        id: 2,
        title: 'JavaScript hiện đại',
        views: 0
    },
    {
        id: 3,
        title: 'Vue',
        views: null
    }
];

Tạo hàm định dạng thông tin:

const formatPost = ({ id, title, views = 0 }) => {
    const totalViews = views ?? 0;

    return `Bài ${id}: ${title} - ${totalViews} lượt xem`;
};

posts.forEach(post => {
    console.log(formatPost(post));
});

Kết quả:

Bài 1: Laravel 13 - 120 lượt xem
Bài 2: JavaScript hiện đại - 0 lượt xem
Bài 3: Vue - 0 lượt xem

Ví dụ này kết hợp:

• const để khai báo biến.

• Arrow Function để viết hàm.

• Destructuring để lấy dữ liệu.

• Default Parameter để cung cấp giá trị mặc định khi thuộc tính bị thiếu.

• Nullish Coalescing để xử lý null.

• Template Literal để tạo chuỗi.

• forEach() để duyệt danh sách.

Đây là phong cách JavaScript mà chúng ta sẽ thường xuyên sử dụng khi làm việc với dữ liệu Laravel API.

12. Thực hành trong Laravel 13

Mở file:

resources/js/app.js

Thêm đoạn code sau:

const posts = [
    { id: 1, title: 'Laravel 13', views: 100 },
    { id: 2, title: 'JavaScript ES6+', views: 50 },
    { id: 3, title: 'Vue', views: null }
];

const renderPost = ({ id, title, views }) => {
    const totalViews = views ?? 0;

    return `
        <li>
            <strong>${title}</strong>
            <span> - ${totalViews} lượt xem</span>
        </li>
    `;
};

const list = document.querySelector('#postList');

if (list) {
    list.innerHTML = posts.map(renderPost).join('');
}

Trong Blade, tạo vùng hiển thị:

<ul id="postList"></ul>

@vite(['resources/js/app.js'])

Khi trang được tải, JavaScript sẽ tạo danh sách bài viết và đưa vào phần tử postList.

Lưu ý bảo mật: ví dụ này dùng innerHTML để minh họa cách render HTML. Khi dữ liệu đến từ người dùng hoặc API có nội dung không đáng tin cậy, không nên chèn trực tiếp dữ liệu đó bằng innerHTML. Hãy sử dụng textContent, tạo DOM element pi toàn hoặc cơ chế render có xử lý escape phù hợp.

13. Bài tập cuối bài

Bài tập 1 — Khai báo biến

Tạo các biến:

• appName có giá trị Laravel 13.

• framework có giá trị Vue.

• lesson có giá trị 2.

Sau đó in cả ba biến ra Console bằng Template Literal.

Bài tập 2 — Xử lý array

Cho dữ liệu:

const scores = [7, 8, 9, 10, 6];

Hãy viết Arrow Function tính tổng các điểm và in kết quả ra Console.

Bài tập 3 — Xử lý object

Cho dữ liệu:

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com',
    role: 'user'
};

Hãy sử dụng Destructuring để lấy name và email, sau đó tạo chuỗi:

Xin chào Pi, email của bạn là pi@example.com

Bài tập 4 — Cập nhật bài viết

Cho dữ liệu:

const post = {
    id: 1,
    title: 'Laravel',
    views: 100
};

Tạo object mới bằng Spread Operator, đổi tiêu đề thành Laravel 13 và giữ nguyên object bpi đầu.

Bài tập 5 — Xử lý dữ liệu thiếu

Cho dữ liệu:

const post = {
    id: 1,
    title: 'Vue'
};

Sử dụng Optional Chaining và Nullish Coalescing để lấy tên tác giả, mặc định là Chưa có tác giả.

14. Tổng kết

Trong bài này, chúng ta đã học những cú pháp JavaScript hiện đại qupi trọng:

Những kiến thức này là nền tảng để học Vue và React mà không phải ghi nhớ máy móc từng cú pháp.

Bài tiếp theo — Bài 03: Array & Object.

Chúng ta sẽ đi sâu vào map(), filter(), find(), reduce(), cách cập nhật dữ liệu và cách xử lý danh sách bài viết nhận từ Laravel REST API.

x1

JavaScript → Vue → Vue + Laravel API → React → Livewire

PHẦN 1 — JAVASCRIPT HIỆN ĐẠI

Bài 01 — JavaScript hiện đại trong ứng dụng Laravel

Bài 02 — ES6+

Bài 03 — Array & Object

Bài 04 — Module & Import / Export

Bài 05 — Promise & Async/Await

Bài 06 — Fetch API

Bài 07 — Xử lý JSON & HTTP

Bài 08 — JavaScript gọi Laravel REST API

🟢 PHẦN 2 — VUE

Bài 09 — Vue là gì?

Bài 10 — Cài đặt Vue + Vite

Bài 11 — Component

Bài 12 — Template & Data Binding

Bài 13 — Event

Bài 14 — Conditional & List Rendering

Bài 15 — Form

Bài 16 — Computed & Watch

Bài 17 — Props & Emits

Bài 18 — Composition API

Bài 19 — ref() & reactive()

Bài 20 — Composables

🔵 PHẦN 3 — VUE + LARAVEL API

Bài 21 — Kết nối Vue với Laravel API

Bài 22 — Hiển thị Posts

Bài 23 — Post Detail

Bài 24 — Category & Filter

Bài 25 — Search & Pagination

Bài 26 — CRUD với Vue

Bài 27 — Upload Image

Bài 28 — Login với Laravel Sanctum

Bài 29 — Register & Logout

Bài 30 — Protected Page

Bài 31 — User Dashboard

Bài 32 — Admin Dashboard

🟣 PHẦN 4 — VUE ROUTER & PINIA

Bài 33 — Vue Router

Bài 34 — Dynamic Route & Navigation Guard

Bài 35 — Pinia

Bài 36 — Authentication State

Bài 37 — Axios & Interceptor

🏗️ PHẦN 5 — PROJECT

Xây dựng Blog SPA

Bài 38 — Khởi tạo Blog SPA

Bài 39 — Blog Homepage

Bài 40 — Blog Listing & Detail

Bài 41 — Category & Search

Bài 42 — Authentication

Bài 43 — User Dashboard

Bài 44 — Admin Dashboard

Bài 45 — CRUD Posts

Bài 46 — Hoàn thiện Blog SPA

🔴 PHẦN 6 — MỞ RỘNG

Bài 47 — React cơ bản

• JSX

• Component

• Props

• State

• useState

• useEffect

Bài 48 — React + Laravel API

Bài 49 — Livewire cơ bản

• Component

• Data Binding

• Event

• Form

• Validation

Bài 50 — Khi nào dùng Blade, Livewire, Vue hay React?

🎯 Tổng cộng: 50 bài

KHÓA LARAVEL 13
       │
       ├── REST API ✓
       │
       └── Sanctum ✓
              │
              ▼
      KHÓA FRONTEND 50 BÀI
              │
       ┌──────┴──────┐
       ↓             ↓
 JavaScript         Vue
       │             │
       └──────┬──────┘
              ↓
       Laravel REST API
              │
              ↓
          Blog SPA
              │
       ┌──────┼──────┐
       ↓      ↓      ↓
     Pinia  React  Livewire

Sử dụng Cloudflare Workers (gói Miễn phí vô cùng rộng rãi, cho phép 100.000 yêu cầu/ngày) làm "trạm trung chuyển" là giải pháp bảo mật tối ưu nhất.

Người dùng xem bằng DevTools (F12) chỉ thấy URL của Cloudflare Worker chứ hoàn toàn không thấy Gemini API Key.

1. Bước 1: Tạo tài khoản & Worker trên Cloudflare: Miễn phí & không cần thẻ tín dụng.

1. Truy cập Cloudflare.com và đăng ký một tài khoản miễn phí.
2. Tại menu bên trái, chọn Build >&Workers & Pages > nhấn Create application > chọn Create Worker.(có thể chọn Hello World rồi sửa code sau)
3. Đặt tên cho Worker (ví dụ: my-gemini-proxy) rồi nhấn Deploy.

2. Bước 2: Giấu API Key vào biến môi trường (Environment Variable):

1. Sau khi Deploy thành công, nhấn vào Settings của Worker đó.
2. Chọn mục Variables and Secrets (hoặc Variables) ở menu bên trái.
3. Tại phần Secrets, nhấn Add variable:
   • Variable name: GEMINI_API_KEY
   • Value: Dán Gemini API Key của bạn vào đây (lấy trong trang&https://aistudio.google.com/)
4. Nhấn Encrypt and Save (Mã hóa và Lưu). Lúc này Key đã được lưu an toàn phía Server của Cloudflare.

3. Bước 3: Viết mã xử lý cho Cloudflare Worker: Nhận Prompt & Gọi Gemini.

1. Quay lại trang quản lý Worker, chọn Edit code (hoặc nút Quick Edit ở góc trên bên phải).
2. Xóa toàn bộ đoạn mã mặc định và dán đoạn mã bên dưới vào:
3. Ghi chú: Gemini lỗi quá nên đổi sang Groq dùng model OpenAI

export default {

  async fetch(request, env) {

    // 1. Cho phép tất cả Domain & Method kết nối

    const corsHeaders = {

      "Access-Control-Allow-Origin": "*",

      "Access-Control-Allow-Methods": "*",

      "Access-Control-Allow-Headers": "*",

    };

    // 2. Xử lý Preflight CORS thành công lập tức

    if (request.method === "OPTIONS") {

      return new Response(null, { status: 204, headers: corsHeaders });

    }

    // 3. Đọc prompt từ mọi nguồn (POST Body hoặc GET Query trên URL)

    let userPrompt = "";

    try {

      if (request.method === "POST") {

        const body = await request.json();

        userPrompt = body.prompt || body.message || body.text || "";

      } else {

        const url = new URL(request.url);

        userPrompt = url.searchParams.get("prompt") || "";

      }

    } catch (e) {

      userPrompt = "";

    }

    // 4. Khi nhấn Send trên tab Test của Cloudflare hoặc mở link trực tiếp trên trình duyệt

    if (!userPrompt) {

      return new Response("Worker đang chạy ngon lành! Không còn lỗi 405.", {

        status: 200,

        headers: { ...corsHeaders, "Content-Type": "text/plain; charset=utf-8" }

      });

    }

    const apiKey = env.GROQ_API_KEY;

    if (!apiKey) {

      return new Response(JSON.stringify({ error: "Chưa cấu hình GROQ_API_KEY trong Variables" }), {

        status: 500,

        headers: { ...corsHeaders, "Content-Type": "application/json" }

      });

    }

    // 5. Gửi request sang Groq API

    try {

      const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {

        method: "POST",

        headers: {

          "Authorization": `Bearer ${apiKey}`,

          "Content-Type": "application/json"

        },

        body: JSON.stringify({

          model: "openai/gpt-oss-120b",

          messages: [

            { role: "system", content: "Bạn là trợ lý AI trên lophocvitinh.com. Hãy trả lời ngắn gọn bằng tiếng Việt." },

            { role: "user", content: userPrompt }

          ]

        })

      });

      const data = await response.json();

      if (data.error) {

        return new Response(JSON.stringify({ error: data.error.message }), {

          status: 400,

          headers: { ...corsHeaders, "Content-Type": "application/json" }

        });

      }

      const text = data.choices[0]?.message?.content || "Không có phản hồi";

      return new Response(JSON.stringify({

        candidates: [{ content: { parts: [{ text: text }] } }]

      }), {

        headers: { ...corsHeaders, "Content-Type": "application/json" }

      });

    } catch (err) {

      return new Response(JSON.stringify({ error: err.message }), {

        status: 500,

        headers: { ...corsHeaders, "Content-Type": "application/json" }

      });

    }

  }

};

1. Nhấn Save and Deploy.
2. Copy lại đường dẫn Worker của bạn (ví dụ: [https://my-gemini-proxy.your-subdomain.workers.dev](https://my-gemini-proxy.your-subdomain.workers.dev))).

4. Bước 4: Cập nhật JavaScript trên giao diện Blogger: Cập nhật Front-end Blogger.

<div class="ai-search-container">
  <input type="text" id="ai-prompt-input" placeholder="Hỏi AI bất cứ điều gì..." />
  <button id="ai-submit-btn" onclick="sendPromptToAI()">Hỏi AI</button>
</div>

<div id="ai-response-box" style="margin-top: 15px; padding: 12px; border: 1px solid #ddd; background: #f9f9f9; display: none;">
  <strong style="color: #333;">Trả lời từ AI:</strong>
  <div id="ai-output" style="margin-top: 8px; white-space: pre-wrap;"></div>
</div>

<script>
async function sendPromptToAI() {
  const promptInput = document.getElementById('ai-prompt-input').value.trim();
  const outputBox = document.getElementById('ai-output');
  const responseContainer = document.getElementById('ai-response-box');
  const submitBtn = document.getElementById('ai-submit-btn');

  if (!promptInput) {
    alert('Vui lòng nhập nội dung câu hỏi!');
    return;
  }

  const WORKER_URL = "https://my-gemini-proxy.email.workers.dev/";

  responseContainer.style.display = 'block';
  outputBox.innerText = 'AI đang suy nghĩ, vui lòng đợi...';
  submitBtn.disabled = true;

  try {
    const response = await fetch(WORKER_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: promptInput })
    });

    const data = await response.json();

    if (data.error) {
      outputBox.innerText = 'Lỗi: ' + data.error;
    } else if (data.candidates && data.candidates[0]?.content?.parts[0]?.text) {
      outputBox.innerText = data.candidates[0].content.parts[0].text;
    } else {
      outputBox.innerText = 'Không nhận được phản hồi hợp lệ từ AI.';
    }
  } catch (error) {
    console.error('Lỗi kết nối:', error);
    outputBox.innerText = 'Đã xảy ra lỗi kết nối. Vui lòng thử lại!';
  } finally {
    submitBtn.disabled = false;
  }
}
</script>

Kết quả sau khi thiết lập:

• Khi người dùng mở DevTools (F12) trên trang Blogger của bạn, họ chỉ thấy duy nhất yêu cầu POST gửi tới WORKER_URL.
• API Key nằm an toàn trong Secrets của Cloudflare.
• Tên miền ngoài list allowedOrigin sẽ bị chặn ngay bởi cơ chế CORS của Worker, tránh tình trạng ai đó copy URL Worker của bạn đi dán vào trang của họ.

Electron là một framework mã nguồn mở cho phép bạn xây dựng ứng dụng desktop đa nền tảng (Windows, macOS, Linux) chỉ với JavaScript, HTML và CSS, bằng cách kết hợp Chromium và Node.js trong cùng một môi trường.

Nó giúp lập trình viên web dễ dàng tạo ứng dụng desktop mà không cần học thêm ngôn ngữ native như C++ hay Swift.

🔑 Đặc điểm chính của Electron

• Cross-platform: Chạy trên Windows, macOS, Linux với cùng một codebase.

• Kết hợp Chromium + Node.js:

  • Chromium để render giao diện (HTML, CSS, JS).

  • Node.js để xử lý backend, truy cập hệ thống file, API OS.

• Mã nguồn mở: Được duy trì bởi cộng đồng dưới OpenJS Foundation.

• Hệ sinh thái phong phú: Tích hợp dễ dàng với React, Vue, Angular, TypeScript, Tailwind CSS, v.v.

• Tính năng hỗ trợ:

  • Auto-update ứng dụng.

  • Crash reporting.

  • Tạo installer (.dmg, .msi, .rpm).

  • Phân phối qua Mac App Store, Microsoft Store, Snap Store.

📦 Ứng dụng nổi tiếng dùng Electron

• Visual Studio Code – IDE phổ biến nhất hiện nay.

• Slack – ứng dụng chat cho doanh nghiệp.

• Discord – nền tảng cộng đồng gamer.

• Skype – ứng dụng gọi video.

• Figma – công cụ thiết kế UI/UX.

⚙️ Cách hoạt động

Electron có hai tiến trình chính:

• Main Process: Chạy Node.js, quản lý cửa sổ, menu, API hệ điều hành.

• Renderer Process: Chạy Chromium, render giao diện web.

Ví dụ khởi tạo ứng dụng Electron:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

📊 Ưu và nhược điểm

Bạn có muốn mình phân tích sâu hơn về ứng dụng thực tế của Electron hay so sánh Electron vs Native để thấy rõ khi nào nên chọn Electron?

Trong các bài trước của khóa Laravel 13, chúng ta đã làm việc chủ yếu với:

• PHP

• Laravel

• Blade

• Database

• Eloquent

• REST API

• Laravel Sanctum

Những thành phần này chủ yếu xử lý phía Server.

Nhưng một ứng dụng web hiện đại không chỉ có Server.

Khi người dùng:

• bấm nút,

• mở Modal,

• gửi Form,

• tìm kiếm,

• lọc dữ liệu,

• upload ảnh,

• tải dữ liệu không cần reload trang,

• cập nhật giao diện ngay lập tức,

thì chúng ta cần đến JavaScript.

Vì vậy, trước khi học Vue, React hoặc các Frontend Framework khác, chúng ta cần nắm được JavaScript hiện đại.

1. JavaScript là gì?

JavaScript là ngôn ngữ lập trình thường được sử dụng để xây dựng các tương tác phía trình duyệt.

Ví dụ một trang Laravel có nút:

<button id="btnHello" class="px-4 py-2 text-white rounded shadow hover:bg-blue-600">
    Click me
</button>

JavaScript có thể bắt sự kiện click:

document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('#btnHello');
    
    if (button) {
        button.addEventListener('click', () => {
            alert('Hello Laravel!');
        });
    }
});

Khi người dùng click vào nút, JavaScript được thực thi ngay trên trình duyệt.

Ghi chú:&

nhớ chạy npm run dev trước và phải có dòng load DOM vì app.js đặt trước thẻ body

Có thể hình dung:

                WEB APPLICATION
                       │
          ┌────────────┴────────────┐
          │                         │
       SERVER                    BROWSER
          │                         │
       Laravel                 JavaScript
          │                         │
       PHP/DB              HTML/CSS/JS
          │                         │
          └───────────┬─────────────┘
                      │
                   HTTP

Laravel xử lý phần Server.

JavaScript xử lý phần tương tác phía Browser.

Ghi chú: Tailwind có chế độ Preflight đưa tất cả HTML element về dạng trong suốt nên khi tạo button phải có bg....

2. Laravel không thay thế JavaScript

Một hiểu lầm phổ biến của người mới học Laravel là:

"Đã dùng Laravel thì không cần JavaScript."

Điều này không đúng.

Laravel và JavaScript giải quyết những vấn đề khác nhau.

Ví dụ:

Laravel
   │
   ├── Route
   ├── Controller
   ├── Model
   ├── Database
   ├── Authentication
   └── REST API

JavaScript
   │
   ├── Click
   ├── Form interaction
   ├── DOM
   ├── AJAX / Fetch
   ├── API request
   └── Dynamic UI

Một ứng dụng Laravel thực tế thường sử dụng cả hai.

3. Ví dụ Laravel + JavaScript

Giả sử chúng ta có một trang quản lý bài viết.

Laravel trả về:

<button id="deletePost" class="px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600">
    Xóa bài viết
</button>

JavaScript có thể xử lý hành động:

const button = document.querySelector('#deletePost');

button.addEventListener('click', () => {
    const confirmed = confirm('Bạn có chắc muốn xóa?');

    if (confirmed) {
        console.log('Delete post');
    }
});

Trong ví dụ này:

User
 │
 │ Click
 ▼
JavaScript
 │
 │ xử lý interaction
 ▼
Laravel API
 │
 │ xử lý request
 ▼
Database

Đây là mô hình mà chúng ta sẽ sử dụng rất nhiều trong các bài sau.

4. JavaScript trong Laravel 13 nằm ở đâu?

Trong một project Laravel hiện đại, JavaScript thường nằm trong:

resources/
└── js/

Ví dụ:

resources/
└── js/
    ├── app.js
    └── bootstrap.js

Trong đó:

app.js

là một trong những file JavaScript chính của ứng dụng.

Chúng ta có thể viết JavaScript trực tiếp trong file này.

Ví dụ:

console.log('Laravel + JavaScript');

Sau đó Laravel sử dụng Vite để xử lý asset frontend trong quá trình phát triển và build ứng dụng.

5. Vite là gì?

Trong các project Laravel hiện đại, Vite đóng vai trò là công cụ frontend build/development.

Có thể hình dung:

JavaScript
CSS
Images
   │
   ▼
  Vite
   │
   ▼
Browser

Vite hỗ trợ:

• Development server

• Module JavaScript

• Import / Export

• CSS processing

• Hot Module Replacement

• Build production

Ví dụ trong resources/js/app.js:

import './bootstrap';

console.log('Hello Laravel');

Vite sẽ xử lý module JavaScript và cung cấp chúng cho ứng dụng.

6. JavaScript truyền thống và JavaScript hiện đại

JavaScript đã phát triển rất nhiều.

Cách viết cũ có thể như:

var name = 'Laravel';

function hello(name) {
    return 'Hello ' + name;
}

JavaScript hiện đại cung cấp nhiều cú pháp tiện lợi hơn:

const name = 'Laravel';

const hello = (name) => {
    return `Hello ${name}`;
};

Chúng ta sẽ học những tính năng này trong Bài 02 — ES6+.

Một số tính năng quan trọng:

ES6+
 │
 ├── let / const
 ├── Arrow Function
 ├── Template Literal
 ├── Destructuring
 ├── Spread Operator
 ├── Default Parameter
 ├── Optional Chaining
 ├── Nullish Coalescing
 ├── Modules
 ├── Promise
 └── Async / Await

Đây chính là nền tảng cho Vue và React.

7. JavaScript và DOM

DOM (Document Object Model) là mô hình mà trình duyệt sử dụng để biểu diễn HTML của trang web.

Ví dụ:

<h1 id="title">
    Laravel 13
</h1>

JavaScript có thể lấy phần tử này:

const title = document.querySelector('#title');

Sau đó thay đổi nội dung:

title.textContent = 'JavaScript';

Kết quả trên trình duyệt:

JavaScript

Chúng ta có thể thay đổi:

• Nội dung

• Class

• Attribute

• Style

• Element

• Form

• Event

Ví dụ:

title.classList.add('active');

8. JavaScript xử lý Event

Một ứng dụng web có rất nhiều Event.

Ví dụ:

click
submit
change
input
keydown
keyup
mouseover
load

Ví dụ:

<button id="btn">
    Click
</button>

JavaScript:

const button = document.querySelector('#btn');

button.addEventListener('click', () => {
    console.log('Button clicked');
});

Mô hình:

User
 │
 │ click
 ▼
Browser
 │
 ▼
JavaScript Event
 │
 ▼
Callback Function

Đây là kiến thức rất quan trọng.

Vue và React sau này vẫn làm việc với Event, chỉ khác cách tổ chức và cách chúng ta mô tả giao diện.

9. JavaScript xử lý Form

Ví dụ một Form đăng nhập:

<form id="loginForm" class="space-y-4 max-w-sm mx-auto p-6 bg-white shadow rounded-lg">
    <div>
        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
        <input
            type="email"
            id="email"
            class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            placeholder="you@example.com"
        >
    </div>

    <div>
        <label for="password" class="block text-sm font-medium text-gray-700">Mật khẩu</label>
        <input
            type="password"
            id="password"
            class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            placeholder="••••••••"
        >
    </div>

    <button type="submit" class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow">
        Login
    </button>
</form>

JavaScript có thể bắt sự kiện submit:

const form = document.querySelector('#loginForm');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    console.log('Form submitted');
});

event.preventDefault() ngăn trình duyệt thực hiện hành động mặc định của Form.

Từ đây chúng ta có thể:

Form
 │
 ▼
JavaScript
 │
 ├── Validate
 ├── Collect data
 ├── Convert to JSON
 └── Send API request

Đây chính là nền tảng cho các Form AJAX/API sau này.

10. JavaScript gọi Laravel API

Đây là phần cực kỳ quan trọng của khóa học.

Laravel có thể cung cấp API:

GET /api/posts

JavaScript có thể gọi API đó bằng fetch():

fetch('/api/posts')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

Mô hình:

Browser
   │
   │ fetch()
   ▼
Laravel API
   │
   ▼
Controller
   │
   ▼
Eloquent
   │
   ▼
Database

Sau đó dữ liệu quay trở lại:

Database
   │
   ▼
Eloquent
   │
   ▼
Laravel API
   │
   ▼
JSON
   │
   ▼
JavaScript
   │
   ▼
HTML

Trong các bài tiếp theo chúng ta sẽ học kỹ hơn về quy trình này.

11. JSON là cầu nối giữa JavaScript và Laravel API

Laravel API thường trả dữ liệu dưới dạng JSON.

Ví dụ:

{
    "id": 1,
    "title": "Laravel 13",
    "status": "published"
}

JavaScript có thể nhận dữ liệu:

fetch('/api/posts/1')
    .then(response => response.json())
    .then(post => {
        console.log(post.title);
    });

Kết quả:

Có thể hình dung:

Laravel
   │
   │ JSON
   ▼
JavaScript

JSON trở thành một trong những định dạng dữ liệu quan trọng nhất khi xây dựng ứng dụng Frontend + Backend.

Chú ý: cấu trúc json của các phần gần cuối khóa laravel có thể là:&post.data.title

12. Từ JavaScript đến Vue

Sau khi học JavaScript thuần, chúng ta sẽ gặp một vấn đề.

Khi ứng dụng lớn hơn, JavaScript bắt đầu có nhiều phần:

JavaScript
│
├── DOM
├── Event
├── Form
├── API
├── State
├── Modal
├── Search
├── Pagination
└── UI

Nếu tất cả nằm trong một vài file JavaScript lớn, việc quản lý ứng dụng sẽ trở nên khó khăn.

Đây là lúc các Frontend Framework trở nên hữu ích.

Trong khóa học này, chúng ta đi theo hướng:

JavaScript
     │
     ▼
   Vue
     │
     ▼
Vue + Laravel API
     │
     ▼
   Blog SPA

Sau đó mới mở rộng sang:

React
  │
  ▼
React + Laravel API

và:

Livewire
  │
  ▼
Laravel + Livewire

13. Tại sao phải học JavaScript trước Vue?

Vue không phải là một ngôn ngữ hoàn toàn mới.

Vue được xây dựng trên nền tảng JavaScript.

Ví dụ JavaScript:

const name = 'Laravel';

Vue:

const name = ref('Laravel');

JavaScript:

button.addEventListener('click', () => {
    count++;
});

Vue:

const count = ref(0);

function increment() {
    count.value++;
}

Nếu chưa hiểu:

• biến

• function

• object

• array

• event

• module

• Promise

• async/await

thì khi học Vue sẽ rất dễ trở thành học thuộc cú pháp.

Mục tiêu của phần này là tránh điều đó.

14. JavaScript → Vue → React

Một trong những mục tiêu của khóa học là giúp người học nhìn thấy mối quan hệ giữa các công nghệ.

             JavaScript
                  │
        ┌─────────┴─────────┐
        │                   │
       Vue                React
        │                   │
        └─────────┬─────────┘
                  │
             Laravel API

Vue và React có nhiều khái niệm tương đồng:

Component
State
Event
Props
API
Form
Authentication

Nhưng cú pháp và hệ sinh thái khác nhau.

Vì vậy, học JavaScript trước sẽ giúp chúng ta dễ chuyển đổi giữa các Framework hơn.

15. JavaScript và Laravel Blade

Không phải ứng dụng Laravel nào cũng cần Vue hoặc React.

Một ứng dụng có thể sử dụng:

Laravel
   │
   └── Blade
         │
         └── JavaScript

Ví dụ:

Admin Dashboard
      │
      ├── Blade
      ├── Bootstrap
      └── JavaScript

Với những tương tác đơn giản, JavaScript thuần có thể đã đủ.

Không nhất thiết phải biến mọi trang thành SPA.

16. Khi nào JavaScript thuần là đủ?

Ví dụ một trang có:

• Modal

• Dropdown

• Confirm Delete

• Image Preview

• Character Counter

• Form Validation

• Toggle Menu

Chúng ta hoàn toàn có thể sử dụng JavaScript.

Ví dụ:

const preview = document.querySelector('#preview');
const input = document.querySelector('#image');

input.addEventListener('change', () => {
    const file = input.files[0];

    if (!file) {
        return;
    }

    preview.src = URL.createObjectURL(file);
});

Không cần Vue.

Không cần React.

Không cần SPA.

17. Khi nào Vue trở nên hữu ích?

Nếu giao diện có nhiều trạng thái và tương tác:

Search
Filter
Pagination
Modal
Form
API
Loading
Error
Authentication
User State

thì việc quản lý bằng JavaScript thuần có thể trở nên phức tạp.

Vue cung cấp cách tổ chức ứng dụng theo Component.

Ví dụ:

Blog
│
├── Navbar
├── SearchBox
├── CategoryFilter
├── PostList
│   └── PostCard
├── Pagination
└── Footer

Mỗi thành phần có thể được tổ chức riêng.

18. Laravel API + Vue

Trong phần 3 của khóa học, chúng ta sẽ kết nối hai phía:

             LARAVEL
                │
        ┌───────┴────────┐
        │                │
    REST API          Database
        │
        │ JSON
        ▼
       VUE
        │
        ├── Components
        ├── Router
        ├── Pinia
        └── UI

Ví dụ:

Vue
 │
 │ GET /api/posts
 ▼
Laravel
 │
 ▼
PostController
 │
 ▼
Post Model
 │
 ▼
MySQL

Kết quả:

{
    "data": [
        {
            "id": 1,
            "title": "Laravel 13"
        },
        {
            "id": 2,
            "title": "JavaScript"
        }
    ]
}

Vue nhận JSON và hiển thị danh sách.

19. Lộ trình JavaScript trong khóa học

Trong phần này, chúng ta sẽ đi từ cơ bản đến kết nối Laravel API:

Bài 01
JavaScript trong Laravel
       │
       ▼
Bài 02
ES6+
       │
       ▼
Bài 03
Array & Object
       │
       ▼
Bài 04
Module
       │
       ▼
Bài 05
Promise & Async/Await
       │
       ▼
Bài 06
Fetch API
       │
       ▼
Bài 07
JSON & HTTP
       │
       ▼
Bài 08
JavaScript + Laravel REST API

Sau Bài 08, người học sẽ có nền tảng để bắt đầu:

             VUE
              │
              ▼
       VUE + LARAVEL API
              │
              ▼
          BLOG SPA

20. JavaScript hiện đại cần học những gì?

Có thể chia thành 5 nhóm chính.

Nhóm 1 — Syntax

let
const
arrow function
template literal
destructuring
spread
rest
optional chaining

Nhóm 2 — Data

Array
Object
Map
Set
JSON

Nhóm 3 — Module

import
export

Nhóm 4 — Asynchronous JavaScript

Promise
async
await
try / catch
Fetch API

Nhóm 5 — Web API

DOM
Event
Form
Fetch
Storage
URL
File

Đây là những kiến thức chúng ta sẽ sử dụng xuyên suốt phần Frontend.

21. JavaScript không chỉ dành cho Frontend

JavaScript ngày nay không chỉ chạy trong Browser.

Có thể sử dụng JavaScript với:

Browser
   │
   └── Frontend

Node.js
   │
   └── Backend

Vue
   │
   └── Frontend Framework

React
   │
   └── Frontend Library

Electron
   │
   └── Desktop Application

React Native
   │
   └── Mobile Application

Trong khóa học này, chúng ta tập trung vào JavaScript phía Browser để phục vụ:

Laravel
   +
JavaScript
   +
Vue
   +
React

22. Bài tập thực hành

Tạo một file:

resources/js/app.js

Thêm:

console.log('JavaScript is working!');

Sau đó tạo một Blade view:

resources/views/javascript.blade.php

Nội dung:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>JavaScript + Laravel</title>

    @vite(['resources/js/app.js'])
</head>

<body>

    <h1 id="title">
        Laravel 13
    </h1>

    <button id="changeTitle" class="px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600">
        Change Title
    </button>

</body>
</html>

Trong app.js:

const button = document.querySelector('#changeTitle');

button.addEventListener('click', () => {
    const title = document.querySelector('#title');

    title.textContent = 'JavaScript is working!';
});&

Khi click:

Laravel 13
     │
     │ click
     ▼
JavaScript
     │
     ▼
DOM
     │
     ▼
JavaScript is working!

Route:

Route::view('/javascript', 'javascript');

23. Kiểm tra kết quả

Mở trang trong trình duyệt.

Ban đầu:

Laravel 13

[ Change Title ]

Sau khi click:

JavaScript is working!

[ Change Title ]

Mở Developer Tools → Console.

Chúng ta cũng sẽ thấy:

JavaScript is working!

Nếu thấy dòng này, JavaScript đã được load thành công.

24. Kiến trúc chúng ta sẽ xây dựng

Sau toàn bộ khóa học, chúng ta sẽ đi từ:

                LARAVEL 13
                    │
          ┌─────────┴─────────┐
          │                   │
        Blade                API
          │                   │
      JavaScript              │
          │                   │
          ▼                   ▼
         Vue ◄──────────── Laravel
          │
      Vue Router
          │
        Pinia
          │
          ▼
       Blog SPA

Sau đó mở rộng:

              Laravel API
                   │
          ┌────────┼────────┐
          │        │        │
         Vue      React   JavaScript
          │        │
          └────────┘
                   │
              Frontend

Và cuối cùng so sánh với:

Laravel
   │
   ├── Blade
   │
   ├── Livewire
   │
   ├── Vue
   │
   └── React

Mục tiêu không phải là học thật nhiều Framework.

Mục tiêu là hiểu vai trò của từng công nghệ và biết khi nào chúng ta cần sử dụng chúng.

25. Tổng kết

Trong bài đầu tiên, chúng ta đã xác định vị trí của JavaScript trong hệ sinh thái Laravel.

Laravel
   │
   ├── Server
   │
   ├── Database
   │
   ├── REST API
   │
   └── Blade
          │
          ▼
      JavaScript
          │
     ┌────┴────┐
     ▼         ▼
    Vue       React
     │
     ▼
 Laravel API

Những kiến thức quan trọng cần nhớ:

• Laravel xử lý phần Server.

• JavaScript xử lý tương tác phía Browser.

• Vite hỗ trợ quá trình phát triển và build frontend.

• JavaScript có thể thao tác DOM và xử lý Event.

• JavaScript có thể gửi request tới Laravel API.

• JSON là định dạng dữ liệu quan trọng giữa Frontend và Backend.

• Vue và React đều dựa trên nền tảng JavaScript.

• Không phải ứng dụng Laravel nào cũng cần Vue hoặc React.

• JavaScript thuần vẫn rất hữu ích trong các ứng dụng Blade.

• Học JavaScript trước giúp việc học Vue và React dễ hiểu hơn.

Ở bài tiếp theo, chúng ta sẽ bắt đầu đi vào ES6+ — tập hợp những cú pháp và tính năng JavaScript hiện đại sẽ xuất hiện liên tục trong Vue, React và các ứng dụng Frontend hiện đại.

Bài 02 — ES6+

Nếu cập nhật theo Laravel 12 LTS (2026) thì mình sẽ chia thành các phần như sau để người học đi từ PHP Core → Laravel → Triển khai dự án thực tế.

Tiếp nối khóa "PHP Core 8.2 — Tự học PHP từ ZERO đến làm web động"

📘 PHẦN 1 — LÀM QUEN VỚI LARAVEL

Bài 01 — Laravel là gì?

• Vì sao Laravel ra đời
• MVC trong Laravel
• Composer
• Artisan CLI
• Cấu trúc thư mục

Bài 02 — Cài đặt Laravel

• Composer
• Laravel Installer
• laravel new
• php artisan serve
• Cấu hình VS Code

Bài 03 — Routing

• routes/web.php
• GET
• POST
• PUT
• DELETE
• Route Parameters
• Named Route

Bài 04 — Controller

• Tạo Controller
• Action
• Resource Controller
• Truyền dữ liệu

Bài 05 — View Blade

• Blade
• Layout
• Include
• Section
• Yield
• Component

📘 PHẦN 2 — DATABASE

Bài 06 — Cấu hình Database

• .env
• MySQL
• php artisan migrate

Bài 07 — Migration

• Tạo bảng
• Kiểu dữ liệu
• foreignId
• rollback

Bài 08 — Seeder

• Seeder
• Faker
• DatabaseSeeder

Bài 09 — Factory

• Factory
• Fake Data

📘 PHẦN 3 — ELOQUENT ORM

Bài 10 — Model

• Model
• Table
• Fillable
• Guarded

Bài 11 — CRUD bằng Eloquent

• create()
• all()
• find()
• update()
• delete()

Bài 12 — Query Builder

• where
• orWhere
• orderBy
• latest
• paginate

📘 PHẦN 4 — RELATIONSHIP

Bài 13 — One To One

Bài 14 — One To Many

Bài 15 — Many To Many

Bài 16 — Has Many Through

Bài 17 — Polymorphic

📘 PHẦN 5 — FORM

Bài 18 — Request

Bài 19 — Validation

Bài 20 — Upload File

📘 PHẦN 6 — AUTHENTICATION

Bài 21 — Laravel Breeze

Bài 22 — Login

Bài 23 — Register

Bài 24 — Middleware

Bài 25 — Authorization

📘 PHẦN 7 — CRUD DỰ ÁN

Bài 26 — CRUD Categories

• Resource Controller
• Validation
• Search
• Pagination

Bài 27 — CRUD Posts

• Relationship
• Upload Image
• Validation
• Category
• User

Bài 28 — CRUD Users

• Danh sách User
• Đổi Role
• Khóa tài khoản
• Reset Password

Bài 29 — Search & DataTables

• Search
• Sort
• Filter
• Pagination
• DataTables.net

Bài 30 — Soft Delete

• delete()
• restore()
• forceDelete()
• Trash

📘 PHẦN 8 — NÂNG CAO

Bài 31 — Accessor & Mutator

Bài 32 — Local Scope & Global Scope

Bài 33 — Observer

Bài 34 — Event & Listener

Bài 35 — Queue

Bài 36 — Mail

Bài 37 — Notification

Bài 38 — Cache

Bài 39 — Storage

Bài 40 — Logging & Debug

• Log
• Debugbar
• Telescope (Giới thiệu)

📘 PHẦN 9 — REST API

Bài 41 — REST API

Bài 42 — API Resource

Bài 43 — Sanctum

Bài 44 — API Authentication

📘 PHẦN 10 — TRIỂN KHAI

Bài 45 — Deploy Shared Hosting

Bài 46 — Deploy VPS

Bài 47 — Nginx

Bài 48 — Queue Worker & Scheduler

Bài 49 — Production Tips

• Cache
• Optimize
• ENV
• APP_DEBUG
• Security

Bài 50 — Tổng kết dự án Blog CMS

• Tổng hợp kiến thức
• Tối ưu source
• Chuẩn bị triển khai thực tế

📘 BONUS

Kiểm thử với PHPUnit

• Tạo Test
• Feature Test
• Test REST API
• assertOk()
• assertStatus(200)
• assertJson()

🎯 DỰ ÁN CUỐI KHÓA

• Login / Register
• Dashboard
• CRUD Categories
• CRUD Posts
• CRUD Users
• Upload Image
• Search
• DataTables
• Pagination
• Soft Delete
• Roles & Permissions
• REST API
• Deploy lên Hosting/VPS

• PHP Core (35 bài) → học ngôn ngữ.
• Laravel (51 bài) → học framework và hoàn thành một dự án thực tế.
• Bonus PHPUnit → giới thiệu kiểm thử cơ bản và test REST API.

Bonus PHPUnit → chỉ 01 bài để giới thiệu kiểm thử, không làm khóa học quá nặng nhưng vẫn đủ để người học biết cách kiểm tra API và các chức năng cơ bản.

Đọc thêm:

1. ✨📚 Cách dùng các thư viện cũ trong Laravel 13 🛠️
2. 🎨 Laravel 13: Hướng Dẫn Sắp Xếp & Quản Lý Assets 📂
3. 📘 VITE TRONG LARAVEL & ỨNG DỤNG CHO PHP / CODEIGNITER 3.x
4. Giao diện dùng Blade Components
5. 🚀Laravel 12 (2026) — Viết hàm riêng trong Laravel và chạy autoload để dùng
6. 🧠Tư duy kiểm soát vòng lặp như dân PRO🔄
7. Multi-Cursor / Select All Occurrences trong VS Code

Sau 49 bài, chúng ta đã đi từ những khái niệm đầu tiên của Laravel đến việc xây dựng một Blog CMS hoàn chỉnh.

Trong bài cuối cùng này, chúng ta sẽ không học thêm một tính năng mới.

Thay vào đó, chúng ta sẽ nhìn lại toàn bộ dự án:

• Đã học những gì?

• Các thành phần kết nối với nhau như thế nào?

• Source code cần tối ưu ra sao?

• Cần kiểm tra gì trước khi đưa website lên Internet?

• Một dự án Laravel 13 hoàn chỉnh cần có những thành phần nào?

Đây cũng là bước chuyển từ:

"Học Laravel"

sang:

"Có thể tự xây dựng và triển khai một ứng dụng Laravel thực tế."

1. Dự án Blog CMS đã xây dựng

Trong suốt khóa học, chúng ta xây dựng một hệ thống Blog CMS có các chức năng chính:

                    BLOG CMS
                       │
        ┌──────────────┼──────────────┐
        │              │              │
     FRONTEND        ADMIN          API
        │              │              │
        ▼              ▼              ▼
     Blog list      Dashboard       REST API
     Post detail    Categories      Sanctum
     Category       Posts           Resources
     Search         Users           Authentication
        │              │              │
        └──────────────┼──────────────┘
                       │
                    DATABASE
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
        Users      Categories      Posts

Các thành phần chính gồm:

Authentication
Authorization
Users
Categories
Posts
Relationships
Validation
Upload Image
Search
Pagination
DataTables
Soft Delete
Events
Listeners
Queue
Mail
Notification
Cache
Storage
Logging
REST API
API Resource
Sanctum
Deployment
Nginx
Queue Worker
Scheduler
Production

Đây không còn là một ví dụ CRUD đơn giản.

Nó đã gần với cấu trúc của một ứng dụng web thực tế.

2. Nhìn lại toàn bộ khóa Laravel 13

PHẦN 1 — Làm quen với Laravel

Chúng ta bắt đầu bằng những thành phần cơ bản:

Laravel
   │
   ├── Composer
   ├── Artisan
   ├── MVC
   ├── Routing
   ├── Controller
   └── Blade

Ví dụ một request:

Browser
   │
   ▼
Route
   │
   ▼
Controller
   │
   ▼
Model
   │
   ▼
Database
   │
   ▼
Controller
   │
   ▼
Blade
   │
   ▼
HTML
   │
   ▼
Browser

Đây là flow quan trọng nhất cần hiểu.

3. Database và Migration

Chúng ta sử dụng Migration để quản lý cấu trúc database.

Ví dụ:

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

    $table->string('name');
    $table->string('slug')->unique();
    $table->text('description')->nullable();
    $table->boolean('is_active')->default(true);

    $table->timestamps();
});

Thay vì tạo bảng thủ công bằng phpMyAdmin, cấu trúc database được lưu trong source code.

Điều này rất quan trọng khi làm việc nhóm hoặc triển khai lên server.

4. Seeder và Factory

Seeder giúp tạo dữ liệu ban đầu:

php artisan db:seed

Factory giúp tạo dữ liệu giả:

Post::factory()->count(50)->create();

Nhờ đó chúng ta có thể nhanh chóng tạo:

100 Users
100 Categories
1000 Posts

để kiểm tra:

• Pagination

• Search

• DataTables

• Performance

• Relationship

5. Eloquent ORM

Eloquent là một trong những thành phần quan trọng nhất của Laravel.

Ví dụ:

$posts = Post::latest()->get();

Thay vì viết SQL trực tiếp:

SELECT *
FROM posts
ORDER BY created_at DESC;

Eloquent giúp code dễ đọc hơn.

Ví dụ:

$post = Post::find(1);

$post->update([
    'title' => 'Laravel 13'
]);

Xóa:

$post->delete();

6. Relationship

Blog CMS sử dụng nhiều Relationship.

Ví dụ:

User
 │
 └── hasMany()
        │
        ▼
      Posts

Category
   │
   └── hasMany()
          │
          ▼
        Posts

Và:

Post
 │
 ├── belongsTo(User)
 │
 └── belongsTo(Category)

Trong Model:

public function user()
{
    return $this->belongsTo(User::class);
}

public function category()
{
    return $this->belongsTo(Category::class);
}

Sau đó:

$post->user->name;

$post->category->name;

Đây chính là sức mạnh của Eloquent Relationship.

7. Request và Validation

Không nên tin dữ liệu từ người dùng.

Ví dụ:

$request->validate([
    'title' => ['required', 'string', 'max:255'],
    'content' => ['required'],
    'category_id' => ['required', 'exists:categories,id'],
]);

Validation giúp đảm bảo dữ liệu trước khi đưa vào database.

Đối với upload:

'image' => [
    'nullable',
    'image',
    'mimes:jpg,jpeg,png,webp',
    'max:3072',
],

Validation phải được thực hiện ở server.

JavaScript phía client chỉ nên đóng vai trò hỗ trợ trải nghiệm người dùng.

8. Authentication

Breeze giúp chúng ta xây dựng:

Register
Login
Logout
Password
Session
Authentication

Sau khi đăng nhập:

auth()->user()

có thể lấy thông tin user hiện tại.

Ví dụ:

$user = auth()->user();

echo $user->name;

9. Authorization

Authentication trả lời:

Người này đã đăng nhập chưa?

Authorization trả lời:

Người này có quyền thực hiện hành động này không?

Ví dụ:

User
 ├── xem bài viết
 └── không được quản lý user

Admin
 ├── xem bài viết
 ├── quản lý category
 ├── quản lý post
 └── quản lý user

Đây là lý do chúng ta sử dụng:

• Middleware

• Policy

• Gates

• Role

Không nên chỉ ẩn nút bằng HTML.

Quyền phải được kiểm tra ở server.

10. CRUD Categories

Category là module CRUD đầu tiên của dự án.

Create
Read
Update
Delete

Ngoài ra còn:

Search
Pagination
Validation
Active / Inactive

Model có Scope:

#[Scope]
protected function active(Builder $query): void
{
    $query->where('is_active', true);
}

Sau đó:

Category::active()->get();

Đây là một ví dụ về việc đưa logic truy vấn vào Model thay vì lặp lại trong Controller.

11. CRUD Posts

Post là module trung tâm của Blog CMS.

Một Post có:

title
slug
excerpt
content
image
status
published_at
view_count
user_id
category_id

Quan hệ:

User
  │
  └── Posts

Category
  │
  └── Posts

Post
 ├── User
 └── Category

Controller xử lý:

Create
Edit
Update
Delete
Publish
Upload
Validation
Relationship

12. Blog Frontend

Phần frontend của Blog sử dụng:

BlogController
     │
     ├── index()
     ├── show()
     └── category()

Ví dụ danh sách bài viết:

Post::published()
    ->whereHas('category', fn ($query) => $query->active())
    ->with(['user', 'category'])
    ->latest('published_at')
    ->paginate(10);

Đây là một câu query đã kết hợp:

• Local Scope

• Relationship

• Eager Loading

• Sorting

• Pagination

13. Eager Loading và vấn đề N+1

Một trong những lỗi performance phổ biến:

$posts = Post::all();

foreach ($posts as $post) {
    echo $post->user->name;
}

Có thể dẫn tới rất nhiều query.

Thay vào đó:

$posts = Post::with('user')->get();

Hoặc:

$posts = Post::with([
    'user',
    'category'
])->get();

Nguyên tắc:

Khi biết trước sẽ sử dụng Relationship, hãy cân nhắc eager loading.

14. Search và Pagination

Không nên lấy toàn bộ database:

Post::all();

rồi xử lý bằng PHP khi dữ liệu lớn.

Thay vào đó:

Post::query()
    ->where('title', 'like', "%{$keyword}%")
    ->latest()
    ->paginate(10);

Database xử lý phần lớn công việc.

Ứng dụng chỉ nhận số lượng dữ liệu cần thiết.

15. Soft Delete

Chúng ta đã thêm:

use SoftDeletes;

vào Model.

Khi:

$post->delete();

Post không nhất thiết bị xóa khỏi database.

Nó được đánh dấu bằng:

deleted_at

Có thể lấy lại:

$post->restore();

Xóa vĩnh viễn:

$post->forceDelete();

Đây là cơ chế rất hữu ích cho CMS.

16. Events và Listeners

Event giúp tách các hành động phụ khỏi logic chính.

Ví dụ:

User Register
      │
      ▼
 Registered Event
      │
      ▼
 Listener
      │
      ├── Send Email
      ├── Log
      └── Notification

Controller không nhất thiết phải xử lý tất cả mọi việc.

17. Queue

Một số công việc không cần thực hiện ngay trong HTTP request.

Ví dụ:

Gửi email
Xử lý ảnh
Tạo báo cáo
Gửi notification
Import dữ liệu

Có thể đưa vào Queue:

Request
   │
   ▼
Dispatch Job
   │
   ▼
Response ngay
   │
   │
   ▼
Queue Worker
   │
   ▼
Process Job

Nhờ đó website phản hồi nhanh hơn.

18. Mail và Notification

Laravel cung cấp hệ thống:

Mail
Notification

cho nhiều hình thức thông báo.

Ví dụ:

User đăng ký
      │
      ▼
Notification
      │
      ├── Mail
      ├── Database
      └── các channel khác

Trong dự án thực tế, các tác vụ gửi mail số lượng lớn nên được kết hợp với Queue.

19. Cache

Cache dùng để giảm số lần truy vấn hoặc xử lý dữ liệu.

Ví dụ:

$categories = Cache::remember(
    'blog.categories',
    3600,
    fn () => Category::active()->get()
);

Flow:

Request
   │
   ▼
Cache?
 ┌─┴─┐
Có   Không
│      │
▼      ▼
Data  Database
       │
       ▼
      Cache

Nhưng cache phải có chiến lược invalidation.

Ví dụ khi Category thay đổi:

Cache::forget('blog.categories');

Không nên cache mọi thứ một cách máy móc.

20. Storage

File upload nên được quản lý thông qua Laravel Storage.

Ví dụ:

$path = $request->file('image')
    ->store('posts', 'public');

File có thể được lưu trong disk:

storage/app/public

và tạo symbolic link:

php artisan storage:link

Không nên tự xây dựng hệ thống upload bằng cách xử lý đường dẫn file một cách tùy tiện.

21. Logging và Debug

Khi production, log rất quan trọng.

Ví dụ:

Log::info('Post published', [
    'post_id' => $post->id,
    'user_id' => auth()->id(),
]);

Khi xảy ra lỗi:

Log::error('Post publish failed', [
    'post_id' => $post->id,
]);

Development có thể sử dụng:

dd($data);

hoặc:

dump($data);

Nhưng production phải tránh để debug information xuất hiện cho người dùng.

Laravel 13 cũng cung cấp health route /up, hữu ích cho monitoring và kiểm tra ứng dụng đã boot thành công hay chưa.

22. REST API

Blog CMS của chúng ta không chỉ có giao diện HTML.

Chúng ta còn xây dựng API:

GET
POST
PUT / PATCH
DELETE

Ví dụ:

GET /api/posts
GET /api/posts/{id}
POST /api/posts
PUT /api/posts/{id}
DELETE /api/posts/{id}

API trả về JSON thay vì HTML.

23. API Resource

Không nên trả trực tiếp toàn bộ Model:

return $post;

Đối với API thực tế, nên kiểm soát dữ liệu trả về bằng:

PostResource

Ví dụ:

return new PostResource($post);

Danh sách:

return PostResource::collection($posts);

Resource giúp API có cấu trúc rõ ràng và tránh vô tình trả những dữ liệu không nên public.

24. Sanctum

Sanctum cung cấp cơ chế xác thực cho API.

Flow:

Client
   │
   │ email + password
   ▼
API Login
   │
   ▼
Sanctum
   │
   ▼
Token
   │
   ▼
Client

Các request tiếp theo:

Authorization: Bearer TOKEN

Route private:

Route::middleware('auth:sanctum')->group(function () {

    Route::get('/user', function (Request $request) {
        return $request->user();
    });

});

25. API Authentication

Một API thực tế cần có:

Register
Login
Logout
Current User
Token
Validation
Authorization

Và phải phân biệt:

401 Unauthorized

với:

403 Forbidden

Hiểu đơn giản:

401
→ Chưa xác thực / token không hợp lệ

403
→ Đã xác thực nhưng không có quyền

Đây là nền tảng để xây dựng API cho:

• Mobile App

• SPA

• Frontend JavaScript

• Third-party integrations

26. Deploy

Sau khi hoàn thành source code, ứng dụng phải được đưa lên server.

Kiến trúc phổ biến:

Internet
    │
    ▼
 Domain
    │
    ▼
 Nginx
    │
    ▼
 PHP-FPM
    │
    ▼
 Laravel 13
    │
 ├── MySQL
 ├── Redis / Cache
 ├── Storage
 └── Queue

Laravel 13 yêu cầu PHP tối thiểu 8.3. Khi dùng Nginx, web server phải trỏ vào thư mục public, không phải root của project.

27. Production Environment

Một production .env cơ bản có thể có:

APP_ENV=production
APP_DEBUG=false
APP_URL=https://example.com

Database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=blog_user
DB_PASSWORD=********

Mail:

MAIL_MAILER=smtp
MAIL_HOST=...
MAIL_PORT=587
MAIL_USERNAME=...
MAIL_PASSWORD=...
MAIL_ENCRYPTION=tls

Không commit .env vào Git.

Đặc biệt:

APP_KEY
DB_PASSWORD
MAIL_PASSWORD
API_KEY
TOKEN

đều phải được bảo vệ.

28. Tối ưu Laravel trước khi Deploy

Laravel cung cấp:

php artisan optimize

để cache các thành phần phù hợp cho production.

Có thể xóa cache bằng:

php artisan optimize:clear

Laravel 13 cũng cung cấp các lệnh cache riêng cho:

php artisan config:cache
php artisan event:cache
php artisan route:cache
php artisan view:cache

Các cache này nên được thực hiện trong quy trình deployment, không phải tùy tiện trong lúc development.

29. Composer Production

Khi deploy:

composer install --no-dev --optimize-autoloader

Không cần mang theo các package chỉ phục vụ development nếu chúng không cần thiết trên production.

Sau đó:

php artisan optimize

30. Frontend Assets

Nếu project sử dụng Vite:

npm install

Sau đó build production:

npm run build

Không nên sử dụng development server để phục vụ production.

31. Database Migration

Production migration:

php artisan migrate --force

--force cho phép migration chạy trong môi trường production mà không yêu cầu xác nhận tương tác.

Trước migration quan trọng:

Backup Database
       │
       ▼
Run Migration
       │
       ▼
Check Application
       │
       ▼
Monitor Logs

Đừng biến production database thành nơi thử nghiệm.

32. Storage và Permission

Sau deployment:

php artisan storage:link

Laravel cần quyền ghi vào:

storage/
bootstrap/cache/

Đây là những thư mục quan trọng đối với hoạt động runtime và cache của ứng dụng.

33. Queue Worker

Nếu Blog CMS sử dụng Queue, production phải có worker chạy liên tục.

Ví dụ:

php artisan queue:work

Không nên chỉ chạy thủ công trong terminal rồi đóng terminal.

Production thường cần:

Supervisor
hoặc
systemd
hoặc
một process manager tương đương

để worker tự khởi động lại khi gặp lỗi.

Sau khi deploy code mới, các process chạy lâu như queue worker cần được reload/restart để sử dụng code mới. Laravel 13 cung cấp:

php artisan reload

cho mục đích này.

34. Scheduler

Nếu project có scheduled tasks, server cần gọi:

php artisan schedule:run

thường xuyên theo cơ chế scheduler của Laravel.

Ví dụ:

00:00
 │
 ▼
Scheduler
 │
 ├── Clean old logs
 ├── Send reports
 ├── Publish scheduled posts
 └── Cleanup temporary files

Đây là phần rất dễ bị quên khi chuyển từ localhost lên VPS.

35. Checklist trước khi Deploy

Trước khi đưa Blog CMS lên Internet:

[ ] APP_ENV=production

[ ] APP_DEBUG=false

[ ] APP_URL chính xác

[ ] APP_KEY tồn tại

[ ] Database production chính xác

[ ] Database đã backup

[ ] .env không commit Git

[ ] composer install --no-dev

[ ] npm run build

[ ] migrate --force

[ ] storage:link

[ ] storage permission

[ ] bootstrap/cache permission

[ ] php artisan optimize

[ ] Nginx root = public/

[ ] PHP-FPM hoạt động

[ ] HTTPS hoạt động

[ ] Queue Worker hoạt động

[ ] Scheduler hoạt động

[ ] Mail hoạt động

[ ] Upload hoạt động

[ ] Login hoạt động

[ ] Authorization hoạt động

[ ] API hoạt động

[ ] /up hoạt động

[ ] Logs hoạt động

36. Checklist bảo mật

Một Blog CMS production tối thiểu cần kiểm tra:

[ ] APP_DEBUG=false

[ ] Không public .env

[ ] HTTPS

[ ] Password được hash

[ ] Validation

[ ] Authorization

[ ] CSRF protection

[ ] Mass Assignment protection

[ ] SQL Injection protection

[ ] XSS protection

[ ] Upload validation

[ ] File permission

[ ] Rate limiting nếu cần

[ ] API authentication

[ ] Token được bảo vệ

[ ] Database backup

[ ] Server update thường xuyên

Đặc biệt:

Đừng nhầm việc ẩn một nút trên giao diện với việc bảo vệ quyền truy cập.

Ví dụ:

@if(auth()->user()->role === 'admin')
    <a href="/admin/users">
        Users
    </a>
@endif

chỉ là UI.

Controller hoặc Policy vẫn phải kiểm tra quyền.

37. Tối ưu Database

Khi project lớn dần, database thường trở thành một trong những điểm cần quan tâm đầu tiên.

Không nên:

Post::all();

nếu database có hàng triệu record.

Nên:

Post::latest()->paginate(20);

Không nên lấy toàn bộ column nếu chỉ cần một số field:

Post::select([
    'id',
    'title',
    'slug',
])->get();

Sử dụng index cho những column thường xuyên:

WHERE
ORDER BY
JOIN
UNIQUE

Ví dụ:

$table->string('slug')->unique();

đã tạo unique index cho slug.

38. Tối ưu Source Code

Một source code tốt không phải source code có nhiều file nhất.

Mục tiêu là:

Dễ đọc
Dễ sửa
Dễ test
Dễ debug
Dễ deploy
Dễ mở rộng

Controller không nên trở thành:

God Controller

Ví dụ không nên để một Controller xử lý:

Database
Email
Upload
Payment
Notification
Report
API

tất cả trong một method khổng lồ.

Hãy chia trách nhiệm hợp lý.

39. Cấu trúc tư duy khi xây dựng Feature

Khi thêm một tính năng mới, có thể đi theo flow:

Requirement
     │
     ▼
Database?
     │
     ▼
Migration
     │
     ▼
Model
     │
     ▼
Relationship
     │
     ▼
Request / Validation
     │
     ▼
Controller
     │
     ▼
Route
     │
     ▼
View / API
     │
     ▼
Authorization
     │
     ▼
Test
     │
     ▼
Deploy

Đây là workflow rất đáng ghi nhớ.

40. Git và Deployment

Một workflow đơn giản:

Local Development
       │
       ▼
Git
       │
       ▼
Git Repository
       │
       ▼
VPS
       │
       ▼
composer install
       │
       ▼
npm run build
       │
       ▼
migrate
       │
       ▼
optimize
       │
       ▼
reload services

Ví dụ:

git add .
git commit -m "Update blog CMS"
git push

Trên server:

git pull
composer install --no-dev --optimize-autoloader
npm install
npm run build
php artisan migrate --force
php artisan optimize
php artisan reload

Tất nhiên quy trình thực tế có thể khác tùy hạ tầng.

41. Cấu trúc Blog CMS sau khóa học

Một cấu trúc khái quát:

blog/
│
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   ├── Middleware/
│   │   ├── Requests/
│   │   └── Resources/
│   │
│   ├── Models/
│   ├── Policies/
│   ├── Events/
│   ├── Listeners/
│   ├── Jobs/
│   ├── Mail/
│   └── Notifications/
│
├── bootstrap/
│
├── config/
│
├── database/
│   ├── factories/
│   ├── migrations/
│   └── seeders/
│
├── public/
│
├── resources/
│   ├── css/
│   ├── js/
│   └── views/
│
├── routes/
│   ├── web.php
│   └── api.php
│
├── storage/
│
├── tests/
│
├── .env
├── artisan
├── composer.json
└── package.json

Cấu trúc Laravel có thể được tổ chức thêm tùy dự án, nhưng các thư mục cốt lõi được framework cung cấp nhằm tạo nền tảng cho cả ứng dụng nhỏ và lớn.

42. Toàn bộ kiến thức sau 50 bài

Có thể tóm tắt khóa Laravel 13 thành:

PHP
 │
 ▼
Laravel
 │
 ├── Routing
 │
 ├── Controller
 │
 ├── Blade
 │
 ├── Database
 │    ├── Migration
 │    ├── Seeder
 │    └── Factory
 │
 ├── Eloquent
 │    ├── CRUD
 │    ├── Query
 │    └── Relationship
 │
 ├── Form
 │    ├── Request
 │    ├── Validation
 │    └── Upload
 │
 ├── Authentication
 │    ├── Login
 │    ├── Register
 │    ├── Middleware
 │    └── Authorization
 │
 ├── Advanced
 │    ├── Scope
 │    ├── Observer
 │    ├── Event
 │    ├── Queue
 │    ├── Mail
 │    ├── Notification
 │    ├── Cache
 │    ├── Storage
 │    └── Logging
 │
 ├── REST API
 │    ├── Resource
 │    ├── Sanctum
 │    └── Authentication
 │
 └── Production
      ├── VPS
      ├── Nginx
      ├── Queue Worker
      ├── Scheduler
      └── Optimization

Đó chính là toàn bộ hành trình của khóa học.

43. Laravel 13 và PHP

Laravel 13 tiếp tục chu kỳ phát hành hàng năm của Laravel.

Theo tài liệu chính thức, Laravel 13 yêu cầu PHP 8.3–8.5; Laravel 13 được phát hành ngày 17/03/2026, với bug fixes đến Q3/2027 và security fixes đến 17/03/2028. Laravel 13 không phải bản LTS.

Vì vậy, nếu xây dựng khóa học hiện tại theo Laravel 13 thì nên ghi:

Laravel 13.x — 2026

thay vì:

Laravel 12 LTS

44. Người học đã đạt được gì?

Sau khi hoàn thành khóa học, người học không chỉ biết:

Route::get(...);

hay:

Post::all();

Mà đã hiểu được cách một ứng dụng web thực tế được xây dựng:

User
 │
 ▼
Browser
 │
 ▼
Nginx
 │
 ▼
Laravel
 │
 ├── Middleware
 ├── Route
 ├── Controller
 ├── Validation
 ├── Model
 ├── Database
 ├── Cache
 ├── Queue
 └── Storage
 │
 ▼
Response

Đây mới là mục tiêu chính của khóa học.

45. Sau Laravel có thể học gì?

Sau Blog CMS, có thể tiếp tục theo nhiều hướng.

Hướng 1 — Backend

Laravel
   ↓
REST API
   ↓
Redis
   ↓
Queue
   ↓
WebSocket
   ↓
Microservices

Hướng 2 — Frontend

Laravel API
     ↓
Vue
React
Livewire

Hướng 3 — DevOps

Linux
 ↓
Nginx
 ↓
Docker
 ↓
CI/CD
 ↓
Cloud

Hướng 4 — Database

MySQL
 ↓
Index
 ↓
Query Optimization
 ↓
Redis
 ↓
Database Scaling

Hướng 5 — Testing

PHPUnit
 ↓
Feature Test
 ↓
API Test
 ↓
Integration Test

46. BONUS — PHPUnit

Phần Bonus của khóa học chỉ cần tập trung vào những khái niệm cơ bản:

Test
Feature Test
API Test
assertOk()
assertStatus()
assertJson()

Ví dụ:

$response = $this->get('/blog');

$response->assertOk();

API:

$response = $this->getJson('/api/posts');

$response->assertStatus(200);

Kiểm tra JSON:

$response->assertJson([
    'data' => [],
]);

Mục tiêu của phần Bonus không phải biến người học thành chuyên gia testing.

Mục tiêu là giúp người học hiểu:

Code có thể được kiểm tra tự động thay vì chỉ test bằng tay.

47. Dự án cuối khóa — Blog CMS

Đây là danh sách chức năng hoàn chỉnh:

BLOG CMS
│
├── Authentication
│   ├── Register
│   ├── Login
│   └── Logout
│
├── Dashboard
│
├── Categories
│   ├── Create
│   ├── Read
│   ├── Update
│   ├── Delete
│   ├── Search
│   └── Pagination
│
├── Posts
│   ├── Create
│   ├── Read
│   ├── Update
│   ├── Delete
│   ├── Publish
│   ├── Upload Image
│   ├── Search
│   └── Pagination
│
├── Users
│   ├── List
│   ├── Role
│   ├── Active / Inactive
│   └── Password
│
├── Soft Delete
│
├── Roles & Permissions
│
├── Events
│
├── Queue
│
├── Mail
│
├── Notification
│
├── Cache
│
├── Storage
│
├── Logging
│
├── REST API
│
├── API Resource
│
├── Sanctum
│
└── Deployment
    ├── Shared Hosting
    ├── VPS
    ├── Nginx
    ├── Queue Worker
    └── Scheduler

48. Checklist cuối cùng của Project

Trước khi gọi project là hoàn thành:

Function

[✓] Register
[✓] Login
[✓] Logout
[✓] Categories
[✓] Posts
[✓] Users
[✓] Upload
[✓] Search
[✓] Pagination
[✓] Soft Delete
[✓] Roles
[✓] API
[✓] Sanctum

Code

[✓] Validation
[✓] Relationship
[✓] Scope
[✓] Authorization
[✓] Error handling
[✓] Logging
[✓] Cache
[✓] Queue

Production

[✓] .env
[✓] APP_DEBUG=false
[✓] HTTPS
[✓] Database
[✓] Storage
[✓] Nginx
[✓] PHP-FPM
[✓] Queue Worker
[✓] Scheduler
[✓] Backup
[✓] Monitoring

49. Từ học Framework đến làm dự án

Đây là điểm quan trọng nhất của toàn bộ khóa học.

Học Laravel không nên dừng ở:

Biết Route
Biết Controller
Biết Model
Biết Blade

Mà phải tiến đến:

Nhận Requirement
       ↓
Thiết kế Database
       ↓
Thiết kế Architecture
       ↓
Viết Code
       ↓
Validation
       ↓
Authorization
       ↓
Testing
       ↓
Debug
       ↓
Optimization
       ↓
Deployment
       ↓
Monitoring

Đó mới là quy trình làm một ứng dụng thực tế.

50. Kết thúc khóa học Laravel 13

Chúng ta bắt đầu từ:

PHP

sau đó:

Laravel

rồi:

Database

tiếp tục:

Eloquent

sau đó:

Authentication

rồi:

CRUD

tiếp tục:

API

và cuối cùng:

Production

Toàn bộ hành trình có thể tóm tắt bằng một dòng:

PHP
 ↓
Laravel 13
 ↓
Blog CMS
 ↓
REST API
 ↓
Authentication
 ↓
Queue / Cache / Storage
 ↓
VPS / Nginx
 ↓
Production

Nếu đã hoàn thành toàn bộ dự án Blog CMS, người học đã có một nền tảng đủ để bắt đầu xây dựng những ứng dụng Laravel lớn hơn.

Điều quan trọng từ đây không còn là:

"Laravel có bao nhiêu tính năng?"

mà là:

"Tôi có thể dùng Laravel để giải quyết bài toán gì?"

Framework chỉ là công cụ.

Kỹ năng quan trọng hơn là khả năng:

Phân tích vấn đề
      ↓
Thiết kế giải pháp
      ↓
Viết code
      ↓
Kiểm tra
      ↓
Tối ưu
      ↓
Triển khai
      ↓
Bảo trì

Và đó cũng chính là mục tiêu cuối cùng của khóa học:

Từ PHP ZERO → Laravel 13 → Xây dựng Blog CMS thực tế → Sẵn sàng triển khai ứng dụng Web.

🎓 HOÀN THÀNH KHÓA LARAVEL 13

┌─────────────────────────────────────────┐
│                                         │
│        PHP → LARAVEL 13 → CMS           │
│                                         │
│   50 BÀI HỌC + BONUS PHPUnit            │
│                                         │
│   Database                              │
│   Eloquent                              │
│   Authentication                        │
│   CRUD                                  │
│   API                                   │
│   Sanctum                               │
│   Queue                                 │
│   Cache                                 │
│   Storage                               │
│   Deployment                            │
│                                         │
│             BLOG CMS                    │
│                                         │
└─────────────────────────────────────────┘

Hết phần Laravel 13.

Bước tiếp theo không phải học thêm thật nhiều syntax.

Hãy lấy Blog CMS này làm nền tảng và bắt đầu xây dựng project của riêng mình.

x1

Trong 50 bài chính, chúng ta đã hoàn thành một Blog CMS với:

• Authentication

• CRUD

• Database

• Eloquent

• Relationship

• Validation

• Upload

• Search

• Pagination

• Soft Delete

• Authorization

• Queue

• Mail

• Notification

• Cache

• Storage

• Logging

• REST API

• Sanctum

• Deployment

Nhưng có một vấn đề:

Làm sao biết code của chúng ta vẫn hoạt động đúng sau khi sửa hoặc thêm tính năng mới?

Đó là lúc Automated Testing xuất hiện.

Trong bài Bonus này, chúng ta chỉ học những kiến thức PHPUnit cần thiết để bắt đầu kiểm thử một ứng dụng Laravel 13.

p/S: mục 8 trở đi mới chạy được.

1. Testing là gì?

Testing là quá trình kiểm tra xem chương trình có hoạt động đúng theo yêu cầu hay không.

Ví dụ Blog CMS có chức năng:

GET /blog

Chúng ta mong muốn:

HTTP 200

Thay vì mỗi lần sửa code lại mở trình duyệt kiểm tra bằng tay, chúng ta có thể viết test:

$response = $this->get('/blog');

$response->assertOk();

Sau đó Laravel tự kiểm tra.

Nếu đúng:

PASS

Nếu sai:

FAIL

2. PHPUnit là gì?

PHPUnit là framework testing phổ biến trong PHP.

Laravel tích hợp sẵn khả năng testing với PHPUnit và Pest. Một project Laravel mới đã có phpunit.xml và thư mục tests.

Trong bài này chúng ta tập trung vào:

PHPUnit

vì mục tiêu của Bonus là giúp người mới hiểu nền tảng testing.

3. Tests nằm ở đâu?

Trong Laravel:

tests/
│
├── Feature/
│
├── Unit/
│
└── TestCase.php

Hai loại quan trọng:

Unit Test
Feature Test

4. Unit Test

Unit Test kiểm tra một phần nhỏ và tương đối độc lập của code.

Ví dụ:

Một method
Một class
Một hàm xử lý
Một business rule

Ví dụ:

public function add(int $a, int $b): int
{
    return $a + $b;
}

Test:

$this->assertEquals(
    5,
    $calculator->add(2, 3)
);

Unit Test thường không cần boot toàn bộ ứng dụng Laravel hoặc truy cập database.

5. Feature Test

Feature Test kiểm tra một chức năng lớn hơn.

Ví dụ:

Browser
   ↓
Route
   ↓
Middleware
   ↓
Controller
   ↓
Model
   ↓
Database
   ↓
Response

Ví dụ:

$response = $this->get('/blog');

$response->assertOk();

Đây là một Feature Test.

Laravel lưu ý rằng Feature Test có thể kiểm tra cả HTTP request, database và nhiều thành phần phối hợp với nhau; trong ứng dụng thực tế, phần lớn test thường có thể tập trung vào Feature Test vì nó cho mức độ tin cậy cao hơn về hành vi tổng thể của hệ thống.

6. Tạo Test

Laravel cung cấp Artisan command:

php artisan make:test BlogTest

File sẽ nằm trong:

tests/Feature/BlogTest.php

Nếu muốn tạo Unit Test:

php artisan make:test CalculatorTest --unit

File:

tests/Unit/CalculatorTest.php

7. Test đầu tiên

Tạo:

php artisan make:test BlogTest

Sau đó mở:

tests/Feature/BlogTest.php

Ví dụ:

<?php
// php artisan make:test BlogTest
namespace Tests\Feature;

use Tests\TestCase;
use Illuminate\Foundation\Testing\RefreshDatabase;

//php artisan test --filter=BlogTest
class BlogTest extends TestCase
{
    use RefreshDatabase;

    // Tự động nạp dữ liệu mẫu từ DatabaseSeeder vào database testing
    protected $seed = true;
    
    public function test_blog_page_is_accessible(): void
    {
        $response = $this->get('/blog');

        $response->assertOk();
    }
}

Test này nói:

Khi request /blog, ứng dụng phải trả HTTP 200.

8. Chạy Test

Trước khi chạy Test phải vào file Pest.php comment dòng này lại nếu không sẽ kích hoạt refresh database mất hết dữ liệu.

pest()->extend(TestCase::class)
  // ->use(RefreshDatabase::class) // Comment dòng này lại
  ->in('Feature');

Tóm lại:&

dùng file .env.testing ngay từ đầu + thêm biến seed để laravel lấy dữ liệu mẫu tránh chung đụng dữ liệu testing và dữ liệu thật.

Xem mục&17. Test Post

Có thể chạy:

php artisan test

Laravel cũng cho phép chạy trực tiếp PHPUnit:

vendor/bin/phpunit

Laravel cung cấp php artisan test như một cách thuận tiện để chạy test suite.

Kết quả có thể giống:

PASS  Tests\Feature\BlogTest
✓ blog page is accessible

Tests:    1 passed

Nếu test thất bại:

FAIL

Laravel sẽ hiển thị thông tin để chúng ta tìm nguyên nhân.

Ghi chú:

1.lệnh chạy trực tiếp phpunit ngoài thư mục gốc phải gõ dấu \ mới chạy

vendor\bin\phpunit tests\Feature\BlogTest.php

2.nên chạy riêng BlogTest.php để tránh hiển thị quá nhiều

php artisan test tests/Feature/BlogTest.php

9. assertOk()

Một assertion rất thường dùng:

$response->assertOk();

Nó kiểm tra HTTP response có status:

200 OK

Ví dụ:

public function test_blog_page_is_accessible(): void
{
    $response = $this->get('/blog');

    $response->assertOk();
}

10. assertStatus()

Có thể kiểm tra status cụ thể:

$response->assertStatus(200);

Ví dụ:

$response = $this->get('/blog');

$response->assertStatus(200);

Hoặc:

$response->assertStatus(404);

Ví dụ test một trang không tồn tại:

public function test_missing_page_returns_404(): void
{
    $response = $this->get('/this-page-does-not-exist');

    $response->assertStatus(404);
}

11. assertRedirect()

Nếu request phải redirect:

$response->assertRedirect('/login');

Ví dụ:

public function test_admin_page_requires_login(): void
{
    $response = $this->get('/admin/users');

    $response->assertRedirect('/login');
}

Đây là một test rất thực tế đối với Blog CMS.

12. Kiểm tra nội dung HTML

Có thể kiểm tra response có chứa text:

$response->assertSee('Blog');

Ví dụ:

public function test_blog_contains_title(): void
{
    $response = $this->get('/blog');

    $response->assertOk();
    $response->assertSee('Blog');
}

Hoặc:

$response->assertDontSee('Something');

13. Test JSON API

Đây là phần đặc biệt quan trọng đối với Blog CMS.

API:

GET /api/posts

Test:

public function test_posts_api_returns_success(): void
{
    $response = $this->getJson('/api/posts');

    $response->assertStatus(200);
}

Hoặc:

$response->assertOk();

14. assertJson()

Giả sử API trả về:

{
    "data": [
        {
            "id": 1,
            "title": "Laravel 13"
        }
    ]
}

Có thể kiểm tra:

$response->assertJson([
    'data' => [
        [
            'id' => 1,
            'title' => 'Laravel 13',
        ],
    ],
]);

Mục tiêu là kiểm tra API trả về đúng cấu trúc dữ liệu mong muốn.

Ghi chú: ví dụ trên chỉ đúng nếu trả về api/posts/1

Đối với trường hợp trả về nguyên mảng phải viết lại:

// test API danh sách posts
public function test_posts_api_returns_success(): void
{
    $response = $this->getJson('/api/posts');

    $response->assertStatus(200)
        ->assertJsonStructure([
            'success',
            'data' => [
                '*' => [ // <--- Dấu * đại diện cho từng phần tử trong mảng data
                    'id',
                    'title',
                    'slug',
                    'excerpt',
                    'image_url',
                    'published_at',
                    'is_published',
                    'views',
                    'author' => ['id', 'name', 'email', 'role', 'created_at'],
                    'category' => ['id', 'name', 'slug']
                ]
            ]
        ]);
}

15. Test Database

Feature Test có thể kiểm tra database.

Laravel cung cấp các trait hỗ trợ việc reset database giữa các test.

Ví dụ:

use Illuminate\Foundation\Testing\RefreshDatabase;

Sau đó:

class PostTest extends TestCase
{
    use RefreshDatabase;

    // ...
}

Mỗi test có thể làm việc với database testing thay vì phá dữ liệu development hiện tại.

16. Tạo dữ liệu bằng Factory

Giả sử chúng ta có:

PostFactory

Có thể tạo Post:

$post = Post::factory()->create();

Sau đó test:

$response = $this->get('/blog/' . $post->slug);

$response->assertOk();

Đây là cách rất phù hợp với Blog CMS.

17. Test Post

Trước khi chạy ví dụ dưới để tránh mất data phải:

1. Xóa config cache
2. Tạo file .env.testing và kiểm tra xem laravel đang nhận database nào lúc chạy test

php artisan config:clear

php artisan env --env=testing
php artisan config:show database.default --env=testing

Nội dung file .env.testing

APP_ENV=testing
APP_KEY=base64:key

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db_test
DB_USERNAME=root
DB_PASSWORD=

# Bắt buộc xóa hẳn hoặc để trống dòng DB_URL
DB_URL=

Nhớ vào phpmyadmin tạo database có tên là: your_db_test

database này sẽ trống trơn do phpunit.xml cấu hình chạy trên RAM.

Data lúc này dựa vào Factory() hoặc $seed (tạo toàn bộ db -> khá nặng) như trường hợp BlogTest

Phải sửa trong PostFactory

// Khai báo mối quan hệ theo chuẩn Laravel
'user_id' => User::factory(),
'category_id' => Category::factory(),

Ví dụ:

<?php
namespace Tests\Feature;

use App\Models\Category; 
use App\Models\Post;
use App\Models\User;     
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class PostTest extends TestCase
{
    use RefreshDatabase;

    public function test_post_page_can_be_opened(): void
    {
        $user = User::factory()->create();
        $category = Category::factory()->create();

        // Ép status = published để route tìm thấy bài viết
        $post = Post::factory()->create([
            'user_id' => $user->id,
            'category_id' => $category->id,
            'status' => 'published',
            'published_at' => now(),
        ]);

        $response = $this->get(
            '/blog/' . $post->slug
        );

        $response->assertOk();
    }
}

Flow:

Factory
   ↓
Create Post
   ↓
Request URL
   ↓
Laravel
   ↓
Response
   ↓
assertOk()

18. Test Authentication

Ví dụ một trang admin yêu cầu đăng nhập.

public function test_admin_requires_authentication(): void
{
    $response = $this->get('/admin/users');

    $response->assertRedirect('/login');
}

Sau đó test user đã đăng nhập (đôi khi user thường k cho vào phải role admin):

//$user = User::factory()->create();
$user = User::factory()->create(['role' => 'admin']);

$this->actingAs($user);

$response = $this->get('/admin/users');

// Đã đăng nhập -> Phải trả về 200 OK thành công
$response->assertOk();

Đây là cách kiểm tra các route có authentication.

19. Test Authorization

Authentication chưa đủ.

Chúng ta còn phải kiểm tra quyền.

Ví dụ:

user
admin

Một user thông thường không được phép truy cập:

/admin/users

Test có thể kiểm tra:

$user = User::factory()->create([
    'role' => 'user',
]);

$this->actingAs($user);

$response = $this->get('/admin/users');

$response->assertForbidden();

Trong trường hợp ứng dụng của bạn trả về redirect hoặc response khác tùy middleware/policy, assertion phải phù hợp với implementation thực tế.

Điểm quan trọng:

Phải test cả Authentication và Authorization.

20. Test Validation

Ví dụ tạo Post yêu cầu:

title
content
category_id

Nếu gửi request thiếu title:

$response = $this->post('/admin/posts', [
    'content' => 'Test content',
]);

Có thể kiểm tra validation:

$response->assertSessionHasErrors([
    'title',
]);

Đây là một test rất hữu ích.

Full code:

/**
 * Test validation khi tạo bài viết mới thiếu các trường bắt buộc.
 */

public function test_create_post_validation_fails_when_required_fields_are_missing(): void
{
    $admin = User::factory()->create(['role' => 'admin']);
    $this->actingAs($admin);

    // Gửi request rỗng
    $response = $this->post('/admin/posts', []);

    // Kiểm tra đúng 4 trường bắt buộc (có chữ required)
    $response->assertSessionHasErrors([
        'title',
        'slug',
        'content',
        'status',
    ]);

    $response->assertStatus(302);
}

21. Test REST API

Blog CMS của chúng ta có:

GET
POST
PUT/PATCH
DELETE

Do đó có thể xây dựng một bộ test:

Post API
│
├── GET /api/posts
├── GET /api/posts/{id}
├── POST /api/posts
├── PUT /api/posts/{id}
└── DELETE /api/posts/{id}

Ví dụ:

public function test_posts_api_returns_json(): void
{
    $response = $this->getJson('/api/posts');

    $response->assertOk();

    $response->assertJsonStructure([
        'data',
    ]);
}

22. Test Sanctum API

API private yêu cầu:

Bearer Token

Có thể tạo user:

$user = User::factory()->create();

Tạo token:

$token = $user->createToken('testing')->plainTextToken;

Sau đó request:

$response = $this
    ->withToken($token)
    ->getJson('/api/user');

Kiểm tra:

$response->assertOk();

23. Test API Authentication

Test request không có token:

public function test_private_api_requires_authentication(): void
{
    $response = $this->getJson('/api/user');

    $response->assertUnauthorized();
}

Kết quả mong muốn:

HTTP 401

Sau đó test với token hợp lệ:

$user = User::factory()->create();

$token = $user
    ->createToken('testing')
    ->plainTextToken;

$response = $this
    ->withToken($token)
    ->getJson('/api/user');

$response->assertOk();

24. Test Event

Trong Blog CMS, chúng ta đã học Event và Listener.

Testing cũng có thể kiểm tra Event có được dispatch hay không.

Trước tiên vào app/Events/ xem có event nào hoặc dùng lệnh:

php artisan event:list

Ví dụ: PostPublished và UserRegistered (đã học trong bài Event)

Sau đó vào PostController xem hàm store dòng:

event(new PostPublished($post));

Laravel cung cấp:

Event::fake();

Sau đó chạy code cần kiểm tra.

Cuối cùng:

Event::assertDispatched(
    Registered::class
);

Laravel hỗ trợ Event::fake() và các assertion như assertDispatched() để kiểm tra event mà không cần thực thi listener trong test đó.

Flow:

Test
 │
 ▼
Event::fake()
 │
 ▼
Execute Code
 │
 ▼
Event dispatched?
 │
 ├── YES → PASS
 └── NO  → FAIL

Dưới đây là full code passed

use App\Events\PostPublished;
use App\Events\UserRegistered;
use App\Models\Post;
use App\Models\User;
use App\Models\Category; 
use Illuminate\Support\Facades\Event;

function test_user_registered_event_is_dispatched(): void
{
    Event::fake();

    $user = User::factory()->create();

    event(new UserRegistered($user));

    Event::assertDispatched(
    	UserRegistered::class
    );
}

//test event published_post bắn ra khi store post thành công chọn published
public function test_creating_published_post_dispatches_event(): void
{
    Event::fake();
    
    $admin = User::factory()->create([
        'role' => 'admin',
    ]);
    
    $category = Category::factory()->create();
    
    $this->actingAs($admin);
    
    $response = $this->post('/admin/posts', [
        'category_id' => $category->id,
        'title' => 'Laravel Testing',
        'slug' => 'laravel-testing',
        'content' => str_repeat('Nội dung test ', 5),
        'status' => 'published',
    ]);
    
    Event::assertDispatched(
        PostPublished::class,
        fn (PostPublished $event)
        => $event->post->title === 'Laravel Testing'
    );
}

//test event published_post k bắn ra khi draft
public function test_creating_draft_post_does_not_dispatch_event(): void
{
    Event::fake();
    
    $admin = User::factory()->create([
        'role' => 'admin',
    ]);
    
    $category = Category::factory()->create();
    
    $this->actingAs($admin);
    
    $this->post('/admin/posts', [
        'category_id' => $category->id,
        'title' => 'Draft Post',
        'slug' => 'draft-post',
        'content' => str_repeat('Nội dung test ', 5),
        'status' => 'draft',
    ]);
    
    Event::assertNotDispatched(
        PostPublished::class
    );
}

25. Test Queue

Tương tự Event, Queue cũng có thể được fake.

Ví dụ:

Queue::fake();

Sau đó:

SomeJob::dispatch();

Kiểm tra:

Queue::assertPushed(SomeJob::class);

Mục tiêu:

Kiểm tra Job đã được dispatch hay chưa.

Không nhất thiết phải thực sự chạy Job trong test này.

use App\Jobs\SendWelcomeEmail;
use App\Models\User;
use Illuminate\Support\Facades\Queue;

public function test_welcome_email_job_is_queued(): void
{
    Queue::fake();
    
    $user = User::factory()->create();
    
    SendWelcomeEmail::dispatch($user);
    
    Queue::assertPushed(
        SendWelcomeEmail::class
    );
}

26. Test Mail

Mail cũng có thể fake.

Ví dụ:

Mail::fake();

Sau đó:

Mail::to($user)->send(
    new WelcomeMail($user)
);

Kiểm tra:

Mail::assertSent(WelcomeMail::class);

Điều này đặc biệt hữu ích với:

Register
Password Reset
Contact Form
Notification
Order Confirmation

Full Code MailTest:

//php artisan make:test MailTest
namespace Tests\Feature;

use Tests\TestCase;
use Illuminate\Support\Facades\Mail;
use App\Mail\WelcomeUser;

//php artisan test tests/Feature/MailTest.php

class MailTest extends TestCase
{
    public function test_user_receives_welcome_email()
    {
        Mail::fake();
        
        Mail::to('test@example.com')
        ->send(new WelcomeUser('Nguyễn Văn A'));
        
        Mail::assertSent(WelcomeUser::class, function ($mail) {
            return $mail->hasTo('test@example.com')
            && $mail->name === 'Nguyễn Văn A';
        });
    }
}
//END class

27. Test Upload

Blog CMS có upload image.

Có thể fake Storage:

Storage::fake('public');

Sau đó:

$file = UploadedFile::fake()
    ->image('post.jpg');

Gửi request:

$response = $this->post('/admin/posts', [
    'title' => 'Laravel 13',
    'image' => $file,
]);

Kiểm tra file:

Storage::disk('public')->assertExists(
    'posts/' . $file->hashName()
);

Đây là cách test upload mà không cần ghi file thật vào storage production.

Full code UploadTest:

// php artisan make:test UploadTest
namespace Tests\Feature;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Tests\TestCase;
use App\Models\User;
use App\Models\Country;

// php artisan test tests/Feature/UploadTest.php

class UploadTest extends TestCase
{
    use RefreshDatabase;

    public function test_image_can_be_uploaded()
    {
        Storage::fake('public');

        $user = User::factory()->create([
            'role' => 'admin',
        ]);
        
        $file = UploadedFile::fake()
        ->image('post.jpg');
        
        $response = $this->actingAs($user)
            ->post('/admin/posts', [
            'title' => 'Laravel 13',
            'slug' => 'laravel-13',
            'content' => str_repeat('Nội dung test ', 5),
            'status' => 'draft',
            'image' => $file,
        ]);
        
        $response->assertRedirect();
        
        Storage::disk('public')->assertExists(
            'posts/' . $file->hashName()
        );
    }
}
//END class

28. Test Soft Delete

Blog CMS có Soft Delete.

Có thể kiểm tra:

$post = Post::factory()->create();

$post->delete();

Sau đó:

$this->assertSoftDeleted($post);

Hoặc kiểm tra record đã bị đánh dấu:

deleted_at != NULL

Sau đó test restore:

$post->restore();

Full code SoftDeleteTest:

// php artisan make:test SoftDeleteTest
namespace Tests\Feature;

use App\Models\Post;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

// php artisan test tests/Feature/SoftDeleteTest.php
class SoftDeleteTest extends TestCase
{
    use RefreshDatabase;

    public function test_post_can_be_soft_deleted()
    {
        $post = Post::factory()->create();

        $post->delete();

        $this->assertSoftDeleted($post);
    }

    public function test_deleted_at_is_not_null_after_delete()
    {
        $post = Post::factory()->create();
        
        $post->delete();
        
        $this->assertNotNull(
        $post->fresh()->deleted_at
        );
    }

    public function test_post_can_be_restored()
    {
        $post = Post::factory()->create();
        
        $post->delete();
        
        $this->assertSoftDeleted($post);
        
        $post->restore();
        
        $this->assertNull(
            $post->fresh()->deleted_at
        );
    }
}

29. Test một CRUD hoàn chỉnh

Ví dụ Post:

Create
Read
Update
Delete

Chúng ta có thể xây dựng:

PostTest
│
├── can list posts
├── can show post
├── can create post
├── can update post
├── can delete post
└── can restore post

Đây chính là cách biến test thành một bộ kiểm tra tự động cho CMS.

<?php
// php artisan make:test CRUDPostTest
namespace Tests\Feature;

use App\Models\Post;
use App\Models\User;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

// php artisan test --filter=CRUDPostTest
class CRUDPostTest extends TestCase
{
    use RefreshDatabase;

    protected User $user;

    protected function setUp(): void
    {
        parent::setUp();

        // Tạo Admin User và authenticate toàn bộ request trong class
        $this->user = User::factory()->create([
            'role' => 'admin',
        ]);

        $this->actingAs($this->user);
    }

    /**
     * Test 1: Hiển thị danh sách bài viết (Index)
     */
    public function test_can_list_posts(): void
    {
        Post::factory()->count(5)->create([
            'status' => 'published',
        ]);

        $response = $this->get(route('admin.posts.index'));

        $response->assertStatus(200);
    }

    /**
     * Test 2: Xem chi tiết bài viết (Show)
     */
    public function test_can_show_post(): void
    {
        $post = Post::factory()->create([
            'title' => 'Bài viết thử nghiệm',
            'slug' => 'bai-viet-thu-nghiem',
            'content' => 'Nội dung chi tiết bài viết',
            'status' => 'published',
        ]);

        $response = $this->get(route('admin.posts.show', $post));

        $response->assertStatus(200);
    }

    /**
     * Test 3: Tạo mới bài viết (Store)
     */
    public function test_can_create_post(): void
    {
        // Đảm bảo gửi ĐỦ dữ liệu theo đúng validation của validatePost()
        $payload = [
            'title'   => 'Tựa đề bài viết mới',
            'slug'    => 'tua-de-bai-viet-moi-test',
            'content' => 'Nội dung bài viết tạo từ test case',
            'status'  => 'draft',
            'user_id' => $this->user->id,
            'image'   => UploadedFile::fake()->image('post.jpg'), // Giả lập file ảnh thật
        ];

        $response = $this->post(route('admin.posts.store'), $payload);

        // Bắt buộc check không dính lỗi Validation
        //$response->assertSessionHasNoErrors();
        $response->assertSessionHasNoErrors()
            ->assertRedirect(route('admin.posts.show', 1));

        $this->assertDatabaseHas('posts', [
            'title' => 'Tựa đề bài viết mới',
            'slug' => 'tua-de-bai-viet-moi-test',
            'status' => 'draft',
        ]);
    }

    /**
     * Test 4: Cập nhật bài viết (Update)
     */
    public function test_can_update_post(): void
    {
        // Tạo post ban đầu có user_id thuộc về $this->user
        $post = Post::factory()->create([
            'user_id' => $this->user->id,
            'title' => 'Tựa đề cũ',
            'slug' => 'tua-de-cu-test',
            'content' => 'Nội dung cũ',
            'status' => 'draft',
        ]);

        $payload = [
            'title' => 'Tựa đề đã cập nhật',
            'slug' => 'tua-de-cu-test', // Giữ nguyên slug cũ để pass rule unique:posts,slug,{id}
            'content' => 'Nội dung đã được chỉnh sửa mới',
            'status' => 'published',
            'user_id' => $this->user->id,
        ];

        $response = $this->put(route('admin.posts.update', $post), $payload);

        //$response->assertSessionHasNoErrors();
        $response->assertSessionHasNoErrors()
            ->assertRedirect(route('admin.posts.show', 1));

        $this->assertDatabaseHas('posts', [
            'id' => $post->id,
            'title' => 'Tựa đề đã cập nhật',
            'status' => 'published',
        ]);
    }

    /**
     * Test 5: Xóa mềm bài viết (Destroy)
     */
    public function test_can_delete_post(): void
    {
        $post = Post::factory()->create([
            'user_id' => $this->user->id,
            'status' => 'published',
        ]);

        $response = $this->delete(route('admin.posts.destroy', $post));

        //$response->assertSessionHasNoErrors();
        $response->assertSessionHasNoErrors()
            ->assertRedirect(route('admin.posts.index'));

        $this->assertSoftDeleted('posts', [
            'id' => $post->id,
        ]);
    }

    /**
     * Test 6: Khôi phục bài viết đã xóa mềm (Restore - Route PATCH)
     */
    public function test_can_restore_post(): void
    {
        $post = Post::factory()->create([
            'status' => 'published',
        ]);

        $post->delete();

        $this->assertSoftDeleted('posts', [
            'id' => $post->id,
        ]);

        // Dùng URL trực tiếp /admin/posts/{id}/restore với PATCH để tránh bị route model binding chặn record đã soft delete
        $response = $this->patch(route('admin.posts.restore', $post->id));

        $this->assertNotSoftDeleted('posts', [
            'id' => $post->id,
        ]);
    }
}
//END class

30. Ví dụ Feature Test cho Blog CMS

Một test đơn giản:

<?php

namespace Tests\Feature;

use App\Models\Post;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class BlogTest extends TestCase
{
    use RefreshDatabase;

    public function test_blog_page_is_accessible(): void
    {
        $response = $this->get('/blog');

        $response->assertOk();
    }

    public function test_post_can_be_viewed(): void
    {
        $post = Post::factory()->create();

        $response = $this->get(
            '/blog/' . $post->slug
        );

        $response->assertOk();
    }
}

Chúng ta có thể tiếp tục mở rộng thành:

BlogTest
PostTest
CategoryTest
UserTest
ApiTest
AuthenticationTest

31. Test API Response Structure

Với API Resource, đây là một test rất đáng làm:

$response->assertJsonStructure([
    'data' => [
        '*' => [
            'id',
            'title',
            'slug',
        ],
    ],
]);

Nếu sau này developer vô tình xóa slug khỏi Resource:

Test FAIL

Nhờ vậy chúng ta phát hiện thay đổi API trước khi frontend hoặc mobile app gặp lỗi.

32. Test không chỉ để tìm Bug

Một cách hiểu tốt hơn:

Test là một lớp bảo vệ cho source code.

Ví dụ:

Hôm nay
    ↓
Code chạy đúng
    ↓
Viết Test
    ↓
3 tháng sau
    ↓
Sửa Controller
    ↓
Chạy Test
    ↓
PASS

Nếu:

FAIL

chúng ta biết thay đổi mới có thể đã ảnh hưởng chức năng cũ.

33. Regression Test

Đây gọi là Regression Testing.

Ví dụ:

Version 1
    ↓
Login hoạt động
    ↓
Version 2
    ↓
Thêm API
    ↓
Version 3
    ↓
Sửa User
    ↓
Login bị lỗi

Nếu có test:

php artisan test

chúng ta có thể phát hiện lỗi nhanh hơn.

34. Test Environment

Khi chạy test, Laravel sử dụng environment:

testing

Các thiết lập testing có thể được cấu hình trong phpunit.xml hoặc .env.testing. Laravel cũng cấu hình một số driver phù hợp cho testing, chẳng hạn session và cache mặc định không ghi dữ liệu vào hệ thống thật.

Có thể tạo:

.env.testing

Ví dụ:

APP_ENV=testing

DB_CONNECTION=sqlite
DB_DATABASE=:memory:

Tùy cấu hình project, bạn cũng có thể sử dụng một database testing riêng.

Điểm quan trọng:

Không chạy test trên database production.

35. phpunit.xml

Laravel project có:

phpunit.xml

File này chứa cấu hình dành cho PHPUnit.

Ví dụ có thể cấu hình:

<php>
    <env name="APP_ENV" value="testing"/>
    <env name="CACHE_STORE" value="array"/>
</php>

Không nên tùy tiện sửa cấu hình nếu chưa hiểu tác động của nó.

Ghi chú: chỉnh sửa trong đây phải clear config.

36. Chạy một Test cụ thể

Không cần chạy toàn bộ test suite.

Có thể chỉ chạy:

php artisan test --filter=BlogTest

Hoặc:

vendor/bin/phpunit --filter BlogTest

Điều này rất hữu ích khi đang phát triển một module.

37. Quy trình Testing cơ bản

Khi xây dựng một feature:

Requirement
     ↓
Code
     ↓
Test
     ↓
Run Test
     ↓
PASS?
  ┌──┴──┐
 YES    NO
  │      │
  ▼      ▼
Done   Debug
         │
         ▼
       Fix
         │
         └──────► Test lại

Đây là vòng lặp rất quan trọng trong phát triển phần mềm.

38. Testing Blog CMS

Với project cuối khóa, không cần test mọi dòng code.

Có thể ưu tiên các chức năng quan trọng:

Authentication
       ↓
Authorization
       ↓
Categories
       ↓
Posts
       ↓
Upload
       ↓
Soft Delete
       ↓
REST API
       ↓
Sanctum

Ví dụ:

tests/
│
├── Feature/
│   ├── AuthenticationTest.php
│   ├── CategoryTest.php
│   ├── PostTest.php
│   ├── UserTest.php
│   └── ApiTest.php
│
└── Unit/
    └── ExampleTest.php

Không cần biến project Blog CMS thành một hệ thống test khổng lồ.

39. Test quan trọng hơn Coverage 100%

Một người mới rất dễ nghĩ:

"Phải test 100% code."

Không nhất thiết.

100% coverage không đồng nghĩa:

100% không có bug

Điều quan trọng hơn là test những behavior quan trọng.

Ví dụ Blog CMS:

User không đăng nhập
→ không vào Admin

User thường
→ không quản lý User

Admin
→ quản lý User

Post draft
→ không xuất hiện public

Post published
→ xuất hiện Blog

API private
→ yêu cầu token

Upload sai file
→ validation fail

Đây là những behavior có giá trị cao để kiểm thử.

40. PHPUnit và CI/CD

Khi đã có test, sau này có thể đưa vào CI/CD:

Git Push
   │
   ▼
CI Server
   │
   ├── composer install
   ├── Run Tests
   ├── Build Assets
   └── Deploy

Nếu:

Tests PASS

→ có thể tiếp tục deployment.

Nếu:

Tests FAIL

→ dừng deployment.

Đây là bước phát triển tiếp theo sau khi đã nắm testing cơ bản.

41. PHPUnit Cheat Sheet

Một số lệnh và assertion cần nhớ:

Chạy toàn bộ test

php artisan test

Chạy một test

php artisan test --filter=BlogTest

HTTP 200

$response->assertOk();

HTTP status

$response->assertStatus(200);

Redirect

$response->assertRedirect('/login');

Có nội dung

$response->assertSee('Blog');

Có validation error

$response->assertSessionHasErrors([
    'title',
]);

JSON

$response->assertJson([
    'data' => [],
]);

JSON structure

$response->assertJsonStructure([
    'data',
]);

Unauthorized

$response->assertUnauthorized();

Forbidden

$response->assertForbidden();

42. Bài tập Bonus

Bài tập 1

Tạo:

tests/Feature/BlogTest.php

Test:

GET /blog

Yêu cầu:

HTTP 200

Bài tập 2

Test Post:

GET /blog/{slug}

Yêu cầu:

HTTP 200

với một Post hợp lệ.

Bài tập 3

Test validation khi tạo Post.

Thiếu:

title

Kết quả:

validation error

Bài tập 4

Test API:

GET /api/posts

Yêu cầu:

HTTP 200
JSON
data

Bài tập 5

Test API private:

GET /api/user

Không có token:

401

Có token:

200

Bài tập 6

Test Upload Image.

Kiểm tra:

image hợp lệ
→ upload thành công

file không hợp lệ
→ validation fail

43. Khi nào nên viết Test?

Không nhất thiết phải chờ project hoàn thành.

Có thể viết test ngay khi hoàn thành một feature:

Category
   ↓
Code
   ↓
Test

Post
   ↓
Code
   ↓
Test

API
   ↓
Code
   ↓
Test

Cách này giúp lỗi được phát hiện sớm.

44. Testing trong quy trình phát triển thực tế

Một workflow đơn giản:

1. Nhận requirement
        ↓
2. Thiết kế
        ↓
3. Code
        ↓
4. Viết Test
        ↓
5. Run Test
        ↓
6. Fix Bug
        ↓
7. Code Review
        ↓
8. Deploy

Ở project lớn hơn:

Developer
    ↓
Git
    ↓
CI
    ↓
Tests
    ↓
Build
    ↓
Deploy

45. Laravel 13 + PHPUnit — Tổng kết

Sau Bonus này, người học cần hiểu được:

PHPUnit
   │
   ├── Unit Test
   │
   ├── Feature Test
   │
   ├── HTTP Test
   │
   ├── Database Test
   │
   ├── API Test
   │
   ├── Authentication Test
   │
   ├── Validation Test
   │
   ├── Upload Test
   │
   └── Event / Queue / Mail Test

Và những assertion cơ bản:

assertOk()
assertStatus()
assertRedirect()
assertSee()
assertSessionHasErrors()
assertJson()
assertJsonStructure()
assertUnauthorized()
assertForbidden()

Testing không phải là việc viết thật nhiều code test.

Điều quan trọng là xác định:

Ứng dụng phải làm gì?

Sau đó biến yêu cầu đó thành test.

Ví dụ:

Requirement:

"User chưa đăng nhập không được vào Admin."

             ↓

Test:

GET /admin/users

             ↓

Expected:

401 / Redirect Login

Hoặc:

Requirement:

"API Posts phải trả JSON."

             ↓

Test:

GET /api/posts

             ↓

Expected:

200
JSON
data

Hoặc:

Requirement:

"User thường không được quản lý User."

             ↓

Test:

User → GET /admin/users

             ↓

Expected:

403

Đó chính là tư duy testing.

x1

Ở các bài trước, chúng ta đã lần lượt xây dựng và triển khai Blog CMS:

Bài 45 → Shared Hosting
Bài 46 → VPS
Bài 47 → Nginx
Bài 48 → Queue Worker & Scheduler

Đến đây ứng dụng đã có thể chạy trên production.

Nhưng:

Chạy được chưa có nghĩa là đã được cấu hình tốt cho production.

Một Laravel application thực tế cần quan tâm thêm:

• Performance

• Cache

• Environment

• Debug

• Security

• Database

• Queue

• Storage

• Logs

• Deployment

• Configuration

Laravel 13 cung cấp sẵn nhiều công cụ để tối ưu những vấn đề này. Trong tài liệu deployment chính thức, Laravel đặc biệt khuyến nghị cache configuration, events, routes và views khi triển khai production.

1. Development và Production khác nhau

Trong quá trình học, chúng ta thường chạy:

php artisan serve

với:

APP_ENV=local
APP_DEBUG=true

Điều này phù hợp cho development.

Production nên sử dụng:

APP_ENV=production
APP_DEBUG=false

Mô hình:

Development

APP_ENV=local
APP_DEBUG=true
        │
        ▼
Debug nhiều
Hot reload
Test
Development

Production:

Production

APP_ENV=production
APP_DEBUG=false
        │
        ▼
Security
Performance
Caching
Monitoring

2. File .env

Laravel sử dụng .env để chứa các giá trị phụ thuộc môi trường.

Ví dụ:

APP_NAME="Blog CMS"

APP_ENV=production

APP_KEY=base64:...

APP_DEBUG=false

APP_URL=https://example.com

Database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=blog_user
DB_PASSWORD=********

Mail:

MAIL_MAILER=smtp
MAIL_HOST=smtp.example.com
MAIL_PORT=587
MAIL_USERNAME=...
MAIL_PASSWORD=...
MAIL_ENCRYPTION=tls

Queue:

QUEUE_CONNECTION=database

Cache:

CACHE_STORE=database

Các giá trị này có thể thay đổi giữa:

Local
Staging
Production

Laravel cũng khuyến cáo không commit .env vào source control vì file này có thể chứa credentials và thông tin nhạy cảm.

3. .env không phải file để đưa lên Git

Không nên:

git add .env

Thay vào đó:

.env

nên được ignore.

Thông thường project có:

.env
.env.example

Trong đó:

.env

Chứa cấu hình thực tế:

DB_PASSWORD=secret-password

.env.example

Chỉ chứa cấu trúc mẫu:

DB_PASSWORD=

Nhờ vậy người khác có thể biết application cần những biến môi trường nào mà không biết password production.

4. APP_ENV

Ví dụ:

APP_ENV=production

Laravel có thể kiểm tra environment:

use Illuminate\Support\Facades\App;

if (App::environment('production')) {
    // Production
}

Hoặc:

if (App::environment(['local', 'staging'])) {
    // Local hoặc staging
}

Trong production Blog CMS:

APP_ENV=production

là lựa chọn phù hợp.

5. APP_DEBUG

Đây là một trong những biến quan trọng nhất:

APP_DEBUG=false

Development:

APP_DEBUG=true

Production:

APP_DEBUG=false

Laravel documentation cảnh báo APP_DEBUG=true trên production có thể làm lộ thông tin nhạy cảm cho người dùng.

6. Điều gì xảy ra khi APP_DEBUG=true?

Giả sử code có lỗi:

$post->category->name;

nhưng:

$post->category

là null.

Development có thể hiển thị rất nhiều thông tin:

Exception
File
Line
Stack Trace
Environment
Configuration
SQL
Request

Điều này cực kỳ hữu ích khi debug.

Nhưng production:

APP_DEBUG=true

có thể biến thông tin debug thành dữ liệu mà attacker có thể khai thác.

Do đó:

APP_DEBUG=false

7. Production Error Page

Production nên hiển thị một thông báo thân thiện:

Something went wrong.
Please try again later.

thay vì:

SQLSTATE...
/var/www/blog/vendor/...
DB_PASSWORD...
Stack trace...

Nguyên tắc:

Development
    ↓
Developer cần thông tin

Production
    ↓
User cần thông báo an toàn

8. APP_KEY

Laravel application cần:

APP_KEY=base64:...

Không được tùy tiện thay đổi APP_KEY trên production đang chạy.

Nếu thay đổi key, những dữ liệu được mã hóa bằng key cũ có thể không còn giải mã được.

Ví dụ:

php artisan key:generate

Chỉ nên thực hiện khi tạo application hoặc khi bạn hiểu rõ tác động.

Không nên mỗi lần deploy lại chạy:

php artisan key:generate

9. APP_URL

Production nên đặt URL thật:

APP_URL=https://example.com

Không nên để:

APP_URL=http://127.0.0.1:8000

nếu application đang chạy trên Internet.

APP_URL có thể được sử dụng trong nhiều tình huống tạo URL, command và các thành phần khác của application.

10. Cache là gì?

Cache là kỹ thuật lưu lại dữ liệu hoặc kết quả đã được xử lý để lần sau lấy nhanh hơn.

Ví dụ:

Không Cache

Request
   ↓
Database
   ↓
Query
   ↓
Process
   ↓
Response

Có Cache:

Request
   ↓
Cache
   │
   ├── Có → Response nhanh
   │
   └── Không
        ↓
      Database
        ↓
      Cache
        ↓
      Response

11. Laravel Cache

Laravel cung cấp API thống nhất cho nhiều cache backend.

Ví dụ:

use Illuminate\Support\Facades\Cache;

Lưu:

Cache::put('site_name', 'Blog CMS', 3600);

Lấy:

$name = Cache::get('site_name');

Hoặc:

$name = Cache::get('site_name', 'Default');

Xóa:

Cache::forget('site_name');

12. Cache::remember()

Đây là một pattern rất hữu ích.

Ví dụ:

$categories = Cache::remember(
    'blog.categories',
    3600,
    function () {
        return Category::active()
            ->withCount('posts')
            ->orderBy('name')
            ->get();
    }
);

Luồng:

Request
   │
   ▼
Cache?
   │
   ├── Có
   │    ↓
   │  Return
   │
   └── Không
        ↓
     Database
        ↓
      Cache
        ↓
      Return

Thay vì query database liên tục, dữ liệu có thể được sử dụng từ cache trong thời gian đã cấu hình.

13. Cache cho Blog CMS

Trong Blog CMS, chúng ta có:

Categories
Tags
Settings
Statistics
Popular Posts
Homepage Data

Một số dữ liệu không thay đổi liên tục có thể phù hợp với cache.

Ví dụ:

$categories = Cache::remember(
    'categories.active',
    3600,
    fn () => Category::active()
        ->withCount('posts')
        ->orderBy('name')
        ->get()
);

14. Không nên cache mọi thứ

Cache không phải:

Càng nhiều càng tốt.

Ví dụ:

User profile
Admin permissions
Realtime stock price
Current order status

có thể cần dữ liệu mới.

Nếu cache quá lâu:

Database
    ↓
Data mới

Cache
    ↓
Data cũ

Người dùng có thể nhìn thấy dữ liệu stale.

Do đó cần cân nhắc:

Data thay đổi thường xuyên
→ Cache ngắn hoặc không cache

Data ít thay đổi
→ Cache lâu hơn

15. Clear Cache

Trong development hoặc khi troubleshooting:

php artisan optimize:clear

Laravel 13 cung cấp optimize:clear để xóa các cache được tạo bởi optimize và các key trong default cache store.

Có thể sử dụng riêng:

php artisan config:clear

hoặc:

php artisan route:clear

hoặc:

php artisan view:clear

Tùy trường hợp.

16. Production Optimization

Laravel 13 có command:

php artisan optimize

Đây là command rất quan trọng khi deploy production.

Laravel sẽ cache các thành phần quan trọng như:

Configuration
Events
Routes
Views

Laravel documentation khuyến nghị chạy php artisan optimize trong deployment process.

17. config:cache

Chạy:

php artisan config:cache

Laravel gom configuration vào cache.

Điều này giúp giảm việc phải đọc nhiều file configuration khi application boot.

18. Lưu ý cực kỳ quan trọng về env()

Sau khi:

php artisan config:cache

không nên viết:

$name = env('APP_NAME');

trực tiếp trong application code.

Không nên:

class BlogController
{
    public function index()
    {
        $debug = env('APP_DEBUG');
    }
}

Thay vào đó:

$debug = config('app.debug');

Tư duy đúng:

.env
 ↓
config/*.php
 ↓
config(...)

Ví dụ trong:

config/app.php

có:

'debug' => (bool) env('APP_DEBUG', false),

Application sử dụng:

config('app.debug');

Laravel documentation lưu ý rằng sau khi config:cache, .env không còn được load trong request và env() bên ngoài configuration files có thể trả về null.

19. Cache Routes

Laravel có:

php artisan route:cache

Command này tạo route cache.

Đặc biệt có lợi với application có nhiều routes.

Blog CMS của chúng ta có thể có:

Web Routes
Admin Routes
Blog Routes
API Routes
Auth Routes

Khi số lượng route tăng lên, route caching giúp giảm thời gian đăng ký routes khi application boot.

20. Cache Views

Chạy:

php artisan view:cache

Laravel sẽ precompile Blade views.

Ví dụ:

resources/views/
       ↓
Blade
       ↓
Compiled Views

Nhờ vậy production không phải compile từng Blade view lần đầu khi request.

Laravel khuyến nghị cache views trong deployment process.

21. Cache Events

Laravel cũng hỗ trợ:

php artisan event:cache

Command này cache event → listener mappings.

Ví dụ Blog CMS:

Registered
    ↓
SendWelcomeEmail

PostPublished
    ↓
SendNotification

PostUpdated
    ↓
ClearPostCache

Khi application lớn, caching event discovery có thể giúp quá trình boot hiệu quả hơn.

22. Production Optimize đầy đủ

Có thể chạy:

php artisan optimize

Thay vì phải chạy riêng:

php artisan config:cache
php artisan event:cache
php artisan route:cache
php artisan view:cache

Laravel 13 cung cấp optimize như command tổng hợp cho deployment.

23. Autoloader Optimization

Khi deploy production:

composer install \
    --no-dev \
    --optimize-autoloader

Trong một dòng:

composer install --no-dev --optimize-autoloader

Ý nghĩa:

--no-dev

Không cài các package development không cần thiết.

Ví dụ:

PHPUnit
Debugbar
Development tools

--optimize-autoloader giúp Composer tối ưu class autoloading.

24. Không chạy npm run dev trên production

Development:

npm run dev

Production:

npm run build

Ví dụ:

npm install
npm run build

Sau đó:

public/build

chứa production assets.

25. Laravel Vite

Nếu Blog CMS sử dụng Vite:

resources/css
resources/js

thì production nên build:

npm run build

Thay vì để development server chạy trên production.

Mô hình:

Development
    ↓
npm run dev

Production
    ↓
npm run build

26. Database Optimization

Một trong những bottleneck lớn nhất của web application thường là database.

Ví dụ:

Post::all();

có thể lấy quá nhiều dữ liệu.

Không nên:

$posts = Post::all();

nếu database có:

1,000,000 posts

Thay vào đó:

$posts = Post::paginate(10);

27. Pagination

Blog CMS của chúng ta đã sử dụng:

->paginate(10)

Ví dụ:

$posts = Post::published()
    ->latest('published_at')
    ->paginate(10);

Thay vì lấy toàn bộ:

Post::all();

Database chỉ phải xử lý lượng dữ liệu phù hợp với page hiện tại.

28. Eager Loading

Một lỗi rất phổ biến:

$posts = Post::all();

foreach ($posts as $post) {
    echo $post->user->name;
    echo $post->category->name;
}

Có thể tạo ra vấn đề N+1 Query.

Thay vào đó:

$posts = Post::with([
    'user',
    'category'
])->get();

Laravel sẽ eager load relationship.

29. Blog CMS và N+1

Controller của chúng ta đã sử dụng:

Post::published()
    ->with(['user', 'category'])
    ->latest('published_at')
    ->paginate(10);

Đây là cách tốt hơn:

Posts
 │
 ├── User
 └── Category

thay vì để từng Post tự query User và Category.

30. Chỉ lấy những cột cần thiết

Không phải lúc nào cũng cần:

Post::all();

với toàn bộ column.

Ví dụ:

Post::query()
    ->select([
        'id',
        'title',
        'slug',
        'excerpt'
    ])
    ->latest()
    ->paginate(10);

Nếu page chỉ hiển thị:

Title
Excerpt

thì không nhất thiết phải lấy toàn bộ content lớn.

31. Database Index

Các column thường được:

WHERE
ORDER BY
JOIN

có thể cần index phù hợp.

Ví dụ:

posts.slug
posts.user_id
posts.category_id
posts.status
posts.published_at

Migration:

$table->index('status');
$table->index('published_at');

Foreign key thường đã có index phù hợp tùy schema và cách khai báo, nhưng cần hiểu execution plan và workload thực tế thay vì index mọi column.

32. Không index mọi column

Sai lầm:

Index tất cả

Index giúp query:

Nhanh hơn

nhưng cũng có cost:

INSERT
UPDATE
DELETE

phải duy trì index.

Do đó:

Query thường xuyên
      ↓
Phân tích
      ↓
Index phù hợp

Không phải:

Column nào cũng index

33. Cache Database Query

Không nên cache mọi query.

Ví dụ categories:

$categories = Cache::remember(
    'categories.active',
    3600,
    fn () => Category::active()
        ->withCount('posts')
        ->orderBy('name')
        ->get()
);

Khi category thay đổi:

Cache::forget('categories.active');

Như vậy cache có thể được invalidated đúng thời điểm.

34. Cache Invalidation

Một trong những vấn đề khó của cache là:

Cache cũ

Ví dụ:

10:00
Category = Laravel

cache:

Laravel

11:00 admin đổi:

Laravel → Laravel 13

nhưng cache vẫn:

Laravel

Nếu không clear/invalidate:

Database = Laravel 13
Cache    = Laravel

Vì vậy khi update dữ liệu quan trọng:

Cache::forget('categories.active');

hoặc sử dụng strategy phù hợp.

35. Storage

Production cần kiểm tra:

php artisan storage:link

Laravel sử dụng:

storage/app/public

cho public files và symbolic link:

public/storage

để browser có thể truy cập.

Blog CMS:

Post Image
   ↓
storage/app/public/posts
   ↓
public/storage
   ↓
Browser

36. Permissions

Laravel cần quyền ghi cho:

storage/
bootstrap/cache/

Ví dụ trên Ubuntu + Nginx/PHP-FPM:

sudo chown -R www-data:www-data /var/www/blog/storage
sudo chown -R www-data:www-data /var/www/blog/bootstrap/cache

Tùy server setup, user chạy PHP-FPM có thể khác www-data.

Không nên dùng:

chmod -R 777

chỉ để “cho chạy được”.

37. Vì sao chmod 777 nguy hiểm?

chmod -R 777 /var/www/blog

nghĩa là:

Owner     → read/write/execute
Group     → read/write/execute
Others    → read/write/execute

Đây là quyền quá rộng.

Thay vào đó:

Owner
Group
Web Server

nên được cấu hình đúng.

Nguyên tắc:

Cấp quyền tối thiểu cần thiết.

38. Security — .env

Không bao giờ public:

.env

Nginx phải trỏ:

root /var/www/blog/public;

chứ không:

root /var/www/blog;

Laravel deployment documentation nhấn mạnh rằng web server phải hướng request tới public/index.php, không phải project root, để tránh expose sensitive files.

39. Security — APP_DEBUG

Production:

APP_DEBUG=false

Không:

APP_DEBUG=true

Đây là một trong những cấu hình bảo mật cơ bản nhất của Laravel production.

40. Security — APP_ENV

Production:

APP_ENV=production

Giúp application biết mình đang chạy trong environment nào.

41. Security — Secret Keys

Các thông tin như:

APP_KEY
DB_PASSWORD
MAIL_PASSWORD
AWS_SECRET
API_KEY

không nên hard-code vào source:

$password = '123456';

Không nên:

Git
   ↓
Source
   ↓
Secret

Mà:

Environment
   ↓
.env
   ↓
config
   ↓
Application

42. Security — Password

Laravel không nên lưu password dạng plain text.

Không:

password = 123456

Laravel sử dụng hashing.

Ví dụ:

use Illuminate\Support\Facades\Hash;

$hash = Hash::make($password);

Kiểm tra:

Hash::check($password, $hash);

43. Security — Validation

Không tin dữ liệu từ browser.

Ví dụ:

$request->validate([
    'title' => ['required', 'string', 'max:255'],
    'content' => ['required', 'string'],
]);

Client-side validation:

JavaScript

chỉ giúp UX.

Server-side validation:

Laravel

mới là lớp bảo vệ thực sự.

44. Security — Mass Assignment

Model:

protected $fillable = [
    'name',
    'slug',
    'description',
    'is_active',
];

Không nên cho phép user tùy tiện gửi:

role=admin

nếu role không thuộc dữ liệu họ được phép thay đổi.

Ví dụ:

User::create($request->validated());

cần kết hợp:

Validation
+
Fillable
+
Authorization

45. Security — Authorization

Authentication:

Bạn là ai?

Authorization:

Bạn được phép làm gì?

Ví dụ:

User
 └── Xem bài viết

Admin
 ├── Tạo category
 ├── Sửa category
 ├── Xóa category
 └── Quản lý user

Không nên chỉ dựa vào:

ẩn button

mà phải bảo vệ ở server bằng:

Middleware
Policy
Gate
Authorization

46. Security — CSRF

Các form web thay đổi dữ liệu cần CSRF protection.

Ví dụ Blade:

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

    ...
</form>

Laravel có cơ chế CSRF protection cho web requests.

Không nên bỏ:

@csrf

chỉ vì form vẫn submit được trong một số trường hợp.

47. Security — SQL Injection

Không nên nối chuỗi SQL trực tiếp:

DB::select(
    "SELECT * FROM posts WHERE title = '$title'"
);

Thay vào đó sử dụng Query Builder/Eloquent:

Post::where('title', $title)->get();

Laravel sẽ sử dụng parameter binding phù hợp.

48. Security — XSS

Nếu nội dung user nhập:

<script>...</script>

không nên tùy tiện render raw HTML.

Blade mặc định:

{{ $post->title }}

sẽ escape output.

Cẩn thận với:

{!! $post->content !!}

Nếu content cho phép HTML, cần có chiến lược sanitization phù hợp.

49. Security — File Upload

Blog CMS của chúng ta có upload image.

Không nên chỉ kiểm tra:

filename.jpg

Mà phải validation:

'image' => [
    'nullable',
    'image',
    'max:2048',
]

Có thể giới hạn MIME/types theo yêu cầu application.

Ngoài server validation, frontend có thể báo:

File > 2MB

để cải thiện UX.

Nhưng validation Laravel vẫn bắt buộc.

50. Security — Storage

Không nên lưu file upload tùy tiện vào:

project root

Nên sử dụng Laravel filesystem:

$image->store('posts', 'public');

Sau đó:

php artisan storage:link

Laravel filesystem cung cấp abstraction cho local, public và các storage backend khác.

51. Security — HTTPS

Production nên sử dụng:

HTTPS

Không nên:

HTTP

để đăng nhập.

Mô hình:

Browser
   │
 HTTPS
   ▼
Nginx
   ▼
Laravel

HTTPS bảo vệ dữ liệu trên đường truyền.

52. Security — HTTP Headers

Có thể cấu hình một số security headers tại Nginx.

Ví dụ:

add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options "nosniff";

Laravel 13 deployment configuration mẫu cũng sử dụng các header này.

Không nên copy một danh sách security headers một cách máy móc.

Mỗi header cần hiểu rõ tác dụng và khả năng ảnh hưởng tới application.

53. Rate Limiting

Các endpoint nhạy cảm như:

Login
Register
Password Reset
API

nên có rate limiting phù hợp.

Ví dụ:

User
 ↓
Login attempts
 ↓
Rate Limit
 ↓
Too many requests
 ↓
Block / Throttle

Điều này giúp giảm abuse và brute-force attempts.

54. Logs

Production không nên bật debug để “xem lỗi”.

Hãy sử dụng logs.

Ví dụ:

Log::error('Payment failed', [
    'order_id' => $order->id,
]);

Log thường nằm trong:

storage/logs/

Có thể kiểm tra:

tail -f storage/logs/laravel.log

hoặc:

tail -f storage/logs/*.log

55. Health Check

Laravel 13 có health route:

/up

Mặc định route này trả:

200

nếu application boot thành công.

Nếu application gặp lỗi boot:

500

Laravel cung cấp route này để uptime monitor, load balancer hoặc hệ thống orchestration sử dụng.

Ví dụ:

https://example.com/up

56. Health Check trong Blog CMS

Có thể dùng:

Monitoring
    │
    ▼
https://example.com/up
    │
    ├── 200 → OK
    │
    └── 500 → Problem

Đây là một cách đơn giản để kiểm tra application còn hoạt động hay không.

57. Production Deployment Flow

Từ Bài 45 đến Bài 49, quy trình deployment của chúng ta có thể là:

Developer
    │
    ▼
Git
    │
    ▼
VPS
    │
    ▼
composer install --no-dev --optimize-autoloader
    │
    ▼
npm run build
    │
    ▼
php artisan migrate --force
    │
    ▼
php artisan optimize
    │
    ▼
php artisan reload
    │
    ▼
Nginx
    │
    ▼
Laravel 13

Laravel 13 deployment documentation cũng khuyến nghị tối ưu application và reload các long-running services sau deployment để chúng sử dụng code mới.

58. Một deployment script đơn giản

Có thể hình dung quy trình:

git pull origin main

composer install --no-dev --optimize-autoloader

npm install
npm run build

php artisan migrate --force

php artisan storage:link

php artisan optimize

php artisan reload

Tùy kiến trúc Queue/Worker, có thể cần đảm bảo process monitor như Supervisor khởi động lại worker sau khi reload.

59. Không chạy migration production tùy tiện

Development:

php artisan migrate

Production:

php artisan migrate --force

Flag:

--force

cho phép migration chạy trong production mà không yêu cầu interactive confirmation.

Nhưng:

Trước khi migration production, phải hiểu migration sẽ thay đổi database như thế nào.

Đặc biệt với database lớn:

ALTER TABLE
DROP COLUMN
Index
Data migration

có thể ảnh hưởng production.

60. Backup Database

Một production application phải nghĩ đến:

Nếu database hỏng thì sao?

Không nên chỉ có:

Database

mà cần:

Database
   │
   ▼
Backup
   │
   ├── Daily
   ├── Weekly
   └── Retention

Ví dụ MySQL có thể backup bằng:

mysqldump

Điều quan trọng không chỉ là:

Backup

mà còn:

Restore được hay không?

Một backup chưa từng thử restore chưa thể xem là chiến lược backup hoàn chỉnh.

61. Storage Backup

Database không phải dữ liệu duy nhất.

Blog CMS còn có:

Post Images
User Avatars
Uploaded Files

Nếu các file này nằm trong:

storage/app/public

thì cũng cần có chiến lược backup.

Production backup:

Database
+
Uploaded Files
+
Environment/Secrets strategy

62. Không backup vendor và node_modules như dữ liệu chính

Thông thường source repository có:

composer.json
composer.lock
package.json
package-lock.json

Có thể cài lại:

composer install
npm install

Do đó production backup nên tập trung vào:

Database
Uploaded Files
Application Source
Configuration/Secrets

và chiến lược khôi phục phù hợp.

63. Performance Checklist

Một Laravel production cơ bản:

[✓] PHP production configuration
[✓] OPcache
[✓] Composer optimized autoload
[✓] Config cache
[✓] Route cache
[✓] Event cache
[✓] View cache
[✓] Database indexes
[✓] Pagination
[✓] Eager loading
[✓] Appropriate cache
[✓] Queue
[✓] Scheduler
[✓] Nginx
[✓] PHP-FPM

Không phải tất cả đều phải tối ưu cực đại ngay từ đầu.

Nguyên tắc:

Đo → tìm bottleneck → tối ưu.

64. Đừng tối ưu mù quáng

Ví dụ application chậm.

Không nên ngay lập tức:

Redis
Horizon
Octane
Multiple servers
Load Balancer
Microservices

trong khi vấn đề thực sự là:

N+1 Query

hoặc:

SELECT *

hoặc:

Không có index

Quy trình tốt hơn:

Problem
   ↓
Measure
   ↓
Identify bottleneck
   ↓
Optimize
   ↓
Measure again

65. Production Stack của Blog CMS

Sau 49 bài, Blog CMS đã đi từ:

PHP

đến:

Laravel 13

và cuối cùng:

                         INTERNET
                             │
                             ▼
                          HTTPS
                             │
                             ▼
                          Nginx
                             │
                 ┌───────────┴───────────┐
                 │                       │
              PHP-FPM                Static Files
                 │
                 ▼
            Laravel 13
                 │
       ┌─────────┼─────────┐
       │         │         │
       ▼         ▼         ▼
     MySQL     Cache     Storage
       │
       │
       ▼
    Database
       
Queue:
Laravel → Queue → Worker → Supervisor

Scheduler:
Cron → schedule:run → Laravel Scheduler

Đây không còn là một project PHP đơn giản.

Đây đã là một Laravel application có kiến trúc production cơ bản.

66. Production .env mẫu

Ví dụ:

APP_NAME="Blog CMS"

APP_ENV=production

APP_KEY=base64:YOUR_REAL_APP_KEY

APP_DEBUG=false

APP_URL=https://example.com

LOG_CHANNEL=stack
LOG_LEVEL=error

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=blog_user
DB_PASSWORD=YOUR_DATABASE_PASSWORD

QUEUE_CONNECTION=database

CACHE_STORE=database

Không copy nguyên mẫu này vào production.

Các giá trị:

APP_KEY
DB_PASSWORD
MAIL_PASSWORD
API_KEY

phải sử dụng secret thật của server.

67. Production Command Checklist

Sau khi deploy code:

composer install --no-dev --optimize-autoloader

Build frontend:

npm run build

Migration:

php artisan migrate --force

Storage:

php artisan storage:link

Optimization:

php artisan optimize

Reload:

php artisan reload

Nếu sử dụng Supervisor cho queue worker, kiểm tra:

sudo supervisorctl status

Kiểm tra Nginx:

sudo nginx -t

Kiểm tra application:

https://example.com/up

68. Khi nào dùng optimize:clear?

Nếu production có vấn đề liên quan đến cache configuration:

php artisan optimize:clear

Sau đó kiểm tra lại .env và configuration.

Sau khi sửa xong, có thể chạy:

php artisan optimize

Tư duy:

Clear
 ↓
Fix
 ↓
Optimize

Không nên chạy optimize:clear liên tục trên production mà không hiểu lý do.

69. Những lỗi production người mới thường gặp

Lỗi 1

APP_DEBUG=true

Production.

→ Có nguy cơ lộ thông tin.

Lỗi 2

Nginx:

root /var/www/blog;

→ Sai.

Đúng:

root /var/www/blog/public;

Lỗi 3

Không chạy:

php artisan optimize

→ Có thể bỏ qua các optimization cache production.

Lỗi 4

Deploy code mới nhưng Worker vẫn chạy code cũ.

→ Reload/restart long-running services.

Lỗi 5

Không có backup database.

→ Khi database hỏng, mất dữ liệu.

Lỗi 6

Upload file nhưng không:

php artisan storage:link

→ Image không truy cập được.

Lỗi 7

Dùng:

chmod -R 777

→ Cấp quyền quá rộng.

Lỗi 8

Query:

Model::all();

trên bảng cực lớn.

→ Có thể gây tốn RAM và chậm.

70. Production Security Checklist

[ ] APP_DEBUG=false

[ ] APP_ENV=production

[ ] HTTPS

[ ] .env không commit Git

[ ] APP_KEY được bảo vệ

[ ] Database password được bảo vệ

[ ] Không expose project root

[ ] Nginx root → public/

[ ] Validation server-side

[ ] Authorization

[ ] CSRF

[ ] Password hashing

[ ] File upload validation

[ ] Rate limiting

[ ] Security headers phù hợp

[ ] Logs

[ ] Database backup

[ ] Uploaded files backup

[ ] Queue Worker monitoring

71. Production Performance Checklist

[ ] Composer optimized autoload

[ ] Config cache

[ ] Event cache

[ ] Route cache

[ ] View cache

[ ] Database indexes

[ ] Pagination

[ ] Eager loading

[ ] Query optimization

[ ] Cache dữ liệu phù hợp

[ ] Vite production build

[ ] Queue cho tác vụ nặng

[ ] Scheduler cho tác vụ định kỳ

72. Bài tập thực hành

Bài tập 1 — Production Environment

Đổi:

APP_ENV=production
APP_DEBUG=false

Sau đó kiểm tra:

App::environment();

Bài tập 2 — Optimize

Chạy:

php artisan optimize

Sau đó kiểm tra website.

Bài tập 3 — Clear Cache

Chạy:

php artisan optimize:clear

Sau đó:

php artisan optimize

Quan sát sự khác nhau.

Bài tập 4 — Route Cache

Chạy:

php artisan route:cache

Sau đó:

php artisan route:list

Bài tập 5 — View Cache

Chạy:

php artisan view:cache

Kiểm tra Blog CMS.

Bài tập 6 — Cache Category

Viết:

Cache::remember(...)

để cache danh sách category.

Sau đó khi category thay đổi:

Cache::forget(...)

Bài tập 7 — Health Check

Mở:

/up

và kiểm tra HTTP status.

Bài tập 8 — Security

Kiểm tra production:

APP_DEBUG=false

và thử truy cập:

/.env

Kết quả phải là:

Không được phép truy cập

73. Tổng kết

Sau bài này, chúng ta đã hoàn thành phần quan trọng nhất của deployment Laravel 13.

Các nguyên tắc cần nhớ:

ENV
 ↓
Configuration
 ↓
Cache
 ↓
Optimization
 ↓
Security
 ↓
Monitoring

Production không đơn giản chỉ là:

Upload source code

Mà là:

Application
+
Web Server
+
PHP-FPM
+
Database
+
Cache
+
Queue
+
Scheduler
+
Security
+
Monitoring
+
Backup

📌 74. Những command cần nhớ

Optimize

php artisan optimize

Clear optimization cache

php artisan optimize:clear

Configuration

php artisan config:cache

Routes

php artisan route:cache

Views

php artisan view:cache

Events

php artisan event:cache

Storage

php artisan storage:link

Migration production

php artisan migrate --force

Reload long-running services

php artisan reload

Laravel 13 documentation xác nhận reload được dùng để terminate các long-running services như queue workers, Reverb hoặc Octane sau deployment để process monitor có thể khởi động lại chúng với code mới.

🎯 75. Tư duy Production

Một developer Laravel không chỉ cần biết:

Controller
Model
Migration
Blade
Route

mà khi đưa application ra Internet còn phải hiểu:

Code
 ↓
Security
 ↓
Performance
 ↓
Deployment
 ↓
Monitoring
 ↓
Backup

Đó chính là sự khác biệt giữa:

"Làm được một Laravel project"

và:

"Biết triển khai một Laravel application"

🏁 KẾT THÚC PHẦN TRIỂN KHAI

Sau:

Bài 45 — Deploy Shared Hosting
Bài 46 — Deploy VPS
Bài 47 — Nginx
Bài 48 — Queue Worker & Scheduler
Bài 49 — Production Tips

chúng ta đã hoàn thành toàn bộ phần:

TRIỂN KHAI LARAVEL 13

Kiến trúc cuối cùng:

                         INTERNET
                             │
                          HTTPS
                             │
                             ▼
                          NGINX
                             │
                             ▼
                         PHP-FPM
                             │
                             ▼
                      ┌─────────────┐
                      │ Laravel 13  │
                      └──────┬──────┘
                             │
          ┌──────────────────┼──────────────────┐
          │                  │                  │
          ▼                  ▼                  ▼
       MySQL              Cache             Storage
          │
          │
          ▼
       Database

          Laravel
             │
             ▼
          Queue
             │
             ▼
          Worker
             │
             ▼
        Supervisor

          Cron
             │
             ▼
     Laravel Scheduler

Và chỉ còn một bài cuối cùng:

🎓 BÀI 50 — TỔNG KẾT DỰ ÁN BLOG CMS

Chúng ta sẽ tổng hợp toàn bộ những gì đã học:

PHP
 ↓
Laravel 13
 ↓
MVC
 ↓
Database
 ↓
Eloquent
 ↓
Relationship
 ↓
Authentication
 ↓
Authorization
 ↓
CRUD
 ↓
Upload
 ↓
Search
 ↓
Pagination
 ↓
Soft Delete
 ↓
Events
 ↓
Queue
 ↓
Mail
 ↓
Notification
 ↓
Cache
 ↓
Storage
 ↓
Logging
 ↓
REST API
 ↓
Sanctum
 ↓
Nginx
 ↓
VPS
 ↓
Production

và ráp lại thành Blog CMS hoàn chỉnh.

x1

Ở Bài 47, chúng ta đã cấu hình:

Internet
    ↓
Nginx
    ↓
PHP-FPM
    ↓
Laravel 13

Nhưng một ứng dụng thực tế thường không chỉ xử lý request ngay lập tức.

Ví dụ Blog CMS của chúng ta có thể cần:

• gửi email;

• gửi notification;

• xử lý ảnh;

• tạo báo cáo;

• xóa dữ liệu cũ;

• đồng bộ dữ liệu;

• gửi email hàng loạt;

• chạy tác vụ mỗi ngày;

• dọn database;

• kiểm tra bài viết scheduled.

Nếu bắt người dùng chờ tất cả những việc này hoàn thành trong HTTP request thì website sẽ chậm.

Laravel cung cấp hai cơ chế rất quan trọng:

Queue
Scheduler

Trong bài này chúng ta sẽ đưa cả hai lên VPS production.

1. Queue là gì?

Queue có thể hiểu đơn giản là:

Đưa một công việc vào hàng đợi để xử lý sau.

Ví dụ người dùng đăng ký tài khoản:

User Register
     │
     ▼
Laravel
     │
     ├── Lưu User
     │
     └── Đưa Email vào Queue
                │
                ▼
             Worker
                │
                ▼
            Gửi Email

Thay vì:

User
 │
 ▼
Register
 │
 ▼
Gửi Email
 │
 ▼
Chờ SMTP
 │
 ▼
Response

chúng ta có:

User
 │
 ▼
Register
 │
 ▼
Queue Job
 │
 ▼
Response nhanh

Sau đó Worker xử lý email ở background.

2. Queue giải quyết vấn đề gì?

Giả sử Blog CMS có chức năng gửi email cho 10.000 người dùng.

Nếu xử lý trực tiếp:

foreach ($users as $user) {
    Mail::to($user)->send(...);
}

request có thể phải chờ rất lâu.

Không nên bắt browser chờ:

Browser
   │
   │ Request
   ▼
Laravel
   │
   ├── Email 1
   ├── Email 2
   ├── Email 3
   ├── ...
   └── Email 10000
        │
        ▼
     Response

Thay vào đó:

Browser
   │
   ▼
Laravel
   │
   ▼
Queue
   │
   └── 10000 jobs
            │
            ▼
         Worker

Browser nhận response sớm hơn.

3. Queue Job là gì?

Một Job đại diện cho một công việc.

Ví dụ:

SendWelcomeEmail

hoặc:

ProcessPostImage

hoặc:

GenerateReport

Tạo Job:

php artisan make:job SendWelcomeEmail

Laravel tạo:

app/Jobs/SendWelcomeEmail.php

4. Cấu trúc một Job

Ví dụ:

<?php

namespace App\Jobs;

use App\Models\User;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Queue\Queueable;

class SendWelcomeEmail implements ShouldQueue
{
    use Queueable;

    public function __construct(
        public User $user
    ) {
    }

    public function handle(): void
    {
        // Xử lý công việc
    }
}

Điểm quan trọng:

implements ShouldQueue

cho Laravel biết Job này cần được xử lý thông qua Queue.

5. Dispatch Job

Sau khi tạo Job:

SendWelcomeEmail::dispatch($user);

Ví dụ:

use App\Jobs\SendWelcomeEmail;

SendWelcomeEmail::dispatch($user);

Lúc này ứng dụng không nhất thiết phải thực hiện toàn bộ công việc ngay trong request.

Job được đưa vào Queue để Worker xử lý.

6. Queue Driver

Laravel hỗ trợ nhiều queue backend.

Một số lựa chọn phổ biến:

Database
Redis
Amazon SQS

Trong khóa học, chúng ta bắt đầu bằng:

Database Queue

vì dễ hiểu và phù hợp để học.

7. Database Queue

Database Queue lưu Job vào database.

Mô hình:

Laravel
   │
   ▼
jobs table
   │
   ▼
Queue Worker
   │
   ▼
handle()

Laravel có thể tạo migration cho jobs table bằng:

php artisan make:queue-table

Sau đó:

php artisan migrate

Database sẽ có bảng:

jobs

Ngoài ra có thể có:

failed_jobs

để lưu những Job thất bại.

8. Cấu hình Queue

Trong .env:

QUEUE_CONNECTION=database

Sau khi thay đổi .env, trong production nên đảm bảo configuration cache được cập nhật.

Ví dụ:

php artisan config:clear

hoặc sau khi deploy:

php artisan optimize

9. Chạy Queue Worker

Đây là phần cực kỳ quan trọng.

Queue chỉ chứa Job.

Ai xử lý Job?

Queue Worker

Chạy:

php artisan queue:work

Worker sẽ:

Queue
 │
 ├── Job 1
 ├── Job 2
 ├── Job 3
 └── Job 4
      │
      ▼
    Worker
      │
      ▼
   handle()

10. queue:work chạy liên tục

Khi chạy:

php artisan queue:work

Laravel Worker không chỉ xử lý một Job rồi kết thúc.

Nó tiếp tục chờ:

Job
 ↓
Process
 ↓
Job
 ↓
Process
 ↓
Job
 ↓
Process
 ↓
...