รายงานผลการดาเนินงานโครงการวิชาชีพ เรื่อง ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ผู้จัดทา นางสาวพรทิพา นิลแดง นางสาวมยุรฉัตร แซ่ซอื้
รายงานผลการดาเนินงานโครงการวิชาชีพนี้เป็นส่วนหนึ่งของ การศึกษาหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) สาขางานคอมพิวเตอร์ธุรกิจ สาขางานคอมพิวเตอร์ธรุ กิจ ประเภทวิชาบริหารธุรกิจ วิทยาลัยอาชีวศึกษาสุพรรณบุรี สถาบันการอาชีวศึกษาภาคกลาง 4 ปีการศึกษา 2560
ก
ชื่อโครงการวิชาชีพ
ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ผู้วิจัย
นางสาวพรทิพา นิลแดง นางสาวมยุรฉัตร แซ่ซื้อ
อาจารย์ผู้สอน
นายวิโรจน์ แก้วเรือง
อาจารย์ที่ปรึกษา
นายอภิวัฒน์ ฮงทอง
หลักสูตร
ประกาศนียบัตรวิชาชีพชั้นสูง
สาขางาน
คอมพิวเตอร์ธุรกิจ
สาขาวิชา
คอมพิวเตอร์ธุรกิจ
ประเภทวิชา
บริหารธุรกิจ
ปีการศึกษา
2560
บทคัดย่อ รายงานการวิจัยเรื่อง ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้ อป เป็นการวิจัยเชิงคุณภาพ มุ่งศึกษาให้ทราบถึงการสร้างเว็บไซต์ ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้าน นาฬิกาข้อมือ พีเอ วอชช้อป และเพื่อหาความพึงพอใจของลูกค้าที่มาใช้บริการเว็บไซต์ ระบบร้านค้า ออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป โดยใช้แบบสารวจความพึงพอใจ เก็บรวบรวม ข้อมูลจากผู้ที่เข้บริการเว็บไซต์ จานวน 30 คน ซึ่งมีทั้งนักเรียน นักศึกษา และลุ่มคนทางาน ผลจากการวิจัยพบว่า ผู้ที่เข้ามาใช้บริการเว็บไซต์ ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้าน นาฬิกาข้อมือ พีเอ วอชช้อป ทั้งหมด 30 คน ผู้ที่เข้ามาใช้บริการ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป ซึ่ง บุคคลที่เข้ามาใช้บริการเว็บไซต์ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป นั้น มีระดับความพึงพอใจโดยรวมใน ระดับดีมาก
ข
กิตติกรรมประกาศ โครงการวิชาชีพ เรื่อง การสร้างระบบเว็บไซต์ ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกา ข้อมือ พีเอ วอชช้อป ส่าเร็จลุล่วงได้ ต้องขอกราบขอบพระคุณความอนุเคราะห์ของ นายชูเชิด มัจฉาฉ่่า ผู้อ่านวยการวิทยาลัยอาชีวศึกษาสุพรรณบุรี ที่อนุมัติให้คณะผู้จัดท่าโครงการวิชาชีพ เรื่อง ระบบร้านค้า ออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป ครั้งนี้ ขอขอบคุณอาจารย์อภิวัฒน์ ฮงทอง และอาจารย์วิโรจน์ แก้วเรือง ที่ให้ความกรุณาและความ ช่ว ยเหลื อ ในการท่า โครงวิช าชีพ เรื่อ ง ระบบร้ านค้า ออนไลน์ กรณี ศึกษา : ร้า นนาฬิก าข้ อมื อ พีเ อ วอชช้อป คณะผู้จัดท่าขอขอบพระคุณเป็นอย่างสูง ท้ายที่สุดนี้ คณะผู้จัดท่าหวังว่าโครงการวิชาชีพ เรื่อง ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้าน นาฬิกาข้อมือ พีเอ วอชช้อป ฉบับนี้จะเป็นประโยชน์กับผู้ที่สนใจไม่มากก็น้อย
คณะผู้จัดท่า นางสาวพรทิพา นิลแดง นางสาวมยุรฉัตร แซ่ซื้อ
ค
สารบัญ หน้า บทคัดย่อ
ก
กิตติกรรมประกาศ
ข
สารบัญ
ค
สารบัญภาพ
จ
บทที่ 1 บทนา
1
1.1 ที่มาและความสาคัญของปัญหา
1
1.2 วัตถุประสงค์ของโครงการ
1
1.3 สมมติฐานของโครงการ
2
1.4 ขอบเขตของโครงการ
2
1.5 นิยามศัพท์ที่ใช้ในโครงการ
3
1.6 ประโยชน์ที่คาดว่าจะได้รับ
4
บทที่ 2 ทฤษฎีและงานวิจัยที่เกี่ยวข้อง
5
2.1 ทฤษฎีโครงสร้างเว็บไซต์
5
2.2 ทฤษฎีอินเตอร์เน็ต
8
2.3 ทฤษฎีหลักการออกแบบเว็บไซต์
9
2.4 ทฤษฎีการจัดการระบบฐานข้อมูล
12
2.5 ทฤษฎีโปรกรม Xampp
13
2.6 ทฤษฎีการใช้ Adobe Photoshop CS6
14
2.7 ทฤษฎีการใช้ Adobe Dreamweaver CS6
28
2.8 AppServ
41
บทที่ 3 วิธีดาเนินการโครงการ
46
3.1 ศึกษาข้อมูลและออกแบบเครื่องมือที่ใช้ในงานวิจัย
46
3.2 กาหนดแบบแผนการทดลอง
47
3.3 กาหนดประชากรและคัดเลือกกลุ่มตัวอย่าง
48
3.4 สร้างเครื่องมือที่ใช้ในงานวิจัย
57
ง
สารบัญต่อ หน้า 3.5 ดาเนินการทดลองและเก็บรวบรวมข้อมูล
69
3.6 วิเคราะห์ข้อมูลและสถิติที่ใช้
69
บทที่ 4 ผลการดาเนินงานโครงการ
72
4.1 ผลการพัฒนาโครงการ
72
4.2 ผลการดาเนินการวิจัย
78
บทที่ 5 สรุป อภิปรายผลและข้อเสนอแนะ
80
5.1 สรุปผลการวิจัย
80
5.2 สรุปการอภิปรายผลการวิจัย
80
5.3 ข้อเสนอแนะ
81
5.4 ปัญหาและอุปสรรค
81
บรรณานุกรม
82
ภาคผนวก ก
83
ภาคผนวก ข
95
ประวัติผู้จัดทา
96
จ
สารบัญ หน้า ภาพที่ 3-1 หน้าล็อกอินระบบ Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 49 ภาพที่ 3-2 หน้า Admin ระบบการจัดการหลังร้าน ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 49 ภาพที่ 3-3 หน้าแก้ไขสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 50 ภาพที่ 3-4 หน้าเพิ่มสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 50 ภาพที่ 3-5 หน้าติดต่อเว็บไซต์ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 51 ภาพที่ 3-6 หน้าตะกร้าสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 52 ภาพที่ 3-7 หน้ายินดีต้อนรับสู่ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 52 ภาพที่ 3-8 หน้าขั้นตอนการสั่งซื้อร้านนาฬิกาข้อมือ พีเอ วอชช้อป 53 ภาพที่ 3-9 หน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป 53 ภาพที่ 3-10 หน้าสินค้าทั้งหมดร้านนาฬิกาข้อมือ พีเอ วอชช้อป 54 ภาพที่ 3-11 ออกแบบไอคอนหน้าลบสินค้าร้านนาฬิกาข้อมือ พีเอ วอชช้อป 54 ภาพที่ 3-12 ออกแบบไอคอนหน้าระบบหลังร้านร้านนาฬิกาข้อมือ พีเอ วอชช้อป 55 ภาพที่ 3-13 ออกแบบไอคอนหน้าเข้าสู่ระบบ Admin หลังร้านร้านนาฬิกาข้อมือ พีเอ วอชช้อป 55 ภาพที่ 3-14 ออกแบบไอคอนหน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป 56 ภาพที่ 3-15 หน้าแรกของ App serv project 8.5.0 ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 56 ภาพที่ 3-16 หน้าล็อกอินเข้าสู่ App serv project 8.5.0 ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 57 ภาพที่ 3-17 หน้าตารางฐานข้อมูล ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 57 ภาพที่ 3-18 หน้าประเภทของสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 58 ภาพที่ 3-19 หน้าฐานข้อมูล Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 58 ภาพที่ 3-20 หน้าฐานข้อมูล Order สินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 59 ภาพที่ 3-21 หน้าฐานข้อมูล รายละเอียดสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 59 ภาพ ภาพของผู้ตอบแบบสารวจความพึงพอใจในการใช้บริการเว็บไซต์ 60 ภาพ ภาพของผู้ตอบแบบสารวจความพึงพอใจในการใช้บริการเว็บไซต์ 61
1
บทที่ 1 บทนา 1.1 ที่มาและความสาคัญของปัญหา ในปั จ จุ บั น เทคโนโลยี ส ารสนเทศ มีก ารติดต่อ สื่ อสารที่ส ะดวกและรวดเร็ว โดยมีเ ทคโนโลยี อินเทอร์เน็ตเข้ามามีบทบาทในชีวิตประจาวันของคนเรามากขึ้น ทาให้เกิดความสะดวกสบายและรวดเร็ว ต่อการเลือกซื้อสินค้าตลอด 24 ชั่วโมง ส่งผลให้การสั่งซื้อแบบออนไลน์เป็นช่องทางหนึ่งที่ได้รับความนิยม อย่างแพร่หลาย ร้ า นขายนาฬิ ก าข้ อ มื อ แต่ ก่ อ นเป็ น เพี ย งขายตามร้ า น การขายตามตลาดนั ด หรื อ ขายตาม ห้างสรรพสินค้า ปัจจุบันมีการพัฒนาขึ้นเมื่อมีเทคโนโลยีเข้ามาช่วยจึงทาให้ร้านขายนาฬิกาออนไลน์ ได้รับ ความนิยมเป็นอย่างมาก เนื่องจากนาฬิกาข้อมือมีความกะทัดรัด พกพาสะดวกและมีความจาเป็นในชีวิต ประจา ปัจจุบันมีวิวัฒนาการของนาฬิกาข้อมือที่ถูกพัฒนากลไกในการใช้งานให้มากมายขึ้น เช่น เข็มทิศ จับเวลา บันทึกเบอร์โทร การปลุกเตือน ทาให้นาฬิกาข้อมือมีความหลากหลายรูปแบบ ทันสมัย และ สวยงาม จึงทาให้เกิดแรงจูงใจในการเลือกซื้อนาฬิกาข้อมือเป็นอย่างมาก จากที่กล่าวมาข้างต้น จึงได้ทาการสร้างระบบร้านขายนาฬิกาข้อมือออนไลน์ พีเอ วอชช้อป ด้วย ภาษา PHP และ MySQL โดยช่วยให้ผู้รับบริการสามารถสั่งซื้อสินค้าได้จากทุกที่ผ่านทางอินเทอร์เน็ตโดย ไม่ต้องเสียเวลาในการเดินทาง และระบบสั่งซื้อสินค้าแบบออนไลน์นี้ยังช่วยลดต้นทุนค่าใช้จ่ายจากเดิมที่ ใช้ต้นทุนสูงและยังช่วยเป็นสื่อกลางที่ดีระหว่าง ลูกค้าและผู้จัดจาหน่ายได้อีกด้วย 1.2 วัตถุประสงค์ของโครงการ 1.2.1 เพื่อศึกษาและดาเนินการสร้างร้านขายนาฬิกาข้อมือออนไลน์ กรณีศึกษา ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 1.2.2 เพื่ อ ศึ ก ษาความพึ ง พอใจของลู ก ค้ า ที่ ม าใช้ บ ริ ก ารระบบร้ า นขายนาฬิ ก าข้ อ มื อ ออนไลน์ กรณีศึกษา ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
2
1.3 สมมติฐานของโครงการ 1.3.1 ได้ระบบงานร้านขายนาฬิกาข้อมือออนไลน์ 1.3.2 ลูกค้ามีความพึงพอใจต่อการเข้าใช้บริการระบบร้านนาฬิกาข้อมือออนไลน์ 1.4 ขอบเขตของโครงการ 1.4.1 เนื้อหาที่ใช้ในโครงการครั้งนี้ประกอบด้วยหัวข้อต่างๆดังนี้ 1.4.1.1 Admin สามารถใช้งานในระบบขายออนไลน์ได้ - จัดการข้อมูลลูกค้า - จัดการข้อมูลสินค้า - ตรวจสอบการชาระเงินของลูกค้า - เรียกดูรายงาน 1.4.1.2 ลูกค้า - ค้นข้อมูล/เรียกดูสินค้า - ข้อมูลการสั่งซื้อสินค้า - แจ้งการชาระเงิน 1.4.1.3 ข้อมูลนาฬิกาข้อมือ - สามารถค้นหายี่ห้อนาฬิกาที่ต้องการได้ - สามารถค้นหารุ่นของนาฬิกาและยี่ห้อต่างๆได้ - สามารถเลือกสีของนาฬิกา 1.4.1.4 การสั่งซื้อนาฬิกาข้อมือ - สามารถ เพิ่ม ลบ แก้ไข บันทึก ข้อมูลการจองได้ - สามารถตรวจสอบข้อมูลการจองได้ 1.4.2 ประชากรและกลุ่มตัวอย่าง 1.4.2.1 ประชากร ประชากรที่ใช้ในการวิจัยครั้งนี้ ได้แก่ บุคคลที่ชื่นชอบการซื้อของผ่านทางเว็บไซต์ ออนไลน์ อาจอยู่ในกลุ่มนักเรียน นักศึกษา หรือคนในวัยทางาน
3
1.4.2.2 กลุ่มตัวอย่าง กลุ่มตัวอย่างที่ใช้ในการวิจัยครั้งนี้ได้แก่ ตัวแทนนักเรียน นักศึกษาและบุคคลที่ชื่น ชอบการซื้อของผ่านทางเว็บไซต์ออนไลน์ที่ให้ความไว้วางใจเข้าใช้ ระบบร้านขายนาฬิกาข้อมือออนไลน์ พีเอ วอชช้อป จานวน 30 คน โดยไม่จากัดเพศ อายุ และระดับการศึกษา 1.4.3 ตัวแปรที่ศึกษา ตัวแปรต้น การสร้างระบบร้านขายนาฬิกาข้อมือออนไลน์ พีเอ วอชช้อป ตัวแปรตาม ความพึงพอใจในการเข้าใช้บริการระบบร้านขายนาฬิกาข้อมือออนไลน์ ร้าน นาฬิกาข้อมือ พีเอ วอชช้อป 1.5 นิยามศัพท์ที่ใช้ในโครงการ 1.5.1 การสร้างเว็บไซต์ หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วน ใหญ่จัดทาขึ้นเพื่อนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่ เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โ ดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบาง เว็บไซต์จาเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทาง วิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทาเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บ ไซต์ ส่วนตัว จนถึงระดับเว็บไซต์สาหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่าน ซอฟต์แวร์ในลักษณะของเว็บเบราว์เซอร์ 1.5.2 Webpang เว็บเพจ หรือแปลเป็นไทยว่า หน้าเว็บ คือเอกสารเว็บชนิดหนึ่งเหมาะสาหรับ เวิลด์ไวด์เว็บและเว็บเบราว์เซอร์ เว็บเบราว์เซอร์จะแสดงเว็บเพจบนจอคอมพิวเตอร์หรืออุปกรณ์เคลื่อนที่ เว็บ เพจก็คือสิ่ งที่ป รากฏออกมา แต่ศัพท์นี้ก็ยังหมายถึงแฟ้มคอมพิว เตอร์ที่มักจะเขียนเป็นเอชทีเอ็ม แอลหรือภาษามาร์กอัปที่เทียบเคียงได้ ซึ่งมีลักษณะเด่นอันเป็นหลักก็คือ การจัดเตรียมข้อความหลายมิติ ที่จะนาไปสู่ เว็บเพจอื่น ผ่านทางลิงก์ เว็บเบราว์เซอร์จะประสานงานกับทรัพยากรเว็บที่อยู่โดยรอบเว็บ เพจที่เขียน อาทิสไตล์ชีต สคริปต์ และรูปภาพ เพื่อนาเสนอเว็บเพจนั้น เว็บเพจ (Web Page) หมายถึง หน้าเอกสารของบริการ WWW ซึ่งตามปกติจะถูกเก็บอยู่ ในรูปแบบไฟล์ HTML (Hyper Text Markup Language) โดยไฟล์ HTML 1 ไฟล์ก็คือเว็บเพจ 1 หน้านั่นเอง ภายในเว็บเพจอาจประกอบไปด้วยข้อความ ภาพ เสียง วิดีโอ และภาพเคลื่อนไหวแบบ
4
มัลติมีเดีย นอกจากนี้เว็บเพจแต่ละหน้าจะมีการเชื่อมโยงหรือ “ลิงค์” (Link) กัน เพื่อให้ผู้ชมเรียกดู เอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้สะดวกอีกด้วย 1.5.3 โฮมเพจ (Home Page) คือเว็บเพจหน้าแรกซึ่งเป็นทางเข้าหลักของเว็บไซต์ ปกติเว็บเพจ ทุกๆ หน้าในเว็บไซท์จะถูกลิงค์ (โดยตรงหรือโดยอ้อมก็ตาม) มาจากโฮมเพจ ดังนั้นบางครั้งจึงมีผู้ใช้คาว่า โฮมเพจโดยหมายถึงเว็บไซท์ทั้ งหมด แต่ความจริงแล้วโฮมเพจหมายถึงหน้าแรกเท่านั้น ถ้าเปรียบกับ ร้านค้า โฮมเพจก็เป็นเสมือนหน้าร้านนั่นเอง ดังนั้นจึงมักถูกออกแบบให้โดดเด่นและน่าสนใจมากที่สุด 1.5.4 Webmaster คือบุคคลผู้ที่มีหน้าที่รับผิดชอบการออกแบบ การพัฒนา การดูแลการตลาด และการบารุงรักษาเว็บไซต์ โดยเฉพาะบนเว็บไซต์ชุมชนออนไลน์ เว็บมาสเตอร์สามารถปรับเปลี่ยนหรือ จั ด การความคิ ด เห็ น ของผู้ ใ ช้ ค นอื่ นๆ ได้ เว็ บ มาสเตอร์ อ าจเรี ย กเป็ น อย่ า งอื่ น ได้ เ ช่น ผู้ ดู แ ลเว็ บ ไซต์ (website administrator) ผู้สร้างเว็บ ผู้พัฒนาเว็บ หรือผู้ออกแบบเว็บ เป็นต้น 1.5.5 กลุ่มตัวอย่าง หมายถึง ผู้ประเมินแบบสอบถามระดับชั้น ปวช.2/2 แผนกวิชาคอมพิวเตอร์ ธุรกิจ 1.5.6 ความพึงพอใจ หมายถึง ความรู้สึกชอบใจในเว็บไซต์ระบบร้านขายนาฬิกาข้อมือออนไลน์ พี เอ วอชช้อป 1.6 ประโยชน์ที่คาดว่าจะได้รับ 1.6.1 ได้รับความรู้และเข้าใจถึงการสร้างระบบร้านขายนาฬิกาข้อมือออนไลน์มากขึ้น 1.6.2 ได้รู้ถึงความพึงพอใจต่อการเข้าใช้งานของระบบร้านขายนาฬิกาข้อมือออนไลน์ กรณีศึกษา ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
5
บทที่ 2 ทฤษฎีและงานวิจัยที่เกี่ยวข้อง ในการดาเนินโครงการระบบร้านขายนาฬิกาข้อมือออนไลน์ พีเอ วอชช้อป ผู้พัฒนาได้ ทาการศึกษา ค้นคว้าทฤษฎี เอกสารที่เกี่ยวข้องกับการสร้างระบบเว็บไซต์ ไม่ว่าจะเป็นโครงสร้างเว็บไซต์ การจัดการระบบฐานข้อมูล หรือในส่วนของ การออกแบบระบบ ซึ่งส่วนต่างๆ เหล่านี้จาเป็นต้องอาศัย ทฤษฎีที่สาคัญในการจัดการอย่างยิ่ง เพื่อนามาประกอบการศึกษาโครงการ ซึ่งสามารถแจกแจงได้ ดังนี้ 2.1 ทฤษฎีโครงสร้างเว็บไซต์ 2.2 ทฤษฎีอินเตอร์เน็ต 2.3 ทฤษฎีหลักการออกแบบเว็บไซต์ 2.4 ทฤษฎีการจัดการระบบฐานข้อมูล 2.5 ทฤษฎีโปรกรม Xampp 2.6 ทฤษฎีการใช้ Adobe Photoshop CS6 2.7 ทฤษฎี Adobe Dreamweaver CS6 2.8 งานวิจัยที่เกี่ยวข้อง 2.1 ทฤษฎีโครงสร้างเว็บไซต์ ในการกาหนดโครงสร้างของเว็บไซต์นั้นจะเป็นการออกแบบส่ วนประกอบทั้งหมดของเว็บไซต์ที่ ต้องการจะแสดงให้ผู้เข้าชมเว็บไซต์รู้ว่า เว็บไซต์เรานั้นมีทั้งหมดกี่หน้า ในแต่ละหน้าเป็นส่วนการแสดงของ รายละเอียดอะไรและเชื่อมโยงกันอย่างไร การออกแบบโครงสร้างเว็บไซต์ คือ การวางแผนการจัดลาดับ เนื้อหาสาระของเว็บไซต์ ออกเป็น หมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ ที่ทาให้เห็น โครงสร้ างทั้งหมดของเว็บ ไซต์ ช่ว ยให้ นักพัฒ นาเว็บไซต์ไม่หลงทาง การจัดโครงสร้างของเว็บไซต์ มี จุดมุ่งหมายสาคัญคือ การที่จะทาให้ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็นระบบ ซึ่งถือ ว่าเป็นขั้นตอนที่สาคัญ ที่สามารถสร้างความสาเร็จให้ กับผู้ที่ทาหน้าที่ในการออกแบบและพัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วน
6
ต่าง ๆ ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและง่าย ต่อการเข้าอ่านเนื้อหาของ ผู้ใช้เว็บไซต์ 2.1.1 รูปแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ ขึ้นอยู่กับลักษณะของข้อมูลและความชอบของผู้ออกแบบ ตลอดจนกลุ่มเป้าหมายที่ต้องการนาเสนอโครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้ 2.1.1.1 โครงสร้างแบบเรียงลาดับ (Sequential Structure) เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราวตามลาดับของเวลา เช่น การเรียงลาดับตาม ตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการ ดาเนิน เรื่องในลั กษณะเส้น ตรง โดยมี ปุ่มเดินหน้า -ถอยหลั งเป็นเครื่องมือหลั กในการกาหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้
2.1.1.2 โครงสร้างแบบลาดับขั้น (Hierarchical Structure) เป็นวิธีที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็ น ส่ ว นต่างๆ และมีร ายละเอียดย่ อยๆ ในแต่ล ะส่ ว นลดหลั่ นกันมาในลั กษณะแนวคิด เดียวกั บ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทาความเข้าใจกับโครงสร้างของเนื้อหาในเว็บลักษณะนี้ ลักษณะเด่น เฉพาะของ เว็บ ประเภทนี้ คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และ เชื่อมโยงไปสู่เนื้อหา ในลักษณะเป็นลาดับจากบนลงล่าง
7
2.1.1.3 โครงสร้างแบบตาราง (Grid Structure) โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่น ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่ การ แสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจาก ผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ เช่น ในการศึกษาข้อมูลประวัติศาสตร์ สมัย สุโขทัย อยุธยา ธนบุรี และรัตนโกสินทร์ โดยในแต่ละสมัยแบ่งเป็นหั วข้อย่อยเหมือนกันคือ การปกครอง ศาสนา วัฒนธรรม และภาษา ในขณะที่ผู้ใช้กาลังศึกษาข้อมูลทางประวัติศาสตร์เกี่ยวกับ การปกครองใน สมัยอยุธยา ผู้ใช้อาจศึกษาหัวข้อศาสนาเป็นหัวข้อต่อไปก็ได้ หรือจะข้ามไปดูหัวข้อ การปกครองในสมัย รัตนโกสินทร์ก่อนก็ได้เพื่อเปรียบเทียบลักษณะข้อมูลที่เกิดขึ้นคนละสมัยกัน
8
2.1.1.4 โครงสร้างแบบใยแมงมุม (Web Structure) โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวิธีการเข้าสู่เนื้อหาได้ด้วย ตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของ แต่ล ะหน้ าในลั กษณะของไฮเปอร์ เท็กซ์ห รือไฮเปอร์มีเดีย โครงสร้างลั กษณะนี้จัดเป็นรูปแบบที่ ไม่มี โครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จากัดเฉพาะเนื้อหา ภายใน เว็บนั้นๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้
2.2 ทฤษฎีอินเตอร์เน็ต อิน เตอร์ เน็ ต หรื อ เครือข่ายขนาดใหญ่ที่เชื่อมต่อถึงกันทั่ว โลก โดยมีมาตรฐานการรับส่ งข้อมูล ระหว่างกัน เป็ น หนึ่ งเดีย ว ซึ่งคอมพิว เตอร์แต่ล ะเครื่องจะสามารถรับส่ งข้อ มูล ในรูปแบบต่าง ๆ เช่ น ตัว อั ก ษร ภาพและเสี ย งได้ รวมทั้ ง สามารถค้ น หาข้ อ มู ล จากที่ ต่ า ง ๆ ได้ อ ย่ า งรวดเร็ ว อิ น เตอร์ เ น็ ต ประกอบด้วยองค์ประกอบ 2 ส่วนคือส่วนที่เป็นเครือข่ายที่เชื่อมคอมพิวเตอร์เข้าด้วยกัน และส่วนที่เป็น ข้อมูลที่คอมพิวเตอร์แต่ละเครื่องเก็บเอาไว้ พร้อมกับมีความสามารถที่ช่วยให้เราค้นหาข้อมูลที่ต้องการได้ ในเวลาอันสั้น อินเตอร์เน็ตเป็นสิ่งที่ปฏิวัติความเป็นอยู่ของมนุษยชาติ เปลี่ยนแปลงพฤติกรรมมนุษย์ ช่วย ให้คนเรามีอิสรเสรี ในการเรียนรู้และการทางานมากขึ้น พบว่ามีประชากรโลกกว่า 650 ล้านคน ใช้ อินเตอร์เน็ตในปัจจุบัน (ค.ศ. 2003) ดังนั้น คนไทยยุคนี้ควรเรียนรู้การใช้อินเตอร์เน็ตเพราะเป็นสิ่งที่ จาเป็นอย่างยิ่ง อินเตอร์เน็ตมีมาตรฐานการรับส่งข้อมูลที่ชัดเจนและเป็นหนึ่งเดียวกันทาให้ การเชื่อมต่อ
9
คอมพิวเตอร์คนละประเภทเป็นไปได้อย่างง่ายดาย ไม่ว่าจะเป็น พีซี แมคอินทอช หรือ เครื่องประเภท ใด ๆ ก็ตาม โดยทั่วไปแล้วคอมพิวเตอร์ที่ประกอบกันเข้าเป็นเครือข่ายหลักของอินเตอร์เน็ตมักจะเป็น ระบบเครือข่ายของมินิคอมพิวเตอร์หรือระบบเครือข่ายท้องถิ่น (Local Area Network หรือ LAN) และ เครือข่ายเมนเฟรม คอมพิวเตอร์บางคนจึงเรียกอินเตอร์เน็ตว่าเป็น “เครือข่ายของคอมพิวเตอร์ ” ส่วน คอมพิวเตอร์ส่วนบุคคลมักจะไม่ได้ต่ออยู่กับอินเตอร์เน็ตตลอดเวลา แต่จะเชื่อมต่อเมื่ อต้องการใช้งาน เท่านั้น 2.3 ทฤษฎีหลักการออกแบบเว็บไซต์ เว็บไซต์เป็นสื่อที่ได้รับความนิยมอย่ามากบนอินเตอร์เน็ต ซึ่งเว็บไซต์เป็นสื่อที่อยู่ในความควบคุมของ ผู้ใช้โดยสมบูรณ์ กล่าวคือ ผู้ใช้สามารถตัดสินใจเลือกได้ว่าจะดูเว็บไซต์ใดและจะไม่เลือกดูเว็บไซต์ใด ได้ ตามต้องการ จึงทาให้ผู้ใช้ไม่มีความอดทนต่ออุปสรรคและปัญหาที่เกิดจากการออกแบบเว็บไซต์ผิดพลาด ถ้าผู้ใช้เห็นว่าเว็บที่กาลังดูอยู่นั้นไม่มีประโยชน์ต่อตัวเขา หรือไม่เข้าใจว่าเว็บไซต์นี้จะใช้งานอย่างไร เขาก็ สามารถที่จะเปลี่ยนไปดูเว็บไซต์อื่นๆ ได้อย่างรวดเร็ว เนื่องจากในปัจจุบันมีเว็บไซต์อยู่มากมาย และยังมี เว็บไซด์ที่เกิดขึ้นใหม่ ๆ ทุกวัน ผู้ใช้จึงมีทางเลือกมากขึ้น และสามารถเปรียบเทียบคุณภาพของเว็บไซด์ ต่าง ๆ ได้เอง เว็บไซด์ที่ได้รับการออกแบบอย่างสวยงาม มีการใช้งานที่สะดวก ย่อมได้รับความสนใจจากผู้ใช้ มากกว่า เว็บไซด์ที่ดสู ับสนวุ่นวาย มีข้อมูลมากมายแต่หาอะไรไม่เจอ นอกจากนี้ยังใช้เวลาในการแสดงผลแต่ละหน้า นานเกินไป ซึ่งปัญหาเหล่านี้ล้วนเป็นผลมาจากการออกแบบเว็บไซด์ไม่ดีทั้งสิ้น ดังนั้น การออกแบบเว็บไซด์จึงเป็นกระบวนการสาคัญในการสร้างเว็บไซด์ ให้ประทับใจผู้ใช้ ทาให้เขา อยากกลั บเข้ามาเว็บไซด์เดิมอีกในอนาคต ซึ่งนอกจากต้องพัฒนาเว็บไซด์ที่ดีมีประโยชน์แล้ว ยังต้อง คานึงถึงการแข่งขันกับเว็บไซด์อื่น ๆ อีกด้วย 2.3.1 องค์ประกอบของการออกแบบเว็บไซต์ การออกแบบเว็บไซต์ที่มีประสิทธิภาพนั้นต้องคานึงถึง องค์ประกอบสาคัญดังต่อไปนี้ 2.3.1.1 ความเรียบง่าย (Simplicity) หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก กล่าวคือในการสื่อสารเนื้อหา กับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เราต้องการนาเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษร และภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคาราญ
10
ต่อผู้ใช้ตัวอย่างเว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก 2.3.1.2 ความสม่าเสมอ ( Consistency) หมายถึง การสร้างความสม่าเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอด ทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทาให้ผู้ใช้ เกิดความสับสนและไม่แน่ใจว่ากาลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละ หน้าควรที่จะมีรูปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความคล้ายคลึงกัน ตลอดทั้งเว็บไซต์ 2.3.1.1 ความเป็นเอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ต้องคานึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจากเว็บ ไซต์จะสะท้อนถึง เอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของ เว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและ กราฟิกมากมาย อาจทาให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือขององค์กรได้ 2.3.1.4 เนื้อหา (Useful Content) ถือเป็น สิ่ งสาคัญที่สุ ดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สาคั ญ ที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ากับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้ เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบว่า ข้อมูลนั้นมา จากเว็บใด ผู้ใช้ก็ไม่จาเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก 2.3.1.5 ระบบเนวิเกชั่น (User-Friendly Navigation) เป็นส่วนประกอบที่มีความสาคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดู เว็บไซต์ ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งานได้ส ะดวก ถ้ามีการใช้กราฟิกก็ควรสื่ อความหมาย ตาแหน่งของการวางเนวิเกชั่นก็ควรวางให้ สม่าเสมอ เช่น อยู่ตาแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่ม ระบบเนวิเกชั่นที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอานวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผล ภาพกราฟิกบนเว็บเบราเซอร์
11
2.3.1.6 คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) ลั กษณะที่น่ าสนใจของเว็บ ไซต์ นั้น ขึ้นอยู่กับความชอบส่ ว นบุค คลเป็นส าคัญ แต่โ ดยรวมแล้ ว ก็ สามารถสรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มี รอยหรือขอบขั้นบันได้ให้เห็น ชนิดตัวอักษรอ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น 2.3.1.7 ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การใช้ง านของเว็บ ไซต์ นั้ น ไม่ ควรมี ขอบจากัด กล่ า วคื อ ต้อ งสามารถใช้ งานได้ ดีใ นสภาพแวดล้ อ มที่ หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็น เว็บที่แสดงผลได้ดีในทุกระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็น เว็บไซต์ที่มีผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้ความสาคัญกับเรื่องนี้ให้มาก 2.3.1.8 ความคงที่ในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสาคัญกับการออกแบบ เว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาขึ้นอย่าง ลวก ๆ ไม่มีมาตรฐานการออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหา และทาให้ผู้ใช้หมดความเชื่อถือ 2.3.1.9 ความคงที่ของการทางาน (Function Stability) ระบบการทางานต่าง ๆ ในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และ ตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้อง หรือไม่ เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบ ได้บ่อยเป็นปัญหาที่สร้างความราคาญกับผู้ใช้เป็นอย่างมาก 2.3.2 การออกแบบเว็บไซต์ ในการออกแบบเว็บไซต์นั้นประกอบด้วยกระบวนการต่าง ๆ มากมาย เช่น การออกแบบโครงสร้าง ลักษณะหน้าตา หรือการเขียนโปรแกรม แต่มีหลายคนที่พัฒนาเว็ บไซต์ โดยขาดการวางแผนและทางาน ไม่เป็นระบบ ตัวอย่างเช่น การลงมือออกแบบโดยการใช้โปรแกรมช่วยสร้างเว็บ เนื้อหาและรูปแบบก็ เป็นไปตามที่นึกขึ้นได้ขณะนั้น และเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลย ทาให้เว็บนั้นมีเป้าหมายและแนวทางที่ ไม่แน่นอน ผลลัพธ์ที่ได้จึงเสี่ยงกับความล้มเหลวค่อนข้างมาก
12
ความล้ ม เหลวที่ พ บเห็ น ได้ ทั่ ว ไป ได้ แ ก่ เว็ บ ที่ แ สดงข้ อ ความว่ า อยู่ ร ะหว่ า งการก่ อ สร้ า ง ( Under Construction หรือ Coming soon) ซึ่งแสดงให้เห็นถึงการขาดการวางแผนที่ดีบางเว็บถือได้ว่าตายไป แล้ว เนื่องจากข้อมูลไม่ทันสมัย ขาดการพัฒนาปรับปรุงเทคโนโลยี ล้าสมัย ลิงค์ผิดพลาด สิ่งเหล่านี้แสดง ให้เห็นถึงการขาดการดูแล ตรวจสอบและพัฒนาให้ทันสมัยอยู่เสมอ การออกแบบเว็บไซต์อย่างถูกต้องจะช่วยลดความผิดพลาดเหล่านี้ และช่วยลดความเสี่ยงที่จะทาให้เว็บ ประสบความล้มเหลว การออกแบบเว็บไซต์ที่ดีต้องอาศัยการออกแบบและจัดระบบข้อมูลอย่างเหมาะสม กระบวนการแรกของการออกแบบเว็บไซต์คือการกาหนดเป้าหมายของเว็บไซต์กาหนดกลุ่มผู้ใช้ ซึ่งการจะ ให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจาลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบ เนื้อหาและการใช้งานเว็บไซต์ได้อย่างเหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง 2.3.3 รูปแบบการออกแบบเว็บไซต์ เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งการออกแบบหน้าตาเว็บไซต์ส่วน ใหญ่จะมองดูองค์ประกอบขององค์กร หน่วยงาน หรือเนื้อหาเรื่องที่นาเสนอเป็นหลัก ซึ่งการออกแบบหน้า ของเว็บไซต์มีอยู่ 3 แบบ คือ 2.3.3.1 การออกแบบเว็บไซต์ที่เน้นการนาเสนอเนื้อหา เป็นการออกแบบเว็บไซต์ที่เน้นการนาเสนอเนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตาราง เป็นหลัก มีการออกแบบหน้าตารูปแบบง่าย เช่น มีเมนูสารบัญ และเนื้อหา 2.3.3.2 การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้นภาพกราฟิกที่สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สาหรับ การตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บนาน 2.3.3.3 การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา เป็นการออกแบบเว็บที่นิยมในปัจจุบันซึ่งประกอบด้วยข้อความ รูปภาพ โดยมีการจัดองค์ประกอบ ต่าง ๆ เพื่อให้เว็บน่าสนใจ 2.4 ทฤษฎีการจัดการระบบฐานข้อมูล Database หรือ ฐานข้อมูล คือ กลุ่มของข้อมูลที่ถูกเก็บรวบรวมไว้ โดยมีความสัมพันธ์ซึ่งกันและกัน โดยไม่ได้บังคับว่าข้อมูลทั้งหมดนี้จะต้องเก็บไว้ในแฟ้มข้อมูลเดียวกันหรือแยกเก็บหลาย ๆ แฟ้มข้อมูล
13
ระบบฐานข้อมูล (Database System) คือ ระบบที่รวบรวมข้อมูลต่าง ๆ ที่เกี่ยวข้องกันเข้าไว้ด้วยกัน อย่างมีระบบมีความสัมพันธ์ระหว่างข้อมูลต่าง ๆ ที่ชัดเจน ในระบบฐานข้อมูลจะประกอบด้วยแฟ้มข้อมูล หลายแฟ้มที่มีข้อมูล เกี่ยวข้องสัมพันธ์กันเข้าไว้ด้วยกันอย่างเป็นระบบและเปิดโอกาสให้ผู้ใช้สามารถใช้ งานและดูแลรักษาป้องกันข้อมูลเหล่านี้ ได้อย่างมีประสิทธิภาพ โดยมีซอฟต์แวร์ที่เปรียบเสมือนสื่อกลาง ระหว่าง ผู้ใช้และโปรแกรมต่าง ๆ ที่เกี่ยวข้องกับการใช้ฐานข้อมูล เรียกว่า ระบบจัดการฐานข้อมูล หรือ DBMS (data base management system)มีหน้าที่ช่วยให้ผู้ใช้เข้าถึงข้อมู ลได้ง่ายสะดวกและมี ประสิทธิภ าพ การเข้าถึงข้อมูลของผู้ ใช้อาจเป็นการสร้างฐานข้อมูล การแก้ไขฐานข้อมูล หรือการตั้ง คาถามเพื่อให้ได้ข้อมูลมา โดยผู้ใช้ไม่จาเป็นต้องรับรู้เกี่ยวกับรายละเอียดภายในโครงสร้างของฐานข้อมูล 2.5 ทฤษฎีโปรกรม Xampp Xampp คื อโปรแกรมส าหรับ จาลองเครื่ อ งคอมพิ ว เตอร์ ข องเรา ให้ ทางานในลั กษณะของ WebServer นั่นคือเครื่องคอมพิวเตอร์ของเราจะสามารถเปิดตัวเองให้เป็น internet ในการเปิดเว็บไซต์ที่ ถูกจัดทาขึ้นมาในเครื่องคอมพิวเตอร์นี้ โดยที่เราไม่ต้องเชื่อมต่อกับ Internet ภายนอก เราก็สามารถ ทดสอบเว็บไซต์ทเี่ ราสร้างขึ้น ได้ ซึ่ง ปัจจุบันได้รับความนิยมจากผู้ใช้ CMS ในการสร้างเว็บไซต์ XAMPP ประภอบด้วย Apache, PHP, MySQL, PHP MyAdmin, Perl ซึ่งเป็นโปรแกรมพื้นฐานที่ รองรับการทางาน การทาเว็บไซต์ไม่ว่าจะในรูปแบบ ที่เป็น HTML ธรรมดา หรือแบบที่เป็น Database รวมถึงการเลือกใช้ CMS (Content Management System) เป็นระบบที่นามาช่วยในการสร้างและ บริ ห ารเว็บ ไซต์แ บบส าเร็ จ รู ป ซึ่ งเป็น ชุด โปรแกรม ส าหรั บออกแบบเว็ บไซต์ ที่ไ ด้รั บความนิ ยม เช่ น Joomla , Wordpress เป็นต้น
14
การเรียกใช้งานXAMPP XAMPP เป็นโปรแกรมที่เราต้องเรียกใช้งาน (ในค่าเบื้ องต้นนี้) ซึ่งจะมี Control Panel ในการ เรียกใช้งาน หลังจากเปิดใช้งานแล้ว คอมพิวเตอร์ของเราถึงจะสามารถเรียกหน้าเว็บไซต์ที่เราสร้างขึ้นผ่าน URL ที่ขึ้นต้นด้วย localhost หรือ ที่เป็น IP ก็คือ 127.0.0.1 (ปกตินิยมเรียกด้วย localhost เป็นหลัก) เช่น 1. http://localhost เป็นการเรียก URL ผ่านชื่อ localhost 2. http://127.0.0.1 เป็นการเรียก URL ผ่าน IP เครื่องคอมพิวเตอร์ 127.0.0.1 2.6 ทฤษฎีการใช้ Adobe Photoshop CS6 โปรแกรม Adobe Photoshop CS6คือ โปรแกรมที่สามารถสร้างออกแบบกราฟฟิคแก้ไข ภาพเคลื่ อ นไหวรวมทั้ ง การออกแบบหน้ า เว็ บ เพจซึ่ ง โปรแกรม Adobe Photoshop CS6 มี เครื่ อ งมื อ เพื่ อ สนั บ สนุ น การสร้ า งชิ้ น งานประเภทต่ า งๆได้ แ ก่ ป ระเภทสิ่ ง พิ ม พ์ง านน าเสนอตลอดจน การออกแบบเว็บเพจดังนั้นโปรแกรม Adobe Photoshop CS6 จึงเป็นโปรแกรมที่มีความนิยมสูง และเหมาะสมกับการสร้างชิ้นงานด้านกราฟฟิกการแก้ไขภาพและการออกแบบประเภทต่างๆ 2.6.1 ความสามารถพื้นฐานของ Adobe Photoshop 2.6.1.1 ตกแต่งหรือแก้ไขรูปภาพ 2.6.1.2 ตัดต่อภาพบางส่วน หรือที่เรียกว่า crop ภาพ 2.6.1.3 เปลี่ยนแปลงสีของภาพ จากสีหนึ่งเป็นอีกสีหนึ่งได้ 2.6.1.4 สามารถลากเส้น แบบฟรีสไตล์ หรือใส่รูปภาพ สี่เหลี่ยม วงกลม หรือสร้างภาพ ได้อย่างอิสระ 2.6.1.5 มีการแบ่งชั้นของภาพเป็น Layer สามารถเคลื่อนย้ายภาพได้เป็นอิสระต่อกัน 2.6.1.6 การทา cloning ภาพ หรือการทาภาพซ้าในรูปภาพเดียวกัน 2.6.1.7 เพิ่มเติมข้อความ ใส่ effect ของข้อความได้ 2.6.1.8 Brush หรือ แปรงทาสี ที่สามารถเลือกรูปแบบสาเร็จรูปในการสร้างภาพได้ และอื่นๆ อีกมากมา
15
โปรแกรม Adobe Photoshop CS6 เมื่อทาการเปิดโปรแกรมแล้ว จะพบหน้าตาของโปรแกรม ดัง รูป
2.6.2 ส่วนสาคัญหลัก ของ Adobe Photoshop CS6 เมนูของโปรแกรม Application menu หรือ Menu bar ประกอบด้วย 2.6.2.1 File หมายถึง รวมคาสั่งที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่ , เปิด, ปิด, บันทึกไฟล์, นาเข้าไฟล์, ส่งออกไฟล์ และอื่น ๆ ที่เกี่ยวกับไฟล์ 2.6.2.2. Edit หมายถึง รวมคาสั่งที่ใช้สาหรับแก้ไขภาพ และปรับแต่งการทางานของ โปรแกรมเบื้องต้น เช่น ก๊อปปี้,วาง,ยกเลิกคาสั่ง,แก้ไขเครื่องมือ และอื่น ๆ 2.6.2.3 Image หมายถึง รวมคาสั่งที่ใช้ปรับแต่งภาพ เช่น สี , แสง, ขนาดของภาพ (image size), ขนาดของเอกสาร (canvas), โหมดสีของภาพ, หมุนภาพ และอื่น ๆ 2.6.2.4 Layer หมายถึง รวมคาสั่งที่ใช้จัดการกับเลเยอร์ ทั้งการสร้างเลเยอร์ , แปลงเลเยอร์ และการจัดการกับเลเยอร์ในด้านต่าง ๆ 2.6.2.5 select รวม คาสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ (Selection) เพื่อนาไปใช้งานร่วมกับคาสั่งอื่น ๆ เช่น เลือกเพื่อเปลี่ยนสี, ลบ หรือใช้เอฟเฟ็กต์ต่าง ๆ กับรูปภาพ 2.6.2.6 Filter เป็นคาสั่งการเล่น Effects ต่างๆสาหรับรูปภาพและวัตถุ 2.6.2.7 View เป็นคาสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การ ขยายภาพและย่อภาพให้ดูเล็ก 2.6.2.8 Window เป็นส่วนคาสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จาเป็นในการใช้ สร้าง Effects ต่างๆ
16
2.6.2.9 Help เป็นคาสั่งเพื่อแนะนาเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียด ของโปรแกรมอยู่ในนั้น 2.6.3 เมนูของพื้นที่ทางาน Panel menu Panel (พาเนล) เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคาสั่งควบคุมการทางาน ต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจานวนมาก เช่น พาเนล Color ใช้สาหรับเลือกสี, พาเนล Layers ใช้สาหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตาแหน่งที่ชี้เมาส์ รวมถึง ขนาด/ตาแหน่งของพื้นที่ที่เลือกไว้ 2.6.4 พื้นที่ทางาน Stage หรือ Panel เป็นพื้นที่ว่างสาหรับแสดงงานที่กาลังทาอยู่ 2.6.5 เครื่องมือที่ใช้งาน Tools panel หรือ Tools box Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ใน การวาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจานวนมาก ดังนั้นจึงมีการรวมเครื่องมือที่ทาหน้าที่ คล้าย ๆ กันไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริเวณมุมด้านล่างดังภาพ 2 เพื่อบอกให้รู้ ว่าในปุ่มนี้ยังมีเครื่องมืออื่นอยู่ด้วย 2.6.6 สิ่งที่ควบคุมเครื่องมือที่ใช้งาน Tools control menu หรือ Option bar Option Bar (ออปชั่นบาร์) เป็นส่วนที่ใช้ปรับแต่งค่าการทางานของเครื่องมือต่าง ๆ โดยรายละเอียด ในออปชั่นบาร์จะเปลี่ยนไปตามเครื่องมือที่เราเลือกจากทูลบ็อกซ์ ในขณะนั้น เช่น เมื่อเราเลือกเครื่องมือ Brush (พู่กัน) บนออปชั่นบาร์จะปรากฏออปชั่นที่ใช้ในการกาหนดขนาด และลักษณะหัวแปรง, โหมดใน การระบายความโปร่งใสของสี และอัตราการไหลของสี เป็นต้น 2.6.7 เครื่องมือพื้นฐานของโปรแกรม Tools
17
Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ในการ วาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจานวนมาก ดังนั้นจึงมีการรวมเครื่องมือที่ทาหน้าที่คล้าย ๆ กันไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริเวณมุมด้านล่างดังภาพ 2 เพื่อบอกให้รู้ว่าในปุ่ม นี้ยังมีเครื่องมืออื่นอยู่ด้วย 2.6.8 ทาการแบ่งกลุ่มเครื่องมือได้ดังภาพต่อไปนี้
2.6.9 เครื่องมือแต่ละชิ้นมีคุณสมบัติดังนี้ 2.6.9.1 Move ใช้สาหรับเลือกพื้นที่บนภาพเป็นรูปสี่เหลี่ยม วงกลม วงรี หรือเลือกเป็นแถวคอลัมน์ ขนาด 1 พิเซล
2.6.9.2 Marquee ใช้สาหรับย้ายพื้นที่ที่เลือกไว้ของภาพ หรือย้ายภาพใน เล เยอร์หรือย้ายเส้นไกด์
18
2.6.9.3 Lasso ใช้เลือกพื้นที่บนภาพเป็นแนวเขตแบบอิสระ
2.6.9.4 Magic Wand ใช้เลือกพื้นที่ด้วยวิธีระบายบนภาพ หรือเลือกจากสีที่ ใกล้เคียงกัน
2.6.9.5 Crop ใช้ตัดขอบภาพ
2.6.9.6 Slice ใช้ตัดแบ่งภาพเพื่อบันทึกไฟล์ภาพย่อย ๆ ที่เรียกว่าสไลซ์ (Slice)สาหรับนาไปสร้างเว็บเพจ
2.6.9.7 Eyedropper ใช้เลือกสีจากสีต่าง ๆ บนภาพ
2.6.9.8 Healing Brush ใช้ตกแต่งลบรอยตาหนิในภาพ
19
2.6.9.9 Brush ใช้ระบายลงบนภาพ
2.6.9.10 Clone Stamp ใช้ทาสาเนาภาพ โดยก๊อปปี้ภาพจากบริเวณอื่นมา ระบาย หรือระบายด้วยลวดลาย
2.6.9.11 History Brushใช้ระบายภาพด้วยภาพของขั้นตอนเดิมที่ผ่านมา หรือภาพของสถานะเดิมที่บันทึกไว้
2.6.9.12 Eraser ใช้ลบภาพบางส่วนที่ไม่ต้องการ
2.6.9.13 Gradient ใช้เติมสีแบบไล่ระดับโทนสีหรือความทึบ
2.6.9.14 Blur ใช้ระบายภาพให้เบลอ
20
2.6.9.15 Bern ใช้ระบายเพื่อให้ภาพมืดลง
2.6.9.16 Dodge ใช้ระบายเพื่อให้ภาพสว่างขึ้น
2.6.9.17 Pen ใช้วาดเส้นพาธ (Path)
2.6.9.18 Horizontal Type ใช้พิมพ์ตัวอักษรหรือข้อความลงบนภาพ
2.6.9.19 Path Selection ใช้เลือกและปรับแต่งรูปทรงของเส้นพาธ
2.6.9.20 Rectangle ใช้วาดรูปทรงเรขาคณิตหรือรูปทรงสาเร็จรูป 2.6.9.21 Hand ใช้เลื่อนดูส่วนต่าง ๆ ของภาพ
21
2.6.9.21 Hand ใช้เลื่อนดูส่วนต่าง ๆ ของภาพ
2.6.9.23 set Foreground Color, Set Background Color ใช้สาหรับ กาหนดสี - Foreground Color และ Background Color
2.6.9.24 เปิดแสดงหน้ากระดาษ แบบ Full screen
2.6.10 ความหมายและความสาคัญของเลเยอร์ Layer เลเยอร์ Layer ชิ้นงานย่อย หรือเรียกให้เข้าใจง่ายคือ ชั้นของชิ้นงานใหญ่ เป็นหลักการ ทางานของโปรแกรม Photoshop นั่นคือการนาชั้นต่างๆ มาผสมกันเพื่อปรับแต่งให้เกิดความสวยงาม มากขึ้น
Layer
22
แสดงหรือซ่อน (Show or Hide Layer) การคลิกที่รูปดวงตาแต่ละครั้ง จะเป็นการเปิดเพื่อแสดง หรือปิดเพื่อซ่อนสีิงที่อยู่ในเลเยอร์ เช่น ถ้าเราไม่ต้องการให้แสดงภาพของเลเยอร์ใดก็ทาการปิดหรือซ่อน 2.6.10.1 คัดลอก และ ทาซ้าเลเยอร์ (Copy and Duplicate Layer) การคัดลอเเลเยอร์จากชิ้นงานหนึ่งไปยังอีกชิ้นงานหนึ่ง ทาได้หลายวิธี - คลิกเลเยอร์ที่ต้องการทาการคัดลอก ใช้โปรแกรมเมนู Edit เลือก Copy หรือกดปุ่ม Ctrl C คลิก Tab ของชิ้นงานที่เราต้องการจะให้เลเยอร์นั้นมาวางไว้แล้วคลิก Edit เลือก Paste หรือกด ปุ่ม Ctrl V - คลิกเลเยอร์ที่ต้องการทาการคัดลอก คลิกขวาที่เม้าส์ เลือก Duplicate Layer จะได้ หน้าต่างตามภาพด้านล่าง ใส่ชื่อในช่อง Destination ให้เป็นชื่อชิ้นงานที่เราต้องการนาเลเยอร์นี้ไปไว้ - คลิกเลเยอร์ที่ต้องการทาการคัดลอกค้างไว้ แล้วลากไปยังอีก Tab ของอีกชิ้นหนึ่ง โดยตรง
การคัดลอกเลเยอร์ในชิ้นงานเดียวกัน - คลิกที่เลเยอร์ ใช้โปรแกรมเมนู Layer เลือก Duplicate Layer จะมีหน้าต่างเหมือน ภาพที่ด้านบนเช่นกัน แต่ช่อง Destination ไม่ต้องกาหนดชื่อชิ้นงานอื่น - คลิ กที่เลเยอร์ ใช้โ ปรแกรมเมนู Layer เลือก new เลื อกLayer via Copy (คีย์ลัดCtrl + J) - คลิกที่เลเยอร์นั้น และกดคีย์ Alt พร้อมกับลากเลเยอร์ไปยังตาแหน่งใน Panel ที่ ต้องการวาง ปล่อยเม้าส์ 2.6.10.2 ย้ายตาแหน่งเลเยอร์ (MoveLayer) ขั้นตอนการทาคล้ายกับการคัดลอก เพียงเปลี่ยนคาสั่งจาก Edit - Copy เป็น Edit Cut หรือ Ctrl X ในกรณีที่ย้ายคนละชิ้นงาน แต่ถ้าชิ้นงานเดียวกันเพียงคลิกที่เลเยอร์ และทาการเลื่อนไปยัง ตาแหน่งบน Panel ที่ต้องการเท่านัน
23
2.6.10.3 เพิ่มเลเยอร์ (Add Layer) เพียงแค่คลิกไอคอน Create a new Layer ซึ่งอยู่ด้านล่างของ Layer Panel ติดกับรูปถัง ก็จะ ได้เลเยอร์เพิ่มแล้ว หรือถ้าต้องการใช้คาสั่งจากเมนูโปรแกรม เลือก Layer เลือก New เลือก Layer ตั้งชื่อ และ Enter ก็ได้เหมือนกัน
2.6.10.4 ลบเลเยอร์ (Delete Layer) วิธีลบเลเยอร์ทาโดย คลิกที่เลเยอร์ที่ต้องการลบ กดปุ่ม Backspace หรือใช้โปรแกรมเมนู Layer เลือก Delete เลือก Layer หรือโดยการคลิกที่เลเยอร์แล้วลากมาที่รูปถัง 2.6.10.5 การล็อค และ ปลดล็อค เลเยอร์ (Lock and Unlock Layer) การล็อคเลเยอร์ ทาได้โดย คลิกที่เลเยอร์ที่ ต้องการล็อค แล้วคลิกที่รูปกุญแจส่วนการปลดล็อคก็ เพียงทา ซ้าขั้นตอนเดียวกัน
2.6.10.6 การปลดล็อคเลเยอร์ Background
24
วิธีป ลดล็อคทาได้โ ดย ดับ เบิ้ลคลิ กที่เลเยอร์ จะมีหน้าต่างดังภาพขึ้นมา จะตั้งชื่อเลเยอร์ใหม่ หรือไม่ก็ได้ เลเยอร์นั้นก็จะปลดล็อคเป็นเลเยอร์ธรรมดา
2.6.10.7 ตั้งชื่อเลเยอร์ (Name Layer) วิธีตั้งชื่อให้กับเลเยอร์ทาโดยดับเบิ้ลคลิกที่ชื่อบนเลเยอร์นั้นและพิมพ์ชื่อ เสร็จแล้ว Enter สาหรับ Photoshop CS6 เมื่อพิมพ์ชื่อเลเยอร์หนึ่งเสร็จแล้ว สามารถกด Tab เพื่อเลื่อนไปยังเลเยอร์อื่นเพื่อทา การพิมพ์ชื่อได้เลย ไม่ต้องมาทาซ้าขั้นตอนเดิม ทาให้ประหยัดเวลาได้มาก 2.6.10.8 คลิปปิ้งเลเยอร์ (Clipping Layer) หมายถึงการทาให้เลเยอร์หนึ่งมีผลกับอีกเลเยอร์หนึ่งเท่านั้น ไม่ไปกระทบเลเยอร์อื่นซึ่งอยู่ถัดลง ไป อ่านแล้วคงจะ งง ลองดูภาพด้านล่างนะครับ จากภาพจะเห็นเลเยอร์ Wood Gain ซึ่งเป็นลายไม้ ต้องการให้ลายไม้นี้มีผลกับกรอบภาพซึ่งเป็น เลเยอร์ Frame ที่อยู่ถัดลงไปด้านล่างเท่านั้น ผมจึงใช้การ Clipping ซึ่งจะเห็นลูกศรอยู่ที่ด้านหน้านของเลเยอร์ Wood Gain การทาเช่นนี้ จะทาให้ได้กรอบภาพที่มี ลายไม้สวยงามขึ้นมาแทนกรอบสีแดงเหลืองในเลเยอร์Frame การทา Clipping โดยการใช้คีย์ลัด ให้กดปุ่ม Alt แล้ววางเม้าส์ไว้ระหว่างทั้งสองเลเยอร์ จากนั้น คลิก หรือถ้าจะใช้คาสั่งโปรแกรมเมนู Layer เลือก Create Clipping Mask (คีย์ลัด Alt + Ctrl + G) ถ้า ต้องการยกเลิกก็เพียงแค่ทาซ้าวิธีเดิม โปรแกรมเมนู Layer เลือก Release Clipping Mask หรือ กดปุ่ม Alt แล้วคลิกเม้าส์ที่เดิมอีกครั้ง
25
2.6.10.9 การเปิดพื้นที่การใช้งาน การนาภาพเข้าใช้งาน และการบันทึกงาน การเปิดพื้นที่การใช้งานใหม่ 1. ไปที่ Application menu เลือก File > New จะปรากฎหน้าต่างดังรูปด่านล่าง
2. จากรูปมีการกาหนดค่าต่างๆมากมาย - ช่อง Name คือการกาหนดชื่อของชิ้นงาน - ช่อง Preset คือ ชนิ ดของงานต่างๆ ที่กาหนดไว้ให้แล้ว มีให้เลื อกมากมาย เช่น Web , Photo ,U.S.paper , international paper - ช่อง size จะสัมพันธ์กบั ช่อง Preset คือ ขนาดของงานแต่ละชนิ ด เช่น ค่า Preset เป็ น International paper ช่อง Size ก็จะมีตวั เลือก คือ A4 , A3 , A2 ,A1 และอื่นๆ - ช่อง width คือขนาดความกว้างของชิ้นงาน หากต้องการกาหนดเอง มีหน่วยให้ เลือก 7 ชนิด - ช่อง Hight คือขนาดความสู งของชิ้นงาน - ช่ อง Resolution คือ ความละเอียดของงาน มีหน่ วยเป็ น Pixelต่อนิ้ ว และ Pixel ต่อเซนติเมตร - ช่อง Color mode คือชนิ ดของพื้นที่สีในการทางาน มีให้เลือกหลากหลาย เช่น RGB , CMYK และมีคา่ ความละเอียดให้เลือกเป็ น bit
26
- ช่อง Background Contents คือเลือกชนิ ดของ พื้นหลังงาน มี 3 แบบ คือ แบบขาว แบบสี และแบบโปร่ งใส เมื่อทาการกาหนดขนาดของงานเสร็จเรียบร้อยแล้ว ให้คลิปปุ่ม OK เพื่อทาการเปิดพื้นที่การ ทางานดังตัวอย่างภาพ เปิดพื้นที่งานขนาด A4 พื้นหลัง สีขาว
2.6.10.10การนาภาพเข้าใช้งาน หากเรามีภาพที่ต้องการเปิดเข้าใช้งานในโปรแกรม ในทาการ ตามขั้นตอนต่อไปนี้ - ไปที่ File > open เลือก Floder ที่มีรูปที่เราต้องการ เลือกรู ปนั้นแล้วกด Open
- จะได้รูปมาปรากฎอยูท่ ี่ Stage หรื อพื้นที่การทางานดังรู ป ตามตัวอย่างด้านล่าง ใช้รูปดอกบัว
27
2.6.10.11การบันทึกงาน สมมุ ติว่า เราได้แต่งรู ป พระทราย ดังตัวอย่างภาพด้านล่ าง เสร็ จเรี ยบร้ อยแล้ว เรา ต้องการบันทึกการทางาน ทาตามขั้นตอนดังต่อไปนี้
1. ไปที่ File > Save as จะปรากฎหน้าต่างดังรูปด้านล่าง - ช่อง File name คือให้เราตั้งชื่องาน - ช่อง Format คือ การบันทึกไฟล์งานประเภทต่างๆ เช่น PSD , JPEG , TIFF และอื่นๆ
28
- เมื่อเลือกเสร็จเรียบร้อยแล้ว กด Save ก็จะทาการบันทึกสาเร็จ
2.7 ทฤษฎีการใช้ Adobe Dreamweaver CS6 Dreamweaver เป็นโปรแกรมของบริษัท Macromedia Inc. ที่ใช้สาหรับออกแบบ และพัฒนา เว็บไซต์ เว็บเพจและเว็บ แอปพลิเคชั่น ด้วยโปรแกรม Dreamweaver เราสามารถที่จะออกแบบและ พัฒนาเว็บไซต์โดยการเขียนโค๊ดภาษา HTML หรือใช้เครื่องมือ ที่โปรแกรม Dreamweaver มีให้ ซึ่ง เครื่องมือเหล่านี้จะสร้างโค้ดภาษา HTML ให้เราโดยอัตโนมัติ โดยที่เราไม่จาเป็นต้องเขียนโค๊ดภาษา HTML เอง ในปัจจุบันโปรแกรม Dreamweaver นอกจากจะสนับสนุนการใช้งานกับภาษา HTML และ ยังสนับสนุนการใช้งานร่วมกับเทคโนโลยีทางด้านเว็บอื่นๆ ด้วย เช่น CSS และ Java Script เป็นต้น การ สร้างเว็บแอปพลิเคชั่น (Web Application) ด้วยโปรแกรม Dreamweaver นั้นสามารถที่จะสร้าง การ ติดต่อ กับ ฐานข้อ มูล และดึ งข้อมู ล จากฐานข้อมู ล โดยไม่จ าเป็ นที่ต้อ งเขี ยนโค้ดของเซิ ร์ฟเวอร์ส คริป ต์ (Server Script)เลย ตัวโปรแกรมจะสร้างให้เองโดยอัตโนมัติ ซึ่งจะทาให้เวลาที่ใช้ในการพัฒนาเว็บ แอปพลิเคชั่นนั้นน้อยลง
29
การเริ่มต้นในการออกแบบเว็บไซต์ 1.สร้างความสัมพันธ์เอกสารข้อมูล โดยเรียงลาดับความสาคัญ ของข้อมูลที่ใช้ในการนาเสนอ กาหนดชื่อไฟล์ของเอกสารเว็บ ให้สามารถสื่อเข้าใจได้ง่าย และต้องทาการตั้งชื่อไฟล์เป็น ภาษาอังกฤษ เท่านั้น 2.สร้างโฟลเดอร์เฉพาะ สาหรับเอกสารเว็บแต่ละชุด/เรื่อง เพื่อความเป็นระเบียบ และต้องทาการ ตั้ง ชื่อโฟลเดอร์เป็นภาษาอังกฤษเท่านั้น 3.จัดหาภาพ หรือสร้ างภาพที่เกี่ยวข้องกับเนื้อหา หลังจากนั้นให้ นาภาพที่ต้องใช้งานทั้งหมด บันทึกไว้ ในโฟลเดอร์ที่สร้างไว้ก่อน เพื่อความสะดวกต่อการเรียกใช้งาน 4.สร้างเอกสารเว็บ โดยการลงรหัส HTML หรือใช้โปรแกรมช่วย หลังจากนั้นให้นาไฟล์เอกสาร HTML ทุกไฟล์บันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน เพื่อความสะดวกต่อการเรียกใช้งาน 5.ตรวจสอบผล เอกสาร HTML ด้วยเว็บเบราเซอร์ เพื่อแก้ไขข้อผิดพลาดที่อาจเกิดขึ้น เนื่องจาก เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น รู้จักคาสั่ง HTML ไม่เท่ากัน การกาหนดค่าเริ่มต้น Dreamweaver การดู Preferences การดูและกาหนดค่า Preferences ของ โปรแกรม Macromedia Dreamweaver เป็นสิ่งที่ ส าคัญที่สุ ด ของการสร้ างเว็บ ไซต์ ด้ ว ยโปรแกรมนี้ เพราะ Preferences ของโปรแกรมก็คือ การ กาหนดค่าเบื้องต้นทั้งหมดของโปรแกรม ถ้าเราออกแบบเว็บโดยไม่ได้กาหนดค่าเว็บก็จะมีค่าผิดพลาด เพี้ยนจากความเป็นจริง และไม่สามารถแก้ไขได้ในเหน้านั้น เราต้อง set ค่าแล้วก็ออกแบบใหม่ มาดู วิธีการกาหนดที่สาคัญดังนี้
30
การตั้งกาหนดค่าของเอกสารเริ่มต้น การกาหนดFont 1. ไปที่เมนู Edit >Preferences จะได้หน้าต่างการกาหนดค่า
2. หลังจากนั้นให้เลือกFront settings เป็น Thai แล้วในส่วนของProportional font และ Code view เป็นTahoma เพื่อเป็นการกาหนดค่า Front เริ่มต้น
การกาหนดชื่อไฟล์ และนามสกุลของไฟล์เอกสารเว็บ
31
1. ควรใช้ตัวอักษร a - z หรือตัวเลข 0 - 9 หรือผสมกัน 2. ตัวอักษร a - z ควรเป็นตัวพิมพ์เล็ก 3. ห้ามตั้งชื่อไฟล์เป็นภาษาไทย 4. ชื่อไฟล์แรกของเอกสารเว็บ มักจะใช้ชื่อ index หรือ default การตั้งค่าไฟล์เอกสารเริ่มต้น หากต้องการกาหนดค่าตาแหน่งเริ่มต้นชิดบนสุด ซ้ายสุด 1. เลือก Modify > Page Properties… 2. กาหนดค่า Left margin : 0 และ Top margin : 0 กาหนดค่า Title เพื่อใช้แสดงใน Title bar บนโปรแกรมเว็บเบราเซอร์ 1. เลือก Modify > Page Properties… แล้วเลือกที่ Title/Encoding 2. ใส่ข้อความลงไปใน Title การทางานเบื้องต้นในโปรแกรม Dreamweaver 1. Document Window อยู่ด้านล่างของ Document Toolbar ซึ่งเป็นส่วนที่ใช้แสดงเนื้อหาของเว็บเพจที่เราสร้างขึ้น และกาลังทางานอยู่ในขณะนั้น 2. Insert Bar ประกอบไปด้วยปุ่มที่ใช้แทรกอ๊อบเจ๊กต์ (Object) ชนิดต่างๆ เช่น รูปภาพ ตาราง และ เล เยอร์ เป็นต้น ลงในเว็บเพจที่เรากาลังทางานอยู่ในขณะนั้น
32
3. Property Inspector ใช้ แ สดงคุ ณ สมบั ติ ข องวั ต ถุ ห รื อ ข้ อ ความที่ เ ราเลื อ กในเว็ บ เพจ โดยเราสามารถที่ จ ะ เปลี่ยนแปลงแก้ไขคุณสมบัติต่างๆของวัตถุที่เราเลือกผ่านทาง Property Inspector ได้
4. Tag Selector อยู่ใน Status Bar ที่อยู่ทางด้านล่างของ Document Window เมื่อเราคลิกวัตถุในเอกสาร จะปรากฏ Tag Select ใน Status Bar ขึ้นมา เมื่อเราคลิกเลือก Tag Selector แล้วแท็กต่างๆ ที่ถูกล้อม ด้วยแท็กที่เราเลือกจะถูกเลือกด้วย 5. Site Panel ใช้ในการจัดการไฟล์และ โฟลเดอร์ที่ใช้ในการสร้างเว็บไซต์ นอกจากนี้ยังสามารถใช้ดูไฟล์ ต่างๆในเครื่องได้อีกด้วย
33
6. Document Toolbar ประกอบไปด้วยปุ่มและป๊อปอัพเมนูที่ใช้กาหนดรูปแบบมุมมองของ Document Window ที่เรากาลังทางานอยู่และคาสั่งต่างๆที่ใช้ทางานกับ Document Window อย่างเช่น การแสดงเว็บเพจที่ สร้างขึ้นในเว็บบราวเซอร์หรือ การกาหนดอ็อปชั่นของ Document Window เป็นต้น หลักเกณฑ์การใช้ Multimed ในการใช้งาน Multimedia บนเว็บไซต์ จะมีข้อดีคือทาให้ มีความสวยงามแปลกและเพิ่มความ น่าสนใจมากขึ้นแต่จะมีข้อเสียคืออาจทาให้เกิดความล่าช้าในการ Download หน้าเว็บเพจ เพิ่มมากขึ้น และการใช้ไฟล์ Multimedia บางประเภทจาเป็นที่เครื่องคอมพิวเตอร์ของผู้เข้าชมต้องทาการติดตั้ง โปรแกรมเพิ่มเติมทาให้ไม่สามารถแสดงผลได้กับคอมพิวเตอร์ที่ยังไม่ได้ติดตั้งโปรแกรมดังกล่าว 1. หลักเกณฑ์ในการใช้งานไฟล์ Multimedia แบบ Flash ได้แก่ ไม่ควรสร้าง Multimedia ที่ ประกอบด้วยรูปภาพจานวนมากควรจะใช้เครื่องมือวาดรูปของโปรแกรม Flash เอง เพื่อให้ได้ขนาดไฟล์ที่ ไม่ใหญ่จนเกินไปและ Download ได้เร็วกว่า 2. หลักเกณฑ์ในการใช้ไฟล์ Video และ Audio ไม่ควรใช้ไฟล์แบบ WAV เพราะจะมีขนาดใหญ่ ควรเปลี่ยนมาใช้ไฟล์ที่มีขนาดเล็กกว่าเช่น mp3,ram หรือ wmv หากต้องการแสดงผล Video ควรจะใช้ กระบวนการแบบ Streaming ซึ่งเป็นการลดระยะเวลาในการ Download ทาให้การแสดงผลรวดเร็ว ยิ่งขึ้น เช่นไฟล์แบบ Streaming ของ Real,Quick Time และWindows Media เป็นต้น 3. หากมีการเรียกใช้ไฟล์ Multimedia ที่ต้องการโปรกรมพิเศษในการเรียกดูควรที่จะทาLink สาหรับการ Download โปรแกรมเหล่านั้นไว้ด้วยหากเปิดโอกาสให้ผู้เข้าชมสามารถ Downloadโปรแกรม เหล่านั้นจากเว็บไซต์ หน่วยงานนั้น จะต้องทาการตรวจสอบข้อมูลทางด้านลิขสิทธ์ของเจ้ าของโปรแกรม คอมพิวเตอร์นั้นๆก่อนว่าสามารถทาได้หรือไม่ หลักเกณฑ์ในการเลือกภาพ Graphic 1. ขนาดไฟล์ไม่ควรเกิน 80 กิโลไบต์ เพื่อความรวดเร็วในการแสดงผล 2. ใช้ไฟล์แบบ JPEG สาหรับรูปถ่าย หรือรูปที่มีสีเกิน 256 สี 3. ใช้ไฟล์แบบ GIF สาหรับภาพวาดหรือภาพการ์ตูนที่มีสีไม่เกิน 256 สี 4. เลือกภาพที่มีความน่าสนใจและดึงดูด เพื่อไม่ให้เสียเวลาที่เสียไปในการ Download 5. ภาพเปล่าประโยชน์
34
ไฟล์ภาพกราฟิกที่นามาใช้ในการทาเว็บ ภาพกราฟิก หรือรูปกราฟิกที่นามาใช้ในการทาเว็บเพจ หรือนามาใช้ในอินเทอร์เน็ตจะต้องเป็น ไฟล์ลักษณะเฉพาะ ปัจจุบันนิยมใช้กัน 3 ฟอร์แมต คือ 1. ไฟล์ฟอร์แมต JPEG (Joint Photographer's Experts Group File) 2. ไฟล์ฟอร์แมต GIF (Graphics Interlace File) 3. ไฟล์ฟอร์แมต PNG (Portable Network Graphics) ไฟล์สกุล JPG (Joint Photographer’s Experts Group) เป็นอีกไฟล์หนึ่งที่นิยมใช้บน Internet มักใช้กรณี 1. ภาพที่ ต้ อ งการน าเสนอมี ค วามละเอี ย ดสู ง และใช้ สี จ านวนมาก (สนั บ สนุ น ถึ ง 24 bit color) 2. ต้องการบีบไฟล์ตามความต้องการของผู้ใช้ 3. ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นามาสแกน และต้องการนาไปใช้บนอินเทอร์เน็ต เพราะให้ความคมชัดและความละเอียดของภาพสูง ไฟล์สกุล GIF (Graphics Interlace File) ภาพกราฟิกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสาหรับการเผยแพร่ ผ่านอินเทอร์เน็ต ตั้งแต่ยุคแรก ไฟล์สกุล PNG (Portable Network Graphics) ไฟล์สกุลล่าสุดที่นาจุดเด่นของไฟล์ GIF และ JPEG มาพัฒนาร่วมกัน ทาให้ภาพในสกุลนี้ แสดงผลสีได้มากกว่า 256 สี และยังสามารถทาพื้นภาพให้โปร่งใสได้ จึงเป็นไฟล์ภาพที่ได้รับความนิยม มากในปัจจุบันด้วยอีกสกุลหนึ่ง การบีบอัดภาพ เทคนิคการบีบอัดภาพสกุล GIF เป็นเทคนิคการบีบอัดคงสัญญาณ LZW (Lempel-ZivWelch) Lossless compression โดยข้อมูลเดิมจะถูกสร้างขึ้นใหม่ด้วยวิธีสร้าง Index สีจากสีที่ซ้าๆ
35
และใกล้เคียงกัน โดยจะ Scan แนวตั้งของภาพทั้งหมด และ Scan แนวนอนของภาพทั้งหมด และ เปรียบเทียบว่าแนวใดได้ข้อมูลที่จะบันทึกเป็นไฟล์น้อยกว่ากัน หลังจากที่เราวางโครงสร้างเว็บไซต์ของเราแล้ว ต่อมาเราจะใช้ Dreamweaver Site เข้ามา ช่วยในการสร้างและ จัดการเว็บไซต์ของเรา การนา Dreamweaver Site เข้ามาจัดการเว็บไซต์ของเราจะ ท าให้ เ ราสามารถที่ จ ะท าการอั พ โหลดไฟล์ ที่ ใ ช้ ใ นการสร้ า งเว็ บ ไซต์ ไ ปในเว็ บ เซริ ฟ เวอร์ ไ ด้ ง่ า ยขึ้ น นอกจากนี้Dreamweaver Site ยังช่วยในการตรวจสอบการชื่อโยงของไฟล์ต่างๆ ให้อีกด้วยเมื่อเวลามี การแก้ไขไฟล์ต่างๆ ในเว็บไซต์ ด้วย การกาหนด Dreamweaver Site การสร้าง Site 1. ไปที่เมนู Site > New Site 2. กาหนดค่า Site name และ Local Site folder หลังจากนั้นกดปุ่ม Save เมื่อเสร็จสิ้นการ สร้าง Site แล้วจะปรากฏอยู่ในส่วนของ Site Panel การใส่เนื้อหาให้กับเว็บเพจ โปรแกรม Dreamweaver ซึ่งมีคุณสมบัติแบบ WYSIWYG (What you see is what you get) ซึ่งหมายถึง เว็บไซต์ที่คุณเห็นหรือสร้างด้วย Dreamweaver โดยการพิมพ์หรือวางรูปลงไป เมื่อนาไป แสดงในเว็บบราวเซอร์ก็จะเห็นผลเหมือนกับที่คุณสร้างไว้ ดังนั้น หากต้องการใส่เนื้อหาลงไปในเว็บเพจ ก็ให้ทาการพิมพ์ข้อความที่ต้องการลงไปในส่วนของ Document Window ได้เลย การขึ้นบรรทัดใหม่ในโปรแกรม Dreamweaver สามารถทาได้ 2 วิธีคือ 1. กดปุ่ม Enter โดยตรง (Tag <p>) 2. กดปุ่ม Shift ค้างไว้ แล้วกด Enter (Tag <br>) การจัดรูปแบบตัวอักษร HTML โดยการกาหนดค่า Property มีดังนี้
36
1.Fomat : รูปแบบของตัวอักษร เป็น Paragraph, Heading 1-16 2.Class : การกาหนดแม่แบบอักษร (Style sheet) 3. Line : การเชื่อมโยง
4. Font : การกาหนด Font ตัวอักษร 5. การจัดตาแหน่ง 6. การกาหนดขนาดอักษร (Font) size 1-7 7. การกาหนดลักษณะอักษร ใส่สีอักษร การเลือกใช้งานฟอนต์ สาหรับการพิมพ์ข้อความบนเว็บเพจเป็นภาษาไทย ควรกาหนดให้เป็น Microsoft Sans Serif, MS Sans Serif หรือ Tahoma และสาหรับข้อความบนเว็บเพจเป็นภาษาอังกฤษ ให้ ท าการก าหนดเป็ น ก าหนดเป็ น Arial เท่ า นั้ น เพราะหากเราท าการก าหนดเป็ น ฟอนต์ ตั ว อื่ น นอกเหนือจากนี้ อาจทาให้คอมพิวเตอร์บางเครื่อง ไม่สามารถทาการเปิดอ่านข้อความบนเว็บเพจของท่าน ได้ การใส่รูปภาพให้กับเว็บเพจ ขั้นตอนในการแทรกรูปภาพลงบนเว็บเพจ มี 3 วิธี ดังนี้ 1. ไปที่เมนู Insert > Image 2. ไปที่กลุ่มคาสั่ง Common แล้วเลือกที่ปุ่มการแทรกรูปภาพ 3. ทาการลากไฟล์รูปภาพจาก Files Panel มาวางในส่วนของ Document Windows การกาหนดคุณสมบัติของรูปภาพ 1. W : ขนาดของภาพ 2. Src : ที่อยู่ของภาพ 3. Ait : คาอธิบายรูปภาพ 4. Link :การเชื่อมโยงด้วยรูปภาพ
37
การเชื่อมโยงเอกสาร ในโปรแกรม Dreamweaver เราสามารถสร้างเมนู Link ได้ 2 แบบ คือ การทาเมนูข้อความ Link และการทาเมนูรูปภาพ Link การทาเมนูข้อความ Link มีขั้นตอน ดังนี้ 1. พิมพ์เมนูข้อความที่ต้องการ 2. Crop ข้อความที่ต้องการทา Link 3. ไปที่ Properties แล้วใส่ชื่อเว็บเพจที่ต้องการเชื่อมโยงข้อมูลลงในช่อง Link การทาเมนูรูปภาพ Link มีขั้นตอน ดังนี้ 1. Insert รูปภาพที่ต้องการสร้างเป็นเมนูลงบน Document Window 2. คลิกที่รูปภาพ 3. ไปที่ Properties แล้วใส่ชื่อเว็บเพจที่ต้องการเชื่อมโยงข้อมูลลงในช่อง Link การกาหนดลักษณะการเปิดหน้าเว็บเพจ หลังจากคลิกที่ Lin เมื่อทาการการเชื่อมโยงเองสาร โดยการใส่ชื่อเว็บเพจลงในช่อง Link แล้วให้คลิกเลือกที่ Target ความหมายของ Target มีดังนี้ _blank ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง Browser ใหม่อีกหน้าต่าง _new ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง Browser ใหม่อีกหน้าต่าง _parent ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง Browser เดิม _self ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในเฟรมเดิม _top ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง Browser เดิม โดยแสดงให้เต็มพื้นที่ หน้าต่าง ขั้นตอนการแสดงผลเว็บบนหน้าเพจ 1. ให้ทาการ Save เว็บเพจ ก่อนทาการแสดงผลบน Browser ทุกครั้ง 2. ไปที่ Document Toolbar แล้วคลิกที่สัญลักษณ์คล้ายกับรูปโลก 3. เลือกเมนู Preview in IExplore
38
หลังจากนั้นโปรแกรม Dreamweaver จะทาการแสดงผลของเว็บเพจที่โปรแกรม Internet Explorer Cascading Style Sheet (CSS) คืออะไร CSS เป็นกลุ่มของรูปแบบการแสดงผลที่เราได้สร้างไว้เพื่อใช้กาหนดการแสดงผลของเนื้อหาใน เว็บเพจ การนา CSS เข้ามากาหนดการแสดงผลจะช่วยให้การกาหนดการแสดงผลของเนื้ อหาที่อยู่ในเว็บ เพจทาได้ง่ายและ ถูกต้องมากขึ้น นอกจากนี้ CSS ยังสามารถควบคุมการแสดงผลบางอย่างที่ HTML ไม่ สามารถควบคุมได้ด้วย อย่างเช่น ขนาดของตัวอักษรบนเว็บเพจใน CSS จะกาหนดขนาดเป็นพิกเซล ซึ่ง จะทาให้แสดงผลของตัวอักษรในทุกๆ เว็บบราเซอร์เหมือนกัน หรือ ตาแหน่งของเลเยอร์ซึ่งด้วย CSS เรา สามารถที่จะกาหนดตาแหน่งการแสดงผลของมันได้ เป็นต้น ส่วนประกอบของ CSS 1. Selector เป็นชื่อของ CSS 2. Declaration เป็นส่วนที่ใช้กาหนดว่า CSS นี้มีรูปแบบอะไรบ้าง ซึ่งประกอบไปด้วยคุณสมบัติ และค่าของคุณสมบัติ ประโยชน์ที่สาคัญของการนา CSS มาใช้ก็คือ เมื่อเราเปลี่ยนแปลงรูปแบบที่กาหนดไว้ใน CSS เมื่อใดแล้ว รูปแบบการแสดงผลของข้อความหรือ วัตถุทั้งหมดที่ใช้ CSS ดังกล่าวจะเปลี่ยนแปลงด้วย ซึ่ง ประเภทของ CSS มีดังนี้ 1. Customer CSS Style เป็น CSS ที่สร้างขึ้น และสามารถใช้ได้ทุกที่ของเว็บ 2. HTML Tag Style เป็น CSS ที่มีการกาหนดรูปแบบให้กับ HTML เดิมที่มีอยู่แล้ว 3. CSS Sector Style เป็น CSS ที่มีการกาหนดรูปแบบให้กับแท็กที่มีการผสมกันหรือทุกแท็กที่ มี id ตรงกับที่เรากาหนดใน CSS การอัพโหลดเว็บไซต์ (FTP) ขั้นตอนสุดท้ายสาหรับการจัดทาเว็บไซต์ ก็คือทาการอัพโหลดข้อมูลขึ้นไปยัง Web Server ซึ่งใน ตัวโปรแกรม Dreamweaver นี้ มีเครื่องมือสาหรับการอัพโหลดที่ง่าย สะดวก และรวดเร็วต่อการใช้งาน เป็นอย่างมาก
39
ขั้นตอนการสร้าง FTP Connection มีดังนี้ 1. คลิกที่ปุ่ม ที่ Files Panel 2. ในกรณีที่ยังไม่ได้มีการกาหนดค่า FTP จะขึ้นหน้าต่าง Site Setup for mysite เลือกที่ปุ่มเครื่องหมายบวก + 3. จากนั้นทาการกาหนดค่าต่างๆ ดังนี้
4. ใส่ค่าสาหรับการ FTP
ให้
40
5. เมื่อกาหนดค่าเสร็จเรียบร้อยแล้ว ให้ลองทาสอบการเชื่อมต่อ โดยการกดปุ่ม Test ถ้า สาเร็จจะขึ้นข้อความ ขั้นตอนการอัพโหลดข้อมูลขึ้น Web Server มีขึ้นตอน ดังนี้ 1. คลิกเลือกไฟล์ที่ต้องการอัพโหลดที่ Files Panel
2. คลิกที่ปุ่ม เพื่อทาการ upload ข้อมูลขึ้น Web Server ขั้นตอนการดาวน์โหลดข้อมูลจาก Web Server ลงมาแก้ไข มีขึ้นตอน ดังนี้ 1. คลิกเลือกไฟล์ที่ต้องการดาวน์โหลดที่ Files Panel
2. คลิกที่ เพื่อทาการดาวน์โหลดข้อมูลจาก Web Server ลงมาแก้ไข
41
2.8 AppServ แอปเซิร์ฟ (AppServ) คือ ชุดโปรแกรมในลักษณะของWAMP ในการสร้างเว็บเซิร์ฟเวอร์ สาเร็จรูปบนระบบปฏิบัติการไมโครซอฟท์ วินโดวส์ สร้างโดยชาวไทย จัดทาขึ้นโดย ภาณุพงศ์ ปัญญาดี เป็นการรวมโปรแกรมจานวน 4 ตัวในการสร้างเว็บเซิร์ฟเวอร์ ได้แก่ Apache HTTP Server, PHP, MySQL, และ phpMyAdmin เวอร์ชันปัจจุบันได้แก่ 2.4.9 (สาหรับ PHP 4) และ 2.5.10 (สาหรับ PHP 5) เนื่องจากภาณุพงศ์ ปัญญาดี ต้องตอบคาถามวิธีการติดตั้ง Apache, PHP, และ MySQL ให้ใช้งาน ด้วยกันได้บ่อยครั้ง จึงริเริ่มพัฒนาชุดติดตั้ง AppServ ที่ติดตั้งและใช้งานได้ทันทีในประมาณปี พ.ศ. 2543 (ค.ศ. 2000) ได้พักการพัฒนาเมื่อประมาณปี 2008 และกลับมาทาต่อเมื่อปี 2016 วิธีการติดตั้ง เตรียมโปรแกรมเพื่อติดตั้ง ดาวน์โหลดโปรแกรม AppServ จากเว็บไซต์ http://www.appserv.org โดยเลือกเวอร์ชั่น ที่ ต้องการติดตั้งระหว่างเวอร์ชั่น 2.4.x และ 2.5.xโดยความแตกต่างของ 2 เวอร์ชั่นนี้คือ2.4.x คือเวอร์ชั่นที่ นา Package ที่มีความเสถียรเป็นหลัก เหมาะสาหรับผู้ที่ต้องการความมั่นคงของระบบโดยไม่ได้มุ่งเน้นที่ จะใช้ฟังก์ชั่นใหม่2.5.x คือเวอร์ชั่นที่นา Package ใหม่ๆ นามาใช้งานโดยเฉพาะ เหมาะสาหรับนักพัฒนาที่ ต้องการระบบใหม่ๆหรือต้องการทดสอบ ทดลองใช้งานฟังก์ชั่นใหม่ ซึ่งอาจจะไม่ได้ความเสถียรของระบบ ได้ 100%เนื่องจากว่า Package จากนักพัฒนานั้น ยังอยู่ในช่วงของขั้นทดสอบ ทดลองเพื่อหาข้อผิดพลาด ขั้นตอนการติดตั้ง AppServ 1. ดับเบิ้ลคลิกไฟล์ appserv-win32-x.x.x.exe เพื่อทาการติดตั้ง จะปรากฏหน้าจอตามรูปที่ 1
รูปที่ 1 ขั้นตอนการติดตั้งโปรแกรม AppServ
42
2. เข้าสู่ ขั้นตอนเงื่อนไขการใช้งานโปรแกรม โดยโปรแกรม AppServ ได้แจกจ่ายในรูปแบบ GNU License หากผู้ติดตั้งอ่านเงื่อนไขต่างๆ เสร็จสิ้นแล้ว หากยอมรับเงื่อนไขให้กด Next เพื่อเข้าสู่การติดตั้ง ในขั้นต่อไป แต่หากว่าไม่ยอมรับเงื่อนไขให้กด Cancel เพื่อออกจากการติดตั้งโปรแกรม AppServ ดังรูป ตัวอย่างที่ 2
รูปที่ 2 แสดงรายละเอียดเงื่อนไขการ GNU License 3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็น C:AppServ หากต้องการเปลี่ยนปลายทางที่ติดตั้ง ให้กด Browse แล้วเลือกปลายทางที่ต้องการ ตามรูปที่ 3 เมื่อเลือก ปลายทางเสร็จสิ้นให้กดปุ่ม Next เพื่อเข้าสู่ขั้นตอนการติดตั้งขั้นต่อไป
รูปที่ 3 เลือกปลายทางการติดตั้งโปรแกรม AppServ
43
4. เลือก Package Components ที่ต้องการติดตั้ง โดยค่าเริ่มต้นนั้นจะให้เลือกลงทุก Package แต่หาก ว่าผู้ใช้งานต้องการเลือกลงเฉพาะบาง Package ก็สามารถเลือกตามข้อที่ต้องการออก โดยรายละเอียดแต่ ละ Package มีดงั นี้ – Apache HTTP Server คือ โปรแกรมที่ทาหน้าเป็น Web Server – MySQL Database คือ โปรแกรมที่ทาหน้าเป็น Database Server – PHP Hypertext Preprocessor คือ โปรแกรมที่ทาหน้าประมวลผลการทางานของภาษา PHP – phpMyAdmin คือ โปรแกรมที่ใช้ในการบริหารจัดการฐานข้อมูล MySQL ผ่านเว็บไซต์ เมื่อทาการเลือก Package ตามรูปที่ 4 เรียบร้อยแล้ว ให้กด Next เพื่อเข้าสู่ขั้นตอนการติดตั้งต่อไป
รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง 5. กาหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 5 คือ Server Name คือช่องสาหรั บป้อนข้อมูล ชื่อ Web Server ของท่านเช่น www.appserv.org Admin Email คื อ ช่ อ งส าหรั บ ป้ อ นข้ อ มู ล อี เ มล์ ผู้ ดู แ ลระบบ เช่ น root@appserv.org HTTP Port คือช่องสาหรับระบุ Port ที่จะเรียกใช้งาน Apache Web Server โดยทั่วไปแล้ว Protocol HTTP นั้นจะมีค่าหลักคือ 80 หากว่าท่านต้องการหลีกเลี่ยงการใช้ Port 80 ก็สามารถแก้ไขได้ หากมีการเปลี่ ยนแปลง Port การเข้าใช้งาน Web Server แล้ว ทุกครั้งที่เรียกใช้งานเว็บไซต์ จาเป็นที่ต้องระบุหมายเลข Port ด้วย เช่น หากเลือกใช้ Port 99 ในการเข้าเว็บไซต์ทุกครั้งต้องใช้ http://www.appserv.org:99 จึงจะสามารถเข้าใช้งานได้
44
รูปที่ 5 แสดงการกาหนดค่าคอนฟิกค่า Apache Web Server 6. กาหนดค่าคอนฟิกของ MySQL Database มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 6 คือ Root Password คือช่องสาหรับป้อน รหัสผ่านการเข้าใช้งานฐานข้อมูลของ Root หรือผู้ดูแลระบบ ทุกครั้งที่เข้าใช้งานฐานข้อมูลในลักษณะที่เป็นผู้ดูแลระบบ ให้ระบุ user คือ root Character Sets ใช้ในการกาหนดค่าระบบภาษาที่ใช้ในการจัดเก็บฐานข้อมูล, เรียงลาดับฐานข้อมูล Import ฐานข้อมูล, Export ฐานข้อมูล, ติดต่อฐานข้อมูล Old Password หากท่านมีปัญหาเกี่ยวกับการใช้งาน PHP กับ MySQL API เวอร์ชั่นเก่า โดยเจอ Error Client does not support authentication protocol requested by server; consider upgrading MySQL client ให้เลือกในส่วนของ Old Password เพื่อหลีกเลี่ยงปัญหานี้ Enable MyISAM หากท่านต้องการใช้งานฐานข้อมูลในรูปแบบ MyISAM ให้เลือกในส่วนนี้ด้วย
รูปที่ 6 แสดงการกาหนดค่าคอนฟิกของ MySQL Database
45
7. สิ้นสุดขั้นตอนการติดตั้งโปรแกรม AppServ สาหรับขั้นตอนสุดท้ายนี้จะมีให้เลือกว่าต้องการสั่งให้มี การรัน Apache และ MySQL ทันทีหรือไม่ จากนั้นกดปุ่ม Finish เพื่อเสร็จสิ้นการติดตั้งโปรแกรม AppServ
รูปที่ 7 แสดงหน้าจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม AppServ
46
บทที่ 3 วิธีดาเนินการโครงการ ขั้นตอนการดาเนินงานของระบบร้านขายนาฬิกาข้อมือออนไลน์ กรณีศึกษา พีเอ วอชช้อป เพื่อให้บรรลุวัตถุประสงค์ของโครงการ มีขั้นตอนดังนี้ 3.1 ศึกษาข้อมูลและออกแบบเครื่องมือที่ใช้ในงานวิจัย 3.2 กาหนดแบบแผนการทดลอง 3.3 กาหนดประชากรและคัดเลือกกลุ่มตัวอย่าง 3.4 สร้างเครื่องมือที่ใช้ในงานวิจัย 3.5 ดาเนินการทดลองและเก็บรวบรวมข้อมูล 3.6 วิเคราะห์ข้อมูลและสถิติที่ใช้ 3.1 ศึกษาข้อมูลและออกแบบเครื่องมือที่ใช้ในงานวิจัย 3.1.1 โปรแกรม Adobe Dreamweaver CS6 3.1.2 ทฤษฎีการใช้โปรแกรม Adobe Photoshop CS6 3.1.3 โปรแกรม App Serv 3.2 กาหนดประชากรและคัดเลือกกลุ่มตัวอย่าง ประชากรที่ใช้ในการวิจัยครั้งนี้ ได้แก่ บุคคลที่ชื่นชอบการซื้อของผ่านทางเว็บไซต์ออนไลน์ อาจอยู่ใน กลุ่มนักเรียน นักศึกษา หรือคนในวัยทางาน กลุ่มตัวอย่างที่ใช้ในการวิจัยครั้งนี้ได้แก่ ตัวแทนนักเรียน นักศึกษาและบุคคลที่ชื่นชอบการซื้อของ ผ่านทางเว็บไซต์ออนไลน์ที่ให้ความไว้วางใจเข้าใช้ ระบบร้านขายนาฬิกาข้อมือออนไลน์ พีเอ วอชช้อป จานวน 30 คน โดยไม่จากัดเพศ อายุ และระดับการศึกษา
47
3.3 กาหนดแบบแผนการทดลอง แผนภาพ Data Flow Diagram Level 0
ลูกค้า
- ข้อมูลการชาระเงิน - ข้อมูลการเรียกดูสินค้า - ข้อมูลการสั่งซื้อสินค้า - ข้อมูลที่อยู่ลูกค้า
- รายละเอียดการแจ้งชาระเงิน - รายละเอียดการเรียกดูสินค้า - รายละเอียดการสั่งซื้อสินค้า - รายละเอียดข้อมูลที่อยู่ลูกค้า
0 ระบบร้านค้าออนไลน์ กรณีศึกษา : พีเอ วอชช้อป
- ข้อมูลการจัดการลูกค้า - ข้อมูลการจัดการสินค้า - ข้อมูลการตรวจสอบการชาระเงิน - ข้อมูลการตรวจสอบสั่งซื้อสินค้า -ข้อมูลการเรียกดูรายงานการสรุปยอด
- รายละเอียดข้อมูลการจัดการลูกค้า - รายละเอียดการจัดการสินค้า - รายละเอียดข้อมูลการตรวจสอบการชาระเงิน - รายละเอียดการตรวจสอบสั่งซื้อสินค้า - รายละเอียดข้อมูลการเรียกดูรายงานการสรุป ยอด ผู้ดูแล ระบบ ภาพที่ 3-1 แผนภาพ Data Flow Diagram Level 0
48
แสดงภาพ Data Flow Diagram Level 1: Process 1 เข้าสู่ระบบ
ลูกค้า
1 เข้าสู่ระบบ
ผู้ดูแลระบบ
1.1 แสดงแบบฟอร์มการ เข้าสู่ระบบ
ข้อมูลผู้ใช้
รายละเอียดข้อมูล การเข้าสู่ระบบ
1.2 คลิกปุ่มเข้าสู่ระบบ
1.3 แสดงผลการเข้าสู่ระบบ
ข้อมูลผู้ใช้
รายละเอียดข้อมูล การเข้าสู่ระบบ
ภาพที่ 3-2 แสดงภาพ Data Flow Diagram Level 1: Process 1 เข้าสู่ระบบ
49
แสดงภาพ Data Flow Diagram Level 1: Process 2 เรียกดูสินค้า
ลูกค้า
2 เรียกดูสินค้า
2.1 แสดงรายการสินค้า
ข้อมูลการเรียกดูสินค้า
ข้อมูลสินค้า
D2 ProductType
ข้อมูลรายการ D1 Product สินค้า
2.2 เลือกรายการสินค้า รายการสินค้า
รายละเอียดข้อมูลการเรียกดูสินค้า
2.3
แสดงรายละเอียดสินค้า
ข้อมูลการเรียกดูสินค้า ข้อมูลการเรียกดูสินค้า
ภาพที่ 3-3 แสดงภาพ Data Flow Diagram Level 1: Process 2 เรียกดูสินค้า
50
แสดงภาพ Data Flow Diagram Level 1: Process 3 การสั่งซื้อสินค้า
ลูกค้า
3 สั่งซื้อสินค้า
3.1 แสดงรายการสินค้า
ข้อมูลสินค้า
รายการสินค้า
D1 Product
3.2 เลือกรายการสินค้า
3.3
D4 Order detail D3 Order
แสดงรายการสั่งซื้อสินค้า
รายละเอียดการสั่งซื้อสินค้า
3.4 ยืนยันการสั่งซื้อสินค้า
รายการการสั่งซื้อสินค้า
รายการการสั่งซื้อสินค้า
3.5
ข้อมูลการสั่งซื้อสินค้า
แสดงผลการสั่งซื้อสินค้า
ข้อมูลการสั่งซื้อสินค้า
ภาพที่ 3-4 แสดงภาพ Data Flow Diagram Level 1: Process 3 การสั่งซื้อสินค้า
51
แสดงภาพ Data Flow Diagram Level 1: Process 4 แจ้งชาระเงิน 4
ลูกค้า
แจ้งชาระเงิน
ข้อมูลการแจ้งชาระเงิน
4.1 แสดงแบบฟอร์มการ ชาระเงิน
D6 Payment detail D5 PaymentOrder D4 Order detail
4.2
D3 Order
กรอกข้อมูลการชาระเงิน 4.3 ตรวจสอบกรอกข้อมูลการ ชาระเงิน 4.4 ยืนยันการชาระเงิน 4.5 บันทึกการชาระเงิน
ข้อมูลการ ชาระเงิน
4.6 รายละเอียดการแจ้งชาระเงิน แสดงข้อมูลการชาระเงิน
ข้อมูลการแจ้งชาระเงิน
ภาพที่ 3-5 แสดงภาพ Data Flow Diagram Level 1: Process 4 แจ้งชาระเงิน
52
แสดงภาพ Data Flow Diagram Level 1: Process 5 การเพิ่มข้อมูลสินค้า 5
ลูกค้า
เพิ่มข้อมูลสินค้า
ข้อมูลสินค้า
5.1 แสดงแบบฟอร์มการ เพิ่มข้อมูลสินค้า D1 Product 5.2 กรอกข้อมูลการเพิ่มข้อมูล สินค้า
D2 ProductType
5.3 ยืนยันการเพิ่มข้อมูลสินค้า 5.4 บันทึกการเพิ่มข้อมูล สินค้า
ข้อมูลสินค้า
5.5 รายละเอียดการเพิ่มสินค้า แสดงรายการสินค้าที่เพิ่ม
ข้อมูลสินค้า
ภาพที่ 3-6 แสดงภาพ Data Flow Diagram Level 1: Process 5 การเพิ่มข้อมูลสินค้า
53
แสดงภาพ Data Flow Diagram Level 1: Process 6 การลบข้อมูลสินค้า 6
ลูกค้า
ลบข้อมูลสินค้า
ข้อมูลสินค้า
6.1 แสดงรายการสินค้า D1 Product 6.2 เลือกสินค้าที่ต้องการลบ
D2 ProductType
6.3 ลบข้อมูล 6.4
ข้อมูลสินค้า
ยืนยันการลบสินค้า 6.5 ลบข้อมูลออกจาก ฐานข้อมูล 6.6 แสดงผลการลบสินค้า
ข้อมูลการลบสินค้า รายละเอียดการลบข้อมูล สินค้า ภาพที่ 3-7 แสดงภาพ Data Flow Diagram Level 1: Process 6 การลบข้อมูลสินค้า
54
แสดงภาพ Data Flow Diagram Level 1: Process 7 การแก้ไขข้อมูลสินค้า 7 ลูกค้า แก้ไขข้อมูลสินค้า 7.1 แสดงรายการข้อมูลสินค้า D1 Product ข้อมูลสินค้า
7.2 เลือกสินค้าที่ต้องการแก้ไข
D2 ProductType
7.3 แสดงข้อมูลเพิ่มเติม 7.4 แก้ไขข้อมูลสินค้า 7.5 ยืนยันการแก้ข้อมูล
7.6 ปรับปรุงข้อมูลใน ฐานข้อมูล
ข้อมูลสินค้า ข้อมูลประเภทสินค้า
7.7 รายละเอียดการแก้ไขข้อมูล แสดงผลการแก้ไข ข้อมูลสินค้าที่แก้ไขแล้ว สินค้า ฐานข้อมูล ภาพที่ 3-8 แสดงภาพ Data Flow Diagram Level 1: Process 7 การแก้ไขข้อมูลสินค้า
55
แสดงภาพ Data Flow Diagram Level 1: Process 8 การเรียกดูข้อมูลสินค้า 8 ลูกค้า เรียกดูข้อมูลสินค้า 8.1 แสดงรายการข้อมูลสินค้า
ข้อมูลสินค้า
D1 Product D2 ProductType
8.2 ข้อมูลสินค้า เลือกดูรายการสินค้า ข้อมูลสินค้า
8.3 รายละเอียดการเพิ่มสินค้า แสดงผลการเรียกดูสินค้า
ข้อมูลการเรียกดูสินค้า
ภาพที่ 3-9 แสดงภาพ Data Flow Diagram Level 1: Process 8 การเรียกดูข้อมูลสินค้า แสดงภาพ Data Flow Diagram Level 1: Process 9 การตรวจสอบการชาระเงิน 9 ลูกค้า ตรวจสอบการชาระเงิน 9.1 แสดงรายการชาระเงิน
ข้อมูลการสั่งซื้อ รายละเอียดการชาระเงิน
D6 Payment detail
9.2 เลือกรายการชาระเงิน ข้อมูลการชาระเงิน 9.3 แสดงรายการชาระเงิน
ข้อมูลการชาระเงิน
ภาพที่ 3-10 แสดงภาพ Data Flow Diagram Level 1: Process 9 การตรวจสอบการชาระเงิน
56
แสดงภาพ Data Flow Diagram Level 1: Process 10 การตรวจสอบการสั่งซื้อสินค้า 10 ผู้ดูแลระบบ ตรวจสอบการสั่งซื้อสินค้า 10.1 แสดงรายการสั่งซื้อสินค้า
ข้อมูลการสั่งซื้อ
10.2 เลือกรายการสินค้า
D7 Order Detail
ข้อมูลสั่งซื้อสินค้า
10.3 รายละเอียดการสั่งซื้อ แสดงรายการยืนยันการ ข้อมูลสั่งซื้อสินค้า สั่งซื้อสินค้า ภาพที่ 3-11 แสดงภาพ Data Flow Diagram Level 1: Process 10 การตรวจสอบการสั่งซื้อสินค้า แสดงภาพ Data Flow Diagram Level 1: Process 11 เรียกดูรายงานสรุปยอดขาย/เดือน 11 ลูกค้า เรียกดูรายงานสรุป ยอดขาย/เดือน 11.1 แสดงแบบฟอร์มการเลือก วันที่/เดือน/ปี
ข้อมูลยอดขาย/เดือน
11.2 เลือก วันที่/เดือน/ปี
ข้อมูลยอดขาย/เดือน
D3 Order
11.3 ข้อมูลยอดขาย/เดือน รายละเอียดข้อมูลยอดขาย/เดือน แสดงรายงานสรุป ยอดขาย/เดือน ภาพที่ 3-12 แสดงภาพ Data Flow Diagram Level 1: Process 11 การตรวจสอบการชาระเงิน
57
3.4 สร้างเครื่ภองมือที่ใช้ในงานวิจัย 3.4.1 โปรแกรม Adobe Dreamweaver CS6 คือ โปรแกรมเครื่องหรือเครื่องมือ ที่ใช้สาหรับออกแบบ และพัฒนาเว็บไซต์ เว็บเพจและเว็บ แอปพลิเคชั่น ได้อย่างมีประสิทธิภาพ ช่วยลดงาน ลดเวลาในการพัฒนาหรือสร้างเว็บไซต์ และในการสร้าง ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ ว้อชช้อป ครั้งนี้ ผู้จัดทาได้ใช้โปรแกรม Adobe Dreamweaver CS6 ในการออกแบบหน้าการแสดงของเว็บไซต์ และนี้คือรูปภาพที่ผู้จัดทาใช้ โปรแกรม Adobe Dreamweaver CS6 ในการจัดทาการสร้างเว็บไซต์ขายของออนไลน์ ระบบร้านค้า ออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ ว้อชช้อป
ภาพที่ 3-13 หน้าล็อกอินระบบ Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
58
ภาพที่ 3-14 หน้า Admin ระบบการจัดการหลังร้าน ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-15 หน้าแก้ไขสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
59
ภาพที่ 3-16 หน้าเพิ่มสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
60
ภาพที่ 3-17 หน้าติดต่อเว็บไซต์ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-18 หน้าตะกร้าสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
61
ภาพที่ 3-19 หน้ายินดีต้อนรับสู่ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-20 หน้าขั้นตอนการสั่งซื้อร้านนาฬิกาข้อมือ พีเอ วอชช้อป
62
ภาพที่ 3-21 หน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-22 หน้าสินค้าทั้งหมดร้านนาฬิกาข้อมือ พีเอ วอชช้อป
63
3.4.2 ทฤษฎี ก ารใช้ โ ปรแกรม Adobe Photoshop CS6 ค ือ โ ป ร แ ก ร ม ห ร ือ เ ค รื ่อ ง ม ือ ส า ม า ร ถ ส ร ้า ง อ อ ก แ บ บ ก ร า ฟ ฟ ิค แ ก ้ไ ข ภาพเคลื่อ นไหวรวมทั้ง การออกแบบหน้า เว็บ เพจซึ่ง โปรแกรม Adobe Photoshop CS6 มี เครื่ องมือเพื่อสนับ สนุน การสร้า งชิ้น งานประเภทต่า งๆได้แ ก่ป ระเภทสิ่ง พิม พ์ง านนาเสนอตลอดจน การออกแบบเว็บ เพจดัง นั้น โปรแกรม Adobe Photoshop CS6 จึง เป็น โปรแกรมที่มีค วามนิย ม สู งและเหมาะสมกับ การสร้ างชิ้น งานด้านกราฟฟิก การแก้ ไ ขภาพและการออกแบบประเภทต่างๆ
ภาพที่ 3-23 ออกแบบไอคอนหน้าลบสินค้าร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-24 ออกแบบไอคอนหน้าระบบหลังร้านร้านนาฬิกาข้อมือ พีเอ วอชช้อป
64
ภาพที่ 3-25 ออกแบบไอคอนหน้าเข้าสู่ระบบ Admin หลังร้านร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-26 ออกแบบไอคอนหน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป 3.4.3 โปรแกรม App serv project 8.5.0 แอปเซิร์ฟ (AppServ) คือ ชุดโปรแกรมในลักษณะของWAMP ในการสร้างเว็บเซิร์ฟเวอร์ สาเร็จรูปบนระบบปฏิบัติการไมโครซอฟท์ วินโดวส์ เป็นการรวมโปรแกรมจานวน 4 ตัวในการสร้างเว็บ เซิร์ฟเวอร์ ได้แก่ Apache HTTP Server, PHP, MySQL, และ phpMyAdmin ผู้จัดทาได้ใช้โปรแกรม App serv project 8.5.0 ในการสร้างฐานข้อมูล
65
ภาพที่ 3-27 หน้าแรกของ App serv project 8.5.0 ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-28 หน้าล็อกอินเข้าสู่ App serv project 8.5.0 ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
66
ภาพที่ 3-29 หน้าตารางฐานข้อมูล ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-30 หน้าประเภทของสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
67
ภาพที่ 3-31 หน้าฐานข้อมูล Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 3-32 หน้าฐานข้อมูล Order สินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
68
ภาพที่ 3-33 หน้าฐานข้อมูล รายละเอียดสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
3.4.4 เครื่องมือที่ใช้ในการเก็บรวบรวมข้อมูล เครื่องมือที่ใช้ในการเก็บรวบรวมข้อมูลเป็นแบบสารวจความพึ งพอใจในการเข้าใช้บริการ ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป ที่ผู้วิจัยสร้างขึ้นเองจานวน 30 ฉบับ แบ่งออกเป็น 2 ขั้นตอน ดังนี้ ตอนที่ 1 แบบสอบถามความคิดเห็นของผู้มีส่วนร่วมในการปฏิบัติโครงการ ลักษณะการตอบ แบบประเมินค่า (Rating Scale) โดยความเหมาะสมของแบบสอบถาม มี 5 ระดับคือ 5 หมายถึง ระดับความพึงพอใจมากที่สุด 4 หมายถึง ระดับความพึงพอใจมาก 3 หมายถึง ระดับความพึงพอใจปานกลาง 2 หมายถึง ระดับความพึงพอใจน้อย 1 หมายถึง ระดับความพึงพอใจน้อยที่สุด ตอนที่ 2 เป็นแบบสอบถามปลายเปิดการให้ข้อเสนอแนะของผู้ตอบแบบสอบถาม
69
3.5 ดาเนินการทดลองและเก็บรวบรวมข้อมูล 3.5.1 ให้กลุ่มผู้ใช้บริการทดลองเว็บไซต์และให้ตอบแบบสารวจความพึงพอใจ
ภาพ ภาพของผู้ตอบแบบสารวจความพึงพอใจในการใช้บริการเว็บไซต์
ภาพ ภาพของผู้ตอบแบบสารวจความพึงพอใจในการใช้บริการเว็บไซต์ 3.6 วิเคราะห์ข้อมูลและสถิติที่ใช้ ผู้วิจัยได้รวบรวมข้อมูลที่ใช้ในการวิจัย คือ เป็นการเก็บรวบรวมข้อมูลโดยใช้แบบสอบถามที่ สร้างขึ้น จานวน 30 ชุด โดยผู้วิจัยและผู้ช่วยเก็บรวบรวมข้อมูลนาแบบสอบถามไปรวบรวมข้อมูลด้วย ตัวเอง การนาเสนอ
70
ข้ อ มู ล เป็ น แบบตารางแสดงค่ า เฉลี่ ย ค่ า เบี่ ย งเบนมาตรฐาน และแผนภู มิ แ สดงค่ า เฉลี่ ย และค่าเบี่ยงเบนมาตรฐานในแต่ละด้านของแบบสอบถาม สถิติหรือวิธีวิเคราะห์ข้อมูล -ค่าแจกแจงความถี่ ค่าร้อยละ หาได้จากสูตร โดย P = f/(n ) × 100 P = ค่าร้อยละ F = ความถี่ที่ต้องการแปลงให้เป็นร้อยละ N = จานวนผู้ตอบแบบสอบถาม
ค่าคะแนนเฉลี่ย (ล้วนและอังคณา, 2538:53) หาได้จากสูตร โดย µ = µ = ค่าเฉลี่ย = ผลรวมของคะแนนทั้งหมด N = จานวนผู้ตอบแบบสอบถาม ค่าเบี่ยงเบนมาตรฐาน (ล้วน สายยศและอังคณา 2538) หาได้จากสูตร √ โดย ( N
ส่วนเบี่ยงเบนมาตรฐาน ผลรวมของคะแนนในกลุ่มทั้งหมด ) = ผลรวมของคะแนนแต่ละคนยกกาลังสอง = จานวนผู้ตอบแบบสอบถาม
71
3.7 สถิติที่นามาใช้วิเคราะห์ข้อมูล (ล้วน สายยศและอังคณา 2538) โดยใช้เกณฑ์ดังนี้ คะแนนเฉลี่ย คะแนนเฉลี่ย คะแนนเฉลี่ย คะแนนเฉลี่ย คะแนนเฉลี่ย
4.50 3.50 2.50 1.50 1.00
-
5.00 4.49 3.49 2.49 1.49
หมายถึง หมายถึง หมายถึง หมายถึง หมายถึง
ระดับความพึงพอใจมากที่สุด ระดับความพึ่งพอใจมาก ระดับความพึงพอใจปานกลาง ระดับความพึงพอใจน้อย ระดับความพึงพอใจน้อยที่สุด
72
บทที่ 4 ผลการดาเนินงานโครงการ ผลจากการด าเนิ น โครงการระบบร้ า นค้ า ออนไลน์ กรณี ศึ ก ษา : ร้ า นนาฬิ ก าข้ อ มื อ พีเอ วอชช้อป มาจากขั้น ตอนการปฏิบัติโ ครงการและการดาเนินการวิจัยซึ่งมีกลุ่ มเป้าหมายคือ กลุ่ ม ตัวอย่างที่ใช้ในการวิจัยครั้งนี้ได้แก่ ตัวแทนนักเรียน นักศึกษาและบุคคลที่ชื่นชอบการซื้อของผ่านทาง เว็ บ ไซต์ อ อนไลน์ ที่ ใ ห้ ค วามไว้ ว างใจเข้ า ใช้ ร ะบบร้ า นค้ า ออนไลน์ กรณี ศึ ก ษา : ร้ า นนาฬิ ก าข้ อ มื อ พีเอ วอชช้อป จานวน 30 คน โดยไม่จากัดเพศ อายุ และระดับการศึกษา โดยมีรายละเอียดดังนี้ 4.1 ผลการพัฒนาโครงการ
ภาพที่ 4-1 หน้าล็อกอินระบบ Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
73
ภาพที่ 4-2 หน้า Admin ระบบการจัดการหลังร้าน ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 4-3 หน้าแก้ไขสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
74
ภาพที่ 4-4 หน้าเพิ่มสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 4-5 หน้าติดต่อเว็บไซต์ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
75
ภาพที่ 4-5 หน้าติดต่อเว็บไซต์ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 4-6 หน้าตะกร้าสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
76
ภาพที่ 4-7 หน้ายินดีต้อนรับสู่ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 4-8 หน้าขั้นตอนการสั่งซื้อร้านนาฬิกาข้อมือ พีเอ วอชช้อป
77
ภาพที่ 4-9 หน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 4-10 หน้าสินค้าทั้งหมดร้านนาฬิกาข้อมือ พีเอ วอชช้อป
78
4.2 ผลการดาเนินการวิจัย ผู้วิจัยได้ทาการวิเคราะห์ข้อมูล ดังนั้นจึงสามารถเสนอผลการศึกษาวิจัย 1 ตอน ดังนี้ ตอนที่ 1 แบบสอบถามเกี่ ย วกับ ความพึง พอใจในการใช้ ระบบ ระบบร้า นค้ าออนไลน์ กรณี ศึ กษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป เครื่องมือที่ใช้ได้แก่แบบสอบถามเป็นชนิดมาตราจัดอันดับหรือการจัดอันดับคุณภาพ(Ratin Scale) แบ่งเป็น 5 ช่วง กาหนดเกณฑ์การแปรผลค่าเฉลี่ยของประเด็นคาถามดังนี้ 4.51 – 5.00 หมายถึง ผู้ตอบมีความพึงพอใจต่อระบบในประเด็นนั้นอยู่ในระดับมากที่สุด 3.51 – 4.50 หมายถึง ผู้ตอบมีความพึงพอใจต่อระบบในประเด็นนั้นอยู่ในระดับมาก 2.51 – 3.50 หมายถึง ผู้ตอบมีความพึงพอใจต่อระบบในประเด็นนั้นอยู่ในระดับปานกลาง 1.51 – 2.50 หมายถึง ผู้ตอบมีความพึงพอใจต่อระบบในประเด็นนั้นอยู่ในระดับน้อย 1.00 – 1.50 หมายถึง ผู้ตอบมีความพึงพอใจต่อระบบในประเด็นนั้นอยู่ในระดับน้อยที่สุด ตารางที่ 4-1 แสดงรายละเอี ย ดระดั บ ความพึ ง พอใจที่ มี ต่ อ ระบบร้ า นค้ า ออนไลน์ กรณี ศึ ก ษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป รายการประเมิน
ค่าเฉลี่ย
ค่าเบี่ยงเบน มาตรฐาน
ระดับ ความพึงพอใจ มาก
1.ด้านความง่ายต่อการใช้งานระบบ 1.1. ความยากง่ายในการใช้งานระบบ
4.433
0.678
1.2. ความเหมาะสมในการเลือกใช้ชนิดตัวอักษรบน
4.333
0.711
4.466
0.681
มาก
4.5
0.682
4.566
0.626
4.633
0.556
มากที่สุด มากที่สุด มากที่สุด
จอภาพ 1.3. ความเหมาะสมในการใช้สีของตัวอักษรและรูปภาพ 2.ด้านการทางานได้ตามฟังก์ชัน ของระบบ 2.1.ความถูกต้องในการสั่งซื้อสินค้า 2.2.ความถูกต้องในการแก้ไขรายการสินค้า 2.3.ความถูกต้องในการลบรายการสินค้า 3.ด้านตรงตามความต้องการของผู้ใช้ระบบ
มาก
79 3.1.ความถูกต้องในการสั่งซื้อสินค้า
4.466
0.628
3.2.ความถูกต้องในการคานวณยอดชาระค่าสินค้า
4.433
0.678
3.3.คุณภาพในการจัดส่งสินค้า
4.633
0.556
4.496
0.056
ค่าเฉลี่ยโดยรวม
มาก มาก มากที่สุด มาก
จากตารางที่ 4-1 พบว่าระดับความพึงพอใจมี ค่าเฉลี่ยโดยรวมอยู่ในระดับมาก ( ̅=4.496, S.D.= 0.056) และเมื่อพิจารณาเป็นรายข้อพบว่า ระดับความพึงพอใจที่มีต่อ ระบบร้านค้าออนไลน์ กรณี ศึ ก ษา : ร้ า นนาฬิ ก าข้ อ มื อ พี เ อ วอชช้ อ ป อยู่ ใ นระดั บ มาก ดั ง นี้ คุ ณ ภาพในการจั ด ส่ ง สิ น ค้ า มีค่าเฉลี่ย 4.633 ค่าเบี่ยงเบนมาตรฐาน 0.556 ความถูกต้องในการลบรายการสินค้า มีค่าเฉลี่ย 4.633 ค่า เบี่ยงเบนมาตรฐาน 0.556 อยู่ในระดับ มากที่สุด ความถูกต้องในการแก้ไขรายการสินค้า มีค่าเฉลี่ย 4.566 ค่าเบี่ยงเบนมาตรฐาน 0.626 อยู่ในระดับ มากที่สุด ความถูกต้องในการสั่งซื้อสินค้า มีค่าเฉลี่ย 4.5 ค่า เบี่ยงเบนมาตรฐาน 0.682 อยู่ในระดับ มากที่สุด ความเหมาะสมในการใช้สีของตัวอักษรและรูปภาพ มี ค่ า เฉลี่ ย 4.466 ค่ า เบี่ ย งเบนมาตรฐาน 0.681 อยู่ ใ นระดั บ มาก ความถู ก ต้ อ งในการสั่ ง ซื้ อ สิ น ค้ า มีค่าเฉลี่ย 4.466 ค่าเบี่ยงเบนมาตรฐาน 0.628 อยู่ในระดับ มาก ความเหมาะสมในการเลือกใช้ชนิดตัว อักษรบนจอภาพ มีค่าเฉลี่ย 4.333 ค่าเบี่ยงเบนมาตรฐาน 0.711 อยู่ในระดับ มาก ความยากง่ายในการใช้ งานระบบ มีค่าเฉลี่ย 4.433 ค่าเบี่ยงเบนมาตรฐาน 0.678 อยู่ในระดับ มาก และ ความถูกต้องในการ คานวณยอดชาระค่าสินค้า มีค่าเฉลี่ย 4.433 ค่าเบี่ยงเบนมาตรฐาน 0.678 อยู่ในระดับ มาก
80
บทที่ 5 สรุป อภิปรายผลและข้อเสนอแนะ การทาโครงการระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป มี วัต ถุป ระสงค์เ พื่อ 1) เพื่อศึกษาและดาเนินการสร้างระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป และ 2) เพื่อศึกษาความพึงพอใจของลูกค้าที่มาใช้บริการระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป จากการทดลองสามารถสรุปผลได้ดังนี้ 5.1 สรุปผลการวิจัย ตามสมมติฐานของงานวิจัยสามารถสรุปได้ว่า 5.1.1 ได้ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป โดยการทดลองจาก กลุ่มประชากรตัวอย่างพบว่า ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พี เอ วอชช้อป ใช้งาน ได้จริง 5.1.2 ลูกค้ามีความพึงพอใจในการเข้าใช้งานของระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกา ข้อมือ พีเอ วอชช้อป ผลการตอบแบบสอบถามความพึงพอใจพบว่าความพึงพอใจอยู่ในระดับมาก 5.2 สรุปการอภิปรายผลการวิจัย ผู้ตอบแบบสารวจความพึงพอใจมีจานวนทั้งสิ้น 30 คน ซึ่งคิดเป็นร้อยละ 100 กลุ่มตัวอย่างที่ตอบ แบบสารวจพึงพอใจการเข้าใช้บริการเว็บไซต์ ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป พบว่าระดับความพึงพอใจมีค่าเฉลี่ยโดยรวมอยู่ในระดับมาก ( ̅==4.496, S.D.= 0.056) และเมื่อจารณาเป็นรายข้อพบว่า ระดับความพึงพอใจที่มีต่อระบบร้านค้าออนไลน์ กรณีศึกษา : ร้าน นาฬิกาข้อมือ พีเอ วอชช้อป อยู่ในระดับมาก ดังนี้ คุณภาพในการจัดส่งสินค้า มีค่าเฉลี่ย 4.633 ค่า เบี่ยงเบนมาตรฐาน 0.556 ความถูกต้องในการลบรายการสินค้า มีค่าเฉลี่ย 4.633 ค่าเบี่ยงเบนมาตรฐาน 0.556 อยู่ ในระดับ มากที่สุ ด ความถูกต้องในการแก้ไขรายการสิ นค้า มีค่าเฉลี่ ย 4.566 ค่าเบี่ยงเบน มาตรฐาน 0.626 อยู่ในระดับ มากที่สุด ความถูกต้องในการสั่งซื้อสินค้า มีค่าเฉลี่ย 4.5 ค่าเบี่ยงเบน มาตรฐาน 0.682 อยู่ ใ นระดั บ มากที่ สุ ด ความเหมาะสมในการใช้ สี ข องตั ว อั ก ษรและรู ป ภาพ
81
มี ค่ า เฉลี่ ย 4.466 ค่ า เบี่ ย งเบนมาตรฐาน 0.681 อยู่ ใ นระดั บ มาก ความถู ก ต้ อ งในการสั่ ง ซื้ อ สิ น ค้ า มีค่าเฉลี่ย 4.466 ค่าเบี่ยงเบนมาตรฐาน 0.628 อยู่ในระดับ มาก ความเหมาะสมในการเลือกใช้ชนิดตัว อักษรบนจอภาพ มีค่าเฉลี่ย 4.333 ค่าเบี่ยงเบนมาตรฐาน 0.711 อยู่ในระดับ มาก ความยากง่ายในการใช้ งานระบบ มีค่าเฉลี่ย 4.433 ค่าเบี่ยงเบนมาตรฐาน 0.678 อยู่ในระดับ มาก และ ความถูกต้องในการ คานวณยอดชาระค่าสินค้า มีค่าเฉลี่ย 4.433 ค่าเบี่ยงเบนมาตรฐาน 0.678 อยู่ในระดับ มาก 5.3 ข้อเสนอแนะ 5.2.1 สินค้าน้อยเกินไป 5.2.2 สินค้าส่วนใหญ่มีตามท้องตลาดอยู่แล้ว 5.2.3 รูปลักษณ์สินค้าเด่นกว่าหน้าสินค้า 5.4 ปัญหาและอุปสรรค 5.4.1 เกิดข้อผิดพลาดทาให้ตัวเว็บไซต์ไม่แสดงผล เนื่องจากใส่โค้ดผิดส่วนเลยทาให้เว็บไซต์เกิด ข้อผิดพลาด 5.4.2 ข้อมูลมีน้อยกว่ารูปภาพที่จะแสดงบนเว็บไซต์ เลยทาให้เกิดค้นคว้าข้อมูลเพิ่มเติมเลยทาให้ เสียเวลาในการทาเว็บไซต์
82
บรรณานุกรม นายรุ่งโรจน์ เจนเจตวิทย์. หลักการออบแบบเว็บไซต์. เข้าถึงได้จาก: http://www.thapthan.ac.th/dw-ebook/unit1_3.html (วันที่ค้นข้อมูล: 13 พฤศจิกายน 2560) วิกิพีเดีย. 2560. เว็บเพจ. เข้าถึงได้จาก: https://th.wikipedia.org/wiki/เว็บเพจ (วันที่ค้นข้อมูล: 15 พฤศจิกายน 2560) วิกิพีเดีย. 2560. โฮมเพจ. เข้าถึงได้จาก: http://www.thaigoodview.com/library/contest2553/type2 /tech04/25/chapter_3.html (วันที่ค้นข้อมูล: 15 พฤศจิกายน 2560) วิกิพีเดีย. 2560. เว็บมาสเตอร์ (Webmaster). เข้าถึงได้จาก: https://th.wikipedia.org/wiki/เว็บ มาสเตอร์ (วันที่ค้นข้อมูล: 15 พฤศจิกายน 2560) Mindphp. 2560. ฐานข้อมูล. เข้าถึงข้อมูลได้จาก: http://www.mindphp.com/คู่มือ/73-คืออะไร/ 2055-database-คืออะไร.html (วันที่ค้นข้อมูล: 17 พฤศจิกายน 2560) Joomlahitz. 2560. โปรแกรม Xampp. เข้าถึงข้อมูลได้จาก: http://www.joomlahitz.com//เว็บไซต์ เบื้องต้น/web-server-xampp-คือ-อะไร.html (วันที่ค้นข้อมูล: 20 พฤศจิกายน 2560) โปรแกรม Adobe Photoshop CS6.เข้าถึงข้อมูลได้จาก: http://teacherjaray.blogspot.com /2014/05/ blog-post.html (วันที่ค้นข้อมูล: 24 พฤศจิกายน 2560) Adobe Dreamweaver CS6.เข้าถึงข้อมูลได้จาก: https://sites.google.com/site/adobepresent cs6/adobecs6-presents (วันที่ค้นข้อมูล: 30 พฤศจิกายน 2560)
83
ภาคผนวก ก
84
ภาพที่ 1 หน้าล็อกอินระบบ Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 2 หน้า Admin ระบบการจัดการหลังร้าน ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
85
ภาพที่ 3 หน้าแก้ไขสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 4 หน้าเพิ่มสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
86
ภาพที่ 5 หน้าติดต่อเว็บไซต์ ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
87
ภาพที่ 6 หน้าตะกร้าสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 7 หน้ายินดีต้อนรับสู่ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
88
ภาพที่ 8 หน้าขั้นตอนการสั่งซื้อร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 9 หน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป
89
ภาพที่ 10 หน้าสินค้าทั้งหมดร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 11 ออกแบบไอคอนหน้าลบสินค้าร้านนาฬิกาข้อมือ พีเอ วอชช้อป
90
ภาพที่ 12 ออกแบบไอคอนหน้าระบบหลังร้านร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 13 ออกแบบไอคอนหน้าเข้าสู่ระบบ Admin หลังร้านร้านนาฬิกาข้อมือ พีเอ วอชช้อป
91
ภาพที่ 14 ออกแบบไอคอนหน้าการชาระเงินร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 15 หน้าแรกของ App serv project 8.5.0 ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
92
ภาพที่ 16 หน้าล็อกอินเข้าสู่ App serv project 8.5.0 ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 17 หน้าตารางฐานข้อมูล ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
93
ภาพที่ 18 หน้าประเภทของสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 19 หน้าฐานข้อมูล Admin ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
94
ภาพที่ 20 หน้าฐานข้อมูล Order สินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
ภาพที่ 21 หน้าฐานข้อมูล รายละเอียดสินค้า ร้านนาฬิกาข้อมือ พีเอ วอชช้อป
95
ภาคผนวก ข
96
ภาพ ภาพของผู้ตอบแบบสารวจความพึงพอใจในการใช้บริการเว็บไซต์
ภาพ ภาพของผู้ตอบแบบสารวจความพึงพอใจในการใช้บริการเว็บไซต์
97
ประวัติผู้จัดทาโครงการ เรื่อง ระบบร้านค้าออนไลน์ กรณีศึกษา : ร้านนาฬิกาข้อมือ พีเอ วอชช้อป 1.
ชื่อ : นางสาวพรทิพา นามสกุล นิลแดง รหัสนักศึกษา 5932040022 เลขที่ 22 นักศึกษาชั้น ปวส. 2/1 แผนกคอมพิวเตอร์ธุรกิจ เกิดวันที่ 9 เดือนธันวาคม พุทธศักราช 2540 ที่อยู่ บ้านเลขที่ 137/2 ถนนขุนช้าง ต.ท่าพี่เลี้ยง อ.เมือง จ.สุพรรณบุรี 72000 E-mail : ppoorrnn0099@hotmail.com
2.
ชื่อ : นางสาวมยุรฉัตร นามสกุล แซ่ซื้อ รหัสนักศึกษา 5932040025 เลขที่ 25 นักศึกษาชั้น ปวส. 2/1 แผนกคอมพิวเตอร์ธุรกิจ เกิดวันที่ 9 เดือนธันวาคม พุทธศักราช 2540 ที่อยู่ บ้านเลขที่ 25 หมู่ 13 ต.ดอนแสลบ อ.ห้วยกระเจา จ.กาญจนบุรี 71170 E-mail : aeea.0912@gmail.com