Now.js Admin Framework

โปรเจ็คตั้งต้น (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 และกฎสำรองไว้แล้ว

---

ติดตั้ง

1. คัดลอกไฟล์ทั้งหมดขึ้นเซิร์ฟเวอร์

2. ตั้งให้เขียนได้: settings/ และ datas/ (รวม datas/cache/ datas/logs/ datas/images/)

3. สร้างฐานข้อมูลเปล่าไว้ (แนะนำ charset utf8mb4)

4. เปิดเบราว์เซอร์ไปที่ /install/ แล้วทำตามขั้นตอน

   ขั้น	ทำอะไร
   0	ตรวจความพร้อมของเซิร์ฟเวอร์
   1	ตรวจโฟลเดอร์ที่ต้องเขียนได้
   2	ตั้งบัญชีผู้ดูแลสูงสุด
   3	ใส่ค่าเชื่อมต่อฐานข้อมูล
   4	สร้างตาราง นำเข้าคำแปล เสร็จ

5. ลบโฟลเดอร์ 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. ลบโมดูลตัวอย่างออก

3. ติดตั้งตามขั้นตอนข้างบน
4. แก้ชื่อ/โลโก้/ธีมที่หน้า ตั้งค่า
5. สร้างโมดูลของงานตัวเองที่ 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/            สคริปต์และสไตล์ของแอปนี้เอง
├── 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
php install/cli-check-core.php [ที่อยู่โปรเจ็ค ...]

# ชุดทดสอบความปลอดภัยของแกน (รหัสผ่าน bcrypt · session · client IP · บัญชีถูกระงับ · headers)
php install/cli-testsecurity.php [--url=http://host/path]

# กระจายแกนรุ่นนี้ไปทุกโปรเจ็คลูก (ซ้อมก่อน แล้วค่อย --apply) — นิยามแกนอยู่ที่ install/core-manifest.php
php install/cli-sync-core.php --base=<สำเนาแกนรุ่นก่อน> [ที่อยู่โปรเจ็ค ...]
php install/cli-sync-core.php --base=<สำเนาแกนรุ่นก่อน> --apply

cli-sync-core.php ตัดสินต่อไฟล์: เหมือน/แค่เก่า (ตรงกับรุ่นก่อนหรือกับโปรเจ็คอื่น) → ทับ · โปรเจ็คแก้เฉพาะตัว → 3-way merge แล้วรายงานว่าต้อง backport · merge ไม่ได้ → ไม่แตะ · ของเดิมทุกไฟล์ที่ถูกทับอยู่ที่ datas/core-sync-backup/<เวลา>/ ของโปรเจ็คนั้น โปรเจ็คตระกูล GCMS (มี admin/) ได้รับเฉพาะ Kotchasan/ + Now/

ก่อนปล่อยรุ่นทุกครั้ง ต้องได้ [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)

---

สัญญาอนุญาต

MIT — Copyright (c) 2026 Goragod Wiriya

ผู้พัฒนา

Goragod Wiriya · goragod.com · github.com/goragodwiriya