School CMS Example - Now.js Framework Demo

เว็บไซต์ตัวอย่างโรงเรียน (School Website Demo) สร้างด้วย Now.js Framework สำหรับสาธิตการใช้งานฟีเจอร์หลักของ framework

📋 Overview

โปรเจ็คนี้เป็นตัวอย่างเว็บไซต์โรงเรียนที่สมบูรณ์ ออกแบบมาเพื่อสาธิตความสามารถของ Now.js Framework ในการสร้างเว็บไซต์ที่มีความ interactive และ responsive โดยไม่ต้องใช้ database จริง

✨ Key Features

• 🎨 Modern UI/UX - ออกแบบด้วยหลักการ modern web design
• 📱 Fully Responsive - รองรับทุกขนาดหน้าจอ
• 🔄 Reactive Data Binding - ใช้ระบบ data binding ของ Now.js
• 📊 API Integration - โหลดข้อมูลจาก PHP API mockup
• 🎭 Rich Animations - Scroll reveal, parallax, slideshow effects
• 🇹🇭 Thai Language Support - รองรับภาษาไทยเต็มรูปแบบ

🏗️ Project Structure

cms/
├── Now/                    # Now.js Framework files
│   ├── css/               # Framework CSS
│   └── dist/              # Compiled framework bundles
├── api/                   # PHP API mockup endpoints
│   ├── activities.php     # กิจกรรม
│   ├── announcements.php  # ประกาศ
│   ├── contact.php        # ติดต่อเรา
│   ├── gallery.php        # แกลเลอรี
│   ├── news.php           # ข่าวสาร
│   ├── programs.php       # หลักสูตร
│   └── testimonials.php   # ความคิดเห็น
├── css/
│   └── style.css          # Custom styles
├── img/                   # รูปภาพ
├── js/
│   ├── app.js            # Main application script
│   └── components/       # Custom components
├── index.html            # Main HTML file
└── README.md             # This file

🚀 Getting Started

Prerequisites

• Web server ที่รองรับ PHP 7.4+
• Modern web browser

Installation

1. Clone หรือ copy โปรเจ็คไปยัง web server:

   cp -r cms/ /path/to/htdocs/

2. เข้าถึงผ่าน browser:

   http://localhost/cms/
   

ไม่ต้องติดตั้งหรือ configure อะไรเพิ่มเติม โปรเจ็คพร้อมใช้งานทันที!

🧩 Now.js Features Used

1. API Component (Data Loading)

โหลดข้อมูลจาก API และแสดงผลด้วย template:

<div data-component="api"
     data-endpoint="api/news"
     data-method="GET"
     data-cache="true">
  <div data-for="item of data">
    <template>
      <h3 data-text="item.title"></h3>
    </template>
  </div>
</div>

2. Slideshow Component

สร้าง slideshow ด้วย fade/slide effects:

<div class="hero-slider"
     data-component="slideshow"
     data-effect="fade"
     data-duration="5000"
     data-autoplay="true">
  <!-- slides -->
</div>

3. Counter Component

แสดง animated counter:

<div data-component="counter"
     data-scroll-trigger="true"
     data-end="1250"></div>

4. Filter Component

กรองรายการด้วย filter buttons:

<div class="filter-controls"
     data-filter-scope=".gallery-grid"
     data-filter-attr="data-category">
  <button data-filter-value="*">ทั้งหมด</button>
  <button data-filter-value="sports">กีฬา</button>
</div>

5. Modal Component

แสดง modal/lightbox:

<button data-modal="lightbox-modal"
        data-modal-bind="image:item.image, title:item.title">
  View
</button>

6. Scroll Effects

Scroll reveal และ parallax animations:

<div data-scroll-reveal="fade-up">Content</div>
<section class="parallax-section">...</section>

7. Form Handling

ส่งฟอร์มผ่าน AJAX:

<form data-form="contact"
      data-reset-after-submit="true"
      method="POST"
      action="api/contact">
  <!-- form fields -->
</form>

📄 Page Sections

Section	Description
Hero	Slideshow หลักพร้อม call-to-action
Announcements	ข่าวประกาศแบบ marquee
About	เกี่ยวกับโรงเรียน พร้อม stat counters
Programs	หลักสูตรพร้อม filter
News	ข่าวสารล่าสุด
Activities	กิจกรรมพร้อม filter
Gallery	แกลเลอรีรูปภาพพร้อม lightbox
Testimonials	ความคิดเห็นจากผู้ปกครอง
Contact	ฟอร์มติดต่อ + แผนที่

🎨 Customization

เปลี่ยนสี Theme

แก้ไข CSS variables ใน css/style.css:

:root {
  --color-accent: var(--color-orange);
  --heading-font: 'Noto Sans Thai', sans-serif;
  --section-padding: 5rem 0;
  --header-height: 80px;
}

แก้ไขข้อมูล API

แก้ไขไฟล์ PHP ใน folder api/:

// api/news.php
$news = [
    ['id' => 1, 'title' => 'ข่าวใหม่', ...]
];

เปลี่ยน Logo และรูปภาพ

• แทนที่ img/logo.png ด้วย logo ของคุณ
• อัพเดทรูปภาพใน folder img/

📡 API Documentation

ดูรายละเอียด API endpoints ได้ที่ api/README.md

Quick Reference

Endpoint	Method	Description
/api/announcements.php	GET	ข้อมูลประกาศ
/api/programs.php	GET	หลักสูตรการเรียน
/api/news.php	GET	ข่าวสารล่าสุด
/api/activities.php	GET	กิจกรรม (รองรับ filter)
/api/gallery.php	GET	รูปภาพแกลเลอรี
/api/testimonials.php	GET	ความคิดเห็น
/api/contact.php	POST	ส่งข้อความติดต่อ

🧪 Development

Now.js Configuration

ตั้งค่า framework ใน js/app.js:

await Now.init({
  environment: 'production',
  paths: {
    framework: '/Now',
    application: '/'
  },
  scroll: {
    enabled: true,
    core: { offset: 60, duration: 800 }
  }
});

เพิ่ม Component ใหม่

1. สร้างไฟล์ใน js/components/
2. Load ใน app.js:

scripts.push('js/components/YourComponent.js');

📝 Notes

• ⚡ ไม่ต้องใช้ database - ข้อมูลเป็น mockup ใน PHP
• 🔒 ไม่มี authentication - เหมาะสำหรับ demo เท่านั้น
• 🌐 รองรับ CORS - เรียกใช้ API จาก frontend ได้
• 📱 Mobile-first responsive design

📚 Learn More

• Now.js Documentation
• API Reference

📄 License

MIT License - ใช้งานได้อย่างอิสระ