การพัฒนาเว็บไซต์ห้องสมุด ... · 2016-08-30 · ภาพที่ 2.2 การเปรียบเทียบการท างานระหว่าง

การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ

เสนอ

อาจารยกฤษฎา คงชวย

จดท าโดย สวภา ตาลโกนกล

จามจร สรอยสน ยงยทธ เทยงธรรม

โครงการนเปนสวนหนงของการศกษาตามหลกสตร

ประกาศนยบตรวชาชพ (ปวช.) พทธศกราช 2556

ศนยการศกษานอกระบบและการศกษาตามอธยาศยอ าเภอพบลยรกษ

ส านกงานสงเสรมการศกษานอกระบบและการศกษาตามอธยาศยจงหวดอดรธาน ปการศกษา 2557

ใบรบรองโครงการ

ศนยการศกษานอกระบบและการศกษาตามอธยาศยอ าเภอพบลยรกษ

เรอง การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ

จดท าโดย สวภา ตาลโกนกล

จามจร สรอยสน

ยงยทธ เทยงธรรม

ไดรบอนมตใหนบเปนสวนหนงของการศกษาตามหลกสตรประกาศนยบตรวชาชพ พทธศกราช 2556

ประเภทวชาพาณชยกรรม สาขาวชาคอมพวเตอรธรกจ

......................................................................อาจารยทปรกษา

( นายกฤษฎา คงชวย )

......................................................................หวหนาสาขาคอมพวเตอรธรกจ

( นายสกล บญพา )

วนท........................เดอน.......................................พ.ศ.................................

คณะกรรมการสอบโครงการ

...........................................................................................ประธานกรรมการ

(.........................................................................................)

...........................................................................................กรรมการ

(.........................................................................................)

...........................................................................................กรรมการ

(.........................................................................................)

ชอโครงการ (ภาษาไทย) : การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ ชอโครงการ (ภาษาองกฤษ) : PUBLIC LIBRARY OF PIBOONRAK ทมพฒนา : สวภา ตาลโกนกล


อาจารยทปรกษา : นายกฤษฎา คงชวย ปการศกษา : 2557

บทคดยอ

โครงการ เรอง การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ มจดมงหมายเพอการ

พฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ แหงนใหทนสมย สะดวก รวดเรว และประหยดเวลา

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

คนหาขอมลหนงสอทอยภายในหองสมดประชาชน แหงนดวยเทคโนโลยททนสมยในยคปจจบนน

กตตกรรมประกาศ

การศกษาจดท าโครงการ เรองการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ นจะไม

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

การจดท า ปรบปรงแกไขตลอดจนใหก าลงใจโดยเฉพาะบคคลดงรายนามตอไปน

นางณฐชยา เออมอน ผอ านวยศนยการศกษานอกระบบและการศกษาตามอธยาศยอ าเภอ

พบลยรกษ และคณะครประจ าสาขาคอมพวเตอรธรกจ

นายกฤษฎา คงชวย อาจารยผสอนวชาโครงการ ทไดใหความรเกยวกบการศกษาออกแบบ

เครองและอ านวยความสะดวกในการใชอปกรณและสถานทไดด เสมอมา สดทายนจะลมเสยมได คอ

พระคณบดา-มารดา คร-อาจารย ทไดอบรมสนสอนประสานวชาตงแตอดตจนถงปจจบน

สวภา ตาลโกนกล


คณะทมพฒนา

สารบญ

บทคดยอ ค กตตกรรมประกาศ ง สารบญตาราง ช สารบญรปภาพ ซ บทท 1 บทนา

หลกการและเหตผล 1 วตถประสงค 1 เปาหมาย 2 ประโยชนทคาดวาจะไดรบ 2 วธการด าเนนงาน 2

บทท 2 เอกสารทเกยวของ ความหมายของเวบไซต (Website) และเวบเพจ (Webpage) 3 หลกการออกแบบเวบไซต 4 สวนประกอบของหนาเวบเพจ 6 แนวคดในการออกแบบ 6 ความหมายของ Content Management System (CMS) 6 การประยกตใช CMS 7 AppServ คออะไร 7 JQuery คออะไร 11 ความหมายของ Ajax 12 Java Script คออะไร 16

บทท 3 วธการด าเนนงาน การเตรยมการกอนเรมโครงการ 19 การด าเนนการ 19 งบประมาณคาใชจาย 19

บทท 4 ผลการทดลอง/การวเคราะหขอมล การทดสอบเวบไซต 20 ผลจากการทดสอบเวบไซต 21

บทท 5 สรป อภปรายผลและขอเสนอแนะ สรปผลการด าเนนงาน 23 ปญหาและอปสรรค 23 ขอเสนอแนะ 23

บรรณานกรม 24 ภาคผนวก 25

สารบญตาราง

ตารางท 1 แสดงวธการหรอขนตอนการด าเนนงาน 2

สารบญรปภาพ

ภาพท 2.1 การเปรยบเทยบการท างานของ Ajax 14

ภาพท 2.2 การเปรยบเทยบการท างานระหวาง Server และ Client ของ Ajax 15

ภาพท 2.3 หนาตาของ Photoshop CS5 18

ภาพท 4.1 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (หนาหลก) 20

ภาพท 4.2 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (ผลการคนหาหนงสอ “ภาษาไทย”) 20

ภาพท 4.3 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (หนาหลก) 21

ภาพท 4.4 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (ผลการคนหาหนงสอ “ภาษาไทย”) 21

ภาพท ก หนาหลกเวบไซต หองสมดประชาชน อ าเภอพบลยรกษ 26

ภาพท ข หมวดหนงสอทงหมดในหองสมดประชาชน อ าเภอพบลยรกษ 26

ภาพท ค เกยวกบหองสมดทงหมดในหองสมดประชาชน อ าเภอพบลยรกษ 27

ภาพท ง ตดตอสอบถามเจาหนาทหองสมดประชาชน อ าเภอพบลยรกษ 27

1

อาจารย กฤษฎา คงชวย ครผสอนหลกสตรประกาศนยบตรวชาชพ (ปวช.) พทธศกราช 2556 สาขาคอมพวเตอรธรกจ

บทท 1 บทนา

1.1 หลกการและเหตผล

ปจจบนเทคโนโลยสารสนเทศ อนเทอรเนตและการสอสารขอมลไดเขามามสวนส าคญเปนอยางมาก ส าหรบโรงเรยน องคกร และส านกงาน โดยเฉพาะการเผยแพรขอมลขาวสารตางๆ ของโรงเรยน องคกร และส านกงาน ใหกบบคคลภายนอกไดรบทราบขอมลในรปแบบของเวบไซต และเนองจากเวบไซตเปรยบเสมอนประตหรอชองทางแรกทบคคลภายนอกจะรบรขอมลขาวสารของโรงเรยน องคกร และส านกงาน ดงนนรปแบบการเผยแพรขอมลขาวสารจงเปนสงส าคญ เพอสรางความนาสนใจใหกบเวบไซตและยงบงบอกถงภาพลกษณ และ ศกยภาพของโรงเรยน องคกร และส านกงานอกดวย แตเนองจากการสรางเวบไซตโดยทวไปนน ผพฒนาจะตองมความรดานการออกแบบกราฟก ดานภาษา HTML และดานการเขยนโปรแกรม ท าใหในการสรางเวบไซตนนคอนขางใชระยะเวลา และความรพอสมควร Joomla! จงเปนเปนระบบทมาชวยในการสราง และบรหารจดการเวบไซตแบบส าเรจรป ทเรยกกนในชอ CMS (Content Management System) เปนซอฟตแวร Open Source ผใชสามารถน าไปตดตงใชงาน และพฒนาตอยอดไดโดยไมเสยคาใชจายใดๆ ในการใชงาน Joomla! ผใชงานแทบไมตองมความรในดานงานกราฟก และการเขยนโปรแกรม กสามารถสรางเวบไซตไดอยางมออาชพ ภายใน Joomla! ยงมโปรแกรมประยกตพรอมใชงานมากมาย อาท ระบบจดการบทความและขาวสาร ระบบจดการสมาชก ระบบสบคนขอมล ระบบจดการไฟลมเดยตางๆ ระบบปฏทนขาวกจกรรม ระบบรวมรปภาพเปนแกลอร เปนตน นบวาเปนระบบทชวยประหยดงบประมาณ ระยะเวลาในการจดท าเวบไซต และงายตอการบรหารจดการเปนอยางยง

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

1. เพอพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ 2. เพอพฒนาระบบการสบคาหาขอมลหนงสอไดอยางรวดเรว 3. เพอสรางความสามคคและฝกทกษะการท างานเปนทม

2


1.3 เปาหมาย

- เปาหมายเชงปรมาณ 1. พฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ 1 เวบไซต

- เปาหมายเชงคณภาพ 1. สามารถใชงานในการคนหาขอมลหนงสอไดสะดวก รวดเรว ปลอดภย และทนสมย

1.4 ประโยชนทคาดวาจะไดรบ

1. เปนเครองมอทอ านวยความสะดวก รวดเรว ในการคนหาขอมลหนงสอ ขอมลของหองสมด 2. เปนเครองมอทสามารถเพมประสทธภาพในการท างานไดมากขนเมอเปรยบเทยบกบการใชวธเดม

1.5 วธด าเนนการ

กจกรรม พ.ค. 57 ม.ย. 57 ก.ค. 57 ส.ค. 57 ก.ย. 57

หมายเหต 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. ขนเตรยมการ - ประชมวางแผน - ศกษาหาขอมล - จดท าโครงการ - น าเสนอโครงการ

2. ขนด าเนนการ - จดอปกรณ - ลงมอปฏบต - ทดสอบประสทธภาพ - ปรบปรงแกไข - จดท ารปเลม - สรางสอเพอน าเสนองาน

3. ขนน าเสนอ - สงรปเลมรายงาน - น าเสนอผลงานตอคณะกรรมการ

ตารางท 1 แสดงวธการหรอขนตอนการด าเนนงาน

3


บทท 2 เอกสารเกยวของ

2.1 ความหมายของเวบไซต (Website) และเวบเพจ (Webpage)

เอกสารหรอสวนทตดตอกบผใชในเวบ เรยกวา เวบเพจ (Webpage) หมายถง เอกสารหนงหนา การใชเวบกคอการเปดอานหรอเปดใชเวบแตละหนานนเอง เวบเพจอาจสรางขนดวยภาษาคอมพวเตอร เชน HTML, ASP, PHP, JAVA ฯลฯ

เมอน าเวบเพจหลาย ๆ หนามารวมกน และระบอยในอนเตอรเนต หรอ ยอารแอล (Uniform Resource Locator – URL) ใหกบเวบเพจกลมนนจะเรยกวา เวบไซต (Web Site)

เมอเปดเวบไซตขนมาจะพบกบหนาแรกของเวบไซต ซงเรยกวา โฮมเพจ (Homepage) ซงเปนหนาท ส าคญทสดและเปนหนาทจะเชอมโยงไปยงเวบเพจและเวบไซตอน ๆ เวบเบราเซอร (Web Browser)

เวบเบราเซอร (Web Browser) คอโปรแกรมทใชส าหรบเปดเวบเพจหรอ รบสงขอมลตามทเครองลกขายรองขอเมอเราเปดเขาสอนเตอรเนต เวบเบราเซอรทไดรบความนยมปจจบนมหลายโปรแกรม เชน Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera ภาษา HTML

ภาษา HTML ยอมาจากค าวา Hypertext Markup Language เปนภาษาทใชส าหรบสรางเวบเพจ โดยจะไดรบการแปลหรอการแสดงผลโดยเวบเบราเซอรซงสามารถแสดงไดทงขอความ ภาพ และเสยง โดเมนเนม (Domain Name)

โดเมนเนม (Domain Name) หรอทเขาใจกนทวไป คอ ชอเรยกเวบไซตนนเอง การจดทะเบยนโดเมนเนมจงเปนการลงทะเบยนชอใหกบเวบไซตของเราในโลกอนเตอรเนต โดเมนเนมทขอจดทะเบยนจะตองไมซ ากบคนอน และควรตงใหเกยวของกบเนอหาภายในเวบไซต หรอเกยวของกบสนคาและบรการ ตลอดจนใชค างาย ๆ ใหจ าได เชน nfe.go.th และ nfe-pbr.org เปนตน

4


ความหมายของซบโดเมน .com กลมองคการคา (Commercial) เชน www.kitsada.com .ac.th กลมการศกษา (Education) เชน www.udru.ac.th .go.th กลมองคการรฐบาล (Government) เชน www.nfe.go.th .mit กลมองคการทหาร (Military) เชน www.dtic.mil .net กลมองคการบรการเครอขาย (Network Services) เชน www.bcom.net .org กลมองคกรอนๆ (Organizations) เชน www.nfe-pbr.org

โดเมนทเปนชอยอของประเทศทนาสนใจ

โดเมนเนมเหลาน จะใชตอตอนทายสด เพอสะดวกในการอางองวาเปนโฮสตหรอเวบไซตทอย ในประเทศใด เชน www.ksc.net.th จะเหนวา ลงทายดวย .th จะเปนโดเมนของประเทศไทย

.au ออสเตรเลย Australia

.fr ฝรงเศส France

.hk ฮองกง Hong Kong

.jp ญปน Japan

.th ไทย Thailand

.sg สงคโปร Singapore

.uk องกฤษ United Kingdom

2.2 หลกการออกแบบเวบไซต

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

2.2.1 การวางแผน การวางแผนนบวามความส าคญมากในการสรางเวบไซต เพอใหการท างานในขนตอนตาง ๆ

มแนว ทางทชดเจนและสามารถปฏบตไดตามทตงเปาไว ซงประกอบดวย 2.2.2 การก าหนดเนอหาและจดประสงคของเวบไซต

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

5


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

ชมเวบไซตกนบวามสวนส าคญไมนอย เชน เวบไซตส าหรบเยาวชน นกเรยน นกศกษาในการคนหาขอมล หรอเวบไซตส าหรบบคคลทวไปทเขาไปใชบรการตาง ๆ เปนตน

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

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

2.2.5 การเตรยมสงตาง ๆ ทจ าเปน ในการออกแบบเวบไซตตองอาศยความสามารถตาง ๆ เชน โปรแกรมส าหรบราง เวบไซต

ภาพเคลอนไหว มลตมเดย การจดโดเมนเนม การหาผใหบรการรบฝากเวบไซต (Web Hosting) เปนตน 2.2.6 การจดโครงสรางขอมล

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

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

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

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

6


2.3 สวนประกอบของหนาเวบเพจ

เราสามารถจ าแนกสวนประกอบของหนาเวบเพจ เปน 3 สวน ดงน 1. สวนหว (Page Header) นาจะอยบรเวณบนสดของหนาเวบเพจ เปนสวนทแสดงชอเวบไซต โล

โก แบนเนอรโฆษณาลงกส าหรบขามไปยงหนาเวบอน 2. สวนเนอหา (Page Body) จะอยบรเวณตอนกลางของหนาเวบเพจ ซงเปนสวนทแสดงเนอหา

ภายในหนาเวบเพจนน โดยประกอบดวยขอความ ขอมล ภาพเคลอนไหว เปนตน 3. สวนทาย (Page Footer) จะอยบรเวณดานลางสดของหนาเวบเพจ สวนมากใชส าหรบลงก

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

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

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

2.5 ความหมายของ Content Management System (CMS)

ระบบการจดการเนอหาของเวบไซต (Content Management System : CMS) คอ ระบบทพ ฒนา ค ดค นข นมาเพ อช วยลดทร พยากรในการพ ฒนา (Development) และบร หาร(Management)เวบไซต ไมวาจะเปนเร องของกาลงคน ระยะเวลา และเงนทอง ท ใชในการสรางและควบคมดแลไซต โดยสวนใหญแลว มกจะนาเอา ภาษาสครปต (Script languages) ตางๆมาใช เพอใหวธการทางานเปนแบบอตโนมต ไมวาจะเปน PHP, Perl, ASP, Python หรอภาษาอนๆ(แลวแตความถนดของผพฒนา) ซงมกตองใชควบคกนกบโปรแกรมเวบเซรฟเวอร(เชน Apache) และดาตาเบสเซรฟเวอร เชน MySQL

ลกษณะเดนของ CMS กคอ มสวนของ Administration panel (เมนผควบคมระบบ) ทใชในการบรหารจดการสวนการทางานตางๆในเวบไซต ทาใหสามารถบรหารจดการเนอหาไดอยางรวดเรว และเนนทการ จดการระบบผานเวบ (Web interface) ในลกษณะรปแบบของ ระบบเวบทา(Portal Systems) โดยตวอยางของฟงกชนการทางาน ไดแก การนาเสนอบทความ (Articles), เวบไดเรคทอร(Web directory), เผยแพรขาวสารตางๆ (News), หวขอขาว(Headline), รายงานสภาพดนฟาอากาศ

7


(Weather), ขอมลขาวสารทนาสนใจ (Informations), ถาม/ตอบปญหา (FAQs), หองสนทนา (Chat), กระดานขาว (Forums), การจดการไฟลในสวนดาวนโหลด (Downloads), แบบสอบถาม (Polls), ขอมลสถตตางๆ (Statistics) และสวนอนๆอกมากมาย ทสามารถเพมเตม ดดแปลง แกไขแลวประยกตนามาใชงานใหเหมาะสมตามแตรปแบบและประเภทของเวบไซตนนๆ ตวอยางของเวบทสรางจาก CMS

· Slashdot=>พฒนาดวย Perl · Zope=>พฒนาดวย Python · PHP-Nuke =>พฒนาดวย PHP · Joomla =>พฒนาดวย PHP **** ไดรบความนยมมากในปจจบน อานตอทน

2.6 การประยกตใช CMS

ระบบ CMS สามารถนามาประยกตในงานตางๆ หลากหลาย ตวอยางการนาซอฟตแวร CMS มา ประยกตใชงาน อาทเชน

>> การนา CMS มาใชในการสรางเวบไซตสถาบนการศกษา ธรกจบนเทง หนงสอพมพ การเงน การธนาคาร หนและการลงทน อสงหารมทรพย งานบคคล งานประมล สถานททองเทยว งานใหบรการลกคา

>> การนา CMS มาใชในหนวยงานของรฐ อาทเชน งานขาว งานประชาสมพนธ การนาเสนองานตางๆขององคกร

>> การใช CMS สรางไซต สวนตว ชมรม สมาคม สมาพนธ โดยวธการแบงงานกนทา เปนสวนๆ ทาใหเกดความสามคค ทาใหมการทางานเปนทมเวรคมากยงขน

>> การนา CMS มาใชในการสรางเวบไซตสาหรบธรกจ SME โดยเฉพาะสนคาหนงต าบลหนงผลตภณฑหรอ OTOP กาลงไดรบความนยมสง

>> การนา CMS มาใชแทนโปรแกรมลขสทธ อนๆ เพอประหยดคาใชจาย และงายตอการพฒนา >> การใช CMS ทาเปน Intranet Web Site สรางเวบไซตใชภายในองคกร

2.7 AppServ คออะไร

2.7.1 ก าเนดโปรแกรม AppServ

ส าหรบโปรแกรม AppServ นไมไดเกดการสนบสนนจากหนวยงานรฐบาล หรอหนวยงานเอกชน หรอองคกรอสระ ใดๆเลยทงสน แตโปรแกรม AppServ ไดก าเนดจากแรงบนดาลใจจากเพอนของผพฒนาคนหนงทไดเรมศกษาภาษา PHP และฐานขอมล MySQL และมปญหาทกครงในการตดตง กวาจะตดตงไดกใชเวลาไมนอยกวา 3 ชวโมง บางทท าไดบางไมไดบาง และทกครงทตดตงไมไดกจะมาขอความ

8


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

2.7.2 ประวตนกพฒนาโปรแกรม AppServ

ส าหรบผพฒนานนไดอาศยอยในประเทศไทย ชอ ภาณพงศ ปญญาด ชอเลน apples เกดวนท 14 สงหาคม 2523 ส าเรจการศกษาระดบปรญญาตรจาก สถาบนราชภฏเชยงใหม คณะว ทยาศาสตรและเทคโนโลย สาขาวทยาการคอมพวเตอร First met ครงแรกททกคนเจอหนาผม กมกจะคดวาเปนเปนนกศกษา ไมกนกเรยนมธยม ทกครงเสมอไป -___-' มประสบการณและความเชยวชาญพเศษในเร องของ Linux Security, Linux Network, Network Security, Network Admin, PHP Programming, MySQL Database, Linux/Unix Hacking System, Web Design, ฯลฯ ระบบปฏบตการทเลอกใช Desktop เลอก Windows แตถาเปน Server/Network เลอกเฉพาะ Debian GNU/Linux เทานน

2.7.3 ความหมายของโปรแกรม AppServ AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆ อยางมารวมกน โดยม Package หลกดงน - Apache - PHP - MySQL - phpMyAdmin โปรแกรมตางๆ ทน ามารวบรวมไวทงหมดน ไดท าการดาวนโหลดจาก Official Release ทงสน โดยตว AppServ จงใหความส าคญวาทกสงทกอยางจะตองใหเหมอนกบตนฉบบ เราจงไมไดตดทอนหรอเพมเตมอะไรทแปลกไปกวา Official Release แตอยางได เพยงแตมบางสวนเทานนทเราไดเพมประสทธภาพการตดตงใหสอดคลองกบการท างานแตละคน โดยทการเพมประสทธภาพนไมไดไปยง ในสวนของ Original Package เลยแมแตนอยเพยงแตเปนการก าหนดคา Config เทานน เชน Apache กจะเปนในสวนของ httpd.conf, PHP กจะเปนในสวนของ php.ini, MySQL กจะเปนในสวนของ my.ini ดงนนเราจงรบประกนไดวาโปรแกรม AppServ สามารถท างานและความเสถยรของระบบ ไดเหมอนกบ Official Release ทงหมด

9


จดประสงคหลกของการรวมรวบ Open Source Software เหลานเพอท าใหการตดตงโปรแกรมตางๆ ทไดกลาวมาใหงายขน เพอลดขนตอนการตดตงทแสนจะยงยากและใชเวลานาน โดยผใชงานเพยงดบเบลคลก setup ภายในเวลา 1 นาท ทกอยางกตดตงเสรจสมบรณระบบตางๆ กพรอมทจะท างานไดทนททง Web Server, Database Server เหตผลนจงเปนเหตผลหลกทหลายๆ คนทวโลก ไดเลอกใชโปรแกรม AppServ แทนการทจะตองมาตดตงโปรแกรมตางๆ ทละสวน

ไมวาจะเปนผทความช านาญในการตดตง Apache, PHP, MySQL กไมไดเปนเรองงายเสมอไป เนองจากการตดตงโปรแกรมทแยกสวนเหลานใหมารวมเปนชนอนเดยวกน กใชเวลาคอนขางมากพอสมควร แมแตตวผพฒนา AppServ เอง กอนทจะ Release แตละเวอรชนใหดาวนโหลด ตองใชระยะเวลาในการตดตงไมนอยกวา 2 ชวโมง เพอทดสอบความถกตองของระบบ ดงนนจงจะเหนวาเราเองนนเปนมอใหมหรอมอเกา ยอมไมใชเรองงายเลยทจะตดตง Apache, PHP, MySQL ในพรบตาเดยว มบางค าถามทพบบอยวา AppServ สามารถน าไปเปน Web Server หรอ Database Server ไดทนทหรอไม ขอนตองตอบวาไดแนนอน 100% แตทางผพฒนาเองขอแนะน าวา ระบบจดการ Memory และ CPU บน Windows ทท างานเกยวกบ Web Server หรอ Database Server ไมเหมาะกบการใชงานหนกๆ เปนอยางยง เพราะ Windows นนจะกลนกนทรพยากรอนมหาศาล และหากเทยบอตรารองรบระบบงานกบ OS ตวอนเชน Linux/Unix จะยงเหนไดชดวา OS ทปน Windows ทมขนาด Memory และ CPU ทเทาๆ กน OS ทเปน Linux/Unix นน จะรองรบงานไดนอยกวามากพอสมควร เชน Windows รบได 1000 คนพรอมๆ กน แต Linux/Unix อาจรบไดถง 5000 พรอมๆกน หากทานตองท างานหนกๆ ทางผพฒนาแนะน าใหเลอกใช Linux/Unix OS จงจะเหมาะสมกวา

2.7.4 ขอแตกตางของ AppServ ในแตละเวอรชน AppServ ไดแบงเวอรชนออกเปน 2 สวนดวยกน คอ

2.5.x คอเวอรชนทน า Package ใหมๆ น ามาใชงานโดยเฉพาะ เหมาะส าหรบนกพฒนาทตองการระบบใหมๆ หรอตองการทดสอบ ทดลองใชงานฟงก ช นใหม ซ งอาจจะไม ได ความเสถ ยรของระบบได 100% เนองจากวา Package จากนกพฒนานนยงอยในชวงของขนทดสอบ ทดลองเพอหาขอผดพลาดอย

2.4.x คอเวอรชนทน า Package ทมความเสถยรเปนหลก เหมาะส าหรบผทตองการความมนคงของระบบ โดยไมไดมงเนนทจะใชฟงกชนใหม

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

10


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

สมยสโขทย (พ.ศ. 1800 - 1920) พอขนรามค าแหงมหาราชไดทรงประดษฐอกษรไทยขนในป พ.ศ.1826 ไดจารกเรองราวตางๆ ลงบนแผนหนหรอเสาหน คลายกบหลกศลาจารกของพอขนรามค าแหงมหาราช ทจารกเมอประมาณ 700 ปมาแลว ซงหลกศลาจารกของพอขนรามค าแหงมหาราชถอเปนหนงสอเลมแรกของไทย เมอพอขนรามค าแหงมหาราชสงสมณฑตไปสบศาสนาทลงกา กรบพทธศาสนาลทธลงกาวงศเขาสกรงสโขทย พรอมทงคมภรพระไตรปฎก โดยสนนษฐานวาจารกลงในใบลาน ดงนนพระในเมองไทยจงมการคดลอกพระไตรปฎกทเรยกวา การสรางหนงสอ ท าใหมหนงสอทางพทธศาสนาเกดขนจ านวนมากทเรยกวา หนงสอผกใบลาน จงสรางเรอนเอกเทศส าหรบเกบหนงสอทางพทธศาสนา เรยกวา หอไตร และในปลายสมยกรงสโขทยไดมวรรณกรรมทางศาสนาทส าคญคอ ไตรภมพระรวง ซงเปนพระนพนธในสมเดจพระมหาธรรมราชาท 1 พญาลไทย

สมยกรงศรอยธยา (พ.ศ. 1893 – 2310) ไดมการสรางหอหลวงไวในพระบรมมหาราชวงเปนทส าหรบเกบหนงสอของทางราชการ ตอมาในป พ.ศ. 2310 ทงหอไตรและหอหลวงไดถกพมาท าลายไดรบความเสยหาย

สมยกรงธนบร (พ.ศ. 2310 - 2325) พระเจาตากสนไดโปรดใหขอยมพระไตรปฎกจากเมองนครศรธรรมราชมาคดลอกและโปรดเกลาฯ ใหสรางหอพระไตรปฎกหลวง หรอเรยกวา หอหลวง

สมยกรงรตนโกสนทร (พ.ศ. 2325 - ปจจบน) 1. หอพระมณเฑยรธรรม พระบาทสมเดจพระพทธยอดฟาจฬาโลก ไดโปรดเกลาฯ ใหสรางหอพระมณเฑยรธรรมขนเมอ พ.ศ. 2326 ในพระบรมมหาราชวงบรเวณวดพระศรรตนศาสดาราม เพอเกบพระไตรปฎกหลวง แตถกไฟไหม จงโปรดใหสรางขนใหมและใชนามเดม 2. จารกวดพระเชตพนวมลมงคลาราม (วดโพธ) พระบาทสมเดจพระนงเกลาเจาอยหว ไดโปรดเกลาฯ ใหปฏสงขรณวดพระเชตพนฯ ซงสรางขนในสมยกรงศรอยธยา และใหรวบรวมเลอกสรรต าราตางๆ มาตรวจตราแกไขแลวจารกลงบนแผนศลาประดบไวในบรเวณตางๆ ของวด มรปเขยนและรปปนประกอบต ารานนๆ แตทรจกกนแพรหลายคอ รปปนฤๅษดดตนในทาตางๆ ทถอเปนตนต ารบการนวดและต ารายาไทย ซงเปนตนต ารบการแพทยแผนไทยมาจนกระทงทกวนน นอกจากนนยงมความรอกมากมายมทจารกไว จนท าใหจารกวดพระเชตพนวมลมงคลาราม ไดชอวาเปนมหาวทยาลยแหงแรกของไทย และไดรบการยกยองใหเปนหองสมดประชาชนแหงแรกของไทย

11


3. หอพระสมดวชรญาณ พระบาทสมเดจพระจลจอมเกลาเจาอยหว โปรดใหสรางขนในป พ.ศ. 2424 เพอเฉลมพระเกยรตของพระบาทสมเดจพระจอมเกลาเจาอยหว 4. หอพทธศาสนสงคหะ พระบาทสมเดจพระจลจอมเกลาเจาอยหว ทรงสรางขนทวดเบญจมบพตร เมอ พ.ศ. 2443 เพอเกบหนงสอตางๆ เกยวกบพระพทธศาสนา 5. หอสมดส าหรบพระนคร พระบาทสมเดจพระจลจอมเกลาเจาอยหวทรงสรางขนเมอ พ.ศ. 2448 โดยโปรดเกลาฯ ใหรวมหอพระมณเฑยรธรรม หอพระสมดวชรญาณ และหอพทธศาสนาสงคหะเขาเปนหอเดยวกน และพระราชทานนามวา หอพระสมดวชรญาณส าหรบพระนคร 6. หอสมดแหงชาต พระบาทสมเดจพระปกเกลาเจาอยหว ไดสรางขนเมอ พ.ศ. 2468 โดยใหแยกหองสมดออกเปน 2 หอ คอ แยกหนงสอตวเขยน ไดแก สมดไทย หนงสอจารกลงในใบลาน สมดขอย ศลาจารก และต ลายรดน าไปเกบไวท พระท น ง ศวโมกขพมาน ซ งอย ในบรเวณพพธภณฑสถานแหงชาต ใชส าหรบเกบหนงสอตวเขยน และเรยกวา หอพระวชรญาณ สวนหอสมดทตงขนทตกถาวรวตถใชเกบหนงสอตวพมพ เรยกวา หอพระสมดวชราวธ 7. หอจดหมายเหต พระบาทสมเดจพระมงกฏเกลาเจาอยหว โปรดเกลาฯ ใหสรางขนเมอ พ.ศ. 2459 มงานดงน

- งานจดหาเอกสารและบนทกเหตการณ - งานจดเกบเอกสาร - งานบรการเอกสาร - งานซอมแซมและบรณะเอกสาร - งานไมโครฟลม และถายส าเนาเอกสาร

2.9 JQuery คออะไร

JQuery คอ ไลบรารของโคดจาวาสครปต (JavaScript Library) ซงเปนสวนหนงของการสรางเวบไซต JQuery ทเขามาชวยอ านวยความสะดวกในการสรางสสนลกเลนตางๆ ใหแกเวบไซต โดยทผพฒนาไมตองเสยเวลาในการพฒนาโคดโปรแกรมใหยงยากซบซอนเหมอนแตกอน และชวยใหเราเรยกเขยนหรอใชงานจาวาสครปต และ Ajax ใหงายขน หรอจะเขยน JavaScript เพอดก Event (เหตการณ) ตางๆ ทตองการ เชน การ click, rollover, mouse

JQuery เปดตวครง แรกในงานบารแคมปนวยอรก โดย จอหน เรซก (John Resig) เมอวนท 14 มกราคม พ.ศ. 2549 ตวโคดของ JQuery มลขสทธและสญญาอนญาตแบบ Open Source โดยใชสญญาอนญาตของ GFDL และ MIT License

บคคลทสามารถน า JQuery ไปใชงานได 1. Web Programmer 2. Web design

12


JQuery ใชงานรวมกบโปรแกรม ดงน 1. PHP 2. JSP 3. PERL 4. ASP 5. VB.Net 6. HTML 7. CSS 8. XML

ความสามารถของ JQuery

1. ใชงาน DOM element โดยการเขยนไม JQuery จ าเปนตองยดตดกบ browser 2. จดการกบ Event เพม Event ลงในหนาเวบตามแตใจตองการ 3. สามารถจดการกบ CSS (style sheet) ของ element นนๆได 4. สามารถใส Effects and สราง Animations ลกเลนบนหนาเวบได 5. ชวยใหเขยน Ajax ไดงายขนท าใหประหยดเวลาในการเขยน Ajax และท าใหโคดสนลง 6. ท า Effect ตางๆกบ Element ทเราตองการเชน การ hide DIV ทเราตองการ 7. คนหา element ทเราตองการและจดการ เพม หรอลบ Attributes ทเราตองการได

2.10 ความหมายของ Ajax

Ajax ไมใชชอของการเขยนโปรแกรมหรอเปนชอของภาษาทใชในการโปรแกรม แตเปนชดของเทคโนโลยตางๆ Ajax ยอมาจาก Asynchronous JavaScript and XML; ซงหมายถงการท างานรวมกนของ JavaScript? และ XML แบบ Asynchronous มหลกการท างาน 2 ประเดน คอ การ update หนาจอแบบบางสวน และการตดตอสอสารกบ Server โดยใชหลกการ Asynchronous ท าใหผใชไมตองหยดการท างาน เพอรอการประมวลผลจาก Server รวมถงการโหลดและการรเฟรชหนาจอ ของบราวเซอรทางฝง Client มการใช Ajax โดยการเพมเลเยอรระหวาง user browser กบ server ท าใหผใชสามารถท างานไดโดยไมตองรอให Client ตดตอไปยง Server รวมถงการโหลดและการรเฟรชหนาจอทงหมดดวย ดงนนผใชสามารถใชงาน application ไดอยางมประสทธภาพมากขน AJAX จงไมใชเทคโนโลยในตวของมนเอง แตว าเปนการน าเทคโนโลยหลายๆ ตวมารวมกนเชน JavaScript, DHTML, XML, CSS, Dom และ XMLHTTP Request

Ajax engine ท าหนาทเปนตวกลางระหวาง client และ server ฉะนนเมอ client ม requestแทนทจะสง HTTP request ไปยง server โดยตรง client จะสง JavaScript? call ไปยง Ajax engine เพอโหลดขอมลท user ตองการ และหาก Ajax engine ตองการขอมลเพมเตมในการตอบสนอง

13


ตอ user Ajax engine จะสง request ไปยง server โดยใช XML การเรตไดกลาวถงเทคโนโลยตาง ๆ ทเปนสวนประกอบของ Ajax ซงไดแก HTML/XHTML เปนภาษาในการจดแสดงขอมล CSS เปนรปแบบการจดแตง XHTML Document Object Model (DOM) ส าหรบ dynamic display and interaction XML เปนรปแบบการแลกเปลยนดาตา XSLT ส าหรบ แปลง XML เปน XHTML XMLHTTP Request ส าหรบ asynchronous data retrieval JavaScript? เปนภาษาในการใชงาน Ajax engine โดยสวนประกอบจ าเปนขนพนฐานทขาดไมไดใน Ajax ไดแก HTML/XHTML, DOM, JavaScript และ XHTML ความนาเชอถอของจาวาสครปต

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

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

14


ภาพท 2.1 การเปรยบเทยบการท างานของ Ajax

จากรป ดานซายเปนรปการท างานของ Browser เมอตดตอกบ Web Server ตามปกต การท างานกมนกอยางทเราเขาใจกนคอ เมอเรา เรยก URL ไป Browser จะท าการตดตอกบ Web Server และ Web Server ท าการประมวลผลสงคาเปน HTML, Image, CSS อะไรกแลวแตกลบไปหา Browser น าไปแสดงผล

15


ภาพท 2.2 การเปรยบเทยบการท างานระหวาง Server และ Client ของ Ajax

จากรปเปนการขยายความของค าวา Asynchronous ครบใหเราพจารณาวา หาก Browser กบ Web Server มการ synchronous ระบบดงกลาว คอ Browser เรยก -> Web Server ตอบ -> Browser รบทราบ แสดงผล Browser เรยก -> Web Server ตอบ -> Browser รบทราบ แสดงผลไปเรอยๆ จะเหนวา Browser จะท างานสมพนธกบ Web Server เรยก -> ตอบ -> แสดงผลแตกรณท เปน AJAX นน การ Asynchronous นนกคอ Browser เรยก-> AJAX เรยก -> Web Server ตอบ -> AJAX รบทราบ แสดงผล -> Browser รบทราบ แสดงผล Browser ไมเรยก -> AJAX เรยก -> Web Server ตอบ -> AJAX รบทราบ บอกวาไมตองแสดงผล -> Browser รบบทราบไมแสดงผล Browser ไมเรยก -> AJAX เรยก -> Web Server ตอบ -> AJAX รบทราบ แสดงผล -> Browser รบทราบ แสดงผล

16


2.11 Java Script คออะไร JavaScript เปนภาษาโปรแกรม (Programming Language) ประเภทหนง ทเรยกกนวา

"สครปต" (script) ซงมวธการท างานในลกษณะ "แปลความและด าเนนงานไปทละค าสง" (interpret) ภาษานเดมมชอวา LiveScript ไดรบการพฒนาขนโดย Netscape ดวยวตถประสงค เพอทจะชวยใหเวบเพจสามารถแสดงเนอหา ทมการเปลยนแปลงไปได ตามเงอนไขหรอสภาพแวดลอมตางๆกน หรอสามารถโตตอบกบผชมไดมากขน ทงนเพราะภาษา HTML แตเดมนน เหมาะส าหรบใชแสดงเอกสาร ทมเนอหาคงทแนนอน และไมมลกเลนอะไรมากมายนก

เนองจาก JavaScript ชวยใหผพฒนา สามารถสรางเวบเพจไดตรงกบความตองการ และมความนาสนใจมากขน ประกอบกบเปนภาษาเปด ทใครกสามารถน าไปใชได ดงนนจงไดรบความนยมเปนอยางสง มการใชงานอยางกวางขวาง รวมทงไดถกก าหนดใหเปนมาตรฐานโดย ECMA ซงเราจะพบวาปจจบน จะหาเวบเพจทไมใช JavaScript เลยนน ไดยากเตมท

การท างานของ JavaScript จะตองมการแปลความค าสง ซงขนตอนนจะถกจดการโดยบราวเซอร ดงนน JavaScript จงสามารถท างานได เฉพาะบนบราวเซอรทสนบสนน ซงปจจบนบราวเซอรเกอบทงหมดกสนบสนน JavaScript แลว อยางไรกด สงทตองระวงคอ JavaScript มการพฒนาเปนเวอรชนใหมๆออกมาดวย (ปจจบนคอรน 1.5) ดงน น ถาน าโคดของเวอรช นใหม ไปรนบนบราวเซอรร น เกาทยงไมสนบสนน กอาจจะท าใหเกด error ได

การท างานของ JavaScript เกดขนบนบราวเซอร (เรยกวาเปน client-side script) ดงนนไมวาคณจะใชเซรฟเวอรอะไร หรอทไหน กยงคงสามารถใช JavaScript ในเวบเพจได ตางกบภาษาสครปตอน เชน Perl, PHP หรอ ASP ซงตองแปลความและท างานทตวเครองเซรฟเวอร (เรยกวา server-side script) ดงนนจงตองใชบนเซรฟเวอร ทสนบสนนภาษาเหลานเทานน อยางไรกด จากลกษณะดงกลาวกท าให JavaScript มขอจ ากด คอไมสามารถรบและสงขอมลตางๆ กบเซรฟเวอรโดยตรง เชน การอานไฟลจากเซรฟเวอร เพอน ามาแสดงบนเวบเพจ หรอรบขอมลจากผชม เพอน าไปเกบบนเซรฟเวอร เปนตน ดงนนงานลกษณะน จงยงคงตองอาศยภาษา server-side script อย (ความจรง JavaScript ทท างานบนเซรฟเวอรเวอรกม ซงตองอาศยเซรฟเวอรทสนบสนนโดยเฉพาะเชนกน แตไมเปนทนยมนก)

การท างานของ JavaScript จะมประสทธภาพมาก ถามนสามารถดดแปลงคณสมบต ขององคประกอบตางๆ บนเวบเพจ (เชน ส หรอรปแบบของขอความ) และสามารถรบรเหตการณ ทผชมเวบเพจโตตอบกบองคประกอบเหลานน (เชน การคลก หรอเลอนเมาสไปวาง) ได ดงนนจากภาษา HTML เดม ทมลกษณะสถต (static) ใน HTML เวอรชนใหมๆ จงไดมการพฒนาใหมคณสมบตบางอยางเพมขน และมลกษณะเปนออบเจค "Object" มากขน การท างานรวมกนระหวางคณสมบตใหมของ HTML รวมกบ JavaScript นเอง ท าใหเกดเปนสงทเรยกวา Dynamic HTML คอภาษา HTML ทสามารถใชสรางเวบเพจทมลกษณะพลวต (dynamic) ไดนนเอง

นอกจากน อกองคประกอบหนงทเกยวของ กคอ Cascading Style Sheet (CSS) ซงเปนภาษาทชวยใหเราควบคมรปแบบ ขององคประกอบตางๆ บนเวบเพจ ไดอยางมประสทธภาพมากกวาค าสง หรอแทก (tag) ปกตของ HTML เนองจาก JavaScript สามารถดดแปลงคณสมบตของ CSS ไดเชนกน ดงนนมนจงชวยใหเราควบคมเวบเพจ ไดอยางมประสทธภาพมากมากยงขนไปอก

17


2.12 ประวตและความเปนมาของโปรแกรม Adobe Photoshop CS5

Adobe Photoshop CS5

Adobe Photoshop CS5 โปรแกรมสราง และแกไขรปภาพ อยางมออาชพ โดยเฉพาะนกออกแบบในทกวงการยอมรจกโปรแกรมตวนด โปรแกรม Photoshop เปนโปรแกรมทมเครองมอมากมายเพอสนบสนนการสรางงานประเภทสงพมพ งานวดทศน งานน าเสนอ งานมลตมเดย ตลอดจนงานออกแบบและพฒนาเวบไซต ในชดโปรแกรม Adobe Photoshop การทจะใชงานโปรแกรม Photoshop คณตองมเครองทมความสามารถสงพอควร มความเรวในการประมวลผล และมหนวยความจ าทเพยงพอ ไมเชนนนการสรางงานของคณคงไมสนกแน เพราะการท างานจะชาและมปญหา ตามมามากมาย ขณะนโปรแกรม Photoshop ไดพฒนามาถงรน Adobe Photoshop CS5 พรอมกบเครองมอทสรางความสะดวกสบายใหกบผใชอยางมากมาย คณลกษณะทส าคญ

หนาตาใหมหมดจด ในเกอบทกครงท Adobe มการอพเกรดโปรแกรมของตน สงทยนยนไดถงเวอรชนทเปลยนไปของมนกคอ User Interface หรอหนาตาของตว โปรแกรม ทตองมเปลยนแปลงไปบาง อยางทผมบอก และในเวอรชนน กมการเปลยนแปลงจากเดมไปคอนขางมากเหมอนกน แตคณสามารถเปลยนมาใชแบบสองแถวทคนเคยได โดยการคลกทเมนดานบน แตสงทเปลยนไป มากทสด กนาจะเปน Palette ซงอยทางเมนดานขวามอ คณสามารถยด หด พบเกบมนไวไดดงใจ หรอสามารถใชแบบลอยๆ เหมอนเวอรชนเกากยงได แตฟเจอรทผมชอบทสดกเหนจะเปน Maximize Screen Mode ซงสามารถ ทจะปรบไดโดยอตโนมตเมอยดและหดพาเลต

การปรบปรงครงใหญของ Camera Raw Camera Raw นนคอฟเจอรในการตกแตงภาพจากกลองดจตอล ทยงคงรกษาคณภาพของภาพไว 100% โปรแกรม เวอรชนกอนหนานกเคยท าได แตในเวอรชนใหมท าไดดกวามาก และฟงกชนทดกวาเดมมากอยาง Fill Light Slider (เชนเดยวกบ Shadow Slider) และ Vibrance Slider ซงเปนตวเพมความเขมของภาพ โดยไมกระทบ ตอไฟลตนฉบบ

Quick Selection Tool แนนอนครบ นเปนเครองมอการเลอกทดทสดเทาทผมเคยรจกมา มนใชงานงายมาก และดทสดเทาทเคยมมา และยงท างานไดเปนอยาง ดดวยส อยางไรกด ไมวาเครองมอนจะดแคไหน แตส าหรบความคดเหนของผมแลว ฟเจอรทคอนขางเดนของมนกคอ Refine Edge floating palette ทจะใหคณควบคมการเลอกไดในทกสถานการณ ไมเพยงเครองมอนเทานน แตยงเปนเครองมอการเลอกทงหมดของ CS5 คณจะประหลาดใจวา การ Selection ใน CS5 นนท าไดงายดายกวาทเคย

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

Auto Align และ Auto Blendลองนกถงการท าภาพพาโนรามาแบบงายๆดสครบ ซงองคประกอบพนฐานของมนกมาจากการจดเรยงภาพนแหละ การเบลนภาพ และส ในเวอรชนนท าไดอยางไร

18


ทต Auto Align จะชวยคณจดเรยงภาพของคณกบภาพทใกลเคยงใหโดยอตโนมต และ Auto Blend กจะจดการเบลนสใหคณโดยอตโนมตเชนกน เครองมอน หากคณไดลองใช กจะเหนวามนอศจรรยมากแคไหน

Bridge ทพฒนาใหมนาใชมากยงขน ในเวอรขนนไดท าการพฒนา Bridge ใหแตกตางจากเวอรชนกอนชนดหนามอเปนหลงมอ ปกตเวลาผมใชโปรแกรม Photoshop

Smart Filter ดวยฟงกชนน คณจะสามารถใสฟลเตอรหลายๆตวใหกบรปๆเดยวของคณไดอยางงายดาย เรยกวางายกวาแตกอนมากกไดนะครบ ซงการท างานสไตลเลเยอรนนกอจฉรยะเมกเซนจกวาเดมดวยการท างานของคณกรวดเรวขนอยางแนนอน

ความหมายและความส าคญของโครงการ การใชงานโปรแกรม Adobe Photoshop cs5 เบองตน Photoshop จะเปนโปรแกรมในชด creative Suite 5 หรอเรยกสนๆวา CS5 โดย Photoshop จะแบงออกเปน 2 เวอรชนยอยๆ คอ Photoshop cs5 และ Photoshop cs5 Extended ทมค าสงและขดความสามารถแตกตางกน

ส าหรบ Adobe Photoshop cs5 เปนเวอรชนธรรมดาสามญ ทเนนการการท างานดานตกแตง และตดตอภาพถาย ซงเปนเวอรชนทใชกนอยางแพรหลาย เพราะมฟงกชนพนฐานทครบถวน

ภาพท 2.3 หนาตาของ Photoshop CS5

Photoshop CS5 Extended ทเพมความสามารถทนอกเหนอจาการตกแตง และตดตอภาพคอการท างานดาน 3D ไมวาจะ Render รปทรงใหมแสงเงาสมจรง สราง Animation ดวย Timeline ทท างานไดอยางหลากหลาย เพราะสามารถท างานรวมกบโปรแกรมอนๆไดไมวาจะเปน Flash, After Effect หรอน าไฟลงานจาก 3D Max มาท างานรวมกบภาพกราฟกใน Photoshop กไดเชนกน

19


บทท 3 วธด าเนนงาน

3.1 การเตรยมการกอนเรมโครงการ

1. ประชมวางแผนการด าเนนงาน 1.1 คดหาวธการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ 1.2 แบงหนากนท างาน

2. เลอกประธานและกรรมการ 3. ตงชอโครงการใหสอดคลองกบการปฏบตงาน 4. จดซอวสดอปกรณ 5. จดประชมเพอวางแผนการท างาน 6. จดท าบญชปฏบตงานโครงการ รายรบ-รายจาย

3.2 การด าเนนการ

1. ประชมเรองการด าเนนโครงการ 2. ปรกษาปญหาและแนวทางแกไข 3. จดหาวสด และสถานทด าเนนงาน 4. ลงมอปฏบตตามขนตอน

3.3 งบประมาณคาใชจาย 1. กระดาษ A4 จ านวน 1 รม (120 X 1) ราคา 120 บาท 2. หมกปรนเตอร จ านวน 2 กลอง (650 X 2) ราคา 1,300 บาท 3. เขาเลมโครงการ จ านวน 1 เลม (100 X 1) ราคา 100 บาท 4. คาอปกรณอนๆ (ถวจาย) ราคา 500 บาท รวมทงสน 2,020 บาท

20


บทท 4 ผลการทดลอง/การวเคราะหขอมล

4.1 การทดสอบเวบไซต

ภาพท 4.1 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (หนาหลก)

ภาพท 4.2 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (ผลการคนหาหนงสอ “ภาษาไทย”)

21


4.2 ผลจากการทดสอบเวบไซต

ภาพท 4.3 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (หนาหลก)

ภาพท 4.4 หนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ (ผลการคนหาหนงสอ “ภาษาไทย”)

22


4.3 การน าไปใชงาน 1. สถานทราชการ หนวยงาน องคการ และสถานศกษาตาง ๆ สามารถน าไปประยกตใชในองคการของตนเองได 2. สามารถน าโครงการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลย รกษ ไปพฒนาตอไดอกมากมายหลายรปในการน าเสนอขอมลในดานตางๆ ได

23


บทท 5 สรป อภปรายผลและขอเสนอแนะ

5.1 สรปผลการดาเนน

จากการทไดท าการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ ขนมาน หลงจากไดทดลองประสทธภาพของการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ แลวสรปไดดงน

1. สามารถเปนสอกลางในการคนหาขอมลหนงสอได 2. สามารถเปนสอในเผยแพรขอมลขาวสารใหกบบคคลภายนอกไดรบรความเคลอนไหวของหองส

มดแหงนไดดวย 3. นกศกษามความรเรอง การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ รจกรการท างาน

เปนทมและมความสามคค 5.2 ปญหาและอปสรรค

1. เวลาในการจดการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ นอยมาก 2. การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ ยงขาดงบประมาณสนบสนกอกมาก 3. โครงการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ ยงไมมบคคลรจกมากพอ

5.3 ขอเสนอแนะ

1. ควรใชระบบการพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ ใหมความเสถยรมากกวาน 2. การพฒนาเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ ยงจะตองมการพฒนา/ปรบปรง/แกไข

ไปเรอยๆ แบบไมมวนสนสดลง

24


บรรณานกรม

สถาบนการอาชวศกษาภาคตะวนออก 1 วทยาลยเทคนคอดรธาน. คมอการจดท าโครงการหลกสตร ประกาศนยบตรวชาชพ (ปวช.) พทธศกราช 2556 และหลกสตรประกาศนยบตร วชาชพชนสง (ปวส.) พทธศกราช 2546. ฉบบส าเนา

http://panipaaom.blogspot.com/p/blog-page_25.html สบคนวนท 20 พ.ค. 2557 http://www.hellomyweb.com/index.php/main/content/131 สบคนวนท 12 ม.ย. 2557 http://inforzone.kktech.ac.th/ajax/ajaxconcept.html สบคนวนท 25 ก.ค. 2557 http://www.w3schools.com/jquery/jquery_syntax.asp สบคนวนท 12 ส.ค. 2557 http://www.kontentblue.com/site/article/article?id=jquery-what-is สบคนวนท 11 ก.ย. 2557

25


ภาคผนวก

26


1. หนาหลกเวบไซต หองสมดประชาชน อ าเภอพบลยรกษ

ภาพท ก หนาหลกเวบไซต หองสมดประชาชน อ าเภอพบลยรกษ

2. หนาหมวดหนงสอทงหมดในหองสมดประชาชน อ าเภอพบลยรกษ

ภาพท ข หมวดหนงสอทงหมดในหองสมดประชาชน อ าเภอพบลยรกษ

27


3. หนาเกยวกบหองสมดทงหมดในหองสมดประชาชน อ าเภอพบลยรกษ

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

4. หนาตดตอสอบถามเจาหนาทหองสมดประชาชน อ าเภอพบลยรกษ

ภาพท ง ตดตอสอบถามเจาหนาทหองสมดประชาชน อ าเภอพบลยรกษ

วธการเขาดฐานขอมลเวบไซต (Database)

1. คลกท หรอ เบราวเซอรอนๆกได แลวพมพค าวา localhost แลวกด Enter จะไดดงภาพน

2. คลกท phpMyAdmin Database Manager Version 2.10.3 แลวจะปรากฏ ดงภาพน

3. ใส username และ password ……

username คอ root และ password คอ 1234 แลวกด OK 4. หลงจากกด OK เสรจแลวจะไดภาพน

http://localhost/phpMyAdmin/

5. ตอไปเลอกฐานขอมลของเรา โดยไปท “ฐานขอมล” (อยทางดานซายมอ)

6. แลวเลอกชอฐานขอมลทเราสรางขนมา ดงภาพน

นคอฐานขอมลเวบไซตของเราทงหมดน

วธการเขาใชงาน/เขาชม เวบไซตหองสมดประชาชน อ าเภอพบลยรกษ

1. คลกท หรอ เบราวเซอรอนๆกได แลวพมพค าวา localhost/lib/ แลวกด Enter จะไดดงภาพน

ภาพหนาหลก หรอหนาแรก

หมายเลข 1 แถบเมนดานบนเวบไซต ประกอบดวย ปม Home, ขาวประชาสมพนธ, หนงสอหมวดตางๆ, เกยวกบหองสมด, การใชบรการหองสมด, ภาพกจกรรม, และตดตอเรา หมายเลข 2 กลองคนหาหนงสอ หรอขอมลภายในเวบไซตนตามตองการ หมายเลข 3 แถบเมนดานบนเวบไซต ประกอบดวย ปม Home, ขาวประชาสมพนธ, หนงสอหมวดตางๆ, เกยวกบหองสมด, การใชบรการหองสมด, ภาพกจกรรม, และตดตอเรา

1

2

3

ค าถาม / ค าตอบ

1. ท าไมถงท าโครงการ หรอโครงงานชนน ? ตอบ จดท าขนเพอเปนสอกลางขอมลหนงสอ หรอเปนแหลงรวบรวมขอมลหนงสอ เปนแหลงสบคนขอมลหนงสอทงายและสะดวก รวดเรว ประหยดเวลา และทนสมย ของหองสมดประชาชน อ าเภอพบลยรกษ แหงน 2. จดท าขนเพอมวตถประสงค อะไร? ตอบ 1. เพอเปนแหลงรวบรวมขอมลหนงสอของหองสมดประชาชน อ าเภอพบลยรกษ 2. เพอเปนแหลงเรยนร และเปนสอกลางในการสอสารขอมลของหองสมดประชานชนฯ 3. เพอพฒนาระบบการคนหาหนงสอททนสมยในยคปจจบน 4. เพองายตอการคนหาขอมลหนงสอ วามหนงสอเลมทตองการหรอเปลา กอนทจะมาใชบรการหองสมดประชาชนฯ แหงน 3. ประโยชนของการจดท าโครงการหรอโครงงานน ? ตอบ 1. งายตอการคนหาหนงสอทเราตองการไดอยางสะดวก รวดเรว ประหยดเวลา และทนสมยในยคปจจบนนดวยเทคโนโลยตางๆ 2. เปนแหลงขอมลหรอแหลงเรยนรทส าคญของอ าเภอพบลยรกษ 3. ไดเวบไซตหองสมดประชาชน อ าเภอพบลยรกษ เพอเปนสอกลางในการสอสาร 4. เวบไซตนถกพฒนาขนมาไดอยางไร ? ตอบ เกดจากแรงบลดาลใจและความตองการ ความสะดวก รวดเรว ประหยดเวลา และทนสมย ของคณะผจดท า และการจดท าหรอการพฒนาเวบไซตหองสมดประชาชนฯ น จะส าเรจไดดวยจากการชวยเหลอของคณะบคลากรครประจ าหลกสตร ปวช. สาขาคอมพวเตอรธรกจ กศน.อ าเภอพบลยรกษ 5. การพฒนา/ตอยอดหรอการน าไปประยกตใชไดอกหรอไมอยางไร ? ตอบ สามารถน าไปพฒนาเปนเวบไซตอนๆ ไดอยาง และเปนสอกลางในการเผยแพรขอมลขาวสารอนๆ ไดอยางมากมาย และเปนประโยชนตอองคกร หรอหนวยงานของทานดวย

Documents

การพัฒนาเว็บไซต์ห้องสมุด ... · 2016-08-30 · ภาพที่ 2.2 การเปรียบเทียบการท างานระหว่าง