ส่วนประกอบของ Web Application (Website)

ปัจจุบันเทคโนโลยีเว็บนั้นเป็น เทคโนโลยีที่ได้รับความนิยมอย่างมากจนเรียกได้ว่าปัจจุบันซอฟต์แวร์ที่ถูกพัฒนาขึ้นต่างถูกพัฒนาให้อยู่ในรูปแบบของเว็บแอปพลิเคชันทั้งนั้น บทความนี้จะเขียนอธิบายการทำงานร่วมกันของส่วนประกอบต่าง ๆ ในเว็บแอปพลิเคชัน

ส่วนประกอบของเว็บแอปพลิเคชัน

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

Screen Shot 2559-01-11 at 10.55.34 AM

ส่วนประกอบฝั่งผู้ใช้งาน (Client-side Technology)

จากรูปทางด้านบน ด้านขวาของรูปเป็นเทคโนโลยีฝั่งผู้ใช้งานประกอบไปด้วย 3 ส่วนหลัก

1. เว็บเบราว์เซอร์ (Web Browser)
เว็บเบราว์เซอร์ เป็นซอฟต์แวร์ที่ผู้ใช้งานใช้ในการเข้าถึงเว็บแอปพลิเคชัน โดยที่เมื่อเริ่มต้น ผู้ใช้งานทำการใส่ URL หรือว่าชื่อของเว็บไซต์ที่ต้องการเข้าใช้งาน เช่น https://www.google.com เมื่อเบราว์เซอร์ได้รับชื่อของเว็บไซต์ก็จะทำการแปลงจากชื่อของเว็บไซต์เป็น IP address ผ่านทาง DNS (ซึ่งจะอธิบายการทำงานในภายหลัง) หลังจากนั้นเว็บเบราว์เซอร์จะทำการสร้าง HTTP request เพื่อส่งคำร้องไปยังเว็บเซิร์ฟเวอร์ผ่านทางเครือข่ายอินเทอร์เน็ต เมื่อได้รับ HTTP response จากเว็บเซิร์ฟเวอร์ เว็บเบราว์เซอร์จะทำหน้าที่ในการอ่าน และแปลง HTTP response ให้เป็นข้อมูลที่ใช้ในการแสดงผลให้กับผู้ใช้งาน (ซึ่งอาจจะมีการเรียกใช้ Plugin ซึ่งจะอธิบายในส่วนต่อไป) ดังนั้นหน้าที่ของเว็บเบราว์เซอร์จะประกอบไปด้วย

  • รับข้อมูลและคำสั่งจากผู้ใช้งาน
  • แปลงคำสั่งของผู้ใช้งานให้เป็น HTTP request เพื่อส่งไปให้กับเว็บเซิร์ฟเวอร์
  • ประมวลผล HTTP response และเรียกใช้ Plugin
  • แปลงภาษา HTML, CSS, JavaScript ให้ข้อมูลสำหรับแสดงผลให้กับผู้ใช้งาน
  • จดจำข้อมูลผู้ใช้งานเช่น ประวัติการใช้งาน ข้อมูล session และ cookie

2. ส่วนต่อความสามารถเว็บและเบราว์เซอร์ (Web Plugin และ Browser Add-on/Extension)
Web Plugin (ส่วนต่อความสามารถเว็บ) คือโปรแกรมที่ถูกเขียนให้ทำงานร่วมกับเว็บเบราว์เซอร์ Web Plugin ที่เป็นที่รู้จักกันดีเช่น Adobe Flash, PDF reader, Silverlight, Java Applet, และอื่น ๆ ซึ่ง Web Plugin เหล่านี้จะถูกเบราว์เซอร์เรียกใช้ก็ต่อเมื่อเว็บไซต์ที่เข้าใช้งานมีเนื้อหาที่ต้องแสดงผลโดย Plugin เช่น Adobe Flash Plugin จะถูกเรียกใช้โดยเบราว์เซอร์ก็ต่อเมื่อเจอเนื้อหาที่ต้องใช้ Flash Player ในการแสดงผล
Browser Add-one/Extension (ส่วนเพิ่มความสามารถเบราว์เซอร์) เป็นโปรแกรมที่ใช้ในการเพิ่มความสามารถให้กับเบราวเซอร์ เช่น ส่วนเพิ่มความสามารถที่ช่วยในการจัดการไฟล์ดาวโหลด ส่วนเพิ่มความสามารถที่ช่วยในการดาวโหลดไฟล์วีดิโอ เป็นต้น ซึ่งส่วนเพิ่มความสามารถเบราว์เซอร์เหล่านี้จะเน้นเพิ่มความสามารถให้กับเบราว์เซอร์ มากกว่าการประมวลผลเนื้อหาเว็บไซต์

ข้อแตกต่างระหว่าง Web Plugin และ Browser Add-on/Extension
Web Plugin และ Browser Add-on/Extension อาจจะสร้างความสับสนให้กับผู้ใช้งานทั่วไปได้เนื้องจากทั้งคู่มีจุดประสงค์ในการเพิ่มฟังก์ชั่นการทำให้ในการท่องเว็บไซต์ อย่างไรก็ตาม Web Plugin กับ Browser Extension มีความแตกต่างกันอยู่หลายประการ

  • Web Plugin จะเป็นส่วนที่ถูกเรียกใช้โดย Web Browser เพื่อส่งต่อเนื้อหาไปให้กับโปรแกรมภายนอกเช่น Adobe Flash/ PDF reader ในการประมวลผล
  • Browser Extension เน้นการเพิ่มความสร้างมาให้กับเบราว์เซอร์ แต่ไม่ได้ประมวลผลหรือแสดงเนื้อหาในเว็บไซต์

3. ระบบปฏิบัติการ (Operating System)
ระบบปฏิบัติการทำหน้าที่ในการจัดการกับทรัพยากรของเครื่องคอมพิวเตอร์ ทำหน้าที่ในการรับ HTTP request จากเบราว์เซอร์และส่งต่อไปให้กับอินเทอร์เน็ต DNS ในระบบปฏิบัติการทำหน้าที่ในการแปลง URL ให้เป็น IP Address เพื่อค้นหาเครื่องเว็บเซิร์ฟเวอร์ สร้างการเชื่อมต่อ (TCP connection) ระหว่างเครื่องผู้ใช้งานและเครื่องเซิร์ฟเวอร์ ดังนั้นการทำงานของระบบปฏิบัติการจะเป็นสิ่งที่ผู้ใช้งานมองไม่เห็นแต่ก็มีความสำคัญมาก

ส่วนประกอบฝั่งเซิร์ฟเวอร์ (Server-side Technology)

เว็บเซิร์ฟเวอร์ที่ทำหน้าที่เป็นผู้ให้บริการแก่ผู้ใช้งานเว็บไซต์ประกอบไปด้วยเทคโนโลยีและซอฟต์แวร์หลายส่วนทำงานร่วมกัน โดยซอฟต์แวร์หลักที่ใช้ในการให้บริการของเว็บเซิร์ฟเวอร์ประกอบไปด้วย 4 ส่วนประกอบหลัก

1. เว็บแอปพลิเคชั่น (Web Application)
เว็บแอปพลิเคชั่น ถือว่าเป็นหัวใจหลักของเว็บไซต์เนื่องจากทำหน้าที่ติดต่อกับผู้ใช้งาน รับและแสดงข้อมูล ประมวลผลข้อมูล จัดการข้อมูลในฐานข้อมูล และอื่น ๆ เรียกได้ว่าเว็บแอปพลิเคชั่นเป็นซอฟต์แวร์ที่ให้บริการผู้ใช้งานทั่วโลกผ่านอินเทอร์เน็ต
หากนักพัฒนาได้เขียนเว็บแอปพลิเคชั่นตาม Model-View-Controller (MVC) แล้วก็จะสามารถแบ่งเว็บแอปพลิเคชันออกได้เป็นสามส่วนหลัก ๆ คือ

  • ส่วนที่ติดต่อกับผู้ใช้งานเพื่อรับข้อมูลและแสดงผล (View)
  • ส่วนที่ประมวลผลการทำงาน (Controller)
  • ส่วนที่ใช้ในการติดต่อและจัดการกับข้อมูลและฐานข้อมูล (Model)

นักพัฒนาสามารถพัฒนาเว็บแอปพลิเคชันได้ด้วยภาษาคอมพิวเตอร์ที่หลากหลาย เราสามารถแบ่งภาษาที่ใช้ในการพัฒนาเว็บแอปพลิเคชั่นออกเป็นสองส่วนคือ Front-End Technology ใช้สำหรับพัฒนา View (ส่วนติดต่อกับผู้ใช้งาน) และ Back-End Technology ใช้สำหรับพัฒนา Model และ Controller (ส่วนประมวลผลและจัดการข้อมูล)

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

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

2.1 เว็บเซิร์ฟเวอร์ซอฟต์แวร์ (Web Server Software)
Web server software เป็นโปรแกรมที่ทำงานอยู่บน web server ซึ่งหน้าที่หลักของ web server software คือการประมวลผล HTTP request ที่ได้รับมาและตอบกลับด้วย HTTP response ให้กับผู้ใช้งาน ปัจจุบันมี web server software หลายตัวที่ถูกใช้งานอย่างแพร่หลายเช่น Apache HTTP server, Internet Information Service (IIS) และ Nginx ยังมี web server software ตัวอื่นอีกมากในท้องตลาดที่ไม่ได้กล่าวถึงในทีนี้ อย่างไรก็ตาม web server software ที่ได้รับความนิยมอย่างแพร่หลายมากที่สุดในปัจจุบันคือ Apache HTTP server และผู้ใช้งานมักจะใช้คู่กับ PHP (ตัวแปลภาษา PHP) และ MySQL (ฐานข้อมูล)

Apache HTTP server
Apache HTTP server เป็น web server software ที่ได้รับความนิยมสูงสุด (ข้อมูล ณ วันที่ 21 ตุลาคม 2558) เนื่องด้วยความสามารถที่หลากหลาย และเป็น freeware ที่อนุญาตให้นำไปใช้งานได้ฟรีทางการค้า Apache HTTP server ปัจจุบันออกเวอร์ชัน 2.4 (วันที่ข้อมูล) ซึ่งมีโครงสร้างการทำงานเป็นแบบ module นั่นคือ ผู้ใช้งานสามารถเพิ่มความมารถของ web server software ได้โดยการติดตั้ง module เพิ่มเติม ตัวอย่างเช่น หากต้องการให้ Apache HTTP server รองรับภาษา PHP ก็สามารถติดตั้ง module ที่สามารถช่วยให้ Apache ประมวลผล web application ที่เขียนด้วยภาษา PHP ได้

Screen Shot 2559-01-11 at 10.57.36 AM

 

การทำงานของ Apache, PHP, และ MySQL

เมื่อได้รับ HTTP request มาจากผู้ใช้งาน Apache จะทำการประมวลผล HTTP request เพื่อตรวจสอบประเภทของไฟล์ที่ร้องของ หากไฟล์ที่ร้องขอเป็นไฟล์ข้อมูล เช่น .jpec .html หรือ .pdf Apache สามารถอ่านไฟล์เหล่านี้และส่งเป็น HTTP response กลับไปให้กับผู้ใช้งานได้ทันที แต่หากไฟล์ที่ HTTP request ร้องขอมาเป็นไฟล์โปรแกรมที่ต้องมีการประมวลผล เช่น .php Apache จะทำการเรียกใช้ PHP module ในการประมวลผลไฟล์ก่อน ซึ่งในการประมวลผลไฟล์อาจจะมีการติดต่อกับฐานข้อมูลเช่น MySQL เพื่อทำการเรียกดู หรือแก้ไขข้อมูลก็สามารถทำได้ เมื่อ PHP module ทำการประมวลผลไฟล์ .php เสร็จแล้วก็จะทำการส่งคือค่าให้ Apache นำไปสร้างเป็น HTTP response เพื่อส่งกลับให้กับผู้ใช้งาน

3.ระบบปฏิบัติการ (Operating System)
ระบบปฏิบัติการบนฝั่งของเซิร์ฟเวอร์มีหน้าที่ในการจัดการกับทรัพยากรของเครื่องเซิร์ฟเวอร์ เช่น CPU memory และ bandwidth เป็นต้น เนื่องจาก web application เป็นบริการที่เปิดให้ผู้ใช้งานเข้าถึงได้ตลอดเวลา ดังนั้น ระบบปฏิบัติการบนเซิร์ฟเวอร์จึงต้องมีความเสถียรและสามารถจัดการกับทรัพยากรของเครื่องได้อย่างมีประสิทธิภาพ

สรุปส่วนประกอบและการทำงานของ web application

การทำงานของ web application นั้นประกอบไปด้วยหลายส่วนทำงานร่วมกัน ซึ่งส่วนประกอบในการทำงานสามารถแยกออกเป็นสองส่วนนั่นคือ เทคโนโลยีในฝั่งของผู้ใช้งาน และเทคโนโลยีในฝั่งของเซิร์ฟเวอร์ โดยเทคโนโลยีในของฝั่งของผู้ใช้งานที่สำคัญคือ web browser และ plugin ที่ทำหน้าที่ในการอำนวยความสะดวกให้กับผู้ใช้งานในการท่องเว็บไซต์ ในส่วนของเซิร์ฟเวอร์ซึ่งมีหน้าที่ในการให้บริการ web application ให้กับผู้ใช้งานก็จะประกอบไปด้วย web application ซึ่งอาจจะเป็นไฟล์ข้อมูลธรรมดา หรือโปรแกรมที่ทำหน้าที่ในการให้บริการผู้ใช้งาน web server software ที่ทำหน้าที่ในการรับ HTTP request จากผู้ใช้งาน ประมวลผล HTTP request และส่งกลับ HTTP response ให้กับผู้ใช้งาน การเข้าใจการทำงานของส่วนประกอบที่ทำงานร่วมกันนั้นเป็นพื้นฐานที่จำเป็นสำหรับการทำงานความเข้าใจช่องโหว่ด้านความปลอดภัยของเว็บไซต์ในบทถัดไป

 


Leave a Reply