โครงงานการสร้างเว็บไซต์ ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร

โครงงานการสร้างเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร นายชิษณุพงศ์ วงษ์พุฒ รหัสนักศึกษา 65302040005 นางสาวกิ่งกาญจน์ บุญทันเสน รหัสนักศึกษา 65302040002 นางสาวณัฐธิดา สุภารัตน์ รหัสนักศึกษา 65302040007 ระดับประกาศนียบัตรวิชาชีพชั้นสูง ชั้นปีที่ 2 กลุ่มที่ 1 โครงงานนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล สาขางานธุรกิจดิจิทัล ประเภทวิชาบริหารธุรกิจ ภาคเรียนที่ 1 ปีการศึกษา 2566 วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร

โครงงานการสร้างเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร นายชิษณุพงศ์ วงษ์พุฒ รหัสนักศึกษา 65302040005 นางสาวกิ่งกาญจน์ บุญทันเสน รหัสนักศึกษา 65302040002 นางสาวณัฐธิดา สุภารัตน์ รหัสนักศึกษา 65302040007 ระดับประกาศนียบัตรวิชาชีพชั้นสูง ชั้นปีที่ 2 กลุ่มที่ 1 โครงงานนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล สาขางานธุรกิจดิจิทัล ประเภทวิชาบริหารธุรกิจ ภาคเรียนที่ 1 ปีการศึกษา 2566 วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร

ข

ค หัวข้อโครงงาน การสร้างเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร CREATING A WEBSITE, BAKERY BANCHUPHAN MUKDAHAN ผู้ดำเนินโครงงาน นายชิษณุพงศ์ วงษ์พุฒ รหัสประจำตัวนักศึกษา 65302040005 นางสาวกิ่งกาญจน์ บุญทันเสน รหัสประจำตัวนักศึกษา 65302040002 นางสาวณัฐธิดา สุภารัตน์ รหัสประจำตัวนักศึกษา 65302040007 ครูที่ปรึกษา นางสาวณัฏฐาวรีย์เสือแก้ว ครูผู้สอน นางประภาพร ผิวเรืองนนท์ สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล ภาคเรียนที่ 1 ปีการศึกษา 2566 …………………………………………………………………………………………………..………………………………………… บทคัดย่อ โครงงานการสร้างเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร จัดทำขึ้นโดยมีวัตถุประสงค์ 1) เพื่อสร้างเว็บไซต์ขายสินค้าออนไลน์ของร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร 2) เพื่อเพิ่มช่องทางการ จำหน่ายสินค้าของร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร 3) เพื่อศึกษาความพึงพอใจของผู้ใช้บริการเว็บไซต์ร้าน เบเกอร์รี่บรรจุภัณฑ์มุกดาหาร กลุ่มตัวอย่างในการวิจัยครั้งนี้ จำนวน 361 คน ได้มาโดยวิธีการสุ่มตัวอย่าง แบบง่ายโดยใช้วิธีการประเมินแบบสอบถามออนไลน์เครื่องมือ ที่ใช้ในการวิจัยครั้งนี้ได้แก่ 1) แบบสอบถาม ความพึงพอใจของกลุ่มตัวอย่างที่มีคุณภาพเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร สถิติที่ใช้ในการวิจัยครั้งนี้ ได้แก่ ร้อยละค่าเฉลี่ย และส่วนเบี่ยงเบนมาตรฐาน (S.D.) จากผลการศึกษาการสร้างเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร นั้นได้พบว่าเว็บไซต์ร้าน เบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ที่คณะผู้วิจัยได้สร้างขึ้นสามารถเพิ่มช่องทางการขายสินค้าให้กับ ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร เนื่องจากทำให้มีเว็บไซต์ในการเผยแพร่ประชาสัมพันธ์ข้อมูลข่าวสาร และ การบริการจากทางร้านมีความสะดวกมากยิ่งขึ้น ผลการวิจัยพบว่าความพึงพอใจของผู้ใช้งานเว็บไซต์ขายสินค้าร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ภาพรวมระดับความพึงพอใจอยู่ในระดับดีมาก มีค่าเฉลี่ยเท่ากับ 4.66 ค่าเบี่ยงเบนมาตรฐาน เท่ากับ 0.52 ซึ่งสอดคล้องกับงานวิจัยของ นายรัชกฤช วรภิญโญภาส (2561) ผลการวิจัยพบว่า ช่วยลดขั้นตอนและความ ยุ่งยากเกี่ยวกับการซื้อขายสินค้าได้อย่างยอดเยี่ยม ระบบอีคอมเมิร์ซได้เข้ามาแทนที่วิธีการซื้อขายสินค้าใน รูปแบบเก่า ๆภายในระยะเวลาอันรวดเร็ว ในขณะเดียวกันบริษัทผู้พัฒนาซอฟต์แวร์ก็เร่งพัฒนาซอฟต์แวร์ให้มี ความสามารถในการสร้างเว็บไซต์ รวมทั้งสร้างระบบอีคอมเมิร์ซให้ง่ายต่อการใช้งานมากขึ้นลักษณะขั้นตอน การสั่งซื้อสินค้าจากเว็บไซต์ที่พบเห็นทั่ว

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

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

ฉ สารบัญ (ต่อ) เรื่อง หน้า บทที่ 3 วิธีการดำเนินงาน 36 3.1ประชากรและกลุ่มตัวอย่าง 36 3.2 เครื่องมือที่ใช้ในการพัฒนาระบบและการวิเคราะห์ข้อมูล 36 3.3 การเก็บรวบรวมข้อมูล 37 3.4 การวิเคราะห์ข้อมูล 38 3.5 ขั้นตอนการดำเนินงานสร้างเว็บไซต์ 38 บทที่ 4 ผลการพัฒนาระบบ / ผลการวิเคราะห์ข้อมูล 45 4.1 ผลการพัฒนาระบบ 45 4.2 ผลการวิเคราะห์ข้อมูล 52 บทที่ 5 สรุปผลการศึกษา อภิปรายผล และข้อเสนอแนะ 57 5.1 สรุปผลการศึกษา 57 5.2 อภิปรายผล 58 5.3 ข้อเสนอแนะ 58 บรรณานุกรม 59 ภาคผนวก 60 ภาคผนวก ก แบบนำเสนอเค้าโครงโครงงาน 61 ภาคผนวก ข รายงานการพบครูที่ปรึกษาโครงงาน 62 ภาคผนวก ค แบบประเมินคุณภาพ/ประสิทธิภาพ 63 ภาคผนวก ง ภาพขณะทำโครงงาน 64 ภาคผนวก จ การเผยแพร่/การนำไปใช้ 65 ภาคผนวก ฉ ตัวอย่างแบบประเมินความพึงพอใจ 66 ภาคผนวก ช หนังสือส่งมอบเว็บไซต์การจัดทำโครงงาน 67 ภาคผนวก ซ คำสั่งแต่งตั้งคณะกรรมการประเมินวิชาโครงงาน 68 ภาคผนวก ฌ หนังสือขอบคุณ 69 ภาคผนวก ญ ประวัติผู้จัดทำโครงงาน 70

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

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

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

ญ สารบัญรูปภาพ (ต่อ) รูปที่ หน้า รูปที่ 2.57 คลิก Create new Database เพื่อสร้างฐานข้อมูลใหม่ 33 รูปที่ 2.58 กำหนดรายละเอียดต่าง ๆ 33 รูปที่ 2.59 รายละเอียด 34 รูปที่ 2.60 เข้าสู่หน้าจอ Login 34 รูปที่ 3.1 แสดงแผนผังโครงสร้างการทำงานของเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร 39 รูปที่ 3.2 เป็นส่วนแสดงผล 39 รูปที่ 3.3 แสดง Context Diagram 40 รูปที่ 3.4 Process Decomposition Diagram เว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร 40 รูปที่ 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 48 รูปที่ 4.6 แสดงการทดสอบหน้าแรก Admin 49 รูปที่ 4.7 แสดงการทดสอบหน้าระบบสินค้าทั้งหมด 50 รูปที่ 4.8 แสดงการทดสอบหน้าจัดการประเภทสินค้าทั้งหมด 50 รูปที่ 4.9 แสดงการทดสอบหน้าคลังสินค้า 51

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

2 1.3 เป้าหมายและขอบเขตของโครงงาน 1.3.1 เป้าหมายของโครงงาน 1.3.1.1 เป้าหมายเชิงปริมาณ 1) เว็บไซต์ขายสินค้าออนไลน์ให้กับร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร จำนวน 1 เว็บไซต์ 1.3.2 เป้าหมายเชิงคุณภาพ 1.3.2.1 เพื่อเป็นสื่อกลางในการขายสินค้าออนไลน์ ผ่านระบบเครือข่ายอินเตอร์เน็ต 1.3.2.2 ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร มีการเผยแพร่ข้อมูลสินค้า อุปกรณ์ต่างๆทำให้เพิ่ม ปริมาณลูกค้ามากขึ้น 1.3.2.3 ผู้เข้าใช้งานเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร มีความพึงพอใจในการเข้าใช้งาน อยู่ในระดับมาก 1.3.3 ขอบเขตของโครงงาน 1.3.3.1 มีการแสดงผลหน้าหลัก (Home page) 1) มีการแสดงสินค้า 2) มีข้อมูลการติดต่อ 3) มีแผนที่ร้าน 1.3.3.2 ระบบจัดการสมาชิก (User) 1) มีระบบสมัครสมาชิกใหม่ 2) มีการเข้าสู่ระบบ Login 3) มีการแก้ไขข้อมูล 1.3.3.3 ระบบการสั่งซื้อ (Order) 1) มีระบบตะกร้าสินค้า 2) มีการคำนวณราคาสินค้าอัตโนมัติ 3) มีการแก้ไข หรือยกเลิกสินค้าในตะกร้าสินค้า 4) มีการยืนยันการสั่งสินค้า 5) มีการแสดงสถานการณ์สั่งซื้อสินค้า 1.3.3.4 ระบบการชำระเงิน (Payment) 1) มีวิธีการชำระเงินผ่านธนาคาร 2) มีช่องทางในการชำระเงิน 3) มีการเพิ่ม ลบ แก้ไข ค้นหาข้อมูลสมาชิกรายละเอียดสินค้า 4) มีระบบการส่งเสริมการขาย (Promotion) 5) มีระบบตรวจสอบสินค้าคงคลัง

3 1.4 แผนงานและระยะเวลาดำเนินการ ระยะเวลาการดำเนินงานเริ่มตั้งวันที่ 15 พฤษภาคม 2566 ถึงวันที่ 11 กันยายน 2566 ดังต่อไปนี้ แผนการดำเนินงาน ระยะเวลาดำเนินงาน (สัปดาห์ที่) พฤษภาคม มิถุนายน กรกฎาคม สิงหาคม กันยายน 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.1 ประวัติและความเป็นมาของเว็บไซต์ 2.1.1 เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจที่จัดทำขึ้น เพื่อนำเสนอข้อมูลต่างๆ ผ่านทาง คอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิงค์เพื่อให้สามารถ เปิดไปยังหน้าเพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www. (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่นั้น ก็มีทั้งเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบขึ้นอยู่กับความต้องการ นำเสนอ ของเจ้าของเว็บไซต์ การเรียกดูเว็บไซต์จะเรียกดูผ่านทางซอฟต์แวร์ในลักษณะของเบราว์เซอร์ 2.1.2 ประวัติและความเป็นมาของเว็บไซต์ ปิยวิท เจนกิจจาไพบูลย์ (2540) ได้กล่าวว่าเว็บไซต์ ถูกเรียกเป็นตำแหน่งที่อยู่ของผู้ที่มีเว็บเพจเป็นของตัวเองบนระบบอินเทอร์เน็ต ซึ่งได้ล้ว นก็สามารถ จัดทำเว็บเพจ และส่งให้ศูนย์บริการนำขึ้นไปไว้บนอินเทอร์เน็ตซึ่งถือว่ามีเว็บไซต์เป็นของตนเองแล้ว เว็บไซต์ คือแหล่งที่รวบรวมเว็บเพจจำนวนมากมายหลายหน้า เนื่องจากการทำงานบนเว็บจะไม่มีวันสิ้นสุด ทั้งนี้ เนื่องจากเราสามารถเปลี่ยนแปลงและเพิ่มสารสนเทศบนจากการลงทะเบียนกับผู้ให้บริการเช่าพื้นที่บนระบบ อินเทอร์เน็ตเมื่อลงทะเบียนในชื่อที่ต้องการเว็บไซต์ได้ตลอดเวลา (กิดานันท์ มลิทอง,2542) นิรุธ อำนวยศิลป์ (2542) กล่าวถึงเว็บไซต์ว่า เป็นชื่อเรียกHost หรือ Server ที่ได้จดทะเบียนอยู่ในเวิลด์ไวด์เว็บ ซึ่งก็คือชื่อชื่อ Host ที่ถูกกำหนดให้มีชื่อในเวิลด์ไวด์เว็บ และขึ้นต้นด้วย http และมีโดเมนหรือนามสกุลเป็น .com, .net, .org หรืออื่นๆ 2.1.3 ประเภทของเว็บไซต์ 2.1.3.1 เว็บไซต์ ประชาสัมพันธ์องค์กร (Corporate Website) จัดทำขึ้นเพื่อนำเสนอข้อมูลและ ข่าวสารสำหรับองค์กร 2.1.3.2 เว็บไซต์บริการหรือเว็บไซต์ชุมชน (Community & Service Website)จัดทำขึ้นเพื่อเป็น เครื่องมือในการสร้างชุมชน หรือให้บริการแก่ลูกค้าหรือลูกค้าหรือสมาชิกขององค์กรหรือบริษัทนั้น 2.1.3.3 เว็บไซต์จำหน่ายสินค้าหรือบริการออนไลน์(Ecommerce Website) จัดทำขึ้นเพื่อใช้ในการ ทำตลาดหรือขายสินค้าหรือบริการผ่านเว็บไซต์

5 2.1.3.4 เว็บไซต์นำเสนอสื่อผสม (Multimedia & Presentation Website) เว็บไซต์มีการนำเอา เทคโนโลยีใหม่ ๆ ที่ทันสมัยมาใช้ในการนำเสนอ เช่น ภาพเคลื่อนไหว, เสียง , ภาพวิดีโอ นำเสนอผ่านเว็บไซต์ 2.2 หลักการออกแบบและพัฒนาเว็บไซต์ 2.2.1 การวางโครงสร้างเว็บไซต์ 2.2.1.1 โครงสร้างแบบเรียงลำดับ (Sequential Structure ) คือ โครงสร้าง พื้นฐานหรือโครงสร้าง แบบลำดับขั้นตอนที่นิยมใช้กันทั่วไปเพราะง่ายต่อการจัดระบบข้อมูล รูปที่ 2.1 โครงสร้างแบบเรียงลำดับ 2.2.1.2 โครงสร้างแบบลำดับขั้น (Hierarchical Structure) คือ การจัดระบบโครงสร้างที่มีความ ซับซ้อนของข้อมูล โดยแบ่งเนื้อหาออกเป็นส่วนต่างๆ และมีรายละเอียดย่อย ๆ ในแต่ละเว็บเพจ รูปที่ 2.2 โครงสร้างแบบลำดับชั้น รูปที่ 2.3 โครงสร้างแบบตาราง 2.2.1.3 โครงสร้างแบบตาราง (Grid Structure) คือ การจัดระบบโครงสร้างมีความซับซ้อนมากกว่า โครงสร้างแบบลำดับขั้น โดยการออกแบบที่มีความยืดหยุ่น เพิ่มการเชื่อมโยงถึงกันได้ 2.2.1.4 โครงสร้างแบบใยแมงมุม (Web Structure ) คือ โครงสร้างที่มีความยืดหยุ่นมากที่สุด โดยหน้าเว็บเพจทุกหน้าสามารถเชื่อมโยงหากันได้ทั้งหมด รวมทั้งสามารถเชื่อมโยงไปเว็บไซต์หรือลิงค์ภายนอก

6 รูปที่ 2.4 โครงสร้างแบบใยแมงมุม ลักษณะการเชื่อมโยงในเว็บนั้น นอกเหนือจากการใช้ไฮเปอร์เท็กซ์หรือ ไฮเปอร์มีเดีย กับข้อความที่มีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้าแล้ว ยังสามารถใช้ลักษณะการเชื่อมโยงจาก รายการที่รวบรวมชื่อหรือหัวข้อของเนื้อหาแต่ละหน้าไว้ ซึ่งรายการนี้จะปรากฏอยู่ ในที่ บริเวณใดบริเวณหนึ่งในหน้าจอ ผู้ใช้สามารถคลิกที่หัวข้อใดหัวข้อหนึ่งในรายการเพื่อเลือก ที่จะเข้าไปสู่หน้า ใดๆ ก็ได้ตามความต้องการของผู้ใช้ ข้อดีของรูปแบบนี้คือง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บ โดยผู้ใช้สามารถกำหนดทิศทาง การเข้าสู่ เนื้อหาได้ด้วยตนเอง แต่ข้อเสียคือถ้าหากมีการเพิ่มเนื้อหาเข้ามาใหม่ ๆ อยู่เสมอนั้นจะเป็นการยาก ในการปรับปรุง นอกจากนี้การเชื่อมโยงระหว่างข้อมูลที่มีมากมายนั้นอาจจะทำให้ผู้ใช้เกิดการสับสน และเกิดปัญหาการคงค้างของหัวข้อ (Cognitive Overhead) ได้ 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 การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหาเป็นการออกแบบเว็บไซต์ที่เน้นการนำเสนอ เนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบ หน้าตา รูปแบบง่าย เช่น มีเมนู สารบัญ และเนื้อหา 2.2.3.2 การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้น ภาพกราฟิกที่ สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้ เวลาในการโหลดเว็บนาน 2.2.3.3 การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา เป็นการออกแบบเว็บที่นิยมในปัจจุบัน ซึ่งประกอบด้วยข้อความ รูปภาพ โดยมีการจัดองค์ประกอบต่าง ๆ เพื่อให้เว็บน่าสนใจ 2.2.4 องค์ประกอบของการออกแบบเว็บไซต์

7 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) นั้นถือเป็นส่วนประกอบที่มีความสำคัญต่อ เว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์ ระบบเนวิเกชั่น จึงเปรียบเสมือนป้าย บอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่ายใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อ ความหมาย ตำแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่ำเสมอ ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควร เพิ่มระบบ เนวิเกชั่น ที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอำนวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผล ภาพกราฟิก บนเว็บเบราเซอร์ 2.2.4.6 คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์(Visual Appeal) ลักษณะที่น่าสนใจของเว็บไซต์ นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสำคัญ แต่โดยรวมแล้วก็สามารถสรุปได้ว่า เว็บไซต์ที่น่าสนใจนั้น ส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได ให้เห็นชนิดตัวอักษร อ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น 2.2.4.7 ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การใช้งานของเว็บไซต์นั้นไม่ควร มีขอบจำกัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้ง โปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่แสดงผลได้ดีในทุกระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ 2.2.4.8 ความคงที่ในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์ มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสำคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก ต้องวางแผนเรียบ

8 เรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทำขึ้นอย่างง่าย ไม่มีมาตรฐานการออกแบบ และระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหาและทำ ให้ผู้ใช้หมดความเชื่อถือ 2.2.4.9 ความคงที่ของการทำงาน (Function Stability) ระบบการทำงานต่างๆ ในเว็บไซต์ควรมี ความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ เช่น ลิงค์ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพราะ เว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็นปัญหาที่สร้างความรำคาญกับผู้ใช้เป็นอย่างมาก 2.2.5 ขั้นตอนการสร้างเว็บไซต์ ขั้นตอนที่ 1 การวางแผนการจัดทำเว็บไซต์เป็นขั้นตอนแรกของการออกแบบเว็บเนื่องจากเราต้อง กำหนดชื่อเรื่อง เนื้อหา และรายละเอียดของเว็บที่เราจะจัดทำเพื่อให้เห็นมุมมองคร่าว ๆ ก่อนจะลงมือสร้าง เว็บไซต์ นอกจากนี้เรายังต้องทำการแบ่งเนื้อหาเป็นหมวดหมู่ต่างๆ ตามลำดับก่อน-หลัง เพื่อให้ง่ายต่อการ จัดทำโครงร่างของเว็บ ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ เป็นขั้นตอนในการกำหนดผังของเว็บ เพื่อให้ทราบ องค์ประกอบทั้งหมดของเว็บ ตัวอย่างดังรูป รูปที่ 2.5 โครงของเว็บไซต์ ขั้นตอนที่ 3 กำหนดการเชื่อมโยงระหว่างเว็บเพจ เป็นการกำหนดการเชื่อมโยงในแต่ละหน้าเว็บให้ สามารถเชื่อมโยงกลับไปกลับมระหว่างหน้าเว็บเพจต่าง ๆ ได้ จากตัวอย่างจะเห็นว่าหน้าindex.html สามารถ เชื่อมโยงไปยังหน้าต่าง ๆ ได้และแต่ละหน้าสามารถเชื่อมโยงกลับมายังหน้า index.html ได้ตัวอย่างดังรูป รูปที่ 2.6 การเชื่อมโยงเว็บเพจ ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์การสร้างโฟลเดอร์การสร้างโฟลเดอร์ให้สร้างเป็นชื่อ หน่วยงาน / เรื่องนั้น ๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 เช่น swt คือ โรงเรียนเสริมงามวิทยาคม จากนั้นข้างในโฟลเดอร์swt ให้เราสร้างโฟลเดอร์เก็บรูปภาพพื้นหลัง ไฟล์เสียง ไฟล์ วีดีโอ หรือโฟลเดอร์อื่นเป็นชื่อภาษาอังกฤษ เช่น pic คือโฟลเดอร์เก็บรูปภาพ, bg คือ โฟลเดอร์เก็บพื้นหลัง

9 เป็นต้น การตั้งชื่อไฟล์การตั้งชื่อไฟล์ให้ตั้งชื่อและนามสกุลไฟล์เป็น ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือ ผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง และตั้งชื่อ ไฟล์ให้ตรง กับเรื่องนั้น ๆ รูปที่ 2.7 การตั้งชื่อไฟล์ ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์ รูปที่ 2.8 การออกแบบเว็บเพจ ขั้นตอนที่ 6 การสร้างเว็บเพจ เมื่อจัดวางองค์ประกอบของเว็บแต่ละหน้าแล้ว ต่อไป คือ ขั้นตอน การเขียนเว็บด้วยโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละหน้าเว็บเพจนำเสนอ ข้อความ รูปภาพ วีดีโอ และเสียง ให้อยู่ในรูปแบบการที่ต้องการ รูปที่ 2.9 การเขียนโปรแกรมด้วยภาษา HTML ขั้นตอนที่ 7 การลงทะเบียนขอพื้นที่เว็บไซต์ เมื่อทำการออกแบบและสร้างเว็บไซต์ เสร็จแล้ว ขั้นตอนต่อไป คือ การเผยแพร่เว็บไซต์สู่โลกของอินเทอร์เน็ตให้คนอื่นเข้ามาเยี่ยมชม วิธีการ คือการนำเว็บไซต์ ไปฝากกับผู้ให้บริการพื้นที่เว็บไซต์ทั้งแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่ เว็บไซต์ฟรี ซึ่งวันนี้เราจะขอ แนะนำเว็บไซต์ที่ให้บริการฟรีพื้นที่ฝากเว็บ คือhttp://www.thcity.com

10 รูปที่ 2.10 การลงทะเบียนขอพื้นที่เว็บไซต์ ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์เมื่อเราทำการสมัครบริการพื้นที่ฝากเว็บแล้ว ขั้นตอน ต่อไป คือ การอัพโหลดไฟล์เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บซึ่งอาจจะทำ การอัพ โหลดผ่านเว็บ บราวเซอร์เว็บที่ให้บริการ หรือการอัพโหลดด้วยโปรแกรม เช่น CuteFTP, Filezilla, WS_FTP เป็นต้น เพื่อให้ ผู้คนได้เข้าเยี่ยมชมโดยสามารถดูในเว็บไซต์ของเราผ่านเครือข่าย อินเทอร์เน็ต รูปที่ 2.11 การอัพโหลดเว็บไซต์ 2.2.6 การใช้สี 2.2.6.1 สีฟ้าและสีน้ำเงิน ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม เอาการ เอางาน ละเอียด รอบคอบ สง่างาม มีศักดิ์ศรี สูงศักดิ์ เป็นระเบียบถ่อมตน สามารถลดความ ตื่นเต้น และช่วยทำให้มี สมาธิ แต่ถ้ามีสีน้ำเงินเข้มเกินไป ก็จะทำให้รู้สึกซึมเศร้าได้ 2.2.6.2 สีส้ม ให้ความรู้สึก เร่าร้อน ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุ่น ความคึกคะนอง การปลดปล่อย ความเปรี้ยว การระวัง เป็นสีที่เร้าความรู้สึก ปกติควรใช้แต่น้อยเมื่อ เทียบกับสีอื่น สังเกตว่าคนที่อยู่ในห้องสีส้มจะอยู่ได้ไม่นาน 2.2.6.3 สีเหลือง เป็นสีแห่งความเบิกบาน เร้าอารมณ์ และเรียกร้องความสนใจให้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง ความเบิกบานสดชื่น ชีวิตใหม่ ความสด ใหม่ความ สุกสว่าง การแผ่กระจายอำนาจบารมี 2.2.6.4 สีเขียว เป็นสีในวรรณะเย็น จะสร้างความรู้สึกเย็นสบาย ใช้เป็นสีที่ช่วย ผ่อนคลาย ความเครียดได้ ให้ความรู้สึก สงบ เงียบ ร่มรื่น ร่มเย็น การพักผ่อน การผ่อนคลาย ธรรมชาติ ความ ปลอดภัย ปกติ ความสุข ความสุขุม เยือกเย็น

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

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

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

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

15 ตารางที่ 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 ใช้ก็อปปี้รูปโดยอาศัยรูปภาพต้นฉบับ

16 ตารางที่ 2.1 ตารางอธิบายเครื่องมือTool ต่างๆ (ต่อ) สัญลักษณ์ ความหมาย Eraser Tool ใช้ลบรูปภาพหรือลบบางส่วนของพิกเซล และทำการเก็บส่วนต่างๆ เป็น State ต่างๆ ใน History Palette Magic Eraser Tool ใช้ลบรูปภาพบริเวณที่มีสีเดียวกันให้กลายเป็นพื้นที่โปร่งใส (Transparent) โดยการคลิกเพียงครั้งเดียว Background Eraser Tool ใช้ลบรูปภาพบางส่วนให้กลายเป็นพื้นที่โปร่งใสโดยการลากเมาส์ Gradient Tools ใช้เพื่อไล่สีระหว่างสีหลายๆ สี ในแบบต่างๆ Straight-line, Radial, Angle, Reflected และ Diamond 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

17 ตารางที่2.1 ตารางอธิบายเครื่องมือTool ต่างๆ (ต่อ) สัญลักษณ์ ความหมาย Eyedropper Tool ใช้ในการดูดสีจากรูปภาพเพื่อใช้เป็นต้นแบบของสีกับงานชิ้นอื่นๆ Measure Tool ใช้วัดระยะห่าง, ตำแหน่งและมุมองศาระหว่างภาพ Hand Tool ใช้เลื่อนภาพที่อยู่ในหน้าต่างเดียวกัน Zoom Tool ใช้ในการขยายและย่อส่วนการแสดงภาพบนหน้าจอ Art History Brush Tool ใช้ในการวาดรูป จาก State หรือ Snapshot ของรูปนี้โดยอาศัยรูปแบบของ Stoke ที่มีสไตล์หลากหลาย ช่วยให้สไตล์ ของภาพดูต่างออกไป 2.3.1.4 การเปิดไฟล์ภาพ (Open) 1) คลิกที่เมนูคำสั่ง File ที่แถบ Menu bar จากนั้นเลือกคำสั่ง Open รูปที่ 2.23 แสดงการเปิดไฟล์ภาพ (Open) 2) จะปรากฏ Dialog แสดงรายชื่อไฟล์ต่าง ๆ ดังภาพเพื่อเลือกไฟล์ที่ต้องการเปิดมาใช้งาน 3) คลิกเลือกไฟล์ที่ต้องการเปิดใช้งาน จากนั้นคลิกปุ่ม Open รูปที่ 2.24 แสดงการเปิดไฟล์ภาพ (Open)

18 2.3.1.5 การสร้างไฟล์ใหม่ (New) 1) คลิกที่เมนูคำสั่ง File ที่แถบ Menu bar จากนั้นเลือกคำสั่ง New รูปที่ 2.25 การสร้างไฟล์ใหม่ (New) 2) จะปรากฏ Dialog สำหรับกำหนดคุณสมบัติต่าง ๆ ของไฟล์ภาพ ดังนี้ รูปที่ 2.26 แสดงการกำหนดขนาดของกระดาษ - Name คือ ชื่อของชิ้นงาน สามารถกำหนดใหม่เองได้ชื่อนี้จะไประบุที่ชื่อไฟล์ต่อไป - Preset คือ ขนาดงานที่โปรแกรมกำหนดมาให้ ซึ่งมีหลากหลายขนาดหรือสามารถกำหนด เองจากช่อง Width และ Height ได้ - Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา)โดยกำหนดหน่วยและขนาดได้เอง - Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง)โดยกำหนดหน่วยและขนาดได้เอง - Resolution คือ ความละเอียดของภาพโดยใส่ตัวเลขค่าความละเอียดของภาพ เช่น งาน เว็บหรือรูปที่แสดงบนคอมพิวเตอร์เท่ากับ 72pixels/inch งานสิ่งพิมพ์เท่ากับ 150-200 pixels/inch - Color Mode คือ โหมดสีของภาพ ซึ่งประกอบไปด้วย โหมดสี Bitmap,Grayscale, RGB Color, CMYK Color, Lab Color - Background Contents คือ สีพื้นหลังของภาพ เมื่อเริ่มชิ้นงานใหม่ - White กำหนดให้สีพื้นหลังเป็นสีขาว - Background Color กำหนดให้สีพื้นหลังเป็นสีเดียวกับ Background - Transparent ไม่มีพื้นหลัง

19 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 เป็นต้น 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 ต่าง ๆ

20 5) Use Proof setup เก็บค่าโหมดสีที่จะใช้แสดงสีของภาพก่อนจะพิมพ์ 6) Thumbnail กำหนดให้ไฟล์ที่บันทึก (Save) สามารถแสดงภาพตัวอย่างใน Dialog ของ การเปิดไฟล์ 7) Use Lower Case Extension กำหนดให้นามสกุลไฟล์เป็นอักษรตัวเล็ก 8) หลังจากกำหนดคุณสมบัติต่าง ๆ ให้คลิกปุ่ม Save เพื่อบันทึกข้อมูล 2.3.1.8 การปรับค่าความสว่าง/ความคมชัด (Brightness/Contrast) การปรับ ความสว่างความมืด ของภาพ และการตัดกันของสีที่ชัดเจนขึ้นนั้น สามารถทำได้โดยใช้คำสั่ง Brightness/Contrast Original Brightness Contrast รูปที่ 2.29 แสดงการปรับค่าความสว่าง/ความคมชัด 2.3.2 ขั้นตอนการติดตั้งโปรแกรม Microsoft Word โปรแกรมไมโครซอฟต์เวิร์ด ซึ่งเป็นโปรแกรมประมวลผลคำแบบพิเศษช่วยให้สร้างเอกสารแบบมือ อาชีพอย่างมีประสิทธิภาพและประหยัด เช่นเหมาะกับงานด้านการพิมพ์เอกสาร ทุกชนิด สามารถพิมพ์เอกสาร ออกมาเป็นชุด ๆ ซึ่งเอกสารอาจเป็นจดหมาย บันทึกข้อความ รายงาน บทความ ประวัติย่อ และยังสามารถ ตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการพิมพ์เอกสารได้อย่างง่ายดาย สามารถตรวจสอบ สะกด คำและหลักไวยากรณ์ เพิ่มตาราง เพิ่มกราฟิก ในเอกสารได้อย่างง่ายดายหรือเพิ่มเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัดพิมพ์ด้วยคอมพิวเตอร์แบบตั้งโต๊ะ (Desktop Publishing) เพื่อสร้างโบชัวร์ (Brochures) ด้านสื่อโฆษณา(Advertisements) และจดหมายข่าว (Newsletters) ได้ด้วยโปรแกรม ประมวลผลคำ (Word Processor) 2.3.2.1 การติดตั้ง Microsoft Word มีขั้นตอน ดังนี้ 1) ในโฟลเดอร์ที่เก็บไฟล์ติดตั้ง Microsoft OfficeProfessionalPlus2010 Beta ให้ดับเบิลคลิกไฟล์ ProfessionalPlus.exe 2) ในหน้าเดอะล็อกบ็อกซ์ User Account Control (UAC) ให้คลิกContinue

21 รูปที่ 2.30 แสดงหน้าต่าง User Account Control 3) รอจนโปรแกรมเตรียมการเซ็ตออัพ ระบบแล้วเสร็จ จากนั้นในหน้า Read the Microsoft Software License Terms ให้เลือกเช็คบ็อกซ์หน้า I accept the terms in this agreement เสร็จแล้วคลิก Continue รูปที่ 2.31 แสดงหน้าต่าง Microsoft Software License Terms 4) ในหน้า Choose the installation you wantโปรแกรมจะให้เลือกว่าจะติดตั้งแบบ Default หรือทำการติดตั้งโดยปรับแต่งเอง ในที่นี้เลือก InstallNow เพื่อติดตั้งแบบ Default รูปที่ 2.32 แสดงหน้าต่าง Choose the installation

22 5) ในหน้าเดอะล็อกบ็อกซ์ Installation Progressรอจนการติดตั้งโปรแกรมแล้วเสร็จ รูปที่ 2.33 แสดงหน้าต่าง Installation Progress 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

23 รูปที่ 2.35 หน้าต่าง Office Professional Plus 2010 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

24 รูปที่ 2.36 เลือกภาษา 6) ยืนยันและดำเนินการติดตั้ง WordPress โดยคลิกที่ปุ่ม LetGo รูปที่ 2.37 ยืนยันโดยคลิกปุ่ม 7) ใส่รายละเอียดในการเชื่อมต่อกับ Database ของคุณที่สร้างไว้ เมื่อใส่ข้อมูล เรียบร้อยคลิกที่ปุ่ม submit รูปที่ 2.38 ใส่รายละเอียด 8) ใส่รายละเอียดเบื้องต้นสำหรับข้อมูลเว็บไซต์ และตั้งค่าของผู้ดูแลเว็บไซต์เมื่อใส่ ข้อมูลเรียบร้อยคลิกที่ปุ่ม install word press

25 รูปที่ 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) รูปที่ 2.40 คลิกที่ปุ่ม Download (64 bit) 2) ทำการติดตั้ง คลิก Next รูปที่ 2.41 ทำการติดตั้ง คลิก Next

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

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

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

29 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 ก่อนที่เราจะสามารถอัพโหลดไฟล์ไปยังเซิร์ฟเวอร์ได้นั้น เราต้องเชื่อมต่อกับเซิร์ฟเวอร์ให้ได้เสียก่อน โดยทำ ดังนี้

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

31 รูปที่ 2.52 จะพบกับโฟเดอร์ต่างๆ การอัพโหลดไฟล์แพ็กเกจและไฟล์ติดตั้งที่เราได้เตรียมเอาไว้ ให้ทำ ดังนี้ รูปที่ 2.53 การอัพโหลดไฟล์ ไฟล์แพ็กเกจและไฟล์ติดตั้งจะถูกอัพโหลดไปไว้ในเซิร์ฟเวอร์ของเราทันที

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

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

34 ไม่มีอะไรผิดพลาด ระบบจะนำมาที่หน้า ดังภาพ รูปที่ 2.59 รายละเอียด เข้าสู่หน้าจอ Login รูปที่ 2.60 เข้าสู่หน้าจอ Login 2.5 งานวิจัยที่ข้อง นายรัชกฤช วรภิญโญภาส (2561) การพัฒนาระบบอินเทอร์เน็ตให้สามารถซื้อขายสินค้าผ่านทางเว็บไซต์ที่ เรียกว่า การค้าอิเล็กทรอนิกส์หรืออีคอมเมิร์ซ (E-Commerce) ผลการวิจัยพบว่า ช่วยลดขั้นตอนและความ ยุ่งยากเกี่ยวกับการซื้อขายสินค้าได้อย่างยอดเยี่ยม ระบบอีคอมเมิร์ซได้เข้ามาแทนที่วิธีการซื้อขายสินค้าใน รูปแบบเก่า ๆภายในระยะเวลาอันรวดเร็ว ในขณะเดียวกันบริษัทผู้พัฒนาซอฟต์แวร์ก็เร่งพัฒนาซอฟต์แวร์ให้มี ความสามารถในการสร้างเว็บไซต์ รวมทั้งสร้างระบบอีคอมเมิร์ซให้ง่ายต่อการใช้งานมากขึ้นลักษณะขั้นตอน การสั่งซื้อสินค้าจากเว็บไซต์ที่พบเห็นทั่ว นพดล, เพ็ญประชุม (2564) การสร้างเว็บไซต์ส่วนงานเพื่อส่งเสริมทักษะด้านดิจิทัลสำหรับบุคลากรภาครัฐ ผลการวิจัยพบว่า มีคุณภาพอยู่ในระดับดี 2) ประเมินทักษะด้านดิจิทัลของบุคลากรภาครัฐระหว่างก่อนเรียน และหลังเรียน 3) ประเมินความพึงพอใจของบุคลากรภาครัฐที่มีต่อบทเรียนผ่านเครือข่ายอินเทอร์เน็ต กลุ่ม ตัวอย่างที่ใช้ในการวิจัยครั้งนี้ คือ บุคลากรภาครัฐ ได้มาโดยใช้วิธีการสุ่มอย่างง่ายด้วยวิธีจับสลากเลือกตัวแทน จากผู้ที่ดูแลเว็บไซต์ส่วนงานทั้งหมด จำนวน 30 คน เครื่องมือที่ใช้ในการวิจัยประกอบด้วย บทเรียนผ่าน เครือข่ายอินเทอร์เน็ต แบบประเมินคุณภาพด้านสื่อและด้านเนื้อหา แบบประเมินทักษะด้านดิจิทัล และแบบ

35 ประเมินความพึงพอใจ สถิติที่ใช้ในการวิจัย ได้แก่ ค่าเฉลี่ย ส่วนเบี่ยงเบนมาตรฐาน และ การทดสอบค่าทีของ กลุ่มตัวอย่างที่ไม่เป็นอิสระจากกัน ผลการวิจัยพบว่า 1) บทเรียนผ่านเครือข่ายอินเทอร์เน็ต มีคุณภาพด้านสื่อ อยู่ในระดับดี มีค่าเฉลี่ยเท่ากับ 4.39 และมีคุณภาพด้านเนื้อหาอยู่ในระดับดี มีค่าเฉลี่ยเท่ากับ 4.41 2) บุคลากร ภาครัฐ มีทักษะด้านดิจิทัลหลังเรียนสูงกว่าก่อนเรียน โดยมีคะแนนเฉลี่ยเท่ากับ 20.56/15.15 และการทดสอบ ค่าทีก่อนเรียนและหลังเรียนมีความแตกต่างกัน อย่างมีนัยสำคัญทางสถิติที่ระดับ .05 และ 03 บุคลากรภาครัฐ มีความพึงพอใจต่อบทเรียนอยู่ในระดับมาก มีค่าเฉลี่ยเท่ากับ 4.43 เมธาวี แก้วสนิท (2558) จากวิจัยสู่การวางแผนการประชาสัมพันธ์นั้นตอนหนึ่งในงานประชาสัมพันธ์ ที่นักประชาสัมพันธ์มักหลงลืมคือ “การวิจัย” ซึ่งหมายถึง การค้นคว้าหาความจริง ค้นพบอย่างเป็นระบบ ผ่านการวิเคราะห์อย่างมีหลักการ และสังเคราะห์ข้อมูลเพื่อนำไปใช้ประโยชน์สำหรับงานประชาสัมพันธ์ การวิจัยมีประโยชน์มากในการเป็นข้อมูลสำหรับการตัดสินใจ การวางแผน ตลอดจนการดำเนินงาน ประชาสัมพันธ์อย่างมีประสิทธิภาพ กัญญาณัฐ วงษ์ไพศาล (2563) การสร้างเว็บเพจที่จัดทำขึ้น เพื่อนำเสนอข้อมูลต่างๆผ่านทาง คอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ ทำหน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิงค์ เพื่อให้สามารถเปิดไปยังหน้าเพจต่างๆ ได้อย่างง่ายดายและถูกจัดไปไว้เก็บไว้ในwww. (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่นั้นก็มีทั้งเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและเสียค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการนำเสนอของเจ้าของ เว็บไซต์ การเรียกดูเว็บไซต์จะเรียกดูผ่านทางซอฟต์แวร์ ในลักษณะของเบราว์เซอร์ สมศักดิ์ คูหาสวรรค์เวช (2550) พัฒนาเว็บไซต์แบบมีส่วนร่วมเพื่อประชาสัมพันธ์ และสร้างโอกาสทาง การค้าของกลุ่มพัฒนาคุณภาพส้มโอ จังหวัดสมุทรสงคราม 2)สร้างกระบวนการเรียนรู้ แบบมีส่วนร่วมในการพัฒนา เว็บไซต์ของกลุ่มพัฒนาคุณภาพส้มโอ จังหวัดสมุทรสงคราม 3)ประเมินความพึง พอใจของกลุ่มลูกค้าและผู้เยี่ยมชมที่มีต่อเว็บไซต์ของกลุ่มพัฒนาคุณภาพส้มโอ จังหวัดสมุทรสงคราม โดยเก็บ ข้อมูลจากกลุ่มตัวอย่างที่เป็น ลูกค้าและผู้เยี่ยมชม จำนวน 385 ราย

บทที่3 วิธีการดำเนินงาน การจัดทำโครงงานการสร้างเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร มีวัตถุประสงค์คือ 1) เพื่อสร้างเว็บไซต์ขายสินค้าออนไลน์ของร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร 2) เพื่อเพิ่มช่องทางการจัด จำหน่ายสินค้าของร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร 3) เพื่อศึกษาความพึงพอใจของผู้ใช้บริการเว็บไซต์ ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร โดยมีวิธีการดำเนินงาน เป็นขั้นตอนต่าง ๆ ดังนี้ 3.1 ประชากรและกลุ่มตัวอย่าง 3.2 เครื่องมือที่ใช้ในการพัฒนาระบบและวิเคราะห์ข้อมูล 3.3 การเก็บรวบรวมข้อมูล 3.4 การวิเคราะห์ข้อมูล 3.5 ขั้นตอนการดำเนินงานสร้างเว็บไซต์ 3.1 ประชากรและกลุ่มตัวอย่าง 3.1.1 ประชากร ประชากรที่ใช้ในการศึกษาในครั้งนี้คือ ประชากรที่อาศัยอยู่ในตำบลมุกดาหาร จังหวัดมุกดาหาร จำนวน 5,574 คน 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

37 3.2.2 เครื่องมือการวิจัย/วิธีการวิเคราะห์ขอมูล 3.2.2.1 การสร้างเครื่องมือในการเก็บรวบรวมข้อมูล ในการศึกษาครั้งนี้ผู้ศึกษาได้ใช้แบบประเมิน ความพึงพอใจในการเข้าใช้งานเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ซึ่งสร้างขึ้นมาเป็นเครื่องมือ ในการเก็บรวบรวมข้อมูลเพื่อนำมาวิเคราะห์ โดยมีรายละเอียดการสร้างเครื่องมือ 3.2.2.2 การสร้างแบบประเมินความพึงพอใจ ในการสร้างแบบประเมินความพึงพอใจในการ ใช้บริการเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ให้ครอบคลุมเนื้อหาที่ต้องการศึกษา โดยออกแบบเป็น แบบมาตราส่วนประมาณค่า (Rating Scales) โดยใช้แบบประเมินความพึงพอใจในการเข้าใช้บริการเว็บไซต์ ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ที่ผ่านการประเมินความตรงเชิงโครงสร้างและเนื้อหาโดยแบบประเมินความ พึงพอใจที่ปรับปรุงนั้นได้ให้ผู้ตอบแบบประเมินความพึงพอใจแสดงความเห็นเกี่ยวกับความพึงพอใจ ในการใน การใช้บริการเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร โดยมีหลักเกณฑ์การให้คะแนนแบบประเมินความพึง พอใจในการเข้าใช้บริการ 5 ระดับ ดังนี้ 5 หมายถึง มีความพึงพอในในระดับ ดีมาก 4 หมายถึง มีความพึงพอใจในระดับ ดี 3 หมายถึง มีความพึงพอใจในระดับ ปานกลาง 2 หมายถึง มีความพึงพอใจในระดับ พอใช้ 1 หมายถึง มีความพึงพอใจในระดับ ปรับปรุง 3.2.2.3 สำหรับลักษณะของแบบประเมินความพึงพอใจในการเข้าใช้บริการเว็บไซต์ร้านเบเกอร์รี่ บรรจุภัณฑ์มุกดาหาร ที่ใช้ในการศึกษาแบ่งออกเป็น 3 ส่วน ดังนี้ ตอนที่ 1 ข้อมูลทั่วไป ตอนที่ 2 ข้อมูลความพึงพอใจในการเข้าใช้บริการเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ตอนที่ 3 ข้อเสนอแนะ 3.3 การเก็บรวบรวมข้อมูล นำเว็บไซต์ที่คณะผู้วิจัยได้จัดทำขึ้น เผยแพร่ผ่านเครือข่ายอินเทอร์เน็ตโดยใช้ชื่อโดเมนเมน (Domain name) http://bakerybanchuphan.com/ เพื่อใช้กับกลุ่มตัวอย่างที่เข้าใช้งานเว็บไซต์ ประเมินความพึง พอใจตามระยะเวลาที่กำหนด นำคะแนนผลการประเมินจากการตอบแบบสอบถามออนไลน์ ของผู้เข้าใช้ บริการเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร มาวิเคราะห์หาค่าเฉลี่ย และส่วนเบี่ยงเบนมาตรฐาน เพื่อ นำไปสรุปผลความพึงพอใจที่ได้จากการใช้งานเว็บไซต์ร้านเบเกอร์รี่บรรจุภัณฑ์มุกดาหาร ที่สร้างขึ้น