🚀Bài 04 — Module & Import / Export trong JavaScript

1. Module là gì?

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

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

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

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

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

• Quản lý danh mục.

• Tìm kiếm.

• Đăng nhập.

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

• Gọi Laravel REST API.

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

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

Ví dụ:

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

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

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

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

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

---

🚀Bài 03 — Array & Object trong JavaScript hiện đại

1. Array & Object là gì?

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

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

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

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

Kết quả:

PHP
JavaScript

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

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

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

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

Kết quả:

Pi
pi@example.com

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

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

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

🚀Bài 02 — ES6+: JavaScript hiện đại

1. ES6+ là gì?

ES6 (ECMAScript 2015) là phiên bản lớn của JavaScript ra mắt năm 2015, bổ sung nhiều cú pháp và tính năng giúp code ngắn gọn, dễ đọc và dễ bảo trì hơn.

ES6+ là cách gọi chung các tính năng ES6 và những phiên bản JavaScript hiện đại ra đời sau đó.

Trong khóa học Laravel 13, chúng ta sẽ sử dụng ES6+ để:

• Viết JavaScript trong ứng dụng Laravel.

• Xử lý dữ liệu từ REST API.

• Xây dựng giao diện bằng Vue.

• Làm việc với React.

• Tổ chức code thành các module độc lập.

📘KHÓA 2 — FRONTEND SAU LARAVEL 13

JavaScript → Vue → Vue + Laravel API → React → Livewire

PHẦN 1 — JAVASCRIPT HIỆN ĐẠI

Bài 01 — JavaScript hiện đại trong ứng dụng Laravel

Bài 02 — ES6+

Bài 03 — Array & Object

Bài 04 — Module & Import / Export

Bài 05 — Promise & Async/Await

Bài 06 — Fetch API

Bài 07 — Xử lý JSON & HTTP

Bài 08 — JavaScript gọi Laravel REST API

---

🟢 PHẦN 2 — VUE

Bài 09 — Vue là gì?

Bài 10 — Cài đặt Vue + Vite

Bài 11 — Component

Bài 12 — Template & Data Binding

Bài 13 — Event

Bài 14 — Conditional & List Rendering

Bài 15 — Form

Bài 16 — Computed & Watch

Bài 17 — Props & Emits

Bài 18 — Composition API

Bài 19 — ref() & reactive()

Bài 20 — Composables

---

🔵 PHẦN 3 — VUE + LARAVEL API

Bài 21 — Kết nối Vue với Laravel API

Bài 22 — Hiển thị Posts

Bài 23 — Post Detail

Bài 24 — Category & Filter

Bài 25 — Search & Pagination

Bài 26 — CRUD với Vue

Bài 27 — Upload Image

Bài 28 — Login với Laravel Sanctum

Bài 29 — Register & Logout

Bài 30 — Protected Page

Bài 31 — User Dashboard

Bài 32 — Admin Dashboard

---

🟣 PHẦN 4 — VUE ROUTER & PINIA

Bài 33 — Vue Router

Bài 34 — Dynamic Route & Navigation Guard

Bài 35 — Pinia

Bài 36 — Authentication State

Bài 37 — Axios & Interceptor

---

🏗️ PHẦN 5 — PROJECT

Xây dựng Blog SPA

Bài 38 — Khởi tạo Blog SPA

Bài 39 — Blog Homepage

Bài 40 — Blog Listing & Detail

Bài 41 — Category & Search

Bài 42 — Authentication

Bài 43 — User Dashboard

Bài 44 — Admin Dashboard

Bài 45 — CRUD Posts

Bài 46 — Hoàn thiện Blog SPA

---

🔴 PHẦN 6 — MỞ RỘNG

Bài 47 — React cơ bản

• JSX

• Component

• Props

• State

• useState

• useEffect

Bài 48 — React + Laravel API

Bài 49 — Livewire cơ bản

• Component

• Data Binding

• Event

• Form

• Validation

Bài 50 — Khi nào dùng Blade, Livewire, Vue hay React?

---

🎯 Tổng cộng: 50 bài

KHÓA LARAVEL 13
       │
       ├── REST API ✓
       │
       └── Sanctum ✓
              │
              ▼
      KHÓA FRONTEND 50 BÀI
              │
       ┌──────┴──────┐
       ↓             ↓
 JavaScript         Vue
       │             │
       └──────┬──────┘
              ↓
       Laravel REST API
              │
              ↓
          Blog SPA
              │
       ┌──────┼──────┐
       ↓      ↓      ↓
     Pinia  React  Livewire

❓Tạo nút Hỏi AI🤖

Sử dụng Cloudflare Workers (gói Miễn phí vô cùng rộng rãi, cho phép 100.000 yêu cầu/ngày) làm "trạm trung chuyển" là giải pháp bảo mật tối ưu nhất.

Khi áp dụng phương pháp này, quy trình xử lý sẽ là: Blogger của bạn → Cloudflare Worker → Gemini API.

Người dùng xem bằng DevTools (F12) chỉ thấy URL của Cloudflare Worker chứ hoàn toàn không thấy Gemini API Key.