🥤 Bài 2 — Thiết kế khung máy bán nước mini

Mục tiêu

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

• Biết cách thiết kế khung máy.

• Hiểu kích thước của từng bộ phận.

• Chuẩn bị sẵn để lắp động cơ ở bài sau.

Lưu ý: Chúng ta không cố gắng làm giống máy thương mại ngay từ đầu. Mục tiêu là tạo một phiên bản đơn giản, chắc chắn và dễ nâng cấp.

---

Cấu trúc tổng thể

Máy sẽ chia thành 3 tầng:

+---------------------------+
|  Bảng điều khiển          |
|  (Màn hình + Nút bấm)     |
+---------------------------+
|                           |
|   Kho chứa sản phẩm       |
|   4 ngăn                  |
|                           |
+---------------------------+
|   Khay nhận sản phẩm      |
+---------------------------+

🥤 Bài 1 — Làm quen với máy bán nước tự động

Mục tiêu

Sau bài này bạn sẽ hiểu:

• Máy bán nước hoạt động như thế nào.

• Bên trong có những bộ phận gì.

• Những gì chúng ta sẽ tự làm.

Không cần lập trình.

Không cần điện tử.

Chỉ cần hiểu nguyên lý.

---

Máy bán nước thật làm gì?

Ví dụ khách muốn mua Coca.

Quy trình diễn ra như sau:

Khách chọn số A1

↓

Máy kiểm tra thanh toán

↓

Động cơ A1 quay

↓

Lon Coca rơi xuống

↓

Cảm biến phát hiện

↓

Mở cửa lấy hàng

↓

Kết thúc

Toàn bộ quá trình chỉ khoảng 2–4 giây.

🚀 Laravel 12 (2026) — Bài 25 — Authorization trong Laravel 12

Kiểm soát quyền truy cập dữ liệu bằng Gate và Policy

---

Sau khi hoàn thành:

• Bài 21 — Laravel Breeze

• Bài 22 — Login

• Bài 23 — Register

• Bài 24 — Middleware

Chúng ta đã có hệ thống:

✅ Đăng ký tài khoản
✅ Đăng nhập
✅ Session Authentication
✅ Bảo vệ Route bằng Middleware

Nhưng hiện tại Laravel mới chỉ biết:

"Người này đã đăng nhập hay chưa?"

Ví dụ:

Route::middleware('auth')->group(function(){

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

});

Middleware auth chỉ kiểm tra:

User có đăng nhập?
        |
        |
       Có
        |
Cho phép truy cập

Nhưng trong thực tế CMS Blog cần nhiều hơn:

Ví dụ:

User A tạo bài viết:

ID: 10
Title: Laravel 12 Tutorial
User_id: 5

User B đăng nhập.

Nếu User B truy cập:

/posts/10/edit

thì sao?

Nếu chỉ dùng:

Route::middleware('auth')

Laravel sẽ cho phép.

Vấn đề:

User B
   |
   |
   V

Sửa bài viết của User A

Đây là lỗi phân quyền.

🚀 Laravel 12 (2026) — Bài 24 — Middleware

Ở các bài trước, chúng ta đã cài đặt Laravel Breeze, đăng ký tài khoản và đăng nhập vào hệ thống.

Tuy nhiên, hiện tại nếu người dùng biết đường dẫn trực tiếp như:

/posts/create

hoặc:

/dashboard

thì liệu họ có thể truy cập được hay không?

Đó chính là nhiệm vụ của Middleware.

Middleware đóng vai trò như một lớp bảo vệ, kiểm tra mọi yêu cầu trước khi cho phép truy cập vào Controller hoặc Route.

---

Middleware là gì?

Middleware là đoạn mã nằm giữa Request và Controller.

Mọi yêu cầu gửi đến Laravel đều có thể đi qua một hoặc nhiều Middleware.

Sơ đồ:

Người dùng

      │

      ▼

HTTP Request

      │

      ▼

Middleware

      │

      ▼

Controller

      │

      ▼

Response

Nếu Middleware từ chối yêu cầu, Controller sẽ không được thực thi.

Phiên bản mini máy bán nước tự động

Một phiên bản mini sẽ giúp bạn học gần như toàn bộ nguyên lý của máy bán hàng tự động mà chi phí thấp hơn rất nhiều.

🚀 Laravel 12 (2026) — Bài 23 — Register

Ở bài trước, chúng ta đã tìm hiểu cách đăng nhập (Login) hoạt động trong Laravel.

Trong bài này, chúng ta sẽ tìm hiểu Register – chức năng tạo tài khoản mới cho người dùng.

Laravel Breeze đã tạo sẵn toàn bộ quy trình đăng ký, nhưng hiểu cách nó hoạt động sẽ giúp bạn dễ dàng tùy biến theo yêu cầu của từng dự án.

---

Register là gì?

Register là quá trình tạo một tài khoản mới.

Thông thường người dùng sẽ nhập:

• Họ tên

• Email

• Mật khẩu

• Xác nhận mật khẩu

Sau khi đăng ký thành công, Laravel sẽ:

• Kiểm tra dữ liệu.

• Mã hóa mật khẩu.

• Lưu User vào Database.

• Đăng nhập tự động.

• Chuyển tới Dashboard.

  

Bài 12 — Promise trong Node.js

Thuộc phần 3: Asynchronous Programming

---

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

Sau bài này, bạn sẽ hiểu:

• Promise là gì.

• Vì sao Promise ra đời.

• Ba trạng thái của Promise.

• Cách tạo Promise.

• .then()

• .catch()

• .finally()

• Promise Chaining.

• Promise trong Node.js thực tế.

  

🚀 Laravel 12 (2026) — Bài 22 — Login

Ở bài trước, chúng ta đã cài đặt Laravel Breeze và có thể đăng ký, đăng nhập vào hệ thống.

Tuy nhiên, khi người dùng nhập Email và Password rồi nhấn Login, phía sau Laravel đã thực hiện những công việc gì?

Trong bài này, chúng ta sẽ tìm hiểu quy trình đăng nhập, Session và cách lấy thông tin người dùng đang đăng nhập để sử dụng trong ứng dụng.

---

Login là gì?

Login (Đăng nhập) là quá trình xác thực người dùng.

Người dùng cung cấp:

• Email

• Password

Laravel sẽ kiểm tra thông tin này với dữ liệu trong cơ sở dữ liệu.

Nếu hợp lệ:

• Tạo Session 

• Ghi nhớ người dùng.

• Cho phép truy cập các trang được bảo vệ.

Nếu không hợp lệ:

• Trả về trang đăng nhập.

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

  

🚀 Laravel 12 (2026) — Bài 21 — Laravel Breeze

Errors log:

Sau khi cài Breeze file route bị ghi đè (mất dữ liệu)

-> sửa lại thêm middleware (để Breeze xác thực mới cho vào link)

Ví dụ:

use App\Http\Controllers\PostController;
use App\Http\Controllers\CategoryController;

Route::middleware('auth')->group(function () {

    Route::resource('posts', PostController::class);

    Route::resource('categories', CategoryController::class);

});

và giữ lại:

require __DIR__.'/auth.php';

ở cuối file.

---

Đến thời điểm này, chúng ta đã có thể xây dựng một Blog CMS với các chức năng như:

• Quản lý Post

• Category

• Tag

• Relationship

• Form

• Validation

• Upload File

Tuy nhiên, ứng dụng vẫn còn thiếu một thành phần rất quan trọng:

Hệ thống đăng nhập và quản lý người dùng.

Laravel cung cấp một giải pháp chính thức để xây dựng Authentication hiện đại mang tên Laravel Breeze.

🚀 Node.js LTS (2026) — Bài 11: Callback - Nền tảng của lập trình bất đồng bộ 🔄

"Trước khi có Promise và Async/Await, Callback chính là cách Node.js xử lý các tác vụ bất đồng bộ. Hiểu Callback sẽ giúp bạn hiểu vì sao JavaScript hiện đại được thiết kế như ngày nay."

---

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

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

• Hiểu Callback là gì.

• Phân biệt Callback đồng bộ và bất đồng bộ.

• Biết cách truyền Callback vào hàm.

• Hiểu Callback Hell là gì.

• Biết khi nào nên dùng Callback.

• Hiểu vì sao Promise và Async/Await ra đời.

  

🎯Web Layout 2026 - Phần 2 # Bài 05 — CSS Reset: Đồng bộ giao diện trên mọi trình duyệt

Sau khi hoàn thành phần HTML5 Enterprise, chúng ta đã có thể xây dựng cấu trúc website chuẩn. Tuy nhiên, nếu mở cùng một trang trên Chrome, Firefox, Edge hoặc Safari, bạn sẽ thấy giao diện có thể không giống nhau.

Nguyên nhân là mỗi trình duyệt đều có một bộ CSS mặc định (User Agent Stylesheet) riêng.

Để giải quyết vấn đề này, lập trình viên thường bắt đầu dự án bằng CSS Reset.

---

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

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

• Hiểu CSS Reset là gì.

• Biết vì sao cần Reset CSS.

• Phân biệt CSS Reset và Normalize CSS.

• Tự xây dựng một bộ Reset hiện đại.

• Chuẩn bị nền tảng cho Responsive Design và Design System.

---

CSS Reset là gì?

CSS Reset là tập hợp các quy tắc CSS giúp đưa tất cả các trình duyệt về một điểm xuất phát giống nhau.

Ví dụ:

Chrome có thể đặt:

body {
    margin: 8px;
}

Trong khi trình duyệt khác có thể xử lý khoảng cách hoặc kích thước mặc định khác nhau.

Điều này khiến cùng một mã HTML hiển thị không đồng nhất.

🎯Web Layout 2026 - Phần 1 # Bài 04 — Accessibility & ARIA: Xây dựng Website thân thiện với mọi người dùng

Một website chuyên nghiệp không chỉ đẹp và nhanh, mà còn phải dễ sử dụng đối với tất cả mọi người, bao gồm:

• Người khiếm thị.

• Người khiếm thính.

• Người lớn tuổi.

• Người gặp khó khăn về vận động.

• Người chỉ sử dụng bàn phím.

• Người dùng thiết bị di động.

Đó chính là mục tiêu của Accessibility (A11y).

HTML5 đã hỗ trợ rất nhiều tính năng Accessibility, và khi kết hợp với ARIA (Accessible Rich Internet Applications), chúng ta có thể xây dựng các website thân thiện với mọi người dùng.

🚀 Node.js LTS (2026) — Bài 10: Streams & Buffer - Xử lý dữ liệu hiệu quả trong Node.js 🌊

"Nếu phải đọc một file 20 GB, bạn sẽ tải toàn bộ vào RAM hay đọc từng phần nhỏ? Câu trả lời chính là Buffer và Stream - hai nền tảng giúp Node.js xử lý dữ liệu cực kỳ hiệu quả."

---

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

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

• Hiểu Buffer là gì.

• Hiểu Stream là gì.

• Biết các loại Stream trong Node.js.

• Thành thạo Readable Stream và Writable Stream.

• Biết sử dụng pipe().

• Hiểu vì sao Stream giúp Node.js xử lý file lớn với hiệu năng cao.

---

Buffer là gì?

Máy tính chỉ hiểu dữ liệu dưới dạng byte.

Node.js sử dụng Buffer để lưu trữ dữ liệu nhị phân (Binary Data).

Ví dụ:

• File ảnh

• Video

• Âm thanh

• PDF

• File ZIP

• Dữ liệu truyền qua mạng

đều được xử lý bằng Buffer.

🚀 Laravel 12 (2026) — Bài 20 — Upload File

Ở bài trước, chúng ta đã học cách Validation dữ liệu trước khi lưu vào cơ sở dữ liệu.

Tuy nhiên, một Blog hoặc CMS không chỉ có văn bản mà còn cần hình ảnh minh họa cho bài viết, ảnh đại diện người dùng hoặc các tệp đính kèm.

Laravel cung cấp hệ thống Storage giúp việc tải lên (Upload) và quản lý tệp trở nên đơn giản, an toàn và dễ mở rộng.

Trong bài này, chúng ta sẽ xây dựng chức năng tải ảnh đại diện cho Post.

---

Upload File là gì?

Upload File là quá trình người dùng gửi tệp từ máy tính lên máy chủ.

Ví dụ:

• Ảnh bài viết.

• Avatar người dùng.

• File PDF.

• Video.

• Tài liệu Word.

Laravel sẽ tiếp nhận tệp thông qua đối tượng Request.

🚀 Node.js LTS (2026) — Bài 09: Events - Lập trình hướng sự kiện với EventEmitter ⚡

"Node.js hoạt động dựa trên mô hình hướng sự kiện (Event-Driven). Hiểu EventEmitter là bước quan trọng để xây dựng các ứng dụng bất đồng bộ hiệu quả."

---

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

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

• Hiểu Event là gì.

• Biết EventEmitter hoạt động như thế nào.

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

  • on()

  • once()

  • emit()

  • off()

• Truyền dữ liệu qua sự kiện.

• Biết cách xây dựng hệ thống Publisher–Subscriber (Pub/Sub) đơn giản.

  

🚀 Laravel 12 (2026) — Bài 19 — Validation

Dưới đây là Bài 19, tiếp nối trực tiếp sau Request. 

Bài này sử dụng luôn các bảng và Model đã có trong khóa học (users, posts, categories, tags, profiles, countries), không tạo thêm cấu trúc dữ liệu mới.

Ở bài trước, chúng ta đã học cách lấy dữ liệu từ người dùng thông qua Request.

Tuy nhiên, dữ liệu người dùng nhập vào không phải lúc nào cũng hợp lệ. Họ có thể để trống tiêu đề, nhập email sai định dạng hoặc chọn một Category không tồn tại.

Laravel cung cấp Validation để kiểm tra dữ liệu trước khi lưu vào cơ sở dữ liệu.

Validation là một trong những tính năng được sử dụng nhiều nhất trong mọi dự án Laravel.

---

Validation là gì?

Validation là quá trình kiểm tra dữ liệu đầu vào.

Ví dụ:

• Tiêu đề không được để trống.

• Nội dung phải có ít nhất 20 ký tự.

• Email phải đúng định dạng.

• Category phải tồn tại.

• Số điện thoại không được vượt quá số ký tự quy định.

Nếu dữ liệu không hợp lệ, Laravel sẽ tự động quay lại Form và hiển thị lỗi.

🚀 Node.js LTS (2026) — Bài 08: OS - Khám phá hệ điều hành với Node.js 🖥️

"Để xây dựng ứng dụng thông minh, đôi khi bạn cần biết nó đang chạy trên hệ điều hành nào, có bao nhiêu CPU, bao nhiêu RAM và thư mục Home ở đâu. Module os giúp Node.js làm được điều đó."

---

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

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

• Hiểu module os là gì.

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

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

• Biết thư mục Home, Temp.

• Phân biệt các hàm thường dùng trong module os.

• Ứng dụng os trong các dự án thực tế.

  

🚀 Laravel 12 (2026) — Bài 18 — Request

Sau khi đã học xong Eloquent ORM và các Relationship, chúng ta sẽ chuyển sang phần Form.

Trong mọi ứng dụng web, người dùng luôn gửi dữ liệu lên máy chủ thông qua biểu mẫu (Form), URL hoặc API. 

Laravel cung cấp lớp Request để tiếp nhận và xử lý những dữ liệu này một cách đơn giản và an toàn.

Ở bài này, chúng ta sẽ tìm hiểu cách lấy dữ liệu từ Request trước khi chuyển sang Validation ở bài tiếp theo.

---

Request là gì?

Request là đối tượng đại diện cho một yêu cầu HTTP gửi đến Laravel.

Ví dụ người dùng:

• Mở một trang web.

• Gửi biểu mẫu thêm bài viết.

• Nhấn nút tìm kiếm.

• Cập nhật thông tin cá nhân.

Tất cả dữ liệu đều được Laravel đóng gói trong đối tượng Request.

🎯Web Layout 2026 - Phần 1 # Bài 03 — SEO Friendly HTML: Xây dựng HTML thân thiện với Công cụ Tìm kiếm

Một website đẹp nhưng không ai tìm thấy trên Google thì cũng khó phát huy giá trị. Vì vậy, ngay từ khi viết HTML, chúng ta cần xây dựng cấu trúc thân thiện với công cụ tìm kiếm (SEO - Search Engine Optimization).

SEO không chỉ là thêm từ khóa hay cài plugin. Nền tảng của SEO bắt đầu từ HTML chuẩn, Semantic HTML, nội dung rõ ràng và cấu trúc hợp lý.

Trong bài học này, chúng ta sẽ tìm hiểu cách xây dựng một trang HTML dễ hiểu đối với Google và các công cụ tìm kiếm khác.

---

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

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

• Hiểu SEO Friendly HTML là gì.

• Biết cách sử dụng đúng các thẻ Heading.

• Viết Title và Meta Description hiệu quả.

• Tối ưu hình ảnh và liên kết.

• Xây dựng cấu trúc HTML giúp Google dễ thu thập dữ liệu.

• Tránh những lỗi SEO HTML phổ biến.

  

🎯Web Layout 2026 - Phần 1 # Bài 02 — Form Enterprise: Xây dựng Biểu mẫu Chuyên nghiệp với HTML5

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

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

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

---

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

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

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

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

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

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

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