---
title: การเขียนโปรแกรมบนเว็บ 
subtitle: 
date: วันพุธที่ 11 ธันวาคม 2562  เวลา 08.50 น.
---

								(ข้อความสดจากระบบถอดความเสียงพูดทางไกล)


(อาจารย์) สวัสดีค่ะ ๆสวัสดีค่ะ สวัสดีค่ะ ยินดีต้อนรับเข้าสู่รายวิชาการเขียนโปรแกรมบนเว็บนะคะ เจอกันเช้าวันพุธ เดี๋ยวขอเช็กความพร้อมของพวกเราทุกคนก่อนนะคะ โอ.เค. นะ คนแรกมาหรือยัง คนแรก ชาริกาญจน์ อชิรญา สิริชัย ปิชาฎา กาญจนา นันสินีสุรเชษฐ์ ทานข้าวอิ่มแล้วใช่ไหมคะ นิลวรรณ วินิจ จุทามาศพิษิท คมกฤษ โสภิดา อรสา เสาวลักษณ์ กาญจนสิริ ยังไม่มานะคะ เพื่อนไปไหนวรรณวิสา วิภาพร ภัชราภาณัฐสุดา จตุรพร โอ.เค. อรสา กาญจนสิริ หายไปไหนเอ่ย ยังไม่มานะคะ โอ.เค. นะคะ ก่อนที่เราจะเริ่มการปฏิบัติในเรื่องของการเขียนโปรแกรมบนเว็บนะคะ เดี๋ยวเราจะต้องมาเรียนรู้พื้นฐาน ทฤษฎีที่เกี่ยวข้องกับการเขียนโปรแกรมบนเว็บนะคะ แต่อาจารย์เคยพูดกับพวกเรา เคยบอกกับพวกเราว่าจะให้ประยุกต์ใช้ตัว Wordpในการสร้างเว็บไซต์ เพราะว่ามันจะได้ไม่ยุ่งยากนะ เราอยู่ฝ่าย IT เราต้องประยุกต์ตัวที่เป็นเว็บสำเร็จรูปตัวที่เป็น CMS นะคะ แต่ว่าเราจะต้องเรียนรู้นะคะ ในส่วนของ แต่จะได้ฝึกนิดหน่อยในเรื่องของภาษา HTML นะคะ ในการพัฒนาเว็บนะคะ ในการออกแบบเนื้อหาโดยใช้ HTML นะคะ เดี๋ยวถามพวกเราก่อนว่า เทอมก่อนหน้าเรียนหลักการเขียนมาใช่ไหมคะ ใช่ไหม หลักการเขียนโปรแกรม แล้วก็ภาษาคอมพิวเตอร์ใช่ไหมคะ การเขียนโปรแกรมภาษาคอมพิวเตอร์ หลักการเขียนโปรแกรม เราได้ใช่ภาษาอะไรในการฝึกเขียนโปรแกรม จำได้ไหมคะ ใช้อะไรคะ ใช้ Python นะคะ และก็ต่อจากหลักการเขียนโปรแกรมจะมีวิชาหนึ่ง หลักการเขียนโปรแกรมคอมพิวเตอร์ใช้ Python เหมือนกันหรือเปล่าคะ แสดงว่าเรียน Phython 2 เทอมเลยใช่ไหมคะ แสดงว่าห้องนี้แน่น โอ.เค เพราะฉะนั้นเราเรียนเขียนโปรแกรมมา เรียนการเขียนโปรแกรมภาษาคอมพิวเตอร์มาแล้วนะคะ ในส่วนของการเขียนโปรแกรมบนเว็บนี่ก็จะมีหลาย ๆ ภาษาที่เราจะเอามาประยุกต์แต่ว่าเราจะเน้นภาษาใดภาษาหนึ่ง เดี๋ยวเรามาดูทฤษฎีการเขียนโปรแกรมบนเว็บ และมาตรฐานกับเว็บไซต์นะคะ โดยหัวข้อในส่วนนี้ก็จะมาดูเรื่องของหลักการทำงานของ WWW. ซึ่งเราคุ้นอยู่แล้วใช่ไหมคะ แล้วก็ประเภทของโปรแกรมบนเว็บ ความรู้ทั่วไปเกี่ยวกับการออกแบบเว็บแล้วก็ยุคของการพัฒนาเว็บไซต์ แล้วก็มาตรฐานในการพัฒนาเว็บไซต์นะคะ มาดูลักษณะของการเขียนโปรแกรม โอ.เค. นะคะ ต่อนะ เรามาดูลักษณะของการเขียนโปรแกรมนะคะ ซึ่งเราเรียนเขียนโปรแกรมมาแล้วใช่ไหมคะ หลักการเขียนโปรแกรม การเขียนโปรแกรมบนซึ่งลักษณะการเขียนโปรแกรมบนวินโดว วิชา การเขียนโปรแกรมภาษาคอมพิวเตอร์นั้นเป็นการเขียนโปรแกรมบน Windows อีกตัวหนึ่งคือการเขียนโปรแกรมบนเว็บ การเขียนโปรแกรมบนเว็บ ก็คือการแสดงผลของโปรแกรมที่อยู่บนเว็บเบราว์เซอร์ ซึ่งผู้ใช้นี้ถึงได้ผ่านเครือข่ายอินเทอรเน็ต ทีนี้จะขอถามพวกเราว่า เว็บเบราว์เซอร์นี่คืออะไร Web Browser คืออะไร Web Browser มีอะไรบ้าง นะคะ เดี๋ยวจะขอถาม จะขอตั้งคำถามว่า Web Brownser ได้แก่อะไรบ้างนะคะ โดยอาจารย์จะสุ่ม จะสุ่มว่า ใครจะเป็นผู้ตอบคำถามสัก 2-3 คน ว่า Web Brownser ได้แก่อะไรบ้างนะคะ ขอถาม ใครเอ่ย ปายใช่ไหมคะ ปาย ปายคะ ปายช่วยตอบ เอ่อ... ยกตัวอย่างหนึ่งตัวก็ได้นะคะ Web Browser ได้แก่อะไร ยกตัวอย่างมา 1 ตัว 

(ล่าม) เป็นเว็บไซต์ของราชภัฏสกล 

(ล่าม) เป็นเว็บไซต์ของมหาวิทยาลัยค่ะ 

(อาจารย์) ตัวที่เป็นเว็บบราวเซอร์ ที่ตอบมามีส่วนถูกนะคะ แต่ว่ายังไม่ร้อยเปอร์เซ็นต์ เดี๋ยวมีตัวช่วยนะคะ วันนี้วันที่ 11 อยู่ใกล้ ๆ กัน Google Chorm นะคะ ตัวที่เป็นเว็บเบราว์เซอร์นะคะ จะมี Google chrome ตัวโปรแกรมที่เปิดดูเอกสารนะคะ เปิดดูเอกสารที่อยู่บนเว็บไซต์นะคะ ตัวโปรแกรมที่ใช้ในการเปิดเอกสาร เปิดเอกสารของเว็บไซต์ ซึ่งเว็บไซต์ที่เราคุ้นเคยนะคะก็คือ Google Chrome ใช่ไหมคะ ถ้าเป็นเครื่อง Mac ล่ะคะถ้าเป็นเครื่อง Mac safali ตัวนี้คือ Web Brownser ซึ่งตัว Web Brownser มีเยอะมากเลยใช่ไหมคะ นอกจาก Google Chrome มีอะไรอีกคะ มี Firefox แล้วตัวที่ติดมากับ Windows เลย ที่ติดมากับ Microsoft เลยคืออะไรคะ ก็คือ Internet Exploer หรือตัว IE ใช่ไหมคะ เพเพราะฉะนั้นอันนี้เป็นตัวที่เราคุ้นเคย Google Chrome Fire นะคะ แต่ตัวที่ใช้เยอะที่สุด เว็บเบราว์เซอร์ที่ใช้เยอะที่สุดก็คือ Google chrome สามารถที่จะเปิด หรือ Support หรือเข้ากับทุก ๆ โปรแกรมนะคะ เข้ากับทุก ๆ เพจนะคะ ที่เขาออกแบบ เพราะฉะนั้นตัว Google Chrome จะเป็นตัวที่ดีที่สุด และก็การแสดงผลดีที่สุดนะคะ เพราะฉะนั้นถ้าเราจะเข้าถึงข้อมูลผ่าน Internet เราจะต้องผ่านโปรแกรมเว็บเบราว์เซอร์นะคะ ทีนี่มาดูหลักการของการทำงานของนะคะ World Wide Web นี่นะคะ จะมีอยู่ 2 ส่วนนะคะ 2 ส่วน คือ ส่วนที่เรียกว่าผู้ขอใช้บริการนะคะ และผู้ให้บริการนะคะ ซึ่งเครื่องผู้ใช้บริการก็คือ เครื่องที่เราใช่อยู่ ซึ่งเครื่องที่เราใช้อยู่สามารถเป็นได้ทั้งผู้ขอใช้บริการและผู้ให้บริการนะคะ หรือจะเรียกกันทางศัพท์คอมพิวเตอร์นี่คือ ผู้ขอใช้บริการก็คือ Cliant และก็ผู้ให้บริการก็คือ Server นะคะ ผู้ให้บริการหรือ Server ก็คือ ตัวที่กระจายข้อมูล ตัวที่กระจายข้อมูลต่าง ๆ หรือ เราเขียนเว็บหรือเราสร้างเว็บนี้ เราจะต้องเอาข้อมูลของเราเก็บไว้ที่ที่ Server นะคะ เราจะต้องเอาข้อมูลทั้งหมดของเราไปเก็บไว้ที่ Server เพื่อที่จะให้ผู้ขอใช้บริการต่าง ๆ เวลาขอใช้ข้อมูลของเรา เขาก็จะดึงจาก Server นี่ ไปที่เครื่องของผู้ที่ใช้บริการ เพราะฉะนั้นนี่ www จะมีทั้งผู้ใช้บริการและผู้ให้บริการนะคะ ยกตัวอย่าง อย่างเช่นการทำงานของตัวผู้ใช้บริการและผู้ให้บริการนะคะ ในลักษณะของการใช้บริการงานพิมพ์นะคะ เครื่องพิมพ์นี่เราสามารถขอใช้บริการเครื่องพิมพ์ 1 เครื่อง หรือ โดยผู้ขอใช้บริการนี่อาจจะหลาย ๆ เครื่องก็ได้ ใช่ไหมคะ เราจะจะสังเกตเห็นว่าห้องทำงานต่าง ๆ จะมีเครื่องพิมพ์อยู่ 1 เครื่อง สมมตินะคะ และจะมีเครื่องของพนักงานเป็นสิบ ๆ เครื่องใช่ไหมคะ แล้วแต่ละคนนะคะ พนักงานแต่ละคนนี่ สามารถที่จะใช้งานเครื่องพิมพ์เครื่องนั้นได้ ซึ่งเครื่องพิมพ์เครื่องนี้ จะทำการเชื่อมต่อกับ Server นะคะหรือเชื่อมต่อกับเครื่องให้บริการนะคะ เวลาที่เราเรียกใช้หรือเรียกว่า สั่ง Print งานหรือสั่งพิมพ์งานมันก็จะทำการวิ่งไปที่เครื่องผู้ให้บริการนะคะ แล้วก็จะสั่ง เราก็สามารถสั่งพิมพ์งานได้ ซึ่งก็จะมีวิธีการ ขั้นตอนในการติดตั้งเครื่อง Print เป็นเครื่องให้บริการนะคะ เดี๋ยวเราอยู่ปี 3 ปี 4 ใช่ไหมคะ ติดตั้งเครื่องพิมพ์แล้วนี่ ตัวนี้จะได้ใช้งานบ่อยมาก จะได้ใช้งานบ่อยมากในการตั้งค่าเครื่องพิมพ์ให้เป็น Server ให้หลาย ๆ เครื่องสั่ง Print งานได้นะคะ เพราะฉะนั้นนี่ อันนี้ก็จะเป็นตัวอย่างของการให้บริการเครื่องพิมพ์นะคะ ซึ่งเราจะเรียกงกระบวนการนี้ว่า Printer Server หรือว่า Print Server นะคะ อีกตัวอย่างหนึ่งของการทำงานของ World Wide Web ก็คือ การให้บริการข้อมูลนะคะ หรือว่าฐานข้อมูล ซึ่งเราจะต้องมีการติดตั้งฐานข้อมูลที่ Server ซึ่งเราจะเรียกตัวนี้ว่า Database Server นะคะ หรือว่าเป็นผู้ให้บริการฐานข้อมูลเวลาที่เราหรือผู้ขอใช้บริการไปดึงข้อมูล สมมติว่าในห้องนี้นะคะ 20 กว่าคน ข้อมูลของเราถูกเก็บไว้ที่ใดที่หนึ่งนะคะ ก็คือเก็บไว้ที่ Databess ไม่ว่าจะเป็นประวัตินะคะ ข้อมูลทุกอย่างนะคะ ที่เราออกแบบฐานข้อมูลไว้ใช่ไหมคะ เวลาที่เราไปดึงข้อมูลของคนใดคนหนึ่งนะคะ อยากทราบข้อมูลของคนใหคนหนึ่ง หรือเราจะ Update ข้อมูลของเรานะคะ เราก็ใส่รหัสนักศึกษาไป หรือ รหัสบัตรประชาชนไป แล้วเครื่องผู้ให้บริการนี่ก็จะดึงข้อมูลของเราที่อยู่ในฐานข้อมูลนี่ส่งมาที่ผู้ใช้บริการนะคะ เวลาที่เราเขียนโปรแกรมบนเว็บจะต้องมีการออกแบบฐานข้อมูลนะคะ ซึ่งการออกแบบฐานข้อมูลพวกเราเรียนมาแล้วเทอมที่แล้วถูกไหมคะ เป็นอย่างไรได้สร้างตาราง วิเคราะห์ข้อมูลตารางออกแบบตารางฐานข้อมูลอย่างสนุกสนานเลยนะคะ เพราะฉะนั้นนี่ทฤษฎีในการออกแบบฐานข้อมูลนะคะเราจะได้เอามาประยุกต์ใช้ในเรื่องของการเขียนโปรแกรมด้วยนะคะ การเขียนโปรแกรมไม่ได้สอนให้เราออกแบบฐานข้อมูล คือเราเรียนฐานข้อมูลมาแล้ว เราก็นำความรู้ตัวนั้นนี่มา วิเคราะห์ข้อมูลที่เราจะเก็บบนเว็บนะคะ เราต้องการจะเก็บอะไรบ้าง เราก็วิเคราะห์ออกมา อย่างเช่นข้อมูลข่าวสารต่าง ๆ ข้อมูลข่าวสาร บนความ ความรู้ต่าง ๆ เราก็ออกแบบข้อมูลที่เราจะเก็บอย่างเช่น ชื่อเรื่อง บทความ รายละเอียดต่าง ๆ ที่เราต้องการเก็บ เพราะว่า เผื่อวันข้างหน้าเราจะค้นใช่ไหมคะ เราจะดูข้อมูลย้อนหลัง เราก็ดูได้ ถ้าเราเก็บในเครื่อง มาที่เครื่องนี้เครื่องเดียว แต่ถ้าเราเก็บแบบออนไลน์นะคะ ไม่ว่าอยู่ที่ไหนเราก็สามารถดูข้อมูลตัวนั้นได้นะคะ โดยมีการป้องกันความปลอดภัยของข้อมูล ก็ใส่รหัสเข้าไป เพราะฉะนั้นนี่ ตัว Database Server นี่ เป็นตัวหนึ่งที่สำคัญแล้วก็เกี่ยวข้องกับการเก็บข้อมูลบนเว็บนะคะ อันนี้ก็จะเป็นการทำงานดดยรวมของ WWW. นะคะ ซึ่งเวลาที่เราเข้าใช้งานเว็บไซต์ใช่ไหมคะ เราก็ต้องผ่านโปรแกรม Web Brownser เวลาเราจะเข้าเว็บไซต์ต่าง ๆ ก็ต้องเข้าผ่าน Google Chome ผ่าน Safari ผ่าน Firefox หรือ Internet เราต้องการเข้าดูเว็บไซต์อะไร ใช้ตัวเว็บบราวเซอร์แล้วก็พิมพ์ พิมพ์ชื่อเว็บไซต์ หรือค้นนะคะ บางคนจำชื่อเว็บไซต์ไม่ได้ ก็ใช้ Google Seach ค้นหานะคะ ตัว Google นะคะไม่ใช่ตัวเว็บเบราว์เซอร์นะคะ เป็น Web service นะคะ นิยมมากที่สุด อันดับ 1 เลยใช่ไหมคะ เป็นเว็บค้นหา เป็นเว็บบริการการค้นหาก็จะมีข้อมูลทุกอย่างนะคะ ใครที่ทำเว็บไซต์แล้วใช้หลักการ SEO หรือ ใช้เทคนิค Search Enginเทคนิกของ Google เลยนะคะ อันนี้ก็จะเป็นตัวหนึ่งที่ธุรกิจหรืออะไร ต้องการให้ค้นชื่อใดชื่อหนึ่ง เจอเว็บไซต์เขา เจอข้อมูลเขา เพราะว่าถ้าคนเข้ามาดูเยอะ ๆ นะคะ ถ้าเว็บไซต์ไหนคนเข้าดูเยอะ ๆ มันก็จะมีโฆษณาต่าง ๆ อาจจะมาขอใช้พื้นที่เราในการโฆษณาต่าง ๆ เราก็จะเก็บค่าใช้จ่ายจากเขานะคะ อันนี้ก็คือเป็นรายได้ที่ได้มาจากการสร้างเว็บนะคะ ถ้าเว็บไหนสร้างแล้วไม่มีคนเข้ามาดู มันก็จะไม่มีอะไรเกิดขึ้นใช่ไหมคะ ลองดู ลองสังเกตดูนะคะ มีเว็บไซต์ต่าง ๆ ที่คนนิยม คนเข้าไปใช้เยอะมันก็จะมีโฆษณา โฆษณามาก่อนเลยนะคะ โฆษณะ Pop-Up โฆษณาขึ้นมาเลย อันนั้นเขาก็ขอใช้พื้นที่โฆษณาซื้อ หรือว่าจ่ายเงินให้กับพวกเจ้าของเว็บนะคะ เพราะฉะนั้นนี่ตัวเขียนโปรแกรมบนเว็บนี่บางทีเราอาจจะไม่ต้องเขียน เราอาจจะใช้ตัว World Press จะมีตัวที่ทำ Search Engine คือ การค้นที่ Google นี่ค้นเจอเร็ว งั้นเมื่อเราเข้าเว็บบราวเซอร์แล้วก็พิมพ์ชื่อเว็บไซต์ที่เรารู้จักนะคะ มันก็จะไปที่ Web Server นะคะ ก็คือตัวที่ให้บริการ ตัวที่ให้บริการเว็บ แล้วก็ส่งข้อมูลหรือว่าเอกสารหน้าเว็บมาให้เรานะคะ กระบวนการทำงานของมันจะมีความรวดเร็วนะคะ รวดเร็วมาก แต่ถ้าเว็บไซต์ไหนที่ออกแบบไม่ดี ก็คือหน้าจอเว็บนี่ หน้าจอเว็บจะโชว์ข้อมูลช้านะคะ ก็คือโชว์ข้อมูลช้านะคะ ก็คือโชว์ข้อมูลช้า พอโชว์ข้อมูลช้านี่ เราวัยรุ่นใช่ไหมคะ หน้าจอรอเกิน 30 วินี่ก็ไม่อยากจะดูแล้วใช่ไหมคะ ก็ปิดไปแล้ว ก็ต้องสังเกตเห็นว่าทุกเว็บไซต์นี่ก็พยายามออกแบบข้อมูลเนื้อหาให้มันเร็ว ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับความเร็วของเครื่องเราด้วยนะคะ เพราะฉะนั้นนี่ ตัวที่ทำให้เอกสารหรือข้อมูลทุกอย่างเป็นแบบเดียวกันคือแบบ Potocal HTTP หรือว่าเป็นมาตรฐาน มาตรฐานที่ทำให้ข้อมูลบนเว็บสามารถติดต่อสื่อสารกันได้ สามารถที่จะแสดงข้อมูลเอกสารได้ก็คือ โปรโตคอล HTTP หรือว่าจะเรียกคำเต็มว่า Hypertech protocal เป็นตัวที่แสดงเอกสารบนเว็บนะคะ เป็น Potocal ที่แสดงเอกสารสังเกตว่า URL ของเว็บไซต์นี่นะคะ ก่อนที่จะเป็น WWW. นี่ มันก็จะมี HTTP:// นะคะ แล้วก็ตามด้วย WWW. คือถ้าไม่มี Protocol ตัวนี้ เราจะไม่สามารถอ่านเอกสารที่อยู่ทั่วโลกได้ คำว่าเอกสารที่อยู่ทั่วโลก คือไม่ว่าใครก็ตามนะคะ ที่สร้างเว็บขึ้นมาไม่ว่าจะเป็นภาษอังกฤษ ภาษาต่างประเทศ ก็คือจะใช้ Protocal ตัวนี้สื่อสารกันนะคะ ในการสื่อสารกัน ก็จะทำให้เราอ่านหรือว่าดูเอกสารในหน้าเว็บไซต์ได้นะคะ ทีนี่มาดูประเภทของโปรแกรมบนเว็บ การเขียนโปรแกรมบนเว็บนี่จะมีอยู่ 2 ประเภทหรือ 2 แบบนะคะ ก็คือแบบที่ 1 นะคะ ภาษาอังกฤษเรียกว่า สเตติสโปรแกรมมิ่ง หรือการเขียนโปรแกรมแบบธรรมดาทั่วไปนะคะ ยกตัวอย่างเว็บไซต์ธรรมดาก็คือ อย่างเช่นเว็บประวัติส่วนตัวเว็บเพจที่เป็นประวัติขององค์กรนะคะ เว็บเพจที่แสดงข้อมูลทั่วไปนะคะ พวกนี้จะเป็น Page หรือ เว็บเพจที่ไม่ค่อยมีการอัปเดตไม่ค่อยมีการอัปเดทข้อมูล ข้อมูลจะนิ่งนะคะ ซึ่งการพัฒนาจะใช้ภาษา HTML นะคะ ภาษา HTML ก็คือการเขียนเอาแค่ข้อมูลเข้าไป เอาแค่รูปภาพเข้าไป ซึ่งเวลาที่เราจะดูข้อมูลก็ต้องผ่านเว็บเบราว์เซอร์นะคะ ร้องขอข้อมูลหรือว่า Web Server มันก็จะทำการดุงข้อมูล หรือดึงหน้าเว็บเพจที่ตรงกับความต้องการของเรานี่ส่งมาให้เราผ่านหน้าจอเว็บ Static หรือว่าการเขียนโปรแกรมธรรมดา จะไม่ค่อยยุ่งยากนะคะ ไม่ได้ออกแบบฐานข้อมูลนะคะ ไม่ได้เก็บอะไรนะคะ เพียงแค่เราแปะรูปภาพ แปะข้อความ แปะไว้เฉย ๆ นะคะ แต่ก็ต้องมีการออกแบบให้สวยงาม เพื่อที่จะให้ข้อมูลน่าสนใจ โดยใช้เทคนิคในการออกแบบช่วย ประเภทที่ 2 นะคะ เรียกว่าการเขียนโปรแกรมแบบไดนามิกนะคะ แบบไดนามิกโปรแกรมมิ่ง การเขียนโปรแกรมแบบไดนามิก จะมีฐานข้อมูลนะคะ เข้ามาเกี่ยวข้อง เพราะว่า ผู้ใช้สามารถที่จะเพิ่มข้อมูล ดูข้อมูลหรืออาจจะเพิ่มลบแก้ไข มีการจัดเก็บข้อมูลนะคะ มีการเรียกดูข้อมูลนะคะ ตัวนี้จะสามารถเปลี่ยนแปลงได้ตลอดเวลา โดยเว็บที่เป็นเว็บแบบ Dynamic นะคะ เว็บที่มีการจัดเก็บข้อมูลลงฐานข้อมูลนะคะ หรือเว็บที่เกี่ยวกับการแสดงรายละเอียดสินค้า เว็บขายสินค้า เว็บของ เว็บไซต์ของเราก็เป็บเว็บแบบ Dynamuเพราะว่ามันมีการอัปเดตข่าวสารตลอดเวลา โดยเฉพาะปัจจุบัน การรับสมัครน้องปี 1 ที่จะเข้ามาเรียนปี 63 ใครสมัครเข้ามาตัวเลขก็จะเพิ่มขึ้นทันทีนะคะ หรือข่าวสารข่าวประชาสัมพันธ์ต่าง ๆ นะคะ ข่าวกิจกรรมนะคะ ข่าวอบรมสัมมนาพวกนี้ เราสามารถเรียกดูข่าวย้อนหลังได้ หรือเพิ่มข่าวต่อไปได้อันนี้การเพิ่มก็จะเป็นหน้าที่นะคะ หรือว่านักพัฒนาเว็บ ซึ่งการทำงานก็คล้าย ๆ กัน ก็คือทำผ่านเว็บเบราว์เซอร์ เพียงแต่ว่ามันจะมีที่รวบรวมข้อมูลต่าง ๆ นี่นะคะ ทุกอย่างจะเก็บไว้ที่ฐานข้อมูล ซึ่งตัวผู้ให้บริการนี่ก็จะไปดึงเอาข้อมูลที่อยู่ในฐานข้อมูลของเรา ตัวนี้จะมีโปรแกรมแปลภาษา ทำไมถึงต้องมีโปรแกรมแปลภาษา เพราะว่าในการเขียนโปรแกรมแบบไดนามิกนี่เราจะใช้ภาษา PHP PHP ไม่ใช่ภาษาอังกฤษนะคะ รู้จัก PHP ไหมคะ หรือใช้ Python อย่าง Python ที่เราเคยเรียนใช่ไหมคะ หรือใช้ AHP ใช้ Java Script นะคะ จะมีตัวแปรนะคะ ซึ่งตัวการทำงานของตัวแปลภาษามันก็จะไปดูว่าเราต้องการอะไร หรือต้องการประเมินผลอะไรข้อมูลนี่มันก็จะไปประมวลผลในเรื่องของที่โปรแกรมเมอร์เขาได้ป้อนคำสั่ง ป้อนภาษาลงไปนะคะ แล้วมันจะส่งข้อมูล แล้วแปลภาษาให้เราผ่านเว็บเพจนะคะ เราก็จะสามารถดูข้อมูลต่าง ๆ ได้นะคะ ซึ่งตัวการทำงานกับ Data base กับตัวแปลภาษานี่เราต้องการทำอะไร ทำอะไร เราต้องการจะเพิ่มนะคะ มันก็จะเป็นพวก Insert, Into ใช่ไหมคะ อันนั้นเราไม่ได้เห็นตัวคำสั่ง แต่ว่าเราเห็นหน้าจอแบบฟอร์ม มันก็จะแปลมาให้เราเป็นหน้าจอแบบ Form นะคะ ที่นักพัฒนาโปรแกรม หรือพัฒนาเว็บนี่เขาได้เขียนขึ้นมานะคะ ทีนี้มาดูในส่วนของ Application หรือว่า เว็บแอปพลิเคชัน หรือเว็บแอปพลิเคชัน เกี่ยวกับ Application โดยเฉพาะถ้าในโทรศัพท์ โหลดแอปนะคะ  App ต่าง ๆ ที่... โดยเฉพาะ App ที่เกี่ยวกับทำหน้าสวย ถ่ายรูปหน้าคม หน้าเรียว อันนั้นก็เป็นแอป แต่เป็นแอปที่อยู่ในมือถือนะคะ มาเรียกสั้น ๆ ว่า App แต่เต็ม ๆ คือ application ก็คือตัวที่ประยุกต์ขึ้นมา คือโปรแกรมที่เราสร้างขึ้น ประยุกต์ขึ้นมา สร้างขึ้นมา เพื่อใช้งานอย่างใดอย่างหนึ่ง หรือใช้งานตามที่เราต้องการนะคะ เป็นการทำงานสารสนเทศน์ จะมีทั้ง Mobile Application, Mobile application ก็คือใช้งานบนมือถือ เว็บ Application คือ เว็บใช้งานบนหน้าเว็บ อันนี้คือตัวอย่าง Web application นะคะ โปรแกรมที่เราเขียนขึ้นมา เขียนขึ้นเอง ประยุกต์เองนะคะ ที่มีการวิเคราะห์ข้อมูล ออกแบบข้อมูล ซึ่งตัวตัวเว็บ Application สามารถเข้าใช้งานเว็บบราวเซอร์นะคะ โดยอาศัย HTTP นะคะ แล้วต้องมีเครือข่ายอินเทอร์เน็ตด้วย หรือ Intranet ตัวอย่างเว็บแอปพลิเคชัน เกี่ยวกับเว็บขายสินค้าหรือว่า E-commerce เว็บ เว็บประมูล ประมูลการก่อสร้างอะไรอย่างนี้นะคะ เว็บบอร์ด แต่ก่อนเว็บบอร์ดจะได้รับความนิยมใช่ไหมคะ พวกแชทบอร์ด เดี๋ยวนี้ก็คือ Chat Board เดี๋ยวนี้สังเกตว่าจะมี Pop Up ขึ้นมา เพื่อให้สามารถพูดคุยกันผ่านหน้าเว็บได้ แต่ก่อนต้องไปพิมพ์ที่เว็บบอร์ด แล้วกว่าจะตอบกลับนะคะ เดี๋ยวนี้จะมี Chat Bot จะมีกล่องข้อความเวลาเราเข้าเว็บต่าง ๆ ก็จะมี Pop-Up กล่องข้อความขึ้นมาให้เราสอบถามนะคะ เพราะนั้นนี่ก็จะเป็นตามยุคตามสมัยของการพัฒนาเว็บ ถ้าเว็บไซต์ไหนมันไม่มีการสอบถามเวลาที่คนสงสัยนี่ จะไปถามตรงไหน ต้องเข้าไปที่เว็บบอร์ด ต้องเข้าไปอะไรอีก ยุ่งยากนะคะ เพราะฉะนั้นนี่จะเป็นตัวอย่างเว็บของ Application  ในเรื่องของการออกแบบเว็บไซต์นะคะ คือเราจะต้องเรียนรู้โครงสร้างระบบเว็บก่อนนะคะ การสร้างเว็บไซต์ครั้งแรกเลยนี่ เริ่มต้นเราจะต้องมี Host เว็บ Hosting Web โฮตท์ติ้งหรือว่าไปเช่า Host เช่าพื้นที่ ซึ่ง Host นี่ ก็จะมีทั้ง Host ในส่วนของสถาบันการศึกษา Host ที่เกี่ยวกับการใช้งานในที่ทำงาน ในบ้าน หรือว่าให้บริการฟรีหรือว่าที่เกี่ยวข้องกับการค้า การพานิชย์ หรือธุรกิจนะคะ พวกเว็บ Host ที่ให้บริการเว็บ Hosting ก็จะมี My Web.My JAVA Server นี่เป็บเว็บที่เขาให้บริการนะคะ เขาให้บริการ Host ไม่ว่าจะเป็นการเราจะต้องเสียเงิน ถ้าไป ถ้าต้องการพื้นที่เยอะ ๆ ก็ต้องเสียเงิน จะเป็นรายเดือน รายดี เดือนละ 400 ปีละ 1,000 อันนี้ก็แล้วแต่ อันนี้ก็คือเช่า Host หรือเอาข้อมูลของเราไปเก็บไว้ที่ Host เขา ตัวที่ให้บริการเว็บ Hosting ขององค์กร ก็จะมี Cat telecom ให้บริการพวกให้บริการ Host นะคะ พวก Office Home, School ในโรงเรียน ในมหาวิทยาลัย อย่างเช่นถ้าเรามีเว็บ มีผลงานอยากจะฝากเว็บไว้ที่มหาลัยก็สามารถที่จะติดต่อหรือว่าใครตอนนี่พัฒนาเว็บอยู่ ที่สร้างเว็บแล้วมีไหม ที่สร้างเว็บตัวเองแล้ว ยังใช่ไหมคะ คือในมหาวิทยาลัยเรา จะมีการเก็บพวกผลงานนักศึกษา ก็จะมีเอาไปแปะไว้ ทำไว้แขวนไว้ มีเว็บ Hosting แล้วก็ Web Server ตัวที่ให้บริการ Web Server นี่ จะเป็น Linux ตัวที่ใช้เยอะที่สุดก็เป็น Linux เพราะว่ามันฟรี มี Web Hosting Webserver ซึ่งอันนี้เราก็ได้ตอบไปแล้ว แล้วก็เว็บไซต์ เว็บไซต์ก็คือ คืออะไรคะ เว็บไซต์คืออะไร เราเรียกแต่ว่าเว็บไซต์ ๆ ๆ เรารู้ไหมคะว่าเว็บไซต์คืออะไร เปรียบเสมืออะไร ถามดีกว่า ฟังอาจารย์เดี๋ยวบางคนหลับนะคะ เดี๋ยวจะขอถามนะคะ เว็บไซต์คืออะไร เว็บไซต์คืออะไร ให้ตอบ หมายเลขโชคดีนะคะ ช่วยอธิบายหน่อยว่าเว็บไซต์คืออะไร หมายเลข 016 ไม่มีโปรแกรม 107 017 ใครเอ่ย หลับไปแล้ว อธิบายเว็บไซต์นะคะ เว็บไซต์คืออะไร เว็บไซต์คืออะไร อธิบายยาว ๆ ได้นะคะ 

(ล่าม) ไม่รู้ค่ะ 

(อาจารย์) ลองค้นสิ ค้นเรามีคอมพิวเตอร์ต่ออินเทอร์เน็ตอยู่ใช่ไหมคะ ค้นสิ เว็บไซต์คืออะไร ถ้าเราไม่รู้เราทำอย่างไรถงจะรู้ ค้นสิคะ ค้น ค้นเลย ใช้ Google ค้นได้เลย ไม่ต้อง 017 ใครยกมืออาจารย์ให้ 1 คะแนน 2 คน ยก โอ.เค. ค่ะ โอ.เค. อีก 1 คำตอบ อันนี้คือความหมายของเว็บไซต์ ปรมมือให้กับ 2 คำตอบหน่อยนะคะ คำว่าเว็บไซต์ใช่ไหมคะ ที่เพื่อนบอกรวบรวมข้อมูลทุกอย่าง รวบรวมข้อมูลทุกอย่างอยู่บน Online นะคะ ซึ่งเราสามารถเรียกใช้เว็บไซต์ผ่านเว็บเบราว์เซอร์ใช่ไหมคะ และเว็บไซต์ก็จะมีชื่อนะคะ เว็บไซต์จะมีชื่อ ชื่อของเว็บนี่ชื่อของเว็บนี่ บางทีเขาจะใช้ตัว TCTIP ทีนี่ IP จำยาก อย่าง IP ของ สมมุติ IP ของมหาวิทยาลัยราชภัฏสกลนครนี่ คือ 202.12.18. อะไรอย่างนี้ค่ะ มันจะมี 4 ชุด ตัวเลขจะมี 4 ชุด ตัวเลขแต่ละชุดจะไม่เกิน 255 เขาเรียกว่า IP Address นะคะ IP 1 ตัว 1 เครื่องนะคะ ทีนี้เว็บไซต์เขาจะตั้งชื่อเพื่อที่จะแทน IP เพราะว่าจะใช้ชื่อที่เกี่ยวข้องกับชื่อข้อมูลนะคะ อย่างเช่นเว็บ Snook.com ทุกคนจะจำง่ายใช่ไหมคะ เว็บกระปุกดอทคอม Facebook.com นะคะ ทุกเว็บไชต์ก็จะมีชื่อนะคะ เป็นแหล่งรวมข้อมูลทุกอย่าง ๆ เว็บไซต์เปรียบเสมือนห้องสมุด เว็บไซต์เปรียบเสมือนห้องสมุห้องสมุดนี่มีทุกอย่างใช่ไหมคะ เว็บไซต์ก็เหมือนกันนะคะ ทีนี้ถัดมานะคะ คือ Home Page นะคะ ใครจะเป็นคนตอบคำถาม Homepage ค่ะ ใครจะเป็นคนตอบคำถาม Home Page หรือยกมือดี เมื่อกี้ให้คะแนน 2 คนนะคะ รหัสอะไรคะ 208 กับ 214 214 208 กับ 214 ทีนี้ความหมายของ Homepage ใครจะตอบหรือจะให้อาจารย์สุ่ม 218 ใช่ไหม ใช่ไหมคะ เมื่อกี้กับ 214 หรือเปล่า 208 กับ 214 ใช่ไหม สุรเชษฐ์ เห็นไหมได้ 1 คะแนนละ 1 2 3 หมดเวลา ยกมือ ๆ ๆ ต้องยกมือก่อนตอบนะคะ เป็นคำที่เรียกใช้หน้าแรกของเว็บไซต์นะคะ โอเค ปรบมือให้เพื่อนหน่อย คำว่า Home Home คือบ้านถูกเปล่า เปรียบเสมือนบ้าน หน้าที่เอาไว้รวม หรือว่าเรียกหน้าแรกของเว็บไซต์ Home Page เปรียบเสมือนกับสารบัญ หรือหน้าปกหนังสือในห้องสมุดนะคะ ถ้าเราจะไปหยิบเล่มหนังสือคือเว็บไซต์ใช่ไหมคะ แล้วมาที่หน้าแรกก็คือหน้าปกนี่ ก็คือ Homepage นะคะ เป็นตัวที่มีข้อมูลหลัก ๆ มีหัวข้อมีสารบัญ มี Link เชื่อมไปยังตัวหน้าต่าง ๆ นะคะ ไปยังหน้าต่าง ๆ เมื่อกี้รหัสอะไรตอบคะ 221 นะคะ แจกคะแนนไปเลยนะคะ และสุดท้ายคือ Web Page นะคะ Web Page ไม่แจกคะแนนนะคะ พวกเราน่าจะรู้อยู่แล้ว webpage คือ หน้าเว็บแต่ละหน้านะคะ อย่างเช่นหน้าประวัติ หน้าโครงสร้าง หน้ารายละเอียดสินค้านะคะ เวลาที่เราสร้างลิงก์หน้า Homepage มาจากหน้าอื่น ๆ แผนที่นะคะ ขึ้นอยู่กับว่าในเว็บไซต์นั้น เราจะออกแบบข้อมูลมีหน้าอะไรบ้างนะคะ มี page อะไรบ้าง ซึ่งแต่ละหน้าจะมีชื่อ หรือพัฒนาจากหลาย ๆ ภาษาหรืออาจจะเป็น HTML ASP Python นะคะ Javascript นะคะ ก็แล้วแต่ว่าหน้านั้นจะแสดงข้อมูลในรูปแบบไหนนะคะ อันนั้นก็คือการสร้างเว็บ เราจะต้องเรียนรู้นะคะ คำศัพท์เหล่านี้นะคะ แล้วก็ต้องเตรียม สิ่งที่ต้องเตรียมก่อนเลยคือ Server นะคะ Server หรือ Host นะคะ ทีนี้ภาษาที่ใช้ในการเขียนโปรแกรมบนเว็บนะคะ ภาษาที่ใช้เขียนโปรแกรมบนเว็บ มีหลากหลายภาษามากนะคะ อย่างเช่น JAVA นะคะ JAVA สามารถทำงานได้ทุกระบบปฏิบัติการ คำว่าระบบปฏิบัติการได้ทั้ง Mac ได้ทั้งโทรศัพท์มือถือ ก็คือโทรศัทน์มือถือก็จะมี Iที่เป็น IOS Android Java สามารถเข้าได้ทุกระบบปฏิบัติการนะคะ แล้วก็นิยมใช้กันอย่งแพร่หลายในการเขียนเว็บนะคะ ภาษา HTML 5 นะคะ อันนี้ก็เป็นอีกภาษาหนึ่งที่นิยมใช้นะคะ ซึ่งภาษา JAVA HTML 5 จะเป็นภาษาที่ทำงานฝั่งผู้ขอใช้บริการ ทำงานฝั่งผู้ขอใช้บริการ มันไม่ได้มีการดึงข้อมูล ไม่ได้ คือการประมวลผลนี่ คือประมวลผลฝั่งผู้ขอให้บริการ ส่วนตัวภาษาที่ทำงานหรือว่าตัวที่ทำงานหรือประมวลผล บริการก็คือพวก PHP นะคะ พวก ASP พวก Python นะคะ พวกนี้จะทำงานฝั่งผู้ให้บริการ หรือ Run ที่ Server Run บน Server Run บน Server ต้องมี Server ก่อน ต้องจำลองเครื่องเป็น Server ถึงจะรันได้ หรือ HTML หรือ มี Server ก็สามารถที่จะ Run หรือทำงานได้นะคะ อย่าง HTML5 นี่ เราสามารถทดลองเขียนจาก Notepad ก็ได้นะคะ ลองดูไหมนะคะ ลองดูไหม ใช้ HTML เดี๋ยวให้พวกเราเปิดเปิดโปรแกรม เราจะเขียนโปรแกรมโดยใช้ภาษา HTML โดยที่ไม่ต้องอาศัย Sever นะคะ สมมติพิมพ์เข้าไปที่ NotePad นะคะ เปิด Notepad ขึ้นมา แล้วพิมพ์อะไรนะคะ แล้วเราแค่ Save ไฟล์เป็น HTML File Save As เลือก Save As เป็น .html ตั้งชื่อ File แล้วก็ Save As Type เลือกเป็น Allfile นะคะ HTML สมมติอาจารย์เก็บไว้ที่ My Document เก็บไว้ที่ My Document กด Save แล้วก็ไปเปิด My Document นะคะ สังเกตว่าหน้าชื่อ ชื่อ File ของเรานี่มันจะเป็น Icon นะคะ จะมีตัว internet explorer ใช่ไหมคะ แล้วก็ประเภทไฟล์เป็น HTML ไฟล์ เราสามารถดับเบิลคลิก โอ.เค. ออกมาเป็นภาษาไม่รู้เรื่องนะคะ UTF-8 ใช้ไม่ได้ Save As Type อันนี้ไม่ใช่ HTML 5 เพราะฉะนั้นเวลาที่จะเขียนโปรแกรมให้ออกมาตามที่เราเขียนนะคะ เราจะต้องมีการไปกำหนด Font นะคะ ไปกำหนดรูปแบบอักษร ซึ่งอันนั้นก็จะเป็นโค้ด อาจจะเป็น Team Viewer หรืหรือจะเป็น Notepad นะคะ กำหนดการแสดงผลนะคะ ให้มัน Support นะคะ แต่ถ้าพิมพ์เป็นภาษาอังกฤษ แต่ถ้าพิมพ์เป็นภาษาอังกฤษมันก็จะสามารถโชว์นะคะ ตัวนี้เราไม่ได้ Run บน Server เรารันที่เครื่องของเรา รันที่เครื่องผู้ขอใช้บริการนะคะ อันนี้ต้อง Save ทับนะคะ แต่ถ้าเป็นภาษาอังกฤษนะคะ มันก็จะรองรับSupport ภาษาอังกฤษ ไม่ Support ภาษาไทย อันนี้ก็จะเป็นตัวอย่างของการใช้ HTML พื้นฐานนะคะ ที่สามารถ Run บนเครื่องของเราโดยที่ไม่ต้องติดตั้ง Server ก็ได้ มันก็จะเปิดตาม URL นะคะ ไฟล์เป็น .html แค่นี้นะคะ แต่ถ้าเป็นพวกภาษา PHP ASP พวกนี้มันจะต้องมีตัวที่เป็น ทำหน้าที่เป็น Server ซึ่งตัวที่เป็น Web Server นะคะ ตัวที่ทำหน้าที่เป็น Web Server มีใครรู้จักไหมคะตัวโปรแกรมที่ทำเป็นWeb Server Program มีใครรู้จักไหมคะ ยกตัวอย่างตัวที่ทำเป็น Web Server ที่ทำหน้าที่เป็น Program Web Server ใครตอบได้อาจารย์ให้ 1 คะแนน Web Server ให้เวลา 5 วิ ในการยกมือตอบ 5 4 3 2 1 ยกมือหรือคะ หมายเลขอะไรคะ มีใครตอบได้ไหมคะ Web Server ที่ผ่านมาเราไม่ได้เขียนโปรแกรมบนเว็บใช่ไหมคะ รู้จะได้ Appserv ไหมคะ App เซิร์ฟคุ้น ๆ ไหม ไม่คุ้นเลย App Serve ตัวที่เป็น Web Server เอาไว้รันโปรแกรมที่ หรือรันภาษาที่ทำงานฝั่ง Server นี่ก็จะมีพวกแอปเซิร์ฟ แซม นะคะ XAMPP ตัวย่อนะคะ XAMPP ก็จะมี for Windows for Mac ก็จะใช้ตัว Xam เยอะก็จะมีการติดตั้ง Xamนะคะ ไม่รู้ว่าเครื่องเราได้ติดตั้งไว้หรือยัง เดี๋ยวเรามาเช็กดูนะคะ ว่าเราติดตั้งไว้หรือเปล่าได้ติดตั้งตัว Web Server ไว้หรือยัง มาของการพัฒนาเว็บนะคะ ยุคของการพัฒนาเว็บ ยุคแรก ๆ เลยเราอาจจะเกิดไม่ทัน หรือว่าพวกทำเว็บส่วนตัวนะคะ หรือว่าเป็น Blog ที่สร้างขึ้นมาเอง โดยที่ไม่มีการออกแบบฐานข้อมูลอะไร เราก็แค่เอาข้อมูลของเราไปใส่ไว้นะคะ อันนี้ออกแบบง่ายนะคะ ออกแบบง่าย เวลาจะแก้ไขเปลี่ยนแปลงต้องใช้เวลานานนะคะ เพราะจะต้องมาแก้ไขที่เครื่อง แล้วก็มีการอัพเดทขึ้นไปนะคะซึ่งจะใช้เวลาค่อนข้างนาน ยุคที่ 2 จะเป็น Web Dynamic ยังอยู่ใน Web 2.0 อยู่ ยังเป็นเว็บที่มีการสร้างฐานข้อมูล เก็บข้อมูล ซึ่งปัจจุบันนี้ก็มียังสร้างเว็บไซต์ลักษณะนี้ แต่ละองค์กร ภาคธุรกิจต่าง ๆ นี่ก็ต้องใช้เว็บไซต์ อาศัยเฟซบุ๊กอย่างเดียวไม่ได้ ต้องมีเว็บไซต์ของตัวเอง อาศัยต้องมีเว็บไซต์ประจำองค์กรนะคะ และยุดที่ 3 เป็น Web Service เว็บที่ให้บริการต่าง ๆ นะคะ ซึ่ง Web Service นะคะ หรือว่าให้บริการตรวจสอบความเป็นตัวตนผ่านเว็บไซต์ เว็บเกี่ยวกับการส่งข้อความนะคะ เว็บที่ให้บริการในเรื่องของภาพ ให้บริการเรื่องภาพหรือว่าขายภาพ พวกถ่ายรูปแล้วเอาลงขายนะคะ หรือเว็บ Service อีกตัวหนึ่งคือ Go to no พวกเราน่าจะคุ้นเคยกันดี .org ก็จะมีการ Post บทความหรือองค์ความรู้ต่าง ๆ ใครต้องพบองค์ความรู้ที่เอามาแชร์บทความนะคะ ซึ่งในการพัฒนาเว็บไซต์นะคะ แต่ละยุคแต่ละสมัย ภาษาหรือว่าตัวโปรแกรมที่ใช้ในการพัฒนาเว็บ ก็จะมีฐานข้อมูล มีไฟล์รวมเป็นเนื้อหาเลยว่า เนื้อหาต่าง ๆ ในการออกแบบนี่ก็บางเว็บไซต์ก็จะใช้ตัว CMS หรือว่าตัวที่พัฒนาเว็บสำเร็จรูป หรือจะสร้างเว็บแบบ ถ้าเว็บแบบธรรมดาก็จะใช้ html นะคะ ถ้าเป็นเว็บไดนามิกก็จะใช้ภาษา PHP ASP Python นะคะ Java Script ต่าง ๆ นะคะ หรือจะใช้ Wordpress ดู... ตัวที่นิยมมากที่สุดในปัจจุบันนะคะ เว็บไซต์ทั่วโลกประมาณเกือบ 60 เปอร์เซ็นต์ ไม่ต้องมีเรื่อง Coding ก็สามารถสร้างเว็บไซต์ได้ ซึ่งเราจะประยุกต์ใช้ตัว Wordpress มาสร้างเว็บนะคะ ก็คือ Wordpress แบบอันนั้นจริง ๆ รู้ลึกจริง ๆ เราสามารถที่จะไปรับจ้างทำเว็บได้ หลาย ๆ องค์กรที่ใช้ wordpress ในการสร้าง หรือว่ารับจ้างในการออกแบบสร้างเว็บไซต์นะคะ ถ้าเราเก่งทาง Wordpress เราสามารถไปรับจ้างได้ หรือเป็น ฟรีแลนซ์ ตอนนี้ครูตามโรงเรียนต้องการคนเก่ง World Press เพราะว่าเขาอยากจะเอาผลงานของเขาขึ้นเว็บนะคะ จะทำอย่างไรนะคะ อย่างได้ผลงานตัวเองขึ้นเว็บ ถ้าเราเป็น WordPress เราสามารถรับงานนั้นมา มาทำได้ ก็ได้เงินนะคะ โดยที่ไม่ต้องมานั่งเขียนโปรแกรมให้ยุ่งยาก โดยออกแบบเนื้อหาดี ๆ แล้วก็เอาใส่นะคะ เรียนรู้ไม่ยากเลย เพราะว่าตัว Wordpress เอามาจาก HTLM พัฒนามาจาก PHP ใช้ PHP ในการออกแบบ มีทั้งระบบของ Admin หรือ ระบบของ User หรือว่าที่เขาเรียกว่าระบบหลังบ้าน หน้าบ้าน หลังบ้านจะเป็นหน้าบ้านจะเป็นส่วนของผู้ใช้ทั่วไปนะคะ เราสามารถจัดการได้ง่ายเลย ทีนี้ลักษณะภาษา Script ภาษา Script ใช้ในการพัฒนาโปรแกรม อย่างที่อาจารย์บอกไปว่า ตัวที่ทำงานฝั่งเครื่องผู้ใช้ หรือ ไครแอนสคริป คือภาษาที่ทำงานอยู่บนเครื่องผู้ใช้นะคะ ยกตัวอย่างไป คือ HTML เราสามารถเขียน HTML โดยที่ไม่ต้องมี Sever ก็ได้นะคะ อันนี้สามารถทำได้บนเครื่องผู้ใช้ HTML JavaScript VB Script นะคะ ส่วนภาษา Script ทำงานหรือประมวลผลที่ฝั่งเครื่องผู้ให้บริการก็คือ อย่างเช่น CGI ASP นะคะ ASP.net พวกตระกูล .net PHP Python พวกนี้จะทำงานฝั่ง Server ซึ่งถ้าเราจะเขียนแบบนี้ เราจะต้องติดตั้ง Web Server นะคะ ก็คือติดตั้ง App Server นะคะ เอาไว้ในเครื่องของเรา ก็คือทำให้เครื่องของเราเป็นเครื่องผู้ให้บริการ และเครื่องผู้ใช้บริการนะคะ ทีนี้ Website Dynamic ซึ่งโปรแกรมที่นิยมใช้โปรแกรมฐานข้อมูลที่นิยมใช้บนเว็บก็จะมี MySQL Access ก็ใช้ได้ ก็จะขึ้นอยู่กับภาษา ถ้าเราใช้ PHP ก็ใช้ SQL ถ้าใครใช้ ASP ก็จะใช้ Access หรือว่า HP.net SQL Server นะคะ ถ้าเป็น Data base Server ก็จะเป็นของ Linux นะคะ เครื่องมือที่ใช้ในการตกแต่งสำหรับเว็บ ตกแต่างGraphic สำหรับเว็บด้วยนะคะ ก็ต้องเก่ง Photoshop คือไม่ต้องเก่งหรอก แค่ออกแบบได้ ถ้าเราฝึกเรื่อย ๆ ก็อาจจะทำให้เราเก่งนะคะ พวก Photoshop Image Raedy illustrator เอามาใช้ในการออกแบบ พวก Flash ในการทำตัวภาพเคลื่อนไหวนะคะ พวกนี้ก็ทำ Anmiation นะคะ พวก Arcomedia Flash ทีนี้มาดูโปรแกรม editor ที่ใช้ในการพัฒนาเว็บ editor ก็คืเครื่องมือนะคะ ที่เอามาเขียน เอามาเขียนเว็บนะคะ Editor ที่ใช้บ่อย ในนี้อาจารย์อาจจะไม่ได้เอามาใส่ พวกโปรแกรม Dreamviwer ถ้าอันนี้เป็น Coding จริง ๆ นะคะ แบบว่าเขียนตั้งแต่บรรทัดแรกเลย คือ Ediนะคะ ASP Edit เว็บ มิตริก วิชวลสตูดิโอดอทเน็ต แล้วส่วนของ Python จะมีให้ติดตั้งเครื่องมือเยอะแยะเลยใช่ไหมคะ Python เราใช้ตัวอะไรติดตั้งคะ Python นี่เรียนเทอมไหน ปี 1 เทอม 2 ใช่หรือเปล่า ลืมหรือยัง แล้วเทอมที่แล้ว ปี 2 เทอม 1 ภาษา เขียนโปรแกรมภาษาคอมพิวเตอร์ ก็ใช้ Python เหมือนกันใช่ไหมคะ Python หมดเลย แล้วมีลงอะไรบ้าง ลงโปรแกรมอะไรบ้างของ Python จำได้เปล่า อนาคอนด้าได้ลงไหม มันก็มีหลายตัวนะ ใช้หลายตัว อันนั้นก็เป็น Editor ของการพัฒนา Python มีพวก Netbene ก็ใช้เขียนพวก JSP Edit Pass แต่ปัจจุบันนี้ก็จะมีตัวใหม่ ๆ นะคะ ที่เขียน Code ที่เขานิยมใช้ เดี๋ยวเราค่อยไปดูอีกทีหนึ่งนะคะ ว่าเราก็ไม่ได้เน้น Coding แต่เราใช้ WordPress ก็ควรรู้ไว้ว่าถ้าเราจะเขียน PHP เขียน Java Html มีอะไรบ้างนะคะ ที่มันเขียนง่าย ที่เราพิพม์ไปแล้วมีคำสั่งให้ ก็เขียนได้รวดเร็วนะคะ อันนี้เป็นเทคโนโลยีในการพัฒนา web Application นะคะ จะมี Common gateway interface ตัวที่ใช้งานกับ User อันนี้เขียนภาษา C C++ เทคโนโลยี ASP PHP อันนี้ก็คือตัวที่ใช้พัฒนา Web application ก็คือตัวที่ทำงานฝั่ง Server นะคะ แนวทางในการพัฒนาเว็บไซต์นะคะ ใครที่จะเขียนเว็บไซต์ขึ้นมาเองนี่ จะต้องมีเครื่องมือที่เป็นประเภทEdi Plus แล้วก็ทราบเครื่องที่ช่วยพัฒนา พวก Web Builder อย่างเช่น พวกเราเคยใช้ Dreamviver ไหมคะ เคยใช้มาไหม ตอนอยู่มัธยม ไม่เคย ไม่เคย Macro Media Dreamwaver ก็จะมีการพัฒนาแต่ละ Version มาเรื่อย ๆ บางเวอร์ชันก็ง่าย จับลากวางเลย ก็เขียนนิดหน่อย อย่างเช่นคำสั่งในการเชื่อมต่อกับฐานข้อมูลนะคะ แต่เชื่อมต่อกับฐานข้อมูลบางทีก็ไม่ได้เขียน ลากเอาเลย ไม่ได้เขียนเยอะนะคะ Microsoft ใครที่ถนัดทางด้านภาษา C C++ C๓หรือจะใช้ระบบ CSS ก็คือ Content magage ก็คือตัวที่จัดการเนื้อหา จัดการเนื้อหาอย่างเช่น WorldPress Joomla นะคะ แต่ตัวที่ใช้มากที่สุดก็คือ wordpress นะคะ เพราะว่ามี Design ที่สวยงาม ใช้งานง่ายนะคะ เราสามารถที่จะจัดการเมนจัดการ Site Bar ก็คือในหน้าเว็บนี่เราสามารถจัดการได้โดยที่เราไม่ต้องเขียนโปรแกรมนะคะ ทีนี้มาตรฐานในการพัฒนาเว็บนะคะ ซึ่งเราจะต้องรู้ว่าในการพัฒนาเว็บนี่ จะต้องมีมาตรฐานอะไรที่รองรับเว็บไซต์เรา ซึ่งเทคโนโลยีนี้จะถูกกำหนดขึ้นเพื่อให้ใช้งานเว็บเบราว์เซอร์ได้ ทุก ๆ ค่ายนะคะ ทุก ๆ บริษัท ทุก ๆ หน่วยงาน จะต้องสามารถรองรับเทคโนโลยี ก็คือจะให้เป็นมาตรฐานหลัก เป็นมาตรฐานเดียวกัน สามารถเปิดใช้งานมาตรฐานได้อย่างมีประสิทธิภาพนะคะ โดยจะมีเทคโนโลยีที่เป็น HTMLW3 นะคะ W3 C นก็คือตัว web standart จะมี 2 มาตรฐาน ตัวแรกก็คือ W3C W3C ก็คือ WWW. นะคะ อันนี้เป็นมาตรฐานที่องค์กรระหว่างประเทศได้ทำงานระหว่างการพัฒนาเทคโนโลยีเว็บ จะมีอยู่ 3 สถาบันก็คือ MIT ในสหรัฐอเมริกา inlia ในยุโรป และ คิโอะยูนิเวอร์ซิตี้ ในญี่ปุ่น ซึ่งตัวนี้เป็นมาตรที่รองรับกันทั่วโลก ซึ่งมาตรฐานของ W3C ก็จะมี HTML 5 มีCSS 3 นะคะ แล้วก็มี ดอมนะคะ ซึ่ง HTML5 ก็คือภาษาที่ที่แสดงเอกสารหน้าเว็บ ตัวนี้ก็จะมีเทคโนโลยีใหม่ ๆ ที่มีการรองรับการสร้างเอกสารที่ออกแบบได้ แสดงผลได้ทุก ๆ เครื่อง ทุก ๆ ระบบปฏิบัติการนะคะ หรือทุก ๆ มุมมอง แสดงผลในมือถือ เราทำเว็บไซต์ขึ้นมาแล้ว เวลาที่ดูผลลัพธ์ของหน้าเว็บผ่านมือถือ มันก็จะถูกย่อนะคะ อันนี้คือใช้มาตรฐาน W3C ใช้ HTML5 ในการพัฒนา แล้วก็ตัว CSS 3 ก็คือ ตัวที่จัดรูปแบบให้หน้าเว็บของเราดูสวยงาม การใส่สี ใส่สีพื้น การจัดขอบข้อความอะไรต่าง ๆ นะคะ ก็คือการจัดเอกสารเราให้มีความสวยงามนะคะ เป็นสัดส่วน แล้วก็ DOM หรือว่า Document อันนี้เป็นภาษาที่บริการจัดการการแสดงผลนะคะ การบริหารจัดการแสดงผล ก็คือแสดงผลบนหน้าจอนะคะ ว่ามันแสดงผลบน Windows หรือแสดงผลบน Mac หรือ OS ต่าง ๆ เพราะฉะนั้นทุกเว็บไซต์ก็จะใช้มาตรฐาน W3C ถ้าหากเว็บไซต์ที่ไม่ได้ใช้มาตรฐานนี้ เวลาแสดงผลต่างกัน ต่างหน้าจอ ต่างเครื่อง ต่างอุปกรณ์ มันก็จะมีประสิทธิภาพในการแสดงผล มาตรฐานที่ 2 นะคะ ก็คือ ECMA หรืออ่านว่า แอกม่า เป็นมาตรฐานทางด้านยูโรป Manu Factoreal อันนี้เป็นการกำหนดมาตรฐนาสารสนเทศการสื่อสารหรือว่าทางด้าน ICT ก็จะมีในเรื่องของการแสดงผลของ Java Script นะคะ Javascript กับ DOM พวกเครื่องใช้ไฟฟ้านะคะ อันนี้คือทางด้านมาตรฐานทานด้าน ICT การใช้ Java Script แล้วก็มาตรฐานของเครื่องใช้ไฟฟ้านะคะ ประโยชน์ของมาตรฐานของเว็บ ประโยชน์ของการเข้าถึงตัวข้อมูล ซึ่งผู้ใช้สามารถเข้าถึงข้อมูลนี้ได้รวดเร็ว มีประสิทธิภาพ ตรงตามความต้องการ แล้วก็ด้านความเสถียรภาพ ความยืดหยุ่นในการแสดงผล ไม่ว่าเราจะดูเว็บไซต์ผ่านอุปกรณ์ตัวไหน มันก็จะมีการจัดหน้านะคะ เรียกว่าอะไร ดูผ่านหน้าจอคอมพ์ มันก็จะเต็มรูปแบบ หรือว่าดูผ่านหน้าจอมือถือ ผ่าน Tablet มันจะแสดงผลเหมาะสมนะคะ มาตรฐานการพัฒนาเว็บไซต์สำหรับเว็บต่าง ๆ นี่ เราสามารถเข้าไปดูที่มาตรเว็บไซต์ของภาครัฐได้ ซึ่งมันจะมีประกาศของรัฐนะคะ อันนี้ก็เป็นเว็บไซต์ของภาครัฐ สำนักงานพัฒนารัฐบาลดิจิทัล อันนี้ก็เป็นมาตรฐานเว็บไซต์ภาครัฐ ซึ่ง จำง่าย ๆ ก็คือ ที่เดียวนะคะ ทันใดทั่วไทย และธรรมาภิบาล เว็บไซต์ที่สร้างมาจะต้องมีเอกลักษณ์โดดเด่นนะคะ ทันทีทันใด ไม่ว่าอยู่ที่ไหนก็สามารถเข้าถึงได้นะคะ เราสามารถที่จะเข้าไปอ่านแล้วก็ศึกษาข้อมูลมาตรฐานเว็บไซต์ของภาครัฐได้นะคะ ซึ่งจะมีการ Update นะคะ ในฐานะที่เราจะสร้างเว็บไซต์ จะต้องรู้จักมาตรฐานรัฐบาลดิจิทัลนะคะ อาจจะมีกฎระเบียบนะคะ มี พรบ. มาตรฐานการให้บริการ ซึ่งเราสามารถที่จะเข้ามาเรียนรู้ที่ชื่อเว็บไซต์ DGA.or.th หรือจะพิมพ์คำว่า มาตรฐานเว็บไซต์ภาครัฐ เวลาที่เราทำออกแบบเว็บไซต์ของรัฐนะคะ เวลาที่เราออกแบบเว็บไซต์ของรัฐนี่ เราก็ต้องเรียนรู้ข้อมูลตัวนี้ด้วย ก็จะมีบทความ มีความรู้ต่าง ๆ เรื่องของ Block Chain เรื่องของปัญญาประดิษฐ์หรือ AI ก็จะมีความรู้เพิ่มเติมนะคะ ในเรื่องตัวนั้นเหล่านั้นนะ โอ.เค. ถึงสไลด์สุดท้ายแล้วนะคะ พวกเราได้เรียนรู้ทฤษฎีตัวนี้ ไม่ทราบว่าซึมซับบ้างไหมคะ มีคำถามไหม ไม่มี แต่อาจารย์จะมีคำถามนะคะ มีคำถามและมีแบบฝึกหัดท้ายบทเรียนให้เรา ก่อนที่อาจารย์จะเอาแบบฝึกหัด แบบฝึกหัดจะให้ทำบน Classroom นะคะ แต่ก่อนที่จะไปดูแบบฝึกหัดนี่ จะให้เช็ก เดี๋ยวให้พวกเราตรวจเช็กดูว่าเครื่องของเรามีการติดตั้ง Web Server หรือยัง ซึ่งเราจะใช้ Web Server ที่ชื่อว่า Xam นะคะ โดยแต่ละคนนี่ เข้าไปค้นทีเสิร์จดูนะคะ เครื่องได้จำลองเป็น Wำิ ฆำพว่าเครื่องเราได้จำลองเป็นเว็บเซิร์ฟเวอร์แล้ว ที่ไม่มีตัวนี้บ้าง ไม่มี เครื่องสุรเชษฐ์ไม่มี 1 เครื่อง เครื่องไหนอีกคะ ดูนะคะ Xampp ก็คือเราจะใช้ WordPress นะคะ ถ้าไม่มีตัวนี้ เราจะใช้งาน Wordpress ไม่ได้ แต่ว่าเครื่องอาจารย์จะต้องได้ลงใหม่ซะแล้ว สุรเชษฐ์จะนั่งเครื่องนั้นประจำใช่ไหมคะ ถ้ามีแบบนี้ใช้ได้นะคะ ถ้าขึ้นตัวแดง ๆ เดี๋ยวเรากด Start ดูนะคะ Apache กับ MySQL สตาร์ท 2 ตัวMy SQL My SQL ถ้าใครขึ้นสีแดง ขึ้นสีแดงจะต้องได้ติดตั้งใหม่ กลัวว่าจะมีปัญหาตอนที่ดึงข้อมูลจากฐานข้อมูลนะคะ อันนี้ My SQL มันแดงทั้งหมดเลยหรอ อย่างนี้จะต้องลงใหม่มันมี Error Stop ไป ที่จริงสถานะมันจะต้องไม่แดงนะคะ ทั้งสองอันเลย ใช่ค่ะ เราจะใช้แค่ตัว อาปาเช่ นะคะ กับ MySQL เพราะว่าสัปดาห์หน้าเราน่าจะได้ลงมือใช้ WorldPress อันนี้ Xampp Version 3.2 ถ้าอย่างนั้น เดี๋ยวเราไปดาวน์โหลดเวอร์ชั่นใหม่มาลงนะคะ แต่ว่าเราจะต้องไป Uninstall ตัวเดิมออกก่อนนะคะ Uninstall ออกเลย เราพิมพ์เข้าตัว search Windows นี่ จะได้ไม่ต้องค้นหาเยอะ ถ้าเห็นปุ่ม Uninstall เราก็กดเลยค่ะ Uninstall ออกไปก่อน แล้วค่อยมาลง Uninstall ลบโปรแกรมออกจากเครื่อง เข้าไปเลื่อนหาโปรแกรม แล้วกด Uninstall มันจะถามเราอีกรอบว่า คุณต้องการลบโปรแกรม Xamapp ออก นะคะ ต้องการไหม กด Yes มาขั้นตอนนี้หรือยัง มาขั้นตอนนี้หรือยัง ใครไม่ทันยกมือนะคะ Remove ออกด้วยนะคะ Folder ถามว่าวิชาอื่นมันมีงานตรงนี้หรือเปล่า ยังไม่มีนะ โอ.เค. ตกใจนึกว่าวิชาอื่นได้ใช้ กด Yes เลยนะ งั้นวิชานี้เราจอง ลบใหม่ ไม่ลบเดี๋ยวข้อมูลเดิมจะมีเยอะเลย ไม่รู้ว่าข้อมูลเดิมที่อาจารย์สอนปีที่แล้วอยู่ไหม ลบทิ้งไปเลยนะคะ เดี๋ยวรอสักครู่ เดี๋ยวรอลบ โมดูลต่าง ๆ ต่าง ๆ ออกจากเครื่องให้หมดก่อน เราจะได้เอา Version ใหม่มาลง เราจะได้เรียนรู้ในการติดตั้งเองด้วย เผื่อจะเอาไปติดตั้งที่เครื่องโน้ตบุเห็นไหม ข้อมูลเยอะ ก็เลยใช้เวลานานในการลบนะคะ ระหว่างรอโปรแกรมลบไป ไปเบรกได้นะคะ ไปเข้าห้องน้ำ ไปพักเบรกได้นะคะ ก็ได้สัก 5 นาที เครื่องไหน Uniไป Download Xam for windown มานะคะ โอ.เค. นะคะ กดดาวน์โหลดได้เลย แล้วก็ดูที่แถบด้านล่างนะคะ Status Bar รอประมาณ 1 นาที กดดาวน์โหลดเลยค่ะ ตรงนี้นะคะ กด Download เลยนะคะ Download Xam หน้านี้ใช่ไหมคะ มันจะโหลดให้เราแล้ว เราดูที่ Status Bar ด้านล่างนะคะ โหลดประมาณ 1 นาที ตัวนี้ใช่ไหมคะ กดหรือยัง ค่ะ ค่ะเลือกตัวแรก For Windows ตัวนี้สถานะ Download Accใครที่ยังดาวน์โหลดไม่เสร็จรอโหลดเสร็จแล้ว Double Click ไปที่ไฟล์ EXE มันถามอะไรเรากด O.K ไปเลยนะ แล้วก็ตรงนี้กด Next ไปนะคะ แล้วตรงนี้ก็เลือกหมดเลย กด Next เผื่ออนาคตเราจะเขียนตัวอื่น กด Next ถ้ามันขึ้นแบบนี้ ใน Drive C มันมีดฟล์เดอร์ซ้ำนะคะ เราไปที่ Disk C แล้วก็ไปลบโฟลเดอร์เดิมออกนะคะ ใช่ค่ะ ลบเลยค่ะ กด Delete ไปเลย แล้วก็ Next นะคะ อันนี้เอาเครื่องหมายถูกออก จะได้ไม่ต้องวิ่งเข้าลิงก์นี้นะคะ เราไม่เข้าไปดูกด Next ไป Next ไปแล้วก็รอนะคะ เครื่องไหนที่ติดตั้งสมบูรณ์แล้วนะคะ กด Finish หรือ เสร็จสิ้นได้เลย เดี๋ยวเราค่อยวิธีแก้ตัวนี้นะคะ ที่มันเดี๋ยวเราไปกด Start ตัวอาปาเช่ กับ ตอนนี้ My SPL อาจารย์ยังไม่ได้ แต่ว่า Server ใช้ได้ แต่ทีนี่ ทดลองการใช้งาน Server นะคะ กด Start เสร็จแล้วไปพิมพ์ Local Host ที่ web brownser นะคะ พิมพ์ Local Host ที่ Web Browser ถ้าหากว่าโชว์หน้าจอแบบนี้ แสดงว่า Web Server ของเรานี่ทำงานได้แล้ว นี่ค่ะ พิมพ์ลงไปที่... พิมพ์เข้าไปที่บาร์ตรงนี้นะคะ ไม่ได้ไปพิมพ์ใน Google ค้นหานะคะ เราพิมพ์ Localhost นะคะ Localhost พิมพ์แบบนี้ ไม่ได้ไปให้ค้นหานะ ให้ไปพิมพ์ที่ช่องนี้เลย URL นี่ พิมพ์ Localhost แล้วกด Enter นะคะ ได้ไหมคะ ถ้าพิพม์แล้วกด Enter จะโชว์หน้า web Page แบบนี้นะคะ อันนี้แสดงว่า Server  ของเราพร้อมใช้งานแล้ว นะคะ เราติดตั้งเครื่องไหนจะได้นั่งประจำเครื่องนั้น เครื่องไหนที่เพื่อนไม่มาก็ลงไว้ด้วยนะคะ หน้าจอนี้เป็นการทดลอง Server ถ้าขึ้นแบบนี้แสดงว่า ถ้าหากว่าขึ้นแบบนี้แสดงว่า Server ของเราพร้อมใช้งานแล้วนะคะ พุธหน้าเราจะติดตั้ง Wordpress นะคะ ติดตั้ง Wordpress ที่นี้ จะมีแบบฝึกหัดสำหรับวันนี้นะคะ มีใครที่ยังไม่เข้า Classroom บ้าง มีไหมคะ อันนี้รหัสเข้าชั้นเรียนนะคะ ถ้าใครยังไม่เข้าก็ใช้รหัสนี้ได้เลย กำหนดส่งนะคะ ภายในวันศุกร์ โอ.เค. ไหม ส่งภายในวันศุกร์นะคะ ส่งไม่ทันโดนตัดคะแนน คือส่งช้าได้ แต่มันจะขึ้นส่งล่าช้า โอ.เค. พวกเราสามารถเปิดไฟล์ดูโจทย์คำถาแล้วก็สร้างไฟล์ตัวเองขึ้นมาใหม่นะคะ แล้วบันทึกเป็น PDF แล้วบันทึกเป็นรหัสนักศึกษาแล้วกดส่งนะคะ โหลดมาแล้วอย่าลืมกดส่งด้วยนะคะ เพราะฉะนั้นมันจะไม่ขึ้นสถานะว่าส่งงาน มีทั้งหมด 10 ข้อนะคะ เห็นโจทย์อยู่ใช่ไหม ตามนั้นนะคะ มีคำถามไหม สำหรับคาบนี้ ส่วนตัว Xampp นะคะ เราทดสอบ โอ.เค. แล้ว ก็กด Stop Server กด Stop Server หรือหยุดการทำงานของ Server ตอนนี้เรายังไม่ได้ใช้ Server ตัวนี้นะคะ เดี๋ยวสัปดาห์หน้านี่เราค่อยมาเริ่มใช้ แล้วก็ติดตั้ง Wordpress มีเครื่องไหนที่ยังลงไม่เรียบร้อยบ้าง เครื่องหน้าใช่ไหม มีข้อสงสัยหรือคำถามเพิ่มเติมไหมคะ ใครมีข้อสงสัยไหม ยกมือถาม ไม่มีนะคะ ถ้าไม่มีคำถามเดี๋ยวเราเจอกันวิชานี้เจอกันพุธหน้า แล้วก็กราฟิกเจอกันจันทร์หน้าค่ะ โอ.เค. อย่างนั้น คาบนี้เจอกันแค่นี้ค่ะ ขอบคุณค่ะ 

[สิ้นสุดการถอดความ]