โครงการการสร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก

โครงงานการสร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก นางสาวพิชนิต บุญศรี รหัสนักศึกษา 65302040013 นางสาวพิมพ์จันทร์ แสนโสม รหัสนักศึกษา 65302040014 นายภูริลาภ กาญจนภักดี รหัสนักศึกษา 65302040043 ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) ชั้นปีที่ 2 กลุ่มที่ 2 โครงงานนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) ประเภทวิชาบริหารธุรกิจ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล สาขางานธุรกิจดิจิทัล ภาคเรียนที่ 2 ปีการศึกษา 2566 วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร

โครงงานการสร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก นางสาวพิชนิต บุญศรี รหัสนักศึกษา 65302040013 นางสาวพิมพ์จันทร์ แสนโสม รหัสนักศึกษา 65302040014 นายภูริลาภ กาญจนภักดี รหัสนักศึกษา 65302040043 ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) ชั้นปีที่ 2 กลุ่มที่ 2 โครงงานนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) ประเภทวิชาบริหารธุรกิจ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล สาขางานธุรกิจดิจิทัล ภาคเรียนที่ 2 ปีการศึกษา 2566 วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร

คณะกรรมการที่ปรึกษาโครงงาน และคณะกรรมการสอบโครงงาน ได้พิจารณารายงานการศึกษา โครงงานฉบับนี้แล้ว เห็นสมควรรับเป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ของวิทยาลัยการอาชีพนวมินทราชินีมุกดาหารได้ คณะกรรมการ ........................................................... ประธานกรรมการ (นางสุดารัตน์ วงศ์คำพา) ........................................................... กรรมการ (นางประเสริฐศรี สุทธิพันธ์) ........................................................... กรรมการ (นางสาวณัฏฐาวรีย์ เสือแก้ว) ........................................................... กรรมการ (นายวัชรินทร์ พันธ์สําโรง) ........................................................... กรรมการ (นางสาวกัญญาพัชร โสดา) ........................................................... กรรมการและเลขานุการ (นางประภาพร ผิวเรืองนนท์) สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล อนุมัติให้รายงานโครงงานฉบับนี้ เป็นส่วนหนึ่งของการศึกษาหลักสูตร ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ของวิทยาลัยการอาชีพนวมินทราชินี มุกดาหาร ............................................................ รองผู้อำนวยการฝ่ายวิชาการ (นางสาววิภาวี แสงธนู) วันที่ ......... เดือน ............................... พ.ศ. ................ ลิขสิทธิ์เป็นของวิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร

ก ใบรับรองโครงงาน หัวข้อโครงงาน การสร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก ผู้ดำเนินโครงงาน นางสาวพิชนิต บุญศรี รหัสนักศึกษา 65302040013 ระดับชั้น ปวส. ชั้นปีที่ 2/2 นางสาวพิมพ์จันทร์ แสนโสม รหัสนักศึกษา 65302040014 ระดับชั้น ปวส. ชั้นปีที่ 2/2 นายภูริลาภ กาญจนภักดี รหัสนักศึกษา 65302040043 ระดับชั้น ปวส. ชั้นปีที่ 2/2 ครูที่ปรึกษา นางสาวกัญญาพัชร โสดา ครูผู้สอน นางประภาพร ผิวเรืองนนท์ สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล ภาคเรียนที่ 2 ปีการศึกษา 2566 ……………………………………………………………………………………………………………………………………………… คณะกรรมการให้ความเห็นชอบโครงงานฉบับนี้ ..................................................... กรรมการ / ครูที่ปรึกษาโครงงาน (นางสาวกัญญาพัชร โสดา) ..................................................... กรรมการ / ครูผู้สอนวิชาโครงงาน (นางประภาพร ผิวเรืองนนท์) ..................................................... ประธานกรรมการ / หัวหน้าสาขาวิชา (นางสุดารัตน์ วงศ์คำพา) คอมพิวเตอร์ธุรกิจและเทคโนโลยีธุรกิจดิจิทัล คณะกรรมการสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล วิทยาลัยการอาชีพนวมินทราชินีมุกดาหารได้อนุมัติ โครงงานนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) พุทธศักราช 2563 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ....................................................... รองผู้อำนวยการฝ่ายวิชาการ (นางสาววิภาวี แสงธนู) วันที่ ...........เดือน ....................พ.ศ...............

ข ใบแห่งลิขสิทธิ์ หัวข้อโครงงาน การสร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก ผู้ดำเนินโครงงาน นางสาวพิชนิต บุญศรี รหัสนักศึกษา 65302040013 ระดับชั้น ปวส. ชั้นปีที่ 2/2 นางสาวพิมพ์จันทร์ แสนโสม รหัสนักศึกษา 65302040014 ระดับชั้น ปวส. ชั้นปีที่ 2/2 นายภูริลาภ กาญจนภักดี รหัสนักศึกษา 65302040043 ระดับชั้น ปวส. ชั้นปีที่ 2/2 ครูที่ปรึกษา นางสาวกัญญาพัชร โสดา ครูผู้สอน นางประภาพร ผิวเรืองนนท์ สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล ภาคเรียนที่ 2 ปีการศึกษา 2566 …………………………………………………………………………………………………..………………………………………… ผลงานที่ได้จากการทำวิชาโครงงานนี้ทั้งหมดข้าพเจ้ายินยอม ขอยกให้เป็นลิขสิทธิ์แด่สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เป็นระยะเวลา 5 ปี นับจากวันที่ระบุในโครงงานเล่มนี้ ผู้มอบ ................................................ (นางสาวพิชนิต บุญศรี) ................................................ (นางสาวพิมพ์จันทร์ แสนโสม) ................................................ (นายภูริลาภ กาญจนภักดี) ผู้รับมอบ ............................................ (นางสาวกัญญาพัชร โสดา) ครูที่ปรึกษาโครงงาน ................................................ (นางประภาพร ผิวเรืองนนท์) ครูผู้สอนวิชาโครงงาน

ค หัวข้อโครงงาน การสร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก ผู้ดำเนินโครงงาน นางสาวพิชนิต บุญศรี รหัสนักศึกษา 65302040013 ระดับชั้น ปวส. ชั้นปีที่ 2/2 นางสาวพิมพ์จันทร์ แสนโสม รหัสนักศึกษา 65302040014 ระดับชั้น ปวส. ชั้นปีที่ 2/2 นายภูริลาภ กาญจนภักดี รหัสนักศึกษา 65302040043 ระดับชั้น ปวส. ชั้นปีที่ 2/2 ครูที่ปรึกษา นางสาวกัญญาพัชร โสดา ครูผู้สอน นางประภาพร ผิวเรืองนนท์ สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล ภาคเรียนที่ 2 ปีการศึกษา 2566 …………………………………………………………………………………………………..………………………………………… บทคัดย่อ โครงงานการสร้างเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก จัดทำขึ้นโดยมีวัตถุประสงค์1) เพื่อสร้างเว็บไซต์ ของร้านอาวน์ชา ชานมนกฮูก 2) เพื่อเพิ่มช่องทางในการจำหน่ายสินค้าของร้านอาวน์ชา ชานมนกฮูก 3) เพื่อศึกษาความพึงพอใจของผู้ใช้งานที่มีต่อการทำเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก กลุ่มตัวอย่างในการวิจัย ครั้งนี้ จำนวน 361 คน ได้มาโดยวิธีการสุ่มตัวอย่างแบบง่ายโดยใช้วิธีการประเมินแบบสอบถามออนไลน์ เครื่องมือ ที่ใช้ในการวิจัยครั้งนี้ได้แก่ 1) แบบสอบถามความพึงพอใจของกลุ่มตัวอย่างที่มีคุณภาพเว็บไซต์ร้าน อาวน์ชา ชานมนกฮูก สถิติที่ใช้ในการวิจัยครั้งนี้ ได้แก่ ร้อยละค่าเฉลี่ย (x)̄และส่วนเบี่ยงเบนมาตรฐาน (S.D.) จากผลการศึกษาการสร้างเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก นั้นได้พบว่าเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก ที่คณะผู้วิจัยได้สร้างขึ้นสามารถเพิ่มช่องทางการขายสินค้าให้กับร้านอาวน์ชา ชานมนกฮูก เนื่องจากทำให้ มีเว็บไซต์ในการเผยแพร่ประชาสัมพันธ์ข้อมูลข่าวสาร และการบริการจากทางร้านมีความสะดวกมากยิ่งขึ้น ผลการวิจัยพบว่าความพึงพอใจของผู้ใช้งานเว็บไซต์ขายสินค้าร้านอาวน์ชา ชานมนกฮูก ภาพรวม ระดับความพึงพอใจอยู่ในระดับดีมาก มีค่าเฉลี่ยเท่ากับ 4.64 ค่าเบี่ยงเบนมาตรฐาน เท่ากับ 0.72 ซึ่งสอดคล้อง กับงานวิจัยของ อรุโณทัย ปัญญา (2562) การศึกษาครั้งนี้มีวัตถุประสงค์(1) เพื่อศึกษาปัจจัยส่วนบุคคลได้แก่ เพศ อายุและรายได้ที่มีผลต่อการตัดสินใจเลือกซื้อเสื้อผ้าแฟชั่น ผ่านสังคมออนไลน์(เฟซบุ๊ก) ของนักศึกษา ในเขตอำเภอเมืองจังหวัด เชียงใหม่ (2) เพื่อศึกษาปัจจัยส่วนประสมทางการตลาดออนไลน์ได้แก่ผลิตภัณฑ์ ราคา ช่องทางการจัดจำหน่าย การส่งเสริมการตลาด ปัจจัยด้านการรักษา ความเป็นส่วนตัว และปัจจัยด้าน การให้บริการส่วนบุคคล ที่มีผลต่อการตัดสินใจเลือกซื้อเสื้อผ้า แฟชั่น ผ่านสังคมออนไลน์(เฟซบุ๊ก)ของนักศึกษา เครื่องมือที่ใช้คือแบบสอบถาม กลุ่มตัวอย่างได้แก่ นักศึกษาระดับปริญญาตรีชั้นปีที่ 1-4 ปีการศึกษา 2560 ที่ศึกษาในเขตอำเภอเมือง จังหวัดเชียงใหม่ 400 คน ผลการวิจัย พบว่าปัจจัย ส่วนบุคคลที่ส่งผลต่อการเลือก ซื้อเสื้อผ้าแฟชั่นผ่านสังคมออนไลน์(เฟซบุ๊ก) ได้แก่ เพศอายุและรายได้ปัจจัยส่วนประสมทางการตลาดออนไลน์ ที่ส่งผล ต่อการตัดสินใจซื้อ ประกอบด้วยผลิตภัณฑ์ราคา ช่องทางการจัดจำหน่ายการ

ง กิตติกรรมประกาศ การทำโครงงานครั้งนี้ ผู้จัดทำได้รับความอนุเคราะห์จาก ครูประภาพร ผิวเรืองนนท์ ครูประจำวิชา โครงงาน และครูกัญญาพัชร โสดา ที่ให้ความกรุณาเป็นครูที่ปรึกษาโครงงาน ซึ่งได้คำแนะนำ และติดตาม การดำเนินโครงงานอย่างใกล้ชิด ตั้งแต่เริ่มต้นจนกระทั่งสำเร็จสมบูรณ์ ผู้ดำเนินโครงงานรู้สึกซาบซึ้งในความ กรุณาจากท่านเป็นอย่างยิ่ง ที่ให้คำแนะนำในการออกแบบโครงงานและ เอื้อเฟื้อข้อมูลต่าง ๆ ตลอดจ นให้ คำแนะนำในการจัดทำการสร้างเว็บไซต์อาวน์ชา ชานมนกฮูก คณะผู้ดำเนินโครงงานขอขอบพระคุณครูทุกท่าน ที่กรุณาสละเวลาอันมีค่าในการให้คำชี้แนะปรับปรุงแก้ไขจน ทำให้โครงงานสำเร็จได้ด้วยดี ขอขอบพระคุณครู ทุกท่านที่ให้คำแนะนำให้ความช่วยเหลืออีกทั้งพร้อมให้กำลังใจ นางสาวพิชนิต บุญศรี นางสาวพิมพ์จันทร์ แสนโสม นายภูริลาภ กาญจนภักดี

จ สารบัญ เรื่อง หน้า ใบรับรองโครงงาน ก ใบแห่งลิขสิทธิ์ ข บทคัดย่อ ค กิตติกรรมประกาศ ง สารบัญ จ สารบัญ (ต่อ) ฉ สารบัญตาราง ช สารบัญรูปภาพ ซ สารบัญรูปภาพ (ต่อ) ฌ สารบัญรูปภาพ (ต่อ) ญ บทที่ 1 บทนำ 1 1.1 ความเป็นมาและความสำคัญของปัญหา 1 1.2 วัตถุประสงค์ของโครงงาน 1 1.3 เป้าหมายและขอบเขตของโครงงาน 1 1.4 แผนงานและระยะเวลาดำเนินการ 3 1.5 ประโยชน์ที่คาดว่าจะได้รับ 3 1.6. นิยามศัพท์เฉพาะ 3 บทที่ 2 ทฤษฎีที่เกี่ยวข้อง 4 2.1 ประวัติและความเป็นมาของเว็บไซต์ 4 2.2 หลักการออกแบบและพัฒนาเว็บไซต์ 5 2.3 โปรแกรมที่ใช้ในการพัฒนาระบบงาน 11 2.4 การขอพื้นที่และการอับโหลดเว็บไซต์ 29 2.5 ข้อมูลกิจการร้าน 35 2.6 งานวิจัย 35

ฉ สารบัญ (ต่อ) เรื่อง หน้า บทที่ 3 วิธีการดำเนินงาน 37 3.1 ประชากรและกลุ่มตัวอย่าง 37 3.2 เครื่องมือที่ใช้ในการพัฒนาระบบและการวิเคราะห์ข้อมูล 37 3.3 การเก็บรวบรวมข้อมูล 38 3.4 การวิเคราะห์ข้อมูล 38 3.5 ขั้นตอนการดำเนินงานสร้างเว็บไซต์ 39 บทที่ 4 ผลการพัฒนาระบบ / ผลการวิเคราะห์ข้อมูล 45 4.1 ผลการพัฒนาระบบ 45 4.2 ผลการวิเคราะห์ข้อมูล 53 บทที่ 5 สรุปผลการศึกษา อภิปรายผล และข้อเสนอแนะ 58 5.1 สรุปผลการศึกษา 58 5.2 อภิปรายผล 59 5.3 ข้อเสนอแนะ 60 บรรณานุกรม 61 ภาคผนวก 62 ภาคผนวก ก แบบนำเสนอเค้าโครงโครงงาน 63 ภาคผนวก ข รายงานการพบครูที่ปรึกษาโครงงาน 76 ภาคผนวก ค แบบประเมินคุณภาพ/ประสิทธิภาพ 79 ภาคผนวก ง ภาพขณะทำโครงงาน 86 ภาคผนวก จ การเผยแพร่/การนำไปใช้ 89 ภาคผนวก ฉ ตัวอย่างแบบประเมินความพึงพอใจ 106 ภาคผนวก ช หนังสือส่งมอบเว็บไซต์การจัดทำโครงงาน 112 ภาคผนวก ซ คำสั่งแต่งตั้งคณะกรรมการประเมินวิชาโครงงาน 125 ภาคผนวก ฌ หนังสือขอบคุณ 127 ภาคผนวก ญ ประวัติผู้จัดทำโครงงาน 129

ช สารบัญตาราง ตารางที่ หน้า ตารางที่ 1.1 แสดงแผนการดำเนินงาน 3 ตารางที่ 2.1 ตารางอธิบายเครื่องมือ Tool ต่าง ๆ 16 ตารางที่ 4.1 ทดสอบการทำงานหน้าหลัก 46 ตารางที่ 4.2 ทดสอบการทำงานหน้าหมวดหมู่สินค้า 47 ตารางที่ 4.3 ทดสอบหน้ารวมสินค้าที่สั่งซื้อ 47 ตารางที่ 4.4 ทดสอบการทำงานหน้าการชำระสินค้า 48 ตารางที่ 4.5 ทดสอบหน้า Login Admin 49 ตารางที่ 4.6 ทดสอบหน้าแรก Admin 50 ตารางที่ 4.7 ทดสอบหน้าระบบสินค้าทั้งหมด 51 ตารางที่ 4.8 ทดสอบหน้าจัดการประเภทสินค้าทั้งหมด 52 ตารางที่ 4.9 ทดสอบหน้าคลังสินค้า 53 ตารางที่ 4.10 ค่าร้อยละของข้อมูลทั่วไปของผู้ตอบแบบประเมิน 54 ตารางที่ 4.11 แสดงค่าคะแนนเฉลี่ยและส่วนเบี่ยงเบนมาตรฐาน 55 ของแบบประเมินความพึงพอใจในการใช้งานเว็บไซต์ ตารางที่ 4.12 แสดงค่าคะแนนเฉลี่ยและส่วนเบี่ยงเบนมาตรฐาน 56 ของแบบประเมินความพึงพอใจในการใช้งานเว็บไซต์ ตารางที่ 4.13 แสดงค่าคะแนนเฉลี่ยและส่วนเบี่ยงเบนมาตรฐาน 57 ของแบบประเมินความพึงพอใจในการใช้งานเว็บไซต์ ตารางที่ 4.14 แสดงค่าคะแนนเฉลี่ยและส่วนเบี่ยงเบนมาตรฐาน 57 ของแบบประเมินความพึงพอใจในภาพรวมของแต่ละด้าน

ซ สารบัญรูปภาพ รูปที่ หน้า รูปที่ 2.1 โครงสร้างแบบเรียงลำดับ 5 รูปที่ 2.2 โครงสร้างแบบลำดับชั้น 5 รูปที่ 2.3 โครงสร้างแบบตาราง 5 รูปที่ 2.4 โครงสร้างแบบใยแมงมุม 6 รูปที่ 2.5 โครงของเว็บไซต์ 8 รูปที่ 2.6 การเชื่อมโยงเว็บเพจ 9 รูปที่ 2.7 การตั้งชื่อไฟล์ 9 รูปที่ 2.8 การออกแบบเว็บเพจ 9 รูปที่ 2.9 การเขียนโปรแกรมด้วยภาษา HTML 10 รูปที่ 2.10 การลงทะเบียนขอพื้นที่เว็บไซต์ 10 รูปที่ 2.11 การอัปโหลดเว็บไซต์ 10 รูปที่ 2.12 แสดงเข้าไปยังโฟลเดอร์ของ Photoshop ตามภาพ ดับเบิ้ลคลิก Set-up 11 รูปที่ 2.13 แสดงการตรวจสอบก่อนทำการติดตั้งโปรแกรม 12 รูปที่ 2.14 แสดงโปรแกรมตรวจสอบเสร็จแล้วจะเข้าสู่หน้าจอ เลือก Try 12 รูปที่ 2.15 แสดงการกรอก Serial Number แล้วคลิกที่ปุ่ม คลิก Accept 12 รูปที่ 2.16 แสดงการเลือกการติดตั้งของโปรแกรม ให้เลือก Installs 12 รูปที่ 2.17 แสดงหน้าการโหลดของโปรแกรม 13 รูปที่ 2.18 แสดงการเสร็จสิ้นการติดตั้งโปรเเกรม Adobe Photoshop CS6 13 รูปที่ 2.19 แสดงขั้นตอนการเข้าสู่โปรแกรม Adobe Photoshop CS6 14 รูปที่ 2.20 แสดงหน้าต่างโปรแกรม Adobe Photoshop CS6 14 รูปที่ 2.21 แสดงหน้าจอหลักการทำงานของโปรแกรม Adobe Photoshop CS6 15 รูปที่ 2.22 แสดงเครื่องมือต่าง ๆ (Toolbox) Adobe Photoshop CS6 15 รูปที่ 2.23 แสดงการเปิดไฟล์ภาพ (Open) 18 รูปที่ 2.24 แสดงการเปิดไฟล์ภาพ (Open) 18 รูปที่ 2.25 การสร้างไฟล์ใหม่ (New) 18 รูปที่ 2.26 แสดงการกำหนดขนาดของกระดาษ 19 รูปที่ 2.27 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 20 รูปที่ 2.28 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 20 รูปที่ 2.29 แสดงการปรับค่าความสว่าง/ความคมชัด 21 รูปที่ 2.30 แสดงหน้าต่าง User Account Control 21

ฌ สารบัญรูปภาพ (ต่อ) รูปที่ หน้า รูปที่ 2.31 แสดงหน้าต่าง Microsoft Software License Terms 22 รูปที่ 2.32 แสดงหน้าต่าง Choose the installation 22 รูปที่ 2.33 แสดงหน้าต่าง Installation Progress 22 รูปที่ 2.34 แสดงหน้าต่าง Successfully Installed 23 รูปที่ 2.35 หน้าต่าง Office Professional Plus 2010 23 รูปที่ 2.36 เลือกภาษา 24 รูปที่ 2.37 ยืนยันโดยคลิกปุ่ม 24 รูปที่ 2.38 ใส่รายละเอียด 25 รูปที่ 2.39 คลิกที่ปุ่ม install wordpress 25 รูปที่ 2.40 คลิกที่ปุ่ม Download (64 bit) 26 รูปที่ 2.41 ทำการติดตั้ง คลิก Next 26 รูปที่ 2.42 ทำการเลือก Components ที่เราต้องการ 26 รูปที่ 2.43 เลือก Path ในการติดตั้ง XAMPP 27 รูปที่ 2.44 การติดตั้ง Joomla 27 รูปที่ 2.45 พร้อมสำหรับการติดตั้ง 28 รูปที่ 2.46 เครื่องมือกำลังทำการติดตั้ง 28 รูปที่ 2.47 โปรแกรมติดตั้งเสร็จสิ้น 29 รูปที่ 2.48 เริ่มต้นการใช้งานโปรแกรม XAMPP 29 รูปที่ 2.49 โปรแกรม Filezilla 30 รูปที่ 2.50 เชื่อมต่อเซิฟเวอร์ 31 รูปที่ 2.51 เชื่อมต่อสำเร็จไฟล์จะอยู่ฝั่งขวา 31 รูปที่ 2.52 จะพบกับโฟเดอร์ต่างๆ 31 รูปที่ 2.53 การอัปโหลดไฟล์ 32 รูปที่ 2.54 อัปโหลดไฟล์เสร็จสิ้น 32 รูปที่ 2.55 สร้างฐานข้อมูลรองรับ Wordpress 32 รูปที่ 2.56 คลิกที่ MySQL Management 33 รูปที่ 2.57 คลิก Create new Database เพื่อสร้างฐานข้อมูลใหม่ 33 รูปที่ 2.58 กำหนดรายละเอียดต่าง ๆ 34 รูปที่ 2.59 รายละเอียด 34

ญ สารบัญรูปภาพ (ต่อ) รูปที่ หน้า รูปที่ 2.60 เข้าสู่หน้าจอ Login 34 รูปที่ 3.1 แสดงแผนผังโครงสร้างการทำงานของเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก 39 รูปที่ 3.2 เป็นส่วนแสดงผล 40 รูปที่ 3.3 แสดง Context Diagram 40 รูปที่ 3.4 Process Decomposition Diagram เว็บไซต์ร้านอาวน์ชา ชานมนกฮูก 41 รูปที่ 3.5 แผนภาพกระแสข้อมูลระดับที่ 1 ของระบบเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก 41 รูปที่ 3.6 แผนภาพกระแสข้อมูลระดับที่ 2 โปรเซสจัดการข้อมูลสมาชิก 42 รูปที่ 3.7 แผนภาพกระแสข้อมูลระดับที่ 2 โปรเซสจัดการข้อมูลการสั่งซื้อ 43 รูปที่ 3.8 แผนภาพกระแสข้อมูลระดับที่ 2 โปรเซสแจ้งการชำระเงิน 43 รูปที่ 3.9 แผนภาพกระแสข้อมูลระดับที่ 2 โปรเซสจัดการข้อมูลหลัก 44 รูปที่ 4.1 แสดงการทดสอบหน้าหลัก 46 รูปที่ 4.2 แสดงการทดสอบหมวดหมู่สินค้า 46 รูปที่ 4.3 แสดงการทดสอบหน้ารวมสินค้าที่สั่งซื้อ 47 รูปที่ 4.4 แสดงการทดสอบหน้าการชำระสินค้า 48 รูปที่ 4.5 แสดงการทดสอบหน้า Login Admin 49 รูปที่ 4.6 แสดงการทดสอบหน้าแรก Admin 50 รูปที่ 4.7 แสดงการทดสอบหน้าระบบสินค้าทั้งหมด 51 รูปที่ 4.8 แสดงการทดสอบหน้าจัดการประเภทสินค้าทั้งหมด 52 รูปที่ 4.9 แสดงการทดสอบหน้าคลังสินค้า 53

บทที่ 1 บทนำ 1.1 ความเป็นมาและความสำคัญของปัญหา ร้านอาวน์ชา ชานมนกฮูก ตั้งอยู่ที่ 76 ถนนพิทักษ์พนมเขต ตำบลมุกดาหาร อำเภอเมืองมุกดาหาร จังหวัดมุกดาหาร 49000 เป็นร้านขนาดเล็ก จำหน่ายชานม ซึ่งปัจจุบันยังไม่มีเว็บไซต์การเปรียบเสมือน หน้าร้านของธุรกิจที่ขายสินค้าและบริการทางออนไลน์ ที่พร้อมต้อนรับลูกค้าทุกคนเข้ามาดูสินค้า ทำความรู้จัก แบรนด์ และเลือกซื้อสินค้าได้อย่างสะดวกและรวดเร็ว ซึ่งสำหรับการทำธุรกิจในปัจจุบันการมีเว็บไซต์เป็นของ ตัวเองนับว่ามีความสำคัญมากหรือช่องทางการจำหน่ายสินค้าผ่านทางออนไลน์ของร้านอาวน์ชา ชานมนกฮูก การขายสินค้าออนไลน์ เป็นอีกหนึ่งช่องทางสำคัญในการพัฒนาเศรษฐกิจของประเทศไทย ให้มีความ เจริญก้าวหน้าซึ่งการค้าขายจำหน่ายสินค้าเองในไทยนั้น ริเริ่มวิวัฒนาการขายตั้งแต่สมัยสุโขทัยสมัยอยุธยาสมัย ธนบุรีสมัยรัตนโกสินทร์ซึ่งมีการนำสินค้าชุมชน สินค้าจากธรรมชาติ ผลิตภัณฑ์ต่าง ๆ มาจำหน่ายและ แลกเปลี่ยน การจำหน่ายค้าขายในอดีตจะเป็นลักษณะการนัดพบกันเพื่อตกลง ซื้อขายสินค้าจากสถานที่ที่ กำหนด เช่น ห้างร้าน ตลาด ศูนย์การค้า เป็นต้น สำหรับการจำหน่าย ค้าขายสินค้าในปัจจุบันได้มีการนำ เทคโนโลยีสมัยใหม่เข้ามาช่วยในการเปิดช่องทางการ จำหน่ายสินค้าโดยผู้จำหน่ายสินค้า และผู้ต้องการสินค้า ไม่จำเป็นต้องเดินทางมาพบปะเลือกซื้อ สินค้าระหว่างกันแต่ใช้การจำหน่ายสินค้าในรูปแบบออนไลน์โดยอาศัย เทคโนโลยีสมัยใหม่เข้ามาช่วยใน การส่งเสริมการขาย เช่น เว็บไซต์จำหน่ายสินค้าออนไลน์ แอพพลิเคชั่น ตลอดจนสื่อโซเชียลต่าง ๆ ดังนั้น คณะผู้จัดทำโครงงานจึงได้สร้างเว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก เพื่อที่จะให้กิจการร้าน มีความสะดวกในการซื้อขาย และอำนวยความสะดวกแก่ลูกค้าที่มาซื้อสินค้าของทางร้าน เนื่องจากไม่จำเป็น ที่จะต้องเดินทางไปซื้อสินค้าที่ร้านค้า สามารถนำเว็บไซต์ไปต่อยอดในการทำธุรกิจ 1.2 วัตถุประสงค์ของโครงงาน 1.2.1 เพื่อสร้างเว็บไซต์ของร้านอาวน์ชา ชานมนกฮูก 1.2.2 เพื่อเพิ่มช่องทางในการจำหน่ายสินค้าของร้านอาวน์ชา ชานมนกฮูก 1.2.3 เพื่อศึกษาความพึงพอใจของผู้ใช้งานที่มีต่อการทำเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก 1.3 เป้าหมายและขอบเขตของโครงงาน 1.3.1 เป้าหมายของโครงงาน 1.3.1.1 เป้าหมายเชิงปริมาณ 1.3.1.1.1 เว็บไซต์เผยแพร่ข้อมูลข่าวสารให้กับร้านอาวน์ชา ชานมนกฮูกจำนวน 1 เว็บไซต์ 1.3.2 เป้าหมายเชิงคุณภาพ 1.3.2.1 เพื่อเป็นสื่อกลางในการเผยแพร่ข้อมูลข่าวสารผ่านระบบเครือข่ายอินเตอร์เน็ต 1.3.2.2 ร้านอาวน์ชา ชานมนกฮูก มีการประชาสัมพันธ์ข่าวสารต่าง ๆ ทำให้เพิ่มปริมาณลูกค้า

2 1.3.2.3 ผู้เข้าใช้งานเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก มีความพึงพอใจในการเข้าใช้งานอยู่ใน ระดับดีมาก 1.3.3 ขอบเขตของโครงงาน 1.3.3.1 มีการแสดงผลหน้าหลัก (Home page) 1.3.3.1.1 มีการแสดงสินค้า 1.3.3.1.2 มีข้อมูลการติดต่อ 1.3.3.1.3 มีแผนที่ร้าน 1.3.3.2 ระบบจัดการสมาชิก (User) 1.3.3.2.1 มีระบบสมัครสมาชิกใหม่ 1.3.3.2.2 มีการเข้าสู่ระบบ Login 1.3.3.2.3 มีการแก้ไขข้อมูล 1.3.3.3 ระบบการสั่งซื้อ (Order) 1.3.3.3.1 มีระบบตะกร้าสินค้า 1.3.3.3.2 มีการคำนวณราคาสินค้าอัตโนมัติ 1.3.3.3.3 มีการแก้ไข หรือยกเลิกสินค้าในตะกร้าสินค้า 1.3.3.3.4 มีการยืนยันการสั่งสินค้า 1.3.3.3.5 มีการแสดงสถานการณ์สั่งซื้อสินค้า 1.3.3.4 ระบบการชำระเงิน (Payment) 1.3.3.4.1 มีวิธีการชำระเงินผ่านธนาคาร 1.3.3.4.2 มีช่องทางในการชำระเงิน 1.3.3.5 ระบบการชำระเงิน (Payment) 1.3.3.5.1 มีการเพิ่ม ลบ แก้ไข ค้นหาข้อมูลสมาชิก 1.3.3.6 ระบบการชำระเงิน (Payment) 1.3.3.6.1 มีการเพิ่มลบ แก้ไข ค้นหารายละเอียดสินค้า 1.3.3.6.2 มีระบบการส่งเสริมการขาย (Promotion) 1.3.3.6.3 มีระบบตรวจสอบสินค้าคงคลัง

3 1.4. แผนงานและระยะเวลาดำเนินการ ระยะเวลาการดำเนินงานเริ่มตั้งวันที่ 19 ตุลาคม 2566 ถึงวันที่ 15 กุมภาพันธ์ 2567 ดังต่อไปนี้ แผนการดำเนินงาน ระยะเวลาดำเนินงาน (สัปดาห์ที่) พ.ศ 2566 พ.ศ 2567 ตุลาคม พฤศจิกายน ธันวาคม มกราคม กุมภาพันธ์ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1. เสนอเค้าโครง 2. ศึกษาข้อมูลโครงงาน ขั้นดำเนินการ 3. ศึกษาการจัดทำเว็บไซต์ 4. ออกแบบฐานข้อมูล 5. ออกแบบเว็บไซต์ 6. ตรวจสอบความสมบูรณ์ ขั้นสรุปและประเมินผล 7. สรุปผล 8. จัดทำรูปเล่ม 9. นำเสนอ 1.5. ประโยชน์ที่คาดว่าจะได้รับ 1.5.1 ได้เว็บไซต์ร้านอาวน์ชา ชานมนกฮูก 1.5.2 ได้เผยแพร่เว็บไซต์ ร้านอาวน์ชา ชานมนกฮูก 1.5.3 ได้ระดับความพึงพอใจของผู้ใช้งานที่มีต่อเว็บไซต์ร้านอาวน์ชา ชานมนกฮูกมาก 1.6. นิยามศัพท์เฉพาะ 1.6.1 Home Page (การแสดงผลหน้าหลัก) หมายถึงหน้าแรก ถ้าเปรียบกับร้านค้ากับโฮมเพจ เปรียบเสมือนหน้าร้าน ดังนั้นจึงมักถูกออกแบบมา ให้โดดเด่นและน่าสนใจมากที่สุด 1.6.2 User (ระบบจัดการสมาชิก) หมายถึง ผู้ที่ใช้งานคอมพิวเตอร์ทั่วไป สามารถทำงานตามหน้าที่ใน หน่วยงานต่าง ๆ เช่นการพิมพ์งานต่างๆ การป้อนข้อมูลเข้าไปในเครื่องคอมพิวเตอร์ 1.6.3 Order (ระบบการสั่งซื้อ) หมายถึง การสั่งซื้อสินค้าผ่านระบบอินเทอร์เน็ต โดยปกติแล้วผู้ใช้ ระบบต้องผ่านการลงทะเบียนก่อนจึงสามารสั่งซื้อสินค้าได้รูปแบบการลงทะเบียนจะเป็นการกรอกแบบฟอร์ม ข้อมูลที่เกี่ยวข้องกับผู้ใช้ ได้แก่ ชื่อ นามสกุล เพศ อีเมล์ วันเดือนปีเกิด อาชีพ ที่อยู่ เบอร์โทรศัพท์ 1.6.4 Payment (ระบบการชําระเงิน) หมายถึง กระบวนการชําระเงินระหว่างผู้จ่าย/ผู้โอนเงินไปยัง ผู้รับเงินที่เกิดขึ้นผ่านสื่อ และช่องทางอิเล็กทรอนิกส์ เช่น บัตรเครดิต บัตรเดบิต บัตรเงินอิเล็กทรอนิกส์

บทที่ 2 ทฤษฎีที่เกี่ยวข้อง จากการดำเนินโครงงาน “การสร้างเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก” คณะผู้จัดทำได้ศึกษาหลักการ ทฤษฎีที่และศึกษาเทคโนโลยีที่เกี่ยวข้อง ที่สามารถนำมาประยุกต์ใช้งาน โดยแบ่งออกเป็นหัวข้อต่างๆดังต่อไปนี้ 2.1 ประวัติและความเป็นมาของเว็บไซต์ 2.2 หลักการออกแบบและพัฒนาเว็บไซต์ 2.3 โปรแกรมที่ใช้ในการพัฒนาระบบงาน 2.4 การขอพื้นที่และการอับโหลดเว็บไซต์ 2.5 ข้อมูลกิจการร้านอาวน์ชา ชานกนกฮูก 2.6 งานวิจัยที่เกี่ยวข้อง 2.1 ประวัติและความเป็นมาของเว็บไซต์ 2.1.1 เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจที่จัดทําขึ้น เพื่อนําเสนอข้อมูลต่าง ๆ ผ่านทาง คอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลาย ๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิงค์ เพื่อให้สามารถ เปิดไปยังหน้าเพจต่าง ๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www.(เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่นั้นก็มี ทั้งเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและเสีย ค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่ง ข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการ นําเสนอของเจ้าของเว็บไซต์ การเรียกดูเว็บไซต์จะ เรียกดูผ่านทางซอฟต์แวร์ ในลักษณะของ เบราว์เซอร์ 2.1.2 ประวัติและความเป็นมาของเว็บไซต์ปิยวิท เจนกิจจาไพบูลย์ (2540) ได้กล่าวว่า เว็บไซต์ ถูกเรียกเป็นตําแหน่งที่อยู่ของผู้ที่มีเว็บเพจเป็นของตัวเองบนระบบอินเทอร์เน็ต ซึ่งได้ล้วน ก็สามารถจัดทําเว็บ เพจและส่งให้ศูนย์บริการนําขึ้นไปไว้บนอินเทอร์เน็ตซึ่งถือว่ามีเว็บไซต์เป็นของ ตนเองแล้ว และเว็บไซต์ก็คือ แหล่งที่รวบรวมเว็บเพจจํานวนมากมายหลายหน้าในเรื่องเดียวกันมา รวมอยู่ด้วยกัน แต่สิ่งหนึ่งในการเสนอ เรื่องราวที่อยู่บนเว็บไซต์ที่แตกต่างไปจากโปรแกรมโทรทัศน์ เนื้อหาในนิตยสาร หรือหนังสือพิมพ์ เนื่องจากการ ทํางานบนเว็บจะไม่มีวันสิ้นสุด ทั้งนี้เนื่องจากเรา สามารถเปลี่ยนแปลงและเพิ่มสารสนเทศบนจากการ ลงทะเบียนกับผู้ให้บริการเช่าพื้นที่บนระบบ อินเทอร์เน็ตเมื่อลงทะเบียนในชื่อที่ต้องการเว็บไซต์ได้ตลอดเวลา และแต่ละเว็บเพจจะมีการเชื่อมโยง กันภายในเว็บไซต์หรือไปยังเว็บไซต์อื่น ๆ เพื่อให้ผู้อ่านสามารถอ่านได้ใน เวลาอันรวดเร็ว (กิดานันท์ มลิทอง,2542) นิรุธ อํานวยศิลป์ (2542) กล่าวถึงเว็บไซต์ว่า เป็นชื่อเรียก Host หรือ Server ที่ได้ 6 จดทะเบียนอยู่ในเวิลด์ไวด์เว็บ ซึ่งก็คือชื่อชื่อ Host ที่ถูกกําหนดให้มีชื่อในเวิลด์ไวด์เว็บ และขึ้นต้นด้วย http และมีโดเมนหรือนามสกุลเป็น .com, .net, .org หรืออื่น ๆ

5 2.1.3 ประเภทของเว็บไซต์ 2.1.3.1 เว็บไซต์ ประชาสัมพันธ์องค์กร ( Corporate Website) จัดทําขึ้น เพื่อนําเสนอข้อมูลและ ข่าวสารสําหรับองค์กร 2.1.3.2 เว็บไซต์บริการหรือเว็บไซต์ชุมชน (Community & Service Website) จัดทําขึ้นเพื่อเป็น เครื่องมือในการสร้างชุมชน หรือให้บริการแก่ลูกค้าหรือลูกค้าหรือสมาชิกขององค์กร หรือบริษัทนั้น 2.1.3.3 เว็บไซต์จําหน่ายสินค้าหรือบริการออนไลน์(Ecommerce Website) จัดทํา ขึ้นเพื่อใช้ใน การทําตลาดหรือขายสินค้าหรือบริการผ่านเว็บไซต์ 2.1.3.4 เว็บไซต์นําเสนอสื่อผสม (Multimedia & Presentation Website) เว็บไซต์ มีการนําเอา เทคโนโลยีใหม่ ๆ ที่ทันสมัยมาใช้ในการนําเสนอ เช่น ภาพเคลื่อนไหว (Animation), เสียง (Sound), หรือ ภาพ วิดีโอ (VDO Streaming) นําเสนอผ่านเว็บไซต์ 2.2 หลักการออกแบบและพัฒนาเว็บไซต์ 2.2.1 การวางโครงสร้างเว็บไซต์ 2.2.1.1 โครงสร้างแบบเรียงลําดับ (Sequential Structure ) คือ โครงสร้าง พื้นฐาน หรือ โครงสร้างแบบลําดับขั้นตอนที่นิยมใช้กันทั่วไปเพราะง่ายต่อการจัดระบบข้อมูล รูปที่ 2.1 โครงสร้างแบบเรียงลำดับ 2.2.1.2 โครงสร้างแบบลำดับขั้น (Hierarchical Structure) คือ การจัดระบบโครงสร้างที่มีความ ซับซ้อนของข้อมูล โดยแบ่งเนื้อหาออกเป็นส่วนต่าง ๆ และมีรายละเอียดย่อย ๆ ในแต่ละเว็บเพจ รูปที่ 2.2 โครงสร้างแบบลำดับชั้น รูปที่ 2.3 โครงสร้างแบบตาราง

6 2.2.1.3 โครงสร้างแบบตาราง (Grid Structure) คือ การจัดระบบโครงสร้างมีความซับซ้อน มากกว่าโครงสร้างแบบลำดับขั้น โดยการออกแบบที่มีความยืดหยุ่น เพิ่มการเชื่อมโยงถึงกันได้ 2.2.1.4 โครงสร้างแบบใยแมงมุม (Web Structure ) คือ โครงสร้างที่มีความยืดหยุ่นมากที่สุด โดยหน้าเว็บเพจทุกหน้าสามารถเชื่อมโยงหากันได้ทั้งหมด รวมทั้งสามารถเชื่อมโยงไปเว็บไซต์หรือลิงค์ภายนอก รูปที่ 2.4 โครงสร้างแบบใยแมงมุม ลักษณะการเชื่อมโยงในเว็บนั้น นอกเหนือจากการใช้ไฮเปอร์เท็กซ์หรือ ไฮเปอร์มีเดีย กับ ข้อความที่มีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้าแล้ว ยังสามารถใช้ลักษณะการเชื่อมโยง จากรายการที่รวบรวมชื่อหรือหัวข้อของเนื้อหาแต่ละหน้าไว้ ซึ่งรายการนี้จะ ปรากฏอยู่บริเวณใด บริเวณหนึ่ง ในหน้าจอ ผู้ใช้สามารถคลิกที่หัวข้อใดหัวข้อหนึ่งในรายการเพื่อเลือก ที่จะเข้าไปสู่หน้าใด ๆ ก็ได้ตามความ ต้องการ ข้อดีของรูปแบบนี้คือง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บ โดยผู้ใช้สามารถกำหนดทิศทาง การเข้าสู่ เนื้อหาได้ด้วยตนเอง แต่ข้อเสียคือถ้ามีการเพิ่มเนื้อหาใหม่ ๆ อยู่เสมอจะเป็น การยากในการ ปรับปรุง นอกจากนี้การเชื่อมโยงระหว่างข้อมูลที่มีมากมายนั้นอาจทำ ให้ผู้ใช้เกิดการ สับสนและ เกิดปัญหาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ 2.2.2 การกำหนดขนาดเว็บเพจ ขนาดของเว็บไซต์ที่นิยมในปัจจุบันมี 2 ขนาด คือ 2.2.2.1 ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดที่สามารถใช้ได้กับ หน้าจอทุกขนาดใน ปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากอดีตขนาดของ จอคอมพิวเตอร์มีขนาดเล็ก 2.2.2.2 ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้ จอคอมพิวเตอร์ขนาดใหญ่ขึ้นเนื่องมาจากราคาจอคอมพิวเตอร์ที่ถูก 2.2.3 รูปแบบการออกแบบเว็บไซต์ เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งการออกแบบ หน้าตา เว็บไซต์ส่วน ใหญ่จะมององค์ประกอบขององค์กร หน่วยงาน หรือเนื้อหาที่นำเสนอเป็นหลัก ซึ่งการออกแบบหน้าตาของ เว็บไซต์มีอยู่ 3 แบบ คือ 2.2.3.1 การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหาเป็นการออกแบบเว็บไซต์ที่เน้นการนำเสนอ เนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบ หน้าตา รูปแบบง่าย เช่น มีเมนู สารบัญ และเนื้อหา

7 2.2.3.2 การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้น ภาพกราฟิก ที่สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะ ใช้เวลาในการโหลดเว็บนาน 2.2.3.3 การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา เป็นการออกแบบเว็บที่นิยมในปัจจุบันซึ่ง ประกอบด้วยข้อความ รูปภาพ โดยมีการจัดองค์ประกอบต่าง ๆ เพื่อให้เว็บน่าสนใจ 2.2.4 องค์ประกอบของการออกแบบเว็บไซต์ 2.2.4.1 ความเรียบง่าย (Simplicity) หมายถึง การจำกัดองค์ประกอบเสริมให้เหลือเฉพาะ องค์ประกอบหลัก กล่าวคือในการสื่อสารเนื้อหากับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เรา ต้องการ นำเสนอ จริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ ถ้าหากมีมาก เกินไปจะรบกวนสายตาและสร้างความรำคาญต่อผู้ใช้ตัวอย่างเว็บไซต์ที่ได้รับ การออกแบบที่ดี ได้แก่ เว็บไซต์ ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบ ง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก 2.2.4.2 ความสม่ำเสมอ (Consistency) หมายถึง การสร้างความสม่ำเสมอให้เกิดขึ้นตลอดทั้ง เว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละ หน้าในเว็บไซต์นั้นมีความ แตกต่างกันมากจนเกินไป อาจทำให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่ากำลัง อยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละหน้าควรที่จะมีรูปแบบ สไตล์ของ กราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอดทั้งเว็บไซต์ 2.2.4.3 ความเป็นเอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ต้องคำนึงถึง ลักษณะขององค์กร เป็นหลัก เนื่องจากเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ ตัวอักษร ชุดสี รูปภาพ หรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคาร แต่เรากลับเลือกสีสันและกราฟิกมากมาย อาจทำให้ผู้ใช้คิดว่า เป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือ ขององค์กรได้ 2.2.4.4 เนื้อหา (Useful Content) ถือเป็นสิ่งสำคัญที่สุดในเว็บไซต์ เนื้อหาใน เว็บไซต์ต้องสมบูรณ์ และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและ เนื้อหาที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ เนื้อหาที่สำคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และ ไม่ไปซ้ำ กับเว็บอื่น เพราะ จะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็น เว็บที่ลิงค์ข้อมูล จากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ ผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่ จำเป็นต้องกลับมาใช้งาน ลิงค์เหล่านั้นอีก 2.2.4.5 ระบบเนวิเกชั่น (User-Friendly Navigation) เป็นส่วนประกอบที่มีความสำคัญต่อเว็บไซต์ มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์ ระบบเนวิเกชั่น จึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่ายใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย ตำแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่ำเสมอ เช่น อยู่ตำแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่มระบบเนวิเกชั่น ที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วย อำนวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิก บนเว็บเบราเซอร์

8 2.2.4.6 คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) ลักษณะที่ น่าสนใจ ของ เว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสำคัญ แต่โดยรวมแล้วก็สามารถสรุปได้ว่า เว็บไซต์ ที่น่าสนใจนั้น ส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได ให้เห็นชนิดตัวอักษร อ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น 2.2.4.7 ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การใช้งานของ เว็บไซต์ นั้นไม่ควรมีขอบจำกัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่หลากหลายไม่มีการ บังคับให้ผู้ใช้ ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่แสดง ผลได้ดีในทุก ระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ที่มี ผู้ใช้บริการมากและ กลุ่มเป้าหมายหลากหลายควรให้ความสำคัญกับเรื่องนี้ให้มาก 2.2.4.8 ความคงที่ในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรู้สึกว่า เว็บไซต์มี คุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสำคัญกับการออกแบบเว็บไซต์เป็นอย่าง มาก ต้องออกแบบ วางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทำขึ้นอย่างง่ายไม่มีมาตรฐานการออกแบบและระบบ การจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหาและทำ ให้ผู้ใช้หมดความเชื่อถือ 2.2.4.9 ความคงที่ของการทำงาน (Function Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์ควรมี ความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ใน เว็บไซต์ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพราะ เว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็น ปัญหาที่สร้างความรำคาญกับผู้ใช้เป็นอย่าง มาก 2.2.5 ขั้นตอนการสร้างเว็บไซต์ ขั้นตอนที่ 1 การวางแผนการจัดทำเว็บไซต์เป็นขั้นตอนแรกของการออกแบบเว็บเนื่องจากเรา ต้องกำหนดชื่อเรื่อง เนื้อหา และรายละเอียดของเว็บที่เราจะจัดทำเพื่อให้เห็นมุมมอง คร่าว ๆ ก่อนจะลงมือ สร้างเว็บไซต์ นอกจากนี้เรายังต้องทำการแบ่งเนื้อหาเป็นหมวดหมู่ต่างๆ ตามลำดับก่อน-หลัง เพื่อให้ง่ายต่อการ จัดทำโครงร่างของเว็บ ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ เป็นขั้นตอนในการกำหนดผังของเว็บ เพื่อให้ทราบ องค์ประกอบทั้งหมดของเว็บ ตัวอย่างดังรูป รูปที่ 2.5 โครงของเว็บไซต์ ขั้นตอนที่ 3 กำหนดการเชื่อมโยงระหว่างเว็บเพจ เป็นการกำหนดการเชื่อมโยงในแต่ละหน้าเว็บ เพจให้สามารถเชื่อมโยงกลับไปกลับมระหว่างหน้าเว็บเพจต่าง ๆ ได้ จากตัวอย่างจะเห็นว่าหน้าindex.html

9 สามารถเชื่อมโยงไปยังหน้าต่าง ๆได้และแต่ละหน้าก็สามารถเชื่อมโยงกลับมายังหน้า index.html ได้ตัวอย่าง ดังรูป รูปที่ 2.6 การเชื่อมโยงเว็บเพจ ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์ การสร้างโฟลเดอร์การสร้างโฟลเดอร์ให้สร้างเป็นชื่อ หน่วยงาน / เรื่องนั้น ๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 เช่น swt คือ โรงเรียน เสริมงามวิทยาคม จากนั้นข้างในโฟลเดอร์ swt ให้เราสร้างโฟลเดอร์เก็บรูปภาพพื้นหลัง ไฟล์เสียง ไฟล์วีดีโอ หรือโฟลเดอร์อื่นเป็นชื่อภาษาอังกฤษ เช่น pic คือโฟลเดอร์เก็บรูปภาพ, bg คือ โฟลเดอร์เก็บพื้นหลังเป็นต้น การตั้งชื่อไฟล์การตั้งชื่อไฟล์ให้ตั้งชื่อและนามสกุลไฟล์เป็น ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือ ผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง และตั้งชื่อ ไฟล์ให้ตรง กับเรื่องนั้น ๆ รูปที่ 2.7 การตั้งชื่อไฟล์ ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์ รูปที่ 2.8 การออกแบบเว็บเพจ ขั้นตอนที่ 6 การสร้างเว็บเพจ เมื่อจัดวางองค์ประกอบของเว็บแต่ละหน้าแล้ว ต่อไป คือ ขั้นตอน การเขียนเว็บด้วยโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละหน้าเว็บเพจนำเสนอ ข้อความ รูปภาพ วีดีโอ และเสียง ให้อยู่ในรูปแบบการที่ต้องการ

10 รูปที่ 2.9 การเขียนโปรแกรมด้วยภาษา HTML ขั้นตอนที่7 การลงทะเบียนขอพื้นที่เว็บไซต์เมื่อทำการออกแบบและสร้างเว็บไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ การเผยแพร่เว็บไซต์สู่โลกของอินเทอร์เน็ตให้คนอื่นเข้ามาเยี่ยมชม วิธีการ คือการนำเว็บไซต์ ไปฝากกับผู้ให้บริการพื้นที่เว็บไซต์ทั้งแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่ เว็บไซต์ฟรีซึ่วันนี้เราจะขอ แนะนำเว็บไซต์ที่ให้บริการฟรีพื้นที่ฝากเว็บ คือ http://www.thcity.com รูปที่ 2.10 การลงทะเบียนขอพื้นที่เว็บไซต์ ขั้นตอนที่ 8 การอัปโหลดเว็บไซต์เมื่อเราทำการสมัครบริการพื้นที่ฝากเว็บแล้ว ขั้นตอน ต่อไป คือการอัปโหลดไฟล์เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บซึ่งอาจจะทำ การอัปโหลดผ่านเว็บ บราวเซอร์เว็บที่ให้บริการ หรือการอัปโหลดด้วยโปรแกรม เช่น CuteFTP, Filezilla, WS_FTP เป็นต้น เพื่อให้ ผู้คนได้เข้าเยี่ยมชมโดยสามารถดูในเว็บไซต์ของเราผ่านเครือข่าย อินเทอร์เน็ต รูปที่ 2.11 การอัปโหลดเว็บไซต์

11 2.2.6 การใช้สี 2.2.6.1 สีฟ้าและสีน้ำเงิน ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม เอาการ เอางาน ละเอียด รอบคอบ สง่างาม มีศักดิ์ศรี สูงศักดิ์ เป็นระเบียบถ่อมตน สามารถลดความ ตื่นเต้น และช่วยทำให้มี สมาธิ แต่ถ้ามีสีน้ำเงินเข้มเกินไป ก็จะทำให้รู้สึกซึมเศร้าได้ 2.2.6.2 สีส้ม ให้ความรู้สึก เร่าร้อน ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุ่น ความคึกคะนอง การ ปลดปล่อย ความเปรี้ยว การระวัง เป็นสีที่เร้าความรู้สึก ปกติควรใช้แต่น้อยเมื่อ เทียบกับสีอื่น สังเกตว่าคนที่อยู่ ในห้องสีส้มจะอยู่ได้ไม่นาน 2.2.6.3 สีเหลือง เป็นสีแห่งความเบิกบาน เร้าอารมณ์ และเรียกร้องความสนใจให้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง ความเบิกบานสดชื่น ชีวิตใหม่ ความสด ใหม่ ความ สุกสว่าง การแผ่กระจาย อำนาจ บารมี 2.2.6.4 สีเขียว เป็นสีในวรรณะเย็น จะสร้างความรู้สึกเย็นสบาย ใช้เป็นสีที่ช่วย ผ่อนคลาย ความเครียดได้ ให้ความรู้สึก สงบ เงียบ ร่มรื่น ร่มเย็น การพักผ่อน การผ่อนคลาย ธรรมชาติ ความ ปลอดภัย ปกติ ความสุข ความสุขุม เยือกเย็น 2.2.6.5 สีขาว ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง ความจริง ความเมตตา ความศรัทธา ความดีงาม 2.2.6.6 สีเทา ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความ ชรา ความสงบ ความ เงียบ สุภาพ สุขุม ถ่อมตน สีนี้มีข้อดีคือทำให้เย็น แต่สร้างความสร้างความรู้สึก หม่นหมอง ได้ ควรใช้ร่วมกับสีที่ มีชีวิต โทนสว่างอย่างน้อยหนึ่งสี 2.3 โปรแกรมที่ใช้ในการพัฒนาระบบงาน 2.3.1 โปรแกรม Adobe Photoshop CS6 โปรแกรม Adobe Photoshop cs6 เป็นโปรแกรมใน ตระกูล Adobe ที่ใช้สำหรับตกแต่งภาพถ่าย และภาพกราฟิก ได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้าน สิ่งพิมพ์ นิตยสาร และอื่นๆ ทั้งยังสามารถ Retouching ตกแต่งภาพและสร้างภาพ ซึ่ง กำลังเป็นที่นิยมสูงมาก ใน ขณะนี้ เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพการใส่ Effect ต่าง ๆให้กับภาพ และตัวหนังสือ การทำภาพขาวดำ โปรแกรม Adobe Photoshop เป็นโปรแกรมที่ สามารถที่จะเรียนรู้ได้ด้วย ตนเอง และทำการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆได้อย่าง ง่ายดาย และสิ่งที่ขาดไม่ได้นั้นก็ คือ การใส่ข้อความประกอบลงในภาพด้วย และเนื่องด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่าง ต่อเนื่อง ทำให้จำเป็นต้องศึกษาคำสั่งต่างๆให้เข้าใจ แต่ที่ 16 สำคัญ เมื่อได้เรียนรู้การใช้คำสั่ง ในเวอร์ชั่นเก่า แต่ก็ยังคงสามารถนำไปประยุกต์ใช้กับเวอร์ชั่นใหม่ๆ ได้ด้วย 2.3.1.1 วิธีการติดตั้ง โปรแกรม Adobe Photoshop cs6 รูปที่ 2.12 แสดงเข้าไปยังโฟลเดอร์ของ Photoshop ตามภาพ ดับเบิ้ลคลิก Set-up

12 รูปที่ 2.13 แสดงการตรวจสอบก่อนทำการติดตั้งโปรแกรม รูปที่ 2.14 แสดงโปรแกรมตรวจสอบเสร็จแล้วจะเข้าสู่หน้าจอ เลือก Try รูปที่ 2.15 แสดงการกรอก Serial Number แล้วคลิกที่ปุ่ม คลิก Accept รูปที่ 2.16 แสดงการเลือกการติดตั้งของโปรแกรม ให้เลือก Installs

13 รูปที่ 2.17 แสดงหน้าการโหลดของโปรแกรม รูปที่ 2.18 แสดงการเสร็จสิ้นการติดตั้งโปรเเกรม Adobe Photoshop CS6

14 2.3.1.2 การเริ่มต้นใช้งาน Adobe Photoshop CS6 การเริ่มต้นใช้งาน Adobe Photoshop CS6 เบื้องต้นหลังจากที่ทำการติดตั้ง Adobe Photoshop CS6 เรียบร้อยแล้วก็สามารถเรียกใช้งานโปรแกรมด้วยวิธีการต่อไปนี้ 1) Click Mouse ที่ปุ่ม 2) เลือกคำสั่ง All Program Adobe Photoshop CS6 รูปที่ 2.19 แสดงขั้นตอนการเข้าสู่โปรแกรม Adobe Photoshop CS6 รูปที่ 2.20 แสดงหน้าต่างโปรแกรม Adobe Photoshop CS6

15 รูปที่ 2.21 แสดงหน้าจอหลักการทำงานของโปรแกรม Adobe Photoshop CS6 2.3.1.3 เครื่องมือต่างๆ (Toolbox) รูปที่ 2.22 แสดงเครื่องมือต่างๆ (Toolbox) Adobe Photoshop CS6

16 ตารางที่ 2.1 ตารางอธิบายเครื่องมือ Tool ต่างๆ สัญลักษณ์ ความหมาย Marquee Tool เป็นการเลือกแบบสี่เหลี่ยมผืนผ้า, วงกลม, แถวขนาด 1 Pixel หรือคอลัมน์ 1 Pixel Move Tool ใช้เพื่อเลื่อนส่วนที่เลือก หรือไว้เลื่อน Layer และ Guide ต่างๆ Lasso Tool จะใช้เพื่อสร้าง Selection แบบอิสระ, แบบ Polygonal (ตามจุดที่คลิก) และ Magnetic (ดึงเข้าหาขอบรูปภาพ) Magic Wand Tool ใช้เลือกพื้นที่บริเวณที่มีสีเดียวกัน Crop T Crop Tool ใช้ในการเลือกบางส่วนของรูปภาพ Slice Tool ใช้ในการสร้าง Slice Slice Selection Tool ใช้เลือก Slice ที่คุณสร้างขึ้นมา Healing Brush Tool ใช้ในการระบายสี เพื่อซ่อมแซมรูปภาพให้สมบูรณ์แบบ Patch Tool ใช้เฉพาะในบริเวณที่เลือกไว้เท่านั้น เพื่อให้เกิดความสมบูรณ์ของรูปภาพ โดยใช้ลวดลาย หรือใช้ส่วนที่เลือกในภาพเป็นต้นฉบับ Brush Tool ใช้ในการวาดเส้น Brush ต่างๆ Pencil Tool ใช้ในการวาดเส้นที่มีขอบชัดเจน Clone Stamp Tool ใช้ก็อปปี้รูปโดยอาศัยรูปภาพต้นฉบับ Eraser Tool ใช้ลบรูปภาพหรือลบบางส่วนของพิกเซลและทำการเก็บส่วนต่างๆ เป็น State ต่างๆ ใน History Palette

17 ตารางที่ 2.1 ตารางอธิบายเครื่องมือ Tool ต่างๆ (ต่อ) สัญลักษณ์ ความหมาย Magic Eraser Tool ใช้ลบรูปภาพบริเวณที่มีสีเดียวกันให้กลายเป็นพื้นที่โปร่งใส (Transparent) โดยการคลิก เพียงครั้งเดียว Background Eraser Tool ใช้ลบรูปภาพบางส่วนให้กลายเป็นพื้นที่โปร่งใสโดยการลากเมาส์ Paint Bucket Tool ใช้ในการเติมสี Fill ในบริเวณที่เป็นสีเดียวกันด้วยสีของForeground Burn Tool ใช้ลดความสว่างทำให้รูปภาพดูมืดลง Sponge Tool ใช้เปลี่ยนสีในส่วนต่างๆ ของรูปภาพ โดยการปรับค่าความเข้มสี Path Selection Tool ใช้เพื่อเลือก Shape หรือ Path เพื่อแสดง Anchor Paint, Direction Line และ Direction Paint Type Tool ใช้ในการสร้างตัวหนังสือลงบนรูปภาพ Type Mask Tool ใช้สร้าง Selection เป็นรูปร่างตัวหนังสือ Pen Tools ใช้ในการลากเส้น Path ซึ่งสามารถดัดโค้งตามรูปภาพได้ Custom Shape Tool ใช้เลือกรูปภาพเลือกรูปภาพที่มีรูปร่างเฉพาะจาก Custom Shape List Eyedropper Tool ใช้ในการดูดสีจากรูปภาพเพื่อใช้เป็นต้นแบบของสีกับงานชิ้นอื่นๆ Measure Tool ใช้วัดระยะห่าง, ตำแหน่งและมุมองศาระหว่างภาพ Hand Tool ใช้เลื่อนภาพที่อยู่ในหน้าต่างเดียวกัน Zoom Tool ใช้ในการขยายและย่อส่วนการแสดงภาพบนหน้าจอ

18 2.3.1.4 การเปิดไฟล์ภาพ (Open) 1) คลิกที่เมนูคำสั่ง File ที่แถบ Menu bar จากนั้นเลือกคำสั่ง Open รูปที่ 2.23 แสดงการเปิดไฟล์ภาพ (Open) 2) จะปรากฏ Dialog แสดงรายชื่อไฟล์ต่าง ๆ ดังภาพเพื่อเลือกไฟล์ที่ต้องการเปิดมาใช้งาน 3) คลิกเลือกไฟล์ที่ต้องการเปิดใช้งาน จากนั้นคลิกปุ่ม Open รูปที่ 2.24 แสดงการเปิดไฟล์ภาพ (Open) 2.3.1.5 การสร้างไฟล์ใหม่ (New) 1) คลิกที่เมนูคำสั่ง File ที่แถบ Menu bar จากนั้นเลือกคำสั่ง New รูปที่ 2.25 การสร้างไฟล์ใหม่ (New)

19 2) จะปรากฏ Dialog สำหรับกำหนดคุณสมบัติต่าง ๆ ของไฟล์ภาพ ดังนี้ รูปที่ 2.26 แสดงการกำหนดขนาดของกระดาษ - Name คือ ชื่อของชิ้นงาน สามารถกำหนดใหม่เองได้ชื่อนี้จะไประบุที่ชื่อไฟล์ต่อไป - Preset คือ ขนาดงานที่โปรแกรมกำหนดมาให้ ซึ่งมีหลากหลายขนาดให้เลือก หรือ สามารถกำหนดเองจากช่อง Width และ Height ได้ - Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา) โดยกำหนดหน่วยและขนาดได้เอง จากรูป คือ 1024 Pixels - Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง)โดยกำหนดหน่วยและขนาดได้เอง จากรูป คือ 768 Pixels - Resolution คือ ความละเอียดของภาพโดยใส่ตัวเลขค่าความละเอียดของภาพ เช่น งาน เว็บหรือรูปที่แสดงบนคอมพิวเตอร์เท่ากับ 72pixels/inch งานสิ่งพิมพ์เท่ากับ 150-200 pixels/inch - Color Mode คือ โหมดสีของภาพ ซึ่งประกอบไปด้วย โหมดสี Bitmap,Grayscale, RGB Color, CMYK Color, Lab Color - Background Contents คือ สีพื้นหลังของภาพ เมื่อเริ่มชิ้นงานใหม่มี ดังนี้ - White กำหนดให้สีพื้นหลังเป็นสีขาว - Background Color กำหนดให้สีพื้นหลังเป็นสีเดียวกับ Background - Transparent ไม่มีพื้นหลัง 2.3.1.6 การบันทึกข้อมูลลงบนไฟล์ (Save) หลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์ (Save) สำหรับการ เรียกใช้งานในครั้งต่อไป โปรแกรมมีการบันทึกข้อมูลลงบนไฟล์ (Save) อยู่ 3 ลักษณะ คือ 1) Save บันทึกไฟล์ในรูปแบบ (Format) ปกติ 2) Save As บันทึกไฟล์ในรูปแบบ (Format) อื่นๆ ได้ เช่น JPEG,BMP,GIF 3) Save for Web บันทึกไฟล์ในรูปแบบ (Format) สำหรับการ ใช้งานบนเว็บเช่น ไฟล์ Html และไฟล์รูปภาพ JPEG, GIF, PGN เป็นต้น

20 2.3.1.7 การใช้งานของ Save และ Save As 1) คลิกที่เมนูคำสั่ง File ที่แถบ Menu bar จากนั้นเลือกคำสั่ง Save หรือ Save As หรือ Save for Web รูปที่ 2.27 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 2) จะปรากฏ Dialog สำหรับกำหนดคุณสมบัติต่าง ๆ ของไฟล์ภาพ ดังนี้ รูปที่ 2.28 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) - ชื่อไฟล์ (File Name) - รูปแบบของไฟล์ (Format) - กำหนดคุณสมบัติของการบันทึกไฟล์ (Save Options) 3) As a Copy บันทึกไฟล์เป็นชื่ออื่น รูปแบบ (Format) อื่นขณะที่ไฟล์เดิมกำลังเปิดใช้งาน 4) Layers จะเก็บคุณสมบัติของ Layer ต่าง ๆ 5) Use Proof setup เก็บค่าโหมดสีที่จะใช้แสดงสีของภาพก่อนจะพิมพ์ 6) Thumbnail กำหนดให้ไฟล์ที่บันทึก (Save) สามารถแสดงภาพตัวอย่างใน Dialog ของ การเปิดไฟล์ 7) Use Lower Case Extension กำหนดให้นามสกุลไฟล์เป็นอักษรตัวเล็ก 8) หลังจากกำหนดคุณสมบัติต่าง ๆ ให้คลิกปุ่ม Save เพื่อบันทึกข้อมูล 2.3.1.8 การปรับค่าความสว่าง/ความคมชัด (Brightness/Contrast) การปรับความสว่าง-ความมืด ของภาพ และการตัดกันของสีที่ชัดเจนขึ้นนั้น สามารถทำได้โดยใช้คำสั่งBrightness/Contrast

21 รูปที่ 2.29 แสดงการปรับค่าความสว่าง/ความคมชัด 2.3.2 ขั้นตอนการติดตั้งโปรแกรม Microsoft Word โปรแกรมไมโครซอฟต์เวิร์ด ซึ่งเป็นโปรแกรมประมวลผลคำแบบพิเศษช่วยให้สร้างเอกสารแบบมือ อาชีพอย่างมีประสิทธิภาพและประหยัด เช่นเหมาะกับงานด้านการพิมพ์เอกสาร ทุกชนิด สามารถพิมพ์เอกสาร ออกมาเป็นชุด ๆ ซึ่งเอกสารอาจเป็นจดหมาย บันทึกข้อความ รายงาน บทความ ประวัติย่อ และยังสามารถ ตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการพิมพ์เอกสารได้อย่างง่ายดาย สามารถตรวจสอบ สะกด คำและหลักไวยากรณ์ เพิ่มตาราง เพิ่มกราฟิก ในเอกสารได้อย่างง่ายดายหรือเพิ่มเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัดพิมพ์ด้วยคอมพิวเตอร์แบบตั้งโต๊ะ (Desktop Publishing) เพื่อสร้างโบชัวร์ (Brochures) ด้านสื่อโฆษณา (Advertisements) และจดหมายข่าว (Newsletters) ได้ด้วยโปรแกรม ประมวลผลคำ (word Processor) 2.3.2.1 การติดตั้ง Microsoft Word มีขั้นตอนดังนี้ 1) ในโฟลเดอร์ที่เก็บไฟล์ติดตั้ง Microsoft Office Professional Plus2010 Beta ให้ดับเบิลคลิกไฟล์ ProfessionalPlus.exe 2) ในหน้าเดอะล็อกบ็อกซ์ User Account Control (UAC) ให้คลิก Continue รูปที่ 2.30 แสดงหน้าต่าง User Account Control 3) รอจนโปรแกรมเตรียมการเซ็ตออัพ ระบบแล้วเสร็จ จากนั้นในหน้าRead the Microsoft Software License Terms ให้เลือกเช็คบ็อกซ์หน้า I accept the termsin this agreement เสร็จ แล้วคลิก Continue

22 รูปที่ 2.31 แสดงหน้าต่าง Microsoft Software License Terms 4) ในหน้า Choose the installation you wantโปรแกรมจะให้เลือกว่าจะติดตั้งแบบ Default หรือทำการติดตั้งโดยปรับแต่งเอง ในที่นี้เลือก InstallNow เพื่อติดตั้งแบบ Default รูปที่ 2.32 แสดงหน้าต่าง Choose the installation 5) ในหน้าเดอะล็อกบ็อกซ์ Installation Progressรอจนการติดตั้งโปรแกรมแล้วเสร็จ รูปที่ 2.33 แสดงหน้าต่าง Installation Progress

23 6) ในหน้าเดอะล็อกบ็อกซ์ถัดไปคลิก Close เพื่อจบการติดตั้ง Microsoft Office Professional Plus 2010 Beta รูปที่ 2.34 แสดงหน้าต่าง Successfully Installed 2.3.2.2 เริ่มต้นใช้งาน Microsoft Office 2010 1) หลังจากทำการติดตั้ง Microsoft Office 2010 เสร็จเรียบร้อยแล้วจากนั้นให้คลิก Start 2) คลิก Start แล้วคลิก All Programs คลิก Microsoft Office แล้วคลิก Microsoft Word 2010 รูปที่ 2.35 หน้าต่าง Office Professional Plus 2010

24 2.3.3 ขั้นตอนการติดตั้งโปรแกรม Wordpress WordPress (เวิร์ดเพรสส์) คือ โปรแกรมสำเร็จรูปที่ใช้สร้างและจัดการเนื้อหาเว็บไซต์ประเภท Contents Management System หรือเรียกย่อๆ ว่า "CMS" ซึ่งเขียนด้วยภาษา PHP และใช้ระบบจัดการ ฐานข้อมูล MySQL โดยมีส่วนประกอบหลักๆ คือ WordPress Core เป็นซอฟต์แวร์หลัก ใช้จัดการเว็บไซต์ เนื้อหาและบทความต่างๆ 2.3.3.1 ขั้นตอนการติดตั้งโปรแกรม Wordpress มีดังนี้ 1) ดาวน์โหลดตัวโปรแกรม WordPress .zip หรือ 2) นำไฟล์ที่ดาวน์โหลดขึ้น Hosting สามารถเลือกดำเนินการได้ 3 วิธี Upload ข้อมูลผ่าน ระบบจัดการ Control Panel Hosting Upload โดยการใช้โปรแกรม FTP หากคุณเข้าใช้งานเซิร์ฟเวอร์โดย ฐานะ root ในระบบ OS Linux สามารถใช้คำสั่งได้ดังนี้Extract File บนระบบจัดการ Control Panel Hosting 3) ดำเนินการ Extract File ที่ดาวน์โหลดมาหากคุณเข้าใช้งานเซิร์ฟเวอร์โดย ฐานะ root ในระบบ OS Linux สามารถใช้คำสั่งได้ดังนี้tar - xvzf latest.tar.gz 4) ดำเนินการสร้าง MySQL Database และ Database User เพื่อใช้เป็นข้อมูลระหว่าง ทำขั้นตอน Install WordPress 5) เรียกเว็บไซต์ของคุณ เลือกภาษาที่ต้องการ แล้วคลิกปุ่ม Continue รูปที่ 2.36 เลือกภาษา 6) ยืนยันและดำเนินการติดตั้ง WordPress โดยคลิกที่ปุ่ม Let’s Go รูปที่ 2.37 ยืนยันโดยคลิกปุ่ม

25 7) ใส่รายละเอียดในการเชื่อมต่อกับ Database ของคุณที่สร้างไว้ เมื่อใส่ข้อมูลเรียบร้อย คลิกที่ปุ่ม submit รูปที่ 2.38 ใส่รายละเอียด 8) ใส่รายละเอียดเบื้องต้นสำหรับข้อมูลเว็บไซต์ และตั้งค่าของผู้ดูแลเว็บไซต์เมื่อใส่ข้อมูล เรียบร้อยคลิกที่ปุ่ม install wordpress รูปที่ 2.39 คลิกที่ปุ่ม install wordpress 2.3.4 ขั้นตอนการติดตั้งโปรแกรม XAMPP XAMPP คือโปรแกรมสำหรับจำลองเครื่องคอมพิวเตอร์ส่วนบุคคลของเราให้ทำงานในลักษณะของ Webserver ซึ่งเครื่องคอมพิวเตอร์ของเราจะเป็นทั้งเครื่องแม่ และเครื่องลูกในเครื่องเดียวกัน โดยไม่ต้อง เชื่อมต่อกับ Internet ก็สามารถทดสอบกับเว็บไซต์ที่เราสร้างขึ้นมาได้ทุกที่ทุกเวลา อีกทั้งยังประหยัดเวลาและ ไม่มีค่าใช้จ่ายใดๆ 2.3.4.1 การติดตั้งโปรแกรม XAMPP มีขั้นตอน ดังนี้ 1) เปิด Google Chrome แล้วพิมพ์ค้นหา XAMPP Dowload เพื่อทำการดาวน์โหลด XAMPP จากนั้นเลือกเวอร์ชั่นที่ต้องการดาวน์โหลด จากนั้นคลิกที่ปุ่ม Download (64 bit)

26 รูปที่ 2.40 คลิกที่ปุ่ม Download (64 bit) 2) ทำการติดตั้ง คลิก Next รูปที่ 2.41 ทำการติดตั้ง คลิก Next 3) ทำการเลือก Components ที่เราต้องการ รูปที่ 2.42 ทำการเลือก Components ที่เราต้องการ

27 4) เลือก Path ในการติดตั้ง XAMPP รูปที่ 2.43 เลือก Path ในการติดตั้ง XAMPP 5) คลิกที่ปุ่ม Next รูปที่ 2.44 การติดตั้ง Joomla

28 6) คลิก Next รูปที่ 2.45 พร้อมสำหรับการติดตั้ง 7) เครื่องมือกำลังทำการติดตั้ง รูปที่ 2.46 เครื่องมือกำลังทำการติดตั้ง

29 8) โปรแกรมติดตั้งเสร็จสิ้น รูปที่ 2.47 โปรแกรมติดตั้งเสร็จสิ้น 9) เข้า Control Panel ของ XAMPP และทำการคลิก Start Apache และ Mysql ตามลำดับ รูปที่ 2.48 เริ่มต้นการใช้งานโปรแกรม XAMPP 2.4 การขอพื้นที่และการอัปโหลดเว็บไซต์ 2.4.1 ตรวจสอบไฟล์ให้พร้อมก่อนการอัปโหลด ก่อนที่จะอัปโหลดเว็บไซต์ที่สร้างขึ้นเพื่อเผยแพร่สู้สายตาคนอื่น ควรตรวจสอบไฟล์ ต่างๆ ให้แน่ใจ ว่า เว็บไซต์ไม่มีข้อผิดพลาดใดๆ และสามารถทำงานได้อย่างมีประสิทธิภาพ ไม่ว่าจะ เป็นขนาดของไฟล์เว็บเพจ ลิงค์เชื่อมโยงระหว่างเว็บเพจกับไฟล์หรือเว็บไซต์อื่นๆ

30 2.4.2 ขนาดของไฟล์เว็บเพจ ขนาดของไฟล์มีความสำคัญอย่างยิ่งต่อการเปิดเว็บเพจหน้านั้นหากไฟล์เว็บเพจมีขนาดใหญ่ย่อมทำ ให้เวลาในการเปิดเว็บเพจหน้านั้นนานขึ้น (ทั้งนี้ขึ้นอยู่กับความเร็วของอินเทอร์เน็ต และโมเด็มที่ใช้) ดังนั้น เพื่อให้ไฟล์เว็บเพจสามารถเปิดได้รวดเร็วแม้จะใช้ความเร็วของอินเทอร์เน็ตและ โมเดมที่ไม่สูงนักควรจะมีขนาด อยู่ที่ 35 – 60 K ซึ่งวิธีการตรวจสอบขนาดไฟล์ของเว็บเพจรวมถึงเวลา ที่ใช้ในการเปิดเว็บเพจหน้านั้นๆ ที่โม เดมความเร็ว 56 Kbps 2.4.3 แก้ปัญหาลิงค์ขาด หลังจากตรวจพบว่ามีลิงค์ขาด หรือลิงค์ที่ไม่พบไฟล์ปลายทางที่เรียกใช้งาน สามารถ แก้ไขปัญหา นี้ได้ ดังนี้ 1) คลิกแท็บ Link Cheker บนพาเนล Result 2) คลิกปุ่มเลือกโฟลเดอร์ท้ายลิงค์ที่ต้องการแก้ไข เพื่อเลือกไฟล์เดอร์ปลายทางใหม่ จากนั้นจะ แสดงเดอะล็อกบ็อกซ์แจ้งต้องการแก้ไขทุกจุดที่มีการเรียกใช้ลิงค์นั้น (ถ้าต้องการแก้ไข เฉพาะจุดที่กำลังเลือก ให้คลิก No) 2.4.4 อัพโหลดแพ็กเกจและตัวติดตั้งไปไว้ในโฮสต์ ขั้นตอนต่อไปก็คือการอัพโหลดไฟล์แพ็กเกจและไฟล์ติดตั้งไปไว้ในโฮสต์ของเรา โดยจะแนะนำการ อัพโหลดด้วยโปรแกรม FileZilla Clientเมื่อติดตั้งโปรแกรม FileZilla Client แล้ว เปิดโปรแกรมหน้าตา โปรแกรมดังกล่าวจะเป็นดังภาพ รูปที่ 2.49 โปรแกรม Filezilla ก่อนที่เราจะสามารถอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ได้นั้น เราต้องเชื่อมต่อกับเซิร์ฟเวอร์ให้ได้เสียก่อน โดยทำดังนี้

31 รูปที่ 2.50 เชื่อมต่อเซิฟเวอร์ ถ้าการเชื่อมต่อสำเร็จ เราจะพบกับโฟลเดอร์ต่าง ๆ ที่เก็บอยู่ในเซิร์ฟเวอร์ของเรา จากหน้าจอทาง ฝั่งขวา รูปที่ 2.51 เชื่อมต่อสำเร็จไฟล์จะอยู่ฝั่งขวา ให้เปิดเข้าไปในโฟลเดอร์ที่ใช้เก็บเว็บไซต์ของเรา (ในที่นี้คือโฟลเดอร์ public_html) จะพบกับ ไฟล์และโฟลเดอร์ต่าง ๆ ดังภาพ รูปที่ 2.52 จะพบกับโฟลเดอร์ต่างๆ การอัพโหลดไฟล์แพ็กเกจและไฟล์ติดตั้งที่เราได้เตรียมเอาไว้ ให้ทำ ดังนี้

32 รูปที่ 2.53 การอัปโหลดไฟล์ โฟล์แพ็กเกจและไฟล์ติดตั้งจะถูกอัปโหลดไปไว้ในเซิร์ฟเวอร์ของเราทันที รูปที่ 2.54 อัปโหลดไฟล์เสร็จสิ้น 2.4.5 การสร้างฐานข้อมูลเพื่อรองรับเว็บไซต์ WordPress เนื่องจากเว็บไซต์ WordPress ต้องใช้ฐานข้อมูลเพื่อเก็บข้อมูลต่างๆของระบบ ดังนั้น เราจึง จำเป็นต้องสร้างฐานข้อมูลไว้รองรับเว็บไซต์ที่เราจะติดตั้งในเซิร์ฟเวอร์ในขั้นตอนต่อไป รูปที่ 2.55 สร้างฐานข้อมูลรองรับWordpress

33 คลิกที่ MySQL Management รูปที่ 2.56 คลิกที่ MySQL Management คลิก Create new Database เพื่อสร้างฐานข้อมูลใหม่ รูปที่ 2.57 คลิก Create new Database เพื่อสร้างฐานข้อมูลใหม่ กำหนดรายละเอียดต่าง ๆ

34 รูปที่ 2.58 กำหนดรายละเอียดต่าง ๆ ไม่มีอะไรผิดพลาด ระบบจะนำมาที่หน้าดังภาพ รูปที่ 2.59 รายละเอียด เข้าสู่หน้าจอ Login รูปที่ 2.60 เข้าสู่หน้าจอ Login

35 2.5 ข้อมูลกิจการร้าน ร้านอาวน์ชา ชานมนกฮูก ตั้งอยู่ที่ 76 ถนนพิทักษ์พนมเขต ตำบลมุกดาหาร อำเภอเมืองมุกดาหาร จังหวัดมุกดาหาร 49000 เป็นร้านขนาดเล็ก จำหน่ายชานม ซึ่งปัจจุบันยังไม่มีเว็บไซต์การเปรียบเสมือน หน้าร้านของธุรกิจที่ขายสินค้าและบริการทางออนไลน์ ที่พร้อมต้อนรับลูกค้าทุกคนเข้ามาดูสินค้า ทำความรู้จักแบรนด์ และเลือกซื้อสินค้าได้อย่างสะดวกและรวดเร็ว ซึ่งสำหรับการทำธุรกิจในปัจจุบัน การมีเว็บไซต์เป็นของตัวเองนับว่ามีความสำคัญมากหรือช่องทางการจำหน่ายสินค้าผ่านทางออนไลน์ ของร้านอาวน์ชา ชานมนกฮูก 2.6 งานวิจัยที่ข้อง ภัทราพร เม้ามีศร,จริยา กองแก้ว,วิชุดา ไชยศิวามงคล ชื่อเรื่องปัจจัยที่ส่งผลต่อการซื้อสินค้าบนระบบ E-commerce (2560) การศึกษานี้มุ่งศึกษาถึงปัจจัยที่ส่งผลต่อการซื้อสินค้าบนระบบพาณิชย์อิเล็กทรอนิกส์เพื่อศึกษาถึง ปัจจัยต่างๆ ที่ ส่งผลต่อการเข้าซื้อสินค้าบนระบบพาณิชย์อิเล็กทรอนิกส์ของผู้บริโภค โดยทางการศึกษา งานวิจัยและบทความที่เกี่ยวข้องกับ การซื้อสินค้าบนระบบพาณิชย์อิเล็กทรอนิกส์ เป็นบทความที่อยู่ระหว่าง ปี พ.ศ. 2547 ถึง 2559 ผลการศึกษาพบว่า ปัจจัยที่ส่งผลต่อการซื้อสินค้าบนระบบพาณิชย์อิเล็กทรอนิกส์มีอยู่ 3 ปัจจัยคือ ปัจจัยด้าน ประชากรศาสตร์ ปัจจัยด้านส่วนประสมทางการตลาด และปัจจัยด้านพฤติกรรม อรุโณทัย ปัญญา ชื่อเรื่องปัจจัยที่มีผลต่อการตัดสินใจซื้อเสื้อผ้าแฟชั่นออนไลน์ผ่านสื่อสังคมออนไลน์ เฟสบุ๊ค (2563) การศึกษาครั้งนี้มีวัตถุประสงค์(1) เพื่อศึกษาปัจจัยส่วนบุคคลได้แก่ เพศ อายุและรายได้ที่มีผลต่อการ ตัดสินใจเลือกซื้อเสื้อผ้าแฟชั่น ผ่านสังคมออนไลน์(เฟซบุ๊ก) ของนักศึกษา ในเขตอำเภอเมืองจังหวัด เชียงใหม่ (2) เพื่อศึกษาปัจจัยส่วนประสมทางการตลาดออนไลน์ ได้แก่ผลิตภัณฑ์ราคา ช่องทางการจัดจำหน่าย การส่งเสริมการตลาด ปัจจัยด้านการรักษา ความเป็นส่วนตัว และปัจจัยด้านการให้บริการส่วนบุคคล ที่มีผลต่อ การตัดสินใจเลือกซื้อเสื้อผ้า แฟชั่น ผ่านสังคมออนไลน์(เฟซบุ๊ก)ของนักศึกษา เครื่องมือที่ใช้คือแบบสอบถาม กลุ่มตัวอย่างได้แก่ นักศึกษาระดับปริญญาตรีชั้นปีที่ 1-4 ปีการศึกษา 2560 ที่ศึกษาในเขตอำเภอเมือง จังหวัด เชียงใหม่400 คน ผลการวิจัย พบว่าปัจจัย ส่วนบุคคลที่ส่งผลต่อการเลือกซื้อเสื้อผ้าแฟชั่นผ่านสังคมออนไลน์ (เฟซบุ๊ก) ได้แก่ เพศอายุและรายได้ปัจจัยส่วนประสมทางการตลาดออนไลน์ที่ส่งผล ต่อการตัดสินใจซื้อ ประกอบด้วยผลิตภัณฑ์ราคา การจัดจําหน่ายการส่งเสริมการตลาด ปัจจัยด้านการรักษาความเป็นส่วนตัว และปัจจัยด้านการให้บริการ ดวงตา อ่อนเวียง ชื่อเรื่องพฤติกรรมผู้บริโภคและความตั้งใจซื้อสินค้าออนไลน์ ( 2565) งานวิจัยนี้เพื่อศึกษาระดับและความสัมพันธ์ของพฤติกรรมผู้บริโภคและความตั้งใจซื้อสินค้าออนไลน์ ในจังหวัด อุบลราชธานี ศรีสะเกษ และยโสธร โดยผู้วิจัยใช้แบบสอบถามจำนวน 28 ข้อเป็นเครื่องมือในการเก็บรวบรวม ความเห็นของกลุ่มตัวอย่าง 400 คน สถิติที่ใช้วิเคราะห์ได้แก่ ความถี่ ร้อยละ ค่าเฉลี่ย ส่วนเบี่ยงเบนมาตรฐาน ความคลาดเคลื่อน One-Way ANOVA, MANOVA และ Correlation ผลวิจัยพบว่า ค่าเฉลี่ยของพฤติกรรม การสั่งซื้อสินค้าออนไลน์ของผู้บริโภคในจังหวัดอุบลราชธานี ศรีสะเกษ และยโสธรในภาพรวมและรายด้าน อยู่

36 ในระดับมาก โดยมีค่าเฉลี่ย 3.93 (SD = .64) ปัจจัยส่วนบุคคลของกลุ่มตัวอย่างจำแนกตามเพศด้านความรอบรู้ ในตัวเอง (Self-Efficacy) มีค่าเฉลี่ยไม่แตกต่างกันอย่างมีนัยสำคัญทางสถิติที่ระดับ .05 โดยมีค่าทดสอบ t= 1.71 และมีนัยสำคัญสูงกว่า .05 (Sig= .142) ความไว้วางใจและการรับรู้ประโยชน์ที่มีค่าเฉลี่ยแตกต่างกัน อย่างมีนัยสำคัญทางสถิติที่ F = 4.795 (Sig .000)

บทที่ 3 วิธีการดำเนินงาน การจัดทำโครงงานการสร้างเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก มีวัตถุประสงค์คือ 1) เพื่อสร้างเว็บไซต์ ของร้านอาวน์ชา ชานมนกฮูก 2) เพื่อเพิ่มช่องทางในการจำหน่ายสินค้าของร้านอาวน์ชา ชานมนกฮูก 3) เพื่อศึกษาความพึงพอใจของผู้ใช้งานที่มีต่อการทำเว็บไซต์ร้านอาวน์ชา ชานมนกฮูก โดยมีวิธีการดำเนินงาน เป็นขั้นตอนต่าง ๆ ดังนี้ 3.1 ประชากรและกลุ่มตัวอย่าง 3.2 เครื่องมือที่ใช้ในการพัฒนาระบบและวิเคราะห์ข้อมูล 3.3 การเก็บรวบรวมข้อมูล 3.4 การวิเคราะห์ข้อมูล 3.5 ขั้นตอนการดำเนินงานสร้างเว็บไซต์ 3.1 ประชากรและกลุ่มตัวอย่าง 3.1.1 ประชากร ประชากรที่ใช้ในการศึกษาในครั้งนี้คือ ประชากรที่อาศัยอยู่ในตำบลมุกดาหาร จังหวัดมุกดาหาร จำนวน 6,890 คน (ข้อมูล ณ ปี 2566) 3.1.2 กลุ่มตัวอย่าง กลุ่มตัวอย่าง คือ ประชากรที่อาศัยอยู่ในตำบลมุกดาหาร จังหวัดมุกดาหารโดยเจาะจงช่วง อายุ12-60 ปีจำนวน 361 คน โดยอิงจากตารางของเครซี่และมอร์แกน 3.2 เครื่องมือที่ใช้ในการพัฒนาระบบและการวิเคราะห์ข้อมูล 3.2.1 เครื่องมือในการพัฒนาระบบ 3.2.1.1 Hardware 1) Intel Pentium Silver 2) SSD 128 GB 3) DDR3 4 GB 3.2.1.2 Software 1) ระบบปฏิบัติการ Microsoft Windows 10 2) โปรแกรม Microsoft Office 2010 3) โปรแกรม Word press 4) โปรแกรม XAMPP