Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Laravel 12 & Vue 3 fullstack Mastery: Build 2 portfolio apps

Thành thạo Laravel 12 & Vue 3 fullstack: Xây dựng 2 ứng dụng cho portfolio

Thành thạo Laravel 12 & Vue 3 fullstack: Xây dựng 2 ứng dụng cho portfolio

Từ con số 0 đến sẵn sàng đi làm: Xây dựng hai ứng dụng single page full-stack ấn tượng giúp bạn được nhận việc

4.6
(1,298 đánh giá)
9,019 học viên
Giảng viên
Eding Muhamad Saprudin
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
37.5 giờ video
335 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Fullstack Development #Laravel #Vue Js #Web Development

Bạn sẽ học được gì

Xây dựng và kiểm thử một RESTful API có khả năng mở rộng từ đầu bằng Laravel 12
Tạo một Single Page Application (SPA) hiện đại bằng Vue 3, Vue Router, Pinia & Bootstrap 5
Triển khai xác thực, phân quyền và kiểm tra dữ liệu form cho API của bạn
Sử dụng Postman và PHPUnit để kiểm thử backend một cách chuyên nghiệp
Tổ chức cấu trúc ứng dụng fullstack với sự tách biệt rõ ràng giữa frontend và backend
Xây dựng một SPA nguyên khối hoàn chỉnh bằng Laravel 12 + Inertia.js — không cần API!
Thiết kế giao diện ứng dụng với Tailwind CSS để có UI sạch sẽ và responsive
Tìm hiểu cách Inertia kết nối Laravel và Vue để chuyển trang mượt mà
Nắm vững sự khác biệt giữa kiến trúc API-first và Monolith SPA
Triển khai cả backend API và frontend app lên VPS production
Hiểu các phương pháp hay nhất cho dự án Laravel + Vue thực tế
Tự tin để xây dựng và ra mắt các ứng dụng đủ tiêu chuẩn cho portfolio và khách hàng

Yêu cầu

Bạn nên có hiểu biết cơ bản về HTML, PHP, OOP, CSS & Javascript
Máy tính chạy Mac, Windows hoặc Linux

Đối tượng phù hợp

Dành cho bất kỳ ai muốn học cách kết hợp Laravel với Vue js và các công nghệ web khác để xây dựng ứng dụng web full stack
Khóa học này dành cho học viên đã quen thuộc với kiến thức cơ bản về Laravel và muốn nâng cao kỹ năng phát triển bằng cách xây dựng dự án thực tế

Nội dung khóa học

33 phần • 323 bài giảng
1 Chào mừng đến với khóa học
1 Giới thiệu Phần này (ĐỪNG BỎ QUA trừ khi bạn đã có môi trường dev)
2 Thiết lập Phát triển Cục bộ trên Windows - Cài đặt XAMPP
3 Thiết lập Phát triển Cục bộ trên Windows - Cài đặt Composer & Laravel Installer
4 Thiết lập Phát triển Cục bộ trên MacOs (v12+) - Cài đặt Herd
5 Thiết lập Phát triển Cục bộ trên Mac - Cài đặt Homebrew, PHP, MySQL và Composer
6 Thiết lập Phát triển Cục bộ trên Mac - Cài đặt Valet
7 Môi trường Phát triển Cục bộ Thay thế - Cài đặt Laravel Sail
8 Các công cụ khác cần cài đặt
9 Công cụ REST Client cần cài đặt
10 Các tiện ích mở rộng & cài đặt Visual Studio Code Editor của tôi
1 Giới thiệu Phần 1
1 API là gì và Laravel xử lý nó như thế nào
2 Thiết lập Dự án Laravel cho Phát triển API
3 Tạo Models, Migrations và Factories
4 Hiểu về HTTP Methods và Status Codes
5 Phiên bản hóa API trong Laravel
6 Tạo API Endpoint đầu tiên (GET All Resources)
7 Định dạng Phản hồi API với Laravel API Resource
8 Viết Kiểm thử Tự động cho GET Endpoint bằng PHPUnit
9 Kiểm thử GET Endpoint với Postman
10 Kiểm tra và Lưu trữ Dữ liệu Mới
11 Cập nhật một Tài nguyên (PUT/PATCH Endpoint)
12 Xóa một Tài nguyên (DELETE Endpoint)
13 Viết Kiểm thử Tự động cho POST, PUT và DELETE Endpoints với PHPUnit
14 Kiểm thử POST, PUT và DELETE Endpoints với Postman
15 Tổng kết: Những gì chúng ta đã xây dựng
1 Giới thiệu về Sanctum
2 Thiết lập Sanctum cho Xác thực API token
3 Tạo login endpoint với phản hồi Token
4 Kiểm thử login endpoint với PHPUnit và Postman
5 Tạo register endpoint
6 Kiểm thử register endpoint với PHPUnit và Postman
7 Thêm logout endpoint
8 Kiểm thử logout endpoint với PHPUnit và Postman
9 Kiểm thử tự động và thủ công route được bảo vệ
1 Giới thiệu Xác thực SPA
2 Thiết lập Sanctum cho Xác thực SPA
3 Xác thực SPA - Đăng nhập người dùng
4 Xác thực SPA - Đăng ký người dùng
5 Xác thực SPA - Đăng xuất người dùng
6 Bảo vệ routes
7 Liên kết tasks với users và kiểm thử bằng PHPUnit
1 Giới thiệu về Phân quyền
2 Định nghĩa logic phân quyền
3 Phân quyền Hành động sử dụng Policies
4 Kiểm thử Tự động: Phân quyền với PHPUnit
5 Kiểm thử thủ công với Postman
6 Tổng kết
1 Thiết lập dự án Vue 3
2 Single File Component
3 Directives và Ràng buộc Thuộc tính
4 Xử lý sự kiện
5 Ràng buộc Hai chiều với v-model
6 Làm việc với methods
7 Ràng buộc Style và Class
8 Computed Properties
9 Watchers
10 Thiết kế giao diện component Tags Input
11 Giao tiếp Component với Props
12 Giao tiếp Component với emitting events
1 Giới thiệu Composition API
2 Thiết lập Composition API
3 Tạo reactive reference với hàm ref
4 Tạo reactive object với hàm reactive
5 Tạo reactive reference từ reactive object
6 Computed properties
7 Làm việc với watch và watchEffect
8 Làm việc với props
9 Emitting events
10 Lifecycle hooks
11 Composable functions
12 Sử dụng Composition API script setup
1 Tạo dự án Vue.js 3 mới
2 Thiết lập Axios cho HTTP call
3 Hiển thị dữ liệu trong Vue js components
4 Sử dụng computed properties để hiển thị tasks đã hoàn thành và chưa hoàn thành
5 Chuyển đổi trạng thái hoàn thành tasks
6 Thêm component mới để chèn dữ liệu
7 Tạo tính năng chỉnh sửa nội tuyến (Inline editing)
8 Thêm tính năng mới trong ứng dụng Vue js để cập nhật dữ liệu
9 Điền dữ liệu vào phần tử input khi chỉnh sửa
10 Thêm tính năng mới để đánh dấu task là đã hoàn thành
11 Thêm tính năng mới để xóa tasks
1 Thiết lập Pinia
2 Định nghĩa Stores
3 Định nghĩa Getters
4 Định nghĩa Actions
5 Tái cấu trúc Stores (Sử dụng Setup stores)
6 Tái cấu trúc components
1 Thiết lập Vue Router
2 Điều hướng Route
3 Điều hướng theo chương trình
4 Thiết kế giao diện link đang hoạt động
5 Xử lý lỗi 404
6 Navigation Guards
7 Route meta fields
8 Transitions
1 Lưu trữ Axios Base URL trong biến môi trường
2 Thiết lập Xác thực Client
3 Tạo Pinia store cho xác thực
4 Xây dựng form Đăng nhập
5 Chuyển hướng xác thực
6 Đăng xuất người dùng
7 Thay thế nút đăng nhập bằng Dropdown
8 Xử lý thông báo lỗi kiểm tra dữ liệu
9 Thêm form Đăng ký
1 Thiết lập Server
2 Tạo user mới trên server
3 Nâng cấp Phiên bản PHP
4 Thiết lập Nginx
5 Thiết lập Cơ sở dữ liệu MySQL
6 Thiết lập SSH
7 Triển khai ứng dụng Laravel
8 Đẩy các thay đổi mới
9 Thêm Domain và SSL vào Server
10 Các bước cuối cùng
1 Thiết lập Server
2 Thiết lập Node.js
3 Thiết lập Nginx với SSL
4 Triển khai ứng dụng Vue js
1 API: Thêm endpoint tổng kết tasks
2 API: Lọc tổng kết tasks
3 API: Kiểm thử tự động tính năng với PHPUnit
4 API: Kiểm thử thủ công tính năng với Postman
5 Frontend: Sử dụng endpoint tổng kết trong ứng dụng Vue js
6 Frontend: Tạo component SummaryFilter cơ bản
7 Frontend: Thêm các tùy chọn bổ sung vào component SummaryFilter
8 Frontend: Làm nổi bật mục lọc đang hoạt động
9 Frontend: Phản ứng với thay đổi bộ lọc Tổng kết
1 API: Thêm mức độ ưu tiên vào tasks
2 API: Kiểm thử tự động tính năng mức độ ưu tiên với PHPUnit
3 API: Kiểm thử thủ công tính năng mức độ ưu tiên với Postman
4 Frontend: Thêm task mới với mức độ ưu tiên
5 Frontend: Sắp xếp tasks theo thời gian, tên hoặc mức độ ưu tiên
6 Frontend: Cập nhật mức độ ưu tiên của task
1 Thêm ngày đến hạn vào Task model
2 Kiểm thử tự động tính năng ngày đến hạn
3 Kiểm thử thủ công tính năng ngày đến hạn
4 Frontend: Lọc tasks theo khoảng thời gian
5 Frontend: Xử lý ngày đến hạn khi thêm hoặc chỉnh sửa task
1 Phân tích cú pháp Đầu vào Tự nhiên (Tên Task, Ngày đến hạn, Mức độ ưu tiên)
2 Kiểm thử tự động Phân tích cú pháp Đầu vào Tự nhiên
3 Kiểm thử thủ công Phân tích cú pháp Đầu vào Tự nhiên
4 Triển khai phân tích cú pháp đầu vào tự nhiên trong Frontend
1 Giới thiệu Phần 2
1 Thiết lập Dự án Laravel mới
2 Làm việc với Models và Migrations
3 Làm việc với Model Factories
4 Tạo Vue js component đầu tiên
5 Làm việc với Eloquent API Resource
6 Cú pháp thay thế cho Eloquent API resource collection
7 Tạo Form component để chèn dữ liệu
8 Lưu dữ liệu
9 Kiểm tra dữ liệu đầu vào
10 Làm việc với Accessors và Mutators
11 Hiển thị chi tiết của một tài nguyên
12 Chỉnh sửa tài nguyên hiện có
13 Tái cấu trúc components
14 Xóa tài nguyên
1 Tạo component Toast
2 Giới thiệu phân trang trong Laravel
3 Tạo component Phân trang
4 Thêm chức năng Tìm kiếm
5 Tạo component Sắp xếp có thể tái sử dụng
6 Điều hướng động
7 Xử lý quá trình sắp xếp ở backend
1 Thêm checkbox vào bảng
2 Thêm khả năng chọn hoặc bỏ chọn tất cả checkbox
3 Xử lý xóa hàng loạt
4 Thêm Form modal để cập nhật hàng loạt
5 Tải sản phẩm đã chọn và hiển thị danh mục
6 Xử lý cập nhật hàng loạt ở backend
1 Giới thiệu Phần 3
1 Kho lưu trữ Dự án
2 Tải xuống Hướng dẫn Tham khảo Phiên bản Laravel Mới này (Quan trọng!)
3 Thiết lập Dự án
4 Thiết kế Schema Câu hỏi - Phần 1/2
5 Thiết kế Schema Câu hỏi - Phần 2/2
6 Tạo dữ liệu giả qua Model Factories - Phần 1/2
7 Tạo dữ liệu giả qua Model Factories - Phần 2/2
8 Hiển thị tất cả câu hỏi
9 Thêm thông tin Tác giả và ngày tạo câu hỏi trên mục Câu hỏi - Phần 1/2
10 Thêm thông tin Tác giả và ngày tạo câu hỏi trên mục Câu hỏi - Phần 2/2
11 Thêm bộ đếm bình chọn, câu trả lời và lượt xem trên mục Câu hỏi - Phần 1/2
12 Thêm bộ đếm bình chọn, câu trả lời và lượt xem trên mục Câu hỏi - Phần 2/2
13 Xây dựng Form Câu hỏi - Phần 1/2
14 Xây dựng Form Câu hỏi - Phần 2/2
15 Xác thực và Lưu Câu hỏi - Phần 1/2
16 Xác thực và Lưu Câu hỏi - Phần 2/2
17 Cập nhật Câu hỏi - Phần 1/2
18 Cập nhật Câu hỏi - Phần 2/2
19 Xóa Câu hỏi
20 Hiển thị chi tiết Câu hỏi
21 Ủy quyền cho Câu hỏi - Sử dụng Gates
22 Ủy quyền cho Câu hỏi - Sử dụng Policies
1 Thiết kế Schema Câu trả lời
2 Tạo Câu trả lời giả - Phần 1/2
3 Tạo Câu trả lời giả - Phần 2/2
4 Hiển thị câu trả lời cho câu hỏi
5 Thêm Điều khiển Bình chọn trên Câu hỏi và Câu trả lời - Phần 1/3
6 Thêm Điều khiển Bình chọn trên Câu hỏi và Câu trả lời - Phần 2/3
7 Thêm Điều khiển Bình chọn trên Câu hỏi và Câu trả lời - Phần 3/3
8 Lưu Câu trả lời - Phần 1/3
9 Lưu Câu trả lời - Phần 2/3
10 Lưu Câu trả lời - Phần 3/3
11 Cập nhật Câu trả lời - Phần 1/2
12 Cập nhật Câu trả lời - Phần 2/2
13 Xóa Câu trả lời - Phần 1/3
14 Xóa Câu trả lời - Phần 2/3
15 Xóa Câu trả lời - Phần 3/3
1 Chấp nhận câu trả lời là câu trả lời tốt nhất - Phần 1/2
2 Chấp nhận câu trả lời là câu trả lời tốt nhất - Phần 2/2
3 Yêu thích Câu hỏi - Phần 1/4
4 Yêu thích Câu hỏi - Phần 2/4
5 Yêu thích Câu hỏi - Phần 3/4
6 Yêu thích Câu hỏi - Phần 4/4
7 Bình chọn Câu hỏi & Câu trả lời - Phần 1/6
8 Bình chọn Câu hỏi & Câu trả lời - Phần 2/6
9 Bình chọn Câu hỏi & Câu trả lời - Phần 3/6
10 Bình chọn Câu hỏi & Câu trả lời - Phần 4/6
11 Bình chọn Câu hỏi & Câu trả lời - Phần 5/6
12 Bình chọn Câu hỏi & Câu trả lời - Phần 6/6
1 Tái cấu trúc Models
2 Tái cấu trúc Views - Phần 1/2
3 Tái cấu trúc Views - Phần 2/2
4 Bảo vệ Ứng dụng khỏi tấn công XSS - Phần 1/2
5 Bảo vệ Ứng dụng khỏi tấn công XSS - Phần 2/2
6 Lặt vặt
7 Sắp xếp gọn gàng views
1 Tạo Vue.js Component đầu tiên - Phần 1/2 (Xây dựng Component)
2 Tạo Vue.js Component đầu tiên - Phần 2/2 (Sử dụng Component)
3 Tạo Vue Answer Component - Phần 1/5 (Sử dụng Vue.js Inline Template)
4 Tạo Vue Answer Component - Phần 2/5 (Ajax hóa nút Chỉnh sửa)
5 Tạo Vue Answer Component - Phần 3/5 (Xây dựng Form nội tuyến Câu trả lời)
6 Tạo Vue Answer Component - Phần 4/5 (Hoàn tác thay đổi)
7 Tạo Vue Answer Component - Phần 5/5 (Xác thực)
8 Ajax hóa nút Xóa câu trả lời
9 Làm đẹp thông báo Flash & Xác nhận
10 Tạo Favorite Component - Phần 1/3 (Từ button sang Vue.js Component)
11 Tạo Favorite Component - Phần 2/3 (Xử lý Sự kiện)
12 Tạo Favorite Component - Phần 3/3 (Xác thực button)
13 Tạo Accept Answer Component - Phần 1/2 (từ button thành Vue component)
14 Tạo Accept Answer Component - Phần 2/2 (xử lý sự kiện)
15 Viết lại Logic Ủy quyền - Phần 1/2 (Ủy quyền cốt lõi)
16 Viết lại Logic Ủy quyền - Phần 2/2 (Tái cấu trúc)
17 Tạo Vote Component - Phần 1/3 (Từ blade sang Vue Component)
18 Tạo Vote Component - Phần 2/3 (Xử lý Sự kiện)
19 Tạo Vote Component - Phần 3/3 (Sửa lỗi)
20 Tạo Vue Answers Component
21 Xây dựng tính năng Tải thêm câu trả lời - Phần 1/2
22 Xây dựng tính năng Tải thêm câu trả lời - Phần 2/2
23 Triển khai Vue.js Custom Events
24 Triển khai Global Event Bus
25 Tạo New Answer Component - Phần 1/2 (Từ blade sang Vue.js component)
26 Tạo New Answer Component - Phần 2/2 (Xử lý Sự kiện)
27 Tạo Question Component - Phần 1/3 (từ blade sang vue.js component)
28 Tạo Question Component - Phần 2/3 (Xây dựng Form nội tuyến)
29 Tạo Question Component - Phần 3/3 (Lặt vặt)
30 Làm việc với Vue.js Mixins
1 Giới thiệu Mục
2 Soạn thảo Editor Component
3 Bật Xem trước Markdown
4 Tự động điều chỉnh kích thước Editor
5 Tích hợp Tô sáng cú pháp
6 Sửa lỗi Tô sáng cú pháp khi tải lần đầu
7 Sửa lỗi Tô sáng cú pháp khi hủy chỉnh sửa
8 Tạo Highlight Mixin
9 Tích hợp Markdown Editor vào Answer Component
10 Tích hợp Markdown Editor vào New Answer Component
11 Sửa lỗi Tô sáng cú pháp sau khi thêm câu trả lời mới
12 Sửa lỗi Tô sáng cú pháp trong Answers Component
1 Cài đặt Laravel Passport
2 Yêu cầu Passport Token
3 Tạo API Endpoint để hiển thị tất cả câu hỏi
4 Chuyển đổi Dữ liệu bằng Eloquent API Resources
5 Tạo API Endpoint để thêm câu hỏi mới
6 Tạo API Endpoints để Cập nhật & Xóa câu hỏi hiện có
7 Tạo API Endpoint để hiển thị chi tiết câu hỏi
8 Tạo Answer Endpoints
9 Tạo Vote Question & Answer Endpoints
10 Tạo Favourite Question & Accept Answer Endpoints
11 Endpoint Bài viết của Người dùng hiện tại
12 API Xác thực
1 Cập nhật gói npm
2 Bắt đầu với SPA - Thiết lập Backend Route Fallback
3 Bắt đầu với SPA - Cài đặt và cấu hình Vue Router
4 Bắt đầu với SPA - Sử dụng Vue router RouterLink component
5 Bắt đầu với SPA - Vue Router Navigation Guards
6 Bắt đầu với SPA - Xử lý trang lỗi 404
7 Component QuestionsPage - Thiết lập API baseURL
8 Component QuestionsPage - Xây dựng Giao diện Người dùng
9 Component QuestionsPage - Sử dụng API Endpoint
10 Component QuestionsPage - Sửa lỗi Ủy quyền
11 Tạo Pagination Component
12 Tạo Question Form Component - Từ Blade file sang Vue.js component
13 Tạo Question Form Component - Xử lý Dữ liệu Form
14 Tạo Edit Question Component
15 Ajax hóa nút Xóa câu hỏi
16 Component Question Page - Hiển thị chi tiết câu hỏi
17 Component Question Page - Hiển thị câu trả lời liên quan
18 Component Question Page - Sửa nút Xóa câu hỏi
19 Component Question Page - Sửa nút Tải thêm câu trả lời
20 Component Question Page - Sửa nút Yêu thích
21 Hiển thị bài viết của người dùng hiện tại - Xây dựng Giao diện Người dùng
22 Hiển thị bài viết của người dùng hiện tại - Sử dụng Backend API
23 Hoàn thiện ứng dụng - Thêm hiệu ứng Chuyển tiếp
24 Hoàn thiện ứng dụng - Thêm AJAX Spinner trên trang Tất cả câu hỏi
25 Hoàn thiện ứng dụng - Sử dụng Axios interceptor để điều khiển Spinner toàn cục
26 Hoàn thiện ứng dụng - Thêm AJAX Spinner khi gửi form
27 Sửa lỗi cuối cùng
1 Giới thiệu
2 Thiết lập Máy chủ
3 Cài đặt Nginx, MySql & PHP
4 Thiết lập Tường lửa
5 Tạo người dùng mới cho việc triển khai
6 Thiết lập Nginx
7 Thiết lập MySQL
8 Thiết lập SSH Keys
9 Triển khai Ứng dụng Laravel trên Máy chủ Sản xuất
10 Triển khai thay đổi mới
11 Thêm tên miền vào Máy chủ
12 Thiết lập SSL trên máy chủ

Giới thiệu khóa học

[Course updated in December 2025]

Unlock Your Career as a Full-Stack Developer: The Ultimate Laravel 12 & Vue 3 Bootcamp

This is your fast track to becoming a professional developer. Forget confusing theories and outdated practices. In this hands-on course, you’ll build three stunning, job-ready web applications from scratch using the most powerful stack today: Laravel, Vue, and Inertia.

What You'll Achieve:

  • Build Your Portfolio: Create two complete projects that you can confidently showcase to employers and clients.

  • Master Two Architectures: Learn both the modern API-based approach and the efficient Monolith SPA style. This makes you versatile and valuable in any team.

  • Go Beyond the Code: Don't just build. Learn to test, debug, and deploy your apps to a real server, giving you the skills needed for a real-world developer role.

  • Boost Your Confidence: Gain practical experience with essential tools like Vue 3, Pinia, Tailwind CSS, and PHPUnit, turning you from a beginner into a skilled pro.

Projects You Will Build:

  • A Complete API-Based App: Master building a separate backend with Laravel that handles data, authentication, and validation, then connect it to a dynamic Vue 3 frontend.

  • A Seamless Monolith Apps: Discover the magic of Inertia.js to create fast, single-page applications without the complexity of a separate API. You'll build a project to solidify your skills.

This Course Is For You If:

You're a beginner who wants to land your first developer job. You're ready to stop watching tutorials and start building real-world applications.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Fullstack Development
Hiển thị tất cả khoá học Laravel
Hiển thị tất cả khoá học Vue Js
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊