# LPXMEDIA

**Build · Learn · Share · Create**

Gói này là bản website LPXMEDIA production-ready theo kiến trúc **static-first + PHP contact endpoint tùy chọn**, tối ưu để chạy trên Apache/cPanel phổ biến mà **không cần Node.js runtime, PM2, Docker, Redis hoặc VPS riêng**.

## Cấu trúc gói bàn giao

Sau khi extract `LPXMEDIA.zip` trong `public_html`, các file production nằm **ngay ở thư mục gốc**:

```text
public_html/
├── index.html
├── services/
├── knowledge/
├── projects/
├── tools/
├── resources/
├── notes/
├── lab/
├── now/
├── about/
├── contact/
├── assets/
├── contact-handler.php
├── .htaccess
├── .env.example
├── robots.txt
├── sitemap.xml
├── favicon.svg
├── 404.html
├── README.md
└── _source/            # source + scripts build; bị chặn truy cập bởi .htaccess
```

Website frontend chạy ngay sau khi extract. Contact form chỉ hoạt động sau khi cấu hình email.

---

## 1. Cách chạy local

### Yêu cầu

- Node.js **18+** để chạy dev server/build source.
- Không có package dependency bên thứ ba bắt buộc.
- PHP **8.1+** nếu muốn test `contact-handler.php`.

### Chạy development frontend

```bash
cd _source
npm run dev
```

Mặc định dev server dùng cổng `4173`.

### Cài dependency

Project hiện tại không có dependency npm bên thứ ba, vì vậy **không bắt buộc chạy `npm install`**. Nếu sau này bạn thêm package thì chạy:

```bash
npm install
```

### Production build

```bash
cd _source
SITE_URL=https://tenmiencuaban.com npm run build
```

Windows PowerShell:

```powershell
cd _source
$env:SITE_URL="https://tenmiencuaban.com"
npm run build
```

Output nằm tại:

```text
_source/dist/
```

Build script sẽ thay `https://example.com` trong `robots.txt`, `sitemap.xml` và các file liên quan bằng `SITE_URL`.

### Kiểm tra source/build

```bash
npm run check
npm run build
npm run check -- --dist
```

---

## 2. Cách upload lên cPanel

1. Đăng nhập **cPanel**.
2. Mở **File Manager**.
3. Vào document root của domain, thông thường là `public_html`.
4. Upload `LPXMEDIA.zip`.
5. Extract trực tiếp trong `public_html`.
6. Kiểm tra để `index.html` nằm ngay trong document root, không bị lồng thêm một thư mục trung gian.
7. Nếu domain thật **không phải** `https://example.com`, thay domain trong:
   - `robots.txt`
   - `sitemap.xml`
   - hoặc build lại bằng `SITE_URL` như phần trên.
8. Nếu dùng contact form, tạo `.env` từ `.env.example` và điền email thật.
9. Truy cập domain và kiểm tra Home, Services, Knowledge, Tools, Contact và một route con sau khi refresh trực tiếp.

### HTTPS

`.htaccess` có sẵn rule redirect HTTPS nhưng đang **comment** để tránh redirect loop trên hosting/proxy đã tự ép HTTPS.

Nếu hosting chưa tự redirect HTTPS, mở `.htaccess` và bỏ comment 3 dòng trong mục `HTTPS redirect`.

---

## 3. Cấu hình Contact Form

Copy:

```text
.env.example
```

thành:

```text
.env
```

sau đó điền:

```env
SITE_URL=https://tenmiencuaban.com
CONTACT_TO_EMAIL=you@example.com
CONTACT_FROM_EMAIL=noreply@tenmiencuaban.com
```

Lưu ý:

- `CONTACT_FROM_EMAIL` nên là email thuộc domain/hosting để tăng khả năng `mail()` được chấp nhận.
- `.env` bị chặn truy cập bởi `.htaccess`.
- Không đưa credential thật vào `_source`, Git hoặc file public.
- Form có validation frontend + server, honeypot, rate limit theo session và kiểm tra email.
- Backend **không giả lập success**. Nếu `.env` thiếu hoặc `mail()` thất bại, UI nhận lỗi thật từ server.

Nếu hosting tắt PHP `mail()`, cần thay `contact-handler.php` bằng SMTP integration phù hợp với nhà cung cấp email.

---

## 4. Route và cPanel

Website dùng **multipage static** với route dạng thư mục:

```text
/services/  -> /services/index.html
/tools/     -> /tools/index.html
/now/       -> /now/index.html
```

Ưu điểm:

- Refresh trực tiếp route vẫn hoạt động trên Apache.
- Không cần SPA fallback.
- Không cần Node server.
- Dễ cache và debug asset.
- `404.html` được gắn qua `ErrorDocument` trong `.htaccess`.

---

## 5. SEO

Đã có:

- Semantic HTML.
- `title` + `description` riêng theo trang.
- Canonical link theo path.
- Open Graph + Twitter Card.
- `robots.txt`.
- `sitemap.xml`.
- `favicon.svg`.
- `site.webmanifest`.
- Article Schema (`Article`) trên các bài Knowledge.
- Cấu trúc heading, breadcrumb và nội dung đọc rõ ràng.

### Việc bắt buộc trước khi public domain thật

Domain không được cung cấp khi build gói này, nên bản bàn giao mặc định dùng:

```text
https://example.com
```

trong `robots.txt` và `sitemap.xml`.

Hãy thay bằng domain thật hoặc chạy build với `SITE_URL`.

---

## 6. Performance

Thiết kế ưu tiên:

- Không dùng webfont ngoài.
- Không framework runtime.
- SVG local cho visual/project thumbnail.
- JavaScript thuần, tải `defer`.
- CSS/JS dùng chung.
- Không load thư viện animation nặng.
- Tool JSON/Base64/Password/Text/Slug/Timestamp chạy client-side.
- Animation giảm tự động khi bật `prefers-reduced-motion`.

Hai tool có dependency mạng ngoài:

- **Public IP Checker** → `api.ipify.org`.
- **QR Generator** → `api.qrserver.com`.

Chúng được ghi chú ngay trong UI.

---

## 7. Security

Đã áp dụng:

- Không có API key/secret thật trong source.
- `.env` bị chặn qua `.htaccess`.
- `_source/` bị chặn qua `.htaccess`.
- `Options -Indexes`.
- Security headers cơ bản trong `mod_headers` nếu module khả dụng.
- Contact form validate + sanitize server-side.
- Email validate bằng `FILTER_VALIDATE_EMAIL`.
- Honeypot + cooldown theo session.
- Không có database nên không có SQL query/input.

Nếu sau này thêm MySQL/MariaDB, dùng prepared statements (`PDO` hoặc `mysqli`) và không hard-code credential.

---

## 8. Kiểm tra sau khi deploy

Checklist nhanh:

- [ ] Home tải đúng.
- [ ] `/services/`, `/knowledge/`, `/projects/`, `/tools/`, `/resources/`, `/notes/`, `/lab/`, `/now/`, `/about/`, `/contact/` mở được.
- [ ] Refresh trực tiếp các route không 404.
- [ ] Mobile menu hoạt động.
- [ ] Ctrl/Cmd + K mở Global Search.
- [ ] Theme Light/Dark lưu sau reload.
- [ ] Tool client-side hoạt động.
- [ ] Không có 404 asset trong DevTools.
- [ ] Contact form báo lỗi nếu chưa cấu hình; gửi thật sau khi cấu hình.
- [ ] `robots.txt`, `sitemap.xml`, `favicon.svg` truy cập được.
- [ ] Domain trong sitemap/robots là domain thật.
- [ ] HTTPS hoạt động.
- [ ] Console không có lỗi nghiêm trọng.

---

## 9. Nội dung cần chỉnh trước khi sử dụng thương mại

Các giá dịch vụ, project, article mẫu và resource hiện là nội dung khởi tạo để website có cấu trúc hoàn chỉnh. Hãy chỉnh lại theo dịch vụ/thông tin thực tế của LPXMEDIA trước khi quảng bá chính thức.

Không có social link giả hoặc `href="#"` trong bản production.

---

**LPXMEDIA — Built with curiosity.**