COM-2305

COM 2305 การเขียนโปรแกรมเว็บ

การพัฒนา

แนะนำ VS Code เพื่อพัฒนา
ต้องใช้ XAMPP หรือ PHP Desktop และ NodeJS (ทางเลือก)

Tip

แนะนำ PHP Desktop ง่ายต่อการพัฒนาอย่างมาก

ส่วนขยาย

• แนะนำ IntelliSense for CSS class names in HTML
• แนะนำ Auto Rename Tag
• แนะนำ Auto Close Tag
• แนะนำ HTML CSS Support
• แนะนำ HTML Preview
• แนะนำ PHP Intelephense

การกำหนดค่า

XAMPP

Caution

เลิกใช้ ไม่แนะนำเนื่องจากการตั้งค่าที่เสียเวลา

NodeJS (Express.js)

Warning

พบปัญหา เมื่อคุณใช้ฟังก์ชัน setcookie() หรือ $_SESSION หลายครั้งภายในสคริปต์เดียวกัน
PHP จะส่งเฉพาะที่กำหนดในบรรทัดสุดท้ายไปยังเบราว์เซอร์เท่านั้น
ต้องใช้ PHP Engine ของ XAMPP C:\xampp\php เพื่อแก้ไขปัญหา

• ต้องใช้ NodeJS เวอร์ชัน 18 หรือมากกว่า
• ต้องใช้ Express เวอร์ชัน 5.X หรือมากกว่า
• ต้องใช้ serve-index เวอร์ชัน 1.9.X หรือมากกว่า
• ต้องใช้ sphp เวอร์ชัน 0.6.3 หรือมากกว่า

1. ติดตั้ง Node.js และ npm แล้วตรวจสอบว่า Node.js และ npm ติดตั้งแล้วโดยใช้คำสั่ง node -v && npm -v
2. สร้างโปรเจกต์ใหม่ เปิดเทอร์มินัลหรือ Command Prompt แล้วสร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์แล้วใช้คำสั้ง npm init -y
3. ติดตั้ง dependencies ติดตั้ง Express และ serve-index ด้วย npm npm install express serve-index sphp
4. สร้างไฟล์ app.js
5. เริ่มเซิร์ฟเวอร์ด้วยคำสั่ง node app.js

app.js

const express = require("express"); // นำเข้าโมดูล express, path, serve-index, sphp
const path = require("path");
const serveIndex = require("serve-index");
const sphp = require("sphp");

const app = express();
const path_resolve = path.join(__dirname, ".");

// กำหนดให้ แปลงข้อมูล JSON ที่ส่งมากับ request และ แปลงข้อมูลที่ส่งมากับ request ในรูปแบบ URL-encoded
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// กำหนดให้ express และ sphp ใช้ static files จากโฟลเดอร์ปัจจุบัน
app.use(sphp.express(path_resolve));
// และกำหนด PHP server เพื่อให้มีจำนวน การทำงาน ขั้นต่ำที่ 10 และสูงสุดที่ 20 ในการจัดการการทำงานของเว็บแอปพลิเคชัน PHP ที่มีการใช้งานหนักหรือมีการเข้าถึงพร้อมกันมากๆ
sphp.setOptions({ minSpareWorkers: 10, maxWorkers: 20 });
app.use(express.static(path_resolve));

// กำหนดเส้นทางหลักให้ใช้ serveIndex แสดงรายการไฟล์ในโฟลเดอร์ปัจจุบัน
app.use("/", serveIndex(path_resolve, { icons: true }));

// เริ่มต้นเซิร์ฟเวอร์ให้ฟังที่พอร์ต 3000
app.listen(3000, function () {
	console.log("Server is running on http://localhost:3000");
});

ESM

import express from "express";
import path from "path";
import serveIndex from "serve-index";
import sphp from "sphp";

const app = express();
const path_resolve = path.resolve(__dirname, ".");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(sphp.express(path_resolve));
sphp.setOptions({ minSpareWorkers: 10, maxWorkers: 20 });
app.use(express.static(path_resolve));
app.use("/", serveIndex(path_resolve), { icons: true });
app.listen(3000, () => {
	console.log("Server is running on http://localhost:3000");
});