บทท 2

เอกสารและงานวจยทเกยวของ

ในการศกษาเรองการสรางและหาประสทธภาพระบบเวบบลอกเพอแบงปนขอมลการซอมคอมพวเตอรโนตบค ส าหรบชางซอมคอมพวเตอรโนตบค ผวจยไดรวบรวมแนวคดทฤษฎ และหลกการตาง ๆ จากเอกสารและงานวจยทเกยวของ ดงตอไปน

2.1 ทฤษฎและหลกการทเกยวของ

2.1.1 เวบไซต 2.1.2 พนฐานโปรแกรม Adobe Dreamweaver

2.1.3 โปรแกรม xampp 2.1.4 โครงสรางของภาษา HTML

2.1.5 โครงสรางของภาษา PHP

2.1.6 โครงสรางของภาษา JavaScript 2.1.7 โครงสรางของภาษา CSS

2.1.8 ระบบฐานขอมล 2.1.9 เวบบลอก

2.1.10 หลกการท างานของเวบไซต 2.1.11 Web Document 2.2 งานวจยทเกยวของ

2.1 ทฤษฏและหลกการทเกยวของ

2.1.1 เวบไซต

เวบไซต (องกฤษ: website, web site หรอ site) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผาทาง

ไฮเปอรลงก สวนใหญจดท าขนเพอน าเสนอขอมลผานคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนาแรกของเวบไซตทเกบไวทชอหลกจะเรยกวา โฮมเพจ เวบไซตโดยทวไปจะใหบรการตอผใชฟร แตในขณะเดยวกน

บางเวบไซตจ าเปนตองมการสมครสมาชกและเสยคาบรการเพอทจะดขอมล ในเวบไซตนนซงไดแกขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตาง ๆ ผท าเวบไซตมหลากหลายระดบ ตงแตสรางเวบไซตสวนตว

จนถงระดบเวบไซตส าหรบธรกจหรอองคกรตาง ๆ การเรยกดเวบไซตโดยทวไปนยมเรยกดผานซอฟตแวรใน

ลกษณะของ เวบเบราวเซอร เวบไซตแหงแรกของโลกถกสรางขนเมอ 30 เมษายน พ.ศ. 2536 โดยวศวกรของ

เซรน

ประเภทของเวบไซตสามารถแบอกไดเปน 7 ประเภท

1) เวบไซตสวนตว (Personal website) เปนเวบทสรางขนเพอเผยแพรขอมลสวนตว เชน ขอมล

เกยวกบสวนตว การศกษา การงานความสนใจ เปนตน

2) เวบไซตเพอธรกจการคา (Promotional website) เวบไซตนมจดประสงค เพอการคาขายสนคา

การโฆษณาสนคาการสงเสรมการขาย ในเวบไซตจะมขอมลของสนคา ราคาและการบรการตางๆ ซงในปจจบนตลาดประเภทนก าลงใชกนมากขน

3) เวบไซตทเสนอขาวประจ าวน (Current website) เปนเวบทเสนอขอมลประเภทขาว ซงจะ

เปลยนไปเปนประจ าวน เชน เวบไซตของหนงสอพมพไทยรฐ เดลนวส เปนตน

4) เวบไซตสงเสรมการบรการเปนสอกลางของขอมล (Share Information website) เปนเวบทม

จดประสงคทจะใชเปนการแลกเปลยนขอมลตามกลมสนใจ เชน แบงตามอาชพ ตามงานอดเรก เปนตน

5) เวบไซตทสรางขนเพอชกชวนหรอโฆษณาชวนเชอ (Persuasive website) เปนเวบทเชญชวนหรอ

ชกน าใหเหนคลอยตามในเรองทผสรางตองการ

6) เวบไซตเพอการสอน (Instructional website) เปนเวบทสรางขนเปนการสอนโดยเฉพาะเปน

รายวชา (Course) อาจแยกยอยเปนหวเรองเรองยอย ๆ กได ส าหรบเวบไซตประเภทนจะจ ากดผใชเฉพาะราย

7) เวบไซตทจ ากดเฉพาะสมาชก (Registrational website) เปนเวบไซตทบรการเฉพาะสมาชก

เทานน ผทจะใชตองลงทะเบยนตามราคาทก าหนดโดยบตรเครดต หรอผานธนาคาร ผใหบรการจงจะให

หมายเลขสมาชกและรหสผาน แตการขายสนคาหรอบรการใด ๆ ของเวบไซตเหลาน จะเชญชวนผทสนใจโดยมตวอยางสนคาหรอบรการใหศกษาบางสวนจนพอใจดวย

2.1.2 พนฐานโปรแกรม Adobe Dreamweaver

Adobe Dreamweaver เปนโปรแกรมสาหรบพฒนาเวบไซต ซงมคณสมบตครอบคลมตงแตการออกแบบและสรางเวบและสรางเวบเพจ,การบรหารจดการเวบไซต ตลอดไปจนถงการพฒนาเวบแอพพลเคชน

เบองตนโปรแกรมนไดรบความนยมเปนอยางมากเพราะมคณสมบตเดนคอใชงานงายมเครองมอส าหรบวางขอความ ภาพกราฟก ตาราง แบบฟอรม มลตมเดย รวมทงองคประกอบตาง ๆเพอโตตอบกบผชมลงบนเวบเพจ

ไดงายโดยผใชไมจ าเปนตองรจกภาษา HTML,CSS, JavaScript และภาษาสครปตอน ๆ ดงนนจงเหมาะส าหรบผ

เรมตนและผใชทวไป นอกจากนยงมคณสมบตขนสงอกมากมายสาหรบนกพฒนาเวบไซตมออาชพดวยเชนกน

Dreamweaver เปนโปรแกรมทชวยใหเขยนเวบไซตไดงายขน แกไขไดงายขน และมเครองมออ านวย

ความสะดวกมากมายทมประโยชนในการท าเวบไซต

สวนประกอบหนาจอโปรแกรม Adobe Dreamweaver CS6

เมอเปดโปรแกรมAdobe Dreamweaver แลวจะไดหนาตางโปรแกรมซงมสวนประกอบหลกดงน

1) Menu bar

Menu bar เปนทรวมค าสงทงหมดของโปรแกรม Dreamweaver ทใชในการจดการกบไฟล เวบเพจ

ประกอบดวยเมนแสดง Menu bar ประกอบดวยเมนยอย ดงแสดงในรปท 2.1

รปท 2.1 Menu bar

1.1) File เปนเมนค าสงส าหรบจดการกบไฟลเวบเพจ เชน สรางเวบเพจใหม บนทกเวบเพจ เปด

เวบเพจ แสดงเวบเพจผานบราวเซอรหรอออกจากโปรแกรม เปนตน

1.2) Edit เปนเมนค าสงส าหรบการแกไข เชน คดลอก ตด วาง คนหา รวมถงการ ตงคาการท างาน(Preference) ตาง ๆ เปนตน

1.3) View เปนเมนค าสงส าหรบปรบเปลยนมมมองของเวบเพจขณะท างาน

1.4) Insert เปนเมนค าสงส าหรบแทรกวตถตาง ๆ เชน รปภาพ เสยง ตาราง ฟอรมตาง ๆ ลงบนเวบเพจ เปนตน

1.5) Modify เปนเมนค าสงส าหรบแกไขวตถตาง ๆ บนเวบเพจ เชน การแกไข รปแบบ

ตวอกษร การแกไขรปภาพ การจดการตารางหรอการก าหนดคณสมบตของเวบเพจ เปนตน 1.6) Format เปนเมนค าสงส าหรบเปลยนรปแบบโดยรวมของขอความบนเวบเพจ เชน การ

จดรปแบบขอความ การสรางหวขอรายการ 1.7) Command เปนเมนค าสงส าหรบจดการกบชดค าสงตาง ๆ บนเวบเพจทท างานอย

1.8) Site เปนเมนค าสงส าหรบจดการกบ Site เชน สราง Site หรอแกไข Site ทท างานรวมถงการ

ตรวจสอบลงคตาง ๆ ใน Site เปนตน 1.9) Window เปนเมนทใชในการเปดหรอปดพาแนลทท างานอย

1.10) Help เปนเมนทใชในการขอความชวยเหลอผานเวบไซต Adobe

2) Toolbar

Toolbar เปนแถบเครองมอทใชรวมป มค าสงทจ าเปนตองใชงานเปนประจ า สามารถ เปด/ปดการ

ใชงานได Toolbars ประกอบดวยแถบเครองมอดงน 2.1) Document Toolbar เปนทลบารทประกอบไปดวยป มค าสงในการก าหนดมมมองการแสดง

เวบเพจ การแสดงความละเอยดของหนาเวบเพจ การโอนยายไฟล หรอการก าหนดค าอธบายเวบเพจ

ดงแสดงในรปท 2.2

รปท 2.2 Document Toolbar

2.2) Standard Toolbar เปนทลบารทประกอบไปดวยป มค าสงพนฐาน ทใชในการจดการไฟล เชน

การสรางไฟล บนทกไฟลเปดไฟลคดลอก ยาย หรอวางเนอหาตลอดจนการยกเลกหรอท าซ าค าสง ดงแสดงในรปท 2.3

รปท 2.3 Standard Toolbar

2.3) Style Rendering Toolbar เปนทลบารทออกแบบมาเพอใหแสดงการท างานของหนาเวบเพจท

ใช Style Sheet บนมเดยประเภทตาง ๆเชน บนหนาจอคอมพวเตอร บนเครองพมพ บนโปรเจคเตอร บนทว

การเพม/ลดขนาดตวอกษรตลอดจนการแสดงสของสถานการณเชอมโยง ดงแสดงในรปท 2.4

รปท 2.4 Style Rendering Toolbar

2.4) Application bar เปนแถบประยกต ประกอบดวยแถบเครองมอ ดงแสดงในรปท 2.5

รปท 2.5 Application bar

Application bar ประกอบดวยเครองมอส าหรบเลอกรปแบบการแสดงพนทส าหรบสราง

หนาเวบเพจเชน Code Split หรอDesign เปนตน ส าหรบคนหาและตดตงโปรแกรมเสรมส าหรบบรหารจดการ

ไซต เชน สรางไซตใหม 2.5) Workspace switcher เปนป มส าหรบเปลยนมมมองพนทท างาน (Workspace) โดยสามารถ

เลอกไดวาตองการใชงานรปแบบในลกษณะใด ซงใน Adobe Dreamweaver CS6 มใหเลอกใช 11 แบบ ดงแสดงในรปท 2.6

รปท 2.6 Workspace switcher

2.6) Insert panel เปนพาแนลทรวบรวมกลมค าสงทใชส าหรบสรางและแทรกออบเจคตาง ๆ แบง

ออกเปนกลม เพอใหใชงานไดสะดวกวธเรยกใช คลกเมน Window > Insert ตวอยางกลมค าสงทใชงาน ดงแสดงในรปท 2.7 ถง 2.11

รปท 2.7 Common

เปนกลมค าสงส าหรบวางออบเจค ทตองใชงานเปนประจ า เชน รปภาพ ตาราง ไฟลมลตมเดย หรอ

ลงค เปนตน

รปท 2.8 Layout

เปนกลมค าสงส าหรบวางออบเจค ทใชจดหนาเวบเพจ เชน AP Element หรอ ตาราง เปนตน

รปท 2.9 Forms

เปนกลมค าสงส าหรบวางออบเจค ทเปนฟอรมรบขอมล

รปท 2.10 Text

เปนกลมค าสงส าหรบจดรปแบบขอความ เชนท าตวหนา เอยง หรอใสlistรายการ รวมทงแทรกสญลกษณพเศษตาง ๆ

รปท 2.11 Data

เปนกลมค าสงส าหรบจดการฐานขอมลและดงขอมลจากฐานขอมลมาแสดงบนเวบเพจ

2.7) กลมพาแนลการท างาน (Panel Group) เปนพาแนลหนาตางขนาดเลก ทรวบรวมเครองมอไวเปนกลมตามหนาท ส าหรบใชงาน เฉพาะ

เรองไวโดยสามารถเปดหรอปดพาแนลการท างานไดโดยคลกเมนค าสง Window แลวคลกเลอกพาแนลทตองการ ดงแสดงในรป 2.12

รปท 2.12 Panel Group

การเปดหรอปดพาแนลการท างาน

1) CSS Styles Panel เปนพาแนลทใชส าหรบ จดการกบสไตล CSS เชน การสราง การแกไข การ

ลบหรอการก าหนดคณสมบตตาง ๆ ของCSS ดงแสดงในรปท 2.13

รปท 2.13 CSS Styles Panel

2) File Panel เปนพาแนลทใชส าหรบจดการกบไฟลเวบเพจ ทงไฟลรปภาพ ไฟล HTML ไฟลมลตมเดยและโฟลเดอรภายในเวบไซตหรอสามารถทดสอบการท างานของเวบเพจผานเซรฟเวอรได ดงแสดง

ในรปท 2.14

รปท 2.14 File Panel

3) Database panel เปนพาแนลทใชส าหรบสรางและจดการใหเวบเพจสามารถเชอมตอกบ

ฐานขอมล ดงแสดงในรปท 2.15

รปท 2.15 Database panel

2.1.3 โปรแกรม xampp

เปนโปรแกรม Apache web server ไวจ าลอง web server เพอไวทดสอบ สครปหรอเวบไซตในเครองโดยทไมตองเชอมตออนเตอรเนตและไมตองมคาใชจายใด ๆ งายตอการตดตงและใชงานโปรแกรม Xampp จะมาพรอมกบ PHP ภาษาส าหรบพฒนาเวบแอพลเคชนทเปนทนยม ,MySQLฐานขอมล, Apache จะท าหนาทเปนเวบ เซรฟเวอร Perl อกทงยงมาพรอมกบ OpenSSL , phpMyadmin ( ระบบบรหารฐานขอมลทพฒนาโดย PHP ) เพอใชเชอมตอไปยงฐานขอมล สนบสนนฐานขอมล MySQL และ SQLite โปรแกรม Xampp จะอยในรปแบบของไฟล Zip, tar, 7z หรอ exe โปรแกรม Xampp อยภายใตใบอนญาตของ GNU General Public License โปรแกรม XAMPP สามารถใชงานได 4 OS ไดแก 1) Windows สามารถใชงานไดกบ windows รน 2000, 2003, xp, vista, windows 7 และอน ๆ 2) Linux ส าหรบ SuSE, RedHat, Mandrake, Debian และ Ubuntu 3) Mac OS 4) Solaris ส าหรบ Solaris 8 และ Solaris 9 ในการใชงานเบองตนใหเขาโปรแกรมXampp แลวท าการคลกป ม start จากนนสามารถใชงานได โดยเปด Browser ขนมาพมพ localhost หรอ 127.0.0.1 ดงแสดงในรปท 2.16

รปท 2.16 การเปดใชงานโปรแกรมXampp ขอจ ากดดานเทคนค 1) เครองคอมพวเตอรควรม RAM ไมต ากวา 128 MB

2) Harddisk มพนทมากกวา 320 MB 3) CPU ไมก าหนดขนต า 2.1.4 โครงสรางของภาษา HTML

การเขยนโฮมเพจดวยภาษา HTML นน เอกสาร HTML จะประกอบดวยสวนประกอบ2 สวน ดงน 1) สวน Head คอสวนทจะเปนหว (Header) ของหนาเอกสารทวไป หรอสวนชอเรอง(Title) ของหนาตางการท างานในระบบ Windows 2) สวน Body จะเปนสวนเนอหาของเอกสารนน ๆ ซงจะประกอบดวย Tag ค าสงในการจดรปแบบ หรอตกแตงเอกสาร HTML ในทงสองสวนนจะอยภายใน Tag…ดงน ค าสง หรอ Tag ทใชในภาษา HTML ประกอบไปดวยเครองหมายนอยกวา"<" ตามดวย ชอค าสงและ

ปดทายดวยเครองหมายมากกวา">" เปนสวนทท าหนาทตกแตงขอความ เพอ การแสดงผลขอมล โดยทวไป

ค าสงของ HTML สวนใหญจะอยเปนค มเพยงบาง ค าสงเทานน ทมรปแบบค าสงอยเพยงตวเดยว ในแตละค าสง

จะมค าสงเปดและปด ค าสงปดของแตละ ค าสงจะม รปแบบเหมอนค าสงเปด เพยงแตจะเพม "/" (Slash)น าหนา

ค าสงปดใหด แตกตาง เทานน และในค าสงเปดบางค าสง อาจมสวนขยายอนผสมอยดวย ในการเขยนค าสง

ภาษา HTML สามารถเขยนดวยตวอกษร เลกหรอใหญ ทงหมดหรอเขยนคละกนได เชน หรอ หรอ ซงจะใหผล

เหมอนกน ค าสงเรมตนของเอกสาร HTML

ค าสงเปนค าสงเรมตนในการเขยนโปรแกรมและค าสง เปนการสนสดโปรแกรม HTML ค าสงนจะไม

แสดงผลในโปรแกรมเวบเบราเซอรแตตองเขยนเพอใหเกดความเปนระบบของงาน และเพอจะใหรวาเอกสารนเปนเอกสารของภาษา HTML สวนหวเรองเอกสารเวบ (Head Section) Head Section เปนสวนทใชอธบาย

เกยวกบขอมลเฉพาะของหนาเวบนน ๆ เชน ชอเรองของหนาเวบ (Title), ชอผจดท าเวบ(Author), คยเวรดส าหรบการคนหา (Keyword) โดยม Tag ส าคญ คอ ขอความทใชเปน TITLE ไมควรพมพเกน 64 ตวอกษร, ไม

ตองใสลกษณะพเศษ เชน ตวหนา เอยง หรอสและควรใชภาษาทมความหมายครอบคลมถงเนอหาของเวบเพจ

นน หรอเปนค าส าคญในการคนหา (Keyword) Body Section เปนสวนเนอหาหลกของหนาเวบ ซงการแสดงผลจะตองใช Tag จ านวนมาก ขนอยกบ

ลกษณะของขอมล เชน ขอความ,รปภาพ, เสยง, วดโอ หรอไฟลตาง ๆ สวนเนอหาเอกสารเวบ เปนสวนการ

ท างานหลกของหนาเวบ ประกอบดวย Tag มากมายตามลกษณะของขอมลทตองการน าเสนอ การปอนค าสงใน

สวนน ไมมขอจ ากดสามารถปอนตดกน หรอ 1 บรรทดตอ 1 ค าสงกได แตสวนใหญจะยดรปแบบทอานงาย คอ

การท ายอหนาในชดค าสงทเกยวของกน ทงนใหปอนค าสงทงหมดภายใต Tag…

การสรางโฮมเพจดวยภาษา HTML ส าหรบกลมค าสงไดดงน

1) กลมค าสงจดรปแบบตวอกษร 2) กลมค าสงการจดรปแบบเอกสาร

3) กลมค าสงจดการรปภาพ

4) กลมค าสงการจดรปแบบฉากหลง 5) กลมค าสงจดการตาราง

6) กลมค าสงเกยวกบการเชอมโยง

2.1.5 โครงสรางของภาษา PHP

ในชวงแรกภาษาทนยมใชงานบนระบบเครอขาย คอ ภาษา HTML (Hypertext Markup Language) แตภาษา HTML มลกษณะเปน Staticคอ ภาษาทมลกษณะของขอมลคงท ซงไมเพยงพอตอความตองการในปจจบนทนยมใชระบบเครอขาย Internet เปนศนยกลางในการตดตอระหวางกนท าใหตองการใชเวบไซตทมลกษณะเปนแบบ Dynamic คอ เวบไซตทขอมลสามารถเปลยนแปลงไดโดยอตโนมตตามเงอนไขตาง ๆ ทผเขยนเวบไซตเปนผก าหนด และการควบคมการท างานเหลานจะกระท าโดยโปรแกรมภาษาสครปต เชน ภาษา PHP ซงเปนภาษาหนงทไดรบความนยมเปนอยางมากในปจจบน PHP ถกสรางขนในป ค.ศ.1994 โดย Rasmus Lerdorf ตอมามผใหความสนใจเปนจ านวนมาก จงไดออกเปนแพคเกจ "Personal HomePage" ซงเปนทมาของ PHP โดยภาษา PHP เปนแบบ Server Side Script และเปน Open Source ทผใชทวไปสามารถดาวนโหลด Source Codeและโปรแกรมไปใชฟร ไดท www.php.net พอกลางป ค.ศ.1995 เขากไดพฒนาตวแปลภาษา PHP ข นมาใหม โดยใชชอวา PHP/FI เวอรชน 2ซงไดเพมความสามารถในการรบขอมลทสงมาจากฟอรมของ HTML (จงมชอวา FI หรอ Form Interpreter) นอกจากนนยงเพมความสามารถในการตดตอกบฐานขอมลอกดวย จงท าใหผคนเรมหนมาสนใจ PHP กนมากขน ในป 1997 มผรวมพฒนา PHP เพมอก 2 คน คอ Zeev Suraski และAndi Gutmans (กลมทเรยกตวเองวา Zend ซงยอมาจาก Zeev และ Andi ) โดยไดแกไขขอบกพรองตาง ๆ และเพมเตมเครองมอใหมากขน 1) Simple program โปรแกรมแรกทคณจะไดเหนในภาษา PHP จะเปนโปรแกรมในการแสดงผขอความ "Hello World!"ออกทางหนาจอ 2) Comment คอมเมนต คอสวนของซอสโคดทไมมผลตอการท างานของโปรแกรม มนใชส าหรบการอธบายโปรแกรมเพอใหผเขยนเขาใจหรอสามารถอานโคดในภายหลงไดงายขน การคอมเมนตโคดมประโยชนมากในการท างานเปนทมเพอใหคนอนสามารถเขาใจโคดของเรา ในภาษา PHP สามารถเขยน

คอมเมนตไดหลายรปแบบ 3) Semicolon ในภาษา PHP เราใชเครองหมาย semicolon ; ในการจบค าสงการท างานของแตละค าสง เชนเดยวกบกบภาษา C หรอ C++ 4) While space คอชองวางระหวางค าสงทแทรกระหวางสวนของโคดออกจากกนเพอใหเกดเปนค าสงขน จ านวนของ White space ทตอเนองกนเปนจ านวนมากนนไมมผลในภาษา PHP 5) Literals คอคาคงทใด ๆ ภายในโคดของโปรแกรม ซงคาเหลานจะใชส าหรบก าหนดใหกบตวแปรหรอคาคงท ในภาษา PHP นนม Literals ประเภทตาง ๆ เชน ตวเลข ตวอกษร ขอความ และ Boolean เปนตน 6) Expressions คอนพจนของตวด าเนนการ (operator) และตวถกด าเนนการ (operand) ทกระท ากนตอในรปแบบของสมการและท าใหเกดคาใหมขนมาในการเขยนโปรแกรมตวถกด าเนนการกคอตวแปรทเมอท างานกบตวด าเนนการประเภทตาง ๆ แลวจะไดผลลพธใหมเกดขน 7) การแสดงผลทางหนาจอ การแสดงผลในภาษา PHP นนมกจะใชค าสง echo และ print ส าหรบจดการและเชอมตอกบ Output stream ซงโดยปกตแลวมกจะเปนจอภาพหรอConsole มาดตวอยางการแสดงผลในเบองตน 8) Keywords คอกลมของค าหรอค าสงทสงวนไวในภาษา PHP ส าหรบการท างานของ Interpreter ซงคณจะไมสามารถน าค าสงเหลานใชงานในบางอยางของโปรแกรมได เชน การตงชอตวแปร ฟงกชน คลาส เมธอด และอน ๆ ทผใชก าหนดขน ขางลางนเปนรายการ Keyword ในภาษา PHP 9) PHP embedded in HTML PHP นนเปนภาษาสครป ดงนนมนจงสามารถเขยนแทรกกบเอกสารรปแบบอน ๆ ไดซงโดยสวนมากแลวมกจะนยมเขยนกบ HTML เพอสรางหนาเวบเพจแบบไดนามกส 10) PHP in Console เขยน PHP บน Console ดงนนอาจจะมบางอยางทแตกตางจากเวบ เชน การแสดงผลขอความขนบรรทดใหม เราจะได \n ในขณะทในเวบนนจะเปนซงเปน Tag ค าสงใน HTML 2.1.6 โครงสรางของภาษา JavaScript JavaScript คอ ภาษาคอมพวเตอรส าหรบการเขยนโปรแกรมบนระบบอนเทอรเนต ทก าลงไดรบความนยมอยางสง Java JavaScript เปนภาษาสครปตเชงวตถ ทเรยกกนวา "สครปต" ซงในการสรางและพฒนาเวบไซตใชรวมกบ HTML เพอใหเวบไซตของเราดมการเคลอนไหว สามารถตอบสนองผใชงานไดมากขน ซงมวธการท างานในลกษณะ "แปลความและด าเนนงานไปทละค าสง" หรอเรยกวา ออปเจค โอเรยนเตด (Object Oriented Programming) ทมเปาหมายในการออกแบบและพฒนาโปรแกรมในระบบอนเทอรเนต ส าหรบผเขยนดวยภาษา HTML สามารถท างานขามแพลตฟอรมได JavaScript ถกพฒนาขนโดย เนตสเคปคอมมวนเคชนส (Netscape Communications Corporation) โดยใชชอวา Live Script ออกมาพรอมกบ Netscape Navigator2.0 เพอใชสรางเวบเพจโดยตดตอกบเซรฟเวอร

แบบ Live Wire ตอมาเนตสเคปจงไดรวมมอกบบรษทซนไมโครซสเตมส ปรบปรงระบบของบราวเซอรเพอใหสามารถตดตอใชงานกบ 11 ภาษาจาวาได และไดปรบปรง LiveScript ใหมเมอป 2538แลวต งชอใหมวา JavaScript เนองจาก JavaScript ชวยใหผพฒนา สามารถสรางเวบเพจไดตรงกบความตองการ และมความนาสนใจมากขนประกอบกบเปนภาษาเปดทใครกสามารถน าไปใชไดดงนน จงไดรบความนยมเปนอยางสง มการใชงานอยางกวางขวาง รวมทงไดถกก าหนดใหเปนมาตรฐานโดย ECMA การท างานของ JavaScript จะตองมการแปลความค าสง ซงขนตอนนจะถกจดการโดยบราวเซอร ดงนน JavaScript จงสามารถท างานไดเฉพาะบนบราวเซอรทสนบสนน ซงปจจบน บราวเซอรเกอบทงหมดกสนบสนน JavaScript แลว อยางไรกดสงทตองระวงคอ JavaScriptมการพฒนาเปนเวอรชนใหมๆ ออกมาตลอด(ปจจบนคอรน 2.0) ดงนน ถาน าโคดของเวอรชน ใหมไปรนบนบราวเซอรรนเกาทยงไมสนบสนนกอาจจะท าใหเกด error ได การเขยน JavaScript เราอาจเขยนรวมอยในไฟลเดยวกนกบ HTML ได ซงแตกตางจากการเขยนโปรแกรมภาษา Java ทตองเขยนแยกออกเปนไฟลตางหาก ไมสามารถเขยนรวมอยในไฟลเดยวกบ HTML ได วธการเขยน JavaScript เพอสงใหเวปเพจท างาน มอยดวยกน 2 วธ ดงน 1) เขยนดวยชดค าสงและฟงกชนของ JavaScript เอง 2) เขยนตามเหตการณทเกดขนตามการใชงานจากชดค าสงของ HTML เมอเรมใชงาน โปรแกรมบราวเซอร จะอานขอมลจากสวนบนของเพจ HTML และท างานไปตามล าดบจาก บนลงลาง (top-down) โดยเรมทสวน < HEAD >...< /HEAD > กอนจากนนจงท างานในสวน< BODY >...< /BODY > เปนล าดบตอมา การท างานของ JavaScript ดไมแตกตางไปจาก HTML เทาใดนก แต HTML จะวางเลยเอาตโครงสรางของออบเจกตภายใน และสวนเชอมโยงกบเวบเพจเทานน ในขณะท JavaScript สามารถเพมเตมสวนของการเขยนโปรแกรมและลอจกเขาไป 2.1.7 โครงสรางของภาษา CSS CSS คอชดค าสงทใชส าหรบการก าหนดการแสดงผลขอมลหนาเวบเพจ ซงชอเตมๆ ของ CSS คอ Cascading Style Sheetsเปนมาตรฐานหนงของ W3C ทก าหนดขนมา เพอใชในการแตงหนาเอกสารเวบเพจโดยเฉพาะ การใชงาน CSS จะเขามาชวยเพมความสามารถใหกบ HTML เดมทเราใชงานกนอยในปจจบน ซงในปจจบนน CSS ไดมาอยบนมาตรฐานทเวอรชน 2.0 (CSS2.0) โดยในปจจบนเวบไซตสวนใหญจะนยมใชงาน CSSกนเพมมากขน ทงนเนองจาก CSS มความสามารถในการตบแตงการแสดงผลขอมลหนาเวบเพจทเหนอกวา HTML บางเวบไซตทเหนบน Internet เรยกไดวาใช CSS ในการออกแบบ Layout ทงหมด ความสามารถของ CSS 1) CSS สามารถท าใหTEXT ทเปนจด Linkไมใหมการขดเสนใตได

2) CSS สามารถก าหนดการ FixขนาดของFontอกษรไดคอ เมอผเยยมชมปรบขนาด Fontท Browser ทขนาดเทาใดCSSกยงคงแสดงผลขนาด Font ทขนาดท ก าหนดไวเสมอ สงผลใหท าใหเวบเพจไมผดปกตตามขนาดของ Font ทผใช ปรบเปลยนทBrowser 3) CSS สามารถท าการก าหนดภาพพนหลง (Image Background) ใหไดต าแหนงและมรปแบบตามทตองการ 4) CSS ท าใหการปรบปรงเวบเพจในสวนของการแสดงผลท าไดอยางรวดเรวขน เนองจากเราสามารถปรบปรงคณสมบตของการแสดงผลไดจากจดๆเดยว แลวสงผลใหทงหนาเพจทมการใชงาน CSS ปรบปรงใหเปนไปตามทแกไข 5) เนองจาก CSS จะท างานรวมกบ HTML เปนหลกดงนนจงสามารถพมพโคดของ CSS แทรกไปยงโคดของ HTML ได 2.1.8 ระบบฐานขอมล ในการประกอบธรกจจะมขอมลตางๆเกดขนมากมาย ยกตวอยางเชน ขอมลลกคา ขอมลการสงของ ขอมลพนกงาน ฯลฯ ซงขอมลเหลานจะตองมการเกบรกษาทด นอกจากนนในการตดสนใจตางๆจะมขอมลทตองใชประมวลผลเพอประกอบการตดสนใจเปนจ านวนมากการน าขอมลเหลานมาใชนน ถาไมไดมการจดระเบยบการเกบทด กยอมน ามาใชไดอยางยากล าบาก ระบบฐานขอมลทมประสทธภาพจะมหนาทหลกๆดงตอไปน การเกบรกษาขอมล ระบบฐานขอมลจะชวยใหการเกบรกษาขอมลเปนระบบระเบยบ มการจดหมวดหม ของขอมล ซ งจะให ผจด เกบท า งานไดสะดวกมากข น และ ปองกนความผดพลาดได การน าขอมลไปใช ขอนจะเปนหวใจของระบบฐานขอมลเลยทเดยว ระบบฐานจะท าใหการดงขอมลออกมาใชสะดวกและมประสทธภาพมากขนการสรปขอมลและประมวลผลตางๆจะท าไดงายขน ซงจะท าใหสามารถน าขอมลไปประกอบการตดสนใจได ยกตวอยางเชนการเกบขอมลใบสงของจากลกคา ถาเราเกบโดยไมมระบบเชนเกบส าเนาใบเสรจทงหมดไว เรากจะมเพยงหลกฐานวาใครสงอะไรไปบางเทานนแตถามการเกบลงระบบฐานขอมล โดยเฉพาะอยางยงเมอใชคอมพวเตอรเขาชวย เราจะสามารถดงขอมลสรป ตาง ๆ ออกมาใชได เชน สามารถรวบรวมไดวา ลกคารายนสงอะไรบาง สนคารายการนถกสงไปเทาไร เหลออกเทาไร ฯลฯ การแกไขขอมล เปนอกความสามารถหนงทระบบฐานขอมลจะชวยใหท างานสะดวกขน ยกตวอยางเชน จากขอทแลวตวอยางใบสงของ ถาลกคามการเปลยนหมายเลขโทรศพทตดตอ เรากสามารถแกทเดยวได โดยไมตองเขาไปแกในใบสงของแตละใบ เปนตน ซงจากหนาทของระบบฐานขอมลจะท าใหเหนวา การเกบขอมลอยางมระบบกบไมมน น มความสามารถและประโยชนใชสอยตางกนมากซงกคงจะท าใหเหนประโยชนของฐานขอมลเดนชดขน

ระบบฐานขอมลคอมพวเตอร อนทจรงแลวนน ระบบฐานขอมลไมจ าเปนจะตององกบคอมพวเตอรเสมอไป ยกตวอยางเชนระบบบตรทะเบยนหนงสอในหองสมด ระบบบตรคนไข ฯลฯ แมแตการทเราจดบนทกหมายเลขโทรศพทของเพอน กถอไดวาเปนระบบฐานขอมลอยางหนง ซงระบบดงกลาวน ถามการใชหลกของการจดการฐานขอมลทถกตองแลวละก จะสามารถมความสะดวกในการใชสอยไดในระดบหนง แตทวาในปจจบนเมอเราพดถงระบบฐานขอมล เรากมกจะนกถงระบบฐานขอมลคอมพวเตอร การน าคอมพวเตอรมาใชในการจดการฐานขอมลนนอาจพดไดวา เปนการใชคอมพวเตอรทตรงกบขอเดนทสดของคอมพวเตอรอยางหนง กคอใชกบงานทมการท าซ าเปนจ านวนมาก มการประมวลผลท เปนระบบ ซงคอมพวเตอรจะไมมความผดพลาดอนเกดจากการเหนอยลา หลกการเลอกโปรแกรมระบบฐานขอมล การเลอกโปรแกรมระบบฐานขอมลมขอทควรค านงถงตอไปน จ านวนขอมลทรองรบได องคกรขนาดยอมอาจไมตองค านงถงมากนก แตตองคดถงการขยายในอนาคตดวย วธการน าขอมลไปใช โปรแกรมระบบฐานขอมลทกชนด จะมการเตรยมวธการน าขอมลไปใชไวอยแลว แตรปแบบของการน าไปใชจะแตกตางกน ในแตละประเภท ตรงน เราตองค านงถงวา การน าไปใชของเราเปนลกษณะใด เชน เราตองการรายงานออกมาในรปตารางสรป หรออาจตองการในรปของกราฟแสดงผลนอกจากนน ยงตองค านงถงวา การถายขอมลไปยงโปรแกรมอน ๆ ทเกยวของกระท าไดหรอไม มรปแบบการน าขอมลออกตรงกบทตองการหรอไม เชน ตองการน าขอมลไปเขาโปรแกรมวเคราะหทางสถต เปนตน ความเปนมาตรฐาน ความแพรหลาย ถาเราใชโปรแกรมทมจ านวนผใชมาก กจะท าใหการแลกเปลยนขอมลสะดวกขน นอกจากนนยงสามารถขอความชวยเหลอและพฒนาระบบตอไดโดยงาย ระบบความปลอดภย ตองค านงถงทงการเกบส ารองขอมลในกรณเกดปญหาทางฮารดแวร และ ระบบปองกนการเขาถงขอมลในกรณทเปนขอมลลบทอาจมการขโมยขอมลเกดขน ราคา โดยปกตแลว โปรแกรมทมความสามารถสงกยอมมราคาแพง เราอาจตองประเมนดวา จรง ๆแลวเราตองการความสามารถนน ๆ หรอเปลา

2.1.9 เวบบลอก บลอก ( Blog ) คอเวบไซตรปแบบหนง ทมลกษณะรปรางหนาตาคลายๆกบการเขยนไดอาร หรอ บนทกสวนตว ซงเปนทนยมกนมากในปจจบนค าวา "Blog" มาจากค าเตมวา "Weblog" ซงโดยนยแลวหมายถง การบนทกขอมลบนเวบ โดยผทเขยนบลอกเปนอาชพจะถกเรยกกนวา"บลอกเกอร" (Blogger) จดเดนทส าคญของ Blog คอ จะมระบบทผอานและผเขยนสามารถแสดงความคดเหนแลกเปลยนกนได โดยผานทางระบบ Comment ของบลอก ความสามารถของBlog 1) Blog เปนเวบไซดสวนตว เพอแชรขอมลสวนตวใหกบผอนๆ เชน บนทกไดอาร 2) เขยนBlog เพอบอกเลาเรองราวตางๆ น าเสนอสงทตนเองร หรอสงทตนเองสนใจ เพอแบงปนใหกบผอน 3) สรางBlog ท าเปนเวบไซดเพอใชในการโปรโมทธรกจ รานคา บรการตางๆ 4) ใชBlog ในการท าธรกจขายสนคาออนไลน (E-Commerce) 5) นอกจากน Blog ยงเปนชองทางหนงทนยมใชกบเพอหารายไดจาก Internet Marketing ขอดของบลอก 1) มอสระทจะน าเสนอสงตางๆ (ทไมไปกาวลวงบคคลอน และไมผดกฎกตกาของผใหบรการ Blog) 2) ปดโอกาสใหเจาของ Blog ไดรบฟงความคดเหนของผเขาชมและโตตอบกลบไดอยางอสระ 3) ไมจ าเปนตองมความรในดานภาษาโปรแกรมตางๆ 4) หากพอมความรดานภาษาเวบพนฐาน (HTML) จะสามารถชวยท าใหเขาไปแกไข Source Code ได 5) เพอปรบเปลยนรปแบบ Template ของ Blog ตามตองการ 6) สามารถใช Blog ในการท าธรกจหารายได จากการโปรโมทสนคาหรอบรการ 7) สามารถใชสรางเปนเครอขายสงคมออนไลนได 8) ใชงานไดฟร ไมเสยคาใชจาย (ยกเวนตองการจด Domain Name เปน .com .net .org .info) 9) Server มความเสถยรสง ปญหาในดานความชา หรอ Server ลม พบนอยมาก ขอเสยของบลอก 1) ฟงกชนและลกเลนตางๆ ยงมนอยหากเทยบกบเวบไซดทสรางเองหรอเวบไซดส าเรจรป 2) แมมรปแบบ Template ใหเลอกใชมากมายแตโครงสรางเวบกยงคงคอนขางตายตว เนองจากเปนบรการใหใชฟร หากเราท าผดกฎของผใหบรการ Blog เราจะถกแบน และมโอกาส 3) ถกลบ Blog ได (แตถาไมไดท าผดกฎอะไร กอยไดอยางยาวนานจนกวาผบรการจะเลกใหบรการ)

2.1.10 หลกการท างานของเวบไซต เครองลกขาย (Client) จะสงค ารองขอบรการ (Request) ไปทเครองแมขาย (Server) เมอเครองแมขายไดรบค ารองขอจะท าการคนหาบรการแลวตอบกลบ (Response) กลบไปหาลกขาย เมอเครองลกขายไดรบผลการตอบกลบแลวกจะแสดงผลออกทางหนาเวบเบราวเซอร ดงภาพทแสดงภาพท 2.17 และ 2.18

รปท 2.17 การท างานของเวบไซต

รปท 2.18 โครงสรางเวบไซตหรอโดเมน 2.1.11 Web Document Web Document แบงไดเปน 3 ประเภท 1) Static Web Document เปนเวบเพจทนงสงบ เวบเพจพวกนสวนใหญเปนเวบเพจทเขยนดวยภาษา HTML เปนตน Static Web Document มลกษณะเดนคอ ขอมลจะเปน Text File หรอเปน HTML ทงหมด ขอมลของเวบจะไมเปลยนจนกวา ผเขยนเวบแกไขขอมล และอปโหลดขนไปใหม แสดงผลผาน Web Browser ไดเรวแคโหลดขอมลมาแสดงผลเทานน โดย Web Browser จะตองมความสามารถในการประมวลผล ภาษาทใชซงกคอ HTML พฒนาไดงาย ภาษาทใชไมซบซอน 2) Dynamic Web Document เปนเวบเพจทสามารถเปลยนแปลงขอมลเองได โดยไมตองเขยนแตละหนาเวบเพจเอง เชน กระดานขาว (Webboard) ระบบสบคนขอมล สงเกตไดวา เมอมผมาตงกระท และ ตอบกระท กจะเกดหนาเวบเพจนน ๆ ขนไดเอง โดยทเราไมไดเปนคนสรางหนาเวบเพจเหลานนเอง เวบไซต รปแบบนจะถกสรางดวยภาษา Script แบบ Server Side Script เชน PHP, ASP, ASP.Net, JSP และอน ๆ ไฟล

เอกสารทไดจะมนามสกล .php, .asp เปนตน และมกจะมการตดตอกบฐานขอมลเพอบนทกขอมลลงในฐานขอมล หรอน าขอมลจากฐานขอมลขนมาแสดงผลเปนหนาเวบเพจ สวนการท างานของเวบไซตรปแบบ น จะตางจากแบบ Static Website โดยเมอมผชมเรยกดหนาเวบเพจ ไฟลหนาเวบเพจนนจะถกแปลและ execute ค าสงโดยตว Interpreter ทฝง Server ใหอยในรปแบบเอกสาร HTML กอน จงสงกลบให Web Server เพอสงตอไปใหโปรแกรมเวบเบราเซอรของผใชงานตอไป การสรางเวบไซตรปแบบน ตองอาศยความรในการเขยนโปรแกรมมากกวาแบบแรกมาก นอกจากจะตองมความรพนฐาน HTML แลว ยงตองเขยนภาษา Server Side Script เปนอยางนอย 1 ภาษา ตองรเรองการจดการฐานขอมล ตองเขยน SQL เพอจดการกบขอมลในฐานขอมลได และถาอยากใหระบบงานท างานไดอยางรวดเรวไมตอง Refresh หนาจอบอย ๆ ยงตองรเรอง AJAX อกดวย และในปจจบนมระบบทจะชวยใหเราจดการเนอหาเวบไซตไดอยาง สะดวก เรยกวา Web CMS เพยงแคเรยนรวธการใชงาน กสามารถสรางเวบไซตแบบ Dynamic ไดโดยไมตองเขยนโปรแกรมอะไรเลย เราสามารถทจะสรางเวบไซต โดยใหบางหนาเวบเพจ เปนแบบ Static ท ใช HTML ธรรมดา เขยน และใหบางหนาสรางเปนแบบ Dynamic โดยใชภาษา Script กไดเชนกน 3) Active Web Document เวบเพจพวกนเปนเวบเพจทมสวนของ Java Applet, Active X เปนตน โดยสวนใหญจะเนน Java เปนหลก(De Facto Standard) Active Web Document มลกษณะเดนคอ การโหลด เวบจะเปนการโหลด ซอรสโปรแกรม มาประมวล ทเครองไคลเอน (Web Browser) ดวย Web Browser ตองมตวประมวลผล ซอรสโปรแกรม เชน Java Runtime หรออน ๆ นอกเหนอจาก HTML สามารถเขยนซอรสโปรแกรม ให รเฟรช เฉพาะขอมลได โดยไมตองโหลดหนาเวบมาใหมเหมอน Dynamic Web เมอประมวลผลผาน Web Browser ซอรสโปรแกรม สามารถท าไดทกอยางภายในกรอบท Java Runtime ก าหนด พฒนายากกวาทงสองแบบ 2.2 งานวจยทเกยวของ นายศภชย ธรรมวงศ (2551) ท าการศกษาวจยเรอง การพฒนาระบบบรหารจดการขอมลบนเวบไซตส านกงานสาธารณสขจงหวดแมฮองสอน มวตถประสงคเพอปรบปรงเวบไซตส านกงานฯ ใหเปนแหลงเผยแพรขอมล ประชาสมพนธขอมลขาวสาร กจกรรม และเปนเครองมอในการท างานโดยใชภาษาพเอชพ และโปรแกรมจดการฐานขอมลมายเอสควแอล เวบไซตแบงได 2 สวนทส าคญ คอสวนของเจาหนาท และบคคลทวไป และสวนระบบบรหารจดการขอมล เปนสวนของผดแลระบบและผรบผดชอบจากแตละหนวยงานใหบรการขอมลไดแก ขอมลวสยทศน และยทธศาสตร การจองการใชงานหองประชม รถยนต เครองโปรเจคเตอร การจดการขอมลประชากรสถานการณโรคเอดส การจดอนดบสถานการณโรคตดตอตาง ๆ การจดการขอมลบคลากร การจดการไฟลดาวนโหลด การจดการอลบมภาพการจดการขาวกจกรรม ขาวประกวดราคา ขาวประชาสมพนธ บทความ ซงผลการประเมนความพงพอใจดวยแบบสอบถามพบวา

1) กลมผดแลระบบ มความพงพอในระดบด (คาเฉลย 4.35) 2) กลมเจาหนาททรบผดชอบขอมล มความพงพอใจในระดบด (คาเฉลย 4.25) 3) กลมเจาหนาท และบคคลทวไป มความพงพอใจระดบดมาก (คาเฉลย 4.75) สรปไดวาเวบไซตทพฒนาขนสามารถน าไปใชประโยชนไดจรง สมศกด เกดพม (2550 : 2) ไดออกแบบและปรบปรงเวบไซตของส านกฝกอบรมมหาวทยาลยเกษตรศาสตร บางเขน เพอแกไขและปรบปรงเวบไซตเดม โดยไดเลอกใช CMS ในการศกษาและพฒนา โดยมการออกแบบโครงสรางของเวบไซต และพฒนาเวบโดยอาศยอยบนหลกการของความนาเชอถอ และการใชงานทงายโดยเนอหาทน าเสนอนนจะประกอบไปดวยขอมลสารสนเทศ การรายงานขอมลทางการศกษา การดาวนโหลดเอกสารตาง ๆ ตลอดจนมตวอยางของวดทศนทนาสนใจ โดยผวจยไดผลสรปของการพฒนาวาเวบไซตไดรบ ความนยมใชงานมากขนถงรอยละ 80และใหขอเสนอแนะวาการพฒนาเวบไซตใหนาสนใจควรมชองทางใหผใชสามารถตดตอสอสารกลบมาได เชน การสรางเวบบอรดหรอกระดานสนทนา จากการศกษาเอกสารและงานวจยทเกยวของทกลาวมาขางตนสรปไดวา ระบบเวบบลอกแชรความรการ

ซอมคอมพวเตอรและโนตบคการวจยและนวตกรรมเปนการพฒนาระบบขอมลและการมสวนรวมในการจด

การศกษาอกทงเหมาะสมกบกระบวนการเรยน ท าหนาทเปนและกระตนในผเรยนเกดความสนใจทจะคนควาความรโดยผเรยนสามารถแสวงหาความรดวยตนเอง จากหลกการและเหตผลทกลาวมานผศกษาจงมความสนใจ

ในระบบเวบบลอกแชรความรการซอมคอมพวเตอรและโนตบค เพอใชเปนทคนหาและแบงปนความรในการ

ซอมคอมพวเตอรโนตบคของชางซอมคอมพวเตอรโนตบคและผทมความสนใจใหสงขนตามวตถประสงคทตองการ