เป้าหมายของหน้าเรียนนี้
หน้านี้ใช้เป็นคู่มือ Workshop สำหรับให้นักศึกษาติดตั้งเว็บธุรกิจจำลองจากไฟล์ ZIP แล้วเข้าใจขั้นตอน Deploy, Database, config.php และการเตรียมต่อ LINE LIFF/Rich Menu
เลือก ZIP ตามประเภทธุรกิจ แล้วแตกไฟล์ให้ `index.php` อยู่ใน `htdocs/` โดยตรง
คัดลอก SQL จากหน้าเรียนไปรันเอง เพื่อเห็นว่า Database ทำให้เว็บ Dynamic ได้อย่างไร
ให้ AI สร้าง `config.php` จากค่า MySQL จริง ไม่ต้องให้ AI สร้างเว็บทั้งระบบ
เว็บมี Admin สำหรับ LIFF URL, Channel access token, สมาชิก และโปรโมชันรายคน
เลือกธุรกิจ ดาวน์โหลด ZIP แล้ว Copy SQL ไปรันใน phpMyAdmin
ทุก ZIP ใช้โครงสร้างเว็บเดียวกัน ต่างกันที่ข้อมูลตัวอย่าง สีร้าน หมวดหมู่ สินค้า Banner และโปรโมชันใน SQL
Campus Fresh Drink
ร้านเครื่องดื่ม
เครื่องดื่มสดใหม่ ราคานักศึกษา สั่งง่าย รับไว
ดู SQL Script
Quick Rice Truck
อาหารตามสั่ง / Food Truck
อาหารจานด่วน อิ่มคุ้ม สั่งง่าย พร้อมรับหน้าอาคารเรียน
ดู SQL Script
Sweet Home Bakery
เบเกอรี่ / ขนมโฮมเมด
ขนมโฮมเมดอบสด รับทำกล่องของขวัญและออเดอร์ล่วงหน้า
ดู SQL Script
Local Gift Market
ของฝาก / ของแปรรูป
ของฝากท้องถิ่น แพ็กสวย ส่งต่อได้ เหมาะกับทุกโอกาส
ดู SQL Script
Handmade Mood
ของแฮนด์เมด
ของขวัญทำมือ เลือกกลิ่น สี และแพ็กเกจได้
ดู SQL Script
Campus Wear
ร้านเสื้อผ้า / Accessories
เสื้อผ้าและไอเทมนักศึกษา ใส่ง่าย ถ่ายรูปสวย ราคาเข้าถึงได้
ดู SQL Script
Bloom Studio
ร้านดอกไม้
ช่อดอกไม้และของขวัญสำหรับทุกความรู้สึก
ดู SQL Script
Glow Skin Lab
สกินแคร์ / เครื่องสำอาง
สกินแคร์ใช้ง่ายสำหรับชีวิตนักศึกษา ผิวดูดีในงบประหยัด
ดู SQL Script
Mobile Gadget Hub
อุปกรณ์มือถือ
อุปกรณ์มือถือใช้จริง เคส สายชาร์จ ฟิล์ม พร้อมบริการติดตั้ง
ดู SQL Script
Wellness Booking
คลินิก / บริการจองคิว
จองคิวบริการสุขภาพและความงามแบบง่าย ๆ ผ่านเว็บและ LINE
ดู SQL Script
วิธีใช้ในห้องเรียน
- ดาวน์โหลด ZIP ของธุรกิจที่เลือก แล้วอัปโหลดไปแตกใน `htdocs/`
- สร้าง MySQL Database ใน VistaPanel แล้วเปิด phpMyAdmin
- Copy SQL จากกล่องด้านบน ไปวางในแท็บ SQL ของ phpMyAdmin แล้วกด Go
- นำค่า DB Host, DB Name, DB User, DB Password มากรอกใน Prompt Builder ด้านล่าง
คู่มือทำ Favicon สำหรับเว็บธุรกิจจำลอง
โหลด Richmenuให้นักศึกษาสร้างรูป favicon ด้วย AI แล้ววางไฟล์ใน `assets/img/` จากนั้น Copy code ไปแทรกในส่วน `<head>` ของ `index.php`
ดาวน์โหลดคู่มือและ Prompt
ไฟล์คู่มืออธิบายตำแหน่งวางไฟล์, จุดที่ต้องแทรก code ใน `index.php` และ Prompt สำหรับ favicon ของธุรกิจจำลอง
- วางรูปที่ `htdocs/assets/img/favicon.png`
- ถ้ามี Apple icon ให้วางที่ `htdocs/assets/img/apple-touch-icon.png`
- แก้เฉพาะ `index.php` ในส่วน `<head>`
Code สำหรับแทรกใน index.php
วางหลังบรรทัด `<title>...</title>` และก่อน `<link rel="stylesheet" href="assets/css/style.css">`
SQL เพิ่มช่อง LINE User ID แอดมิน สำหรับรับแจ้งเตือน
ให้นักศึกษารัน SQL นี้ใน phpMyAdmin ก่อน จากนั้นเข้า `Admin > ตั้งค่าข้อมูลร้าน` แล้วกรอก LINE User ID แอดมินที่ขึ้นต้นด้วย `U` ได้ผ่านหน้าเว็บ
Prompt สั่ง ChatGPT สร้าง Favicon ครบ 10 ธุรกิจจำลอง
โครงสร้างไฟล์หลังแตก ZIP
ให้นักศึกษาแตกไฟล์แล้ววางไฟล์ทั้งหมดใน `htdocs/` โดยตรง เพื่อให้โดเมนเปิดหน้าแรกได้ทันที
htdocs/
├── index.php ← หน้าร้าน แสดง Banner, Catalog, Filter สินค้า และฟอร์ม Lead
├── config.example.php ← ไฟล์ตัวอย่างโครงสร้าง config ก่อนสร้าง config จริง
├── config.php ← ไฟล์เชื่อมต่อ MySQL จริง ให้ AI สร้างจากค่า DB ของนักศึกษา
├── check.php ← หน้าตรวจ config/DB เมื่อเว็บโหลดนานหรือเปิดไม่ขึ้น
├── database.sql ← SQL สร้างตารางและข้อมูลตัวอย่าง ใช้ copy ไปรันใน phpMyAdmin
├── README_DEPLOY.md ← คู่มือ Deploy แบบย่อใน ZIP
├── PROJECT_CODE_FULL.md ← สรุปรายชื่อไฟล์ ตาราง และข้อควรระวังของโปรเจกต์
├── admin/
│ ├── login.php ← หน้า Login ผู้ดูแล ค่าเริ่มต้น admin / admin1234
│ ├── dashboard.php ← หน้าสรุปจำนวน Banner, สินค้า, Lead, สมาชิก และโปรโมชัน
│ ├── settings.php ← แก้ชื่อร้าน เบอร์โทร LINE URL Facebook สีหลัก และที่อยู่
│ ├── products.php ← จัดการสินค้า ราคา รายละเอียด หมวดหมู่ สถานะ และรูปสินค้า
│ ├── categories.php ← จัดการหมวดหมู่สินค้า ใช้กับ Filter ในหน้าร้าน
│ ├── banners.php ← เพิ่ม/แก้/ลบ Banner และอัปโหลดรูป Banner
│ ├── leads.php ← ดูลูกค้าที่ส่งรายการสนใจจากหน้าร้าน
│ ├── members.php ← ดูสมาชิกที่สมัครผ่าน LIFF และ LINE User ID
│ ├── promotions.php ← สร้างโปรโมชันและผูกกับสมาชิกรายคน
│ ├── line_settings.php ← กรอก LIFF ID, LIFF URL, Channel Secret, Token และ Webhook URL
│ ├── richmenu_guide.php ← แสดง URL สำหรับนำไปตั้ง Rich Menu
│ ├── _auth.php ← ฟังก์ชันตรวจ Login, Session และ CSRF ของ Admin
│ ├── _upload.php ← ฟังก์ชันอัปโหลดรูป ตรวจชนิดไฟล์ จำกัดขนาด และตั้งชื่อปลอดภัย
│ ├── _header.php ← ส่วนหัวและเมนู Admin
│ └── _footer.php ← ส่วนท้าย Admin
├── liff/
│ ├── login.php ← LIFF entry หลัก ใช้สมัครสมาชิกและรับ LINE User ID
│ ├── register.php ← ทางลัดไปหน้า login.php
│ ├── profile.php ← หน้าโปรไฟล์สมาชิกหลังรู้ LINE User ID
│ └── promotions.php ← หน้าโปรโมชันที่ผูกกับสมาชิกแต่ละคน
├── api/
│ ├── line_webhook.php ← Webhook ตัวอย่างเบื้องต้น
│ ├── liff_member.php ← API สมัคร/ค้นหาสมาชิกจาก LINE User ID
│ ├── claim_promotion.php ← API เปลี่ยนสถานะโปรโมชันเมื่อใช้สิทธิ์
│ └── send_lead.php ← API placeholder สำหรับต่อยอดส่ง Lead แบบ AJAX
├── assets/
│ ├── css/
│ │ ├── style.css ← สไตล์หน้าร้าน ส่งให้ ChatGPT ปรับเมื่อต้องเปลี่ยนหน้าตาเว็บ
│ │ └── admin.css ← สไตล์หน้า Admin
│ ├── js/
│ │ ├── app.js ← JavaScript เลือกสินค้า คำนวณยอด และ Filter หมวดหมู่
│ │ └── liff.js ← JavaScript สำหรับ LIFF login และ redirect ไปโปรไฟล์/โปรโมชัน
│ └── img/
│ └── placeholder.svg ← รูป placeholder สำหรับสินค้าที่ยังไม่มีรูป
└── uploads/
├── .htaccess ← ป้องกันไม่ให้รันไฟล์ PHP ใน uploads
├── banners/ ← เก็บรูป Banner ที่อัปโหลดจาก Admin
├── products/ ← เก็บรูปสินค้าที่อัปโหลดจาก Admin
└── promotions/ ← เตรียมไว้เก็บรูป/ไฟล์เกี่ยวกับโปรโมชัน
หน้าร้าน
หน้า `index.php` แสดง Banner, Catalog, Filter สินค้า และฟอร์ม Lead จากข้อมูลใน Database
Admin
Login, แก้สินค้า, Banner, ข้อมูลร้าน, สมาชิก, โปรโมชัน และ LINE Settings
LINE / LIFF
มีหน้า `liff/login.php` สำหรับ Rich Menu, หน้าโปรไฟล์สมาชิก และหน้าโปรโมชันรายคน
สิ่งที่ AI ทำ
AI ไม่ต้องสร้างเว็บใหม่ ให้สร้างเฉพาะ `config.php` ตามค่า DB จริงของนักศึกษา
ตัวช่วยสร้าง Prompt ให้ AI ทำเฉพาะ config.php
กรอกค่า MySQL จริงจาก VistaPanel แล้วคัดลอก Prompt ไปให้ AI สร้างไฟล์ `config.php` สำหรับเว็บที่ดาวน์โหลดจาก ZIP
Prompt: ให้ AI สร้างไฟล์ config.php เท่านั้น
ข้อความแนะนำรัน SQL ใน phpMyAdmin
Prompt: ให้ AI ตรวจขั้นตอน Deploy
Prompt 6: เตรียมต่อ LINE OA ในอนาคต
Prompt: ให้ AI สร้าง webhook.php สำหรับตอบกลับ LINE OA
Prompt 7: ตรวจความถูกต้องและความปลอดภัย
โครงสร้างฐานข้อมูลที่ควรให้นักศึกษาเข้าใจ
ใช้เป็นแบบจำลองขั้นต่ำสำหรับเว็บ Catalog ที่แก้ไขข้อมูลผ่าน Admin ได้
admin_users(id, username, password_hash, is_active, created_at)
site_settings(id, setting_key, setting_value)
banners(id, title, subtitle, image_path, sort_order, is_active, created_at)
categories(id, name, sort_order, is_active, created_at)
products(id, category_id, name, description, price, image_path, is_featured, is_active, created_at)
leads(id, customer_name, phone, line_id, note, created_at)
lead_items(id, lead_id, product_id, product_name, price, quantity)
members(id, full_name, phone, email, line_user_id, is_active, created_at)
promotions(id, title, description, coupon_code, discount_text, starts_at, ends_at, is_active)
member_promotions(id, member_id, promotion_id, assigned_at, used_at, status)
promotion_claims(id, member_promotion_id, claimed_at, note)
line_oa_settings(id, line_basic_id, channel_id, channel_secret, channel_access_token, liff_id, liff_url, webhook_url, enabled)
ขั้นตอนสอนนักศึกษา Deploy บน InfinityFree / VistaPanel
โฮสต์ฟรีไม่จำกัดเวลา (ไม่หมดอายุ) รองรับ PHP 8 + MySQL + Free SSL — เหมาะกับการเรียนทำเว็บ + ส่งงาน
สมัครและยืนยันอีเมล
เข้า dash.infinityfree.com → กด Sign Up → กรอกอีเมล + รหัสผ่าน → เช็คอีเมลแล้วกด verify link
สร้าง Hosting Account
หลัง login → กด + Create Account → เลือก Free Subdomain เช่น yoursite.infinityfreeapp.com (หรือ .epizy.com / .rf.gd) → ตั้ง root password → กด Create
รอ Activation 5–10 นาที
ระบบจะสร้าง account ในพื้นหลัง — เห็นสถานะ "Pending Setup" → รอจนเป็น "Active" (refresh หน้าได้)
เปิด VistaPanel
กดปุ่ม Manage ที่ account → กด Control Panel → จะเด้งไปหน้า VistaPanel (Control Panel ของ InfinityFree)
สร้าง MySQL Database
ใน VistaPanel → หมวด Software → คลิก MySQL Databases → ตั้งชื่อ DB (เช่น mystore) → กด Create
📋 จด: DB Name, DB User, DB Hostname เช่น sql300.infinityfree.com
Copy SQL ไปรันใน phpMyAdmin
กลับมาหน้าเรียนนี้ → เลือกธุรกิจ → กด Copy SQL → เปิด phpMyAdmin ของ database ที่สร้าง → แท็บ SQL → วาง SQL → กด Go
(เห็น tables ขึ้นมาทางซ้าย = สำเร็จ)
อัปโหลด ZIP และแตกไฟล์
VistaPanel → Online File Manager → เข้า htdocs/ → อัปโหลด ZIP ธุรกิจ → Extract
ตรวจว่าได้ htdocs/index.php, htdocs/admin/login.php, htdocs/liff/login.php ไม่ใช่ htdocs/myshop/index.php
สร้าง config.php ด้วย Prompt
นำค่า DB จากข้อ 5 มากรอกใน Prompt Builder → Copy Prompt config.php → ให้ AI สร้างไฟล์ config.php → อัปโหลดทับไฟล์เดิมใน htdocs/
ย้ำ: DB Host ต้องเป็น remote host เช่น sql300.infinityfree.com ไม่ใช่ localhost
เปิด check.php ตรวจ DB
เปิด https://โดเมนของคุณ/check.php ถ้าขึ้น config พร้อมและเชื่อม Database สำเร็จ จึงค่อยไปทดสอบหน้าเว็บหลัก
ถ้าไม่สำเร็จให้ตรวจ DB Host, DB Name, DB User, DB Password และการรัน SQL
ตั้ง Permission uploads/
โฟลเดอร์ uploads/ (เก็บรูปสินค้า) → คลิกขวา → Change Permissions → ตั้ง 755 เพื่อให้ PHP เขียนไฟล์ได้
เปิด Free SSL (HTTPS)
VistaPanel → Free SSL Certificate → เลือก domain → กด Issue → รอ ~15 นาที → ระบบจะเปิด HTTPS ให้อัตโนมัติ
ทดสอบหน้าลูกค้า
เปิด https://yoursite.infinityfreeapp.com/ → ตรวจ Banner, Catalog, ข้อมูลโหลดจาก DB ถูกต้อง
(ถ้าเห็น "DB error" หรือโหลดนาน → เปิด /check.php)
ทดสอบ Admin + LINE Settings + ส่งงาน
เปิด /admin/login.php → Login → ลอง CRUD → เปิด Admin > LINE เพื่อกรอก LIFF/Channel access token ภายหลัง
ส่ง URL ลูกค้า, URL Admin, Screenshot phpMyAdmin, Prompt config.php และสรุปปัญหาที่พบ
⚠ ข้อควรระวังเมื่อใช้ InfinityFree
- Disk: 5 GB · Bandwidth: ไม่จำกัด · Databases: 400 ตัว — เกินพอสำหรับเรียน
- ไม่มี cron job ฟรี และไม่รองรับ shell access (SSH) — แต่ทำเว็บ catalog ปกติได้
- ต้อง login เข้า client area อย่างน้อย เดือนละครั้ง ไม่งั้น account ถูก suspend
- มี ads banner ฝังในหน้าเว็บถ้า traffic เกิน 50,000 hit/วัน — โปรเจกต์เรียนปกติไม่เจอ
- DB host เป็น remote (ไม่ใช่ localhost) — อย่าใส่ localhost ใน config!
- อย่าส่ง Channel access token หรือ Channel Secret ในไฟล์งานที่แชร์สาธารณะ ให้กรอกใน Admin > LINE เฉพาะเว็บทดลอง
- ถ้าเจอ "403 Forbidden" ที่
htdocs/→ ตรวจว่ามีindex.phpหรือindex.htmlหรือยัง - ทางเลือกอื่นที่คล้ายกัน: AwardSpace, 000webhost, Byet.host
สิ่งที่ควรมีในหน้า Admin
Admin ต้องเป็นที่ตั้งค่า Dynamic ของเว็บทั้งหมด ไม่ให้นักศึกษาแก้ข้อมูลในไฟล์ HTML โดยตรง
Dashboard
ดูจำนวนสินค้า Banner เปิดใช้งาน และ Leads ล่าสุด
จัดการ Banner
เพิ่มโปรโมชั่น อัปโหลดรูป แนะนำขนาด 1600x600 px ตั้งวันที่แสดง และปุ่ม CTA
จัดการสินค้า
เพิ่มเมนูสินค้า อัปโหลดรูป แนะนำขนาด 800x800 px ราคา ต้นทุน หมวดหมู่ และสถานะเปิด/ปิด
ตั้งค่าร้าน
ชื่อร้าน คำโปรย เบอร์โทร ที่อยู่ แผนที่ LINE OA และ Facebook
สมาชิกและโปรโมชัน
ดูสมาชิกจาก LIFF และผูกโปรโมชันกับลูกค้ารายคน
LINE Settings
กรอก LIFF ID, LIFF URL, Channel ID, Channel Secret และ Channel access token (long-lived)
รองรับ Rich Menu ด้วย LIFF ID เดียว
ZIP มีโครงไฟล์สำหรับ LIFF, Webhook เบื้องต้น และ Admin สำหรับกรอก Channel access token long-lived แล้ว โดยใช้ LIFF entry เดียวคือ /liff/login.php
- ใช้
/liff/login.phpเป็น LIFF URL หลักสำหรับปุ่มสมัครสมาชิก - ใช้
/liff/login.php?redirect=promotionsสำหรับปุ่มดูโปรโมชันของฉัน - ใช้
/liff/login.php?redirect=profileสำหรับปุ่มโปรไฟล์สมาชิก - Admin > LINE มีช่อง Channel access token (long-lived), Channel Secret, LIFF ID, LIFF URL และ Webhook URL
- Admin > Promotions ผูกโปรโมชันกับสมาชิกแต่ละคนได้
- สำหรับระบบจริง ไม่ควรส่ง token สาธารณะหรือเก็บ secret ไว้ในไฟล์ที่แชร์ออกไป
ผลงานที่นักศึกษาต้องส่ง
ให้คะแนนจากความครบของเว็บ ความเป็น Dynamic และการ Deploy สำเร็จ
ส่ง Domain Name ให้อาจารย์ตรวจ
กรอก Domain Name ที่สมัครไว้บน InfinityFree ระบบจะสร้าง URL หน้าเว็บและ URL Admin ให้อัตโนมัติ