(อาจารย์)สวัสดีค่ะสวัสดีค่ะ(นักศึกษา)ทั้งหมดทำความเคารๆ(พ)สวัสดีค่ะ/ครับ(อาจารย์)สวัสดีค่ะยินดีต้อนรับเข้าสู่รายวิชาการเขียนโปรแกรมบนเว็บนะคะเจอกันเช้าวันพุธเดี๋ยวขอเช็กความพร้อมของพวกเราทุกคนก่อนนะคะโอ.เค.นะคนแรกมาหรือยังคนแรกชา(ฌ)ริกาญจน์อชิรญาส(ศ)ิริชัยปิชาฎากาญจนานันท์สินีสุรเชษฐ์ทานข้าวอิ่มแล้วใช่ไหมคะนิลวรรณวินิจจุท(ฑ)ามาศพ(ภ)ิษ(ส)ิทธิ์คมกฤษโสภิดาอรสาเสาวลักษณ์กาญจนสิริยังไม่มานะคะเพื่อนไปไหนหนว(อ)ร(ว)ร(ั)ณ(น)วิสาข์วิภาพ(ภ)รณ์ภ(พ)ัชราภาณัฐสุดาจตุรพรโอ.เค.อรสากาญจนสิริหายไปไหนเอ่ยยังไม่มานะคะโอ.เค.นะคะก่อนที่เราจะเริ่มการปฏิบัติในเรื่องของการเขียนโปรแกรมบนเว็บนะคะเดี๋ยวเราจะต้องมาเรียนรู้พื้นฐานนะคะทฤษฎีที่เกี่ยวข้องนะคะกับการเขียนโปรแกรมบนเว็บนะคะแต่อาจารย์เคยพูดกับพวกเราเคยบอกกับพวกเราว่าจะให้ประยุกต์ใช้ตัวwordpressในการสร้างเว็บไซต์นะคะเพราะว่ามันจะได้ไม่ยุ่งยากนะคะเราอยู่ฝ่(ส)ายitเราต้องประยุกต์ตัวที่เป็นเว็บสำเร็จรูปนต(ะ)ั(ค)ว(ะ)ที่เป็นcmsนะคะแต่ว่าเราจะต้องเรียนรู้นะคะในส่วนของทฤษฎีที่เกี่ยวข้องกับการเขียนโปรแกรมนะคะแต่จะได้ฝึกนิดหน่อยในเรื่องของภาษาhtmlนะคะในการพัฒนาเว็บนะคะในการออกแบบเนื้อหานะคะโดยใช้htmlนะคะเดี๋ยวถามพวกเราก่อนว่าเทอมก่อนหน้าเรียนหลักการเขียนโปรแกรมมาใช่ไหมคะใช่ไหมหลักการเขียนโปรแกรมแล้วก็ภาษาคอมพิวเตอร์ใช่ไหมคะการเขียนโปรแกรมภาษาคอมพิวเตอร์หลักการเขียนโปรแกรมนี่เราได้ใช่(้)ภาษาอะไรในการฝึกเขียนโปรแกรมจำได้ไหมคะใช้อะไรนะคะใช้pythonว้าวนะคะและก็ต่อจากหลักการเขียนโปรแกรมจะมีวิชาหนึ่งกห(็)ล(ค)ั(ื)ก(อ)การเขียนโปรแกรมคอมพิวเตอร์ใช้pythonเหมือนกันหรือเปล่าคะแสดงว่าเรียนphython2เทอมเลยใช่ไหมคะแสดงว่าห้องนี้แน่นpython[เสียงหัวเราะ](อาจารย์)โอ.เคเพราะฉะนั้นเราเรียนหลักการเขียนโปรแกรมมานะคะเรียน...การเขียนโปรแกรมภาษาคอมพิวเตอร์มาแล้วนะคะในส่วนของการเขียนโปรแกรมบนเว็บนี่ก็จะมีหลายๆภาษานะคะที่เราจะเอามาประยุกต์นะคะแต่ว่าเราจะเน้นภาษาใดภาษาหนึ่งนะคะเดี๋ยวเรามาดูทฤษฎีการเขียนโปรแกรมบนเว็บแล้วกะ(็)มาตรฐานต่างๆที่เกี่ยวข้องนะคะกับเว็บไซต์นะคะโดยหัวข้อในส่วนนี้นี่นะคะก็จะมาดูเรื่องของหลักการทำงานของworldwidewe.(b)ซึ่งเราคุ้นอยู่แล้วใช่ไหมคะworldwidewebแล้วก็ประเภทของโปรแกรมบนเว็บนะคะความรู้ทั่วไปเกี่ยวกับการออกแบบเว็บแล้วก็ยุคของการพัฒนาเว็บไซต์นะคะแล้วก็มาตรฐานในการพัฒนาเว็บไซต์นะคะมาดูลักษณะของการเขียนโปรแกรมโอ.เค.นะคะต่อนะเรามาดูลักษณะของการเขียนโปรแกรมนะคะซึ่งเราเรียนเขียนโปรแกรมมาแล้วใช่ไหมคะหลักการเขียนโปรแกรมการเขียนโปรแกรมภาษาคอมพิวเตอบ(ร)น(์)ซึ่งลักษณะของการเขียนโปรแกรมนี่จะมีการโปรแกรมบนwindowsที่เรว(า)ิ(เ)น(ร)โ(ี)ด(ย)ว(น)วิชาการเขียนโปรแกรมภาษาคอมพิวเตอร์อันนั้นเป็นการเขียนโปรแกรมบนwindowsนะคะอีกตัวหนึ่งคือการเขียนโปรแกรมบนเว็บนะคะก็คือการเขียนโปรแกรมบนเว็บก็คือการแสดงผลของโปรแกรมที่อยู่บนเว(w)็(e)บ(b)เ(b)บ(r)ร(o)า(w)ว(s)์(e)เ(r)ซ(น)อ(ะ)ร(ค)์(ะ)ซึ่งผู้ใช้นี้สามารถที่จะเข้าถึงได้ผ่านเครือข่ายอินเทอร์เน็ตทีนี้จะขอถามพวกเราว่าเว็บเบ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)นี่คืออะไรwebbrowserคืออะไรwebbrowserมีอะไรบ้างนะคะเดี๋ยวจะขอถามจะขอตั้งคำถามว่าwebbrownserได้แก่อะไรบ้างนะคะโดยอาจารย์จะสุ่มนะคะจะสุ่มว่าใครจะเป็นผู้ตอบคำถามสัก2คนหรื-(อ)3คนนะคะว่าwebbrownserได้แก่อะไรบ้างนะคะขอถามใครเอ่ยปายใช่ไหมคะปายปายคะปายช่วยตอบเ(ห)อ(น)่อย.(ว).(่).(า)ยกตัวอย่างหนึ่งตัวก็ได้นะคะwebbrowserได้แก่อะไรยกตัวอย่างมา1ตัว(ล่าม)เป็นเว็บไซต์ของร(ม)า(ห)ช(า)ภ(ว)ั(ิ)ฏ(ท)ส(ย)ก(า)ล((ั)ล(ย)่(ร)าม)(ช)เ(ภ)ป(ั)็(ฏ)น(ส)เ(ก)ว(ล)็(น)บ(ค)ไ(ร)ซ(ค)ต(่)์(ะ)ข(()องม(า)ห(จ)าว(ร)ิ(ย)ท(์)ย())า(ล)ล(อ)ั(ง)ยค(ก)่(ต)ะ(ั)((ว)อา(ย)จ(่)ารย์)(ง)ตัวที่เป็นเว็บ(w)บ(e)ร(b)า(b)ว(r)เ(o)ซ(w)อ(s)ร(e)์(r)ที่ตอบมามีส่วนถูกนะคะแต่ว่ายังไม่ร้อยเปอร์เซ็นต์เดี๋ยวใม(ห)ี(้)ตัวช่วยนะคะเดี๋ยวมีตัวช่วยวันนี้วันที่เท่าไรวันนี้วันที่11ตัวช่วยอยู่ใกล้ๆกันgooglechormeโอ.เค.นะคะตัวที่เป็นเว็บเบ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)นะคะจะมีgooglechrome,webbrowserก็คือตัวโปรแกรมที่เปิดดูเอกสารนะคะเปิดดูเอกสารที่อยู่บนเว็บไซต์นะคะตัวโปรแกรมที่ใช้ในการเปิดเอกสารเปิดเอกสารของเว็บไซต์นะคะซึ่งweเ(b)ว(b)็(r)บ(o)ไ(w)ซ(s)ต(e)์(r)ที่เราคุ้นเคยนะคะก็คือgooglechromeใช่ไหมคะถ้าเป็นเครื่องmacล่ะคะถ้าเป็นเครื่องmac,safal(r)iตัวนี้คือwebbrownserซึ่งโปรแต(ก)ั(ร)ว(ม)webbrownserนี่มีเยอะมากเลยใช่ไหมคะนอกจากgooglechrome,safariแล้วมีอะไรอีกคะมีfirefoxแล้วตัวที่ติดมากับตัวwindowsเลยคืออะไรคะที่ติดมากับmicrosoftเลยคืออะไรคะก็คือinternetexplorerใช่ไหมคะหรือตัวieใช่ไหมคะเพเพราะฉะนั้นตัวอันนี้พวกนี้เป็นตัวที่เราคุ้นเคยgooglechrome,firefox,safariนะคะinternetexplorerนะคะแต่ตัวที่ใช้เยอะที่สุดเว(น)็(ะ)บ(ค)เ(ะ)บ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)ที่ใช้เยอะที่สุดก็คือgooglechromeใช่ไหมคะเพราะว่าสามารถที่จะเปิดหรือsupportนะคะsupportหรือเข้ากับทุกๆโปรแกรมนะคะเข้ากับทุกๆpเ(a)พ(g)จ(e)นะคะที่เขาออกแบบนะคะเพราะฉะนั้นตัวgooglechromeนี่จะเป็นตัวที่นิยมใช่มด(า)ี(ก)ที่สุดนะคะและก็การแสดงผลดีที่สุดนะคะเพราะฉะนั้นถ้าเราจะเข้าถึงข้อมูลผ่านi(อ)n(ิ)t(น)e(เ)r(ท)n(อ)e(ร)t(์)เนร(็)า(ต)จะต้องผ่านโปรแกรมเว็บเบ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)นะคะทีนี่(้)มาดูหลักการทำงานของwก(o)า(r)ร(l)ท(d)ำ(w)ง(i)า(d)น(e)ข(w)อ(e)ง(b)นะคะworldwideweb,worldwidewebนี่นะคะจะมีอยู่2ส่วนนะคะมีอยู่2ส่วนก็คือส่วนที่เรียกว่า“ผู้ขอใช้บริการ”นะคะและผู้ให้บริการนะคะซึ่งเครื่องผู้ขอใช้บริการก็คือเครื่องที่เราใช่(้)อยู่นะคะซึ่งเครื่องที่เราใช้อยู่สามารถเป็นได้ทั้งผู้ขอใช้บริการและผู้ให้บริการนะคะหรือจะเรียกกันทา(ใ)ง(น)ศัพท์ทางคอมพิวเตอร์นี่ก็คือผู้ขอใช้บริการก็คือclia(e)ntนะคะและก็ผู้ให้บริการก็คือserverนะคะผู้ให้บริการหรือserverนี่ก็คือตัวที่กระจายข้อมูลนะคะตัวที่กระจายข้อมูลต่างๆหรือเวลาที่เราเขียนเว็บหรือเราสร้างเว็บนี้(่)เราจะต้องเอาข้อมูลของเรานี่ไปเก็บไว้ที่ที่serverนะคะเราจะต้องเอาข้อมูลทั้งหมดของเราไปเก็บไว้ที่serverเพื่อที่จะให้ผู้ขอใช้บริการต่างๆนี่เวลาเรีข(ย)อ(ก)ใช้ข้อมูลของเรานี่เขาก็จะดึงจากserverนี่ไปที่เครื่องของผู้ที(ข)่(อ)ใช้บริการนะคะเพราะฉะนั้นนี่worldwidewebนี่จะมีทั้งผู้ใช้บริการและผู้ให้บริการนะคะยกตัวอย่างอย่างเช่นการทำงานของตัวผู้ขอใช้บริการและผู้ให้บริการนะคะซึ่งจะแสดงในลักษณะของการใช้บริการงานพิมพ์นะคะเครื่องพิมพ์นี่เราสามารถขอใช้บริการเครื่องพิมพ์1เครื่องห(น)ร(ะ)ื(ค)อ(ะ)โดยผู้ขอใช้บริการนี่อาจจะหลายๆเครื่องก็ได้ใช่ไหมคะเราจะจะสังเกตเห็นว่าห้องทำงานต่างๆนี่จะมีเครื่องพิมพ์อยู่1เครื่องสมมุตินะคะและจะมีเครื่องของพนักงานนี่เป็นสิบๆเครื่องใช่ไหมคะแล้วแต่ละคนนะคะพนักงานแต่ละคนนี่สามารถที่จะใช้งานเครื่องพิมพ์เครื่องนั้นได้นะคะซึ่งเครื่องพิมพ์เครื่องนี้จะทำการเชื่อมต่อกับserverนะคะหรือเชื่อมต่อกับเครื่องให้บริการนะคะเวลาที่เราเรียกใช้หรือเรียกเขาเรียกว่า“printงาน”สั่งprintงานหรือสั่งพิมพ์งานนี่นะคะก็มันก็จะทำการวิ่งไปที่เครื่องผู้ให้บริการนะคะแล้วก็จะสั่งเราก็สามารถสั่งพิมพ์งานได้นะคะซึ่งก็จะมีวิธีการขั้นตอนในการติดตั้งเครื่องprintให้เป็นเครื่องให้บริการนะคะเดี๋ยวเราอยู่ปี3ปี4เราก็จะได้ติดตั้งprinterใช่ไหมคะติดตั้งเครื่องพิมพ์ซึ่งเวลาออกไปฝึกงานแล้วนี่ตัวนี้จะได้ใช้งานบ่อยมากนะคะจะได้ใช้งานบ่อยมากในการตั้งค่าเครื่องพิมพ์ให้เป็นserverนะคะให้หลายๆเครื่องสั่งprintงานได้นะคะเพราะฉะนั้นนี่อันนี้ก็จะเป็นตัวอย่างของการให้บริการเครื่องพิมพ์นะคะซึ่งเราจะเรียกงกระบวนการนี้ว่า“printerserver”นะคะหรือว่า“printserver”นะคะอีกตัวอย่างหนึ่งนะคะในเรื่องของการทำงานของworldwidewebก็คือการให้บริการข้อมูลนะคะหรือว่าฐานข้อมูลนะคะซึ่งเราจะต้องมีการติดตั้งฐานข้อมูลนี่นะคะที่serverซึ่งเราจะเรียกตัวนี้ว่า“databaseserver”นะคะหรือว่าเป็นผู้ให้บริการฐานข้อมูลนะคะเวลาที่เราหรือผู้ขอใช้บริการนี่นะคะไปดึงข้อมูลนะคะสมมุติว่าในห้องนี้นะคะ20กว่าคนข้อมูลของเราถูกเก็บไว้ที่ใดที่หนึ่งนะคะก็คือเก็บไว้ที่databaseserves(r)ไม่ว่าจะเป็นประวัตินะคะข้อมูลทุกอย่างนะคะที่เราออกแบบฐานข้อมูลไว้ใช่ไหมคะก็จะเอาไว้ที่databaseserverเวลาที่เราไปดึงข้อมูลของคนใดคนหนึ่งนะคะอยากทราบข้อมูลของคนให(ด)คนหนึ่งหรือเราจะupdateข้อมูลของเรานะคะเราก็ใส่รหัสนักศึกษาไปหรือว่ารหัสบัตรประชาชนไปนะคะแล้วเครื่องผู้ให้บริการนี่ก็จะทำการดึงข้อมูลของเราที่อยู่ในฐานข้อมูลนี่นะคะส่งมาที่ผู้ขอใช้บริการนะคะเวลาที่เราเขียนโปรแกรมบนเว็บจะต้องมีการออกแบบฐานข้อมูลนะคะซึ่งการออกแบบฐานข้อมูลพวกเราเรียนมาแล้วเทอมที่แล้วถูกไหมคะเป็นอย่างไรคะได้สร้างตารางวิเคราะห์ข้อมูลวิเคราะห์ตารางออกแบบตารางฐานข้อมูลอย่างสนุกสนานเลยใช่ไหมคะสนุกสนานไหมนะคะเพราะฉะนั้นนี่ทฤษฎีในเรื่องของการออกแบบฐานข้อมูลนี่นะคะเราจะได้เอามาประยุกต์ใช้ในเรื่องของการเขียนโปรแกรมด้วยนะคะนะคะการเขียนโปรแกรมไม่ได้สอนให้เราออกแบบฐานข้อมูลคือเราเรียนฐานข้อมูลมาแล้วเราก็นำความรู้ตัวนั้นนี่นะคะมาวิเคราะห์ข้อมูลที่เราจะเก็บเก็บบนเว็บนะคะเราต้องการจะเก็บอะไรบ้างนะคะเราก็วิเคราะห์ออกมาอย่างเช่นข้อมูลข่าวสารต่างๆนี่นะคะข้อมูลข่าวสารบน(ท)ความความรู้ต่างๆเราก็ออกแบบข้อมูลที่เราจะเก็บอย่างเช่นรหัสชื่อเรื่องบทความรายละเอียดต่างๆรูปภาพอันท(น)ี่(้)เราต้องการเก็บที่เก็บเพราะอะไร1.เพราะว่าเผื่อวันข้างหน้าเราจะค้นใช่ไหมคะเราจะดูข้อมูลย้อนหลังเราก็สามารถดูได้นะคะถ้าเราเก็บในเครื่องมันก็ต้องเดินทางมาที่เครื่องนี้เครื่องเดียวแต่ถ้าเราเก็บแบบออนไลน์เก็บไว้บนเว็บนะคะไม่ว่าอยู่ที่ไหนเราก็สามารถดูข้อมูลตัวนั้นได้นะคะโดยมีการป้องกันความปลอดภัยของข้อมูลนะคะก็ใส่รหัสเข้าไปนะคะเพราะฉะนั้นนี่ตัวdatabaseserverนี่นะคะก็เป็นตัวหนึ่งที่สำคัญแล้วก็เกี่ยวข้องกับการเก็บข้อมูลบนเว็บนะคะอันนี้ก็จะเป็นการทำงานด(โ)ดยรวมของworldwidewe.(b)นะคะซึ่งเวลาที่เราเข้าใช้งานเว็บไซต์ใช่ไหมคะเราก็ต้องผ่านโปรแกรมwebbrownserนะคะเวลาเราจะเข้าเว็บไซต์ต่างๆก็ต้องผ่านwebbroเ(w)ข(s)้(e)า(r)ผ่านgooglechomeผ่านsafariผ่านfirefoxหรือinternetexplorerนะคะเราต้องการเข้าดูเว็บไซต์อะไรเราก็ใช้ตัวเว็บ(w)บ(e)ร(b)า(b)ว(r)เ(o)ซ(w)อ(s)ร(e)์(r)แล้วก็พิมพ์ใช่ไหมคะพิมพ์ชื่อเว็บไซต์หรือค้นนะคะบางคนจำชื่อเว็บไซต์ไม่ได้ก็ใช้googleseachนะคะใช้googleค้นหานะคะตัวgoogleนะค(ี)ะ(่)ไม่ใช่ตัวwebbrowserนะคะเว(ป)็บ(น)เว็บร(ไ)า(ซ)ว(ต)์webseเ(r)ซ(v)อ(i)ร(c)์(e)นะคะเป็นwebserviceนะ(ท)ค(ี)ะ(่)นิยมมากที่สุดอันดับ1เลยในการค้นหาใช่ไหมคะเป็นเว็บค้นหาเป็นเว็บให้บริการการค้นหาก็จะมีข้อมูลทุกอย่างนะคะใครที่ทำเว็บไซต์แล้วใช้หลักการseoหรือใช้เทคนิคsearchengineก็คือค้นแล้วเจอเลยเจท(อ)ค(ห)น้าแิ(ร)กของgoogleเลยนะคะอันนี้ก็จะเป็นตัวหนึ่งที่ทางธุรกิจหรือทางอะไรนี่เขาต้องการที่จะให้ค้นชื่อใดชื่อหนึ่งขึ้นมาแล้วให้เจอเจอเว็บไซต์เขาเจอข้อมูลเขานะคะเพราะว่าถ้าคนเข้ามาดูเยอะๆนะคะถ้าเว็บไซต์ไหนคนเข้าดูเยอะๆมันก็จะมีพวกโฆษณาต่างๆนี่มาขอเช่าพื้นที่นจ(ะ)จ(ค)ะมาขอใช้พื้นที่เราในการโฆษณาอะไรต่างๆเราก็จะเก็บเก็บค่าใช้จ่ายจากเขานะคะอันนี้ก็คือเป็นรายได้ที่ได้มาจากการสร้างเว็บนะคะถ้าเว็บไหนสร้างขึ้นมาแล้วไม่มีคนเข้ามาดูเลยนี่มันก็จะไม่มีอะไรเกิดขึ้นใช่ไหมคะลองดูลองสังเกตดูนะคะว่ามีเว็บไซต์ต่างๆที่คนนิยมคนเข้าไปใช้เยอะมันก็จะมีโฆษณานะคะใช่ไหมคะโฆษณามาก่อนเลยนะคะโฆษณะ(า)pop-upโฆษณาขึ้นมาเลยนะคะอันนั้นเขาก็ขอใช้พื้นที่โฆษ(ว)ณ(่)าซื้อหรือว่าจ่ายเงินให้กับพวกเจ้าของเว็บนะคะเพราะฉะนั้นนี่ตัวเขียนโปรแกรมบนเว็บนี่บางทีเราอาจจะไม่ต้องเขียนเราอาจจะใช้ตัวwordpressตัวwol(r)dpressนี่จะมีตัวที่ทำsearchengineนะคะคือการค้นที่googleนี่ค้นเจอเร็วนะคะอย่างนั้นเมื่อเราเข้าเว็บ(w)บ(e)ร(b)า(b)ว(r)เ(o)ซ(w)อ(s)ร(e)์(r)แล้วก็พิมพ์ชื่อเว็บไซต์นะคะหรือว่าurlที่เรารู้จักนะคะมันก็จะไปที่webserverนะคะก็คือตัวที่ให้บริการตัวที่ให้บริการเว็บนะคะแล้วก็ส่งข้อมูลหรือว่าเอกสารหน้าเว็บนี่นะคะมาให้เรานะคะกระบวนการทำงานของมันจะมีความรวดเร็วนะคะรวดเร็วมากแต่ถ้าเว็บไซต์ไหนที่ออกแบบไม่ดีนะคะเก(ว)็บค(ไ)ื(ซ)อ(ต)ห(์)น(ท)้(ี)า(่)จ(อ)อเ(ก)ว(แ)็(บ)บไม่ดีนี่ก็คือหน้าจอเว็บจะโชว์ข้อ(น)ม(ี)ู(่)ล(ห)ช(น)้าน(เ)ะ(ว)ค(็)ะ(บ)ก(น)็(ี)ค(่)ื(จ)อ(ะ)โชว์ข้อมูลช้านะคะก็คือโชว์ข้อมูลช้าพอโชว์ข้อมูลช้านี่เราวัยรุ่นใช่ไหมคะหน้าเว็บนจ(ี)อ(้)รอเกิน30วินี่ก็ไม่อยากจะดูแล้วใช่ไหมคะก็ปิดไปแล้วก็ต้องสังเกตเห็นว่ามีทุกเว็บไซต์นี่เขาก็จะพยายามออกแบบข้อมูลเนื้อหาให้มันเร็วทั้งนี้ทั้งนั้นก็จะขึ้นอยู่กับความเร็วของเครื่องเราด้วยนะคะเพราะฉะนั้นนี่ตัวที่ตัวที่ทำให้เอกสารหรือข้อมูลทุกอย่างมันเป็นแบบเดียวกันก็คือมันจะเแ(ป)บ(็)บ(น)protocal(http)หรือว่าเป็นมาตรฐานนะคะมาตรฐานที่ทำให้ข้อมูลบนเว็บนี่สามารถติดต่อสื่อสารกันได้นะคะสามารถที่จะแสดงข้อมูลเอกสารได้ก็คือpโ(r)ป(o)ร(t)โ(o)ต(c)ค(a)อ(l)ล(()http)นะคะหรือว่าจะเรียกคำเต็มว่า“hypertechtransferprotoca(o)l”นะคะเป็นตัวที่แสดงเอกสารบนเว็บนะคะเป็นpotoca(o)lที่ใช้แสดงเอกสารบนเว็บสังเกตว่าurlของเว็บไซต์นี่นะคะก่อนที่จะเป็นworldwidewe.(b)นี่มันก็จะมีhttp://นะคะแล้วก็ตามด้วยwww.คือถ้าไม่มีprotocolตัวนี้เราจะไม่สามารถอ่านเอกสารที่อยู่ทั่วโลกได้นะคะคำว่า“เอกสารที่อยู่ทั่วโลก”คือไม่ว่าใครก็ตามใช่ไน(ห)ะ(ม)คะที่เขาสร้างเว็บขึ้นมานี่ไม่ว่าจะเป็นภาษอังกฤษภาษาต่างประเทศก็คือจะใช้protoca(o)lตัวนี้ในการสื่อสารกันนะคะในการสื่อสารกันก็จะทำให้เรานี่สามารถอ่านหรือว่าดูเอกสารในหน้าเว็บไซต์ได้นะคะทีนี่(้)มาดูประเภทของโปรแกรมบนเว็บนะคะการเขียนโปรแกรมบนเว็บนี่จะมีอยู่2ประเภทหรือ2แบบนะคะก็คือแบบที่1นะคะภาษาอังกฤษเรียกว่า“sส(t)เ(a)ต(t)ต(i)ิ(c)ส(p)โ(r)ป(o)ร(g)แ(r)ก(a)ร(m)ม(m)ม(i)ิ(n)่(g)ง(”)หรือการเขียนโปรแกรมแบบธรรมดาทั่วไปนะคะยกตัวอย่างเว็บไซต์ธรรมดาก็คือเป็นอย่างเช่นเว็บประวัติส่วนตัวเ(w)ว(e)็(b)บ(p)เ(a)พ(g)จ(e)ที่เป็นประวัติขององค์กรนะคะเ(w)ว(e)็(b)บ(p)เ(a)พ(g)จ(e)ที่แสดงข้อมูลทั่วไปนะคะพวกนี้จะเป็นpageหรือว่าเ(w)ว(e)็(b)บ(p)เ(a)พ(g)จ(e)ที่ไม่ค่อยจะมีการupdateข้อมูั(ล)ป(น)เ(ะ)ด(ค)ต(ะ)ไม่ค่อยมีการอ(u)ั(p)ป(d)เ(a)ด(t)ท(e)ข้อมูลข้อมูลจะนิ่งนะคะซึ่งการพัฒนาจะใช้ภาษาhtmlนะคะภาษาhtmlก็คื(ใ)อ(น)การเขียนหรือว่าเราเอาแค่ข้อมูลเข้าไปเอาแค่รูปภาพเข้าไปนะคะซึ่งเวลาที่เราจะดูข้อมูลก็ต้องผ่านเว็บเบ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)นะคะร้องขอข้อมูลไปยังเครื่องผู้ให้บริการนะคะหรือว่าwebserverนะคะมันก็จะทำการดุ(ึ)งข้อมูลหรือว่าดึงหน้าwebpเ(a)ว(g)็(e)บ(น)เ(ะ)พ(ค)จ(ะ)ที่ตรงกับความต้องการของเรานี่นะคะส่งมาให้เราผ่านหน้าจอนะคเ(ะ)ว(w)็(e)บ(b)staticหรือว่าการเขียนโปรแกรมธรรมดานี่มันจะไม่ค่อยยุ่งยากนะคะไม่ต้องมีฐานข้อมูลไม่ได้ออกแบบฐานข้อมูลนะคะไม่ได้เก็บอะไรนะคะเพียงแค่เราแปะรูปภาพแปะข้อความนะคะติดแปะไว้เฉยๆนะคะแต่ก็ต้องมีการออกแบบให้สวยงามเพื่อที่จะให้ข้อมูลนี่ดูน่าสนใจนะคะโดยใช้เทคนิคในการออกแบบกราฟิกเข้าช่วยนะคะประเภทที่2นะคะเรียกว่าการเขียนโปรแกรมแบบไ(d)ด(y)น(n)า(a)ม(m)ิ(i)ก(c)นะคะแบบdynamic,dynaไ(m)ด(i)น(c)า(p)ม(r)ิ(o)ก(g)โ(r)ป(a)ร(m)แ(m)ก(i)ร(n)ม(g)ม(น)ิ(ะ)่(ค)ง(ะ)การเขียนโปรแกรมแบบdynamไ(i)ด(c)นี่า(น)ม(ะ)ิ(ค)ก(ะ)จะมีฐานข้อมูลนะคะเข้ามาเกี่ยวข้องเพราะว่าผู้ใช้สามารถที่จะเพิ่มข้อมูลดูข้อมูลนะคะหรืออ(ว)า(่)จ(า)จะเพิ่มลบแก้ไขนะคะมีการจัดเก็บข้อมูลนะคะมีการเรียกดูข้อมูลนะคะตัวนี้จะสามารถเปลี่ยนแปลงข้อมูลได้ตลอดเวลานะคะโดยเว็บที่เป็นเว็บแบบdynamicก็อย่างเช่นนะคะเว็บที่มีการจัดเก็บข้อมูลลงฐานข้อมูลนะคะหรือว่าเว็บที่เกี่ยวกับการแสดงรายละเอียดสินค้าเว็บขายสินค้านะคะเว็บของเว็บไซต์ของมหาวิทยาลัยราชภัฏสกลนครของเราก็เป็บ(น)เว็บแบบdynamiu(c)เพราะว่ามันมีการอ(u)ั(p)ป(d)เ(a)ด(t)ต(e)ข่าวสารตลอดเวลาใช่ไหมคะโดยเฉพาะปัจจุบันช่วงนี้จะupdateในเรื่องของการสมัครนะคะการรับสมัครน้องปี1ที่จะเข้ามาเรียนปี63นะคะก็จะupdateแบบreal-timeใครสมัครเข้ามาปุ๊บตัวเลขก็จะเพิ่มขึ้นทันทีนะคะหรือข่าวสารข่าวประชาสัมพันธ์ต่างๆนะคะข่าวกิจกรรมนะคะข่าวอบรมสัมมนาพวกนี้นะคะเราสามารถเรียกดูข่าวย้อนหลังได้นะคะหรือสามารถเพิ่มข่าวเต(ข)่(้)อ(า)ไปได้อันนี้การเพิ่มก็จะเป็นหน้าที่ของผู้ดูแลเว็บนะคะหรือว่านักพัฒนาเว็บซึ่งการทำงานก็คล้ายๆกันนะคะก็คือทำผ่านเว็บเบ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)เพียงแต่ว่ามันจะมีตัวฐานข้อมูลนะคะที่รวบรวมข้อมูลต่างๆนี่นะคะทุกอย่างจะเก็บไว้ที่ฐานข้อมูลนะคะซึ่งตัวผู้ให้บริการนี่ก็จะไปดึงเอาข้อมูลที่อยู่ในฐานข้อมูลของเรานะคะแล้วก็ตัวนี้จะมีโปรแกรมแปลภาษาทำไมถึงต้องมีโปรแกรมแปลภาษาเพราะว่าในการเขียนโปรแกรมแบบไ(d)ด(y)น(n)า(a)ม(m)ิ(i)ก(c)นี่นะคะเราจะใช้ภาษาphpphpไม่ใช่(้)ภาษาอังกฤษนะคะจะใช้phpรู้จักphpไหมคะหรือใช้pythonอย่างpythonที่เราเคยเรียนใช่ไหมคะใช้pythonหรือใช้ah(s)pใช้javascriptนะคะภาษาเหล่านี้จะมีตัวแปรนะคะซึ่งตัวการทำงานของตัวแปลภาษามันก็จะไปดูว่าเราต้องการอะไรเราจะห(ป)ระมวลผื(ล)อะต(ไ)้(ร)อง(ย)ก(่)างร(เ)ป(ช)ร(่)ะ(น)เม(ร)ิ(า)น(จ)ผ(ะ)ล(เ)อ(พ)ะ(ิ)ไ(่)ร(ม)ข้อมูลนี่นะคะมันก็จะไปประมวลผลในเรื่องของที่โปรแกรมเมอร์นี่เขาได้ป้อนคำสั่งป้อนภาษาลงไปนะคะแล้วมันก็จะส่งข้อมูลแปลภาษาอะไรแล้วมันก็จะส่งขแ(้)ป(อ)ล(ม)ภ(ู)า(ล)ษ(ม)าให้เรานะคะผ่านเ(w)ว(e)็(b)บ(p)เ(a)พ(g)จ(e)นะคะเราก็จะสามารถดูข้อมูลต่างๆได้นะคะซึ่งตัวการทำงานกับdatabaseแล้ก(ว)ั(ก)บ(็)ตัวแปลภาษานี่มันก็จะมีการเขียนคำสั่งถร(้)าเป็ต(น)้(p)อ(h)ง(p)ก็า(เ)ราท(ต)ำ(้)องะ(ก)ไ(า)รทำอะไรเราต้องการจะเพิ่มนะคะมันก็จะเป็นพวกinsert,intoเพิ่มข้อมูลเข้าไปใช่ไหมคะอันนั้นเราไม่ได้เห็นตัวคำสั่งแต่ว่าเราเห็นผ่านหน้าจอแบบฟอร์มนะคะมันก็จะแปลมาให้เราเป็นหน้าจอแบบฟf(อ)o(ร)r(์)m(ม)นะคะที่นักพัฒนาโปรแกรมหรือพัฒนาเว็บนี่เขาได้เขียนขึ้นมานะคะทีนี้มาดูในส่วนของapplicationนะคะapห(p)ร(l)ื(i)อ(c)ว(a)่(t)า(i)เ(o)ว(n)็(ห)บ(ร)แ(ื)อwebapป(p)พ(l)ล(i)ิ(c)เ(a)ค(t)ช(i)ั(o)น(n)ห(น)ร(ะ)ื(ค)อ(ะ)เว(ร)็(า)บ(จ)แ(ะ)อ(ไ)ป(ด)พ(้)ล(ย)ินเ(บ)ค(่)ช(อ)ั(ย)น(ๆ)เกี่ยวกับapplicationใช่ไหมคะโดยเฉพาะถ้าในโทรศัพท์appโหลดappโน่นโหลดappแ(น)อ(ี)ป(่)นะคะappต่างๆที่...โดยเฉพาะappที่เกี่ยวกับอะไรคะการทำหน้าสวยใช่ไหมคะถ่ายรูปหน้าคมหน้าเรียวอันนั้นก็เป็นแ(a)อ(p)ป(p)แต่ว่าเป็นแ(a)อ(p)ป(p)ที่อยู่ในมือถือนะคะมาเรียกสั้นๆว่าappแต่ชื่อเต็มๆมันก็คือapplicationก็คือตัวที่ประยุกต์ขึ้นมาใช่ไหมคะapplicationคือโปรแกรมที่เราสร้างขึ้นนะคะประยุกต์ขึ้นมาสร้างขึ้นมาเพื่อใช้งานอย่างใดอย่างหนึ่งนะคะหรือว่าใช้งานตามที่เราต้องการนะคะเป็นระบบการทำงานของสารสนเทศนะคะapplicatio์(n)จะมีทั้งmobileapplication,mobileapplicationก็คือappที่ใช้งานบนมือถือเว(w)็(e)บ(b)applicationก็คือโปรแกรมที่สร้างขึ้นมาใช้งานบนหน้าเว็บนะคะใช้งานทบ(ี)น(่)หน้าเว็บอันนี้คือตัวอย่างwebapplicationนะคะโปรแกรมที่เราเขียนขึ้นมานะคะเขียนขึ้นเองประยุกต์เองนะคะจากข้อมูลต่างๆที่...นะคะที่มีการวิเคราะห์ข้อมูลออกแบบข้อมูลนะคะซึ่งตัวตัวเว(w)็(e)บ(b)applicationนี่จะสามารถเข้าใช้งานผเ(่)ว(า)็(น)บ(w)บ(e)ร(b)า(b)ว(r)เ(o)ซ(w)อ(s)ร(e)์(r)นะคะโดยอาศัยprotocal(http)นะคะผ่านเครือข่ายอินเทอร์เน็ตแล้วต้องมีเครือข่ายอินเทอร์เน็ตด้วยนะคะหรือว่าintranetนะคะตัวอย่างwebapplicatเ(i)ว(o)็(n)บ(ก)แ(็)อป(ย)พ(่)ล(า)ิ(ง)เคชั(่)นเว็บเกี่ยวกับเว็บขายสินค้าหรือว่าe-commerceนะคะwebe-auction,e-auctionก็คือเว็บการประมูลนะคะเว็บประมูลนะคะประมูลสินค้าประมูลการก่อสร้างอะไรอย่(พ)า(ว)ง(ก)นี้นะคะwebเ(b)ว(o)็(a)บ(r)บ(d)อ(น)ร(ะ)์(ค)ด(ะ)แต่ก่อนweเ(b)ว(b)็(o)บ(a)บ(r)อ(d)ร(น)์(ี)ด(่)จะได้รับความนิยมใช่ไหมคะพวกchatbแ(o)ช(a)ท(r)บ(d)อ(น)ร(ะ)์(ค)ด(ะ)เดี๋ยวนี้ก็คือchatboardได้รับความนิยมนะคะทุกเว็บเดี๋ยวนี้สังเกตเห็นไหมว่าจะมีpop-upเล็กๆขึ้นมาเพื่อให้สามารถพูดคุยกันผ่านหน้าเว็บได้นะคะแต่ก่อนต้องไปพิมพ์ที่webboardเ(ฝ)ว(า)็(ก)บ(ข)บ(้)อความนร(ะ)์(ค)ด(ะ)แล้วกว่าจะตอบกลับนะคะเดี๋ยวนี้จะมีchatboardนะคt(ะ)จะมีกล่องข้อความเวลาที่เราเข้าเว็บต่างๆไม่ว่าจะเป็นเว็บมหาลัยนะคะก็จะมีpop-upเป็นกล่องข้อความขึ้นมาให้เราได้พิมพ์สอบถามนะคะเพราะฉะนั้นนี่ก็จะเป็นตามยุคตามสมัยของการพัฒนาเว็บนะคะถ้าเว็บไซต์ไหนมันไม่มีการสอบถามนะคะเวลาที่คนสงสัยนี่มันก็จะแบบเออจะไปถามตรงไหนไม่ต้องเข้าไปที่เว(w)็(e)บ(b)บ(b)อ(o)ร(a)์(r)ด(d)ต้องเข้าไปอะไรอีกยุ่งยากนะคะเพราะฉะนั้นนี่จะเป็นตัวอย่างเว(ข)็(อ)บ(ง)ข(w)อ(e)ง(b)applicationนะคะในเรื่องของการออกแบบเว็บไซต์นะคะขั้นตอนในการออกแบบเว็บไซต์คือเราจะต้องเรียนรู้โครงสร้างระบบเว็บก่อนนะคะโครงสร้างระบบเว็บก่อนนะคะการสร้างเว็บไซต์ครั้งแรกเลยนี่นะคะเริ่มต้นเราจะต้องมีhostนะคเ(ะ)ว(w)็(e)บ(b)hostingนะคะwebhostingก็คโ(ื)ฮ(อ)ตัวที่ให้์(บ)ต(ร)ิการเว็บนะ้(ค)ง(ะ)หรือว่าไปเช่าhostเช่าพื้นที่นะคะซึ่งhostนี่ก็จะมีทั้งhostในส่วนของสถาบันการศึกษานะคะhostที่เกี่ยวกับการใช้งานในที่ทำงานในบ้านนะคะหรือว่าให้บริการฟรีหรือว่าที่เกี่ยวข้องกับการค้าการพาน(ณ)ิชย์หรือธุรกิจนะคะพวกเว(w)็(e)บ(b)hostนะคะพวกที่ให้บริการเว(w)็(e)บ(b)hostingก็จะมีmyfreeweb.netนะคะmyjavaserverอันนี้ก่(็)เป็นบ(ต)เ(ั)วอย่างwebhosti็(n)บ(g)ที่เขาให้บริการนะคะเขาให้บริการhostไม่ว่าจะเป็นการ...แต่เราจะต้องเสียเงินนะบางทีถ้าไป...ถ้าต้องการพื้นที่เยอะๆก็ต้องเสียเงินจะเป็นรายเดือนรายด(ป)ีนะคะเดือนละ400ปีละ1,000อันนี้ก็แล้วแต่อันนี้ก็คือเช่าhostหรือเอาข้อมูลของเราไปเก็บไว้ที่hostเขานะคะตัวที่ให้บริการเว(w)็(e)บ(b)hostingก็จะมีขององค์กรนะคะของcก(a)็(t)จ(น)ะม(ค)ี(ะ)cattelecomพวกispอันนี้คือให้บริการพวกให้บริการhostนะคะพวกofficehome,school,universityในโรงเรียนในมหาวิทยาลัยนะคะอย่างเช่นถ้าเรามีเว็บมีผลงานอยากจะเฝ(อ)าก(ไ)เ(ป)ว(ฝ)็(า)บ(ก)ไว้ที่เว็บไซต์มหาลัยนี่ก็สามารถที่จะติดต่อนะคะหรือว่าใครตอนนี่(้)พัฒนาเว็บอยู่มีไหมคะที่สร้างเว็บแล้วมีไหมที่สร้างเว็บตัวเองแล้วมีไหมคะโชว์มือหน่อยยังใช่ไหมคะคือในมหาวิทยาลัยเราก็จะมีการเก็บพวกผลงานนักศึกษานะคะก็จะมีเอาไปแปะไว้แขท(ว)ำ(น)ไว้นะแ(ค)ข(ะ)ว(ท)น(ี)ไ(น)ว(ี)้มีเว(w)็(e)บ(b)hostingแล้วก็webserverนะคะตัวที่ให้บริการwebserverนี่ก็อย่จ(า)ะ(ง)เป(ช)็(่)นwindowserver,linuxนะคะตัวที่ใช้เยอะที่สุดก็เป็นlinuxเพราะว่ามันฟรีนะคะมันฟรีมีwebhosting,webserver,webbrowserนะคะซึ่งอันนี้เราก็ได้ตอบไปแล้วแล้วก็เว็บไซต์เว็บไซต์ก็คือคืออะไรคะเว็บไซต์คืออะไรเราเรียกแต่ว่าเว็บไซต์ๆๆๆเรารู้ไหมคะว่าเว็บไซต์คืออะไรเปรียบเสมือนอะไรถามดีกว่าฟังอาจารย์เดี๋ยวบางคนหลับนะคะอย่างเ(น)ด(ั)ี(้)๋(น)ย(ก)ว(็)จะขอถามนะ(ว)ค(่)ะ(า)เว็บไซต์คืออะไรนะคะเว็บไซต์คืออะไรให้ตอบหมายเลขโชคดีนะคะช่วยอธิบายหน่อยว่าเว็บไซต์คืออะไรหมายเลข016ไม่มีโปรแกรม107017ใครเอ่ยหลับไปแล้วอธิบายเว็บไซต์นะคะเว็บไซต์คืออะไรเว็บไซต์คืออะไรอธิบายยาวๆได้นะคะ(ล่าม)ไม่รู้ค่ะ(อาจารย์)ไม่รู้[เสียงหัวเราะ](อาจารย์)ลองค้นสิให้โอกาสค้นเรามีคอมพิวเตอร์ต่ออินเทอร์เน็ตอยู่ใช่ไหมคะค้นสิเว็บไซต์คืออะไรถ้าเราไม่รู้เราทำอย่างไรถึงจะรู้ใช่ไหมคะค้นสิคะค้นค้นเลยใช้googleใช้googleใครต้(อ)น(บ)ได้ยกเมือเลยก็ได้นะคะไม่ต้องไม่ต้อง017ใครยกมืออาจารย์ให้1คะแนนนะคะ2คนยกโอ.เค.ค่ะโอ.เค.อีก1คำตอบอันนี้คือความหมายของเว็บไซต์ปรม(บ)มือให้กับ2คำตอบหน่อยค่ะนะคะคำว่าเว็บไซต์ใช่ไหมคะที่เพื่อนบอกเป็นตัวที่รวบรวมข้อมูลทุกอย่างใช่ไหมคะรวบรวมข้อมูลทุกอย่างนะคะอยู่บนอo(อ)n(น)l(ไ)i(ล)n(น)e(์)นะคะอยู่บนออนไลน์ซึ่งเราสามารถเรียกใช้เว็บไซต์ผ่านเว็บเบ(w)ร(e)า(b)ว(b)์(r)เ(o)ซ(w)อ(s)ร(e)์(r)ใช่ไหมคะแล้ะ(ว)เว็บไซต์นี่ก็จะมีชื่อนะคะเว็บไซต์จะมีชื่อชื่อของเว็บนะี(ค)่(ะ)ชื่อของเว็บนี่บางทีเขาจะใช้ตัวtctipจะมีipทีนี่(้)ipนี่จำยากนะคะจำยากอย่างipของสมมุติipของมหาวิทยาลัยราชภัฏสกลนครนี่คือ202.12.18.อะไรอย่างนี้ค่ะมันจะมี4ชุดตัวเลขจะมี4ชุดละตัวเลขแต่ละชุดจะไม่เกิน255เขาเรียกว่าipaddressนะคะip1ตัว1เครื่องนะคะทีนี้เว็บไซต์นี่เขาจะตั้งชื่อเพื่อที่จะแทนipนะคะแทนipเพราะว่าจะใช้ชื่อที่เกี่ยวข้องกับชื่อเว็บชื่อข้อมูลนะคะอย่างเช่นเว็บsanook.comทุกคนจะจำง่(ไ)า(ด)ย(้)ใช่ไหมคะเว็บkaก(p)ร(o)ะ(o)ป(k)ุ(.)ก(c)ด(o)อ(m)ท(น)ค(ะ)อ(ค)ม(ะ)facebook.comนะคะทุกเว็บไช(ซ)ต์ก็จะมีชื่อนะคะทุกเว็บไซต์ก็จะมีชื่อเป็นแหล่งรวมข้อมูลทุกอย่างนะคะแหล่งรวมข้อมูลทุกอย่าๆ(ง)เว็บไซต์นี่เปรียบเสมือนกับห้องสมุดเว็บไซต์เปรียบเสมือนห้องสมุดถูกไหมคะห้องสมุดนี่มีทุกอย่างใช่ไหมคะมีทุกอย่างเลยเว็บไซต์ก็เหมือนกันนะคะทีนี้ถัดมานะคะคือhomepageนะคะhomepageใครจะเป็นคนตอบคำถามhomepageค่ะใครจะเป็นคนตอบคำถามhomepageจะให้สุ่มหรือยกมือดีเมื่อกี้ให้คะแนน2คนนะคะรหัสอะไรคะ208กับ214214208กับ214ทีนี้ความหมายของhomepageนะคะใครจะตอบหรือจะให้อาจารย์สุ่ม218ใช่ไหมใช่ไหมคะเมื่อกี้กับ214หรือเปล่า208208กับ214ใช่ไหมสุรเชษฐ์เห็นไหมได้1คะแนนแล้วทีนี้homepage,homepagะ(e)1,2,3หมดเวลายกมือๆมีคนยกมืๆ(อ)ต้องยกมือก่อนตอบนะคะเป็นคำที่เรียกใช้หน้าแรกของเว็บไซต์นะคะโอ.เค.ปรบมือให้เพื่อนหน่อยมีคำตอบอื่นไหมคะคำว่า“home”,homeคือบ้านถูกเปล่าเปรียบเสมือนบ้านhomepageก็คือหน้าที่เอาไว้รวมนะคะหรือว(เ)่(อ)าไว้เรียกหน้าแรกของเว็บไซต์นะคะhomepageเปรียบเสมือนกับสารบัญนะคะหรือหน้าปกหนังสือใช่ไหมคะหรือหน้าปกหนังสือในห้องสมุดนะคะถ้าเราจะเข้าไปหยิบเล่มหนังสือเล่มหนังสือคือเว็บไซต์ใช่ไหมคะแล้วมาดูหน้าท(แ)ี(ร)่(ก)หน้าแรกก็คือหน้าปกนี่หน้าปกก็คือhomepageนะคะเป็นตัวที่มีข้อมูลหลักๆนะคะมีข้อมูลหลักๆมีหัวข้อมีสารบัญมีลิงก์l(อ)i(ะ)n(ไ)k(ร)เชื่อมไปยังตัวหน้าต่างๆนะคะไปยังหน้าต่างๆเมื่อกี้รหัสอะไรตอบคะ221นะคะแจกคะแนนไปเลยนะคะและสุดท้ายคือwebpageหน้าwebpageนะคะwebpageนี่ไม่แจกคะแนนนะคะพวกเราน่าจะรู้อยู่แล้วwebpageคือหน้าเว็บแต่ละหน้านะคะหน้าเว็บแต่ละหน้านะคะอย่างเช่นหน้าประวัติหน้าโครงสร้างหน้ารายละเอียดสินค้านะคะเวลาที่เราสร้างลิงก์จากหน้าhomepageมาจากหน้าอื่นๆมันก็จะมีหน้าแผนที่นะคะขึ้นอยู่กับว่าในเว็บไซต์นั้นนะคะเราจะออกแบบข้อมูลมีหน้าอะไรบ้างนะคะมีpa(เ)g(พ)e(จ)อะไรบ้างนะคะซึ่งแต่ละหน้านี่ก็จะมีชื่อและก็ออกแบบหรือพัฒนาจากหลายๆภาษาหรืออาจจะเป็นhtmlเป็นphpเป็นasp,pythonนะคะjavascriptนะคะก็แล้วแต่ว่าหน้านั้นจะแสดงข้อมูลในรูปแบบไหนนะคะอันนั้นก็คือการสร้างเว็บนะคะเราจะต้องเรียนรู้นะคะคำศัพท์เหล่านี้นะคะแล้วก็ต้องเตรียมสิ่งที่ต้องเตรียมก่อนเลยคือserverนะคะserverหรือhostนะคะทีนี้ภาษาที่ใช้ในการเขียนโปรแกรมบนเว็บนะคะภาษาที่ใช้ในการเขียนโปรแกรมบนเว็บมีหลากหลายภาษามากนะคะนะคะอย่างเช่นjavaนะคะjavaนี่สามารถทำงานได้ทุกระบบปฏิบัติการนะคะคำว่า“ระบบปฏิบัติการ”ก็คือสามารถทำงานได้ทั้งwindowsได้ทั้งmacได้ทั้งโทรศัพท์มือถือก็คือโทรศัทน์มือถือก็จะมีระบบปฏิบัติกาi(ร)ที่เป็นios,androidนะคะjavaสามารถเข้าได้กับทุกระบบปฏิบัติการนะคะแล้วก็นิยมใช้กันอย่างแพร่หลายในการเขียนเว็บนะคะภาษาhtml5นะคะอันนี้ก็เป็นอีกภาษาหนึ่งที่นิยมใช้นะคะซึ่งภาษาjava,html5จะเป็นพวกภาษาที่ทำงานฝั่งผู้ขอใช้บริการนะคะทำงานฝั่งผู้ขอใช้บริการมันไม่ได้มีการดึงข้อมูลนะคะไม่ได้คือการประมวลผลนะี(ค)่(ะ)คือการประมวลผลฝั่งผู้ขอให(ช)้บริการนะคะส่วนตัวภาษาที่ทำงานหรือว่าปรต(ะ)ั(ม)วท(ล)ี(ผ)่(ล)ท(ฝ)ำ(ั)ง(่)า(ง)น(เ)ห(ค)รือ(่)ป(อ)ร(ง)ะ(ผ)ม(ู)ว(้)ล(ใ)ผ(ห)ล(้)บริการก็คือพวกphpนะคะพวกaspนะคะพวกpythonนะคะพวกนี้จะทำงานฝั่งผู้ให้บริการนะคะคือทำงานหรือrunที่serverนะคะrunบนserverru(พ)n(ว)บ(ก)นserve(ี)r(้)ต้องมีserverก่อนต้องจำลองเครื่องเป็นserverถึงจะร(r)ั(u)น(n)ได้นะคะแตห(่)ร(พ)ื(ว)อ(ก)htmlหรือjavaพวกนี้นะคะไม่ต้องมีserverก็สามารถที่จะrunหรือทำงานได้นะคะอย่างhtml5นี่เราสามารถทดลองเขียนจากnotepadก็ได้นะคะลองดูไหมนะคะลองดูไหมใช้htmlนะคะเดี๋ยวให้พวกเราเปิดเปิดโปรแกรมเราจะเขียนโปรแกรมโดยใช้ภาษาhtmlนะคะโดยที่ไม่ต้องอาศัยseverนะคะสมมุติพิมพ์เข้าไปที่notepadนะคะเปิดnotepadขึ้นมาแล้วพิมพ์อะไรก็ได้นะนะคะแล้วเราแค่saveไฟล์เป็นhtmlนะคะfile,saveasเลือกsaveastypeนี่นะคะเป็น.htmlนะคะพิมพ์เสร็จsaveastypeนะคะตั้งชื่อf(ไ)i(ฟ)l(ล)e(์)แล้วก็saveastypeนี่เลือกเป็นallfileนะคะfilenameใส่นามสกุล.htmlนะคะสมมุติอาจารย์เก็บไว้ที่mydocumentนะคะเก็บไว้ที่mydocumentกดsaveกดsaveแล้วก็ไปเปิดmydocumentนะคะสังเกตว่าหน้าชื่อชื่อ(ๆ)fileของเรานี่นะคะมันจะเป็นiconนะคะจะมีตัวinternetexplorerใช่ไหมคะสัญลักษณ์internetexplorerนะคะแล้วก็ประเภทไฟล์เป็นhtmlไ(f)ฟ(i)ล(l)์(e)เราสามารถดับเบิลคลิกนะคะโอ.เค.ออกมาเป็นภาษาไม่รู้เรื่องนะคะutf-8ใช้ไม่ได้saveastypeอันนี้ไม่ใช่html5นะคะเพราะฉะนั้นเวลาที่จะเขียนโปรแกรมให้ออกมาตามที่เราเขียนนะคะเราจะต้องมีการไปกำหนดfontนะคะไปกำหนดรูปแบบอักษรนะคะซึ่งอันนั้นก็จะเป็นcodeทีโ(่)ค(ใ)้(ช)ด(้)อาจจะเป็นdt(r)eamviewer(a)ห(v)ร(e)ื(r)หรือจะเป็นnotepadนะคะที่เราจะต้องไปกำหนดการแสดงผลนะคะให้มันsupportตัวnotepadนี่อาจจะไม่ได้supportนะคะแต่ถ้าพิมพ์เป็นภาษาอังกฤษมันอาจจะไม่supportภาษาไทยนะคะแต่ถ้าพิมพ์เป็นภาษาอังกฤษนะคะมันก็จะสามารถโชว์นะคะซึ่งตัวนี้เราไม่ได้runบนserverเราร(r)ั(u)น(n)ที่เครื่องของเราร(r)ั(u)น(n)ที่เครื่องผู้ขอใช้บริการนะคะอันนี้ต้องsaveทับนะคะแต่ถ้าเป็นภาษาอังกฤษนะคะมันก็จะรองรับนะคะsupportภาษาอังกฤษแต่ไม่supportภาษาไทยโอ.เค.อันนี้ก็จะเป็นตัวอย่างของการใช้htmlพื้นฐานนะคะที่สามารถrunบนเครื่องของเราโดยที่ไม่ต้องติดตั้งserverก็ได้นะคะมันก็จะเปิดตามurlนะคะไฟล์เป็น.htmlแค่นี้นะคะแต่ถ้าเป็นพวกภาษาphp,asp,pythonพวกนี้มันจะต้องมีตัวที่เป็นทำหน้าที่เป็นserverนะคะซึ่งตัวที่เป็นwebserverนะคะตัวที่ทำหน้าที่เป็นwebserverมีใครรู้จักไหมคะwebserverตัวโปรแกรมที่ทำเป็นwebserverprogramมีใครรู้จักไหมคะยกตัวอย่างตัวที่ทำเป็นwebserverที่ทำหน้าที่เป็นp(โ)r(ป)o(ร)g(แ)r(ร)a(ก)m(ม)webserverสัก1ตัว2ตัวใครตอบได้อาจารย์ให้1คะแนนwebserverให้เวลา5วิในการยกมือตอบ5432,1ยกมือหรือคะหมายเลขอะไรคะมีใครตอบได้ไหมคะwebserverที่ผ่านมาเราไม่ได้เขียนโปรแกรมบนเว็บเราเลยไม่ได้ติดตั้งserverใช่ไหมคะรู้จะได้appservไหมคะappเซิ(s)ร(e)์(r)ฟ(v)ค้(ุ)ุ(้)นๆไหมไม่คุ้นเลยคุ้นไหมคะappserveตัวที่เป็นwebserverนะคะเอาไว้ร(r)ั(u)น(n)โปรแกรมที่หรือร(r)ั(u)น(n)ภาษาที่ทำงานฝั่งserverนี่ก็จะมีพวกaแ(p)อ(p)ป(s)เ(e)ซ(r)ิ(v)ร(,)์(x)ฟ(a)แ(m)ซ(p)ม(p)นะคะx-a-m-p-pตัวย่อนะคะxamppซึ่งก็จะมีทั้งforwindows,formacนะคะปกติปัจจุบันนี่ก็จะใช้ตัวxamppก็จะเยอะนะคะซึ่งเราก็จะมีการติดตั้งxamppนะคะไม่รู้ว่าเครื่องเราได้ติดตั้งไว้หรือยังเดี๋ยวเราค่อยมาเช็กดูนะคะว่าเราติ(ค)ด(ร)ต(ื)ั(่)้(อ)งไ(ข)ว(อ)้(ง)ห(เ)รือเ(า)ป(น)ล(ี)่าได้ติดตั้งตัวwebserverไว้หรือยังนะคะทีนี้มาดูยุคของการพัฒนาเว็บนะคะยุคของการพัฒนาเว็บยุคแรกๆเลยเราอาจจะเกิดไม่ทันนะคะกห(็)ร(ค)ือยุคของการพัฒนาเว็บแบบธรรมดานะคะอย่างเช่นพวกทำเว็บส่วนตัวนะคะหรือว่าเป็นblogนะคะที่สร้างขึ้นมาเองโดยที่ไม่มีการออกแบบฐานข้อมูลอะไรเราก็แค่เอาข้อมูลของเราไปใส่ไว้นะคะอันนี้ออกแบบง่ายนะคะออกแบบง่ายเวลาจะแก้ไขเปลี่ยนแปลงก็ต้องใช้เวลานานนะคะเพราะจะต้องมาแก้ไขที่เครื่องแล้วก็ต้องมีการอัพ(ป)เดท(ต)ขึ้นไปนะคะซึ่งจะใช้เวลาค่อนข้างนานนะคะยุคที่2จ(ก)ะ(็)เป็นเว็บw(แ)e(บ)b(บ)dynamicนะคะซึ่งยังอยู่ในเw(ว)e(็)b(บ)2.0อยู่นะคย(ะ)ั(ก)ง(็)เป็นเว็บที่มีการสร้างฐานข้อมูลเก็บข้อมูลต่างๆนะคะซึ่งปัจจุบันนี้ก็มีการยังสร้างเว็บไซต์ลักษณะนี้นะคะแต่ละองค์กรแต่ละหน่วยงานหรือว่าภาคธุรกิจต่างๆนี่ก็ยังต้องใช้เว็บไซต์นะคะอาศัยfเ(a)ฟ(c)ซ(e)บ(b)ุ(o)๊(o)ก(k)อย่างเดียวไม่ได้นะคะจะต้องมีเว็บไซต์เป็นของตัวเองอา(น)ศ(ะ)ั(ค)ย(ะ)ต้องมีเว็บไซต์ประจำหน่วยงานประจำองค์กรนะคะและก็ยุด(ค)ที่3เป็นwebserviceนะคะเว็บที่ให้บริการต่างๆนะคะซึ่งwebserviceก็อย่างเช่นพวกmicrosoftpassportนะคะหรือว่าให้บริการตรวจสอบความเป็นตัวตนผ่านเว็บไซต์นะคะเว็บเกี่ยวกับการส่งข้อความนะคะเว็บที่ให้บริการในเรื่องของภาพนะคะserviceให้บริการเรื่องภาพหรือว่าขายภาพนะคะพวกถ่ายรูปแล้วก็เอาลงขายนะคะหรือเว(w)็(e)บ(b)serviceอีกตัวหนึ่งอย่างเช่นเว็บไค(ซ)ื(ต)อ(์)gotoknowพวกเราน่าจะคุ้นเคยกันดีนะคะ.orgก็จะมีการโพสต์บทความความรู้ต่างๆp(น)o(ะ)s(ค)t(ะ)บทความหรือว่าองค์ความรู้ต่างๆที่ใครต้(ท)อ(ี)ง(่)พบองค์ความรู้กท(็)ี(จ)่(ะ)เอามาแชร์นะคะให้บริการในเรื่องของการแชร์บทความนะคะซึ่งในการพัฒนาเว็บไซต์นะคะแต่ละยุคแต่ละสมัยนี่ก็จะมีภาษาหรือว่าตัวโปรแกรมที่ใช้ในการพัฒนาเว็บนะคะก็จะมีฐานข้อมูลมีไฟล์นะคะรวมเป็นเนื้อหาเลยว่ารูปแบบเนื้อหาต่างๆซึ่่งในการออกแบบนี่ก็บางเว็บไซต์ก็จะใช้ตัวcmsนะคะหรือว่าตัวที่พัฒนาเว็บสำเร็จรูปนะคะหรือจะสร้างเว็บแบบถ้าเว็บแบบธรรมดานก(ี)็(่)จ(ก)ะ(็)ใช้พวกไฟล์pdf,htmlไฟล์textธรรมดานะคะถ้าเป็นเว(w)็(e)บ(b)ไ(d)ด(y)น(n)า(a)ม(m)ิ(i)ก(c)ก็จะใช้ภาษาphp,asp,pythonนะคะjavascriptต่างๆนะคะหรือจะใช้wordpressนะคะjoomla!นะคะตัวcmsนี่พวกwordpress,joomla,dด(r)ู(u).(p).(a).(l)ตัวที่นิยมมากที่สุดก็คือwordpresใ(s)น(ณ)ปัจจุบันนะคะเว็บไซต์ทั่วโลกนี่ประมาณ60เกือบ60เปอร์เซ็นต์นี่ใช้wordpressใช้wordpressเพราะว่าไม่ต้องมีความรู้เรื่องcodingไม่ต้องมีความรู้เรื่องเขียนโปรแกรมก็สามารถสร้างเว็บไซต์ได้นะคะซึ่งเราจะประยุกต์ใช้ตัวwordpressนี่นะคะมาสร้างเว็บนะคะก็คือwordpressจะให้แน่นไปเลยจริงๆwordpressนี่ถ้าเจาะลึกเรียนแบบอันนั้นจริงๆรู้ลึกจริงๆเราสามารถไปรับจ้างทำเว็บี(น)่(ะ)จ(ค)ะไปรับจ้างทำเว็บได้หลายๆองค์กรที่ใช้wordpressในการสร้างหรือว่ารับจ้างใ(อ)น(อ)กา(แ)ร(บ)อ(บ)อ(เ)ก(ว)แ(็)บไซตบ(์)สร้างเว็บไซต์นะคะถ้าเราเก่งทางwordpressนี่เราก็สามารถไปทำงานในองค์กรในหนั(่)บ(ว)จ(ย)้(ง)านนั้ง(น)ได้หรือเป็นฟรีแลนซ์เป็นผู้รับจ้างอิสระนะคะตอนนี้ครูตามโรงเรียนนะคะต้องการคนเก่งworldpressเพราะว่าเขาอยากจะเอาผลงานของเขาขึ้นเว็บนะคะจะทำอย่างไรนะคะอย่าง(ก)ไ(ใ)ด(ห)้ผลงานตัวเองขึ้นเว็บโชว์ขึ้นเว็บนะคะถ้าเราเป็นwordpressนี่เราสามารถรับงานนั้นมานะม(ค)า(ะ)ทำได้ก็ได้เงินนะคะโดยที่ไม่ต้องมานั่งเขียนโปรแกรมให้ยุ่งยากนะคะแค่เอาเนื้โ(อ)ด(ห)ย(า)ออกแบบเนื้อหาดีๆแล้วก็เอาใส่นะคะเรียนรู้ไม่ยากเลยนะคะเพราะว่าตัวwordpressก็ทำมาจาก...พัเ(ฒ)อ(น)ามาจากhtl(m)m(l)พัฒนามาจากphpใช้phpในการออกแบบนะคะมีทั้งระบบของadminแห(ล)ร(ะ)ื(ก)อ(็)ระบบของuserหรือว่าที่เขาเรียกว่า“ระบบหลังบ้าน-หน้าบ้าน”หลังบ้านจะเป็นส่วนของผู้ดูแลระบบหน้าบ้านจะเป็นส่วนของผู้ใช้ทั่วไปนะคะเราสามารถจัดการได้ง่ายเลยนะคะทีนี้ลักษณะภาษาscriptนะคะภาษาscriptที่ใช้ในการพัฒนาโปรแกรมอย่างที่อาจารย์บอกไปว่าตัวที่ทำงานฝั่งเครื่องผู้ใช้หรือว่ไ(า)ค(เ)รียกว่า“clientsidescrแ(i)อ(p)น(t)ส(”)ค(น)ร(ะ)ิ(ค)ป(ะ)คือภาษาที่ทำงานอยู่บนเครื่องผู้ใช้นะคะอย่างยกตัวอย่างไปเค(ม)ื่อกี้htmlนะคะเราสามารถเขียนhtmlโดยที่ไม่ต้องมีseverก็ได้นะคะอันนี้สามา(ค)ร(ื)ถ(อ)ทำไ(ง)ด(า)้(น)บนเครื่องผู้ใช้html,javascriptนะคะvbscript,jsscript,jscriptนะคะส่วนภาษาscriptที่ทำงานหรือประมวลผลที่ฝั่งเครื่องผู้ให้บริการก็คืออย่างเช่นพวกcgiพวกaspนะคะasp.netพวกตระกูล.netทั้งหลายนะคะphpนะคะpythonพวกนี้จะทำงานฝั่งserverซึ่งถ้าเราจะเขียนภาษาเหแ(ล)บ(่)บ(า)นี้เราจะต้องติดตั้งwebserverนะคะก็คือติดตั้งappserveติดตั้งxampr(p)นะคะเอาไว้ในเครื่องของเราก็คือทำให้เครื่องของเรานี่เป็นทั้งเครื่องผู้ให้บริการและเครื่องผู้ใช้บริการนะคะทีนี้websitedynamicนะคะจะต้องมีฐานข้อมูลนะคะซึ่งโปรแกรมที่นิยมใช้โปรแกรมฐานข้อมูลที่นิยมใช้บนเว็บนี่ก็จะมีmysqlนะคะmysqlaccessก็ใช้ได้แต่ว่าก็ขึ้นอยู่กับภาษานะจ(ค)ะขึ้นอยู่กับภาษาถ้าเราใช้phpก็จะใช้mysqlถ้าใครใช้aspก็จะใช้พวกaccessนะคะหรือว่า(a)h(s)p.netก็จะเป็นsqlserverนะคะถ้าเป็นdatabaseserverก็จะเป็นของlinuxนะคะเครื่องมือที่ใช้ในการตกแต่งกราฟิกสำหรับเว็บนะคะใต(น)การพแ(ั)ต(ฒ)่(น)าเง(ว)g(็)r(บ)a(ต)p(้)h(อ)i(ง)c(อ)ส(า)ำ(ศ)ห(ั)ร(ย)ั(ก)บ(ร)เ(า)ว(ฟ)็(ิ)บ(ก)ด้วยนะคะก็ต้องเก่งphotoshopคือไม่ต้องเก่งหรอกแค่ออกแบบได้นะคะแต่ถ้าเราฝึกเรื่อยๆก็อาจจะทำให้เราเก่งนะคะพวกphotoshop,imagera(e)e(a)dy,illustratorนะคะพวกตระกูลadobeทั้งหลายเอามาใช้ในการออกแบบพวกflashนะคะในการทำตัวภาพเคลื่อนไหวนะคะพวกนี้ก็ทำanmiationนะคะพวกmar(c)c(r)omediaflashนะคะswitchทีนี้มาดูโปรแกรมeditorที่ใช้ในการพัฒนาเว็บนะคะeditorก็คือเครื่องมือนะคะเครื่องมือที่เอามาเขียนเอามาเขียนเว็บนะคะeditorที่ใช้บ่อยในนี้อาจารย์อาจจะไม่ได้เอามาใส่นะคะพวกโปรแกรมdreamwv(e)i(a)w(v)erก็ใช้ไถ(ด)้นะคะแตา(่)อันนี้ถ้าเป็นcodingจริงๆนะคะแบบว่าเริ่มเขียนตั้งแต่บรรทัดแรกเลยนี่ก็คือพวกeditplusนะคะasp,editpluเ(s)ว(,)็(w)บ(e)ม(b)ิ(m)ต(e)ร(t)ิ(r)ก(i)ว(c)ิ(s)ช(,)ว(v)ล(i)ส(s)ต(u)ู(a)ด(l)ิ(s)โ(t)อ(u)ด(d)อ(i)ท(o)เ(.)น(n)็(e)ต(t)แล้วส่วนของpythonนี่มันจะมีให้ติดตั้งเครื่องมือเยอะแยะเลยใช่ไหมคะpythonให้เราใ(ต)ช(ิ)้(ด)ตั้ัว(ง)อะไรใช้ediต(t)ิ(o)ด(r)ตัวไ้(ห)ง(น)คะpythonนี่เรียนเทอมไหนปี1เทอม2ใช่หรือเปล่าลืมหรือยังแล้วเทอมที่แล้วปี2เทอม1ภาษาเขียนโปรแกรมภาษาคอมพิวเตอร์ก็ใช้pythonเหมือนกันใช่ไหมคะpythonหมดเลยแล้วมีลงอะไรบ้างลงโปรแกรมอะไรบ้างของpythonจำได้เปล่าอน(a)า(n)ค(a)อ(c)น(o)ด(n)้(d)า(a)ได้ลงไหมมันก็มีหลายตัวนะคะใช้หลายตัวอันนั้นก็เป็นeditorของการพัฒนาpythonนะคะมีพวกnetbeane(s)ก็ใช้เขียนพวกjavaนะคะjspeditpa(l)s(u)sแต่ปัจจุบันนี้ก็จะมีตัวใหม่ๆนะคะที่เขียนcodeที่เขานิยมใช้เดี๋ยวเราค่อยไปดูอีกทีหนึ่งนะคะว่าเราก็ไม่ได้เน้นcodingแต่เราใช้wordpressแต่เราก็ควรรู้ไว้ว่าถ้าเราจะเขียนphpนะคะเขียนjava,htmlหรือต้องมีโปรแกรมอะไรบ้างนะคะที่มันเขียนง่ายนะคะเท(ว)ี(ล)่(า)เราพิพ(ม)ม(พ)์ไปแล้วมันจะมีคำสั่งให้ก็เขียนได้รวดเร็วนะคะอันนี้เป็นเทคโนโลยีในการพัฒนาเw(ว)e(็)b(บ)applicationนะคะก็จะมีcommongatewayinterfaceตัวที่ใช้งานกับuserนะคะอันนี้เขียนภาษาc,c++นะคะเทคโนโลยีasp,phpนะคะอันนี้ก็คือตัวที่ใช้พัฒนาwebapplicationนะคะก็คือตัวที่ทำงานฝั่งserverนะคะแนวทางในการพัฒนาเว็บไซต์นะคะใครที่จะเขียนเว็บไซต์ขึ้นมาเองนี่จะต้องมีเครื่องมือประเภทที่เป็นtexteditorนะคะเรียป(น)รู้netbeanะ(s)เรียนรภ(ู)ท(้)editplusนะคะแล้วก็ทราบเครื่องมือที่ช่วยสร้างเว็บแบบสำเร็จพ(ร)ั(ู)ฒ(ป)นะคา(ะ)พวกwebbuilderก็อย่างเช่นพวกmacromediadreamweaverพวกเราเคยใช้dreamwv(e)i(a)verไหมคะเคยใช้มาไหมตอนอยู่มัธยมไม่เคยไม่เคยmacromediadreamwaverก็จะมีการพัฒนาแต่ละเv(ว)e(อ)r(ร)s(์)i(ช)o(ั)n(น)มาเรื่อยๆนะคะบางเวอร์ชันก็ง่ายจับลากวางเลยอันนี้ก็ไม่ต้องเขียนเยอะก็เขียนนิดหน่อยอย่างเช่นคำสั่งในการเชื่อมต่อกับฐานข้อมูลนะคะแต่เชื่อมต่อกับฐานข้อมูลบางทีก็ไม่ได้เขียนลากเลยนะคะคลิกใช้เอ(ม)าส์เ(ค)ลิกนะคย(ะ)ไม่ได้เขียนเยอะนะคะmicrosoftvisualstudioนะคะใครที่ถนัดทางด้านภาษาcนะคะc++,c#พวกนี้นะค3(ะ)หรือจะใช้ระบบcs(m)sก็คือcontentmag(n)agementsystemก็คือตัวที่จัดการเนื้อหานะคะจัดการเนื้อหาอย่างเช่นworldpressนะคะmambo,joomlaนะคะdrupalแต่ว่าตัวที่ใช้มากที่สุดนะคะก็คือwordpressนะคะเพราะว่ามีdesignที่สวยงามใช้งานง่ายนะคะเราสามารถที่จะจัดการเมนูจัดการsitebarนะคะก็คือในหน้าเว็บนี่เราสามารถที่จะจัดการได้โดยที่เราไม่ต้องเขียนโปรแกรมนะคะทีนี้มาตรฐานในการพัฒนาเว็บนะคะซึ่งเราจะต้องรู้ว่าในการพัฒนาเว็บนี่จะต้องมีมาตรฐานอะไรที่สามารถรองรับเว็บไซต์เรานะคะซึ่งเทคโนโลยีนี้(่)จะถูกกำหนดขึ้นเพื่อให้ใช้งานเว(w)็(e)บ(b)เ(b)บ(r)ร(o)า(w)ว(s)์(e)เ(r)ซ(ไ)อ(ด)ร(้)์(น)ไ(ะ)ด(ค)้(ะ)ทุกๆค่ายนะคะทุกๆบริษัทนะคะทุกๆหน่วยงานนะคะจะต้องสามารถรองรับเทคโนโลยีที่ใช้ร่วมกันได้ก็คือจะให้เป็นมาตรฐานหลักเป็นมาตรฐานเดียวกันสามารถเปิดใช้งานหนม(้)าเอกสต(า)รเว็บไฐ(ซ)า(ต)น(์)ได้อย่างมีประสิทธิภาพนะคะโดยจะมีเทคโนโลยีที่เป็นhtmlที่เป็นw3นะคะw3cนะคะก็คือตัวwebstandart(d)จะมี2มาตรฐานนะคะตัวแรกก็คือw3cw3cก็คือมาจากw3ก็คือworldwidewebนะค.(ะ)นะคะworldwidewebอันนี้เป็นมาตรฐานที่องค์กรระหว่างประเทศนะคะได้ทำงานร(ท)ะ(า)ห(ง)ว(ด)่(้)าง(น)การพัฒนาเทคโนโลยีเว็บจะมีอยู่3สถาบันก็คือmitในสหรัฐอเมริกาแล้วก็inl(r)iaในยุโรปแล(น)ะคิ(ะ)โ(แ)อ(ล)ะย(k)ู(e)น(i)ิ(o)เ(u)ว(n)อ(i)ร(v)์(e)ซ(r)ิ(s)ต(i)ี(t)้(y)ในญี่ปุ่นนะคะซึ่งตัวนี้เป็นมาตรฐานที่รองรับกันทั่วโลกนะคะซึ่งมาตรฐานของw3cนะคะก็จะมีhtml5มีcss3นะคะแล้วก็มีด(d)อ(o)ม(m)นะคะซึ่งhtml5นะคะก็คือภาษาที่ที่แสดงเอกสารหน้าเว็บนะคะตัวนี้ก็จะมีเทคโนโลยีใหม่ๆเท(ข)ี(้)่(า)มี(า)การรองรับการสร้างเอกสารนะคะที่ออกแบบได้แสดงผลได้ทุกๆเครื่องทุกๆระบบปฏิบัติการนะคะหรือทุกๆมุมมองอย่างเช่นแสดงผลในหน้าจอมือถือนะคะเราทำเว็บไซต์ขึ้นมาแล้วเวลาที่ดูผลลัพธ์ของหน้าเว็บผ่านมือถือนี่นะคะมันก็จะถูกย่อนะคะอันนี้คือใช้มาตรฐานw3cนะคะซึ่งใช้html5ในการพัฒนานะคะแล้วก็css3ตัวcss3นี่ก็คือตัวที่จัดรูปแบบให้หน้าเว็บของเราดูสวยงามการใส่สีนะคะใส่สีพื้นการจัดขอบข้อความอะไรต่างๆนะคะก็คือการจัดให้เอกสารเราให้มีความสวยงามนะคะเป็นสัดส่วนแล้วก็domหรือว่าdocumentobjectmodelอันนี้เป็นภาษาที่บริก(ห)ารจัดการการแสดงผลนะคะการบริหารจัดการการแสดงผลก็คือแสดงผลบนหน้าจอนะคะว่ามันแสดงผลบนwindowsหรือแสดงผลบนmacนะคะหรือosต่างๆเพราะฉะนั้นทุกเว็บไซต์นะคะก็จะใช้มาตรฐานw3cถ้าหากเว็บไซต(ห)์(น)ที่ไม่ได้ใช้มาตรฐานนี้เวลาแสดงผลต่างกันต่างหน้าจอต่างเครื่องต่างอุปกรณ์นะคะมันก็จะไม่มีประสิทธิภาพในการแสดงผลนะคะมาตรฐานที่2นะคะก็คือe-c-m-aหรืออ่านว่าecmaนะแ(ค)อ(ะ)ก(e)ม(c)่(m)า(a)เป็นมาตรฐานของทางด้านยู(ุ)โรปeuropeancomputermanufacto(u)rersassociationstandarl(d)อันนี้เป็นการกำหนดมาตรฐานขอา(ง)สารสนเทศและการสื่อสารทางเทคโนโลยีหรือว่าทางด้านictนะคะก็จะมีในเรื่องของการแสดงผลของjavascriptนะคะjavascriptกับdomแล้วก็พวกเครื่องใช้ไฟฟ้านะคะอันนี้คือทางด้านมาตรฐานทาน(ง)ด้านictนะคะการใช้javascriptแล้วก็มาตรฐานของเครื่องใช้ไฟฟ้านะคะประโยชน์ของมาตรฐานของเว็บนะคะก็คือประโยชน์อันแรกก็คือด้านของการเข้าถึงตัวข้อมูลซ(น)ึ(ะ)่(ค)ง(ะ)ผู้ใช้สามารถเข้าถึงตัวข้อมูลนี้ได้อย่างรวดเร็วมีประสิทธิภาพแล้วก็ตรงตามความต้องการนะคะแล้วก็ด้านความเสถียรภาพนะคะความยืดหยุ่นในการแสดงผลนะคะไม่ว่าเราจะดูเว็บไซต์ผ่านอุปกรณ์ตัวไหนนะคะมันก็จะมีการจัดหน้านะคะเขาเรียกว่าอะไรล่ะดูผ่านหน้าจอคอมพ์(ฯ)มันก็จะเต็มรูปแบบหรือว่าดูผ่านหน้าจอมือถือหรือผ่านtabletนะคะมันก็จะแสดงผลได้เหมาะสมนะคะมาตรฐานการพัฒนาเว็บไซต์สำหรับเว็บต่างๆนี่เราสามารถเข้าไปดูที่มาตรฐานเว็บไซต์ของภาครัฐได้นะคะซึ่งจะมีประกาั(ศ)นะคะจะมีประกาศออกมาของรัฐนะคะอันนี้ก็เป็นเว็บไซต์ของภาครัฐสำนักงานพัฒนารัฐบาลดิจิทัลนะคะอันนี้ก็เป็นมาตรฐานเว็บไซต์ภาครัฐซึ่งจำง่ายๆก็คือที่เดียวทันใดทั่วะ(ไ)ค(ท)ะ(ย)ทุกั(เ)น(ว)ใ(ล)ด(า)ทั่วถึงเท่าไ(เ)ทียมและธรรมาภิบาลนะคะเว็บไซต์ที่สร้างมาจะต้องมีเอกลักษณ์โดดเด่นนะคะทันทีทันใดนะคะไม่ว่าอยู่ที่ไหนนะคะก็สามารถเข้าถึงได้นะคะเราสามารถที่จะเข้าไปอ่านแล้วก็ศึกษาข้อมูลมาตรฐานเว็บไซต์ของภาครัฐได้นะคะซึ่งก็จะมีการupdat(อ)e(ั)น(ป)ะ(เ)ค(ด)ะ(ต)ในฐานะที่เรานี่จะสร้างเว็บไซต์นะคะจะต้องรู้จักมาตรฐานรัฐบาลดิจิทัลนะคะอาจจะมีกฎระเบียบนะคะมีพรบ.ม(ก)ารต(บ)ริฐ(ห)ารแลน(ะ)การให้บริการนะคะซึ่งเราสามารถที่จะเข้ามาเรียนรู้ที่ชื่อเว็บไซต์dga.or.thหรือจะพิมพ์คำว่ามาตรฐานเว็บไซต์ภาครัฐนะคะเวลาที่เราทำออกแบบเว็บไซต์ของรัฐนะคะเวลาที่เราออกแบบเว็บไซต์ของรัฐนี่เราก(จ)็(ะ)ต้องเรียนรู้ข้อมูลตัวนี้ด้วยก็จะมีบทความมีความรู้ต่างๆเรื่องของblockchainนะคะเรื่องของปัญญาประดิษฐ์หรือaiก็จะมีความรู้เพิ่มเติมนะคะในเรื่องตัวนั้นเหล่านั้นนะโอ.เค.ถึงสไลด์สุดท้ายแล้วนะคะพวกเราได้เรียนรู้ทฤษฎีตั(ร)ว(ง)นี้ไม่ทราบว่าซึมซับบ้างไหมคะมีคำถามไหมไม่มีแต่อาจารย์จะมีคำถามนะคะมีคำถามและมีแบบฝึกหัดท้ายบทเรียนให้พวกเราแต่ก่อนอื่นนี่ก่อนที่อาจารย์จะเอาแบบฝึกหัดแบบฝึกหัดจะให้ทำบนclassroomนะคะใส่ที่classroomแต่ก่อนที่จะไปดูแบบฝึกหัดนี่จะให้เช็กเดี(อ)๋(ย)ย(า)ว(ก)ให้พวกเราตรวจเช็กดูว่าเครื่องของเรานี่มีการติดตั้งwebserverหรือยังซึ่งเราจะใช้webserverที่ชื่อว่า“xampp”นะคะโดยแต่ละคนนี่นะคะเข้าไปค้นที่เ(s)ส(e)ิ(a)ร(r)์(c)จ(h)ดูนะคะถ้าหากขึ้นแบบนี้แสดงว่าเครื่องได้จำลองเป็นwebserverแล้ำ(ว)ิ(น)ฆ(ะ)ำ(ค)พ(ะ)ว่าเครื่องเราได้จำลองเป็นwเ(e)ว(b)็(s)บ(e)เ(r)ซ(v)ิ(e)ร(r)์(แ)ฟ(ล)เ(้)วมีเอ(ค)รื่์(อ)แ(ง)ล(ไ)้(ห)ว(น)ที่ไม่มีตัวนี้บ้างไม่มีเครื่องสุรเชษฐ์ไม่มี1เครื่องเครื่องไหนอีกคะดูนะคะx-a-m-p-pก็คือเราจะใช้wordpressใช่ไหมคะถ้าหากว่าไม่มีตัวนี้นะคะถ้าไม่มีตัวนี้นี่เราจะใช้งานwordpressไม่ได้แต่ว่าเครื่องอาจารย์จะต้องได้ลงใหม่ซะแล้วสุรเชษฐ์จะนั่งเครื่องนั้นประจำใช่ไหมคะถ้ามีแบบนี้นะคะใช้ได้แต่ว่าถ้าขึ้นตัวะ(แ)ค(ด)ะ(ง)ถ้าขึ้นตัวแดงๆเดี๋ยวเรากดstartดูนะคะstartapacheกับmysqlสต(s)า(t)ร(a)์(r)ท(t)2ตัวmysqlmysqlถ้าใครขึ้นสีแดงนี้ขึ้นสีแดงไหมจะต้องได้ติดตั้งใหม่กลัวว่าจะมีปัญหาตอนที่ดึงข้อมูลจากฐานข้อมูลนะคะอันนี้mysqlstม(a)ั(r)น(t)แดงทั้งหมดเลยหรออย่างนี้จะต้องลงใหม่มันมีerrorstopไปที่จริงๆสถานะมันจะต้องไม่แดงนะคะทั้งสองอันเลยใช่ค่ะเราจะใช้แค่ตัวอา(a)ป(p)า(a)เ(c)ช(h)่(e)นะคะกับmysqlเพราะว่าสัปดาห์หน้าเราน่าจะได้ลงมือใช้worldpressอันนี้xamppเv(ว)e(อ)r(ร)s(์)i(ช)o(ั)n(น)3.2ถ้าอย่างนั้นเดี๋ยวเราไปดาวน์โหลดเวอร์ชั่นใหม่มาลงนะคะแต่ว่าเราจะต้องไปuninstallตัวเดิมออกก่อนนะคะuninstallออกเลยเราพิมพ์เข้าไปที่ตัวsearchwindowsเห็นไหมี(ค)่(ะ)จะได้ไม่ต้องค้นหาเยอะถ้าเห็นปุ่มuninstallเราก็กดเลยค่ะuninstallออกไปก่อนเดแ(ี)ล(๋)้(ย)วเราค่อยโหลดตัวใหม่มาลงuninstallลบโปรแกรมออกจากเครื่องเข้าไปเลื่อนหาโปรแกรมนะคะชื่อโปรแกรมแล้วก็กดuninstallมันจะถามเราอีกรอบว่าคุณต้องการลบโปรแกรมxamappออกนะคะต้องการไหมกดyesมาขั้นตอนนี้หรือยังมาขั้นตอนนี้หรือยังใครไม่ทันยกมือนะคะremoveออกด้วยนะคะremovefolderถามว(ก)่อา(น)วิชาอื่นมันมีงานตรงนี้หรือเปล่ายังไม่มีนะโอ.เค.ตกใจนึกว่าวิชาอื่นได้ใช้กดyesเลยนะอย่างนั้นวิชานี้เราจองเราลบใหม่เพราะถ้าไม่ลบเดี๋ยวข้อมูลเดิมจะมีเยอะเลยเพียบเลยไม่รู้ว่าข้อมูลเดิมที่อาจารย์เคยสอนเมื่อปีที่แล้วยังอยู่หรือเปไ(ล)ห(่)ม(า)ลบทิ้งไปเลยนะคะเดี๋ยวรอสักครู่เ(ร)ด(อ)ี(ใ)๋(ห)ย(้)ว(ม)ร(ั)อ(น)ลบโปรแม(ก)ด(ร)ู(ม)ลบต(โ)่(ม)า(ด)ง(ู)ๆ(ล)ต่างๆออกจากเครื่องให้หมดก่อนเราจะได้เอาเv(ว)e(อ)r(ร)s(์)i(ช)o(ั)n(น)ใหม่มาลงเราจะได้เรียนรู้ในการติดตั้งเองด้วยเผื่อจะเอาไปติดตั้งที่เครื่องโน้ตบุ๊กของตัวเองนะคะเห็นไหมข้อมูลเยอะก็เลยใช้เวลานานในการลบนะคะระหว่างรอให้โปรแกรมมันลบไปนี่ไปเบรกได้นะคะไปเบรกเข้าห้องน้ำไปพักเบรกได้นะคะเดี๋ยวอาจารย์ล่ามไปพักเบรกก็ได้สัก5นาทีเครื่องไหนuninstallcompleteแล้วหรือว่าสมบูรณ์แล้วก็ไปดd(า)o(ว)w(น)n(์)l(โ)o(ห)a(ล)d(ด)xamppforwindownsมานะคะโอ.เค.นะคะกดดาวน์โหลดได้เลยแล้วก็ดูที่แถบด้านล่างนะคะstatusbarรอประมาณ1นาทีกดดาวน์โหลดเลยค่ะตรงนี้นะคะกดdown(า)l(ว)o(น)a(์)d(โ)เ(ห)ลย(ด)น(x)ะ(a)ค(m)ะ(p)d(p)o(f)w(o)n(r)l(w)o(i)a(n)dx(o)a(w)m(s)หน้านี้ใช่ไหมคะมันจะโหลดให้เราแล้วเราดูที่statusbarด้านล่างนะคะโหลดประมาณ1นาทีตัวนี้ใช่ไหมคะกดหรือยังค่ะค่ะเลือกตัวแรกforwindowsตัวนี้สถานะดาวน์โหลดมันบอกว่าdownloadacceptใครที่ยังดาวน์โหลดไม่เสร็จรอโหลดเสร็จแล้วนะคะd(ด)o(ั)u(บ)b(เ)l(บ)e(ิ)c(ล)l(ค)i(ล)c(ิ)k(ก)ไปที่ไฟล์.exeมันถามอะไรเรากดo.kไปเลยนะแล้วก็ตรงนี้กดnextไปนะคะแล้วต(อ)ร(ั)ง(น)นี้ก็เลือกหมดเลยกดnextเผื่ออนาคตเราจะเขียนตัวอื่นกดnextถ้ามันขึ้นแบบนี้แสดงว่าในdriv(s)e(k)cมันมีด(โ)ฟล์เดอร์ซ้ำนะคะเราไปที่diskcแล้วก็ไปลบโฟลเดอร์เดิมออกนะคะใช่ค่ะลบเลยค่ะกดdeleteไปเลยค่ะแล้วก็nextนะคะอันนี้เอาเครื่องหมายถูกออกเพราะว่าเวลาติดตั้งเสร็จเราจะได้ไม่ต้องวิ่งเข้าลิงก์นี้นะคะเราไม่เข้าไปดูกดnextไปnextไปแล้วก็รอนะคะเครื่องไหนที่ติดตั้งสมบูรณ์แล้วนะคะกดที่ปุ่มfinishหรือเสร็จสิ้นได้เลยเดี๋ยวเราค่อยหาวิธีแก้ตัวนี้นะคะที่มันerrorเดี๋ยวเราไปกดstartตัวอา(a)ป(p)า(a)เ(c)ช(h)่(e)กับmysqlตอนนี้mysp(q)lอาจารย์ยังstartไม่ได้แต่ว่าserverใช้ได้แต่ทีนี่ทดลองการใช้งานserverนะคะกดstartเสร็จแล้วไปพิมพ์localhostที่webbrownserนะคะพิมพ์localhostที่webbrowserถ้าหากว่าโชว์หน้าจอแบบนี้แสดงว่าwebserverของเรานี่ทำงานได้แล้วนี่ค่ะพิมพ์ลงไปที่...พิมพ์เข้าไปที่sitบ(e)า(b)ร(a)์(r)ตรงนี้นะคะไม่ได้ไปพิมพ์ในgoogleค้นหานะคะเราพิมพ์localhostนะคะlocalhostพิมพ์แบบนี้ไม่ได้ไปให้ค้นหานะให้ไปพิมพ์ที่ช่องนี้เลยนะคะurlนี่นะคะพิมพ์localhostแล้วกดenterนะคะได้ไหมคะถ้าพิพม์แล้วกดenterจะโชว์หน้าwebpageแบบนี้นะคะอันนี้คือแสดงว่าserverของเราพร้อมใช้งานแล้วนะคะเราติดตั้งเครื่องไหนเราก็จะได้นั่งประจำเครื่องนั้นนะเครื่องไหนที่เพื่อนไม่มาก็ลงไว้ด้วยนะคะหน้าจอนี้เป็นการทดลองserverนะคะถ(ว)้(่)าserverของเราพึ(ร)้อน(ม)แ(ใ)บ(ช)บ(้)น(ง)ี(า)้(น)แ(ไ)ส(ห)ด(ม)ง(น)ว(ะ)่(ค)า(ะ)ถ้าหากว่าขึ้นแบบนี้แสดงว่าserverของเราพร้อมใช้งานแล้วนะคะเดี๋ยวพุธหน้านี่เราจะติดตั้งwordpressนะคะติดตั้งwordpressที่นี้จะมีแบบฝึกหัดสำหรับวันนี้นะคะมีใครที่ยังไม่เข้าclassroomบ้างมีไหมคะอันนี้รหัสเข้าชั้นเรียนนะคะถ(ใ)้(ค)า(ร)ใ(ท)ค(ี)ร(่)ยังไม่เข้าก็ใช้รหัสนี้ได้เลยกำหนดส่งนะคะวัน...ภายในวันศุกร์โอ.เค.ไหมส่งภายในวันศุกร์นะคะส่งไม่ทันโดนตัดคะแนนคือส่งช้าน่ะส่งได้แต่ม(ว)ั(่)น(า)จะขึ้นว่าส่งล่าช้านะคะโอ.เค.พวกเราสามารถเปิดไฟล์ดูโจทย์คำถามนะคะแล้วก็สร้างไฟล์ตัวเองขึ้นมาใหม่นะคะแล้วบันทึกเป็นpdfแ(ต)ล(ั)้วบั(ง)น(ช)ท(ื)ึ(่)ก(อ)เป็นรหัสนักศึกษาแล้วก็กดส่งนะคะโหลดมาแล้วอย่าลืมกดส่งด้วยนะคะเพราะฉะนั้นมันจะไม่ขึ้นสถานะว่าส่งงานมีทั้งหมด10ข้อนะคะเห็นโจทย์อยู่ใช่ไหมโอ.เค.ค่ะตามนั้นนะคะมีคำถามไหมสำหรับคาบนี้ส่วนตัวxamppนี่นะคะเราทดสอบแล้วโอ.เค.แล้วก็กดstopserverนะคะกดstopserverหรือหยุดการทำงานของserverตอนนี้เรายังไม่ได้ใช้serverตัวนี้นะคะเดี๋ยวสัปดาห์หน้านี่เราค่อยมาเริ่มใช้แล้วก็ติดตั้งwordpressมีเครื่องไหนที่ยังลงไม่เรียบร้อยบ้างเครื่องหน้าใช่ไหมมีข้อสงสัยหรือคำถามเพิ่มเติมไหมคะใครมีข้อสงสัยไหมยกมือถามไม่มีนะคะถ้าไม่มีคำถามเดี๋ยวเราเจอกันวิชานี้เจอกันพุธหน้านะคะแล้วก็กราฟิกเจอกันจันทร์หน้าค่ะโอ.เค.อย่างนั้นคาบนี้เจ(พ)อกันแค่นี้ค่ะขอบคุณค่ะ[สิ้นสุดการถอดความ]

 Public file