(อาจารย์) สวัสดีค่ะ สวัสดีค่ะ (นักศึกษา) ทั้งหมดทำความเคารพ สวัสดีค่ะ / ครับ (อาจารย์) สวัสดีค่ะ ยินดีต้อนรับเข้าสู่ รายวิชาการเขียนโปรแกรมบนเว็บนะคะ เจอกันเช้าวันพุธ เดี๋ยวขอเช็กความพร้อม ของพวกเราทุกคนก่อนนะคะ โอ.เค. นะ คนแรกมาหรือยัง ฌริกาญจน์ อชิรญา ศิริชัย ปิชาฎา กาญจนา นันท์สินี สุรเชษฐ์ ทานข้าวอิ่มแล้วใช่ไหมคะ นิลวรรณ วินิจ จุฑามาศ ภิสิทธิ์ คมกฤษ โสภิดา อรสา เสาวลักษณ์ กาญจนสิริ ยังไม่มานะคะ เพื่อนไปไหนหนอ วันวิสาข์ วิภาภรณ์ พัชราภา ณัฐสุดา จตุรพร โอ.เค. อรสา กาญจนสิริ หายไปไหนเอ่ย ยังไม่มานะคะ โอ.เค. นะคะ ก่อนที่เราจะเริ่มการปฏิบัติ ในเรื่องของ การเขียนโปรแกรมบนเว็บนะคะ เดี๋ยวเราจะต้องมาเรียนรู้พื้นฐานนะคะ ทฤษฎีที่เกี่ยวข้องนะคะ กับการเขียนโปรแกรมบนเว็บนะคะ แต่อาจารย์เคยพูดกับพวกเรา เคยบอกกับพวกเราว่า จะให้ประยุกต์ใช้ตัว WordPress ในการสร้างเว็บไซต์นะคะ เพราะว่ามันจะได้ไม่ยุ่งยากนะคะ เราอยู่สาย IT เราต้องประยุกต์ ตัวที่เป็นเว็บสำเร็จรูปนะคะ ที่เป็น CMS นะคะ แต่ว่า เราจะต้องเรียนรู้ นะคะในส่วนของทฤษฎีที่เกี่ยวข้อง กับการเขียนโปรแกรมนะคะ แต่จะได้ฝึกนิดหน่อยในเรื่องของ ภาษา HTML นะคะ ในการพัฒนาเว็บนะคะ ในการออกแบบเนื้อหานะคะ โดยใช้ HTML นะคะ เดี๋ยวถามพวกเราก่อนว่า เทอมก่อนหน้า เรียนหลักการเขียนโปรแกรมมาใช่ไหมคะ ใช่ไหม หลักการเขียนโปรแกรม แล้วก็ภาษาคอมพิวเตอร์ ใช่ไหมคะ การเขียนโปรแกรมภาษาคอมพิวเตอร์ หลักการเขียนโปรแกรมนี่ เราได้ ใช้ภาษาอะไร ในการ ฝึกเขียนโปรแกรม จำได้ไหมคะ ใช้อะไรนะคะ ใช้ Python ว้าว นะคะ และก็ ต่อจากหลักการเขียนโปรแกรม จะมีวิชาหนึ่ง ก็คือการเขียนโปรแกรมคอมพิวเตอร์ ใช้ Python เหมือนกันหรือเปล่าคะ แสดงว่าเรียน Python 2 เทอมเลยใช่ไหมคะ แสดงว่าห้องนี้แน่น Python [เสียงหัวเราะ] (อาจารย์) โอ.เค เพราะฉะนั้นเราเรียน หลักการเขียนโปรแกรมมานะคะ เรียน... การเขียนโปรแกรม ภาษาคอมพิวเตอร์ มาแล้วนะคะ ในส่วนของการเขียนโปรแกรมบนเว็บนี่ ก็จะมี หลาย ๆ ภาษานะคะ ที่เราจะเอามาประยุกต์นะคะ แต่ว่าเราจะเน้นภาษาใดภาษาหนึ่งนะคะ เดี๋ยวเรามาดู ทฤษฎีการเขียนโปรแกรมบนเว็บ แล้วก็มาตรฐานต่าง ๆ ที่เกี่ยวข้องนะคะ กับเว็บไซต์นะคะ โดยหัวข้อในส่วนนี้นี่นะคะ ก็จะมาดูเรื่องของหลักการทำงาน ของ World Wide Web ซึ่งเราคุ้นอยู่แล้วใช่ไหมคะ World Wide Web แล้วก็ประเภทของโปรแกรมบนเว็บ นะคะ ความรู้ทั่วไปเกี่ยวกับการออกแบบเว็บ แล้วก็ยุคของการพัฒนาเว็บไซต์นะคะ แล้วก็มาตรฐาน ในการพัฒนาเว็บไซต์นะคะ มาดูลักษณะของการเขียนโปรแกรม โอ.เค. นะคะ ต่อนะ เรามาดูลักษณะการเขียนโปรแกรมนะคะ ซึ่งเราเรียนเขียนโปรแกรมมาแล้ว ใช่ไหมคะ หลักการเขียนโปรแกรม การเขียนโปรแกรมภาษาคอมพิวเตอร์ ซึ่งลักษณะของการเขียนโปรแกรมนี่ จะมีการโปรแกรมบน Windows ที่เราเรียน วิชาการเขียนโปรแกรมภาษาคอมพิวเตอร์ อันนั้นเป็นการเขียนโปรแกรม บน Windows นะคะ อีกตัวหนึ่ง คือ การเขียนโปรแกรมบนเว็บนะคะ ก็คือการเขียนโปรแกรมบนเว็บ ก็คือการแสดงผลของโปรแกรม ที่อยู่บน Web Browser นะคะ ซึ่งผู้ใช้นี้ สามารถที่จะเข้าถึงได้ ผ่านเครือข่ายอินเทอร์เน็ต ทีนี้ จะขอถามพวกเราว่า Web Browser นี่ คืออะไร Web Browser คืออะไร Web Browser มีอะไรบ้าง นะคะ เดี๋ยวจะขอถาม จะขอตั้งคำถามว่า Web Brownser ได้แก่อะไรบ้างนะคะ โดยอาจารย์จะสุ่ม นะคะ จะสุ่มว่า ใคร จะเป็นผู้ตอบคำถาม สัก 2 คน หรือ 3 คน นะคะ ว่า Web Brownser ได้แก่อะไรบ้างนะคะ ขอถาม ใครเอ่ย ปายใช่ไหมคะ ปาย ปายคะ ปายช่วยตอบหน่อยว่า ยกตัวอย่างหนึ่งตัวก็ได้นะคะ Web Browser ได้แก่อะไร ยกตัวอย่างมา 1 ตัว (ล่าม) เป็นเว็บไซต์ ของมหาวิทยาลัยราชภัฏสกลนครค่ะ (อาจารย์) ลองยกตัวอย่าง ตัวที่เป็น Web Browser ที่ตอบมามีส่วนถูกนะคะ แต่ว่ายังไม่ร้อยเปอร์เซ็นต์ เดี๋ยวให้ตัวช่วยนะคะ เดี๋ยวมีตัวช่วย วันนี้วันที่เท่าไร วันนี้วันที่ 11 ตัวช่วยอยู่ใกล้ ๆ กัน Google Chorme โอ.เค. นะคะ ตัวที่เป็น Web Browser นะคะ จะมี Google Chrome, Web Browser ก็คือ ตัวโปรแกรมที่เปิดดูเอกสารนะคะ เปิดดูเอกสารที่อยู่บนเว็บไซต์นะคะ ตัวโปรแกรมที่ใช้ในการเปิดเอกสาร เปิดเอกสารของเว็บไซต์นะคะ ซึ่ง Web Browser ที่เราคุ้นเคยนะคะ ก็คือ Google Chrome ใช่ไหมคะ ถ้าเป็นเครื่อง Mac ล่ะคะ ถ้าเป็นเครื่อง Mac, Safari ตัวนี้คือ Web Browser ซึ่งโปรแกรม Web Browser นี่ มีเยอะมากเลยใช่ไหมคะ นอกจาก Google Chrome, Safari แล้วมีอะไรอีกคะ มี Firefox แล้วที่ติดมากับตัว Windows เลย คืออะไรคะ ที่ติดมากับ Microsoft เลยคืออะไรคะ ก็คือ Internet Explorer ใช่ไหมคะ หรือตัว IE ใช่ไหมคะ เพราะฉะนั้นตัวอันนี้ พวกนี้เป็นตัวที่เราคุ้นเคย Google Chrome, Firefox, Safari นะคะ Internet Explorer นะคะ แต่ตัวที่ใช้เยอะที่สุดนะคะ Web Browser ที่ใช้เยอะที่สุดก็คือ Google Chrome ใช่ไหมคะ เพราะว่า สามารถที่จะเปิด หรือ Support นะคะ Support หรือเข้ากับทุก ๆ โปรแกรมนะคะ เข้ากับทุก ๆ Page นะคะ ที่เขาออกแบบนะคะ เพราะฉะนั้น ตัว Google Chrome นี่ จะเป็นตัวที่นิยมใช่มากที่สุดนะคะ และก็การแสดงผลดีที่สุดนะคะ เพราะฉะนั้น ถ้าเราจะเข้าถึงข้อมูล ผ่านอินเทอร์เน็ต จะต้องผ่านโปรแกรม Web Browser นะคะ ทีนี้มาดูหลักการทำงานของ World Wide Web นะคะ World Wide Web, World Wide Web นี่นะคะ จะมีอยู่ 2 ส่วนนะคะ มีอยู่ 2 ส่วน ก็คือ ส่วนที่เรียกว่า “ผู้ขอใช้บริการ” นะคะ และผู้ให้บริการนะคะ ซึ่งเครื่องผู้ขอใช้บริการ ก็คือ เครื่องที่เราใช้อยู่นะคะ ซึ่งเครื่องที่เราใช้อยู่ สามารถเป็นได้ทั้งผู้ขอใช้บริการ และผู้ให้บริการนะคะ หรือจะเรียกกัน ในศัพท์ทางคอมพิวเตอร์นี่ ก็คือ ผู้ขอใช้บริการ ก็คือ Client นะคะ และก็ผู้ให้บริการก็คือ Server นะคะ ผู้ให้บริการหรือ Server นี่ ก็คือตัวที่กระจายข้อมูลนะคะ ตัวที่กระจายข้อมูลต่าง ๆ หรือเวลาที่เราเขียนเว็บ หรือเราสร้างเว็บนี่ เราจะต้องเอาข้อมูลของเรานี่ ไปเก็บไว้ที่ Server นะคะ เราจะต้องเอาข้อมูลทั้งหมดของเรา ไปเก็บไว้ที่ Server เพื่อที่จะให้ผู้ขอใช้บริการต่าง ๆ นี่ เวลาเรียกใช้ข้อมูลของเรานี่ เขาก็จะดึงจาก Server นี่ ไปที่เครื่องของผู้ขอใช้บริการนะคะ เพราะฉะนั้นนี่ World Wide Web นี่ จะมีทั้งผู้ใช้บริการ และผู้ให้บริการนะคะ ยกตัวอย่าง อย่างเช่น การทำงานของตัวผู้ขอใช้บริการ และ ผู้ให้บริการนะคะ ซึ่งจะแสดงในลักษณะของการใช้บริการ งานพิมพ์นะคะ เครื่องพิมพ์นี่ เราสามารถขอใช้บริการเครื่องพิมพ์ 1 เครื่องนะคะ โดยผู้ขอใช้บริการนี่ อาจจะหลาย ๆ เครื่องก็ได้ ใช่ไหมคะ เราจะสังเกตเห็นว่าห้องทำงานต่าง ๆ นี่ จะมีเครื่องพิมพ์อยู่ 1 เครื่อง สมมุตินะคะ และจะมีเครื่องของพนักงานนี่ เป็นสิบ ๆ เครื่อง ใช่ไหมคะ แล้วแต่ละคนนะคะพนักงานแต่ละคนนี่ สามารถที่จะใช้งาน เครื่องพิมพ์เครื่องนั้นได้ นะคะ ซึ่งเครื่องพิมพ์เครื่องนี้ จะทำการเชื่อมต่อกับ Server นะคะ หรือเชื่อมต่อ กับเครื่องให้บริการนะคะ เวลาที่เราเรียกใช้ หรือเรียก เขาเรียกว่า “Print งาน” สั่ง Print งาน สั่งพิมพ์งานนี่นะคะ ก็ มันก็จะทำการวิ่ง ไปที่เครื่องผู้ให้บริการนะคะ แล้วก็จะสั่ง เราก็สามารถสั่งพิมพ์งานได้นะคะ ซึ่งก็จะมีวิธีการ ขั้นตอนในการติดตั้งเครื่อง Print ให้เป็นเครื่องให้บริการนะคะ เดี๋ยวเราอยู่ปี 3 ปี 4 เราก็จะได้ติดตั้ง Printer ใช่ไหมคะ ติดตั้งเครื่องพิมพ์ ซึ่งเวลาออกไปฝึกงานแล้วนี่ ตัวนี้จะได้ใช้งานบ่อยมาก นะคะ จะได้ใช้งานบ่อยมาก ในการตั้งค่าเครื่องพิมพ์ ให้เป็น Server นะคะ ให้หลาย ๆ เครื่อง สั่ง Print งานได้นะคะ เพราะฉะนั้นนี่ อันนี้ก็จะเป็นตัวอย่าง ของการให้บริการเครื่องพิมพ์นะคะ ซึ่งเราจะเรียกกระบวนการนี้ว่า “Printer Server” นะคะ หรือว่า “Print Server” นะคะ อีกตัวอย่างหนึ่งนะคะ ในเรื่องของการทำงาน ของ World Wide Web ก็คือ การให้บริการข้อมูลนะคะ หรือว่าฐานข้อมูลนะคะ ซึ่งเราจะต้องมีการติดตั้ง ฐานข้อมูลนี่นะคะที่ Server ซึ่งเราจะเรียกตัวนี้ว่า “Database  Server” นะคะ หรือว่า เป็นผู้ให้บริการฐานข้อมูลนะคะ เวลาที่เราหรือผู้ขอใช้บริการนี่นะคะ ไปดึงข้อมูลนะคะ สมมุติว่าในห้องนี้ นะคะ 20 กว่าคน ข้อมูลของเรา ถูกเก็บไว้ที่ใดที่หนึ่งนะคะ ก็คือเก็บไว้ที่ Database Server ไม่ว่าจะเป็นประวัตินะคะ ข้อมูลทุกอย่างนะคะ ที่เราออกแบบฐานข้อมูลไว้ใช่ไหมคะ ก็จะเอาไว้ที่ Database Server เวลาที่เราไปดึงข้อมูล ของคนใดคนหนึ่งนะคะ อยากทราบข้อมูลของคนใดคนหนึ่ง หรือเราจะ Update ข้อมูลของเรานะคะ เราก็ใส่รหัสนักศึกษาไป หรือว่ารหัสบัตรประชาชนไปนะคะ แล้วเครื่องผู้ให้บริการนี่ ก็จะทำการดึงข้อมูลของเรา ที่อยู่ในฐานข้อมูลนี่นะคะ ส่งมาที่ผู้ขอใช้บริการนะคะ เวลาที่เราเขียนโปรแกรมบนเว็บ จะต้องมีการออกแบบฐานข้อมูลนะคะ ซึ่งการออกแบบฐานข้อมูล พวกเราเรียนมาแล้ว เทอมที่แล้ว ถูกไหมคะ เป็นอย่างไรคะ ได้สร้างตาราง วิเคราะห์ข้อมูล วิเคราะห์ตาราง ออกแบบตารางฐานข้อมูล อย่างสนุกสนานเลยใช่ไหมคะ สนุกสนานไหม นะคะ เพราะฉะนั้นนี่ ทฤษฎีในเรื่องของ การออกแบบฐานข้อมูลนี่นะคะ เราจะได้เอามาประยุกต์ใช้ ในเรื่องของการเขียนโปรแกรมด้วยนะคะ นะคะ การเขียนโปรแกรม ไม่ได้สอนให้เราออกแบบฐานข้อมูล คือเราเรียนฐานข้อมูลมาแล้ว เราก็นำความรู้ตัวนั้นนี่นะคะ มาวิเคราะห์ข้อมูล ที่เราจะเก็บ เก็บบนเว็บนะคะ เราต้องการจะเก็บอะไรบ้างนะคะ เราก็วิเคราะห์ออกมา อย่างเช่นข้อมูลข่าวสารต่าง ๆ นี่ นะคะ ข้อมูลข่าวสาร บทความ ความรู้ต่าง ๆ เราก็ออกแบบข้อมูลที่เราจะเก็บ อย่างเช่น รหัส ชื่อเรื่อง บทความ รายละเอียดต่าง ๆ รูปภาพ อันนี้เราต้องการเก็บ ที่เก็บเพราะอะไร 1. เพราะว่า เผื่อวันข้างหน้าเราจะค้นใช่ไหมคะ เราจะดูข้อมูลย้อนหลัง เราก็สามารถดูได้นะคะ ถ้าเราเก็บในเครื่อง มันก็ต้องเดินทาง มาที่เครื่องนี้เครื่องเดียว แต่ถ้าเราเก็บออนไลน์ เก็บไว้บนเว็บ นะคะ ไม่ว่าอยู่ที่ไหน เราก็สามารถดูข้อมูลตัวนั้นได้นะคะ โดยมีการป้องกันความปลอดภัย ของข้อมูลนะคะ ก็ใส่รหัสเข้าไป นะคะ เพราะฉะนั้นนี่ ตัว Database Server นี่นะคะ ก็เป็นตัวหนึ่งที่สำคัญ แล้วก็เกี่ยวข้อง กับการเก็บข้อมูลบนเว็บนะคะ อันนี้ก็จะเป็นการทำงานโดยรวม ของ World Wide Web นะคะ ซึ่งเวลาที่เราเข้าใช้งานเว็บไซต์ใช่ไหมคะ เราก็ต้องผ่าน โปรแกรม Web Browser นะคะ เวลาเราจะเข้าเว็บไซต์ต่าง ๆ ก็ต้องผ่าน Web Browser ผ่าน Google Chome ผ่าน Safari ผ่าน Firefox หรือ Internet Explorer นะคะ เราต้องการเข้าดูเว็บไซต์อะไร เราก็ใช้ตัว Web Browser แล้วก็พิมพ์ ใช่ไหมคะ พิมพ์ชื่อเว็บไซต์หรือค้นนะคะ บางคนจำชื่อเว็บไซต์ไม่ได้ ก็ใช้ Google Seach นะคะ ใช้ Google ค้นหานะคะ ตัว Google นี่ ไม่ใช่ตัว Web Browser นะคะ เป็นเว็บไซต์ Web Service นะคะ เป็น Web Service ที่นิยมมากที่สุด อันดับ 1 เลย ในการค้นหา ใช่ไหมคะ เป็นเว็บค้นหา เป็นเว็บให้บริการการค้นหา ก็จะมีข้อมูลทุกอย่างนะคะ ใครที่ทำเว็บไซต์แล้วใช้หลักการ SEO หรือ ใช้เทคนิค Search Engine ก็คือ ค้นแล้วเจอเลย เจอหน้าแรกของ Google เลยนะคะ อันนี้ก็จะเป็นตัวหนึ่งที่ทางธุรกิจ หรือทางอะไรนี่ เขาต้องการที่จะให้ค้น ชื่อใดชื่อหนึ่งขึ้นมา แล้วให้เจอ เจอเว็บไซต์เขา เจอข้อมูลเขานะคะ เพราะว่าถ้าคนเข้ามาดูเยอะ ๆ นะคะ ถ้าเว็บไซต์ไหนคนเข้าดูเยอะ ๆ มันก็จะมีพวกโฆษณาต่าง ๆ นี่ มาขอเช่าพื้นที่ นะคะมาขอใช้พื้นที่เรา ในการโฆษณาอะไรต่าง ๆ เราก็จะเก็บ เก็บค่าใช้จ่ายจากเขานะคะ อันนี้ก็คือเป็นรายได้ ที่ได้มาจากการสร้างเว็บนะคะ ถ้าเว็บไหนสร้างขึ้นมาแล้ว ไม่มีคนเข้ามาดูเลยนี่ มันก็จะไม่มีอะไรเกิดขึ้นใช่ไหมคะ ลองดู ลองสังเกตดูนะคะ ว่ามีเว็บไซต์ต่าง ๆ ที่คนนิยม คนเข้าไปใช้เยอะ มันก็จะมีโฆษณานะคะ ใช่ไหมคะ โฆษณามาก่อนเลยนะคะ โฆษณา Pop-Up โฆษณาขึ้นมาเลยนะคะ อันนั้นเขาก็ขอใช้พื้นที่ ว่าซื้อหรือว่าจ่ายเงิน ให้กับพวกเจ้าของเว็บนะคะ เพราะฉะนั้นนี่ ตัวเขียนโปรแกรมบนเว็บนี่ บางทีเราอาจจะไม่ต้องเขียน เราอาจจะใช้ตัว WordPress ตัว WordPress นี่ จะมีตัวที่ทำ Search Engine นะคะ คือการค้นที่ Google นี่ ค้นเจอเร็วนะคะ อย่างนั้น เมื่อเราเข้า Web Browser แล้วก็พิมพ์ชื่อเว็บไซต์นะคะ หรือว่า URL ที่เรารู้จักนะคะ มันก็จะไปที่ Web Server นะคะ ก็คือตัวที่ให้บริการ ตัวที่ให้บริการเว็บนะคะ แล้วก็ส่งข้อมูล หรือว่าเอกสารหน้าเว็บนี่นะคะ มาให้เรา นะคะ กระบวนการทำงานของมัน จะมีความรวดเร็วนะคะ รวดเร็วมาก แต่ถ้าเว็บไซต์ไหนที่ออกแบบไม่ดี นะคะ เว็บไซต์ ที่ออกแบบไม่ดีนี่ ก็คือ หน้าจอเว็บนี่ หน้าเว็บนี่จะโชว์ข้อมูลช้า นะคะ ก็คือโชว์ข้อมูลช้า พอโชว์ข้อมูลช้านี่ เราวัยรุ่นใช่ไหมคะ หน้าเว็บนี้ รอเกิน 30 วินี่ ก็ไม่อยากจะดูแล้วใช่ไหมคะ ก็ปิดไปแล้ว ก็ต้องสังเกตเห็นว่า มีทุกเว็บไซต์นี่ เขาก็จะพยายาม ออกแบบข้อมูลเนื้อหาให้มันเร็ว ทั้งนี้ทั้งนั้น ก็จะขึ้นอยู่กับ ความเร็วของเครื่องเราด้วยนะคะ เพราะฉะนั้นนี่ ตัวที่ ตัวที่ทำให้เอกสาร หรือข้อมูลทุกอย่าง มันเป็นแบบเดียวกัน ก็คือมันจะเป็น Protocal (HTTP) หรือว่าเป็นมาตรฐาน นะคะ มาตรฐานที่ทำให้ข้อมูลบนเว็บนี่ สามารถติดต่อสื่อสารกันได้นะคะ สามารถที่จะแสดงข้อมูลเอกสารได้ ก็คือ Protocal (HTTP) นะคะ หรือว่า จะเรียกคำเต็มว่า “Hyper Tech Transfer Protocol” นะคะ เป็นตัวที่แสดงเอกสารบนเว็บนะคะ เป็น Potocol ที่ใช้แสดงเอกสารบนเว็บ สังเกตว่า URL ของเว็บไซต์นี่นะคะ ก่อนที่จะเป็น World Wide Web นี่ มันก็จะมี http:// นะคะ แล้วก็ตามด้วย www. คือถ้าไม่มี Protocol ตัวนี้ เราจะไม่สามารถอ่านเอกสาร ที่อยู่ทั่วโลกได้ นะคะ คำว่า “เอกสารที่อยู่ทั่วโลก” คือไม่ว่าใครก็ตามใช่ไหมคะ ที่เขาสร้างเว็บขึ้นมานี่ ไม่ว่าจะเป็นภาษอังกฤษ ภาษาต่างประเทศ ก็คือจะใช้ Protocol ตัวนี้ ในการสื่อสารกัน นะคะในการสื่อสารกัน ก็จะทำให้เรานี่สามารถอ่าน หรือว่าดูเอกสาร ในหน้าเว็บไซต์ได้นะคะ ทีนี้มาดูประเภท ของโปรแกรมบนเว็บ นะคะ การเขียนโปรแกรมบนเว็บนี่ จะมีอยู่ 2 ประเภท หรือ 2 แบบนะคะ ก็คือแบบที่ 1 นะคะ ภาษาอังกฤษเรียกว่า “Static Programming” หรือ การเขียนโปรแกรม แบบธรรมดาทั่วไป นะคะ ยกตัวอย่าง เว็บไซต์ธรรมดาก็คือเป็น อย่างเช่น เว็บประวัติส่วนตัว Web Page ที่เป็นประวัติขององค์กรนะคะ Web Page ที่แสดงข้อมูลทั่วไปนะคะ พวกนี้จะเป็น Page หรือว่า Web Page ที่ไม่ค่อยจะมีการ Update ข้อมูลนะคะ ไม่ค่อยมีการ Update ข้อมูล ข้อมูลจะนิ่งนะคะ ซึ่งการพัฒนาจะใช้ภาษา HTML นะคะ ภาษา HTML ในการเขียน หรือว่าเราเอาแค่ข้อมูลเข้าไป เอาแค่รูปภาพเข้าไปนะคะ ซึ่งเวลาที่เราจะดูข้อมูล ก็ต้องผ่าน Web Browser นะคะ ร้องขอข้อมูล ไปยังเครื่องผู้ให้บริการนะคะ หรือว่า Web Server นะคะ มันก็จะทำการดึงข้อมูล หรือว่าดึงหน้า Web Page นะคะ ที่ตรงกับความต้องการของเรานี่นะคะ ส่งมาให้เรา ผ่านหน้าจอนะคะ Web Static หรือการเขียนโปรแกรมธรรมดานี่ มันจะไม่ค่อยยุ่งยากนะคะ ไม่ต้องมีฐานข้อมูล ไม่ได้ออกแบบฐานข้อมูลนะคะ ไม่ได้เก็บอะไรนะคะ เพียงแค่เราแปะรูปภาพ แปะข้อความนะคะ ติด แปะไว้เฉย ๆ นะคะ แต่ก็ต้องมีการออกแบบให้สวยงาม เพื่อที่จะให้ข้อมูลนี่ ดูน่าสนใจนะคะ โดยใช้เทคนิค ในการออกแบบกราฟิกเข้าช่วยนะคะ ประเภทที่ 2 นะคะ เรียกว่าการเขียนโปรแกรม แบบ Dynamic นะคะ แบบ Dynamic, Dynamic Programming นะคะ การเขียนโปรแกรมแบบ Dynamic นี่นะคะ จะมีฐานข้อมูลนะคะ เข้ามาเกี่ยวข้อง เพราะว่า ผู้ใช้สามารถที่จะเพิ่มข้อมูล ดูข้อมูลนะคะ หรือว่าจะเพิ่ม ลบ แก้ไขนะคะ มีการจัดเก็บข้อมูลนะคะ มีการเรียกดูข้อมูลนะคะ ตัวนี้จะสามารถ เปลี่ยนแปลงข้อมูลได้ตลอดเวลานะคะ โดยเว็บที่ เป็นเว็บแบบ Dynamic ก็อย่างเช่นนะคะ เว็บที่มีการจัดเก็บข้อมูลลงฐานข้อมูลนะคะ หรือว่าเว็บที่เกี่ยวกับ การแสดงรายละเอียดสินค้า เว็บขายสินค้านะคะ เว็บของ เว็บไซต์ของ มหาวิทยาลัยราชภัฏสกลนครของเรา ก็เป็นเว็บแบบ Dynamic เพราะว่ามันมีการ Update ข่าวสารตลอดเวลาใช่ไหมคะ โดยเฉพาะปัจจุบัน ช่วงนี้จะ Update ในเรื่องของการสมัครนะคะ การรับสมัครน้องปี 1 ที่จะเข้ามาเรียนปี 63 นะคะ ก็จะ Update แบบ Real-Time ใครสมัครเข้ามาปุ๊บ ตัวเลขก็จะเพิ่มขึ้นทันทีนะคะ หรือข่าวสาร ข่าวประชาสัมพันธ์ต่าง ๆ นะคะ ข่าวกิจกรรมนะคะ ข่าวอบรมสัมมนา พวกนี้นะคะ เราสามารถ เรียกดูข่าวย้อนหลังได้นะคะ หรือสามารถเพิ่มข่าวเข้าไปได้ อันนี้การเพิ่ม ก็จะเป็นหน้าที่ของผู้ดูแลเว็บนะคะ หรือว่านักพัฒนาเว็บ ซึ่งการทำงานก็คล้าย ๆ กันนะคะ ก็คือผ่าน Web Browser เพียงแต่ว่ามันจะมีตัวฐานข้อมูลนะคะ ที่รวบรวมข้อมูลต่าง ๆ นี่นะคะ ทุกอย่างจะเก็บไว้ที่ฐานข้อมูลนะคะ ซึ่งตัวผู้ให้บริการนี่ ก็จะไปดึงเอาข้อมูล ที่อยู่ในฐานข้อมูลของเรานะคะ แล้วก็ตัวนี้จะมีโปรแกรมแปลภาษา ทำไมถึงต้องมีโปรแกรมแปลภาษา เพราะว่าในการเขียนโปรแกรม แบบ Dynamic นี่นะคะ เราจะใช้ภาษา PHP ไม่ใช้ภาษาอังกฤษนะคะ จะใช้ PHP รู้จัก PHP ไหมคะ หรือใช้ Python อย่าง Python ที่เราเคยเรียนใช่ไหมคะ ใช้ Python หรือใช้ ASP ใช้ JavaScript นะคะ ภาษาเหล่านี้จะมีตัวแปรนะคะ ซึ่งตัวการทำงานของตัวแปลภาษา มันก็จะไปดูว่าเราต้องการอะไร เราจะประมวลผลอะไร อย่างเช่น เราจะเพิ่มข้อมูลนี่นะคะ มันก็จะไปประมวลผล ในเรื่องของที่โปรแกรมเมอร์นี่ เขาได้ป้อนคำสั่ง ป้อนภาษาลงไปนะคะ แล้วมันก็จะส่งข้อมูล แปลภาษาอะไร แล้วมันก็จะส่งข้อมูลมาให้เรานะคะ ผ่าน Web Page นะคะ เราก็จะสามารถดูข้อมูลต่าง ๆ ได้นะคะ ซึ่งตัวการทำงานกับ Database แล้วก็ตัวแปลภาษานี่ มันก็จะมีการเขียนคำสั่ง ถ้าเป็น PHP ก็เราต้องการทำอะไร ต้องการจะเพิ่มนะคะ มันก็จะเป็นพวก Insert, Into เพิ่มข้อมูลเข้าไปใช่ไหมคะ อันนั้นเราไม่ได้เห็นตัวคำสั่ง แต่ว่าเราเห็น ผ่านหน้าจอแบบฟอร์มนะคะ มันก็จะแปลมาให้เรา เป็นหน้าจอแบบฟอร์มนะคะ ที่นักพัฒนาโปรแกรมหรือพัฒนาเว็บนี่ เขาได้เขียนขึ้นมานะคะ ทีนี้ มาดูในส่วนของ Application นะคะ Application หรือ Web Application นะคะ เราจะได้ยินบ่อย ๆ เกี่ยวกับ Application ใช่ไหมคะ โดยเฉพาะถ้าในโทรศัพท์ App โหลด App โน่น โหลด App นี่นะคะ App ต่าง ๆ ที่... โดยเฉพาะ App ที่เกี่ยวกับอะไรคะ การทำหน้าสวยใช่ไหมคะ ถ่ายรูป หน้าคม หน้าเรียว อันนั้นก็เป็น App แต่ว่าเป็น App ที่อยู่ในมือถือนะคะ มาเรียกสั้น ๆ ว่า App แต่ชื่อเต็ม ๆ มันก็คือ Application ก็คือตัวที่ประยุกต์ขึ้นมา ใช่ไหมคะ Application คือโปรแกรมที่เราสร้างขึ้นนะคะ ประยุกต์ขึ้นมา สร้างขึ้นมา เพื่อใช้งานอย่างใดอย่างหนึ่งนะคะ หรือว่าใช้งานตามที่เราต้องการนะคะ เป็นระบบการทำงานของสารสนเทศนะคะ Application จะมีทั้ง Mobile Application, Mobile Application ก็คือ App ที่ใช้งานบนมือถือ Web Application ก็คือ โปรแกรมที่สร้างขึ้นมา ใช้งานบนหน้าเว็บนะคะ ใช้งานที่หน้าเว็บ อันนี้คือตัวอย่าง Web Application นะคะ โปรแกรมที่เราเขียนขึ้นมานะคะ เขียนขึ้นเอง ประยุกต์เองนะคะ จากข้อมูลต่าง ๆ ที่... นะคะ ที่มีการวิเคราะห์ข้อมูล ออกแบบข้อมูลนะคะ ซึ่งตัว Web Application นี่ จะสามารถเข้าใช้งานผ่าน Web Browser นะคะ โดยอาศัย Protocal (HTTP) นะคะ ผ่านเครือข่ายอินเทอร์เน็ต แล้วต้องมี เครือข่ายอินเทอร์เน็ตด้วยนะคะ หรือว่า Intranet นะคะ ตัวอย่าง Web Application ก็อย่างเช่น เว็บเกี่ยวกับเว็บขายสินค้า หรือว่า E-Commerce นะคะ Web E-Auction, E-Auction ก็คือเว็บการประมูลนะคะ เว็บประมูลนะคะ ประมูลสินค้า ประมูลการก่อสร้างอะไรพวกนี้นะคะ Web Board นะคะ แต่ก่อน Web Board นี่ จะได้รับความนิยมใช่ไหมคะ พวก Chat Board นะคะ เดี๋ยวนี้ก็คือ Chat Board ได้รับความนิยมนะคะ ทุกเว็บเดี๋ยวนี้สังเกตเห็นไหมว่า จะมี Pop-Up เล็ก ๆ ขึ้นมา เพื่อให้สามารถ พูดคุยกันผ่านหน้าเว็บได้นะคะ แต่ก่อนต้องไปพิมพ์ที่ Web Board ฝากข้อความนะคะ แล้วกว่าจะตอบกลับนะคะ เดี๋ยวนี้จะมี Chat Board นะคะ จะมีกล่องข้อความ เวลาที่เราเข้าเว็บต่าง ๆ ไม่ว่าจะเป็นเว็บมหาลัยนะคะ ก็จะมี Pop-Up เป็นกล่องข้อความขึ้นมา ให้เราได้พิมพ์สอบถามนะคะ เพราะฉะนั้นนี่จะเป็นตามยุคตามสมัย ของการพัฒนาเว็บนะคะ ถ้าเว็บไซต์ไหน มันไม่มีการสอบถามนะคะ เวลาที่คนสงสัยนี่ มันก็จะแบบ เออ จะไปถามตรงไหน ไม่ต้องเข้าไปที่ Web Board ต้องเข้าไปอะไรอีก ยุ่งยากนะคะ เพราะฉะนั้นนี่จะเป็นตัวอย่าง ของ Web Application นะคะ ในเรื่องของการออกแบบเว็บไซต์นะคะ ขั้นตอนในการออกแบบเว็บไซต์ คือเราจะต้องเรียนรู้ โครงสร้างระบบเว็บก่อนนะคะ โครงสร้างระบบเว็บก่อนนะคะ การสร้างเว็บไซต์ครั้งแรกเลยนี่นะคะ เริ่มต้นเราจะต้องมี Host นะคะ Web Hosting นะคะ Web Hosting ก็คือตัวที่ให้บริการเว็บนะคะ หรือว่าไปเช่า Host เช่าพื้นที่นะคะ ซึ่ง Host นี่ ก็จะมีทั้ง Host ในส่วนของ สถาบันการศึกษานะคะ Host ที่เกี่ยวกับการใช้งาน ในที่ทำงาน ในบ้านนะคะ หรือว่าให้บริการฟรี หรือว่าที่เกี่ยวข้องกับการค้า การพาณิชย์ หรือธุรกิจนะคะ พวก Web Host นะคะ พวกที่ให้บริการ Web Hosting ก็จะมี MyFreeWeb.net นะคะ My JAVA Server อันนี้ก็เป็นตัวอย่าง Web Hosting ที่เขาให้บริการนะคะ เขาให้บริการ Host ไม่ว่าจะเป็นการ... แต่เราต้องเสียเงินนะ บางทีถ้าไป... ถ้าต้องการพื้นที่เยอะ ๆ ก็ต้องเสียเงิน จะเป็นรายเดือน รายปี นะคะ เดือนละ 400 ปีละ 1,000 อันนี้แล้วแต่ อันนี้ก็คือ เช่า Host หรือเอาข้อมูลของเรา ไปเก็บไว้ที่ Host เขานะคะ ตัวที่ให้บริการ Web Hosting ก็จะมีขององค์กรนะคะ ของ CAT นะคะ CAT Telecom พวก ISP อันนี้คือให้บริการพวกให้บริการ Host นะคะ พวก Office Home, School, University ในโรงเรียน ในมหาวิทยาลัยนะคะ อย่างเช่น ถ้าเรามีเว็บมีผลงาน อยากจะเอาไปฝากไว้ที่ เว็บไซต์มหาลัยนี่ ก็สามารถที่จะติดต่อนะคะ หรือว่าใครตอนนี้พัฒนาเว็บอยู่ มีไหมคะ ที่สร้างเว็บแล้วมีไหม ที่สร้างเว็บตัวเองแล้วมีไหมคะ โชว์มือหน่อย ยังใช่ไหมคะ คือในมหาวิทยาลัยเรา ก็จะมีการเก็บพวกผลงานนักศึกษานะคะ ก็จะมีเอาไปแปะไว้ แขวนไว้นะคะ ทีนี้มี Web Hosting แล้วก็ Web Server นะคะ ตัวที่ให้บริการ Web Server นี่ ก็อย่างเช่น Window Server, Linux นะคะ ตัวที่ใช้เยอะที่สุดก็เป็น Linux เพราะว่ามันฟรีนะคะ มันฟรี มี Web Hosting, Web Server, Web Browser นะคะ ซึ่งอันนี้เราก็ได้ตอบไปแล้ว แล้วก็ เว็บไซต์ เว็บไซต์ ก็คือ คืออะไรคะ เว็บไซต์ คืออะไร เราเรียกแต่ว่า เว็บไซต์ ๆ ๆ ๆ เรารู้ไหมคะว่า เว็บไซต์ คืออะไร เปรียบเสมือนอะไร ถามดีกว่า ฟังอาจารย์เดี๋ยวบางคนหลับนะคะ อย่างนั้นก็จะขอถามว่า เว็บไซต์ คืออะไร นะคะ เว็บไซต์ คืออะไร ให้ตอบ หมายเลขโชคดีนะคะ ช่วยอธิบายหน่อยว่า เว็บไซต์ คืออะไร หมายเลข 016 ไม่มีโปรแกรม 017 ใครเอ่ย หลับไปแล้ว อธิบาย เว็บไซต์ นะคะ เว็บไซต์ คืออะไร เว็บไซต์ คืออะไร อธิบายยาว ๆ ได้นะคะ (ล่าม) ไม่รู้ค่ะ (อาจารย์) ไม่รู้ [เสียงหัวเราะ] (อาจารย์) ลองค้นสิ ให้โอกาสค้น เรามีคอมพิวเตอร์ ต่ออินเทอร์เน็ตอยู่ใช่ไหมคะ ค้นสิ เว็บไซต์ คืออะไร ถ้าเราไม่รู้ เราทำอย่างไรถึงจะรู้ ใช่ไหมคะ ค้นสิคะ ค้น ค้นเลย ใช้ Google ใช้ Google ใครตอบได้ยกเมือเลยก็ได้นะคะ ไม่ต้อง ไม่ต้อง 017 ใครยกมือ อาจารย์ให้ 1 คะแนน นะคะ 2 คน ยก โอ.เค. ค่ะ โอ.เค. อีก 1 คำตอบ อันนี้คือความหมาย ของ เว็บไซต์ ปรบมือให้กับ 2 คำตอบหน่อยค่ะ นะคะ คำว่า เว็บไซต์ ใช่ไหมคะ ที่เพื่อนบอกเป็นตัวที่รวบรวมข้อมูล ทุกอย่างใช่ไหมคะ รวบรวมข้อมูลทุกอย่างนะคะ อยู่บนออนไลน์นะคะ อยู่บนออนไลน์ ซึ่งเราสามารถเรียกใช้เว็บไซต์ ผ่าน Web Browser ใช่ไหมคะ แล้วเว็บไซต์นี่ ก็จะมีชื่อนะคะ เว็บไซต์ จะมีชื่อ ชื่อของเว็บ นะคะชื่อของเว็บนี่ บางทีเขาจะใช้ตัว TCT IP จะมี IP ทีนี้ IP นี่ จำยากนะคะ จำยาก อย่าง IP ของ สมมุติ IP ของ มหาวิทยาลัยราชภัฏสกลนครนี่ คือ 202.12.18. อะไรอย่างนี้ค่ะ มันจะมี 4 ชุด ตัวเลขชุดละ ตัวเลขแต่ละชุดจะไม่เกิน 255 เรียกว่า IP Address นะคะ IP 1 ตัว 1 เครื่องนะคะ ทีนี้ เว็บไซต์นี่ เขาจะตั้งชื่อ เพื่อที่จะแทน IP นะคะ แทน IP เพราะว่าจะใช้ชื่อที่เกี่ยวข้อง กับชื่อเว็บ ชื่อข้อมูลนะคะ อย่างเช่น เว็บ Sanook.com ทุกคนจะจำได้ใช่ไหมคะ เว็บ Kapook.com นะคะ Facebook.com นะคะ ทุกเว็บไซต์ก็จะมีชื่อนะคะ ทุก เว็บไซต์ ก็จะมีชื่อ เป็นแหล่งรวมข้อมูลทุกอย่างนะคะ แหล่งรวมข้อมูลทุกอย่าง เว็บไซต์นี่ เปรียบเสมือนกับห้องสมุด เว็บไซต์ เปรียบเสมือนห้องสมุด ถูกไหมคะ ห้องสมุดนี่มีทุกอย่างใช่ไหมคะ มีทุกอย่างเลย เว็บไซต์ ก็เหมือนกันนะคะ ทีนี้ถัดมานะคะ คือ Home Page นะคะ Home Page ใครจะเป็นคนตอบคำถาม Home Page คะ ใครจะเป็นคนตอบคำถาม Home Page จะให้สุ่มหรือยกมือดี เมื่อกี้ให้คะแนน 2 คนนะคะ รหัสอะไรคะ 208 กับ 214 208 กับ 214 ทีนี้ความหมายของ Home Page นะคะ ใครจะตอบ หรือจะให้อาจารย์สุ่ม 218 ใช่ไหม ใช่ไหมคะ เมื่อกี้กับ 214 หรือเปล่า 208 208 กับ 214 ใช่ไหม สุรเชษฐ์ เห็นไหมได้ 1 คะแนนแล้ว ทีนี้ Home Page, Home Page 1, 2, 3 หมดเวลา ยกมือ ๆ มีคนยกมือ ต้องยกมือก่อนตอบนะคะ เป็นคำที่เรียกใช้หน้าแรกของเว็บไซต์ นะคะ โอ.เค. ปรบมือให้เพื่อนหน่อย มีคำตอบอื่นไหมคะ คำว่า “Home”, Home คือบ้านถูกเปล่า เปรียบเสมือนบ้าน Home Page ก็คือหน้าที่เอาไว้รวม นะคะ หรือเอาไว้เรียกหน้าแรก ของเว็บไซต์นะคะ Home Page เปรียบเสมือนกับสารบัญนะคะ หรือหน้าปกหนังสือ ใช่ไหมคะ หรือหน้าปกหนังสือ ในห้องสมุดนะคะ ถ้าเราจะเข้าไปหยิบเล่มหนังสือ เล่มหนังสือ คือ เว็บไซต์ ใช่ไหมคะ แล้วมาดูหน้าแรก หน้าแรกก็คือหน้าปกนี่ หน้าปกก็คือ Home Page นะคะ เป็นตัวที่มีข้อมูลหลัก ๆ นะคะ มีข้อมูลหลัก ๆ มีหัวข้อ มีสารบัญ มีลิงก์อะไร เชื่อมไปยังตัวหน้าต่าง ๆ นะคะ ไปยังหน้าต่าง ๆ เมื่อกี้รหัสอะไรตอบคะ 221 นะคะ แจกคะแนนไปเลยนะคะ และสุดท้ายคือ Web Page หน้า Web Page นะคะ Web Page นี่ไม่แจกคะแนนนะคะ พวกเราน่าจะรู้อยู่แล้ว Web Page คือ หน้าเว็บแต่ละหน้านะคะ หน้าเว็บแต่ละหน้านะคะ อย่างเช่น หน้าประวัติ หน้าโครงสร้าง หน้ารายละเอียดสินค้านะคะ เวลาที่เราสร้างลิงก์ จากหน้า Home Page มาจากหน้าอื่น ๆ มันก็จะมีหน้าแผนที่นะคะ ขึ้นอยู่กับว่าใน เว็บไซต์นั้นนะคะ เราจะออกแบบข้อมูล มีหน้าอะไรบ้าง มีเพจอะไรบ้างนะคะ ซึ่งแต่ละหน้านี่ก็จะมีชื่อ และก็ออกแบบหรือพัฒนาจากหลาย ๆ ภาษา อาจจะเป็น HTML เป็น PHP เป็น ASP, Python นะคะ JavaScript นะคะ ก็แล้วแต่ว่าหน้านั้น จะแสดงข้อมูลในรูปแบบไหนนะคะ อันนั้นก็คือการสร้างเว็บนะคะ เราจะต้องเรียนรู้นะคะ คำศัพท์เหล่านี้นะคะ แล้วก็ต้องเตรียม สิ่งที่ต้องเตรียมก่อนเลย คือ Server นะคะ Server หรือ Host นะคะ ทีนี้ภาษาที่ใช้ ในการเขียนโปรแกรมบนเว็บนะคะ ภาษาที่ใช้ในการเขียนโปรแกรมบนเว็บ มีหลากหลายภาษามากนะคะ นะคะ อย่างเช่น Java นะคะ Java นี่สามารถทำงาน ได้ทุกระบบปฏิบัติการนะคะ คำว่า “ระบบปฏิบัติการ” ก็คือ สามารถทำงานได้ทั้ง Windows ได้ทั้ง Mac ได้ทั้งโทรศัพท์มือถือ ก็คือโทรศัทน์มือถือ ก็จะมีระบบปฏิบัติการที่เป็น IOS, Android นะคะ Java สามารถเข้าได้ กับทุกระบบปฏิบัติการนะคะ แล้วก็นิยมใช้กันอย่างแพร่หลาย ในการเขียนเว็บนะคะ ภาษา HTML 5 นะคะ อันนี้ก็เป็นอีกภาษา หนึ่งที่นิยมใช้นะคะ ซึ่งภาษา Java, HTML 5 เป็นพวกภาษา ที่ทำงานฝั่งผู้ขอใช้บริการนะคะ ทำงานฝั่งผู้ขอใช้บริการ มันไม่ได้มีการดึงข้อมูลนะคะ ไม่ได้ คือ การประมวลผลนะคะ คือการประมวลผล ฝั่งผู้ขอใช้บริการนะคะ ส่วนตัวภาษาที่ทำงาน หรือว่าประมวลผลฝั่งเครื่องผู้ให้บริการ ก็คือพวก PHP นะคะ พวก ASP นะคะ พวก Python นะคะ พวกนี้จะทำงานฝั่งผู้ให้บริการนะคะ คือทำงานหรือ Run ที่ Server นะคะ Run บน Server พวกนี้ต้องมี Server ก่อน ต้องจำลองเครื่องเป็น Server ถึงจะ Run ได้นะคะ แต่พวก HTML หรือ Java พวกนี้นะคะ ไม่ต้องมี Server ก็สามารถที่จะ Run หรือทำงานได้นะคะ อย่าง HTML5 นี่ เราสามารถทดลองเขียน จาก Notepad ก็ได้นะคะ ลองดูไหม นะคะ ลองดูไหม ใช้ HTML นะคะ เดี๋ยวให้พวกเราเปิดโปรแกรม เราจะเขียนโปรแกรม โดยใช้ภาษา HTML นะคะ โดยที่ไม่ต้องอาศัย Sever นะคะ สมมุติ พิมพ์เข้าไปที่ Notepad นะคะ เปิด Notepad ขึ้นมา แล้วพิมพ์อะไรก็ได้นะ นะคะ แล้วเราแค่ Save ไฟล์เป็น HTML นะคะ File, Save As เลือก Save As Type นี่นะคะ เป็น .html นะคะ พิมพ์เสร็จ Save As Type นะคะ ตั้งชื่อไฟล์ แล้วก็ Save Type นี่ เลือกเป็น All File นะคะ File Name ใส่นามสกุล .html นะคะ สมมุติอาจารย์เก็บไว้ที่ My Document นะคะ เก็บไว้ที่ My Document กด Save กด Save แล้วก็ไปเปิด My Document นะคะ สังเกตว่า หน้าชื่อ ๆ File ของเรานี่นะคะ มันจะเป็น Icon นะคะ จะมีตัว Internet Explorer ใช่ไหมคะ สัญลักษณ์ Internet Explorer นะคะ แล้วก็ประเภทไฟล์เป็น HTML File เราสามารถดับเบิลคลิก นะคะ โอ.เค. ออกมาเป็นภาษาไม่รู้เรื่องนะคะ UTF-8 ใช้ไม่ได้ Save As Type อันนี้ไม่ใช่ HTML 5 นะคะ เพราะฉะนั้นเวลาที่จะเขียนโปรแกรม ให้ออกมาตามที่เราเขียนนะคะ จะต้องมีการไปกำหนด Font นะคะ กำหนดรูปแบบอักษรนะคะ ซึ่งอันนั้นก็จะเป็น Code ที่ใช้ อาจจะเป็น Dreamweaver หรือจะเป็น Notepad นะคะ ที่เราจะต้องไปกำหนดการแสดงผลนะคะ ให้มัน Support ตัว Notepad นี่ อาจจะไม่ได้ Support นะคะ แต่ถ้าพิมพ์เป็นภาษาอังกฤษ มันอาจจะไม่ Support ภาษาไทยนะคะ แต่ถ้าพิมพ์เป็นภาษาอังกฤษนะคะ มันก็จะสามารถโชว์นะคะ ซึ่งตัวนี้เราไม่ได้ Run บน Server เรา Run ที่เครื่องของเรา Run ที่เครื่องผู้ขอใช้บริการนะคะ อันนี้ต้อง Save ทับนะคะ แต่ถ้าเป็นภาษาอังกฤษนะคะ มันก็จะรองรับนะคะ Support ภาษาอังกฤษ แต่ไม่ Support ภาษาไทย โอ.เค. อันนี้ก็จะเป็นตัวอย่าง ของการใช้ HTML พื้นฐานนะคะ ที่สามารถ Run บนเครื่องของเรา โดยที่ไม่ต้อง ติดตั้ง Server ก็ได้นะคะ มันก็จะเปิดตาม URL นะคะ ไฟล์เป็น .html แค่นี้นะคะ แต่ถ้าเป็นพวกภาษา PHP, ASP, Python พวกนี้มันจะต้องมีตัวที่เป็น ทำหน้าที่เป็น Server นะคะ ซึ่งตัวที่เป็น Web Server นะคะ ตัวที่ทำหน้าที่เป็น Web Server มีใครรู้จักไหมคะ Web Server ตัวโปรแกรมที่ทำเป็น Web Server มีใครรู้จักไหมคะ ยกตัวอย่างตัวที่ทำหน้าที่ เป็นโปรแรกม Web Server สัก 1 ตัว 2 ตัว ใครตอบได้อาจารย์ให้ 1 คะแนน Web Server ให้เวลา 5 วิ ในการยกมือตอบ 5 4 3 2, 1 ยกมือหรือคะ หมายเลขอะไรคะ มีใครตอบได้ไหมคะ Web Server ที่ผ่านมา เราไม่ได้เขียนโปรแกรมบนเว็บ เราเลยไม่ได้ติดตั้ง Server ใช่ไหมคะ รู้จะได้ AppServ ไหมคะ AppServ คุ้น ๆ ไหม ไม่คุ้นเลย คุ้นไหมคะ AppServ ตัวที่เป็น Web Server นะคะ เอาไว้ Run โปรแกรมที่ Run ภาษาที่ทำงานฝั่ง Server นี่ ก็จะมีพวก AppServ, XAMPP นะคะ X-A-M-P-P ตัวย่อนะคะ XAMPP ซึ่งก็จะมีทั้ง For Windows, For Mac นะคะ ปกติ ปัจจุบันนี่ ก็จะใช้ตัว XAMPP ก็จะเยอะนะคะ ซึ่งเราก็จะมีการติดตั้ง XAMPP นะคะ ไม่รู้ว่าเครื่องเราได้ติดตั้งไว้หรือยัง เดี๋ยวเราค่อยมาเช็กดูนะ ว่าเครื่องของเรานี่ ได้ติดตั้งตัว Web Server ไว้หรือยังนะคะ ทีนี้มาดูยุคของการพัฒนาเว็บนะคะ ยุคของการพัฒนาเว็บ ยุคแรก ๆ เลยเราอาจจะเกิดไม่ทันนะคะ ก็คือยุคของการพัฒนาเว็บ แบบธรรมดานะคะ อย่างเช่น พวกทำเว็บส่วนตัวนะคะ หรือว่าเป็น Blog นะคะ ที่สร้างขึ้นมาเอง โดยที่ไม่มีการออกแบบฐานข้อมูลอะไร เราก็แค่เอาข้อมูลของเรา ไปใส่ไว้นะคะ อันนี้ออกแบบง่ายนะคะ ออกแบบง่าย เวลาจะแก้ไขเปลี่ยนแปลง ก็ต้องใช้เวลานานนะคะ เพราะจะต้องมาแก้ไขที่เครื่อง แล้วก็ต้องมีการอัปเดตขึ้นไปนะคะ ซึ่งจะใช้เวลาค่อนข้างนานนะคะ ยุคที่ 2 ก็เป็นเว็บแบบ Dynamic นะคะ ซึ่งยังอยู่ในเว็บ 2.0 อยู่นะคะ ก็เป็นเว็บที่มีการสร้างฐานข้อมูล เก็บข้อมูลต่าง ๆ นะคะ ซึ่งปัจจุบันนี้ก็มีการ ยังสร้างเว็บไซต์ ลักษณะนี้นะคะ แต่ละองค์กร แต่ละหน่วยงาน หรือว่าภาคธุรกิจต่าง ๆ นี่ ก็ยังต้องใช้ เว็บไซต์ นะคะ อาศัย Facebook อย่างเดียว ไม่ได้นะคะ จะต้องมีเว็บไซต์เป็นของตัวเองนะคะ ต้องมีเว็บไซต์ประจำหน่วยงาน ประจำองค์กรนะคะ และก็ยุคที่ 3 เป็น Web Service นะคะ เว็บที่ให้บริการต่าง ๆ นะคะ ซึ่ง Web Service ก็อย่างเช่น พวก Microsoft Passport นะคะ หรือว่าให้บริการตรวจสอบความ เป็นตัวตน ผ่านเว็บไซต์นะคะ เว็บเกี่ยวกับการส่งข้อความนะคะ เว็บที่ให้บริการในเรื่องของภาพนะคะ Service ให้บริการเรื่องภาพ หรือว่าขายภาพนะคะ พวกถ่ายรูปแล้วก็เอาลงขายนะคะ หรือ Web Service อีกตัวหนึ่ง อย่างเช่น เว็บไซต์ Go To Know พวกเราน่าจะคุ้นเคยกันดีนะคะ .org ก็จะมีการโพสต์บทความ ความรู้ต่าง ๆ นะคะ บทความหรือว่าองค์ความรู้ต่าง ๆ ที่ใคร ที่พบองค์ความรู้ ก็จะเอามาแชร์นะคะ ให้บริการในเรื่องของ การแชร์บทความนะคะ ซึ่งในการพัฒนา เว็บไซต์ นะคะ แต่ละยุคแต่ละสมัยนี่ ก็จะมีภาษาหรือว่าตัวโปรแกรม ที่ใช้ในการพัฒนาเว็บนะคะ ก็จะมีฐานข้อมูล มีไฟล์นะคะ รวมเป็นเนื้อหาเลยว่า รูปแบบเนื้อหาต่าง ๆ ซึ่่งในการออกแบบนี่ ก็บางเว็บไซต์ ก็ใช้ตัว CMS นะคะ หรือว่าตัวที่พัฒนาเว็บ สำเร็จรูปนะคะ หรือจะสร้างเว็บแบบ ถ้าเว็บแบบธรรมดานี่ ก็ใช้พวกไฟล์ PDF, HTML ไฟล์ Text ธรรมดานะคะ ถ้าเป็น Web Dynamic ก็จะใช้ ภาษา PHP, ASP, Python นะคะ JavaScript ต่าง ๆ นะคะ หรือจะใช้ WordPress นะคะ Joomla! นะคะ ตัว CMS นี่ พวก WordPress, Joomla, Drupal ตัวที่นิยมมากที่สุดก็คือ WordPress ณ ปัจจุบันนะคะ เว็บไซต์ทั่วโลกนี่ ประมาณ 60 เกือบ 60 เปอร์เซ็นต์นี่ ใช้ WordPress ใช้ WordPress เพราะว่าไม่ต้องมีความรู้ เรื่อง Coding ไม่ต้องมีความรู้เรื่องเขียนโปรแกรม ก็สามารถสร้างเว็บไซต์ได้นะคะ ซึ่งเราจะประยุกต์ใช้ ตัว WordPress นี่นะคะ มาสร้างเว็บนะคะ ก็คือ WordPress จะให้แน่นไปเลย จริง ๆ WordPress นี่ ถ้าเจาะลึก เรียนแบบอันนั้นจริง ๆ รู้ลึกจริง ๆ เราสามารถไปรับจ้างทำเว็บนะคะ ไปรับจ้างทำเว็บได้ หลาย ๆ องค์กร ที่ใช้ WordPress ในการสร้าง หรือว่ารับจ้างออกแบบเว็บไซต์ สร้างเว็บไซต์นะคะ ถ้าเราเก่งทาง WordPress นี่ เราก็สามารถไปทำงานในองค์กร ในหน่วยงานนั้นได้ หรือเป็นฟรีแลนซ์ เป็นผู้รับจ้างอิสระนะคะ ตอนนี้ครูตามโรงเรียนนะคะ ต้องการคนเก่ง WorldPress เพราะเขาอยากจะเอาผลงานของเขา ขึ้นเว็บนะคะ จะทำอย่างไรนะคะ อยากให้ผลงานตัวเองขึ้นเว็บ โชว์ขึ้นเว็บนะคะ ถ้าเราเป็น WordPress นี่ เราสามารถรับงานนั้นมานะคะ ทำได้ ก็ได้เงินนะคะ โดยที่ไม่ต้องมานั่งเขียนโปรแกรม ให้ยุ่งยากนะคะ แค่เอาเนื้อหา ออกแบบเนื้อหาดี ๆ แล้วก็เอาใส่นะคะ เรียนรู้ไม่ยากเลยนะคะ เพราะว่าตัว WordPress ก็ทำมาจาก...พัฒนามาจาก HTML พัฒนามาจาก PHP ใช้ PHP ในการออกแบบ นะคะ มีทั้งระบบของ Admin และก็ระบบของ User หรือว่าที่เขาเรียกว่า “ระบบหลังบ้าน - หน้าบ้าน” หลังบ้านจะเป็นส่วนของผู้ดูแลระบบ หน้าบ้านจะเป็นส่วนของผู้ใช้ทั่วไปนะคะ เราสามารถจัดการได้ง่ายเลยนะคะ ทีนี้ลักษณะภาษา Script นะคะ ภาษา Script ที่ใช้ในการพัฒนาโปรแกรม อย่างที่อาจารย์บอกไปว่า ตัวที่ทำงานฝั่งเครื่องผู้ใช้ หรือว่า เรียกว่า “Client Side Script” นะคะ คือภาษาที่ทำงาน อยู่บนเครื่องผู้ใช้นะคะ อย่างยกตัวอย่างไปเมื่อกี้ HTML นะคะ เราสามารถเขียน HTML โดยที่ไม่ต้องมีSever ก็ได้นะคะ อันนี้คือทำงานบนเครื่องผู้ใช้ HTML, JavaScript นะคะ VB Script, Js Script, JScript นะคะ ส่วนภาษา Script ที่ทำงานหรือประมวลผล ที่ฝั่งเครื่องผู้ให้บริการ ก็อย่างเช่น พวก CGI พวก ASP นะคะ ASP.net ตระกูล .net ทั้งหลายนะคะ PHP นะคะ Python พวกนี้จะทำงานฝั่ง Server ซึ่งถ้าจะเขียนภาษาเหล่านี้ เราจะต้องติดตั้ง Web Server นะคะ ก็คือติดตั้ง AppServe ติดตั้ง XAMPP นะคะ เอาไว้ในเครื่องของเรา ก็คือทำให้เครื่องของเรานี่ เป็นทั้งเครื่องผู้ให้บริการ และเครื่องผู้ใช้บริการนะคะ ทีนี้ Web Site Dynamic นะคะ จะต้องมีฐานข้อมูลนะคะ ซึ่งโปรแกรมที่นิยม ใช้โปรแกรมฐานข้อมูล ที่นิยมใช้บนเว็บนี่ ก็จะมี MySQL นะคะ MySQL Access ก็ใช้ได้ แต่ว่าก็ขึ้นอยู่กับภาษานะคะ ขึ้นอยู่กับภาษา ถ้าเราใช้ PHP ก็จะใช้ MySQL ถ้าใครใช้ ASP ก็จะใช้พวก Access นะคะ หรือ ASP.net ก็จะเป็น SQL Server นะคะ ถ้าเป็น Database Server ก็จะเป็นของ Linux นะคะ เครื่องมือที่ใช้ในการตกแต่งกราฟิก สำหรับเว็บนะคะ ในการพัฒนาเว็บ ต้องอาศัยกราฟิกด้วยนะคะ ก็ต้องเก่ง Photoshop คือไม่ต้องเก่งหรอก แค่ออกแบบได้นะคะ แต่ถ้าเราฝึกเรื่อย ๆ ก็อาจจะทำให้เราเก่งนะคะ พวก Photoshop, Image Ready, Illustrator นะคะ พวกตระกูล Adobe ทั้งหลาย เอามาใช้ในการออกแบบ พวก Flash นะคะ ในการทำตัวภาพเคลื่อนไหวนะคะ พวกนี้ก็ทำ Anmiation นะคะ พวก Macromedia Flash นะคะ Switch ทีนี้มาดูโปรแกรม Editor ที่ใช้ในการพัฒนาเว็บนะคะ Editor ก็คือ เครื่องมือนะคะ เครื่องมือที่เอามาเขียน เอามาเขียนเว็บนะคะ Editor ที่ใช้บ่อย ในนี้ อาจารย์อาจจะไม่ได้เอามาใส่นะคะ พวกโปรแกรม Dreamweaver ก็ใช้ได้นะคะ แต่อันนี้ถ้าเป็น Coding จริง ๆ นะคะ แบบว่าเริ่มเขียน ตั้งแต่บรรทัดแรกเลยนี่ ก็คือพวก EditPlus นะคะ ASP, EditPlus, Web Metrics, Visual Studio.net แล้วส่วนของ Python นี่ มันจะมีให้ติดตั้งเครื่องมือ เยอะแยะเลยใช่ไหมคะ Python ให้เราติดตั้ังอะไร ใช้ Editor ตัวไหนคะ Python นี่เรียนเทอมไหน ปี 1 เทอม 2 ใช่หรือเปล่า ลืมหรือยัง แล้วเทอมที่แล้ว ปี 2 เทอม 1 ภาษา เขียนโปรแกรมภาษาคอมพิวเตอร์ ก็ใช้ Python เหมือนกันใช่ไหมคะ Python หมดเลย แล้วมีลงอะไรบ้าง ลงโปรแกรมอะไรบ้างของ Python จำได้เปล่า Anaconda ได้ลงไหม มันก็มีหลายตัวนะคะ ใช้หลายตัว อันนั้นก็เป็น Editor ของการพัฒนา Python นะคะ มีพวก NetBeans ก็ใช้เขียนพวก Java นะคะ JSP EditPlus แต่ปัจจุบันนี้ก็จะมีตัวใหม่ ๆ นะคะ ที่เขียน Code ที่เขานิยมใช้ เดี๋ยวเราค่อยไปดูอีกทีหนึ่งนะคะ ว่าเราก็ไม่ได้เน้น Coding แต่เราใช้ WordPress แต่เราก็ควรรู้ไว้ว่า ถ้าเราจะเขียน PHP นะคะ เขียน Java, HTML หรือต้องมีโปรแกรมอะไรบ้างนะคะ ที่มันเขียนง่ายนะคะ เวลาเราพิมพ์ไปแล้วมันจะมีคำสั่งให้ ก็เขียนได้รวดเร็วนะคะ อันนี้เป็นเทคโนโลยี ในการพัฒนาเว็บ Application นะคะ ก็จะมี Common Gateway Interface ตัวที่ใช้งานกับ User นะคะ อันนี้เขียนภาษา C, C++ นะคะ เทคโนโลยี ASP, PHP นะคะ อันนี้ก็คือตัวที่ใช้พัฒนา Web Application นะคะ ก็คือตัวที่ทำงานฝั่ง Server นะคะ แนวทางในการพัฒนาเว็บไซต์นะคะ ใครที่จะเขียนเว็บไซต์ขึ้นมาเองนี่ จะต้องมีเครื่องมือ ประเภทที่เป็น Text Editor นะคะ เรียนรู้ NetBeans เรียนรู้ EditPlus นะคะ แล้วก็ทราบเครื่องมือ ที่ช่วยสร้างเว็บแบบสำเร็จรูปนะคะ พวก Web Builder ก็อย่างเช่น พวก Macromedia Dreamweaver พวกเราเคยใช้ Dreamweaver ไหมคะ เคยใช้มาไหม ตอนอยู่มัธยม ไม่เคย Macromedia Dreamwaver ก็จะมีการพัฒนาแต่ละเวอร์ชัน มาเรื่อย ๆ นะคะ บางเวอร์ชันก็ง่าย จับลากวางเลย อันนี้ก็ไม่ต้องเขียนเยอะ ก็เขียนนิดหน่อย อย่างเช่น คำสั่งในการเชื่อมต่อ กับฐานข้อมูลนะคะ แต่เชื่อมต่อกับฐานข้อมูล บางทีก็ไม่ได้เขียน ลากเลยนะคะ คลิก ใช้เมาส์คลิกนะคะ ไม่ได้เขียนเยอะนะคะ Microsoft Visual Studio นะคะ ใครที่ถนัดทางด้านภาษา C นะคะ C++, C# พวกนี้นะคะ หรือจะใช้ระบบ CMS ก็คือ Content Management System ก็คือตัวที่จัดการเนื้อหานะคะ จัดการเนื้อหาอย่างเช่น WorldPress นะคะ Mambo, Joomla นะคะ Drupal แต่ว่าตัวที่ใช้มากที่สุดนะคะ ก็คือ WordPress นะคะ เพราะว่ามี Design ที่สวยงาม ใช้งานง่ายนะคะ เราสามารถที่จะจัดการเมนู จัดการ Site Bar นะคะ ก็คือในหน้าเว็บนี่ เราสามารถที่จะจัดการได้ โดยที่เราไม่ต้องเขียนโปรแกรมนะคะ ทีนี้มาตรฐานในการพัฒนาเว็บนะคะ ซึ่งเราจะต้องรู้ว่า ในการพัฒนาเว็บนี่ จะต้องมีมาตรฐานอะไร ที่สามารถรองรับเว็บไซต์เรานะคะ ซึ่งเทคโนโลยีนี่ จะถูกกำหนดขึ้น เพื่อให้ใช้งาน Web Browserได้นะคะ ทุก ๆ ค่าย ทุก ๆ บริษัทนะคะ ทุก ๆ หน่วยงานนะคะ จะต้องสามารถรองรับเทคโนโลยี ที่ใช้ร่วมกันได้ ก็คือจะให้เป็นมาตรฐานหลัก เป็นมาตรฐานเดียวกัน สามารถเปิดใช้งานหน้าเอกสารเว็บไซต์ ได้อย่างมีประสิทธิภาพนะคะ โดยจะมีเทคโนโลยีที่เป็น HTML ที่เป็น W3 นะคะ W3C นะคะ ก็คือตัว Web Standard จะมี 2 มาตรฐานนะคะ ตัวแรกก็คือ W3C W3C ก็คือมาจาก W3 ก็คือ World Wide Web นะคะ นะคะ World Wide Web อันนี้เป็นมาตรฐาน ที่องค์กรระหว่างประเทศนะคะ ได้ทำงาน ทางด้านการพัฒนาเทคโนโลยีเว็บ จะมีอยู่ 3 สถาบัน ก็คือ MIT ในสหรัฐอเมริกา แล้วก็ Inria ในยุโรป นะคะ และ Keio University ในญี่ปุ่น นะคะ ซึ่งตัวนี้เป็นมาตรฐาน ที่รองรับกันทั่วโลกนะคะ ซึ่งมาตรฐานของ W3C นะคะ ก็จะมี HTML5 มี CSS3 นะคะ แล้วก็มี DOM นะคะ ซึ่ง HTML5 นะคะ ก็คือภาษาที่แสดงเอกสารหน้าเว็บนะคะ ตัวนี้ก็จะมีเทคโนโลยีใหม่ ๆ เข้ามา การรองรับการสร้างเอกสารนะคะ ที่ออกแบบได้ แสดงผลได้ทุก ๆ เครื่อง ทุก ๆ ระบบปฏิบัติการนะคะ หรือทุก ๆ มุมมอง อย่างเช่น แสดงผลในหน้าจอมือถือนะคะ เราทำเว็บไซต์ขึ้นมาแล้ว เวลาที่ดูผลลัพธ์ของหน้าเว็บ ผ่านมือถือนี่นะคะ มันก็จะถูกย่อนะคะ อันนี้คือใช้มาตรฐาน W3C นะคะ ซึ่งใช้ HTML5 ในการพัฒนานะคะ แล้วก็ CSS3 ตัว CSS3 นี่ ก็คือตัวที่จัดรูปแบบ ให้หน้าเว็บของเราดูสวยงาม การใส่สีนะคะ ใส่สีพื้น การจัดขอบข้อความอะไรต่าง ๆ นะคะ ก็คือการจัดให้เอกสารเรา มีความสวยงามนะคะ เป็นสัดส่วน แล้วก็ DOM หรือว่า Document Object Model อันนี้เป็นภาษา ที่บริหารจัดการการแสดงผลนะคะ บริหารจัดการการแสดงผล ก็คือแสดงผลบนหน้าจอนะคะ ว่ามันแสดงผล บน Windows หรือแสดงผลบน Mac นะคะ หรือ OS ต่าง ๆ เพราะฉะนั้น ทุกเว็บไซต์นะคะ ก็จะใช้มาตรฐาน W3C ถ้าหากเว็บไหน ที่ไม่ได้ใช้มาตรฐานนี้ เวลาแสดงผลต่างกัน ต่างหน้าจอ ต่างเครื่อง ต่างอุปกรณ์นะคะ มันก็จะไม่มีประสิทธิภาพ ในการแสดงผลนะคะ มาตรฐานที่ 2 นะคะ ก็คือ E-C-M-A หรืออ่านว่า ECMA นะคะ ECMA เป็นมาตรฐานของทางด้านยุโรป European Computer Manufacturers Association Standard อันนี้เป็นการกำหนดมาตรฐานของสารสนเทศ และการสื่อสารทางเทคโนโลยี หรือว่าทางด้าน ICT นะคะ ก็จะมีในเรื่องของการแสดงผล ของ JavaScript นะคะ JavaScript กับ DOM แล้วก็พวกเครื่องใช้ไฟฟ้านะคะ อันนี้คือทางด้านมาตรฐาน ทางด้าน ICT นะคะ การใช้ JavaScript แล้วก็มาตรฐาน ของเครื่องใช้ไฟฟ้านะคะ ประโยชน์ของมาตรฐานของเว็บนะคะ ก็คือประโยชน์อันแรก ก็คือ ด้านของการเข้าถึงตัวข้อมูลนะคะ ผู้ใช้สามารถเข้าถึงตัวข้อมูลนี้ได้ อย่างรวดเร็ว มีประสิทธิภาพ แล้วก็ตรงตามความต้องการนะคะ แล้วก็ด้านความเสถียรภาพนะคะ ความยืดหยุ่นในการแสดงผลนะคะ ไม่ว่าเราจะดูเว็บไซต์ ผ่านอุปกรณ์ตัวไหนนะคะ มันก็จะมีการจัดหน้านะคะ เขาเรียกว่าอะไรล่ะ ดูผ่านหน้าจอคอมฯ มันก็จะเต็มรูปแบบ ดูผ่านหน้าจอมือถือ หรือผ่าน Tablet นะคะ มันก็จะแสดงผลได้เหมาะสมนะคะ มาตรฐานการพัฒนาเว็บไซต์ สำหรับเว็บต่าง ๆ นี่ เราสามารถเข้าไปดูที่ มาตรฐานเว็บไซต์องภาครัฐได้นะคะ ซึ่งจะมีประกาศนะคะ จะมีประกาศออกมาของรัฐนะคะ อันนี้ก็เป็นเว็บไซต์ของภาครัฐ สำนักงานพัฒนารัฐบาลดิจิทัลนะคะ อันนี้ก็เป็นมาตรฐานเว็บไซต์ภาครัฐ ซึ่ง จำง่าย ๆ ก็คือ ที่เดียว ทันใด ทั่วไทย ทุกเวลา ทั่วถึง เท่าเทียม และธรรมาภิบาลนะคะ เว็บไซต์ที่สร้างมา จะต้องมีเอกลักษณ์โดดเด่นนะคะ ทันทีทันใดนะคะ ไม่ว่าอยู่ที่ไหนนะคะ ก็สามารถเข้าถึงได้นะคะ เราสามารถที่จะเข้าไปอ่าน แล้วก็ศึกษาข้อมูล มาตรฐานเว็บไซต์ของภาครัฐได้นะคะ ซึ่งก็จะมีการอัปเดต ในฐานะที่เรานี่จะสร้างเว็บไซต์นะคะ จะต้องรู้จักมาตรฐาน รัฐบาลดิจิทัลนะคะ อาจจะมีกฎระเบียบนะคะ มี พรบ. การบริหาร และการให้บริการนะคะ ซึ่งเราสามารถที่จะเข้ามาเรียนรู้ ที่ชื่อเว็บไซต์ dga.or.th หรือจะพิมพ์คำว่า มาตรฐานเว็บไซต์ภาครัฐนะคะ เวลาที่เราทำ ออกแบบเว็บไซต์ของรัฐนะคะ เวลาที่เราออกแบบเว็บไซต์ของรัฐนี่ เราจะต้องเรียนรู้ข้อมูลตัวนี้ด้วย ก็จะมีบทความ มีความรู้ต่าง ๆ เรื่องของ Block Chain นะคะ เรื่องของปัญญาประดิษฐ์ หรือ AI ก็จะมีความรู้เพิ่มเติมนะคะ ในเรื่องตัวนั้น เหล่านั้นนะ โอ.เค. ถึงสไลด์สุดท้ายแล้วนะคะ พวกเราได้เรียนรู้ทฤษฎีตรงนี้ ไม่ทราบว่าซึมซับบ้างไหมคะ มีคำถามไหม ไม่มี แต่อาจารย์จะมีคำถามนะคะ มีคำถาม มีแบบฝึกหัดท้ายบทเรียนให้พวกเรา แต่ก่อนอื่นนี่ ก่อนที่อาจารย์จะเอาแบบฝึกหัด แบบฝึกหัดจะให้ทำบน Classroom นะคะ ใส่ที่ Classroom แต่ก่อนที่จะไปดูแบบฝึกหัดนี่ จะให้เช็ก อยากให้พวกเราตรวจเช็กดูว่า เครื่องของเรานี่ มีการติดตั้ง Web Server หรือยัง ซึ่งเราจะใช้ Web Server ที่ชื่อว่า “XAMPP” นะคะ โดยแต่ละคนนี่นะคะ เข้าไปค้นที่ Search ดูนะคะ ถ้าหากขึ้นแบบนี้ แสดงว่า เครื่องได้จำลอง เป็น Web Server แล้ว นะคะ ว่าเครื่องเรา ได้จำลองเป็น Web Server แล้ว มีเครื่องไหนที่ไม่มีตัวนี้บ้าง ไม่มี เครื่องสุรเชษฐ์ไม่มี 1 เครื่อง เครื่องไหนอีกคะ ดูนะคะ X-A-M-P-P ก็คือเราจะใช้ WordPress ใช่ไหมคะ ถ้าหากว่าไม่มีตัวนี้นะคะ ถ้าไม่มีตัวนี้นี่ เราจะใช้งาน WordPress ไม่ได้ แต่ว่าเครื่องอาจารย์ จะต้องได้ลงใหม่แล้ว สุรเชษฐ์จะนั่งเครื่องนั้น ประจำใช่ไหมคะ ถ้ามีแบบนี้นะคะ ใช้ได้ แต่ว่าถ้าขึ้นตัวแดง ถ้าขึ้นตัวแดง ๆ เดี๋ยวเรากด Start ดูนะคะ Start Apache กับ MySQL Start 2 ตัว MySQL ถ้าใครขึ้นสีแดง นี้ขึ้นสีแดงไหม จะต้องได้ติดตั้งใหม่ กลัวว่าจะมีปัญหาตอนที่ดึงข้อมูล จากฐานข้อมูลนะคะ อันนี้ MySQL Start แดงทั้งหมดเลยหรอ อย่างนี้จะต้องลงใหม่ มันมี Error Stop ไป จริง ๆ สถานะมันจะต้องไม่แดงนะคะ ทั้งสองอันเลย ใช่ค่ะ เราจะใช้แค่ตัว Apache นะคะ กับ MySQL เพราะว่าสัปดาห์หน้า เราน่าจะได้ลงมือใช้ WordPress อันนี้ XAMPP เวอร์ชัน 3.2 ถ้าอย่างนั้น เดี๋ยวเราไปดาวน์โหลด เวอร์ชันใหม่มาลงนะคะ แต่ว่าเราจะต้องไป Uninstall ตัวเดิมออกก่อนนะคะ Uninstall ออกเลย เราพิมพ์เข้าไปที่ ตัว Search Windows เห็นไหมคะ จะได้ไม่ต้องค้นหาเยอะ ถ้าเห็นปุ่ม Uninstall เราก็กดเลยค่ะ Uninstall ออกไปก่อน เดี๋ยวเราค่อยโหลดตัวใหม่มาลง Uninstall ลบโปรแกรมออกจากเครื่อง เข้าไปเลื่อนหาโปรแกรมนะคะ ชื่อโปรแกรมแล้วก็กด Uninstall มันจะถามเราอีกรอบว่า คุณต้องการลบโปรแกรม XAMPP ออก ต้องการไหม กด Yes มาขั้นตอนนี้หรือยัง มาขั้นตอนนี้หรือยัง ใครไม่ทันยกมือนะคะ Remove ออกด้วยนะคะ Remove Folder ถามก่อน วิชาอื่นมันมีงานตรงนี้หรือเปล่า ยังไม่มีนะ โอ.เค. ตกใจ นึกว่าวิชาอื่นได้ใช้ กด Yes เลยนะ อย่างนั้นวิชานี้เราจอง เราลบใหม่ เพราะถ้าไม่ลบ เดี๋ยวข้อมูลเดิม จะมีเยอะเลย เพียบเลย ไม่รู้ว่าข้อมูลเดิมที่อาจารย์เคยสอน เมื่อปีที่แล้วยังอยู่หรือเปล่า ลบทิ้งไปเลยนะคะ เดี๋ยวรอสักครู่ รอให้มันลบโปรแกรม ลบโมดูลต่าง ๆ ออกจากเครื่องให้หมด เราจะได้เอาเวอร์ชันใหม่มาลง จะได้เรียนรู้ในการติดตั้งเองด้วย เผื่อจะเอาไปติดตั้ง ที่เครื่องโน้ตบุ๊กของตัวเองนะคะ เห็นไหม ข้อมูลเยอะ ก็เลยใช้เวลานานในการลบนะคะ ระหว่างรอให้โปรแกรมมันลบไปนี่ ไปเบรกได้นะคะ ไปเบรกเข้าห้องน้ำ ไปพักเบรกได้นะคะ เดี๋ยวอาจารย์ล่ามไปพักเบรกก็ได้ สัก 5 นาที เครื่องไหน Uninstall Complete แล้ว หรือว่าสมบูรณ์แล้ว ก็ไป ดาวน์โหลด XAMPP for Windowns มานะคะ โอ.เค. นะคะ กดดาวน์โหลดได้เลย แล้วก็ดูที่แถบด้านล่างนะคะ Status Bar รอประมาณ 1 นาที กดดาวน์โหลดเลยค่ะ ตรงนี้นะคะ ดาวน์โหลด XAMPP for Windows หน้านี้ใช่ไหมคะ มันจะโหลดให้เราแล้ว เราดูที่ Status Bar ด้านล่างนะคะ โหลดประมาณ 1 นาที ตัวนี้ใช่ไหมคะ กดหรือยัง ค่ะ ค่ะเลือกตัวแรก For Windows ตัวนี้สถานะดาวน์โหลด มันบอกว่า Download Accept ใครที่ยังดาวน์โหลดไม่เสร็จ รอ โหลดเสร็จแล้วนะคะ ดับเบิลคลิกไปที่ไฟล์ .exe มันถามอะไร เรากด OK ไปเลยนะ แล้วก็ตรงนี้กด Next ไปนะคะ อันนี้ก็เลือกหมดเลย กด Next เผื่ออนาคตเราจะเขียนตัวอื่น กด Next ถ้ามันขึ้นแบบนี้ แสดงว่า ใน Disk C มันมีโฟลเดอร์ซ้ำนะคะ เราไปที่ Disk C แล้วก็ไปลบโฟลเดอร์เดิมออกนะคะ ใช่ค่ะ ลบเลยค่ะ กด Delete ไปเลย ค่ะ แล้วก็ Next นะคะ อันนี้เอาเครื่องหมายถูกออก เพราะว่าเวลาติดตั้งเสร็จ เราจะได้ไม่ต้องวิ่งเข้าลิงก์นี้นะคะ เราไม่เข้าไปดู กด Next ไป Next ไป แล้วก็รอนะคะ เครื่องไหน ที่ติดตั้งสมบูรณ์แล้วนะคะ กดที่ปุ่ม Finish หรือเสร็จสิ้นได้เลย เดี๋ยวเราค่อยหาวิธีแก้ตัวนี้นะคะ ที่มัน Error เดี๋ยวเราไปกด Start ตัว Apache กับ MySQL ตอนนี้ MySQL อาจารย์ ยัง Start ไม่ได้ แต่ว่า Server ใช้ได้ ทีนี่ทดลองการใช้งาน Server นะคะ กด Start เสร็จแล้วไปพิมพ์ Localhost ที่ Web Browser นะคะ พิมพ์ Localhost ที่ Web Browser ถ้าหากว่าโชว์หน้าจอแบบนี้ แสดงว่า Web Server ของเรานี่ ทำงานได้แล้ว นี่ค่ะ พิมพ์ลงไปที่... พิมพ์เข้าไปที่ Site Bar ตรงนี้นะคะ ไม่ได้ไปพิมพ์ใน Google ค้นหานะคะ เราพิมพ์ Localhost นะคะ Localhost พิมพ์แบบนี้ ไม่ได้ไปให้ค้นหานะ ให้ไปพิมพ์ที่ช่องนี้เลยนะคะ URL นี่นะคะ พิมพ์ Localhost แล้วกด Enter นะคะ ได้ไหมคะ ถ้าพิพม์แล้ว กด Enter จะโชว์หน้า Web Page แบบนี้นะคะ อันนี้ คือ แสดงว่า Server ของเราพร้อมใช้งานแล้ว นะคะ เราติดตั้งเครื่องไหน เราก็จะได้นั่งประจำเครื่องนั้นนะ เครื่องไหนที่เพื่อนไม่มา ก็ลงไว้ด้วยนะคะ หน้าจอนี้เป็นการทดลอง Server นะคะ ว่า Server ของเรา พร้อมใช้งานไหมนะคะ ถ้าหากว่าขึ้นแบบนี้ แสดงว่า Server ของเราพร้อมใช้งานแล้วนะคะ เดี๋ยวพุธหน้านี่ เราจะติดตั้ง WordPress นะคะ ติดตั้ง WordPress ทีนี้ จะมีแบบฝึกหัดสำหรับวันนี้นะคะ มีใครที่ยังไม่เข้า Classroom บ้าง มีไหมคะ อันนี้รหัสเข้าชั้นเรียนนะคะ ใครที่ยังไม่เข้าก็ใช้รหัสนี้ได้เลย กำหนดส่งนะคะ วัน... ภายในวันศุกร์ โอ.เค. ไหม ส่งภายในวันศุกร์นะคะ ส่งไม่ทันโดนตัดคะแนน คือส่งช้าน่ะ ส่งได้ แต่ว่าจะขึ้นว่าส่งล่าช้านะคะ โอ.เค. พวกเรา สามารถเปิดไฟล์ดูโจทย์คำถามนะคะ แล้วก็สร้างไฟล์ตัวเอง ขึ้นมาใหม่นะคะ แล้วบันทึกเป็น PDF ตั้งชื่อเป็นรหัสนักศึกษา แล้วก็กดส่งนะคะ โหลดมาแล้ว อย่าลืมกดส่งด้วยนะคะ เพราะฉะนั้น มันจะไม่ขึ้นสถานะว่าส่งงาน มีทั้งหมด 10 ข้อนะคะ เห็นโจทย์อยู่ใช่ไหม โอ.เค. ค่ะ ตามนั้นนะคะ มีคำถามไหม สำหรับคาบนี้ ตัว XAMPP นี่นะคะ เราทดสอบแล้ว โอ.เค. แล้ว ก็กด Stop Server นะคะ กด Stop Server หรือหยุดการทำงานของ Server ตอนนี้เรายังไม่ได้ใช้ Server ตัวนี้นะคะ เดี๋ยวสัปดาห์หน้านี่ เราค่อยมาเริ่มใช้ แล้วก็ติดตั้ง WordPress มีเครื่องไหน ที่ยังลงไม่เรียบร้อยบ้าง เครื่องหน้าใช่ไหม มีข้อสงสัย หรือคำถามเพิ่มเติมไหมคะ ใครมีข้อสงสัยไหม ยกมือถาม ไม่มีนะคะ ถ้าไม่มีคำถาม เดี๋ยวเราเจอกัน วิชานี้เจอกันพุธหน้านะคะ แล้วก็กราฟิกเจอกันจันทร์หน้า ค่ะ โอ.เค. อย่างนั้น คาบนี้พอกันแค่นี้ค่ะ ขอบคุณค่ะ [สิ้นสุดการถอดความ]