1. TECH STACK
- Backend: PHP 8.3 thuần (không framework)
- Database: SQLite (mặc định) hoặc MySQL
- Frontend: HTML5 + Tailwind CSS (CDN) + Vanilla JS
- Server: PHP built-in dev server (zero config)
- Chatbot: Rule-based + entity extraction + DB queries
- Kích thước code: 88KB ZIP, 44 files
2. CÁC TRANG KHÁCH HÀNG (5 trang)
/ Trang chủ (~14KB)
- Hero section: gradient nâu-cam, headline "Cà phê nguyên chất từ Tây Nguyên"
- 4 value props: Hạt nguyên chất / Rang mới / Giao nhanh / Bảo hành
- Featured products (4 sản phẩm nổi bật)
- Section "Câu chuyện" — 3 đoạn giới thiệu thương hiệu
- CTA "Đặt hàng ngay" → liên kết /menu.php
- Footer với social, contact
/menu.php Menu sản phẩm (~16KB, 8 sản phẩm)
- Hero "Khám phá menu"
- Filter tabs theo category: Tất cả / Cà phê / Trà / Bánh ngọt
- Grid 4 cột hiển thị: Ảnh sản phẩm + Tên + Giá + Roast level + Flavor notes + Nút "Đặt mua"
- 8 sản phẩm demo:
• Cà phê: Arabica Đà Lạt (165k), Robusta BMT (145k), Espresso Blend 500g (320k), Culi Premium (285k)
• Trà: Trà sen vàng (42k), Trà đào cam sả (38k)
• Bánh: Croissant bơ Pháp (38k), Tiramisu cổ điển (55k)
- Hiệu ứng reveal-on-scroll
/about.php Câu chuyện (~22KB, 7 sections)
- Hero "Hành trình từ hạt cà phê"
- Timeline: 2015 (khởi đầu) → 2018 (rang xay) → 2021 (mở rộng) → 2024 (AnBot)
- 3 sections: Triết lý / Quy trình rang / Cam kết chất lượng
- Stats: 8 năm kinh nghiệm, 12 tỉnh thành, 50,000+ khách hàng, 4.8★ rating
- CTA "Ghé thăm cửa hàng"
/gallery.php Gallery (~25KB, 15 ảnh)
- Hero "Hình ảnh"
- Masonry/grid 15 ảnh (quán, sản phẩm, behind-the-scenes)
- Lightbox click để phóng to
- Lazy loading ảnh
/contact.php Liên hệ (~9KB)
- Form: Họ tên, SĐT, Email, Lời nhắn → POST tới /api/contact.php
- Bản đồ Google Maps embed
- Hotline: 0901 234 567
- Địa chỉ: 123 Nguyễn Huệ, Q1, TP.HCM
- Giờ mở cửa: T2-T6 7-22h, T7-CN 8-23h
3. CHATBOT AI (Widget ☕ góc phải)
- Bong bóng nổi ở mọi trang, click mở khung chat 380x560
- 15 intents xử lý tiếng Việt tự nhiên:
1. greeting — "Chào", "Hi"
2. smalltalk — "Bạn khỏe không?"
3. recommend — "Gợi ý cà phê"
4. beginner — "Mới uống cà phê"
5. gift — "Quà tặng"
6. compare — "So sánh A với B"
7. superlative — "đắt nhất", "đắng nhất", "đậm nhất"
8. math — "1+1=?", "100*5"
9. price — "Arabica bao nhiêu?"
10. stock — "Còn hàng không?"
11. category — "Có trà gì?"
12. hours — "Mở cửa mấy giờ?"
13. address — "Shop ở đâu?"
14. order — "Đặt mua"
15. fallback — gợi ý sản phẩm random
- Multi-turn: nhớ câu hỏi trước trong session
- Response time: 50-300ms
- Suggestion chips sau mỗi reply
4. ADMIN CMS (8 trang, cần login)
URL: /admin/login.php → User: admin / Pass: admin123
Dashboard (/admin/index.php)
- 4 cards thống kê: Tổng đơn / Doanh thu / Sản phẩm / Khách hàng
- Biểu đồ doanh thu 7 ngày
- Đơn hàng mới nhất
- Shortcuts tới các chức năng
Quản lý sản phẩm (/admin/products.php)
- Table 8 sản phẩm: Ảnh / Tên / Danh mục / Giá / Tồn kho / Featured
- CRUD: Thêm / Sửa / Xoá
- Upload ảnh trực tiếp (lưu vào /uploads/products/)
- Toggle is_active, is_featured
Quản lý đơn hàng (/admin/orders.php)
- Table đơn hàng: Mã / Khách / Tổng tiền / Trạng thái / Ngày
- Cập nhật trạng thái: pending → confirmed → shipping → done
- Xem chi tiết đơn
Quản lý categories (/admin/categories.php)
- CRUD 3 categories: Cà phê / Trà / Bánh ngọt
Quản lý gallery (/admin/testimonials.php)
- CRUD 15 ảnh gallery với caption
Quản lý messages (/admin/messages.php)
- Đọc tin nhắn từ form liên hệ
- Reply hoặc đánh dấu đã đọc
Settings (/admin/settings.php)
- Sửa: Tên shop / Logo / Màu primary / Hotline / Email / Địa chỉ / Social links
- Lưu vào DB → tự cập nhật trên toàn site
5. DATABASE SCHEMA (9 tables)
users (id, username, password_hash, role, created_at)
categories (id, name, slug, sort_order)
products (id, name, slug, category_id, price, compare_at_price,
short_description, description, flavor_notes, roast_level,
origin, weight_grams, stock, is_active, is_featured,
image_url, created_at)
orders (id, customer_name, customer_phone, customer_email,
customer_address, total, status, payment_method, created_at)
order_items (id, order_id, product_id, quantity, price)
posts (id, title, slug, content, image_url, is_published, created_at)
gallery (id, image_url, caption, sort_order, is_active)
customers (id, name, email, phone, address, created_at)
settings (key, value) ← site config
chat_sessions (session_id, context_json, last_intent, created_at, updated_at)
Seed data: 1 admin user, 3 categories, 8 sản phẩm, 15 ảnh gallery, 0 đơn hàng (test sẽ tạo), settings mặc định.
6. CÁC CHỨC NĂNG NỔI BẬT
✅ Responsive — Mobile-first, test ở 390x844
✅ Lazy loading — Ảnh load theo scroll
✅ Reveal animation — Section fade-in khi vào viewport
✅ Tailwind CDN — Không build, không Node, không npm
✅ Auto-greet — Chatbot chào + gợi ý khi mở lần đầu
✅ Session memory — Lưu last_product, last_category cho multi-turn
✅ Number formatting — 145.000đ (VN locale)
✅ SQLite hoặc MySQL — chuyển qua 1 dòng config
✅ Zero external deps — chạy được trên máy không có internet (trừ Tailwind CDN)
7. BẢO MẬT
- Admin password: bcrypt hash
- Session-based auth (PHP $_SESSION)
- CSRF protection trên form
- SQL injection: tất cả query dùng PDO prepared statements
- XSS: tất cả output escape qua htmlspecialchars()
- Upload validation: chỉ nhận JPG/PNG/WEBP, max 5MB
- data/ và uploads/ ngoài public root (qua router)
8. PERFORMANCE
- Trang load: 100-300ms (localhost)
- DB query: < 50ms (SQLite, 8 sản phẩm)
- Page size: 15-25KB (chưa tính ảnh)
- Image lazy load: tiết kiệm ~3MB initial
- Zero JS framework: bundle JS < 30KB
9. ĐÃ TEST
✓ 5 trang khách render đầy đủ (desktop + mobile)
✓ 4 trang admin render đầy đủ
✓ Chatbot 15 intents (9/9 test pass)
✓ Math: 1+1, 100*5, 1000/4
✓ Superlative: 6/6 (đắt, rẻ, đắng, đậm nhất)
✓ Multi-turn context
✓ API /api/chat.php POST/JSON OK
✓ Server stable trên PID 20244
✓ Public URL qua Cloudflare Tunnel live
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn