ระบบสามารถดึงข้อมูลธุรกิจของคุณมาเติมในฟอร์มอัตโนมัติได้ — ถ้ามีแผนธุรกิจอยู่แล้วใน Training Page → Login ที่ Training Page
ZIP สำเร็จรูป + phpMyAdmin + config.php Prompt

สอนนักศึกษาติดตั้งเว็บธุรกิจจำลองแบบง่ายขึ้น

ให้นักศึกษาเลือกธุรกิจ ดาวน์โหลดไฟล์ ZIP ไปแตกใน server ของตัวเอง แล้วคัดลอก SQL ไปรันใน phpMyAdmin จากนั้นใช้ Prompt Generator เพื่อให้ AI ช่วยสร้างเฉพาะไฟล์ config.php ตามค่า MySQL จริง

10ZIP ธุรกิจ
SQLCopy ไปรันเอง
AIทำแค่ config.php
LINELIFF / Rich Menu
Course Design

เป้าหมายของหน้าเรียนนี้

หน้านี้ใช้เป็นคู่มือ Workshop สำหรับให้นักศึกษาติดตั้งเว็บธุรกิจจำลองจากไฟล์ ZIP แล้วเข้าใจขั้นตอน Deploy, Database, config.php และการเตรียมต่อ LINE LIFF/Rich Menu

1. ดาวน์โหลดเว็บสำเร็จรูป

เลือก ZIP ตามประเภทธุรกิจ แล้วแตกไฟล์ให้ `index.php` อยู่ใน `htdocs/` โดยตรง

2. ฝึกใช้ phpMyAdmin

คัดลอก SQL จากหน้าเรียนไปรันเอง เพื่อเห็นว่า Database ทำให้เว็บ Dynamic ได้อย่างไร

3. ใช้ AI เฉพาะจุด

ให้ AI สร้าง `config.php` จากค่า MySQL จริง ไม่ต้องให้ AI สร้างเว็บทั้งระบบ

4. ต่อ LINE ได้ภายหลัง

เว็บมี Admin สำหรับ LIFF URL, Channel access token, สมาชิก และโปรโมชันรายคน

Starter ZIP + SQL

เลือกธุรกิจ ดาวน์โหลด 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 Guide

คู่มือทำ 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 Structure

โครงสร้างไฟล์หลังแตก 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 Generator

ตัวช่วยสร้าง Prompt ให้ AI ทำเฉพาะ config.php

กรอกค่า MySQL จริงจาก VistaPanel แล้วคัดลอก Prompt ไปให้ AI สร้างไฟล์ `config.php` สำหรับเว็บที่ดาวน์โหลดจาก ZIP

แนวทางใหม่: นักศึกษาไม่ต้องให้ AI สร้างเว็บทั้งระบบแล้ว ให้ดาวน์โหลด ZIP และ Copy SQL จากด้านบน จากนั้นใช้ AI เฉพาะขั้นตอนสร้าง `config.php`

Prompt: ให้ AI สร้างไฟล์ config.php เท่านั้น

ข้อความแนะนำรัน SQL ใน phpMyAdmin

Prompt: ให้ AI ตรวจขั้นตอน Deploy

Prompt 6: เตรียมต่อ LINE OA ในอนาคต

Prompt: ให้ AI สร้าง webhook.php สำหรับตอบกลับ LINE OA

Prompt 7: ตรวจความถูกต้องและความปลอดภัย

SQL Blueprint

โครงสร้างฐานข้อมูลที่ควรให้นักศึกษาเข้าใจ

ใช้เป็นแบบจำลองขั้นต่ำสำหรับเว็บ 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 Lesson

ขั้นตอนสอนนักศึกษา Deploy บน InfinityFree / VistaPanel

โฮสต์ฟรีไม่จำกัดเวลา (ไม่หมดอายุ) รองรับ PHP 8 + MySQL + Free SSL — เหมาะกับการเรียนทำเว็บ + ส่งงาน

01

สมัครและยืนยันอีเมล

เข้า dash.infinityfree.com → กด Sign Up → กรอกอีเมล + รหัสผ่าน → เช็คอีเมลแล้วกด verify link

02

สร้าง Hosting Account

หลัง login → กด + Create Account → เลือก Free Subdomain เช่น yoursite.infinityfreeapp.com (หรือ .epizy.com / .rf.gd) → ตั้ง root password → กด Create

03

รอ Activation 5–10 นาที

ระบบจะสร้าง account ในพื้นหลัง — เห็นสถานะ "Pending Setup" → รอจนเป็น "Active" (refresh หน้าได้)

04

เปิด VistaPanel

กดปุ่ม Manage ที่ account → กด Control Panel → จะเด้งไปหน้า VistaPanel (Control Panel ของ InfinityFree)

05

สร้าง MySQL Database

ใน VistaPanel → หมวด Software → คลิก MySQL Databases → ตั้งชื่อ DB (เช่น mystore) → กด Create
📋 จด: DB Name, DB User, DB Hostname เช่น sql300.infinityfree.com

06

Copy SQL ไปรันใน phpMyAdmin

กลับมาหน้าเรียนนี้ → เลือกธุรกิจ → กด Copy SQL → เปิด phpMyAdmin ของ database ที่สร้าง → แท็บ SQL → วาง SQL → กด Go
(เห็น tables ขึ้นมาทางซ้าย = สำเร็จ)

07

อัปโหลด ZIP และแตกไฟล์

VistaPanel → Online File Manager → เข้า htdocs/ → อัปโหลด ZIP ธุรกิจ → Extract
ตรวจว่าได้ htdocs/index.php, htdocs/admin/login.php, htdocs/liff/login.php ไม่ใช่ htdocs/myshop/index.php

08

สร้าง config.php ด้วย Prompt

นำค่า DB จากข้อ 5 มากรอกใน Prompt Builder → Copy Prompt config.php → ให้ AI สร้างไฟล์ config.php → อัปโหลดทับไฟล์เดิมใน htdocs/
ย้ำ: DB Host ต้องเป็น remote host เช่น sql300.infinityfree.com ไม่ใช่ localhost

09

เปิด check.php ตรวจ DB

เปิด https://โดเมนของคุณ/check.php ถ้าขึ้น config พร้อมและเชื่อม Database สำเร็จ จึงค่อยไปทดสอบหน้าเว็บหลัก
ถ้าไม่สำเร็จให้ตรวจ DB Host, DB Name, DB User, DB Password และการรัน SQL

10

ตั้ง Permission uploads/

โฟลเดอร์ uploads/ (เก็บรูปสินค้า) → คลิกขวา → Change Permissions → ตั้ง 755 เพื่อให้ PHP เขียนไฟล์ได้

11

เปิด Free SSL (HTTPS)

VistaPanel → Free SSL Certificate → เลือก domain → กด Issue → รอ ~15 นาที → ระบบจะเปิด HTTPS ให้อัตโนมัติ

12

ทดสอบหน้าลูกค้า

เปิด https://yoursite.infinityfreeapp.com/ → ตรวจ Banner, Catalog, ข้อมูลโหลดจาก DB ถูกต้อง
(ถ้าเห็น "DB error" หรือโหลดนาน → เปิด /check.php)

13

ทดสอบ 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 Design

สิ่งที่ควรมีในหน้า 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)

LINE / LIFF / Rich Menu

รองรับ 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 ไว้ในไฟล์ที่แชร์ออกไป
Submission

ผลงานที่นักศึกษาต้องส่ง

ให้คะแนนจากความครบของเว็บ ความเป็น Dynamic และการ Deploy สำเร็จ

1. URL หน้าเว็บลูกค้าต้องเปิดจากมือถือได้
2. URL หน้า Adminมี Login และแก้ข้อมูลได้
3. ไฟล์ SQLImport แล้วมีข้อมูลตัวอย่าง
4. Screenshot VistaPanelแสดง File Manager และ MySQL Databases บน InfinityFree
5. Prompt ที่ใช้ส่ง Prompt หลักที่ใช้กับ AI
6. สรุปปัญหาเจอปัญหาอะไร และแก้อย่างไร
Submit Website

ส่ง Domain Name ให้อาจารย์ตรวจ

กรอก Domain Name ที่สมัครไว้บน InfinityFree ระบบจะสร้าง URL หน้าเว็บและ URL Admin ให้อัตโนมัติ

กรุณา สมัครหรือ Login ก่อนส่งผลงานเว็บ
คัดลอกแล้ว