lt;blockquotegt;lt;pgt;Đây là lt;stronggt;trái tim của máy bán nước tự độnglt;/stronggt;. Nếu trục xoắn hoạt động không chính xác, máy sẽ dễ bị kẹt hoặc nhả nhiều hơn một sản phẩm.lt;/pgt;lt;/blockquotegt;lt;hr /gt;lt;h1gt;Mục tiêult;/h1gt;lt;pgt;Sau bài này bạn sẽ:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Hiểu nguyên lý của trục xoắn.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Biết cách chọn kích thước phù hợp.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Biết cách tự chế một trục xoắn đơn giản.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chuẩn bị lắp động cơ ở bài sau.lt;/pgt;lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;a href=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8gsyqPNEikGVc3mMmnRDb1CT99y6rMhkt-x6YMhFKFtFcGN8dE4ZfFqRnz0wloopGX7G2X7qSV3vLIOXYRugGJJJBosPM72-UzRkZx41E6oH4FdgLY6AzqeyZirpAhwpTUYPUn2HLeXuors8BFBdLg5mPwQAWBOb0HYKHdSmuPsRUGyTZzG88eWc2rI/s1402/vending-machine-dalat.pngquot; imageanchor=quot;1quot; style=quot;margin-left: 1em; margin-right: 1em;quot;gt;lt;img border=quot;0quot; data-original-height=quot;1122quot; data-original-width=quot;1402quot; height=quot;256quot; src=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8gsyqPNEikGVc3mMmnRDb1CT99y6rMhkt-x6YMhFKFtFcGN8dE4ZfFqRnz0wloopGX7G2X7qSV3vLIOXYRugGJJJBosPM72-UzRkZx41E6oH4FdgLY6AzqeyZirpAhwpTUYPUn2HLeXuors8BFBdLg5mPwQAWBOb0HYKHdSmuPsRUGyTZzG88eWc2rI/s320/vending-machine-dalat.pngquot; width=quot;320quot; /gt;lt;/agt;lt;spangt;lt;a name=#39;more#39;gt;lt;/agt;lt;/spangt;lt;/divgt;lt;pgt;lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Trục xoắn là gì?lt;/h1gt;lt;pgt;Trục xoắn (Spiral Dispenser) là một thanh thép được uốn thành hình lò xo.lt;/pgt;lt;pgt;Nó có nhiệm vụ:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Giữ sản phẩm.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Đẩy sản phẩm tiến về phía trước.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chỉ nhả đúng lt;stronggt;1 sản phẩmlt;/stronggt; khi động cơ quay.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;Nhìn từ trên xuống ┌────────────────────────────┐ 🥤 🥤 🥤 🥤 🥤 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ └────────────────────────────┘ @ = Trục xoắn lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;Tại sao chỉ rơi một lon?lt;/h1gt;lt;pgt;Ban đầu:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;🥤🥤🥤🥤🥤 @@@@@@@@@@@@ lt;/codegt;lt;/pregt;lt;pgt;Sau khi động cơ quay:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;🥤🥤🥤🥤 @@@@@@@@@@@ 🥤 ↓ lt;/codegt;lt;/pregt;lt;pgt;Lon đầu tiên đi qua mép khay và rơi xuống.lt;/pgt;lt;pgt;Các lon phía sau chỉ tiến lên một khoảng ngắn.lt;/pgt;lt;hr /gt;lt;h1gt;Góc quay bao nhiêu?lt;/h1gt;lt;pgt;Không phải lúc nào cũng quay một vòng (360°).lt;/pgt;lt;pgt;Có 3 cách phổ biến:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Góc quaylt;/thgt;lt;thgt;Ứng dụnglt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;90°lt;/tdgt;lt;tdgt;Hộp nhỏlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;180°lt;/tdgt;lt;tdgt;Chai nhỏlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;360°lt;/tdgt;lt;tdgt;Lon nước, snacklt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;pgt;Ở phiên bản mini, chúng ta sẽ điều khiển lt;stronggt;quay đúng 1 vòng (360°)lt;/stronggt; vì dễ lập trình và dễ hiệu chỉnh.lt;/pgt;lt;hr /gt;lt;h1gt;Kích thước trục xoắnlt;/h1gt;lt;pgt;Ví dụ bán lon Coca 330ml:lt;/pgt;lt;pgt;Đường kính lon khoảng lt;stronggt;66 mmlt;/stronggt;.lt;/pgt;lt;pgt;Nên chọn:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Thông sốlt;/thgt;lt;thgt;Giá trịlt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;Đường kính trụclt;/tdgt;lt;tdgt;70–75 mmlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Bước xoắnlt;/tdgt;lt;tdgt;75–80 mmlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Chiều dàilt;/tdgt;lt;tdgt;30–40 cmlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;pgt;Nguyên tắc:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Trục quá nhỏ → lon bị kẹt.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Trục quá lớn → lon dễ đổ.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bước xoắn quá ngắn → khó di chuyển.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bước xoắn quá dài → có thể nhả hai lon.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Vật liệult;/h1gt;lt;pgt;Có thể dùng:lt;/pgt;lt;h3gt;Cách 1 – Thép lò xolt;/h3gt;lt;pgt;Ưu điểm:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Rẻ.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chịu lực tốt.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Nhược điểm:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Khó uốn.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h3gt;Cách 2 – In 3Dlt;/h3gt;lt;pgt;Ưu điểm:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Chính xác.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Dễ thay đổi kích thước.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Nhược điểm:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Cần máy in 3D.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h3gt;Cách 3 – Mua sẵnlt;/h3gt;lt;pgt;Hiện nay có thể mua:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Spiral Coillt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Vending Machine Spirallt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Nhiều kích thước khác nhau.lt;/pgt;lt;hr /gt;lt;h1gt;Trục trung tâmlt;/h1gt;lt;pgt;Giữa trục xoắn cần có một thanh thép.lt;/pgt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;==================== @@@@@@@@@@@@@@@@@@@@ ==================== lt;/codegt;lt;/pregt;lt;pgt;Thanh này giúp:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Không bị cong.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Truyền lực từ động cơ.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Gắn với động cơlt;/h1gt;lt;pgt;Đầu trục:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;Motor █████ │ Khớp nối │ ================= @@@@@@@@@@@@@@@@@ lt;/codegt;lt;/pregt;lt;pgt;Không nên gắn trực tiếp vào trục motor vì:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Dễ lệch tâm.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Dễ rung.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Mau hỏng bạc đạn.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Nên dùng lt;stronggt;khớp nối trục (shaft coupler)lt;/stronggt;.lt;/pgt;lt;hr /gt;lt;h1gt;Hai đầu đỡlt;/h1gt;lt;pgt;Một đầu nối với motor.lt;/pgt;lt;pgt;Đầu còn lại nên có bạc đạn.lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;Motor ================= Bearing lt;/codegt;lt;/pregt;lt;pgt;Nếu không có bạc đạn:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Trục dễ võng.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Quay nặng.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Hao điện.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Chống rơi hai lonlt;/h1gt;lt;pgt;Máy thương mại thường có thêm lt;stronggt;vách chặnlt;/stronggt;.lt;/pgt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;🥤🥤🥤🥤 @@@@@@@@@@@@ ──────────── Vách chặn lt;/codegt;lt;/pregt;lt;pgt;Vách này giữ lon thứ hai lại khi lon đầu tiên rơi.lt;/pgt;lt;pgt;Ở bản mini, bạn có thể dùng một thanh nhựa hoặc mica nhỏ để thử nghiệm.lt;/pgt;lt;hr /gt;lt;h1gt;Thử nghiệmlt;/h1gt;lt;pgt;Làm một trục xoắn duy nhất.lt;/pgt;lt;pgt;Đặt:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;5 lon.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Quay 10 lần.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Ghi lại:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Lầnlt;/thgt;lt;thgt;Kết quảlt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;1lt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;2lt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;3lt;/tdgt;lt;tdgt;❌ Kẹtlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;4lt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;5lt;/tdgt;lt;tdgt;❌ Rơi 2 lonlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;pgt;Nếu xuất hiện lỗi, hãy điều chỉnh:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Góc quay.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bước xoắn.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Khoảng cách giữa lon và vách chặn.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Đừng vội lắp 4 ngăn cùng lúc. Một ngăn hoạt động ổn định trước sẽ giúp bạn tiết kiệm rất nhiều thời gian.lt;/pgt;lt;hr /gt;lt;h1gt;Những lỗi người mới thường gặplt;/h1gt;lt;pgt;❌ Trục xoắn quá sát đáy → quay rất nặng.lt;/pgt;lt;pgt;❌ Trục xoắn quá cao → lon lọt xuống dưới.lt;/pgt;lt;pgt;❌ Động cơ quá yếu → không đủ mô-men xoắn.lt;/pgt;lt;pgt;❌ Khung bị lệch → trục cọ vào thành.lt;/pgt;lt;pgt;❌ Không có bạc đạn → trục rung mạnh.lt;/pgt;lt;hr /gt;lt;h1gt;Kiến thức mở rộnglt;/h1gt;lt;pgt;Máy bán hàng thương mại không chỉ bán lon nước. Tùy loại sản phẩm sẽ dùng cơ cấu khác nhau:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Sản phẩmlt;/thgt;lt;thgt;Cơ cấult;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;Lon nướclt;/tdgt;lt;tdgt;Trục xoắnlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Bánh snacklt;/tdgt;lt;tdgt;Trục xoắnlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Chai nước lớnlt;/tdgt;lt;tdgt;Trục xoắn cỡ lớn hoặc khay đẩylt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Hộp cơmlt;/tdgt;lt;tdgt;Khay trượtlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Thuốclt;/tdgt;lt;tdgt;Ngăn kéo định vịlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Điện thoại, tai nghelt;/tdgt;lt;tdgt;Cánh tay gắp hoặc khay khóa điệnlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;pgt;Đó là lý do bạn thấy nhiều máy bán hàng có hình thức giống nhau nhưng bên trong lại rất khác.lt;/pgt;lt;hr /gt;lt;h1gt;Tổng kếtlt;/h1gt;lt;pgt;Sau bài này, bạn đã nắm được bộ phận quan trọng nhất của máy bán nước tự động:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Hiểu nguyên lý hoạt động của trục xoắn.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Biết cách chọn kích thước theo sản phẩm.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Biết cách lắp trục với động cơ.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Biết các lỗi thường gặp và cách khắc phục.lt;/pgt;lt;/ligt;lt;/ulgt;lt;h2gt;Bài tiếp theolt;/h2gt;lt;pgt;lt;stronggt;🥤 Bài 4 — Chọn động cơ và điều khiển bằng ESP32lt;/stronggt;lt;/pgt;lt;pgt;Chúng ta sẽ tìm hiểu:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Động cơ DC, động cơ bước hay servo phù hợp hơn?lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Cách tính mô-men xoắn cần thiết.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chọn driver điều khiển.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Viết chương trình đầu tiên để nhả đúng một lon nước chỉ bằng một nút bấm.lt;/pgt;lt;/ligt;lt;/ulgt;

lt;pgt;Từ bài này chúng ta sẽ bắt đầu xây dựng dự án Blog CMS hoàn chỉnh.lt;/pgt;lt;pgt;Chức năng đầu tiên là quản lý danh mục bài viết (Categories) với đầy đủ các thao tác thêm – sửa – xóa – tìm kiếm – phân trang.lt;/pgt;lt;h3gt;Mục tiêu bài họclt;/h3gt;lt;ulgt;lt;ligt;lt;pgt;Tạo Resource Controller cho Category.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Xây dựng giao diện quản trị bằng Blade + Tailwind CSS.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Validate dữ liệu đầu vào.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Tìm kiếm theo tên danh mục.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Phân trang dữ liệu.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Hoàn thiện module CRUD chuẩn Laravel 12.lt;/pgt;lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;a href=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdciyuCHE742MjSvJDNRyqhBP5y58AK2pMxWn7k1TCg15lBHhKA5JGrqkwed8u2vx-yDXyBgsT8XlXMTnDfbDuZIUGBnAQ94KkjFk4mdaEyGJK2qjHrKhsfw_8BpxmtBiQPoGI9aGuw5hjmKyvV94Y6xysNbMF2GkyZWwk_VM3XiTTcyi5thKbDkhsdc/s1536/laravel-thu.pngquot; style=quot;margin-left: 1em; margin-right: 1em;quot;gt;lt;img border=quot;0quot; data-original-height=quot;1024quot; data-original-width=quot;1536quot; height=quot;213quot; src=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdciyuCHE742MjSvJDNRyqhBP5y58AK2pMxWn7k1TCg15lBHhKA5JGrqkwed8u2vx-yDXyBgsT8XlXMTnDfbDuZIUGBnAQ94KkjFk4mdaEyGJK2qjHrKhsfw_8BpxmtBiQPoGI9aGuw5hjmKyvV94Y6xysNbMF2GkyZWwk_VM3XiTTcyi5thKbDkhsdc/s320/laravel-thu.pngquot; width=quot;320quot; /gt;lt;/agt;lt;spangt;lt;a name=#39;more#39;gt;lt;/agt;lt;/spangt;lt;/divgt;lt;br /gt;lt;pgt;lt;/pgt;lt;/ligt;lt;/ulgt;lt;h3gt;1. Tạo Model, Migration và Controllerlt;/h3gt;lt;pgt;Trường hợp 01: các bài trước đã tạo category rồi nhưng thiếu columnlt;/pgt;lt;h3 class=quot;PDq2pG_selectionAnchorContainerquot; data-end=quot;199quot; data-section-id=quot;9rzhbcquot; data-start=quot;143quot;gt;Tạo migration mới để thêm cộtlt;span aria-hidden=quot;truequot; class=quot;PDq2pG_selectionAnchorquot;gt;lt;/spangt;lt;/h3gt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;303quot; data-start=quot;201quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;php artisan lt;span class=quot;ͼ10quot;gt;makelt;/spangt;:migration add_slug_and_description_to_categories_table lt;span class=quot;ͼ12quot;gt;--tablelt;/spangt;lt;span class=quot;ͼvquot;gt;=lt;/spangt;categorieslt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;quot;gt;lt;div class=quot;quot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;p data-end=quot;326quot; data-start=quot;305quot;gt;Trong file migration:lt;/pgt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;891quot; data-start=quot;328quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up(): void { Schema::table(#39;categories#39;, function (Blueprint $table) { $table-gt;string(#39;slug#39;)-gt;unique()-gt;after(#39;name#39;); $table-gt;text(#39;description#39;)-gt;nullable()-gt;after(#39;slug#39;); }); } public function down(): void { Schema::table(#39;categories#39;, function (Blueprint $table) { $table-gt;dropColumn([#39;slug#39;, #39;description#39;]); }); } };lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;1087quot; data-start=quot;1050quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;quot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;pgt; lt;/pgt;lt;h2 class=quot;PDq2pG_selectionAnchorContainerquot; data-end=quot;366quot; data-section-id=quot;1yp4vazquot; data-start=quot;325quot;gt;Sửa CategoryFactory (nếu dùng factory)lt;span aria-hidden=quot;truequot; class=quot;PDq2pG_selectionAnchorquot;gt;lt;/spangt;lt;/h2gt;lt;p data-end=quot;371quot; data-start=quot;368quot;gt;Mở:lt;/pgt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;419quot; data-start=quot;373quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1quot;gt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;pe-11 pt-3quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;database/factories/CategoryFactory.phplt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;quot;gt;lt;div class=quot;quot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;p data-end=quot;433quot; data-start=quot;421quot;gt;Nếu đang là:lt;/pgt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;495quot; data-start=quot;435quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;return [ #39;name#39; =gt; fake()-gt;words(2, true), ];lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;quot;gt;lt;div class=quot;quot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;p data-end=quot;507quot; data-start=quot;497quot;gt;đổi thành:lt;/pgt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;689quot; data-start=quot;509quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;use Illuminate\Support\Str; return [ #39;name#39; =gt; $name = fake()-gt;unique()-gt;words(2, true), #39;slug#39; =gt; Str::slug($name), #39;description#39; =gt; fake()-gt;sentence(), ];lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;quot;gt;lt;div class=quot;quot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;hr data-end=quot;694quot; data-start=quot;691quot; /gt;lt;p data-end=quot;1112quot; data-start=quot;1089quot;gt; lt;/pgt;lt;p class=quot;PDq2pG_selectionAnchorContainerquot; data-end=quot;1088quot; data-start=quot;1070quot;gt;lt;bgt;File seeder:lt;/bgt;lt;span aria-hidden=quot;truequot; class=quot;PDq2pG_selectionAnchorquot;gt;lt;/spangt;lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;1402quot; data-start=quot;1090quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;use App\Models\Category; use Illuminate\Support\Str; public function run(): void { foreach ([#39;Laravel#39;, #39;PHP#39;, #39;MySQL#39;] as $name) { Category::create([ #39;name#39; =gt; $name, #39;slug#39; =gt; Str::slug($name), #39;description#39; =gt; quot;Danh mục {$name}quot;, ]); } }lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;quot;gt;lt;div class=quot;quot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;h2 data-end=quot;1436quot; data-section-id=quot;1wi924lquot; data-start=quot;1404quot;gt;Sau đólt;/h2gt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;1575quot; data-start=quot;1531quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;php artisan migrate:fresh lt;span class=quot;ͼ12quot;gt;--seedlt;/spangt;lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;pgt;Trường hợp 2: nếu chưa có Category, tạo nhanh bằng Artisan:lt;/pgt;lt;pgt;Bashlt;/pgt;lt;pregt;lt;codegt;php artisan make:model Category -mcr lt;/codegt;lt;/pregt;lt;pgt;Laravel sẽ tạo:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;lt;code inline=quot;quot;gt;app/Models/Category.phplt;/codegt;lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;code inline=quot;quot;gt;database/migrations/xxxx_create_categories_table.phplt;/codegt;lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;code inline=quot;quot;gt;app/Http/Controllers/CategoryController.phplt;/codegt;lt;/pgt;lt;/ligt;lt;/ulgt;lt;h3gt;Migrationlt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;Schema::create(#39;categories#39;, function (Blueprint $table) { $table-gt;id(); $table-gt;string(#39;name#39;); $table-gt;string(#39;slug#39;)-gt;unique(); $table-gt;text(#39;description#39;)-gt;nullable(); $table-gt;timestamps(); }); lt;/codegt;lt;/pregt;lt;pgt;Chạy migration:lt;/pgt;lt;pgt;Bashlt;/pgt;lt;pregt;lt;codegt;php artisan migrate lt;/codegt;lt;/pregt;lt;h3gt;2. Khai báo Modellt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;namespace App\Models; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Factories\HasFactory; class Category extends Model { use HasFactory; protected $fillable = [ #39;name#39;, #39;slug#39;, #39;description#39; ]; } lt;/codegt;lt;/pregt;lt;h3gt;3. Định nghĩa Resource Routelt;/h3gt;lt;pgt;Mở lt;code inline=quot;quot;gt;routes/web.phplt;/codegt;:lt;/pgt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;use App\Http\Controllers\CategoryController; Route::middleware([#39;auth#39;])-gt;group(function () { Route::resource(#39;categories#39;, CategoryController::class); }); lt;/codegt;lt;/pregt;lt;pgt;Laravel tự tạo 7 route chuẩn:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Methodlt;/thgt;lt;thgt;URLlt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;GETlt;/tdgt;lt;tdgt;/categorieslt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;GETlt;/tdgt;lt;tdgt;/categories/createlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;POSTlt;/tdgt;lt;tdgt;/categorieslt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;GETlt;/tdgt;lt;tdgt;/categories/{quot;{category}quot;}lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;GETlt;/tdgt;lt;tdgt;/categories/{quot;{category}quot;}/editlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;PUTlt;/tdgt;lt;tdgt;/categories/{quot;{category}quot;}lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;DELETElt;/tdgt;lt;tdgt;/categories/{quot;{category}quot;}lt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;h3gt;4. Hiển thị danh sách Categories (---)lt;/h3gt;lt;h3gt;Controllerlt;/h3gt;lt;pgt;PHP (pagination bằng Laravel)lt;/pgt;lt;pregt;lt;codegt;use App\Models\Category; use Illuminate\Http\Request; public function index(Request $request) { $categories = Category::query() -gt;when($request-gt;keyword, function ($query, $keyword) { $query-gt;where(#39;name#39;, #39;like#39;, quot;%{$keyword}%quot;); }) -gt;latest() -gt;paginate(10) -gt;withQueryString(); return view(#39;categories.index#39;, compact(#39;categories#39;)); } lt;/codegt;lt;/pregt;lt;h3gt;View: resources/views/categories/index.blade.phplt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;lt;x-app-layoutgt; lt;div class=quot;max-w-7xl mx-auto p-6quot;gt; lt;div class=quot;flex justify-between items-center mb-6quot;gt; lt;h1 class=quot;text-2xl font-boldquot;gt;Quản lý Categorieslt;/h1gt; lt;a href=quot;{{ route(#39;categories.create#39;) }}quot; class=quot;bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700quot;gt; + Thêm Category lt;/agt; lt;/divgt; lt;form method=quot;GETquot; class=quot;mb-4quot;gt; lt;input type=quot;textquot; name=quot;keywordquot; value=quot;{{ request(#39;keyword#39;) }}quot; placeholder=quot;Tìm kiếm category...quot; class=quot;border rounded-lg px-4 py-2 w-80quot;gt; lt;button class=quot;bg-gray-800 text-white px-4 py-2 rounded-lgquot;gt; Tìm lt;/buttongt; lt;/formgt; lt;div class=quot;bg-white rounded-xl shadow overflow-hiddenquot;gt; lt;table class=quot;min-w-fullquot;gt; lt;thead class=quot;bg-gray-100quot;gt; lt;trgt; lt;th class=quot;px-4 py-3 text-leftquot;gt;IDlt;/thgt; lt;th class=quot;px-4 py-3 text-leftquot;gt;Tênlt;/thgt; lt;th class=quot;px-4 py-3 text-leftquot;gt;Sluglt;/thgt; lt;th class=quot;px-4 py-3 text-leftquot;gt;Ngày tạolt;/thgt; lt;th class=quot;px-4 py-3 text-rightquot;gt;Thao táclt;/thgt; lt;/trgt; lt;/theadgt; lt;tbody class=quot;divide-yquot;gt; @forelse($categories as $category) lt;tr class=quot;hover:bg-gray-50quot;gt; lt;td class=quot;px-4 py-3quot;gt;{{ $category-gt;id }}lt;/tdgt; lt;td class=quot;px-4 py-3 font-mediumquot;gt; {{ $category-gt;name }} lt;/tdgt; lt;td class=quot;px-4 py-3 text-gray-600quot;gt; {{ $category-gt;slug }} lt;/tdgt; lt;td class=quot;px-4 py-3quot;gt; {{ $category-gt;created_at-gt;format(#39;d/m/Y#39;) }} lt;/tdgt; lt;td class=quot;px-4 py-3 text-right space-x-2quot;gt; lt;a href=quot;{{ route(#39;categories.edit#39;, $category) }}quot; class=quot;text-blue-600 hover:underlinequot;gt; Sửa lt;/agt; lt;form action=quot;{{ route(#39;categories.destroy#39;, $category) }}quot; method=quot;POSTquot; class=quot;inlinequot;gt; @csrf @method(#39;DELETE#39;) lt;button onclick=quot;return confirm(#39;Xóa category này?#39;)quot; class=quot;text-red-600 hover:underlinequot;gt; Xóa lt;/buttongt; lt;/formgt; lt;/tdgt; lt;/trgt; @empty lt;trgt; lt;td colspan=quot;5quot; class=quot;text-center py-8 text-gray-500quot;gt; Chưa có dữ liệu lt;/tdgt; lt;/trgt; @endforelse lt;/tbodygt; lt;/tablegt; lt;/divgt; lt;div class=quot;mt-6quot;gt; {{ $categories-gt;links() }} lt;/divgt; lt;/divgt; lt;/x-app-layoutgt; lt;/codegt;lt;/pregt;lt;h3gt;5. Tạo Category mớilt;/h3gt;lt;h3gt;Form Createlt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;lt;form action=quot;{{ route(#39;categories.store#39;) }}quot; method=quot;POSTquot;gt; @csrf lt;div class=quot;mb-4quot;gt; lt;label class=quot;block mb-1quot;gt;Tên Categorylt;/labelgt; lt;input type=quot;textquot; name=quot;namequot; value=quot;{{ old(#39;name#39;) }}quot; class=quot;w-full border rounded-lg px-4 py-2quot;gt; @error(#39;name#39;) lt;p class=quot;text-red-500 text-sm mt-1quot;gt;{{ $message }}lt;/pgt; @enderror lt;/divgt; lt;div class=quot;mb-4quot;gt; lt;label class=quot;block mb-1quot;gt;Sluglt;/labelgt; lt;input type=quot;textquot; name=quot;slugquot; value=quot;{{ old(#39;slug#39;) }}quot; class=quot;w-full border rounded-lg px-4 py-2quot;gt; lt;/divgt; lt;div class=quot;mb-4quot;gt; lt;label class=quot;block mb-1quot;gt;Mô tảlt;/labelgt; lt;textarea name=quot;descriptionquot; class=quot;w-full border rounded-lg px-4 py-2quot; rows=quot;4quot;gt;{{ old(#39;description#39;) }}lt;/textareagt; lt;/divgt; lt;button class=quot;bg-blue-600 text-white px-6 py-2 rounded-lgquot;gt; Lưu lt;/buttongt; lt;/formgt; lt;/codegt;lt;pgt;lt;br /gt;lt;/pgt;lt;/pregt;lt;h3gt;Controller Storelt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;public function store(Request $request) { $validated = $request-gt;validate([ #39;name#39; =gt; #39;required|min:2|max:100#39;, #39;slug#39; =gt; #39;required|unique:categories,slug#39;, #39;description#39; =gt; #39;nullable|max:1000#39;, ]); Category::create($validated); return redirect() -gt;route(#39;categories.index#39;) -gt;with(#39;success#39;, #39;Thêm category thành công!#39;); } lt;/codegt;lt;/pregt;lt;h3gt;6. Cập nhật Categorylt;/h3gt;lt;h3gt;Controller Editlt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;public function edit(Category $category) { return view(#39;categories.edit#39;, compact(#39;category#39;)); } lt;/codegt;lt;/pregt;lt;h3gt;Controller Updatelt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;public function update(Request $request, Category $category) { $validated = $request-gt;validate([ #39;name#39; =gt; #39;required|min:2|max:100#39;, #39;slug#39; =gt; #39;required|unique:categories,slug,#39; . $category-gt;id, #39;description#39; =gt; #39;nullable|max:1000#39;, ]); $category-gt;update($validated); return redirect() -gt;route(#39;categories.index#39;) -gt;with(#39;success#39;, #39;Cập nhật thành công!#39;); } lt;/codegt;lt;/pregt;lt;pgt;Điểm quan trọng là rule:lt;/pgt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;#39;slug#39; =gt; #39;required|unique:categories,slug,#39; . $category-gt;id lt;/codegt;lt;/pregt;lt;pgt;Điều này cho phép giữ nguyên slug hiện tại mà không bị báo lỗi trùng.lt;/pgt;lt;h3gt;7. Xóa Categorylt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;public function destroy(Category $category) { $category-gt;delete(); return redirect() -gt;route(#39;categories.index#39;) -gt;with(#39;success#39;, #39;Đã xóa category!#39;); } lt;/codegt;lt;/pregt;lt;pgt;Trong bài 30 chúng ta sẽ nâng cấp thành Soft Delete.lt;/pgt;lt;h3gt;8. Tìm kiếm Categorieslt;/h3gt;lt;pgt;Chức năng tìm kiếm đã được tích hợp trong phương thức lt;code inline=quot;quot;gt;index()lt;/codegt;:lt;/pgt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;-gt;when($request-gt;keyword, function ($query, $keyword) { $query-gt;where(#39;name#39;, #39;like#39;, quot;%{$keyword}%quot;); }) lt;/codegt;lt;/pregt;lt;pgt;Ví dụ:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Nhập lt;code inline=quot;quot;gt;laravellt;/codegt; → hiển thị các category chứa từ “laravel”.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Nhập lt;code inline=quot;quot;gt;phplt;/codegt; → hiển thị các category liên quan PHP.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Để trống → hiển thị toàn bộ dữ liệu.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Nhờ lt;code inline=quot;quot;gt;withQueryString()lt;/codegt;, khi chuyển trang Laravel vẫn giữ lại từ khóa tìm kiếm.lt;/pgt;lt;h3gt;9. Phân tranglt;/h3gt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;-gt;paginate(10) lt;/codegt;lt;/pregt;lt;pgt;Hiển thị:lt;/pgt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;{{ $categories-gt;links() }} lt;/codegt;lt;/pregt;lt;pgt;Laravel 12 mặc định sử dụng giao diện phân trang tương thích Tailwind CSS.lt;/pgt;lt;h3gt;10. Hiển thị thông báo thành cônglt;/h3gt;lt;pgt;Thêm vào đầu trang:lt;/pgt;lt;pgt;PHPlt;/pgt;lt;pregt;lt;codegt;@if(session(#39;success#39;)) lt;div class=quot;mb-4 rounded-lg bg-green-100 border border-green-300 text-green-800 px-4 py-3quot;gt; {{ session(#39;success#39;) }} lt;/divgt; @endif lt;/codegt;lt;/pregt;lt;pgt;Kết quả:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Thêm mới → “Thêm category thành công!”lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Cập nhật → “Cập nhật thành công!”lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Xóa → “Đã xóa category!”lt;/pgt;lt;/ligt;lt;/ulgt;lt;h3gt;11. Cấu trúc thư mục sau khi hoàn thànhlt;/h3gt;lt;pregt;lt;codegt;app/ ├── Http/ │ └── Controllers/ │ └── CategoryController.php ├── Models/ │ └── Category.php resources/ └── views/ └── categories/ ├── index.blade.php ├── create.blade.php └── edit.blade.php routes/ └── web.php lt;/codegt;lt;/pregt;lt;h3gt;12. Kết quả đạt đượclt;/h3gt;lt;pgt;Sau bài học này, module Quản lý Categories của Blog CMS đã có đầy đủ:lt;/pgt;lt;pgt;CRUDlt;/pgt;lt;pgt;Quản lý dữ liệult;/pgt;lt;ulgt;lt;ligt;lt;pgt;Danh sách Categorieslt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Thêm mới Categorylt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Cập nhật Categorylt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Xóa Categorylt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Validationlt;/pgt;lt;pgt;Kiểm tra dữ liệult;/pgt;lt;ulgt;lt;ligt;lt;pgt;Validate tên danh mụclt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Validate slug duy nhấtlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Hiển thị lỗi ngay trên formlt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Searchlt;/pgt;lt;pgt;Tìm kiếmlt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Lọc theo tên categorylt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Giữ từ khóa khi chuyển tranglt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Paginationlt;/pgt;lt;pgt;Phân tranglt;/pgt;lt;ulgt;lt;ligt;lt;pgt;10 bản ghi mỗi tranglt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Giao diện Tailwind mặc định của Laravel 12lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Đây chính là mẫu CRUD chuẩn mà chúng ta sẽ tái sử dụng cho nhiều module khác trong dự án.lt;/pgt;lt;h3gt;Bài tiếp theolt;/h3gt;lt;pgt;Sang Bài 27 — CRUD Posts, chúng ta sẽ kết hợp:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Relationship giữa Post và Category.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Gán bài viết cho User.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Upload hình ảnh.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Validate dữ liệu phức tạp hơn.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Hiển thị danh sách bài viết kèm tên danh mục và tác giả.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Từ bài 27 trở đi, dự án Blog CMS sẽ bắt đầu có cấu trúc giống một hệ thống quản trị nội dung thực tế.lt;/pgt;lt;pgt;lt;img alt=quot;03 - Categories Table with Livewire | Laravel Dailyquot; height=quot;277quot; src=quot;https://images.openai.com/static-rsc-4/sRgXxdO4bWka6lah4S9gGY9UykLuZppGHRAKV_AzjknarfMymuHmvpO1s7wzrcza_1h6uFjt1Yg-mCx9iz3hKGixmUEuc3ECeOMZmgE0D84FxDBzx_K0JOL1ZlQpUZKnBvdUJr3QbjEGGqArPWQkrbGHgTb9b7jGOG8ALUG7T5r8wfQNSkhTOfY54HOfxcRz?purpose=fullsizequot; style=quot;font-family: monospace; white-space: pre;quot; width=quot;320quot; /gt;lt;/pgt;

lt;h2gt;Mục tiêult;/h2gt;lt;pgt;Sau bài này bạn sẽ:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Biết cách thiết kế khung máy.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Hiểu kích thước của từng bộ phận.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chuẩn bị sẵn để lắp động cơ ở bài sau.lt;/pgt;lt;/ligt;lt;/ulgt;lt;blockquotegt;lt;pgt;lt;stronggt;Lưu ý:lt;/stronggt; 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 lt;stronggt;đơn giản, chắc chắn và dễ nâng cấplt;/stronggt;.lt;/pgt;lt;/blockquotegt;lt;hr /gt;lt;h1gt;Cấu trúc tổng thểlt;/h1gt;lt;pgt;Máy sẽ chia thành 3 tầng:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;+---------------------------+ | 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 | +---------------------------+ lt;/codegt;lt;/pregt; lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;br /gt;lt;/divgt;lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;a href=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi-v6nhFf57x8ZK33bmcPPH3YdDvrF_qX_o2t4YYawQWrcKhkuPK5AknlwX_mpBogrs70TMmkEHB7vmbIayVhYtGy1p_unHAh1yD41gK83DH6Ax-VPt5I9UuNdXJROc5DDcNCiwiuBKc0JDVMVJnOKjXrD4x2QwoEvl8QoWQriB7FhDWF3uVLd8B9u9mM/s1402/vending-machine-AI.pngquot; imageanchor=quot;1quot; style=quot;margin-left: 1em; margin-right: 1em;quot;gt;lt;img border=quot;0quot; data-original-height=quot;1122quot; data-original-width=quot;1402quot; height=quot;256quot; src=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi-v6nhFf57x8ZK33bmcPPH3YdDvrF_qX_o2t4YYawQWrcKhkuPK5AknlwX_mpBogrs70TMmkEHB7vmbIayVhYtGy1p_unHAh1yD41gK83DH6Ax-VPt5I9UuNdXJROc5DDcNCiwiuBKc0JDVMVJnOKjXrD4x2QwoEvl8QoWQriB7FhDWF3uVLd8B9u9mM/s320/vending-machine-AI.pngquot; width=quot;320quot; /gt;lt;/agt;lt;/divgt;lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;spangt;lt;a name=#39;more#39;gt;lt;/agt;lt;/spangt;lt;/divgt; lt;hr /gt;lt;h1gt;Kích thước đề xuấtlt;/h1gt;lt;pgt;Ví dụ:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Bộ phậnlt;/thgt;lt;th align=quot;rightquot;gt;Kích thướclt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;Caolt;/tdgt;lt;td align=quot;rightquot;gt;60 cmlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Rộnglt;/tdgt;lt;td align=quot;rightquot;gt;35 cmlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Sâult;/tdgt;lt;td align=quot;rightquot;gt;30 cmlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;pgt;Đây là kích thước vừa đủ để chứa:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;4 ngăn bán hànglt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Mỗi ngăn 5–6 lonlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;ESP32lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Adapterlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Driver động cơlt;spangt;lt;/spangt;lt;/pgt;lt;!--more--gt;lt;pgt;lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Chọn vật liệult;/h1gt;lt;pgt;Có nhiều lựa chọn:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Vật liệult;/thgt;lt;thgt;Ưu điểmlt;/thgt;lt;thgt;Nhược điểmlt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;MDF 9 mmlt;/tdgt;lt;tdgt;Rẻ, dễ cắtlt;/tdgt;lt;tdgt;Không chịu nướclt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Mica 5 mmlt;/tdgt;lt;tdgt;Đẹp, nhìn thấy bên tronglt;/tdgt;lt;tdgt;Giá cao hơnlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Nhôm định hìnhlt;/tdgt;lt;tdgt;Rất chắclt;/tdgt;lt;tdgt;Chi phí caolt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;In 3Dlt;/tdgt;lt;tdgt;Chính xáclt;/tdgt;lt;tdgt;Chậm nếu kích thước lớnlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;pgt;👉 Đối với người mới, lt;stronggt;MDF + micalt;/stronggt; là lựa chọn cân bằng giữa chi phí và tính thẩm mỹ.lt;/pgt;lt;hr /gt;lt;h1gt;Chia ngănlt;/h1gt;lt;pgt;Ví dụ 4 ngăn:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;+-------------------------+ | A1 | A2 | A3 | A4 | | | | | | | | | | | | | | | | +-------------------------+ lt;/codegt;lt;/pregt;lt;pgt;Mỗi ngăn sẽ có:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;1 trục xoắn.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;1 động cơ.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;5–6 lon nước.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Phía sau máylt;/h1gt;lt;pgt;Toàn bộ phần điện sẽ nằm phía sau:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;+----------------------+ ESP32 Motor Driver Nguồn 12V Dây điện +----------------------+ lt;/codegt;lt;/pregt;lt;pgt;Điều này giúp việc sửa chữa dễ dàng hơn.lt;/pgt;lt;hr /gt;lt;h1gt;Khay nhận hànglt;/h1gt;lt;pgt;Phía dưới cần một khay nghiêng nhẹ:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt; Lon rơi ↓ __________ / / ___/____________ lt;/codegt;lt;/pregt;lt;pgt;Góc nghiêng khoảng lt;stronggt;10–15°lt;/stronggt; là đủ để lon lăn ra phía trước.lt;/pgt;lt;hr /gt;lt;h1gt;Cửa lấy hànglt;/h1gt;lt;pgt;Không cần dùng cửa tự động ở phiên bản đầu.lt;/pgt;lt;pgt;Chỉ cần:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt; ____________ | | | | |____________| lt;/codegt;lt;/pregt;lt;pgt;Một cửa mica nhỏ hoặc cửa nhựa có bản lề là đủ.lt;/pgt;lt;hr /gt;lt;h1gt;Vị trí động cơlt;/h1gt;lt;pgt;Mỗi động cơ đặt ở cuối trục xoắn:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;Motor █████ ======== Spiral ======== 🥤🥤🥤🥤🥤 lt;/codegt;lt;/pregt;lt;pgt;Motor chỉ quay khi khách chọn sản phẩm.lt;/pgt;lt;hr /gt;lt;h1gt;Danh sách vật tư cho khunglt;/h1gt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Vật tưlt;/thgt;lt;th align=quot;rightquot;gt;Số lượnglt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;Tấm MDF 9 mmlt;/tdgt;lt;td align=quot;rightquot;gt;1–2 tấmlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Tấm mica tronglt;/tdgt;lt;td align=quot;rightquot;gt;1 tấmlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Bản lề nhỏlt;/tdgt;lt;td align=quot;rightquot;gt;2lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Tay nắm cửalt;/tdgt;lt;td align=quot;rightquot;gt;1lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Ốc vítlt;/tdgt;lt;td align=quot;rightquot;gt;1 bộlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Ke góc chữ Llt;/tdgt;lt;td align=quot;rightquot;gt;8–12 cáilt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Keo gỗlt;/tdgt;lt;td align=quot;rightquot;gt;1 chailt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;hr /gt;lt;h1gt;Mẹo thiết kếlt;/h1gt;lt;ulgt;lt;ligt;lt;pgt;Để mặt trước bằng mica trong để quan sát sản phẩm.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chừa nắp phía sau có thể tháo ra khi cần sửa chữa.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Khoan sẵn các lỗ đi dây để việc lắp điện gọn gàng.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Chừa khoảng trống phía trên để sau này lắp màn hình hoặc đầu đọc QR.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Chuẩn bị cho bài 3lt;/h1gt;lt;pgt;Ở bài tiếp theo, chúng ta sẽ làm lt;stronggt;bộ phận quan trọng nhất của máy bán hànglt;/stronggt;: lt;stronggt;trục xoắn (spiral dispenser)lt;/stronggt;.lt;/pgt;lt;pgt;Bạn sẽ học:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Vì sao chỉ một lon được đẩy ra mỗi lần.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Cách chọn kích thước lò xo xoắn.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Cách gắn trục xoắn với động cơ.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Cách tự chế trục xoắn nếu không mua sẵn.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Đây là phần quyết định máy hoạt động mượt hay thường xuyên bị kẹt sản phẩm, nên chúng ta sẽ đi thật chi tiết với hình minh họa và bản vẽ đơn giản.lt;/pgt;

lt;h2gt;Mục tiêult;/h2gt;lt;pgt;Sau bài này bạn sẽ hiểu:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Máy bán nước hoạt động như thế nào.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bên trong có những bộ phận gì.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Những gì chúng ta sẽ tự làm.lt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Không cần lập trình.lt;/pgt;lt;pgt;Không cần điện tử.lt;/pgt;lt;pgt;Chỉ cần hiểu nguyên lý.lt;/pgt;lt;hr /gt;lt;h1gt;Máy bán nước thật làm gì?lt;/h1gt;lt;pgt;Ví dụ khách muốn mua Coca.lt;/pgt;lt;pgt;Quy trình diễn ra như sau:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;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 lt;/codegt;lt;/pregt;lt;pgt;Toàn bộ quá trình chỉ khoảng lt;stronggt;2–4 giâylt;/stronggt;.lt;/pgt;lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;a href=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5B8a7bWBAPAQcahvXVc3lNfkHaisXQmJYTlv9z6Lx0E2rQVEXx20IOk4m2iXxLfgUeVnNMJwzwur1aUbJz7OzZTZ6nywLTVgCgnJ9N7IHJq8aSCVW375yUxAm9lRtCYtJqsQJJ11M5RJRgU2yeOQ05hjZJ-lAnVI6DwcQIBN8ytDE5qtHcvLAqxSSuXk/s1402/vending-machine-beach.pngquot; imageanchor=quot;1quot; style=quot;margin-left: 1em; margin-right: 1em;quot;gt;lt;img border=quot;0quot; data-original-height=quot;1402quot; data-original-width=quot;1122quot; height=quot;320quot; src=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5B8a7bWBAPAQcahvXVc3lNfkHaisXQmJYTlv9z6Lx0E2rQVEXx20IOk4m2iXxLfgUeVnNMJwzwur1aUbJz7OzZTZ6nywLTVgCgnJ9N7IHJq8aSCVW375yUxAm9lRtCYtJqsQJJ11M5RJRgU2yeOQ05hjZJ-lAnVI6DwcQIBN8ytDE5qtHcvLAqxSSuXk/s320/vending-machine-beach.pngquot; width=quot;256quot; /gt;lt;/agt;lt;/divgt;lt;spangt;lt;/spangt;lt;pgt;lt;/pgt;lt;a name=#39;more#39;gt;lt;/agt;lt;pgt;lt;/pgt;lt;hr /gt;lt;h1gt;Cấu tạo bên tronglt;/h1gt;lt;pgt;Một máy bán nước có khoảng 6 hệ thống chính:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;+---------------------------+ | Màn hình | +---------------------------+ | Bộ điều khiển | +---------------------------+ | Bộ nhận thanh toán | +---------------------------+ | Động cơ các ngăn | +---------------------------+ | Cảm biến rơi | +---------------------------+ | Kho chứa nước | +---------------------------+ lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;Chúng ta sẽ tự làm những gì?lt;/h1gt;lt;pgt;Không cần làm máy lớn.lt;/pgt;lt;pgt;Phiên bản đầu tiên chỉ có lt;stronggt;4 ngănlt;/stronggt;.lt;/pgt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;+--------------------+ 🥤 Coca 🥤 Pepsi 🥤 7Up 🥤 Sting +--------------------+ lt;/codegt;lt;/pregt;lt;pgt;Mỗi ngăn có một động cơ riêng.lt;/pgt;lt;hr /gt;lt;h1gt;Khi khách mualt;/h1gt;lt;pgt;Giả sử khách bấm nút số 2.lt;/pgt;lt;pgt;ESP32 sẽ nhận tín hiệu.lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;Nút số 2 ↓ ESP32 ↓ Motor số 2 quay ↓ Lon rơi ↓ Hoàn thành lt;/codegt;lt;/pregt;lt;pgt;Đơn giản vậy thôi.lt;/pgt;lt;hr /gt;lt;h1gt;Tại sao lon không rơi hết?lt;/h1gt;lt;pgt;Đây là phần thông minh nhất.lt;/pgt;lt;pgt;Bên trong có một lt;stronggt;trục xoắn (spiral)lt;/stronggt;.lt;/pgt;lt;pgt;Ban đầu:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;🥤🥤🥤🥤🥤 ~~~~~~~~~~ lt;/codegt;lt;/pregt;lt;pgt;Khi motor quay một vòng nhỏ:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;🥤🥤🥤🥤 🥤↓ ~~~~~~~~~~ lt;/codegt;lt;/pregt;lt;pgt;Chỉ lon đầu tiên bị đẩy ra.lt;/pgt;lt;pgt;Các lon còn lại vẫn nằm trong hàng.lt;/pgt;lt;pgt;Đó là nguyên lý mà hầu hết máy bán hàng hiện nay sử dụng.lt;/pgt;lt;hr /gt;lt;h1gt;Chúng ta sẽ dùng gì?lt;/h1gt;lt;pgt;Không mua máy thật.lt;/pgt;lt;pgt;Chỉ cần:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;ESP32lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;4 động cơ giảm tốclt;/pgt;lt;/ligt;lt;ligt;lt;pgt;4 lò xo xoắn (có thể tự uốn bằng thép hoặc in 3D)lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Adapter 12Vlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Nút nhấnlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Khung gỗ hoặc micalt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Tổng chi phí vẫn khá thấp so với một máy thương mại.lt;/pgt;lt;hr /gt;lt;h1gt;Lộ trình của khóa minilt;/h1gt;lt;ulgt;lt;ligt;lt;pgt;lt;stronggt;Bài 1:lt;/stronggt; Hiểu nguyên lý hoạt động. ✅lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 2:lt;/stronggt; Thiết kế khung máy mini.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 3:lt;/stronggt; Làm cơ cấu trục xoắn để nhả từng lon.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 4:lt;/stronggt; Điều khiển động cơ bằng ESP32.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 5:lt;/stronggt; Thêm nút chọn sản phẩm.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 6:lt;/stronggt; Cảm biến xác nhận sản phẩm đã rơi.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 7:lt;/stronggt; Hiển thị màn hình OLED/LCD.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 8:lt;/stronggt; Thanh toán bằng mã QR.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 9:lt;/stronggt; Kết nối Wi-Fi và quản lý từ xa.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;lt;stronggt;Bài 10:lt;/stronggt; Hoàn thiện máy bán nước mini.lt;/pgt;lt;/ligt;lt;/ulgt;lt;hr /gt;lt;h1gt;Bài tậplt;/h1gt;lt;olgt;lt;ligt;lt;pgt;Hãy quan sát một máy bán nước tự động ở siêu thị hoặc trường học.lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Ghi lại:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Có bao nhiêu hàng sản phẩm?lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Có dùng tiền mặt, thẻ hay QR?lt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Sau khi chọn sản phẩm, máy mất bao lâu để nhả hàng?lt;/pgt;lt;/ligt;lt;/ulgt;lt;/ligt;lt;ligt;lt;pgt;Thử tưởng tượng nếu thay nước bằng bánh, mì hoặc đồ dùng học tập thì cơ cấu nào phải thay đổi, cơ cấu nào vẫn giữ nguyên?lt;/pgt;lt;/ligt;lt;/olgt;lt;pgt;💡 lt;stronggt;Mẹo:lt;/stronggt; Từ bài 2 trở đi, chúng ta sẽ bắt đầu thiết kế theo hướng lt;stronggt;dễ gia công tại Việt Namlt;/stronggt;, ưu tiên dùng vật liệu như gỗ MDF, mica, nhôm định hình và các linh kiện phổ biến trên thị trường để bạn có thể tự lắp ráp mà không cần xưởng cơ khí chuyên nghiệp.lt;/pgt;

lt;h2gt;Kiểm soát quyền truy cập dữ liệu bằng Gate và Policylt;/h2gt;lt;hr /gt;lt;pgt;Sau khi hoàn thành:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Bài 21 — Laravel Breezelt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bài 22 — Loginlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bài 23 — Registerlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Bài 24 — Middlewarelt;/pgt;lt;/ligt;lt;/ulgt;lt;pgt;Chúng ta đã có hệ thống:lt;/pgt;lt;pgt;✅ Đăng ký tài khoảnlt;br /gt;✅ Đăng nhậplt;br /gt;✅ Session Authenticationlt;br /gt;✅ Bảo vệ Route bằng Middlewarelt;/pgt;lt;pgt;Nhưng hiện tại Laravel mới chỉ biết:lt;/pgt;lt;blockquotegt;lt;pgt;quot;Người này đã đăng nhập hay chưa?quot;lt;/pgt;lt;/blockquotegt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Route::middleware(#39;auth#39;)-gt;group(function(){ Route::get(#39;/dashboard#39;, function(){ return view(#39;dashboard#39;); }); }); lt;/codegt;lt;/pregt;lt;pgt;Middleware lt;code inline=quot;quot;gt;authlt;/codegt; chỉ kiểm tra:lt;/pgt;lt;pregt;lt;codegt;User có đăng nhập? | | Có | Cho phép truy cập lt;/codegt;lt;/pregt;lt;pgt;Nhưng trong thực tế CMS Blog cần nhiều hơn:lt;/pgt;lt;pgt;Ví dụ:lt;/pgt;lt;pgt;User A tạo bài viết:lt;/pgt;lt;pregt;lt;codegt;ID: 10 Title: Laravel 12 Tutorial User_id: 5 lt;/codegt;lt;/pregt;lt;pgt;User B đăng nhập.lt;/pgt;lt;pgt;Nếu User B truy cập:lt;/pgt;lt;pregt;lt;codegt;/posts/10/edit lt;/codegt;lt;/pregt;lt;pgt;thì sao?lt;/pgt;lt;pgt;Nếu chỉ dùng:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Route::middleware(#39;auth#39;) lt;/codegt;lt;/pregt;lt;pgt;Laravel sẽ cho phép.lt;/pgt;lt;pgt;Vấn đề:lt;/pgt;lt;pregt;lt;codegt;User B | | V Sửa bài viết của User A lt;/codegt;lt;/pregt;lt;pgt;Đây là lỗi phân quyền.lt;/pgt;lt;div class=quot;separatorquot; style=quot;clear: both; text-align: center;quot;gt;lt;a href=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxaHwRrcUxBGk52JRQOEMIUA4psV70FMCQbqeoTNPyaAPeNKKRw7QK46yUZAH1q5lu5ddZYdSWyom41AxZD8mDgAlax3WRYBO5w0I_WfNYPs2FfPEdc6ZCj3zJvBkAKo0lRaaosEQ_6T9okDTeUYRGiSEmFaBJxvcSMXNyxkzPBpzOJjMEz_3SQE99NM/s1536/laravel-bien.pngquot; style=quot;margin-left: 1em; margin-right: 1em;quot;gt;lt;img border=quot;0quot; data-original-height=quot;1024quot; data-original-width=quot;1536quot; height=quot;213quot; src=quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxaHwRrcUxBGk52JRQOEMIUA4psV70FMCQbqeoTNPyaAPeNKKRw7QK46yUZAH1q5lu5ddZYdSWyom41AxZD8mDgAlax3WRYBO5w0I_WfNYPs2FfPEdc6ZCj3zJvBkAKo0lRaaosEQ_6T9okDTeUYRGiSEmFaBJxvcSMXNyxkzPBpzOJjMEz_3SQE99NM/s320/laravel-bien.pngquot; width=quot;320quot; /gt;lt;/agt;lt;spangt;lt;a name=#39;more#39;gt;lt;/agt;lt;/spangt;lt;/divgt;lt;pgt;lt;/pgt;lt;hr /gt;lt;h1gt;1. Authentication và Authorization khác nhault;/h1gt;lt;pgt;Hai khái niệm rất dễ nhầm.lt;/pgt;lt;hr /gt;lt;h2gt;Authenticationlt;/h2gt;lt;pgt;(Authentication = Xác thực)lt;/pgt;lt;pgt;Câu hỏi:lt;/pgt;lt;blockquotegt;lt;pgt;Bạn là ai?lt;/pgt;lt;/blockquotegt;lt;pgt;Ví dụ:lt;/pgt;lt;pgt;Login:lt;/pgt;lt;pregt;lt;codegt;Email: admin@gmail.com Password: ****** lt;/codegt;lt;/pregt;lt;pgt;Laravel kiểm tra:lt;/pgt;lt;pregt;lt;codegt;Database users email password lt;/codegt;lt;/pregt;lt;pgt;Kết quả:lt;/pgt;lt;pregt;lt;codegt;OK User ID = 1 lt;/codegt;lt;/pregt;lt;hr /gt;lt;h2gt;Authorizationlt;/h2gt;lt;pgt;(Authorization = Phân quyền)lt;/pgt;lt;pgt;Câu hỏi:lt;/pgt;lt;blockquotegt;lt;pgt;Bạn được phép làm gì?lt;/pgt;lt;/blockquotegt;lt;pgt;Ví dụ:lt;/pgt;lt;pgt;User:lt;/pgt;lt;pregt;lt;codegt;id: 5 name: Nam role: user lt;/codegt;lt;/pregt;lt;pgt;Admin:lt;/pgt;lt;pregt;lt;codegt;id: 1 name: Admin role: admin lt;/codegt;lt;/pregt;lt;pgt;Quyền:lt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;Chức nănglt;/thgt;lt;thgt;Adminlt;/thgt;lt;thgt;Userlt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;Xem bài viếtlt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Tạo bài viếtlt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Sửa bài người kháclt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;tdgt;❌lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Xóa userlt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;tdgt;❌lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;Quản lý hệ thốnglt;/tdgt;lt;tdgt;✅lt;/tdgt;lt;tdgt;❌lt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;hr /gt;lt;h1gt;2. Authorization trong Laravellt;/h1gt;lt;pgt;Laravel cung cấp 3 cơ chế chính:lt;/pgt;lt;pregt;lt;codegt; Authorization | --------------------------------- | | | Middleware Gate Policy | | | Chặn route Logic nhỏ Logic theo Model lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;3. Gate là gì?lt;/h1gt;lt;pgt;Gate dùng cho các quyền đơn giản.lt;/pgt;lt;pgt;Ví dụ:lt;/pgt;lt;pgt;Chỉ Admin được vào trang quản trị.lt;/pgt;lt;hr /gt;lt;h2gt;Tạo Gatelt;/h2gt;lt;pgt;Mở:lt;/pgt;lt;pregt;lt;codegt;app/Providers/AppServiceProvider.php lt;/codegt;lt;/pregt;lt;pgt;Thêm:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;use Illuminate\Support\Facades\Gate; use App\Models\User; public function boot(): void { $this-gt;configureDefaults();//dòng mặc định 13x Gate::define(#39;admin#39;, function(User $user){ return $user-gt;role === #39;Admin#39;;//có phân biệt Hoa-thường }); } lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Ý nghĩa:lt;/pgt;lt;pgt;Khi gọi:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Gate::allows(#39;admin#39;) lt;/codegt;lt;/pregt;lt;pgt;Laravel chạy:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;$user-gt;role === #39;admin#39; lt;/codegt;lt;/pregt;lt;pgt;Nếu:lt;/pgt;lt;pregt;lt;codegt;admin lt;/codegt;lt;/pregt;lt;pgt;trả về:lt;/pgt;lt;pregt;lt;codegt;true lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;4. Sử dụng Gate trong Controllerlt;/h1gt;lt;pgt;Ví dụ:lt;/pgt; lt;pgt;Tạo AdminController:lt;/pgt; lt;pregt;lt;codegt;php artisan make:controller Admin/AdminControllerlt;/codegt;lt;/pregt; lt;pgt;Trong lt;codegt;routes/web.phplt;/codegt;:lt;/pgt; lt;pregt;lt;codegt;use App\Http\Controllers\Admin\AdminController; Route::get(#39;/admin#39;, [AdminController::class, #39;index#39;]);lt;/codegt;lt;/pregt; lt;pgt;tạo trang lt;codegt;views/admin/index.blade.phplt;/codegt;lt;/pgt; lt;pregt;lt;codegt;lt;h1gt;Trang quản trịlt;/h1gt; lt;pgt;Chúc mừng! Bạn đã vượt qua Gate Authorization.lt;/pgt; lt;/codegt;lt;/pregt; lt;pgt;AdminController:lt;/pgt; lt;pregt;lt;code class=quot;language-phpquot;gt;use Illuminate\Support\Facades\Gate; public function index() { if(!Gate::allows(#39;admin#39;)){ abort(403); } return view(#39;admin.index#39;); } lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Nếu User thường truy cập:lt;/pgt;lt;pgt;Chú ý: trong các bài trước nếu đã seeder ra 01 đống users thì vào UserFactory để biết mật khẩu.lt;/pgt;lt;pregt;lt;codegt;/admin lt;/codegt;lt;/pregt;lt;pgt;Laravel trả:lt;/pgt;lt;pregt;lt;codegt;403 Forbidden lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;5. Middleware Authorizationlt;/h1gt;lt;pgt;Laravel có sẵn middleware:lt;/pgt;lt;pregt;lt;codegt;can lt;/codegt;lt;/pregt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Route::get(#39;/admin#39;, [ AdminController::class, #39;index#39; ]) -gt;middleware(#39;can:admin#39;); lt;/codegt;lt;/pregt;lt;pgt;Bây giờ:lt;/pgt;lt;pregt;lt;codegt;Admin | OK User | 403 lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;6. Policy là gì?lt;/h1gt;lt;pgt;Gate phù hợp với quyền đơn giản.lt;/pgt;lt;pgt;Nhưng Blog CMS có nhiều quyền:lt;/pgt;lt;pgt;Ví dụ Post:lt;/pgt;lt;pregt;lt;codegt;Post create read update delete restore forceDelete lt;/codegt;lt;/pregt;lt;pgt;Không nên viết:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;if($user-gt;role==#39;admin#39;) lt;/codegt;lt;/pregt;lt;pgt;ở khắp Controller.lt;/pgt;lt;pgt;Code sẽ rất rối.lt;/pgt;lt;pgt;Giải pháp:lt;/pgt;lt;h2gt;Policylt;/h2gt;lt;pgt;Policy gom toàn bộ quyền của một Model.lt;/pgt;lt;pgt;Ví dụ:lt;/pgt;lt;pregt;lt;codegt;PostPolicy.php lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;7. Tạo Policylt;/h1gt;lt;pgt;Chạy:lt;/pgt;lt;pregt;lt;code class=quot;language-bashquot;gt;php artisan make:policy PostPolicy --model=Post lt;/codegt;lt;/pregt;lt;pgt;Laravel tạo:lt;/pgt;lt;pregt;lt;codegt;app | Policies | PostPolicy.php lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Nội dung:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;class PostPolicy { } lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Laravel tạo sẵn:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;viewAny() view() create() update() delete() restore() forceDelete() lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;8. Viết quyền Update Postlt;/h1gt;lt;pgt;Ví dụ:lt;/pgt;lt;pgt;User chỉ sửa bài của mình.lt;/pgt;lt;pgt;Post:lt;/pgt;lt;pregt;lt;codegt;id title content user_id lt;/codegt;lt;/pregt;lt;pgt;User:lt;/pgt;lt;pregt;lt;codegt;id = 5 lt;/codegt;lt;/pregt;lt;pgt;Post:lt;/pgt;lt;pregt;lt;codegt;user_id = 5 lt;/codegt;lt;/pregt;lt;pgt;Cho phép.lt;/pgt;lt;pgt;Code:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;public function update( User $user, Post $post ){ return $user-gt;id === $post-gt;user_id; } lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Logic:lt;/pgt;lt;pregt;lt;codegt;User đăng nhập | | Post owner? | -------------- | | Yes No Cho sửa 403 lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;9. Đăng ký Policylt;/h1gt;lt;pgt;Laravel 12 tự động phát hiện theo convention:lt;/pgt;lt;pgt;Model:lt;/pgt;lt;pregt;lt;codegt;App\Models\Post lt;/codegt;lt;/pregt;lt;pgt;Policy:lt;/pgt;lt;pregt;lt;codegt;App\Policies\PostPolicy lt;/codegt;lt;/pregt;lt;pgt;Laravel tự map:lt;/pgt;lt;pregt;lt;codegt;Post + PostPolicy lt;/codegt;lt;/pregt;lt;pgt;Không cần khai báo.lt;/pgt;lt;hr /gt;lt;h1gt;10. Dùng Policy trong Controllerlt;/h1gt;lt;pgt;Ví dụ:lt;/pgt;lt;pgt;PostController:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;public function edit(Post $post) { $this-gt;authorize( #39;update#39;, $post ); return view( #39;posts.edit#39;, compact(#39;post#39;) ); } lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Nếu:lt;/pgt;lt;pregt;lt;codegt;User_id = Post.user_id lt;/codegt;lt;/pregt;lt;pgt;cho phép.lt;/pgt;lt;pgt;Ngược lại:lt;/pgt;lt;pregt;lt;codegt;403 Forbidden lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;11. Route Authorizationlt;/h1gt;lt;pgt;Có thể viết trực tiếp:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Route::get( #39;/posts/{post}/edit#39;, [ PostController::class, #39;edit#39; ] ) -gt;middleware( #39;can:update,post#39; ); lt;/codegt;lt;/pregt;lt;pgt;Laravel hiểu:lt;/pgt;lt;pregt;lt;codegt;can: update Model: post lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;12. Blade kiểm tra quyền(---)lt;/h1gt;lt;pgt;Trong giao diện:lt;/pgt;lt;pgt;Ví dụ nút Edit:lt;/pgt;lt;pregt;lt;code class=quot;language-bladequot;gt;@can(#39;update#39;,$post) lt;a href=quot;#quot;gt; Edit lt;/agt; @endcan lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Nếu User không có quyền:lt;/pgt;lt;pgt;Nút không xuất hiện.lt;/pgt;lt;pgt;Chú ý: bài trước mình lỡ cấu hình kỹ quá chỉ cho hiện posts theo user nên k thực hành được theo ví dụ này.lt;/pgt;lt;pgt;Giờ chuyển sang dấu nút Mở trang Admin trong link dashboard nếu k phải role adminlt;/pgt;lt;p class=quot;PDq2pG_selectionAnchorContainerquot; data-end=quot;63quot; data-start=quot;0quot;gt; lt;codegt;AppServiceProviderlt;/codegt; Laravel 12/13.lt;span aria-hidden=quot;truequot; class=quot;PDq2pG_selectionAnchorquot;gt;lt;/spangt;lt;/pgt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;298quot; data-start=quot;65quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;use App\Models\User; use Illuminate\Support\Facades\Gate; public function boot(): void { $this-gt;configureDefaults(); Gate::define(#39;admin#39;, function (User $user) { return $user-gt;role === #39;Admin#39;; }); }lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;p data-end=quot;312quot; data-start=quot;300quot;gt;Trong Blade:lt;/pgt;lt;pgt; lt;/pgt;lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;497quot; data-start=quot;314quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;@can(#39;admin#39;) lt;a href=quot;{{ route(#39;admin.index#39;) }}quot; class=quot;inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700quot;gt; Mở lt;/agt; @endcanlt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt;lt;hr /gt;lt;h1gt;13. Thêm cột role cho Userlt;/h1gt;lt;pgt;Migration:lt;/pgt;lt;pregt;lt;code class=quot;language-bashquot;gt;php artisan make:migration add_role_to_users_table lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Migration:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Schema::table(#39;users#39;, function(Blueprint $table){ $table-gt;string(#39;role#39;) -gt;default(#39;user#39;); }); lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Chạy:lt;/pgt;lt;pregt;lt;code class=quot;language-bashquot;gt;php artisan migrate lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Database:lt;/pgt;lt;pgt;userslt;/pgt;lt;tablegt;lt;theadgt;lt;trgt;lt;thgt;idlt;/thgt;lt;thgt;namelt;/thgt;lt;thgt;rolelt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;1lt;/tdgt;lt;tdgt;Adminlt;/tdgt;lt;tdgt;adminlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;2lt;/tdgt;lt;tdgt;Namlt;/tdgt;lt;tdgt;userlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;3lt;/tdgt;lt;tdgt;Lanlt;/tdgt;lt;tdgt;userlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;lt;hr /gt;lt;h1gt;14. Tạo helper isAdmin()lt;/h1gt;lt;pgt;Trong Model User:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;public function isAdmin() { return $this-gt;role === #39;admin#39;; //nên chuyển sang ký tự thường cho an toàn //return strtolower($this-gt;role) === #39;admin#39;; } lt;/codegt;lt;/pregt;lt;hr /gt;lt;pgt;Sử dụng:lt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;if(auth()-gt;user()-gt;isAdmin()){ echo quot;Adminquot;; } lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;15. Ví dụ Blog CMS hoàn chỉnhlt;/h1gt;lt;h2gt;Adminlt;/h2gt;lt;pregt;lt;codegt;Dashboard | | CRUD Categories | | CRUD Users | | Delete Post lt;/codegt;lt;/pregt;lt;hr /gt;lt;h2gt;Userlt;/h2gt;lt;pregt;lt;codegt;Dashboard | | Create Post | | Edit Post của mình | | Delete Post của mình lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;16. Luồng phân quyền chuẩn Laravel CMSlt;/h1gt;lt;pregt;lt;codegt;User Login | | Authentication | | Middleware auth | | Authorization | | Gate / Policy | | Allow / Deny lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;17. Cấu trúc dự án sau bài 25lt;/h1gt;lt;pregt;lt;codegt;app ├── Models │ ├── User.php │ └── Post.php ├── Policies │ └── PostPolicy.php ├── Http │ ├── Controllers │ │ │ └── Middleware routes └── web.php lt;/codegt;lt;/pregt;lt;hr /gt;lt;h1gt;18. Kiến thức đạt được sau bài nàylt;/h1gt;lt;pgt;Sau bài 25, người học hiểu:lt;/pgt;lt;pgt;✅ Authentication khác Authorizationlt;br /gt;✅ Gate trong Laravellt;br /gt;✅ Policy trong Laravellt;br /gt;✅ lt;code inline=quot;quot;gt;$this-gt;authorize()lt;/codegt;lt;br /gt;✅ lt;code inline=quot;quot;gt;canlt;/codegt; Middlewarelt;br /gt;✅ Blade lt;code inline=quot;quot;gt;@canlt;/codegt;lt;br /gt;✅ Phân quyền Admin/Userlt;br /gt;✅ Bảo vệ dữ liệu theo User sở hữult;/pgt;lt;hr /gt;lt;h1gt;Chuẩn bị cho Bài 26lt;/h1gt;lt;h1gt;📘 Bài 26 — Roles Permissionslt;/h1gt;lt;pgt;Chúng ta sẽ nâng cấp từ:lt;/pgt;lt;pregt;lt;codegt;role = admin/user lt;/codegt;lt;/pregt;lt;pgt;thành hệ thống thực tế:lt;/pgt;lt;pregt;lt;codegt;Users | Roles | Permissions Admin ├── create_post ├── edit_post ├── delete_user Editor ├── edit_post User ├── create_post lt;/codegt;lt;/pregt;lt;pgt;Kết hợp:lt;/pgt;lt;ulgt;lt;ligt;lt;pgt;Middleware Adminlt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Permission tablelt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Role tablelt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Pivot relationshiplt;/pgt;lt;/ligt;lt;ligt;lt;pgt;Phân quyền CRUD hoàn chỉnh cho Blog CMS Laravel 12.lt;/pgt;lt;/ligt;lt;/ulgt;lt;ugt;lt;divgt;lt;ugt;lt;br /gt;lt;/ugt;lt;/divgt;Errors log:lt;/ugt;lt;divgt;lt;p class=quot;PDq2pG_selectionAnchorContainerquot; data-end=quot;79quot; data-start=quot;0quot;gt;Có lt;strong data-end=quot;78quot; data-start=quot;61quot;gt;2 lỗi độc lậplt;/stronggt;:lt;span aria-hidden=quot;truequot; class=quot;PDq2pG_selectionAnchorquot;gt;lt;/spangt;lt;/pgt; lt;h3 data-end=quot;136quot; data-section-id=quot;19ub1pqquot; data-start=quot;81quot;gt;lt;span role=quot;textquot;gt;Lỗi 1: lt;code data-end=quot;107quot; data-start=quot;92quot;gt;npm run buildlt;/codegt; thất bại ✅ (nguyên nhân gốc)lt;/spangt;lt;/h3gt; lt;p data-end=quot;152quot; data-start=quot;138quot;gt;Bạn đang dùng:lt;/pgt; lt;ul data-end=quot;220quot; data-start=quot;154quot;gt; lt;li data-end=quot;176quot; data-section-id=quot;1c8rnrxquot; data-start=quot;154quot;gt; ✅ Tailwind lt;strong data-end=quot;176quot; data-start=quot;167quot;gt;4.3.3lt;/stronggt; lt;/ligt; lt;li data-end=quot;220quot; data-section-id=quot;draei0quot; data-start=quot;177quot;gt; ❌ lt;code data-end=quot;200quot; data-start=quot;181quot;gt;postcss.config.jslt;/codegt; của lt;strong data-end=quot;220quot; data-start=quot;205quot;gt;Tailwind v3lt;/stronggt; lt;/ligt; lt;/ulgt; lt;p data-end=quot;229quot; data-start=quot;222quot;gt;Bạn có:lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;333quot; data-start=quot;231quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;lt;span class=quot;ͼvquot;gt;exportlt;/spangt; lt;span class=quot;ͼvquot;gt;defaultlt;/spangt; { plugins: { tailwindcss: {}, autoprefixer: {}, }, };lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;p data-end=quot;369quot; data-start=quot;335quot;gt;Trong khi với Tailwind v4 phải là:lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;458quot; data-start=quot;371quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;lt;span class=quot;ͼvquot;gt;exportlt;/spangt; lt;span class=quot;ͼvquot;gt;defaultlt;/spangt; { plugins: { lt;span class=quot;ͼzquot;gt;quot;@tailwindcss/postcssquot;lt;/spangt;: {}, }, };lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;p data-end=quot;487quot; data-start=quot;460quot;gt;Đây là nguyên nhân gây lỗi:lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;534quot; data-start=quot;489quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1quot;gt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;pe-11 pt-3quot;gt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;Cannot find module #39;autoprefixer#39;lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;p data-end=quot;582quot; data-start=quot;536quot;gt;Sau khi sửa, lt;code data-end=quot;564quot; data-start=quot;549quot;gt;npm run buildlt;/codegt; chạy bình thường.lt;/pgt; lt;hr data-end=quot;587quot; data-start=quot;584quot; /gt; lt;h3 data-end=quot;629quot; data-section-id=quot;yiytedquot; data-start=quot;589quot;gt;Lỗi 2: Trang About không có Tailwindlt;/h3gt; lt;p data-end=quot;665quot; data-start=quot;631quot;gt;Đây lt;strong data-end=quot;664quot; data-start=quot;635quot;gt;không liên quan đến buildlt;/stronggt;.lt;/pgt; lt;p data-end=quot;692quot; data-start=quot;667quot;gt;lt;code data-end=quot;684quot; data-start=quot;667quot;gt;about.blade.phplt;/codegt; chỉ có:lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;780quot; data-start=quot;694quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;lt;h1gt;Trang Aboutlt;/h1gt; lt;div class=quot;bg-blue-600quot;gt; Hello Tailwind lt;/divgt;lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;p data-end=quot;846quot; data-start=quot;782quot;gt;nên Laravel trả về đúng đoạn HTML đó, lt;strong data-end=quot;840quot; data-start=quot;820quot;gt;không qua layoutlt;/stronggt; chứa:lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;916quot; data-start=quot;848quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;@vite([#39;resources/css/app.css#39;, #39;resources/js/app.js#39;])lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;p data-end=quot;931quot; data-start=quot;918quot;gt;Khi bọc bằng:lt;/pgt; lt;pre class=quot;overflow-visible! px-0!quot; data-end=quot;984quot; data-start=quot;933quot;gt;lt;div class=quot;relative w-full mt-4 mb-1quot;gt;lt;divgt;lt;div class=quot;contentsquot;gt;lt;div class=quot;border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xlquot;gt;lt;div class=quot;relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallbackquot;gt;lt;div class=quot;pointer-events-none absolute inset-x-4 top-12 bottom-4quot;gt;lt;div class=quot;pointer-events-none sticky z-40 shrink-0 z-1!quot;gt;lt;div class=quot;sticky bg-token-border-lightquot;gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class=quot;relativequot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;div class=quot;h-full min-h-0 min-w-0quot;gt;lt;divgt;lt;div class=quot;relativequot;gt;lt;divgt;lt;div class=quot;relative z-0 flex max-w-fullquot;gt;lt;div class=quot;q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16quot; dir=quot;ltrquot; id=quot;code-block-viewerquot;gt;lt;div class=quot;cm-scrollerquot;gt;lt;pre class=quot;cm-content q9tKkq_readonly m-0quot;gt;lt;codegt;lt;x-app-layoutgt; ... lt;/x-app-layoutgt;lt;/codegt;lt;/pregt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;divgt;lt;divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/pregt; lt;p data-end=quot;1041quot; data-start=quot;986quot;gt;thì Tailwind mới được nạp và các class mới có tác dụng.lt;/pgt;lt;p data-end=quot;1041quot; data-start=quot;986quot;gt;lt;ugt;lt;br /gt;lt;/ugt;lt;/pgt;lt;p data-end=quot;1041quot; data-start=quot;986quot;gt;lt;ugt;Chú ýlt;/ugt;: trang about cho mọi users truy cập nên k dùng x-app-layout (dính navbar)lt;/pgt;lt;pgt;Đây là quy trình đầy đủ để tạo lt;stronggt;lt;code inline=quot;quot;gt;lt;x-public-layoutgt;lt;/codegt;lt;/stronggt; bằng Artisan.lt;/pgt;lt;h3gt;Bước 1. Tạo componentlt;/h3gt;lt;pregt;lt;code class=quot;language-bashquot;gt;php artisan make:component PublicLayout lt;/codegt;lt;/pregt;lt;pgt;Laravel sẽ tạo:lt;/pgt;lt;pregt;lt;code class=quot;language-textquot;gt;app/ └── View/ └── Components/ └── PublicLayout.php resources/ └── views/ └── components/ └── public-layout.blade.php lt;/codegt;lt;/pregt;lt;hr /gt;lt;h3gt;Bước 2. Sửa lt;code inline=quot;quot;gt;resources/views/components/public-layout.blade.phplt;/codegt;lt;/h3gt;lt;pgt;Thay toàn bộ nội dung mặc định:lt;/pgt;lt;pregt;lt;code class=quot;language-bladequot;gt;lt;divgt; lt;!-- An unexamined life is not worth living. - Socrates --gt; lt;/divgt; lt;/codegt;lt;/pregt;lt;pgt;thành:lt;/pgt;lt;pregt;lt;code class=quot;language-bladequot;gt;lt;!DOCTYPE htmlgt; lt;html lang=quot;viquot;gt; lt;headgt; lt;meta charset=quot;UTF-8quot;gt; lt;meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0quot;gt; lt;titlegt;{{ config(#39;app.name#39;) }}lt;/titlegt; @vite([#39;resources/css/app.css#39;, #39;resources/js/app.js#39;]) lt;/headgt; lt;body class=quot;bg-gray-100quot;gt; lt;main class=quot;max-w-7xl mx-auto px-6 py-8quot;gt; {{ $slot }} lt;/maingt; lt;/bodygt; lt;/htmlgt; lt;/codegt;lt;/pregt;lt;pgt;lt;code inline=quot;quot;gt;{{ $slot }}lt;/codegt; là nơi nội dung của từng trang sẽ được chèn vào.lt;/pgt;lt;hr /gt;lt;h3gt;Bước 3. Sử dụng trong viewlt;/h3gt;lt;pgt;Ví dụ lt;code inline=quot;quot;gt;resources/views/about.blade.phplt;/codegt;:lt;/pgt;lt;pregt;lt;code class=quot;language-bladequot;gt;lt;x-public-layoutgt; lt;h1 class=quot;text-3xl font-bold mb-6quot;gt;Aboutlt;/h1gt; lt;div class=quot;bg-orange-600 text-white p-4 rounded-lgquot;gt; Hello Tailwind lt;/divgt; lt;/x-public-layoutgt; lt;/codegt;lt;/pregt;lt;hr /gt;lt;h3gt;Bước 4. Routelt;/h3gt;lt;pregt;lt;code class=quot;language-phpquot;gt;Route::view(#39;/about#39;, #39;about#39;); lt;/codegt;lt;/pregt;lt;pgt;hoặclt;/pgt;lt;pregt;lt;code class=quot;language-phpquot;gt;Route::get(#39;/about#39;, function () { return view(#39;about#39;); }); lt;/codegt;lt;/pregt;lt;hr /gt;lt;h2gt;Kết quả cấu trúclt;/h2gt;lt;pregt;lt;code class=quot;language-textquot;gt;app/ └── View/ └── Components/ └── PublicLayout.php resources/ └── views/ ├── about.blade.php └── components/ └── public-layout.blade.php lt;/codegt;lt;/pregt;lt;pgt;Đây là cách làm chuẩn khi dùng Blade Components trong Laravel 12, tương tự như các component sẵn có như lt;code inline=quot;quot;gt;lt;x-app-layoutgt;lt;/codegt;, lt;code inline=quot;quot;gt;lt;x-guest-layoutgt;lt;/codegt; và lt;code inline=quot;quot;gt;lt;x-input-labelgt;lt;/codegt;.lt;/pgt;lt;pgt;x1lt;/pgt;lt;divgt;quay về lt;a href=quot;http://www.lophocvitinh.com/2026/07/laravel-13-2026-tu-php-core-en-full.htmlquot; target=quot;_blankquot;gt;MỤC LỤClt;/agt;lt;/divgt;lt;/divgt;