บทที่ 1 เว็บแอปพลิเคชัน

บทที่ 1 เวบ็ แอปพลิเคชัน

เว็บไชต์
เว็บไชต์ (Website) เป็นหน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทาง ไฮเปอร์ลิงก์ เป็น

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

ภาพท่ี 1 ตวั อย่างเวบ็ ไซตเ์ กีย่ วกบั การประชาสัมพนั ธ์
เว็บแอปพลเิ คชนั

เว็บแอปพลเิ คชัน (Web application) คือ โปรแกรมคอมพิวเตอร์ที่ทำงานบนเว็บเซิรฟ์ เวอร์
ซึ่งแตกต่างจาก โปรแกรมที่ใช้บนคอมพิวเตอร์ สมาร์ทโฟน และแท็บเล็ต ที่ได้รับการจัดเก็บไว้ใน
คอมพิวเตอร์สวนบคุ คล เว็บแอปพลิเคชันสามารถเข้าถงึ ได้ โดยใช้ผา่ นเวบ็ เบราว์เซอร์ทีม่ กี ารเชือ่ มต่อ
อินเทอร์เน็ต เว็บแอปพลิเคชันเป็นโปรแกรมที่ใช้บนอุปกรณ์ได้ในทันที ในการใช้งานไม่จำเป็นต้อง
ตดิ ตง้ั บนคอมพวิ เตอร์ ตัวอยา่ งเวบ็ แอปพลเิ คชนั ระบบการจองสนิ คา้ หรือบริการต่าง ๆ เช่น การจอง
ที่พัก การจองโปรแกรมทัวร์ การขายสินค้าออนไลน์ ฯลฯ ระบบงานบุคลากร ระบบงานแผนการ

2

ตลาด ระบบการสั่งซื้อแบบพิเศษ ระบบงานในโรงเรียน เช่น ระบบงานวัดและประเมินผล ระบบงาน
ปกครอง ระบบงานหอ้ งสมุด ระบบการลงทะเบียน เชค็ เกรด ฯลฯ

ภาพที่ 2 ตวั อย่างของเวบ็ แอปพลเิ คชัน

ภาพที่ 3 การทำงานของเวบ็ แอปพลิเคชนั
ส่วนประกอบของเว็บแอปพลิเคชนั

เว็บแอปพลิเคชัน (web application) ประกอบด้วยเว็บเซิร์ฟเวอร์ (web server) เว็บ
เซิร์ฟเวอร์ซอฟต์แวร์ (web server software) ฐานข้อมูล (database) เว็บเบราว์เซอร์ (web
browser) เป็นต้น ซึ่งแต่ละส่วนก็จะมีหน้าที่และการทำงานที่แตกต่างกันออกไป โดยสามารถแยก
ส่วนประกอบของการทำงานของเว็บแอปพลิเคชันออกเป็นสองส่วนหลัก ๆ คือ เทคโนโลยีฝ่ัง

3

ผู้ใช้งาน (client-side technology หรือ frontend) และ เทคโนโลยีฝั่งเซิร์ฟเวอร์ (server-side
technology หรอื backend) ดงั รปู ภาพตวั อยา่ ง

ภาพที่ 4 สว่ นประกอบของเว็บแอปพลิเคชัน
ทีม่ า https://reinvently.com/blog/fundamentals-web-application-architecture/

Front-End Web Technology จะหมายถึงส่วนของเทคโนโลยีที่ใช้ในการสร้างส่วนติดต่อ
กับผู้ใช้งาน ในการสร้างเว็บแอปพลิเคชั่น Front-End Technology ที่เป็นที่แพร่หลายได้แก่ HTML,
CSS, และ JavaScript ซึ่งภาษาคอมพิวเตอร์เหล่านี้ถูกใช้อย่างแพร่หลายในการสร้างส่วนติดต่อกับ
ผใู้ ชง้ านของเว็บแอปพลิเคชนั

Back-End Web Technology จะหมายถึงส่วนของเทคโนโลยีที่เป็นส่วนประมวลผลตรรกะ
และการทำงานของเว็บแอปพลเิ คชัน ไม่วา่ จะเป็นการตรวจสอบสิทธิ์การเข้าใช้ การเรียกดูและจัดเก็บ
ข้อมูล การทำงานของเว็บแอปพลิเคชนั ในส่วนของ Back-End จะเริ่มหลังจากเว็บแอปพลิเคชันไดร้ ับ
HTTP request มาจากผใู้ ชง้ าน ทำการประมวลผล และสง่ ขอ้ มลู กลบั ไปใหก้ ับผ้ใู ชง้ าน

เว็บเซิร์ฟเวอร์ (Web Server) คือการประมวลผล HTTP request ที่ได้รับมาและตอบกลับ
ด้วย HTTP response ให้กับผู้ใช้งาน ปัจจุบันมี web server software หลายตัวที่ถูกใช้งานอย่าง

4

แพร่หลายเช่น Apache HTTP server, Internet Information Service (IIS) เป็นต้น แต่อย่างไรก็
ตาม web server software ที่ได้รับความนิยมอย่างแพร่หลายมากที่สุดในปัจจุบันคือ Apache
HTTP server และผใู้ ชง้ านมักจะใช้คกู่ ับ PHP (ตัวแปลภาษา PHP) และ MySQL (ฐานข้อมลู )

ภาษาคอมพวิ เตอรส์ ามารถนำมาสร้าง web application ได้แก่ PHP, JAVA และ python
เป็นตน้ เพราะภาษาเหลา่ นสี้ ามารถเรียนรู้ได้งา่ ย สามารถหาแหล่งขอ้ มลู ของการใช้งานไดง้ ่าย และใน
ปจั จุบันภาษาเหลา่ น้ียงั เปน็ ท่ีนิยมในการนำมาสร้าง web application ด้วย

ข้อดขี องเว็บแอปพลิเคชนั
1. ในส่วนของการใช้งานที่สามารถใช้งานได้ง่าย สะดวกทุกที่ ทุกเวลา โดยการใช้งานผ่านเว็บ

เบราเซอร์ (Web browser) ก็สามารถใช้แอปพลิเคชันประเภทนี้ได้ รวมถึงมีการอัพเดท
แก้ไขข้อผดิ พลาดต่างๆ อยตู่ ลอดเวลา
2. ขอ้ มลู จดั เก็บทเี่ ดียว งา่ ยต่อการจดั การ และไมเ่ กิดความซ้ำซอ้ น
3. ไม่ต้องการเครือ่ งคอมพิวเตอร์ประสิทธภิ าพสูงซงึ่ มีราคาแพง
4. ไม่ต้องมบี ุคลากรด้านเทคนิคเป็นของตัวเอง เพราะผู้ใหบ้ ริการดูแล Server และการ
บำรงุ รักษาเองท้ังหมด
5. ใช้ได้หลากหลายแพลทฟอร์มทั้ง Windows, Linux และ Mac ทำให้องคก์ รสามารถเลือกใช้
บางเครอื่ งเป็น Linux ไดเ้ พ่ือลดค่าใชจ้ า่ ยดา้ นลิขสทิ ธ์ิ

ความรู้พ้นื ฐานสำหรับนักพัฒนาเว็บไซต์
ในสว่ นของการพัฒนาเวบ็ ใน Frontend นักพฒั นาเวบ็ ควรจะมคี วามรู้ภาษาเหล่านี้
• HTML เป็นภาษาสำหรบั วางโครงสรา้ งเวบ็ ไซต์ เปน็ การให้กำเนดิ elements ทุกอยา่ ง

ขึ้นบนจอภาพ
• CSS เปน็ ภาษาสำหรับตกแตง่ เวบ็ ไซต์ใหส้ วยงาม
• Javascript เป็นภาษาสำหรับทำใหเ้ วบ็ ไซตโ์ ต้ตอบกับผู้ใช้งานได้
• Bootstrap คือ คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็น

ชุดคำสัง่ ที่ถูกพฒั นาขน้ึ มาเพ่ือกำหนดกรอบหรอื รปู แบบการพฒั นาเว็บไซต์ในสว่ นของ
การปฏสิ มั พันธ์กบั ผใู้ ช้งานเว็บไซต์

5

ส่วนทางด้าน Server side หรือ back-end กม็ ีให้เลือกมากมายหลายภาษา ไดแ้ ก่

• PHP เปน็ ภาษาสำหรบั สรา้ งเว็บไซต์โดยตรง และเรียนร้ไู ด้งา่ ย

• Javascript นอกจากจะใช้บน Frontend แล้วยังสามารถใช้ที่ Server side โดยใช้ตัว
Runtime อย่าง Node.js ไดอ้ กี ดว้ ย

• Python เป็นภาษาสคริปต์ แต่ก็สามารถใช้ในการสร้างเว็บไซต์ได้โดย Framework ที่
ไดร้ ับความนยิ มอย่างสูงไดแ้ ก่ Django

• Ruby เป็นภาษาสครปิ ตอ์ ีกภาษาหนึ่ง ทส่ี ามารถสร้างเว็บไซตไ์ ด้ โดยได้รบั ความโด่งดังมา
จาก Framework อย่าง Ruby on Rails

• Java เป็นภาษาที่ใช้สำหรับการเขียนโปรแกรมทั่วไป แต่ก็มี Framework และ API ท่ี
สามารถสร้างเวบ็ ไซต์ได้

• .NET เป็นภาษาที่ใช้สำหรับการเขียนโปรแกรมทั่วไป ของค่ายMicrosoft เช่นกัน แต่ก็มี
Framework และ API ท่ีสามารถสรา้ งเวบ็ ไซตไ์ ด้เช่นกนั

รจู้ ัก Framework

เวบ็ แอปพลเิ คชนั ส่วนมากจะมีโครงสร้างการทำงานที่คล้ายคลึง ซงึ่ โดยส่วนมากงานท่ีต้อง
พัฒนา ได้แก่

1. ระบบ admin
2. ระบบการลงทะเบยี น
3. User สง่ Request เขา้ มา
4. Validate สิทธิ์
5. Validate ข้อมูล
6. ทำงานตามหน้าทีข่ องแตล่ ะคลาส
7. แสดงผลลพั ธ์หรือแสดงข้อผดิ พลาด
จึงได้มีการคิดชุดคำสั่งเป็นมาตรฐาน หรือเป็นรูปแบบ (pattern) เดียวกันที่พร้อมใช้งาน
สำหรับนักพัฒนาเว็บเพื่อให้ไม่เป็นการเสียเวลา จะได้มีเวลาในการคิดพัฒนาระบบงานอื่นๆ
เรียกว่า Web Application Framework หรอื เรียกสน้ั วา่ framework
ดังนั้น framework คือการพัฒนาระบบพื้นฐาน หรือชุดคำสั่ง หรือรูปแบบพื้นฐานขึ้นมา
เพื่อให้ผู้ที่พัฒนา สามารถเรียกใช้คำสั่ง รูปแบบ หรือระบบนั้นได้อย่างง่าย และรวดเร็ว เนื่องด้วย

6

ระบบ หรอื รูปแบบเหล่านัน้ เป็นสงิ่ พ้ืนฐานที่มโี ดยท่วั ไปอยู่แล้ว ไม่จำเป็นต้องสร้างใหม่เขียนซ้ำขึ้นมา
อกี ลดเวลาการพัฒนาลงไปได้

ขอ้ ดีของการใช้ framework
1. มโี ครงสร้างระบบท่ชี ดั เจนและมาตรฐาน จึงทำใหผ้ ู้พฒั นาสามารถทำงานร่วมกันได้
2. ลดเวลาในการสร้าง Create, Read, Update และ Delete เพราะ Framework ส่วนใหญม่ ี

ระบบ Generator ไว้ให้ จงึ ทำใหล้ ดเวลาในการทำงานส่วนนี้
3. มรี ะบบในการเชือ่ มต่อไปยังฐานข้อมลู ได้มากกวา่ 1 ชนิด เช่น เชื่อมตอ่ ไปยัง MySQL, MS

SQL, ProgreSQL, SQLite และอืน่ ๆ ไดห้ ลากหลาย (ทั้งนี้ขึ้นกบั ความสามารถของแต่ละ
Framework)

ขอ้ เสียของการใช้ framework
1. เพ่อื ให้การทำงานอย่างเป็นระบบ จึงมกี ารสร้าง Class ไว้จำนวนมาก เพ่ือเปน็ ตวั ชว่ ยให้

ผ้พู ัฒนาใช้ แตบ่ างคร้ัง Class เหล่านั้นอาจไม่จำเป็น
2. ใชเ้ วลาในการเรยี นรู้และศึกษาธรรมเนยี มของการเขยี นโปรแกรมใน Framework น้นั ๆ

Framework ทไ่ี ดร้ บั ความนิยมในปัจจุบันไดแ้ ก่
1. Rails Framework
2. React JS Framework
3. Angular JS Framework
4. Express Framework
5. Jquery
6. Django – Python Framework
7. Flask - Python Framework

7