ทดลองการสร้างเว็บด้วย wix.com
CONTENTS
- บทนำ
- Download and Install Postman
- Run Nginx in Docker
- Run NodeJS Server using Docker
บทนำ
ในปฏิบัติการนี้นักศึกษาจะได้ฝึกการสร้างเว็บโดยใช้ออนไลน์เว็บไซต์ ซึ่งเป็นการทบทวนความรู้ด้านการบริหารจัดการเว็บไซต์ และการสร้างเว็บจากองค์ประกอบต่าง ๆ ที่จำเป็นในการสร้างหน้าเว็บ ซึ่งสอดคล้องกับวัตถุประสงค์รายชาเกี่ยวกับการทำงานเกี่ยวกับระบบบริหารจัดการเว็บไซต์ได้ รวมถึงเข้าใจและอธิบายความรู้เบื้องต้นเกี่ยวกับระบบนี้ โดยทดลองและฝึกสร้างเว็บอย่างง่ายด้วยเว็บไซต์ด้วย Wix.com
อย่างไรก็ตามก่อนสร้างเว็บที่ต้องการ นักศึกษาจะต้องวางแผนการออกแบบและจัดการเนื้อหาบนเว็บไซต์ โดยประยุกต์ใช้ความรู้ทั้งหลายนำมาสร้างผลงานเว็บไซต์เพื่อใช้ในรูปแบบต่าง ๆ
Lab
Download and Install Postman
เข้าไปที่ลิงค์ Postman เพื่อดาวน์โหลด
Run Nginx in Docker
docker run -d --name myapp-static -p 80:80 -v C:/Users/ACER/html:/usr/share/nginx/html:ro nginx:stableสร้างไฟล์ชื่อ index.html ให้อยู่ใน C:/Users/ACER/html จากนั้นเขียนโค้ด HTML ตามต้องการ ตัวอย่างเช่น
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
</head>
<body>
<h1>Hello</h1>
</body>
</html>ทดสอบการทำงานโดยเปิดเบราเซอร์ไปที่ URL
แก้ไขหน้าเว็บโดยแสดงรายละเอียดต่าง ๆ ดังต่อไปนี้ พร้อมตกแต่งให้สวยงาม (นักศึกษาอาจเพิ่มรูปตัวเอง เติมสี ปรับรูปแบบให้สวยงาม)
รหัสนักศึกษา
ชื่อ นามสกุล
ชื่อเล่น
<ข้อมูลอื่น ๆ ตามต้องการ>
บันทึกหน้าจอที่ตกแต่งแล้วส่งใน Assigmment
Run NodeJS Server using Docker
docker run --rm -it -p 3000:3000 -v C:/Users/ACER/myapp:/usr/src/app -w /usr/src/app node:18-alpine shจะปรากฎ Command Prompt ดังแสดงต่อไปนี้
/usr/src/app #
สร้างไฟล์ชื่อ package.json ไว้ใน C:/Users/ACER/myapp พร้อมพิมพ์โค้ดดังต่อไปนี้
{
"name": "test-api",
"version": "1.0.0",
"description": "A simple Express API for testing GET, POST, PUT, DELETE",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "^4.18.2"
}
}สร้างไฟล์ชื่อ app.js ไว้ใน C:/Users/ACER/myapp พร้อมพิมพ์โค้ดดังต่อไปนี้
const express = require('express');
const app = express();
const port = 3000;
// Built-in middleware to parse JSON bodies
app.use(express.json());
// In-memory data store
let items = [];
let nextId = 1;
// GET /items — return all items
app.get('/items', (req, res) => {
res.json(items);
});
// GET /items/:id — return one item
app.get('/items/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const item = items.find(i => i.id === id);
if (!item) return res.status(404).json({ error: 'Item not found' });
res.json(item);
});
// POST /items — add a new item
app.post('/items', (req, res) => {
const { name } = req.body;
if (!name) return res.status(400).json({ error: 'Name is required' });
const newItem = { id: nextId++, name };
items.push(newItem);
res.status(201).json(newItem);
});
// PUT /items/:id — update an existing item
app.put('/items/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const { name } = req.body;
const itemIndex = items.findIndex(i => i.id === id);
if (itemIndex === -1) return res.status(404).json({ error: 'Item not found' });
if (!name) return res.status(400).json({ error: 'Name is required' });
items[itemIndex].name = name;
res.json(items[itemIndex]);
});
// DELETE /items/:id — remove an item
app.delete('/items/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const initialLength = items.length;
items = items.filter(i => i.id !== id);
if (items.length === initialLength) {
return res.status(404).json({ error: 'Item not found' });
}
res.status(204).end();
});
// Start server
app.listen(port, () => {
console.log(`Test API listening at http://localhost:${port}`);
});กลับไปที่ Command Prompt ที่รัน NodeJS Docker ในขั้นตอนก่อนหน้านี้
/usr/src/app #
ติดตั้ง NodeJS Package โดยรันคำสั่งดังต่อไปนี้
/usr/src/app # npm install
เมื่อติดตั้ง NodeJS package เสร็จโดยไม่มีข้อผิดพลาดใด ๆ ให้รันคำสั่งต่อไปนี้เพื่อเริ่มการทำงานของ NodeJS Server
/usr/src/app # npm start
ทดสอบการทำงานโดยเปิดเบราเซอร์ไปที่ URL
การส่งงาน
Lab 4.1: ส่งหน้าจอข้อมูลส่วนตัวที่ตกแต่งสวยงานแล้ว
Lab 4.2: ส่ง 5 หน้าจอประกอบไปด้วย (นักศึกษาสามารถ capture หน้าโปรแกรม Postman มาส่งได้)
- หน้าจอ List all items
- หน้าจอ Get item by ID
- หน้าจอ Create new item ประกอบไปด้วยหน้าจอ Postman และ หน้าเว็บที่ item เพิ่มใหม่ (เปรียบเทียบก่อนหน้าก่อนลบ)
- หน้าจอ Delete item ประกอบไปด้วยหน้าจอ Postman และ หน้าเว็บที่ item หายไป (เปรียบเทียบก่อนหน้าก่อนลบ)
- หน้าจอ Edit item ประกอบไปด้วยหน้าจอ Postman และ หน้าเว็บที่ item ที่แก้ไข (เปรียบเทียบก่อนหน้าก่อนลบ)
ทดสอบเพิ่ม แก้ไข item ด้วยข้อมูลดังต่อไปนี้
{
"name": "ITSCI"
}
