โปรเจ็คตั้งต้น (base) สำหรับสร้างระบบหลังบ้าน — ไม่ใช่ไลบรารีที่เอาไปติดตั้งเพิ่ม แต่เป็นระบบที่ใช้งานได้จริงตั้งแต่ติดตั้งเสร็จ ให้คัดลอกทั้งโปรเจ็คไปเป็นงานใหม่ แล้วเขียนเฉพาะ "โมดูล" ของงานนั้น ส่วนที่ทุกระบบต้องมีเหมือนกัน — สมาชิก สิทธิ์ การตั้งค่า ภาษา ความปลอดภัย — มีมาให้ครบแล้ว
รุ่น 7.0.3 · PHP 7.4+ · MIT License
English — A ready-to-run admin base built on Now.js (HTML-first front-end) and Kotchasan (PHP back-end). Copy the whole project to start a new system, then write only your own modules: authentication, users, permissions, settings, i18n, PWA and the UI toolkit are already in place. Documentation is in Thai.
ระบบหลังบ้านทุกตัวต้องการของชุดเดียวกันเสมอ — เข้าสู่ระบบ ลืมรหัสผ่าน สิทธิ์ ผู้ใช้ ตั้งค่าเว็บ ส่งอีเมล หลายภาษา ตารางที่ค้น/เรียง/แบ่งหน้าได้ ฟอร์มที่ตรวจค่าให้ ถ้าเริ่มจากศูนย์ทุกครั้ง จะเสียเวลาไปกับของเดิมก่อนได้เริ่มงานจริง
โปรเจ็คนี้ตัดขั้นนั้นทิ้ง: ติดตั้งเสร็จได้ระบบที่ล็อกอินได้ มีเมนู มีหน้าตั้งค่าครบ งานที่เหลือคือเขียนโมดูลของธุรกิจตัวเองใส่เข้าไป ซึ่งเป็นแบบ ถอด‑ใส่ได้ (วางโฟลเดอร์ = ได้เมนู/สิทธิ์/route/API · ลบโฟลเดอร์ = หายไปหมด ไม่ต้องแก้ไฟล์กลาง)
| กลุ่ม | รายละเอียด |
|---|---|
| สมาชิก | เข้าสู่ระบบ · สมัคร · ยืนยันอีเมล · ลืม/ตั้งรหัสผ่านใหม่ · โปรไฟล์ · กันเดารหัสผ่าน (ล็อกหลังพยายามผิดซ้ำ) |
| เข้าสู่ระบบด้วยบัญชีอื่น | Google · Facebook · LINE · Telegram |
| สิทธิ์ | กำหนดสิทธิ์รายฟีเจอร์ · สถานะสมาชิก · แผนก/หมวดหมู่ · โหมดสาธิต (อ่านอย่างเดียว) |
| หน้าตั้งค่า | ทั่วไป · ข้อมูลบริษัท · ธีม (มีผู้ช่วย AI ช่วยสร้างชุดสี) · อีเมล (SMTP) · API · LINE · Telegram · SMS · AI · นโยบายคุกกี้ · จัดการภาษา · ประวัติการใช้งาน |
| หลายภาษา | ไทย/อังกฤษมาให้ · แก้คำแปลผ่านหน้าเว็บได้ · เพิ่มภาษาใหม่ได้ |
| หน้าแรก | รวมการ์ดตัวเลขและบล็อกกราฟ/ตาราง/ปฏิทินจากทุกโมดูลที่ติดตั้งอยู่ โดยไม่รู้จักโมดูลไหนเลย |
| ชุดเครื่องมือ UI | ตาราง (ค้น/เรียง/กรอง/แบ่งหน้าฝั่งเซิร์ฟเวอร์ · ปุ่มในแถว · ทำกับหลายรายการ) · ฟอร์ม (ตรวจค่า · autocomplete · รายการย่อย · แก้ทั้งตาราง) · กราฟ · ปฏิทิน · modal · แจ้งเตือน · ตัวแก้ข้อความ · ตัวสร้างฟอร์ม · ลายเซ็น · แกลเลอรี · ตัวอ่าน PDF |
| แจ้งเตือน | อีเมล · LINE · Telegram · SMS (Thaibluksms) |
| AI | ตัวเชื่อมกลางรองรับ OpenAI · Gemini · Claude · Groq · DeepSeek · OpenRouter · Ollama · LM Studio |
| พิมพ์/ส่งออก | ใบเอกสาร A4/A5 และกระดาษม้วน 58–80 มม. · แปลง PDF · ส่งออก CSV |
| PWA | manifest + service worker (ทำงานออฟไลน์บางส่วน · แจ้งเตือนเมื่อมีรุ่นใหม่) |
| ความปลอดภัย | CSRF ทุก POST · โทเค็น JWT/คุกกี้ · Content-Security-Policy · กันไฟล์ภายในถูกเสิร์ฟผ่าน .htaccess |
| ตัวติดตั้ง | ติดตั้งใหม่และปรับรุ่นผ่านหน้าเว็บ พร้อมเครื่องมือบรรทัดคำสั่งสำหรับนักพัฒนา |
| ขั้นต่ำ | |
|---|---|
| PHP | 7.4 ขึ้นไป · ส่วนขยาย mbstring zlib xml gd curl |
| ฐานข้อมูล | MySQL 5.5.3+ หรือ MariaDB 5.5+ (ต้องรองรับ utf8mb4) |
| เว็บเซิร์ฟเวอร์ | Apache + mod_rewrite (มี .htaccess มาให้) หรือ Nginx ที่เขียนกฎ rewrite เทียบเท่า |
รัน PHP ผ่าน php-fpm ต้องเปิด
CGIPassAuth On(Apache 2.4.13+) ไม่งั้นหัวAuthorizationจะถูกตัดทิ้งก่อนถึง PHP แล้วทุก API ตอบ 401 ทั้งที่โทเค็นถูกต้อง —.htaccessที่ให้มามีทั้งCGIPassAuthและกฎสำรองไว้แล้ว
-
คัดลอกไฟล์ทั้งหมดขึ้นเซิร์ฟเวอร์
-
ตั้งให้เขียนได้:
settings/และdatas/(รวมdatas/cache/datas/logs/datas/images/) -
สร้างฐานข้อมูลเปล่าไว้ (แนะนำ charset
utf8mb4) -
เปิดเบราว์เซอร์ไปที่
/install/แล้วทำตามขั้นตอนขั้น ทำอะไร 0 ตรวจความพร้อมของเซิร์ฟเวอร์ 1 ตรวจโฟลเดอร์ที่ต้องเขียนได้ 2 ตั้งบัญชีผู้ดูแลสูงสุด 3 ใส่ค่าเชื่อมต่อฐานข้อมูล 4 สร้างตาราง นำเข้าคำแปล เสร็จ -
ลบโฟลเดอร์
install/ออกเมื่อติดตั้งเสร็จ
ติดตั้งจากบรรทัดคำสั่ง (สำหรับตั้งฐานทดสอบ)
php install/cli-fresh.php <dbname> [prefix] --admin=you@example.com --password=secretอัปโหลดไฟล์รุ่นใหม่ทับ แล้วเปิด /install/ อีกครั้ง — ตัวติดตั้งเห็นว่ามี
settings/config.php อยู่แล้วและเลขรุ่นสูงกว่า จะเปลี่ยนเป็นโหมดปรับรุ่นเอง
ตัวปรับรุ่นเขียนให้รันซ้ำได้ และกันการถอยรุ่นไว้แล้ว
cp -r adminframework myproject # 1. คัดลอกทั้งโปรเจ็ค
cd myproject
rm -rf modules/demo templates/demo # 2. ลบโมดูลตัวอย่างออก- ติดตั้งตามขั้นตอนข้างบน
- แก้ชื่อ/โลโก้/ธีมที่หน้า ตั้งค่า
- สร้างโมดูลของงานตัวเองที่
modules/<ชื่อ>/+templates/<ชื่อ>/— อ่าน MODULE_DEVELOPMENT_GUIDE.md
โมดูลถูกค้นเจอเองทั้งหมด ไม่ต้องแก้ไฟล์กลางแม้แต่บรรทัดเดียว
| สิ่งที่ต้องการ | ทำอย่างไร |
|---|---|
| JS/CSS ของโมดูล | วางไฟล์ admin.js / styles.css ในโฟลเดอร์โมดูล |
| เมนูและสิทธิ์ | เขียนเมธอด initMenus / initPermission ใน controllers/init.php |
| การ์ด/บล็อกบนหน้าแรก | เขียน initDashboard / initDashboardBlocks |
| API | วางคลาสใน controllers/ → เรียกได้ที่ api/<โมดูล>/<คอนโทรลเลอร์>/<เมธอด> |
| ตารางของโมดูล | modules/<ชื่อ>/install/database.sql + upgrade.php |
├── Now/ เฟรมเวิร์กฝั่งเบราว์เซอร์ (ซอร์สที่ js/ และบันเดิลที่ dist/) — เหมือนกันทุกโปรเจ็ค
├── Kotchasan/ เฟรมเวิร์กฝั่ง PHP (router, query builder, HTTP, ภาษา) — เหมือนกันทุกโปรเจ็ค
├── Gcms/ แกนของแอป: API base, ตาราง, สิทธิ์, อีเมล, LINE, SMS, AI
├── modules/ โมดูล — หนึ่งโฟลเดอร์คือหนึ่งความสามารถ
│ ├── index/ แกนระบบ (สมาชิก สิทธิ์ ตั้งค่า ภาษา) — ห้ามแก้เมื่อทำโปรเจ็คใหม่
│ ├── demo/ ตัวอย่างที่รันได้จริง ลบทิ้งได้ทั้งโฟลเดอร์
│ ├── export/ พิมพ์เอกสาร/PDF/CSV ใช้ร่วมกันทุกโมดูล
│ ├── download/ อัปโหลดและดาวน์โหลดไฟล์
│ └── timeline/ โปรโตคอลไทม์ไลน์ข้ามระบบ
├── templates/ หน้าเว็บ (HTML ล้วน + data-* ไม่มี PHP ปน)
├── language/ คำแปล th/en (.php คือแฟ้มที่รันจริง, .json ไว้นำเข้าตาราง)
├── install/ ตัวติดตั้ง ตัวปรับรุ่น และเครื่องมือบรรทัดคำสั่ง
├── settings/ ค่ากำหนดที่ตัวติดตั้งเขียนให้ (ต้องเขียนได้)
├── datas/ ไฟล์ที่ระบบสร้าง: รูป แคช ล็อก (ต้องเขียนได้)
├── js/ · css/ สคริปต์และสไตล์ของแอปนี้เอง (บันเดิลของโปรเจ็ค: js/components/<ชื่อ>/ → js/dist/)
├── index.php หน้าเดียวของ SPA (โหลดบันเดิล + โมดูลอัตโนมัติ)
└── api.php ประตูเดียวของ API ทั้งหมด
| ไฟล์ | เนื้อหา |
|---|---|
| FRAMEWORK_GUIDE.md | ภาพรวมสถาปัตยกรรม · วิธีสร้าง UI ด้วย data-* · รายการ API |
| MODULE_DEVELOPMENT_GUIDE.md | เขียนโมดูลถอด‑ใส่ได้ ตั้งแต่ route ถึงตัวปรับรุ่นฐานข้อมูล |
| modules/demo/ | โค้ดตัวอย่างที่เปิดดูได้ทันที ไม่ต้องมีตารางในฐานข้อมูล |
| nowjs.net · docs.nowjs.net | เอกสารของ Now.js |
| kotchasan.com · docs.kotchasan.com | เอกสารของ Kotchasan |
เครื่องมือชุดนี้ใช้ตอนพัฒนา/ก่อนปล่อยรุ่น ไม่ได้ทำงานบนไซต์ของผู้ใช้
# ตรวจแฟ้มภาษา — หาคีย์ที่โค้ดเรียกแต่ยังไม่มีคำแปล
php install/cli-language.php
# ติดตั้งใหม่ลงฐานเปล่า / ตรวจว่าฐานผ่านเกณฑ์ของรุ่นนี้แล้วหรือยัง
php install/cli-fresh.php <dbname> [prefix] --admin=<user> --password=<pass>
php install/cli-verify.php <dbname> [prefix]
# รันตัวปรับรุ่นตัวจริงกับฐานที่ตั้งค่าไว้ใน settings/ (ต้องยืนยันว่าสำรองแล้ว)
php install/cli-upgrade.php <username> <password> --confirm-backup
# สร้างฐานทดสอบหลายรุ่นแล้วปรับรุ่นทั้งชุด
php install/cli-testdb.php
# ชุดทดสอบความปลอดภัยของแกน (รหัสผ่าน bcrypt · session · client IP · บัญชีถูกระงับ · headers)
php install/cli-testsecurity.php [--url=http://host/path]
# ตรวจว่า Now/ Kotchasan/ vite.config.js ของทุกโปรเจ็คลูกเหมือนที่นี่ 100% / กระจายให้เหมือน
php install/cli-framework-sync.php [--apply [--force]] [โปรเจ็ค ...]Now/, Kotchasan/ และ vite.config.js เหมือนกันทุกโปรเจ็ค (ตั้งแต่ 2026-10-24) แก้ที่นี่ (Now.js แก้ที่ nowjs ก่อน)
แล้วกระจายด้วย cli-framework-sync.php --apply — เครื่องมือเก็บไฟล์ที่ถูกทับ/ลบไว้ที่ now.js/backup/framework-sync/
เสมอ และข้ามโปรเจ็คที่มีไฟล์ของตัวเองปนอยู่หรือมีไฟล์ที่แก้ในโปรเจ็คนั้นแต่ยังไม่ได้นำเข้าที่นี่
(ใช้ประวัติ git ของ adminframework และ nowjs แยกรุ่นเก่าออกจากงานใหม่) ของที่เป็นของโปรเจ็คเดียวจึงต้องไม่อยู่ในสามที่นี้:
บันเดิลของโปรเจ็คไปที่ js/components/<ชื่อ>/ (ดูหัวข้อถัดไป) ชุดทดสอบของ Kotchasan ไปที่ tests/Kotchasan/
ส่วนอื่น — Gcms/, modules/index และ install/ — ยังไม่ sync อัตโนมัติ (เลิกใช้ 2026-10-09 เพราะเครื่องมือเดิม
ทับไฟล์ทั้งไฟล์โดยไม่ merge จนงานของโปรเจ็คลูกหาย) โปรเจ็คลูกเป็นเจ้าของสำเนาของตัวเอง ถ้าต้องการก็นำไปใส่ทีละโปรเจ็ค
ส่วนที่เป็นของโปรเจ็คนั้นจริง ๆ ให้ทำเป็นโมดูล (modules/<ชื่อ>/admin.js, styles.css, controllers/init.php
ถูกโหลดเอง) แทนการแก้ไฟล์กลางอย่าง js/main.js หรือ menus.php
ก่อนปล่อยรุ่นทุกครั้ง ต้องได้ [ok] ไม่มีคีย์ที่ขาด จาก cli-language.php
และสคีมาที่ได้จาก cli-fresh ต้องตรงกับที่ได้จาก cli-upgrade ทุกตัวอักษร
ต้องทำเฉพาะเมื่อแก้ซอร์สใน Now/js/ — งานปกติของโปรเจ็คไม่ต้องแตะ
npm install
npm run build # สร้างบันเดิลทั้งหมดลง Now/dist/
npm run build:core # หรือเลือกทีละตัว: core table graph serviceworker
# queue eventcalendar editor formbuilder syntaxhighlighter
npm run dev # โหมดพัฒนาindex.php โหลด now.core now.table now.graph และ service worker ให้เสมอ
บันเดิลอื่นเป็นของเสริม — โมดูลที่ต้องใช้ควรโหลดเองจาก admin.js ของตัวเอง
เพื่อไม่ให้โปรเจ็คที่ไม่ได้ใช้ต้องแบกไปด้วย (ดูตัวอย่างที่ modules/demo/admin.js)
บันเดิลของ Now.js build ที่ adminframework เท่านั้น แล้วกระจายไปพร้อม Now/ — npm run build
ในโปรเจ็คลูกจะ build core ทับ Now/dist/ ด้วย และได้ไฟล์ไม่ตรงกับที่นี่เมื่อรุ่นของ vite/rolldown ใน node_modules ต่างกัน
(cli-framework-sync.php รายงานและทับคืนให้) ในโปรเจ็คลูกให้สั่งเฉพาะบันเดิลของตัวเอง เช่น npm run build:timeline
โค้ดที่มีแค่โปรเจ็คเดียวใช้และต้อง build เป็นบันเดิลของตัวเอง (designer, timeline ฯลฯ) ห้ามอยู่ใน Now/
ให้วางที่ js/components/<ชื่อ>/ พร้อม build.json — vite.config.js (ไฟล์เดียวกันทุกโปรเจ็ค) อ่านเองเมื่อสั่ง
BUILD_TARGET=<ชื่อ> และ build ลง js/dist/ ซึ่ง build core ไม่ล้าง
js/components/timeline/
├── build.json {"entry": "entry.js", "name": "now.timeline.min.js", "css": "now.timeline.min.css", "libName": "NowTimeline"}
├── entry.js import ซอร์สและ CSS ของบันเดิล
└── ...
# package.json ของโปรเจ็คนั้น: "build:timeline": "cross-env BUILD_TARGET=timeline vite build"
npm run build:timeline # → js/dist/now.timeline.min.js + .cssโมดูลที่ใช้โหลดบันเดิลเองจาก admin.js และส่ง ?v= ของ admin.js ต่อให้ (ตัวอย่าง: form/modules/docdesigner/admin.js)
รายละเอียดอยู่ใน nowjs: docs/th/guides/architecture/project-bundles.md
MIT — Copyright (c) 2026 Goragod Wiriya
Goragod Wiriya · goragod.com · github.com/goragodwiriya