โครงการ

รายงานน� เปนสวนหน�งของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

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

โรงเรยนพายพเทคโนโลยและบรหารธรกจ

โครงการ การพฒนาส�ออเลกทรอนกสเพ�อความบนเทง

เร�อง เวบไซต ดหนงออนไลน

นายภทรพล หลวงแสน

นางสาวสทวา ถาปงยศ

รายงานน� เปนสวนหน�งของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

คอมพวเตอรธรกจ คณะเทคโนโลยสารสนเทศ

โรงเรยนพายพเทคโนโลยและบรหารธรกจ

ปการศกษา 2553

ความบนเทง

รายงานน� เปนสวนหน�งของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

เทคโนโลยสารสนเทศ

การพฒนาส�ออเลกทรอนกส

เร�อง

นายภทรพล หลวงแสน

รายงานน� เปนสวนหน�งของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

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

โรงเรยนพายพเทคโนโลยและบรหารธรกจ

การพฒนาส�ออเลกทรอนกสเพ�อความบนเทง

เร�อง เวบไซตดหนงออนไลน Hzn Movie World

นายภทรพล หลวงแสน รหส 52205424

รายงานน� เปนสวนหน�งของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

ช�นสง

คอมพวเตอรธรกจ คณะ เทคโนโลยสารสนเทศ

โรงเรยนพายพเทคโนโลยและบรหารธรกจ

ปการศกษา 2553

World

รายงานน� เปนสวนหน�งของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

เทคโนโลยสารสนเทศ

ช�อโครงการ

ช�อนกศกษา

สาขา

คณะ

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

……………………………………………………………………………………………………….

สาขาคอมพวเตอรธรกจ คณะเทคโนโลยสารสนเทศ โรงเรยนพายพเทคโนโลยและ

บรหารธรกจ อนมตใหนบโครงการน� เปนสวนหน� งของการศกษาตามหลกสตรประกาศนยบตร

วชาชพช�นสง

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

………………………………………………..

( อาจารยฉตรดนย

………………………………………………..

( อาจารยจราวรรณ

ลขสทธ9 ของสาขาคอมพวเตอรธรกจ

เวบไซตดหนงออนไลน Hzn Movie World

นายภทรพล หลวงแสน นางสาวสทวา ถาปงยศ

คอมพวเตอรธรกจ

เทคโนโลยสารสนเทศ

อาจารยวทยา ศลตระกล

……………………………………………………………………………………………………….

สาขาคอมพวเตอรธรกจ คณะเทคโนโลยสารสนเทศ โรงเรยนพายพเทคโนโลยและ

บรหารธรกจ อนมตใหนบโครงการน� เปนสวนหน� งของการศกษาตามหลกสตรประกาศนยบตร

……………………………………..

( อาจารยวทยา ศลตระกล

หวหนาคณะเทคโนโลย

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

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

มนธรรม )

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

ศรเสนา )

ลขสทธ9 ของสาขาคอมพวเตอรธรกจ คณะเทคโนโลยสารสนเทศ

……………………………………………………………………………………………………….

สาขาคอมพวเตอรธรกจ คณะเทคโนโลยสารสนเทศ โรงเรยนพายพเทคโนโลยและ

บรหารธรกจ อนมตใหนบโครงการน� เปนสวนหน� งของการศกษาตามหลกสตรประกาศนยบตร

……………………………………..

อาจารยวทยา ศลตระกล )

หวหนาคณะเทคโนโลยสารสนเทศ

คณะเทคโนโลยสารสนเทศ

ช�อโครงการ

ผเขยน

สาขา

คณะ

อาจารยท�ปรกษาโครงการ

ปการศกษา

Hzn Movie World

ดวย โปรแกรมหนงเร�องตาง ๆ รายละเอยดของหนงเร�องน�น ๆ เวบบอรด ขาวสาร หองแชท

แตยงขาดการประชาสมพนธหรอการโฆษณาใหเปนท�รจกกนอยางแพรหลาย จงทาใหนอยคนน

จะรจกเวบไซตแหงน�

โรงเรยนพายพเทคโนโลยและบรหารธรกจ

ของนกศกษา ทางโรงเรยนจงเปดโอกาสให

ประสทธภาพสงสด ทางผจดทาจงไดจดทาโครงการเวบไซตเก�ยวกบ

เพ�อเปนการประชาสมพนธและแนะนาภาพยนตรเร�องตาง ๆ

เปนส�อกลางในการเผยแพรขอมล และเปนการสงเสรมใหมการใชอนเทอรเนตมาชวยในทางดาน

ธรกจมากข�น เพ�อเปนการเพ�มประสทธภาพและเพ�อสามารถรองรบการข

อนาคตได โดยมโรงเรยนพายพเทคโนโลยและบรหารธรกจเปนผสนบสนนโครงการและเปนการ

สงเสรมใหนกศกษาเรยนรผานการปฏบตเพ�อใหเกดทกษะในดานตาง ๆ ดงน�น ผจดทาโครงการจง

ไดเลงเหนคณคาของการใชระบบเครอขายอนเทอรเนต

ออนไลน เพ�อสงเสรมและสอดคลองกบอตลกษณสาขาเทคโนโลยสารสนเทศท�วา

ทนเทคโนโลย มมตทางสงคม

เวบไซตดหนงออนไลน Hzn Movie World

นายภทรพล หลวงแสน นางสาวสทวา ถาปงยศ

คอมพวเตอรธรกจธรกจ

เทคโนโลยสารสนเทศ

อาจารยท�ปรกษาโครงการ อาจารยวทยา ศลตระกล

2553

บทคดยอ

Hzn Movie World เปนเวบไซตดภาพยนตรออนไลน หรอ ดหนงออนไลน

โปรแกรมหนงเร�องตาง ๆ รายละเอยดของหนงเร�องน�น ๆ เวบบอรด ขาวสาร หองแชท

แตยงขาดการประชาสมพนธหรอการโฆษณาใหเปนท�รจกกนอยางแพรหลาย จงทาใหนอยคนน

โรงเรยนพายพเทคโนโลยและบรหารธรกจ เลงเหนคณคา ความสามารถและสมรรถนะ

ทางโรงเรยนจงเปดโอกาสให นกศกษาเรยนรผานการปฏบตเพ�อใหเกด

ทางผจดทาจงไดจดทาโครงการเวบไซตเก�ยวกบ การร

อเปนการประชาสมพนธและแนะนาภาพยนตรเร�องตาง ๆ โดยผานระบบเครอขายอนเทอรเนต

เปนส�อกลางในการเผยแพรขอมล และเปนการสงเสรมใหมการใชอนเทอรเนตมาชวยในทางดาน

ธรกจมากข�น เพ�อเปนการเพ�มประสทธภาพและเพ�อสามารถรองรบการขยายกจการท�จะเกดข�นใน

อนาคตได โดยมโรงเรยนพายพเทคโนโลยและบรหารธรกจเปนผสนบสนนโครงการและเปนการ

สงเสรมใหนกศกษาเรยนรผานการปฏบตเพ�อใหเกดทกษะในดานตาง ๆ ดงน�น ผจดทาโครงการจง

ไดเลงเหนคณคาของการใชระบบเครอขายอนเทอรเนต จงไดรเร� มทาโคร

เพ�อสงเสรมและสอดคลองกบอตลกษณสาขาเทคโนโลยสารสนเทศท�วา

ทนเทคโนโลย มมตทางสงคม”

นางสาวสทวา ถาปงยศ

เวบไซตดภาพยนตรออนไลน หรอ ดหนงออนไลน ซ� งประกอบไป

โปรแกรมหนงเร�องตาง ๆ รายละเอยดของหนงเร�องน�น ๆ เวบบอรด ขาวสาร หองแชท เปนตน

แตยงขาดการประชาสมพนธหรอการโฆษณาใหเปนท�รจกกนอยางแพรหลาย จงทาใหนอยคนนกท�

ความสามารถและสมรรถนะ

นกศกษาเรยนรผานการปฏบตเพ�อใหเกด

การรมภาพยนตรออนไลน

โดยผานระบบเครอขายอนเทอรเนต

เปนส�อกลางในการเผยแพรขอมล และเปนการสงเสรมใหมการใชอนเทอรเนตมาชวยในทางดาน

ยายกจการท�จะเกดข�นใน

อนาคตได โดยมโรงเรยนพายพเทคโนโลยและบรหารธรกจเปนผสนบสนนโครงการและเปนการ

สงเสรมใหนกศกษาเรยนรผานการปฏบตเพ�อใหเกดทกษะในดานตาง ๆ ดงน�น ผจดทาโครงการจง

จงไดรเร� มทาโครงการเวบไซตดหนง

เพ�อสงเสรมและสอดคลองกบอตลกษณสาขาเทคโนโลยสารสนเทศท�วา “ตรรกะด กาว

ผจดทาโครงการเวบไซต

พายพเทคโนโลยและบรหารธรกจท�ได

รวมท� ง เปดโอกาสใหนกศกษาเรยนรผานการปฏบต เพ�อให เ กดทกษะในดานตางๆ

ขอขอบพระคณบดา มารดา ท�ไดสงเสรมสนบสนนการศกษามาเปนอยางดโดยตลอดมา

ขอขอบพระคณ

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

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

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

ผจดทาโครงการเวบไซตดหนงออนไลน Hzn Movie World ขอขอบพระคณโรงเรยน

พายพเทคโนโลยและบรหารธรกจท�ไดเลงเหนคณคา ความสามารถและสมรรถนะของนกศกษา

รวมท� ง เปดโอกาสใหนกศกษาเรยนรผานการปฏบต เพ�อให เ กดทกษะในดานตางๆ

ขอขอบพระคณบดา มารดา ท�ไดสงเสรมสนบสนนการศกษามาเปนอยางดโดยตลอดมา

ขอขอบพระคณเวบไซตดหนงออนไลนท� งหมดท�ใหความอนเคราะหชวยเหลอ

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

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

นายภทรพล หลวงแสน

นางสาวสทวา

ขอขอบพระคณโรงเรยน

ความสามารถและสมรรถนะของนกศกษา

รวมท� ง เปดโอกาสใหนกศกษาเรยนรผานการปฏบต เพ�อให เ กดทกษะในดานตางๆ และ

ขอขอบพระคณบดา มารดา ท�ไดสงเสรมสนบสนนการศกษามาเปนอยางดโดยตลอดมา

ท�ใหความอนเคราะหชวยเหลอ

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

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

นายภทรพล หลวงแสน

นางสาวสทวา ถาปงยศ

ผจดทา

เร�อง

บทคดยอ

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

สารบญ

สารบญตาราง

สารบญรปภาพ

บทท� 1 บทนา

1.1 หลกการและเหตผล1.2 วตถประสงค1.3 ผลท�คาดวาจะไดรบ1.4 ข�นตอนและวธดาเนนงาน1.5 ระยะเวลาดาเนนงาน1.6 ขอบเขตของโครงการ1.7 เคร�องมอและอปกรณ1.8 สถานท�ในการดาเนนงาน

บทท� 2 ทฤษฎและเน�อหาท�เก�ยวของ

2.1 ทฤษฎการสรางเทมเพลต 2.2 ทฤษฎสกบการออกแบบ2.3 ทฤษฏการออกแบบพ�นฐานและการออกแบบเวบไซต

บทท� 3 การออกแบบและพฒนาโปรแกรม3.1 การออกแบบหนาจอหลก3.2 การออกแบบหนาจอแสดงผลเน�อหาเวบไซต

3.2.1 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลน3.2.2 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนหองแชท

สารบญ

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

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

ทฤษฎการสรางเทมเพลต (Template) ทฤษฎสกบการออกแบบ ทฤษฏการออกแบบพ�นฐานและการออกแบบเวบไซต

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

การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลนการออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนหองแชท

หนา

1 2 2 2 2 3 3 3

4 8

10

16 16

การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลน 17 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนหองแชท 18

เร�อง

3.2.3 การออกแบบหนาจอแสดงผล3.2.4 การออกแบบหนาจอแสดงผลเน�อหาเ3.2.5 การออกแบบหนาจอแสดงผลเน�อหา

บทท� 4 การพฒนาระบบ

4.1 หลกในการพฒนาโปรแกรม4.2 เคร�องมอท�ใชในการพฒนาโปรแกรม4.3 ผงโครงสรางของโปรแกรม

บทท� 5 สรปผลการดาเนนโครงการ

5.1 การประเมน 5.2 สรปผลการศกษา5.3 ปญหาอปสรรค และขอจากดของระบบ5.4 ขอแนะนา

เอกสารอางอง

ภาคผนวก

ภาคผนวก ก คมอการตดต�งโปรแกรม

ภาคผนวก ข คมอการตดต�งโปรแกรม

ภาคผนวก ค แบบประเมนความพงพอใจตอการเขาใชเวบไซต

ดหนงออนไลน

ประวตผจดทาโครงการ

สารบญ(ตอ)

การออกแบบหนาจอแสดงผลเน�อหาเวบบอรด การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนขาวสารตาง ๆการออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนตดตอเรา

หลกในการพฒนาโปรแกรม เคร�องมอท�ใชในการพฒนาโปรแกรม ผงโครงสรางของโปรแกรม(Site Map)

สรปผลการดาเนนโครงการ

สรปผลการศกษา ปญหาอปสรรค และขอจากดของระบบ

คมอการตดต�งโปรแกรม Joomla

คมอการตดต�งโปรแกรม Appserv

แบบประเมนความพงพอใจตอการเขาใชเวบไซต

ดหนงออนไลน Hzn Movie World

หนา

19 ขาวสารตาง ๆ 20 ตดตอเรา 21

22 23 24

28 29 30 30 31

33

39

45

46

ตารางท�

1.1 แสดงรายละเอยดระยะเวลาการดาเนนงาน

5.1 แสดงรายละเอยดแบบประเมนผลโครงการทางสถต

สารบญตาราง

แสดงรายละเอยดระยะเวลาการดาเนนงาน

แสดงรายละเอยดแบบประเมนผลโครงการทางสถต

หนา

2

29

ภาพท�

2.1 แสดงการออกแบบหนาเวบไซต

2.2 แสดงหนา Template

2.3 แสดงข�นตอนการ

2.4 แสดงข�นตอน

2.5 แสดงการการต�งคา

2.6 การเปดหนา

2.7 ภาพแสดงวงจรส

3.1 แสดงหนาจอหลกของเวบไซตดหนงออนไลน

3.2 แสดงหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลน

3.3 แสดงหนาจอแสดงผลเน�อหาเมนหองแชท

3.4 แสดงหนาจอแสดงผลเน�อหาเวบบอรด

3.5 แสดงหนาจอแสดงผลเน�อหาเมนขาวสาร

3.8 แสดงหนาจอแสดงผลเน�อหาเมนตดตอเรา

4.1 ผงโครงสรางของโปรแกรม

สารบญรปภาพ

แสดงการออกแบบหนาเวบไซต

Template

แสดงข�นตอนการ Export Template

แสดงข�นตอน Install Template

แสดงการการต�งคา Template

การเปดหนา Template

ภาพแสดงวงจรส

แสดงหนาจอหลกของเวบไซตดหนงออนไลน

แสดงหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลน

แสดงหนาจอแสดงผลเน�อหาเมนหองแชท

แสดงหนาจอแสดงผลเน�อหาเวบบอรด

แสดงหนาจอแสดงผลเน�อหาเมนขาวสารตาง ๆ

แสดงหนาจอแสดงผลเน�อหาเมนตดตอเรา ผงโครงสรางของโปรแกรม (Site Map)

หนา

4

5

5

6

6

7

9

16

17

18

19

20

21

24

สารบญภาพ(ตอ)

ภาพท� หนา

ก.1 หนาตางท�แสดงของการตดต�งภาษา 34

ก.2 หนาตางท�ตรวจสอบสทธ9 การตดต�งใหกด Next 34

ก.3 หนาตางท�ตรวจสอบสทธ9 การตดต�งใหกด Next 35

ก.4 ข�นตอนการกาหนดการตดต�ง 36

ก.5 สวนกาหนดเขา Admin 37

ก.6 ตวอยางหนาเวบไซตท�แสงใหเหนเม�อตดต�งเสรจแลว 38

ข.1 ไอคอน Appserv 39

ข.2 การตดต�ง Appserv 40

ข.3 การเลอกระบบฐานขอมล 41

ข.4 การกาหนดรหสการเขาใช 42

ข.5 การตดต�ง Appserv เสรจสมบรณ 43

ข.6 เปดหนาโปรแกรม Appserv 44

บทท� 1

บทนา

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

ย�งข�น ท�งในดานการศกษา คนควาหาขอมลท�สนได หรอแมกระท�ง ทางดานความบนเทง ฯลฯ

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

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

บนเทงใหกบตวเอง และเพ�อใหเปนอกทางเลอกหน�งของผท�สนใจได

โรงเรยนพายพเทคโนโลยและบรหารธรกจ เลงเหนคณคา ความสามารถและสมรรถนะ

ของนกศกษา ทางโรงเรยนจงเปดโอกาสให นกศกษาเรยนรผานการปฏบตเพ�อใหเกด

ประสทธภาพสงสด โดยผานการเรยนรในรายวชา โครงการ (Project) เพ�อตรงตามเปาหมายท�

โรงเรยนไดต�งไว คอ “คดเปน เนนปฏบต จดการได” และนาความรท�ไดเรยนมาบรณาการ เพ�อให

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

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

ประกอบวชาชพไดอยางเปนจรงและมประสทธภาพอกดวย ตามปรชญาของโรงเรยน คอ “บรณา

การทางการศกษา วฒนธรรมทางปญญา การศกษาเพ�อชวต”

ดงน�น นกศกษาในระดบประกาศนยบตรวชาชพช�นสง (ปวส.) ปท� 2 โรงเรยนพายพ

เทคโนโลยและบรหารธรกจ จงไดจดทาเวบไซตดหนงออนไลน ( Hzn Movie World ) ข�นมาเพ�อ

เปนแหลงรวบรวมภาพยนตรจากท�ตาง ๆ มาไวในเวบไซต และเปนการโฆษณาใหผท�สนใจ

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

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

ตางๆ

12

วตถประสงค 1.1.1 เพ�อสรางเวบไซตดหนงออนไลน 1.1.2 เพ�อใหเปนอกทางเลอกหน�งในการรบชมภาพยนตร 1.1.3 เพ�อพฒนาความสามารถในการทาเวบไซต

1.2 ผลท�คาดวาจะไดรบ 1.2.1 ไดทาเวบไซตดหนงออนไลน Hzn Movie World 1.2.2 เปนแหลงรวบรวมหนงจากแหลงตางๆ มาไวในเวบไซต 1.2.3 เพ�อใหผท�เขาชมเกดความบนเทง

1.3 ขEนตอนและวธการปฏบต 1.3.1 เสนอโครงรางของการศกษาโครงการ 1.3.2 ศกษาโปรแกรมท�ใชในการเขยนเวบไซต 1.3.3 รวบรวมขอมลจากแหลงขอมลตางๆ 1.3.4 วางแผนและออกแบบเวบไซต 1.3.5 จดทาขอมลใสในเวบไซต 1.3.6 ทดสอบและแกไขเวบไซต 1.3.7 สรปการดาเนนงาน

13

1.4 ระยะเวลาดาเนนงาน

ตารางท� 1.1 แสดงรายละเอยดระยะเวลาดาเนนงาน

1.5 ขอบเขตของโครงงาน 1.5.1 เวบไซตสามารถใหขอมลเก�ยวกบหนงตางๆ หนงใหม หนงดง ได เปนตน 1.5.2 เวบไซตมเมนขาวสารเพ�ออพเดทขาวของสารของหนงตางได 1.5.3 มเวบบอรดเพ�อเปนแหลงพบปะพดคย 1.5.4 มหองแชทท�สามารถแบงปนประสบการณกนได

การดาเนนการ

ระยะเวลาปฏบตงาน

ก.ค. 53

ส.ค. 53

ก.ย. 53

ต.ค. 53

พ.ย. 53

ธ.ค. 53

ม.ค.

53

ก.พ. 53

1. เสนอโครงรางของการศกษาโครงการ

2. ศกษาโปรแกรมท�ใชในการเขยนเวบไซต

3. รวบรวมขอมลจากแหลงขอมลตางๆ

4. วางแผนและออกแบบเวบไซต

5. จดทาขอมลใสในเวบไซต

6. ทดสอบและแกไขเวบไซต

7. สรปผลการดาเนนงาน

14

1.6 เคร�องมอและอปกรณ 1.6.1 ดานฮารดแวร (Hardware)

1. เคร�องคอมพวเตอรต�งโตะจานวน 1 เคร�อง - CPU Intel Core 2 Duo 2.53 GHz - RAM DDR II 2 GB - Hard Disk 250 GB

2. เคร�องคอมพวเตอรพกพาจานวน 1 เคร�อง - CPU Intel Core i5 M 460 2.67 GHz - RAM DDR III 4 GB - Hard Disk 640 GB

3. Flash Drive Kingston 8 GB

1.6.2 ดานซอฟแวร (Software) 1. ระบบปฏบตการ Windows 7 2. โปรแกรม Joomla 3. โปรแกรม Adobe Photoshop CS3 4. โปรแกรม Adobe Illustrator CS3 5. โปรแกรม Microsoft Word 2007

1.7 สถานท� 1.7.1 โรงเรยนพายพเทคโนโลยและบรหารธรกจ กม.ท� 4 ถ.เชยงใหม – แมโจ 262 หม 6

ต.หนองจอม อ.สนทราย จ.เชยงใหม 50210

1.7.2 102/1 ม.3 ต.ยหวา อ.สนปาตอง จ.เชยงใหม 50120

15

บทท� 2

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

2.1 ทฤษฏการสราง Template

Template ของโปรแกรม Artisteer ทาใหสามารถแบงรปแบบของเอกสารน�น ๆ ออกเปน

สองสวน คอ สวนท�แกไขได (Editable Regions) และสวนท�แกไขไมได (Non-Editable Regions)

เอกสารท�สรางจาก Template เดยวกนจะมรปแบบเหมอนกนหมด การสราง Template สามารถ

สรางไดจากหนาเอกสารวาง ๆ หรอหนาท�มขอมลอยแลว ซ� งรวมถงหนาเอกสารท�มขอมล แบบได

นามค เชน ASP, Cold Fusion, JSP หรอ PHP กตาม

2.1.1 ขEนตอนการสราง Template

1. ออกแบบหนาเวบเพจตามตองการ กาหนดใหสวนหวและสวนเมนเปน Template 2. คลกเมน File > Save as Template

ภาพท� 2.1 แสดงการออกแบบหนาเวบไซต

3. คลกปม Suggest Design เพ�อออกแบบ Design หนา Template 4. เม�อได Template ท�ตองการเราทาการเปล�ยนส เปล�ยนแบบเพ�อใหไดตามความ

ตองการของเรา

ภาพท� 2.2 แสดงหนา Template

5. หลงจากท�เราไดทา Template แลว เราจะทาการ Export Template

ภาพท� 2.3 แสดงขEนตอนการ Export Templat

2.1.2 การ Install Template ลงในโปรแกรม Joomla

จากน�นเราจะมาทาการ Install Template ลงในโปรแกรม Joomla เพ�อท�เราจะนา

Template ท�เราสรางน�นไปใชงานกบหนาเวบไซต

1. เราตองเขาไปท� Administratto เพ�อท�เราจะไดทาการ Install Template 2. คลกท� Extension > Install/Uninstall 3. เลอกไฟลท�เราทาการ Export 4. แลวคลกท� Upload File & Install เพ�อทาการ Install Template

ภาพท� 2.4 แสดงขEนตอน Install Template

2.1.3 การตEงคา Template ใน โปรแกรม joomla

ในกรณท�ตองการบนทกหนา Template ท�สรางข�น และไดทาการ Install Template

โปรแกรม Joomla เราตองไปทาการเชดคา เพ�อให Template ท�เราสรางน�นไปใชงานบนหนาเวบเรา

ทาตามข�นตอนดงแสดงตอไปน�

1. คลกเมน Extension 2. แลวเลอกท� Template Manager 3. เลอก Template ท�เราทาการ Install แลวคลกท� Default เพ�อใชงาน Template

ภาพท� 2.5 แสดงการการตEงคา Template

2.1.4 การเปดหนา Template

หลงจากท�สรางหนา Template เสรจเรยบรอยแลว และตองการเปดหนาเวบเพ�อท�เราจะได

ดวาเราไดทาการเชดคา Template ถกตองตามความตองการหรอเปลา ใหเราไปคลกท� Preview

หลงจากน�นจะปรากฏหนาเทมเพลตท�เลอกข� นมา โดยจะแสดงช�อเทมเพลตท�มมบน

ดานขวา โดยสวนท�สามารถแกไขไดสญลกษณของเมาสจะแสดงเปนรปเคอรเซอร และสวนท�ไม

สามารถแกไขขอมลไดน�นสญลกษณเมาสจะไมแสดงเคร�องหมายเคอรเซอรข�นมา ดงรปดานลาง

ภาพท� 2.6 การเปดหนาเทมเพลต

2.2 ทฤษฏสกบการออกแบบ

ผสรางสรรคงานออกแบบจะเปนผท�เก�ยวของกบการใชสโดยตรง มณฑนากรจะคดคนส

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

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

งาม ความสข สาหรบเรามไดหรอ สท�ใชสาหรบการออกแบบน�น ถาเราจะใชใหเกดความสวยงามตรง

ตามความตองการของเรา มหลกในการใชกวางๆ อย 2 ประการ คอ การใชสกลมกลนกน และ การใช

สตดกน

2.2.1 การใชสกลมกลนกน

การใชสใหกลมกลนกน เปนการใชสหรอน�าหนกของสใหใกลเคยงกน หรอคลายคลงกน

เชน การใชสแบบเอกรงค เปนการใชสสเดยวท�มน�าหนกออนแกหลายลาดบ การใชสขางเคยง เปน

การใชสท�เคยงกน 2 – 3 ส ในวงส เชน สแดง สสมแดง และสมวงแดง การใชสใกลเคยง เปนการใชส

ท�อยเรยงกนในวงสไมเกน 5 ส ตลอดจนการใชสวรรณะรอนและวรรณะเยน (warm tone colors and

cool tone colors) ดงไดกลาวมาแลว

2.2.2 การใชสตดกน

สตดกนคอสท�อยตรงขามกนในวงจรส (ดภาพวงจรส ดานซายมอประกอบ) การใชสให

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

กนอยางแทจรงม อยดวยกน 6 คส คอ

1. สเหลอง ตรงขามกบ สมวง

2. สสม ตรงขามกบ สน�าเงน

3. สแดง ตรงขามกบ สเขยว

4. สเหลองสม ตรงขามกบ สมวงน�าเงน

5. สสมแดง ตรงขามกบ น�าเงนเขยว

6. สมวงแดง ตรงขามกบ สเหลองเขยว

การใชสตดกน ควรคานงถงความเปนเอกภาพดวย วธการใชมหลายวธ เชน ใชสใหม

ปรมาณตางกน เชน ใชสแดง 20 % สเขยว 80% หรอ ใชเน�อสผสมในกนและกน หรอใชสหน�งสใด

ผสมกบสคท�ตดกน ดวยปรมาณเลกนอยรวมท�งการเอาสท�ตดกนมาทาใหเปนลวดลายเลก ๆ

สลบกน ในผลงานช�นหน�ง อาจจะใชสใหกลมกลนกนหรอตดกนเพยงอยางใดอยางหน�ง หรอ

อาจจะใชพรอมกนท�ง 2 อยาง ท�งน�แลวแตความตองการ และความคดสรางสรรคของเรา ไมม

หลกการ หรอรปแบบท�ตายตว

ในงานออกแบบ หรอการจดภาพ หากเรารจกใชสใหมสภาพโดยรวมเปนวรรณะรอน

หรอวรรณะเยน เราจะ สามารถควบคม และสรางสรรคภาพใหเกดความประสานกลมกลน งดงาม

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

หรอขดแยงได สสามารถขบเนนใหใหเกด จดเดน และการรวมกนใหเกดเปนหนวยเดยวกนได เรา

ในฐานะผใชสตองนาหลกการตางๆ ของสไปประยกตใชใหสอดคลอง กบเปาหมายในงานของเรา

เพราะสมผลตอการออกแบบ คอ

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

และภมหลง ของแตละคน สบางสสามารถรกษาบาบดโรคจตบางชนดได การใชสภายใน หรอ

ภายนอกอาคาร จะมผลตอการ สมผส และสรางบรรยากาศได

สรางความนาสนใจ สมอทธพลตองานศลปะการออกแบบ จะชวยสรางความประทบใจ

และความนาสนใจเปนอนดบแรกท�พบเหน

สบอกสญลกษณของวตถ ซ� งเกดจากประสบการณ หรอภมหลง เชน สแดงสญลกษณของ

ไฟ หรออนตราย สเขยวสญลกษณแทนพช หรอความปลอดภย เปนตน

สชวยใหเกดการรบร และจดจา งานศลปะการออกแบบตองการใหผพบเหนเกดการจดจา

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

ภาพท� 2.7 ภาพแสดงวงจรส

2.3 ทฤษฏการออกแบบพEนฐานและการออกแบบเวบไซต

เม�อเรากลาวถงการออกแบบน�นยอมกนความไปอยางกวางขวาง เชน การออกแบบทาง

ทศนศลป ส�งของเคร�องใช การตกแตง สนคา เคร�องประดบ เคร�องจกรกล ส�งพมพ สญลกษณ เปน

ตน การออกแบบไมไดมความหมายหรอคณคาเฉพาะในตวเองเทาน�น แตงานออกแบบเปน

ตวกาหนดหรอเสรมคณคาใหกบส�งใดส�งหน� ง ซ� งหวงผลจะใหไดคณคาทางความงาม เชน การ

สรางสรรคจตกรรมของศลปน กเร�มตนดวยการออกแบบ สวนจะออกแบบไวลวงหนาหรอ

ออกแบบไปพรอมกบการสรางสรรคงานกได การออกแบบใดๆ กตาม ยอมไดรบการปรบปรง

เปล�ยนแปลงอยตลอดเวลา มนษยไมเคยพงพอใจกบส�งใดส�งหน�งโดยไมมการเปล�ยนแปลง ตอเม�อ

มการพฒนาเปล�ยนแปลงใหเหมาะสมกบประโยชนและความพงพอใจแตละชวงเวลา ส�งน�นจงจะ

ไดรบการยอมรบเปนอยางด งานออกแบบท�งหลายจงปฏเสธการพฒนาไมไดในบทน�จะกลาวถง

หลกการออกแบบเบ�องตน เพ�อใหสามารถนาความรไปใชในการออกแบบ และพฒนาเอกสาร

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

2.3.1 วธการออกแบบ

1. การออกแบบท�เปนไปตามธรรมชาต (Natural Design) นกออกแบบอาจจะไดแรง

บนดาลใจในการออกแบบผลงานจากส�งท�เหนไดในธรรมชาต เชน ดอกไม ใบไม คน สตว ทวทศน

นาส�งท�เหนน�นมาจดองคประกอบ (Composition) และอาจตกแตงเพ�มเตมตามความเหมาะสมให

งานช�นน�นสวยงามสมบรณ

2. การออกแบบเรขาคณต (Geometrical Design) คอ การออกแบบโดยใชรปทรง

เรขาคณตเชน สามเหล�ยม ส� เหล�ยม วงกลม เปนตน มาประกอบกนเปนรปรางตางๆ ตามตองการ

3. การออกแบบนามธรรม (Abstract Design) คอ การออกแบบท�ไมแสดงเน�อหาแต

มงเนนความสวยงาม และความรสกของผด อาจไดแรงดลใจ ไดความคดจากธรรมชาตกได เปนการ

ออกแบบท�ทาไดหลายแงมม หลากหลายความคด

4. การออกแบบตกแตง (Decorative Design) คอ การออกแบบตกแตงใหดสวยงาม

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

ผา เคร�องประดบ เปนตน

5. การออกแบบคตกาหนด (Conventional Design) คอ การออกแบบโดยกาหนดข�น

เองวาส�งน�แทนส�งน�นท�ผออกแบบตองการ ซ� งความจรงอาจไมมอย ส�งท�ออกแบบอาจจะได

ความคดจากธรรมชาต แตมงตกแตงเพ�มเตมใหความสวยงาม และเปนไปตามความตองการ เชน

พระพทธรป อนประกอบดวยศลปะและอดมคต สรางข�นตามความคดเก�ยวกบรปรางท�สมบรณท�

เรยกวา “มหาบรษลกษณะ” ศลปกรรมสมยคลาสสคของกรกกเชนกน เปนการผสมผสานลกษณะ

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

6. การออกแบบกระจายลวดลาย (All over Design) เปนการออกแบบตามใจชอบ

อาจจะมลายท�ซ� าหรอไมซ� ากน การออกแบบประเภทน� มงเนนเร�องชวงระยะ (Space) เปนสาคญ

7. การออกแบบลวดลายซ� ากน (Repeated Design) หมายถง การออกแบบท�มลวดลาย

ซ� าๆกน เชน ลายผา ลายถวยชาม ซ� งจะมลายซ� าเรยงลาดบอยางสวยงาม เปนจงหวะโดยเวนชองวาง

ท�เทากนพองาม

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

เวบไซตเปนส�อท�ไดรบความนยมอยามากบนอนเตอรเนต ซ� งเวบไซตเปนส�อท�อยใน

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

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

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

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

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

มากข�น และสามารถเปรยบเทยบ คณภาพของเวบไซดตาง ๆ ไดเอง เวบไซดท�ไดรบการออกแบบ

อยางสวยงาม มการใชงานท�สะดวก ยอมไดรบความสนใจจากผใช มากกวาเวบไซดท�ดสบสน

วนวาย มขอมลมากมายแตหาอะไรไมเจอ นอกจากน� ยงใชเวลาในการแสดงผลแตละหนานาน

เ ก น ไ ป ซ� ง ป ญ ห า เ ห ล า น� ลว น เ ป น ผ ล ม า จ า ก ก า ร อ อ ก แ บ บ เ วบ ไ ซ ด ไ ม ด ท� ง ส� น

ดงน�น การออกแบบเวบไซดจงเปนกระบวนการสาคญในการสรางเวบไซด ใหประทบใจผใช ทา

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

ยงตองคานงถงการแขงขนกบเวบไซดอ�น ๆ อกดวย

1. หลกการออกแบบหนาเวบ

- สรางลาดบช�นความสาคญขององคประกอบ

เพ�อเนนใหเหนวาอะไรเปนเร�องสาคญมาก สาคญรองลงไป หรอสาคญนอย

ตามลาดบ การจดระเบยบองคประกอบอยางเหมาะสม จะชวยแสดงถงความสมพนธระหวาง

องคประกอบตาง ๆ ในหนาเวบได ตวอยางของลาดบความสาคญ ไดแก หวขอของเร�องตาง ๆ ตอง

มขนาดใหญกวาสวนของเน�อหาเสมอ ขอมลสาคญควรอยดานบนหรอดานซายของหนาเสมอใน

สวนของสสนกเชนเดยวกน สท�เดยวกนยอมส�อความหมายท�ใกลชดกนและมความสาคญเทาเทยม

กน ถาเลอกสท�แตกตางกนอยางชดเจน จะสามารถดงดดความสนใจจากผใช แตถาใชสหลากหลาย

เกนไปอยางไมมความหมาย กจะกลายเปนสรางความสบสนได

- สรางรปแบบ บคลก และสไตล

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

โฆษณา หรอขายสนคา รปแบบท�เหมาะสมจะชวยสรางความเขาใจของผใชไดดย�งข�น ตวอยาง

เวบไซตเก�ยวกบภาพยนตร กอาจสรางใหมลกษณะเปนเหมอนโรงภาพยนตรจรง ๆ กได

เวบไซตแตละประเภทจะมบคลกแตกตางกนข�นอยกบเปาหมายและเน�อหาของการนาเสนอ ซ� ง

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

สไตล หมายถง ลกษณะการจดโครงสรางของหนา รปภาพ ตวอกษร สรวมท�งกราฟก นกออกแบบ

ท�ดจะไมสรางสไตลของเวบตามอาเภอใจโดยไมคานงถงความเหมาะสมและขอควรระวงกคอ การ

นากราฟกจากเวบอ�นท�มสไตลแตกตางกนมาใช เพราะการเลอกใชกราฟกตองมความสมพนธกบ

เน�อหาอยางมเหตผล ไมใชใชกราฟกเพยงเพ�อแสดงฝมอวาคณสามารถตกแตงกราฟกโดยใชเทคนค

แปลก ๆ ได

- สรางความสม�าเสมอตลอดท�วท�งไซต

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

วายงอยในเวบเดมหรอเปลา การออกแบบเวบไซตท�ด ควรสรางมาตรฐานของเวบไซตใหเกดข�น

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

หนาเวบเพจ, รปแบบของกราฟก, ลกษณะตวอกษร, โทนส และองคประกอบอ�นๆ ท�เคยออกแบบ

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

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

อยางสะดวก ขอควรระวงของการรกษาความสม�าเสมอของเวบไซต คอ ตองสรางความนาสนใจ

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

- จดวางองคประกอบท�สาคญไวสวนบนของหนาเสมอ

ซ� งสวนบนท�วาน�หมายถง สวนแรกของหนาท�จะปรากฏข�นในหนาตางบราวเซอรโดยยง

ไมมการเล�อนหนาจอใด ๆ เน�องจากสวนบนสดผใชจะมองเหนไดกอน ดงน�นส�งท�อยในบรเวณน�

จงควรเปนส�งท�สาคญและสามารถดงดดความสนใจจากผใชได โดยปกตแลวสวนบนสดจะ

ประกอบดวย ช�อของเวบไซต ช�อหวเร�อง ส�งสาคญท�ตองการโปรโมทเวบไซต รวมท�งระบบเนว

เกช�น

- สรางสดสนใจดวยความแตกตาง

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

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

สาหรบหนาท�ถกออกแบบมาไมดโดยเนนการใชกราฟกหรอตวอกษรมากเกนไป จะยากตอการมอง

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

เพ�อใหเกดการนาเสนอท�นาสนใจได เพราะความแตกตางของสท�เกดข�นจะทาใหผอานสามารถ

แยกแยะบรเวณตาง ๆ ออกจากกนไดดข�น ตวอยางเชน การกาหนดพ�นหลงของแตละบรเวณเปนส

ตาง ๆ กน เพ�อแยกเน�อหาออกเปนสดสวน แตสพ�นน�นตองตดกบสของตวอกษรอยางชดเจน

เพ�อใหอานไดสะดวก

- จดแตงหนาเวบใหเปนระเบยบเรยบงาย และแยกเปนสดสวนไมดแนน

จนเกนไป การท�มขอมลหรอองคประกอบท�มากเกนไป ท�งในสวนของลงคและเน�อหา

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

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

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

ส�งท�สรางความยากลาบากตอการอาน คณควรจดตวหนงสอใหอยในคอลมนท�ไมกวางจนเกนไป

นก และตองไมเลกจนเกนไป ในบางคร� งการมคอลมนขนาดเลกหลายคอลมนตอกน ซ� งผอานตอง

อานจากบนลงลาง และเล�อนหนาจอข�นมา ดานบนเพ�ออานคอลมนถดไปอก เปนส�งท�ไมสะดวก

อยางย�ง

- ใชกราฟกอยางเหมาะสม

มหลายคนคดวาการใชกราฟกจานวนมากจะทาใหเวบดดและนาสนใจกวาเวบอ�น แต

ความจรงแลวการใชกราฟกจานวนมากอยางไมเปนระเบยบ อาจสงผลในทางตรงขามกบส�งท�เรา

คาดวงเอาไว การใชกราฟกจานวนมากเกนความจาเปน จะทาใหเกดจดเดนท�วไปท�งหนาและเปน

ผลใหไมมอะไรในหนาน�นเดนข�นมาจรง ๆ

2. รปแบบโครงสรางของหนาเวบ

รปแบบโครงสรางหนาเวบท�เราเหนกนอยท �วไปน�น มหลากหลายรปแบบซ�ง

สามารถแบงกลมไดตามโครงสราง ซ� งมท�พบบอย ๆ อย 4 ประเภท ไดแก

- โครงสรางหนาเวบในแนวต�ง ถอเปนโครงสรางท�ไดรบความนยมมากท�สด

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

เน�อหามากหรอนอย มระบบเนวเกช�นอยดานบนหรอดานขาง ตางกใชรปแบบแนวต�งท�งส�น เม�อใด

ท�หนาเวบมความยาวมากกวาพ�นท�หนาจอ บราวเซอรกจะแสดงสโครลบารข�นท�ขอบดานขวาของ

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

โดยไมมปญหา

- โครงสรางหนาเวบในแนวนอน ตองอาศยความคดสรางสรรคและความพยายาม

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

พ�นท�ในแนวนอนอยางเตมท� ปญหาแรกท�จะพบคอความกวางของหนาจอท�ไมแนนอน เน�องจาก

ความละเอยดของมอนเตอรท�ตางกน ถาขอมลเปนตวอกษรท�งหมดและมความกวางของบรรทดเตม

หนาจอ กจะสรางความลาบากตอผอานท�จะตองสายศรษะไปมา ถาหนาน�นมขอมลจานวนมาก ผใช

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

- โครงสรางหนาเวบท�พอดกบหนาจอ โดยท�วไปรปแบบน�จะใชพ�นท�หนาจอนอย

กวาเวบท�วไป และมกจะจดไวก�งกลางของหนาจอ ซ� งจะออกแบบใหมขนาดพอดกบ หนาจอโดย

ไมมสโครลบารปรากฏข�นมา เพราะท�จะใชในการนาเสนอขอมลท�มปรมาณไมมากนก ขอดของ

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

ของหนาไดพรอมกนตลอดเวลา

- โครงสรางหนาเวบแบบสรางสรรค รปแบบน� เปนโครงสรางท�อยเหนอกฎเกณฑ

ใด ๆ มกมรปแบบและการจดวางองคประกอบเฉพาะตวท�คณคาดไมถง ซ� งเปนท�นยมในเวบไซต

ของศลปน, นกออกแบบ, บรษทโฆษณา หรอผท�ทางานเก�ยวของกบความคดสรางสรรคเพราะ

สามารถใชเวบไซตของตวเอง ในการส�อในการแสดงถงฝมอและความสามารถในการออกแบบ

อยางสรางสรรค

3. สวนประกอบของหนาเวบ

เราสามารถแบงหนาเวบเพจออกได 3 สวนประกอบหลก ๆ ไดแก สวนหว สวนเน�อหา

และสวนทาย ซ� งแตละสวนมรายละเอยดดงตอไปน�

- สวนหวของหนา (Page Header) ถอเปนบรเวณท�สาคญท�สดของหนา เพราะเปน

สวนท�จะดงดดผใชใหตดตามเน�อหาท�เหลอภายในหนาดงกลาว โดยปกตสวนหวมกจะ

ประกอบดวยช�อเวบ ระบบเนวเกช�น และหวขอหลกหรอช�อของเน�อหาในหนาน�นกได และไมวาท�

บรเวณน�จะใชองคประกอบอะไรกตาม แตส�งสาคญคอความสม�าเสมอท�จะตองมเหมอนกนในทกๆ

หนาและท�ตองระวงคอ ถาเราใชกราฟกท�มขนาดใหญ ซ� งตองใชเวลานานในการดาวนโหลด และ

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

ไลผใชใหเปล�ยนไปยงเวบอ�นได

บรเวณท�สาคญคอมมซายดานบนของเวบ ซ� งถอเปนบรเวณท�มความสาคญมาก

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

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

กลบไปยงหนาโฮมเพจอกดวย

- สวนของเน�อหา (Page Body) ควรจะมความกะทดรด และจดเปนระเบยบเพ�อให

มองเหนขอมลไดรวดเรว โดยแสดงใจความสาคญไวในสวนตน ๆ ของหนา พรอมท�งมการ

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

ขนาดประเภทของตวอกษร ท�เหมาะสม การกาหนดความยาวบรรทดท�ไมใหยาวเกนไป จนยากตอ

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

เช�อม�นตอเน�อหาย�งข�น

บทท� 3

การออกแบบและพฒนาโปรแกรม

3.1 การออกแบบหนาจอหลกของระบบ

ภาพท� 3.1 แสดงหนาจอหลกของเวบไซตดหนงออนไลน

จากภาพท� 3.1 เปนภาพแสดงหนาจอหลกของเวบไซตดหนงออนไลน Hzn Movie

World โดยมสวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงโมดลตาง ๆ ของเวบไซต

สวนท� 3 คอ สวนแสดงหนา Facebook Fan Page

1

2

3

3.2 การออกแบบหนาจอแสดงผลเนEอหาเวบไซต

3.2.1 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลน

ภาพท� 3.2 แสดงหนาจอแสดงผลเน�อหาเวบไซตเมนดหนงออนไลน

จากภาพท� 3.2 เปนภาพแสดงหนาจอแสดงผลเน�อหาเมนดหนงออนไลน โดยม

สวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงโมดลตาง ๆ ของเวบไซต

สวนท� 3 คอ สวนแสดงเน�อหาดหนงออนไลน

1

2

3

3.2.2 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนหองแชท

ภาพท� 3.3 แสดงหนาจอแสดงผลเน�อหาเมนหองแชท

จากภาพท� 3.3 เปนภาพแสดงหนาจอแสดงผลเน� อหาเมนหองแชท โดยม

สวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงโมดลตาง ๆ ของเวบไซต

สวนท� 3 คอ สวนแสดงเน�อหาเก�ยวกบหองแชท

2

3

1

3.2.3 การออกแบบหนาจอแสดงผลเน�อหาเวบบอรด

ภาพท� 3.4 แสดงหนาจอแสดงผลเน�อหาเวบบอรด

จากภาพท� 3.4 เปนภาพแสดงหนาจอแสดงผลเน�อหาเมนเวบบอรด โดยม

สวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงโมดลตาง ๆ ของเวบไซต

สวนท� 3 คอ สวนแสดงเน�อหาของเวบบอรด

1

2 3

3.2.4 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนขาวสารตาง ๆ

ภาพท� 3.5 แสดงหนาจอแสดงผลเน�อหาเมนขาวสารตาง ๆ

จากภาพท� 3.5 เปนภาพแสดงหนาจอแสดงผลเน� อหาเมนขาวสาร โดยม

สวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงโมดลตาง ๆ ของเวบไซต

สวนท� 3 คอ สวนแสดงเน�อหาของขาวสารตาง ๆ

2

3

1

3.2.6 การออกแบบหนาจอแสดงผลเน�อหาเวบไซตเมนตดตอเรา

ภาพท� 3.6 แสดงหนาจอแสดงผลเน�อหาเมนตดตอเรา

จากภาพท� 3.6 เปนภาพแสดงหนาจอแสดงผลเน� อหาเมนตดตอเรา โดยม

สวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงโมดลตาง ๆ ของเวบไซต สวนท� 3 คอ สวนแสดงเน�อหาตดตอเรา

2

3

1

บทท� 4

การพฒนาระบบ

5. 1 หลกในการพฒนาโปรแกรม

การพฒนาเวบไซตดหนงออนไลน Hzn Movie World ควรมการวางแผนอยางเปนข�นเปน

ตอน กาหนดวตถประสงคชดเจนต�งแตข�นตอนการออกแบบ ข�นตอนการผลต และข�นตอนการ

ประยกตใชงานเพ�อใหผเขาชมไดรบชมอยางเขาใจ

4.1.1 การออกแบบเวบไซตดหนงออนไลน

1. การวเคราะหเน�อหา

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

การส�อสารกบผเขาชมเวบไซต

• การออกแบบสวนตาง ๆ ของเวบไซต

• วางโครงสรางการออกแบบสวนตาง ๆ อยางเรยบรอย ไมดหนาแนนหรอม

ชองวางมากเกนไป

2. กาหนดวตถประสงคโดยคานงถง

• ส�งท�คาดหวงจากผเขาชมเม�อไดเขาชมเวบไซต เชน ทาใหผเขาชมเวบไซตรจก

Hzn Movie World มากข�น เปนจดประสงคหลกในการสรางเวบไซต

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

สามารถเขาชมได

3. ลาดบข�นการนาเสนอ

• การใชภาษามความเหมาะสมและเขาใจงายตอผเขาชม

• ขนาดของตวอกษร สของของตวอกษรสามารถอานไดงายไมทาใหผเขาชมเสย

บคลกภาพ

• การใชโทนสของเวบไซตไมฉดฉาดหรอจดชดจนเกนไป

4.1.2 การสรางหรอผลตเวบไซต

1. วางเคาโครงการสรางเวบไซตตามท�ตองการ

2. นาเคาโครงท�ไดออกแบบไวมาสรางหรอผลตเวบไซต

3. แสดงหนาเวบไซตของการแสดงผล

• ดานเน�อหามความถกตอง และอานไดงาย มความเขาใจในการอาน

• การลงคเน�อหาตาง ๆ ภายในเวบไซตมความถกตอง และใชงานไดงาย

4.1.3 การประยกตใชงานเวบไซต

1. สามารถนาไปใชงานดานตาง ๆ ได เชน เปนการแนะนาภาพยนตรตาง ๆ ใหคนท�

สนใจไดรเพ�มมากข�น

2. การประเมนผล ซ� งเปนข�นตอนสดทายของการพฒนาเวบไซตใหมการพฒนามาก

ข�น

5. 2 เคร�องมอท�ใชในการพฒนาโปรแกรม

4.2.1 โปรแกรม Joomla 1.5 เปนอกโปรแกรมหน� ง ท�มการออกแบบมาเพ�อท�จะใชในการ

จดสรางเวบไซต

4.2.2 โปรแกรม Adobe Photoshop CS3 เปนโปรแกรมท�ใชในการตดตอและตกแตงภาพหรอ

รปภาพท�ตองการ

4.2.3 โปรแกรม Adobe Illustrator CS3 เปนโปรแกรมท�ใชงานการตดตอและตกแตงภาพหรอ

รปภาพท�ตองการ มการใชงานคลายคลงกบโปรแกรม Adobe Photoshop CS3

5. 3 ผงโครงสรางของโปรแกรม(Site Map)

ภาพท� 4.1 ผงโครงสรางของโปรแกรม (Site Map)

Home

หนาแรก

Home

ดหนงออนไลน

Thai Movie

Inter Movie

ขาวสาร

News Update

หองแชท

Chat Room

เวบบอรด

ตดตอเรา

Contact Us

Webboard

บทท� 5

การประเมนผลและสรปผลการศกษา

5. 4 การประเมนผล

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

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

การเขาใชในดานตาง ๆ ไมวาจะเปนทางสถต การสงเกตและรบแจงปญหาการใชงาน ดงน�

5.1.1 การประเมนผลโดยทางสถต

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

ประเมนใหผท�เขาใชหรอเย�ยมชมเวบไซตทาการประเมน โดยผพฒนาโปรแกรมเปนผกาหนด

หลกเกณฑการประเมนเอง โดยสอดคลองกบการเขาใชและวตถประสงคของการเผยแผขอมล

ในเวบไซต

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

ประเมนดงน�

รายละเอยด เกณฑ การประเมน

5 4 3 2 1

1. เวบไซตมความสวยงามและนาสนใจ 46% 36% 18% 0% 0%

2. เวบไซตมความงายตอการเขาใชงาน 33% 57% 10% 0% 0%

3. เวบไซตมประโยชนสาหรบบคคลท�วไป 62% 28% 10% 0% 0%

4. เวบไซตมประโยชนตอสถานประกอบการ 39% 42% 9% 10% 0%

5. เน�อหาในเวบไซตมความเหมาะสม 53% 17% 24% 6% 0%

ตารางท� 5.1 แสดงรายละเอยดแบบประเมนผลโครงการทางสถต

5 = ดมาก 4 = ด 3 = ปานกลาง 2 = พอใช 1 = ปรบปรง

สรปผลการประเมน

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

2. การเขาชมเวบไซตมความงาย เขาชมและใชงานจะตองพฒนาเวบไซตใหมความงายตอการใชงานมากข�นเพ�อความเขาใจของผเขาชมตอไป

3. เวบไซตมประโยชนสาหรบผท�ตองการเขามาค4. เน�อหาในเวบไซตเหมาะสม ในระดบด แสดงวาเน�อหาสามารถส�อสารและใหความ

เขาใจตอผเขาชมเปนอยางด

5.1.2 การสงเกต

การสงเกตเปนการประเมนท�ไดจากการสงเกตการณเขาใชของผใชงานเวบไซต เปนการ

สารวจความพงพอใจท�ผใชงานมตอการใชงานเวบไซ

เวบไซตสรปไดดงน�

1. ผเขาชมเวบไซตมความสนใจและเพลดเพลนในการเขาชมและใชงานเวบไซต

2. ผเขาชมเวบไซตสามารถเขาใชงานไดงาย และมความเขาใจเน�อหาในเวบไซต

5.2 สรปผลการศกษา

เวบไซตน� เปนเวบไซต

ออนไลน Hzn Movie World

เปนท�รจกกนอยางแพรหลาย

ไดเรยนรการคด วเคราะหการออกแบบเวบไซต

เวบไซตมากข�น และยงเปนการ

จดทาเวบไซตดหนงออนไลน

ในคร� งน� โดยสงเขปดงน�

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

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

การสงเกตเปนการประเมนท�ไดจากการสงเกตการณเขาใชของผใชงานเวบไซต เปนการ

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

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

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

เวบไซตน� เปนเวบไซตการพฒนาส�ออเลกทรอนกสเพ�อการศกษา เร� อง เวบไซตดหนง

Hzn Movie World เพ�อเปนการแนะนาประชาสมพนธเวบไซตดหนงออนไลนแหงน� ให

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

ด วเคราะหการออกแบบเวบไซต มประสบการณและความชานาญในการสราง

ยงเปนการพฒนาศกยภาพของนกศกษาใหมประสทธภาพ

ดหนงออนไลน แลวสามารถสรปผล ปญหา อปสรรค และขอเสนอแนะ

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

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

จะตองพฒนาเวบไซตใหมความงายตอการใชงานมากข�นเพ�อความเขาใจของผเขา

นหาหนงใหม ๆ เน�อหาในเวบไซตเหมาะสม ในระดบด แสดงวาเน�อหาสามารถส�อสารและใหความ

การสงเกตเปนการประเมนท�ไดจากการสงเกตการณเขาใชของผใชงานเวบไซต เปนการ

ต จากการสงเกตการเขาใชและรบชม

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

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

การพฒนาส�ออเลกทรอนกสเพ�อการศกษา เร� อง เวบไซตดหนง

แนะนาประชาสมพนธเวบไซตดหนงออนไลนแหงน� ให

การศกษาของการทาเวบไซตในคร� งน� มวตถประสงคเพ�อใหนกศกษา

มประสบการณและความชานาญในการสราง

ใหมประสทธภาพตอไป หลงจากท�ได

เสนอแนะในการศกษา

5.3 ปญหาอปสรรค และขอจากดของระบบ

5.3.1 ผจดทาไมมความชานาญและความสามารถในการทาเวบไซต

5.3.2 ผจดทาขาดความรทางดานการใชโปรแกรมในการทาเวบไซต

ตกแตงรปภาพ และโปรแกรมตดตอ

5.3.3 มการแสดงผลท�ผดพลาดจากท�ไดออกแบบไว

5.3.4 ผจดทายงขาดประสบการณในการทาเวบไซต จงทาใหออกแบบผงงานซบซอน ยากตอ

การใชงาน

5.4 ขอเสนอแนะ

5.4.1 เวบไซตควรจะมระบบงานท�ใชงายและออกแบบอยางเปนระบบมาก

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

ปญหาอปสรรค และขอจากดของระบบ

ไมมความชานาญและความสามารถในการทาเวบไซต

ผจดทาขาดความรทางดานการใชโปรแกรมในการทาเวบไซต

ตกแตงรปภาพ และโปรแกรมตดตอ

มการแสดงผลท�ผดพลาดจากท�ไดออกแบบไว

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

เวบไซตควรจะมระบบงานท�ใชงายและออกแบบอยางเปนระบบมาก

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

ผจดทาขาดความรทางดานการใชโปรแกรมในการทาเวบไซตรวมไปถงโปรแกรม

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

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

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

สรางเวบไซตในพรบตาดวย พมพคร� งท� 1. กรงเทพฯ

เอกสารอางอง

สรางเวบไซตในพรบตาดวย Joomla ฉบบสมบรณ. โดย พงศกด9 อภลกขตพงศกรงเทพฯ: ซเอดยเคช�น, 2552.

โดย พงศกด9 อภลกขตพงศ.

ภาคผนวก

การตดตEงโปรแกรม Joomla

หลงจากท�สราง

เพ�อสาหรบสรางเวบไซตกอน

1. ดาวนโหลดโปรแกรม 2. เปล�ยนช�อโฟลเดอร โดยในท�น� จะเปน

Files – Apperv – www

เม�อไดทาตามข�นตอนดงน�ไปแลวจะเขาสการตดต�ง โปรแกรม

Address โดย http://localhost/

ภาคผนวก ก

คมอการตดตEงโปรแกรม Joomla

Joomla

หลงจากท�สรางฐานขอมลเสรจแลวข�นตอนตอไปจะเปนการตดต�งโปรแกรม

เพ�อสาหรบสรางเวบไซตกอน

ดาวนโหลดโปรแกรม Joomla มา แลวทาการ Extract Files เปล�ยนช�อโฟลเดอร โดยในท�น� จะเปน Joomla 2 ใหคดลอกนาไปวางท�

เม�อไดทาตามข�นตอนดงน�ไปแลวจะเขาสการตดต�ง โปรแกรม Joomla

http://localhost/ช�อโฟลเดอร ตวอยาง http://localhost/Joomla2

ฐานขอมลเสรจแลวข�นตอนตอไปจะเปนการตดต�งโปรแกรม Joomla

ใหคดลอกนาไปวางท� Program

Joomla โดยไปกรอก

ข�นตอนแรกของการตดต�งคอ การเลอกภาษาโดยในท�น� เลอกเปนภาษาองกฤษ จากน�น

คลกปม Next เพ�อตรวจสอบสทธ9 การตดต�ง

ภาพท�

ข�นตอนแรกของการตดต�งคอ การเลอกภาษาโดยในท�น� เลอกเปนภาษาองกฤษ จากน�น

เพ�อตรวจสอบสทธ9 การตดต�ง

ภาพท� ก.1 หนาตางท�แสดงของการตดต�งภาษา

ภาพท� ก.2 หนาตางท�ตรวจสอบสทธ9 การตดต�งใหกด Next

ข�นตอนแรกของการตดต�งคอ การเลอกภาษาโดยในท�น� เลอกเปนภาษาองกฤษ จากน�น

ข�นตอนน� จะเปนการตรวจสอบสทธ9 การเขยนลงในไฟล

ทางานของตวแปลภาษา PHP

ปม Next ไดเชนกน

ภาพท�

ข�นตอนน� จะเปนการตรวจสอบสทธ9 การเขยนลงในไฟล configuration.php

PHP แลวคลกปม Next จะเขาสสวนลขสทธของโปรแกรมในหนาน�กคลก

ภาพท� ก.3 หนาตางท�ตรวจสอบสทธ9 การตดต�งใหกด Next

configuration.php และฟงกชนการ

จะเขาสสวนลขสทธของโปรแกรมในหนาน�กคลก

สวนน�จะเปนหวใจของการตดต�ง

1. เลอกชนดของฐานขอมลท�ตองการใชงาน กรณน� ใหเลอก

2. ระบช�อโฮสตของฐานขอมล โดยพมพ

3. ระบช�อผใชฐานขอมล ใหพมพ

4. ระบช�อฐานขอมลท�ใชเชน

5. คลกปม

สวนน�จะเปนหวใจของการตดต�ง

เลอกชนดของฐานขอมลท�ตองการใชงาน กรณน� ใหเลอก mysql

ระบช�อโฮสตของฐานขอมล โดยพมพ localhost

ระบช�อผใชฐานขอมล ใหพมพ root และกาหนดรหสผานของฐานขอมล

ระบช�อฐานขอมลท�ใชเชน Joomla2

Next

ภาพท� ก.4 ข�นตอนการกาหนดการตดต�ง

mysql

และกาหนดรหสผานของฐานขอมล mysql

จะมหนาตาง

สวนน�จะเปนสวนกาหนดการเขาใน

•

•

•

•

•

จะมหนาตาง FTP Configuration ใหคลก Next ตอไป

สวนน�จะเปนสวนกาหนดการเขาใน Admin ซ� งคาท�ตองระบไดแก

ช�อเวบไซต

อเมลผดแลเวบ

รหสผานของผดแลเวบ

คลกปมตดต�งขอมลตวอยาง

จากน�นคลกปม Next เพ�อใหกระบวนการเสรจส�นอยาง

ภาพท� ก.5 สวนกาหนดเขา Admin

คาท�ตองระบไดแก

เพ�อใหกระบวนการเสรจส�นอยางสมบรณ

•

คลกปม Site เพ�อดหนาเวบไซตจะปรากฏเวบไซตพรอมขอมลตวอยางดงน�

ภาพท�

เขาไปลบ หรอเปล�ยนช�อโฟลเดอร installation ดวย

เพ�อดหนาเวบไซตจะปรากฏเวบไซตพรอมขอมลตวอยางดงน�

ภาพท� ก.6 ตวอยางหนาเวบไซตท�แสงใหเหนเม�อตดต�งเสรจแลว

เพ�อดหนาเวบไซตจะปรากฏเวบไซตพรอมขอมลตวอยางดงน�

ตวอยางหนาเวบไซตท�แสงใหเหนเม�อตดต�งเสรจแลว

การลง Appserv เพ�อรน PHP

ภาคผนวก ข

คมอการลง Appserv

PHP

ภาพท� ข.1 ไอคอน Appserv

ภาพท� ข.2 การตดต�ง Appserv

ภาพท� ข.3 การเลอกระบบฐานขอมล

ภาพท� ข.4 การกาหนดรหสการเขาใช

ภาพท� ข.5 การตดต�ง Appserv เสรจสมบรณ

ภาพท� ข.6 เปดหนาโปรแกรม Appserv

แบบประเมนความพงพอใจตอการเขาใชเวบไซต

คาชEแจง 1. โปรดประเมนตามความเปนจรง

2. ใหทานประเมนโดยการเตมเคร�องหมาย

เหมาะสมสาหรบทาน

แบบประเมนความพงพอใจตอการเขาใชเวบไซต

รายละเอยดการประเมน

1. เวบไซตมความสวยงามและนาสนใจ

2. เวบไซตมความงายตอการเขาใชงาน

3. เวบไซตมประโยชนสาหรบ

4. เวบไซตมประโยชนตอ

5. เน�อหาในเวบไซตมความเหมาะสม

เกณฑคะแนน 5 =

ขอเสนอแนะ

................................

................................

................................

................................

ภาคผนวก ค

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

“Hzn Movie World”

โปรดประเมนตามความเปนจรง จากท�ไดเขาชมเวบไซตแลว

ใหทานประเมนโดยการเตมเคร�องหมาย � ลงในชองเกณฑการประเมนตามท�คดวา

เหมาะสมสาหรบทาน

แบบประเมนความพงพอใจตอการเขาใชเวบไซตดหนงออนไลน Hzn Movie World

รายละเอยดการประเมน เกณฑการประเมน

5 4

เวบไซตมความสวยงามและนาสนใจ

เวบไซตมความงายตอการเขาใชงาน

เวบไซตมประโยชนสาหรบบคคลท�วไป

เวบไซตมประโยชนตอสถานประกอบการ

เน�อหาในเวบไซตมความเหมาะสม

5 = ดมาก 4 = ด 3 = ปานกลาง 2 = พอใช 1 = ปรบปรง

................................................................................................................................

................................................................................................................................

................................................................................................................................

................................................................................................................................

ดหนงออนไลน

ลงในชองเกณฑการประเมนตามท�คดวา

Hzn Movie World

เกณฑการประเมน

3 2 1

ปรบปรง

..................................................

..................................................

..................................................

..................................................

ช�อ - ช�อสกล

วนเดอนปเกด

สถานท�เกด

สถานท�อยปจจบน

ประวตการศกษา

พ.ศ.2545

พ.ศ.2548

พ.ศ.2551

ปจจบน

ประวตผจดทา

นายภทรพล หลวแสน

20 สงหาคม 2533

โรงพยาบาลมหาราชนครเชยงใหม

102/1 ม.3 ต.ยหวา อ.สนปาตอง จ

50120

สา เส รจการศกษาระดบ

โรงเรยนพทธโศภน เชยงใหม

ส า เ ส ร จ ก า ร ศ ก ษ า ร ะ ดบ

โรงเรยนสรมงคลานสรณ

สาเรจการศกษาระดบประกาศนยบตรวชาชพ

แ ผ น ก ค อ ม พ ว เ ต อ ร ธ ร ก จ

เทคโนโลยและบรหารธรกจ

กาลงศกษาในระดบประกาศนยบตรวชาชพช�นสง

แ ผ น ก ค อ ม พ ว เ ต อ ร ธ ร ก จ โ ร ง เ ร ย น พ า ย พ

เทคโนโลยและบรหารธรกจ

มหาราชนครเชยงใหม

สนปาตอง จ.เชยงใหม

สา เส รจการศกษาระดบประถมศกษาป ท� 6

พทธโศภน เชยงใหม

ส า เ ส ร จ ก า ร ศ ก ษ า ร ะ ดบ มธ ย ม ศ ก ษ า ป ท� 3

ระดบประกาศนยบตรวชาชพ

ธ ร ก จ โ ร ง เ ร ย น พ า ย พ

เทคโนโลยและบรหารธรกจ

กาลงศกษาในระดบประกาศนยบตรวชาชพช�นสง

แ ผ น ก ค อ ม พ ว เ ต อ ร ธ ร ก จ โ ร ง เ ร ย น พ า ย พ

เทคโนโลยและบรหารธรกจ