คลังบทอ่าน15.1 / การสร้างระบบเว็บบทถัดไป

สารบัญบทอ่าน / Web Implementation / 15.1

04 · เขียนโค้ดและนำระบบไปใช้ · บท 15.1

Web Implementation

สร้างระบบเว็บ

สร้างเว็บโดยเริ่มจากหน้าอ่านได้ แล้วเพิ่มรูปแบบ พฤติกรรม และการสื่อสารกับบริการ

5 หัวข้อคำอธิบายในหน้านี้ภาพอธิบายและกลไกทีละส่วน

ควรรู้ก่อน: 08.2 ส่วนประกอบเว็บแอป · 13.1 พื้นฐานการเขียนโปรแกรม

หัวข้อในบทนี้

ศัพท์ในบทนี้ · กดคำที่ขีดเส้นใต้ในเนื้อหาเพื่อดูความหมายได้ด้วย

API: ข้อตกลงวิธีที่โปรแกรมเรียกความสามารถหรือข้อมูลของอีกโปรแกรม
HTTP: กฎคำขอกับคำตอบที่ใช้ในการสื่อสารเว็บ
JSON: รูปแบบข้อความของ object array และค่าพื้นฐาน
SQL: ภาษาประมวลข้อมูลในฐานข้อมูล เช่นเลือก กรอง join และเปลี่ยนข้อมูล
DOM: โครงสร้างเอกสารใน browser ที่โปรแกรมเข้าถึงได้
HTML: ภาษาโครงสร้างและความหมายของเอกสารเว็บ
CSS: กฎการแสดงผลและการจัดวางเว็บ

จากหลักการไปถึงกลไก

หน้าเว็บกดได้ ต้องมีทั้ง DOM และเส้นทางข้อมูล

ให้โครงสร้างที่มีความหมาย จัด layout JavaScript ผูกเหตุการณ์กับ การกดปุ่มอาจเพียงเปลี่ยนหน้าจอหรือส่ง request ไป backend ต้องแยกสองอย่างเพื่อไม่คิดว่าหน้าจอแสดงว่าสำเร็จแปลว่าข้อมูลถูกบันทึกจริง กฎสิทธิ์ต้องบังคับฝั่ง server

ส่วนที่สัมพันธ์กัน · เส้นแสดงการเชื่อมโยง ไม่ใช่เวลาหน้าเว็บกดได้ ต้องมีทั้ง DOM และเส้นทางข้อมูล

หน้าเว็บกดได้ ต้องมีทั้ง DOM และเส้นทางข้อมูล

HTML
label input button และโครงเอกสาร ช่วยการอ่านและเครื่องมือช่วยเข้าถึง
CSS
กำหนดขนาด ระยะ grid/flex และ responsive ไม่เปลี่ยนสิทธิ์ backend
DOM + events
JavaScript รับการกด อ่านค่า และปรับข้อมูลแสดงผล ต้องมีสถานะรอและ error
HTTP + JSON
ส่งค่าตาม API ตรวจ status และ schema ก่อนแจ้งสำเร็จ
Server boundary
ยืนยันตัวตน ตรวจสิทธิ์และ input ใช้ parameterized query หรือการจัดข้อมูลที่เหมาะ

ข้อความที่ผู้ใช้กรอกไม่ควรถูกตีความเป็น หรือโค้ดโดยไม่จัดการตามบริบท การตรวจ input ฝั่ง client ช่วยการใช้งาน แต่ผู้ใช้ข้ามได้ การซ่อนปุ่ม admin หรือวาง secret ใน JavaScript จึงไม่ป้องกันการเข้าถึงจริง ต้องออกแบบ auth session และการเก็บข้อมูลร่วมกัน

01 / 05

โครงสร้างเอชทีเอ็มแอลHTML Structure · 15.1.1

HTML จัดโครงสร้างด้วยองค์ประกอบที่สื่อความหมาย เช่น heading form และ button

เขียนโครงสร้างด้วย element ที่มีความหมาย เช่น heading paragraph link form และ button Attribute เพิ่มข้อมูลหรือการตั้งค่า การจัดลำดับ heading และ label ทำให้ทั้งคนและเครื่องมือช่วยอ่านเข้าใจ

เทียบหน้าที่เพื่อไม่สับสน

•Semantic elements

บทบาทของเนื้อหา

•Attributes

ข้อมูลและการตั้งค่า

•Document structure

ลำดับที่อ่านและนำทาง

ใช้ button สำหรับการกระทำและ a สำหรับการนำทาง label ผูกกับ input ช่วยรู้ว่าช่องกรอกอะไร การใช้ div ที่หน้าตาคล้ายปุ่มต้องเขียน keyboard และ accessibility เองมากขึ้น

ความหมายมาก่อนหน้าตา

<label for="search">ค้นหาบทอ่าน</label>
<input id="search" type="search">
<button type="button">ค้นหา</button>

label ผูก input ด้วย for/id button มีบทบาทและ keyboard behavior ของปุ่ม ถ้าปุ่มอยู่ใน form ให้ระบุ type เพื่อไม่ submit โดยไม่ได้ตั้งใจ

ที่มาของหัวข้อนี้ · คำอธิบายต่อยอด

คำอธิบายและภาพในหน้านี้เรียบเรียงใหม่ ชื่อบทต้นทางด้านล่างใช้ตรวจที่มา ไม่ได้แทนเนื้อหาที่คุณต้องไปอ่านเพิ่มเพื่อเข้าใจหน้านี้ และไม่ยืนยันว่าทุกประโยคมีอยู่ในคอร์ส

เป็นส่วนต่อยอดที่เขียนเพื่อเชื่อมความเข้าใจ ไม่มีชื่อ Video/Reading เฉพาะที่ยืนยันจาก inventory เดิม

02 / 05

จัดหน้าด้วยซีเอสเอสCSS Layout · 15.1.2

CSS จัดสี ระยะและ layout ต้องรองรับขนาดหน้าจอและอ่านได้ด้วยอุปกรณ์ต่างกัน

ใช้ selector เลือก element แล้วกำหนด property Cascade specificity inheritance และลำดับประกาศช่วยตัดสินค่าที่มีผล Box model มี content padding border margin ส่วน flex และ grid ช่วยจัด layout

เทียบหน้าที่เพื่อไม่สับสน

•Selector / cascade

กฎใดมีผล

•Box model

พื้นที่และระยะของ element

•Layout

การจัดวางเมื่อหน้าจอเปลี่ยน

กล่อง width 300px กับ padding 20px อาจกว้างเกิน 300 หากใช้ content-box ใช้ box-sizing ให้เหมาะและตรวจ responsive ที่พื้นที่แคบ ความสวยต้องไม่ทำให้ contrast หรือขนาดอ่านยาก

พื้นที่และการตอบหน้าจอ

* { box-sizing: border-box; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

border-box รวม padding กับ border ในความกว้างที่กำหนด grid เพิ่มหรือลดคอลัมน์ตามพื้นที่ min ช่วยไม่บังคับกว้าง 240px เมื่อพื้นที่เล็กกว่า

ที่มาของหัวข้อนี้ · คำอธิบายต่อยอด

03 / 05

จาวาสคริปต์และโครงสร้างหน้าJavaScript and DOM · 15.1.3

JavaScript เปลี่ยนพฤติกรรม DOM เป็นโครงสร้างองค์ประกอบที่สคริปต์อ่านและแก้ได้

JavaScript เปลี่ยน รับ event และประสานข้อมูล DOM คือ object ของเอกสารที่ browser สร้าง เลือก node แล้วเปลี่ยน text หรือ attribute ตามเหตุการณ์ งาน asynchronous ต้องรอผลอย่างถูกต้อง

เทียบหน้าที่เพื่อไม่สับสน

•DOM

โครงสร้างเอกสารที่เข้าถึงได้

•Events

การกระทำที่เริ่ม logic

•Async state

สถานะก่อนและหลังผลกลับ

ปุ่มค้นหาอ่านค่าช่องกรอก ส่ง request แล้วแสดง loading จนผลกลับ ถ้าผู้ใช้ค้นสองครั้งผลเก่าอาจกลับทีหลัง ต้องป้องกันแสดงผลผิดคำค้น ใช้ textContent กับข้อความที่ไม่ใช่ เพื่อไม่ตีความ input เป็น markup

แสดงข้อความไม่ตีความเป็น HTML

const output = document.querySelector("#output");
output.textContent = userProvidedText;

userProvidedText ถูกแสดงเป็นข้อความ ไม่ถูกอ่านเป็น markup เหมือนการใส่ innerHTML ต้องมี element id output จริงและโค้ดทำงานเมื่อ พร้อม

ที่มาของหัวข้อนี้ · คำอธิบายต่อยอด

04 / 05

การรับส่งข้อมูลและเอพีไอHTTP, JSON and APIs · 15.1.4

HTTP ส่งคำขอ JSON เก็บข้อมูล API กำหนดสัญญาระหว่างส่วนหน้าและบริการ

fetch เรียก จากเว็บและคืน Promise ต้องตรวจ response.ok แล้วอ่าน body ตามชนิด CORS เป็นกฎ browser เรื่องการอ่าน response ข้าม origin ไม่ใช่กลไกอนุญาตผู้ใช้ของ

อ่านภาพตามลำดับการทำงาน

01HTTP request

URL method headers body

02Response parsing

ตรวจสถานะแล้วอ่านข้อมูล

03UI state

loading success empty error

Server ตอบ 404 ก็ยังได้ response ต้องตรวจ status เอง ไม่ใช้ catch เป็นตัวแทนทุก HTTP error การส่ง ต้องใช้ Content-Type และ schema ที่ backend รองรับ พร้อมจัดการ loading empty และ error ใน UI

HTTP error ต้องตรวจเอง

const response = await fetch("/api/devices");
if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}
const devices = await response.json();

fetch ไม่ reject เพียงเพราะ status 404 จึงตรวจ ok ก่อน body ส่วนนี้อยู่ใน async function และงาน UI ต้องจับ error เพื่อแสดงสถานะที่เข้าใจได้

ที่มาของหัวข้อนี้ · 1 รายการ

Connect and Protect: Networks and Network Security · Module 2: Network operationsReading: Common network protocolsCY3.M2.R1

เอกสารหลักที่ใช้ตรวจแนวคิดเพิ่มเติม

MDN · HTTP overview

05 / 05

ยืนยันตัวตนและตรวจข้อมูลเข้าAuthentication and Safe Input · 15.1.5

ตัวตนและสิทธิ์ต้องตรวจฝั่งบริการ ข้อมูลจากหน้าเว็บต้องตรวจรูปแบบและขอบเขต

Input validation ตรวจรูปแบบและเงื่อนไข Output encoding แสดงค่าเป็นข้อมูลตามบริบท ป้องกันข้อมูลกลายเป็นโค้ด Authentication กับ authorization ต้องบังคับ server ไม่เชื่อการซ่อนปุ่มหรือค่า role ที่ client ส่ง

เทียบหน้าที่เพื่อไม่สับสน

•Validate

ข้อมูลตามรูปแบบและกฎ

•Encode / parameterize

แยกข้อมูลจากโค้ด

•Authorize

สิทธิ์ทำกับทรัพยากรนั้น

ชื่อผู้ใช้ที่มี <script> ต้องแสดงเป็นข้อความไม่รัน markup ใช้ parameter ส่วน ใช้วิธีสร้าง node หรือ encoding ที่เหมาะ Input ที่ผ่านรูปแบบยังอาจอ้าง resource ของคนอื่นจึงต้องตรวจ ownership

ที่มาของหัวข้อนี้ · 2 รายการ

Assets, Threats, and Vulnerabilities · Module 2: Protect organizational assetsVideo: Access controls and authentication systemsCY5.M2.V7
Assets, Threats, and Vulnerabilities · Module 4: Threats to asset securityReading: Prevent injection attacksCY5.M4.R4

เชื่อมความเข้าใจ

นำศัพท์มาเชื่อมกับงาน

ตัวอย่างให้เห็นภาพ

ปุ่มซ่อนในหน้าเว็บไม่ได้ป้องกันการเรียก API ผู้ใช้ต้องถูกตรวจสิทธิ์ที่ server ด้วย

สิ่งที่บทนี้เชื่อมไว้

ใช้ภาพกับตัวอย่างด้านบนเชื่อมหน้าที่ของแต่ละส่วน แล้วตรวจความเข้าใจด้วยการอธิบายเหตุผลของผลที่เห็น ก่อนเปิดบทถัดไป

บันทึกในเบราว์เซอร์นี้

บทเรียนที่เกี่ยวข้องและที่มาของบทอ่าน

คำอธิบายหน้านี้เขียนใหม่ตามหัวข้อใน Atlas รายการด้านล่างเป็นชื่อ Video/Reading ที่เคยจับคู่ไว้ แสดงไว้ให้ตรวจที่มาของชื่อหัวข้อ และไม่รับรองว่าคอร์สสอนทุกส่วนของคำอธิบายนี้

CY3.M2.R1 · Common network protocols CY5.M2.V7 · Access controls and authentication systems CY5.M4.R4 · Prevent injection attacks

MDN · Web development ↗