00ภาคผนวก-ก

บทท่ี 2

ทฤษฎเี อกสารและงานวิจยั ท่เี ก่ยี วข้อง

2.1 ลักษณะการดำเนินงาน
2.1.1 ระบบงานเดมิ
ในรูปแบบเดิมที่เป็นอยู่เจ้าของธุรกิจมีการบริหารงานขายสินค้าร้านโชห่วย ในรูปแบบการ

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

2.1.2 ระบบงานใหม่
เวบ็ ไซต์ขายสนิ ค้าโชหว่ ยร้านป้ายุ คณะผจู้ ัดทำอํานวยความสะดวกให้กับลูกค้า ในให้บริการ

เกี่ยวกับทางด้านการเก็บบันทึกข้อมูลลูกค้า รายละเอียดสินค้า รายละเอียดการสั่งซื้อของการให้บริการ
ขายสินค้าร้านโชห่วยระบบขายสินค้าร้านโชห่วยออนไลน์นั้น มีการนำระบบขายสินค้าแบบออนไลน์มา
เป็น อีกหนึ่งช่องทางการจัดจำหน่ายสินค้าอีกทางเลือกกับผู้ประกอบการ ได้นำโปรแกรม vscode และ
xampp มาทำใน เวบ็ ไซตต์ รวจสอบข้อมูลบริกาลกู ค้า ประกอบดว้ ยฐานข้อมลู ทจ่ี ำเป็น ไดแ้ ก่ ข้อมูลสินค้า
ข้อมูลราคา ข้อมูลเบอร์ติดต่อเจ้าของร้าน เป็นต้น เพื่อให้ระบบงานมีความทันสมัยรวดเร็วในการสืบค้น
ขอ้ มูล มากขึ้น

2.1.2.1 ดา้ นการพนักงาน
2.1.2.2 ด้านลกู ค้าทัว่ ไป
2.1.2.3 ด้านขอ้ มูลลกู คา้ ท่เี ป็นสมาชกิ
2.1.2.4 ดา้ นข้อมูลรายละเอยี ดเว็บไซต์ขายสนิ ค้าออนไลน์

5

2.2 โปรแกรมเพ่ือพฒั นาระบบ
2.2.1 โปรแกรม Visual Studio Code
VS Code หรือ Visual Studio Code จากบริษัทไมโครซอฟต์ เป็นโปรแกรมประเภท

Editor ใช้ในการแก้ไขโค้ดที่มีขนาดเล็ก แต่มีประสิทธิภาพสูง เป็น OpenSource โปรแกรมจึงสามารถ
นำมาใช้งานได้โดยไม่มีค่าใช้จ่าย เหมาะสำหรับนักพัฒนาโปรแกรมที่ต้องการใช้งานหลายแพลตฟอร์ม
รองรับการใช้งานทั้งบน Windows,macOS และ Linux รองรับหลายภาษาทั้ง JavaScript, TypeScript
และ Node.js ในตัว และสามารถเชื่อมต่อกับ Git ได้ง่าย สามารถนำมาใช้งานได้ง่ายไม่ซับซ้อน มี
เครื่องมือและส่วนขยายต่าง ๆ ให้เลือกใช้มากมาย รองรับการเปิดใช้งานภาษาอื่น ๆ ทั้ง ภาษา C++ ,
C# , Java , Python , PHP หรือ Go สามารถปรับเปลี่ยน Themes ได้ มีส่วน Debugger และ
Commands เป็นตน้ ซ่งึ บทความนจี้ ะเปน็ การสอน วธิ ีการใช้งาน Visual Studio Code เบื้องตน้ มาเร่ิม
กันเละ

2.2.1.1 วิธีการ Download โปรแกรม Visual Studio Code โดยเข้าทาง Google
และค้นหาคำว ่า Visual Studio Code เลือก Download Visual Studio Code – Mac,
Linux, Windows

ภาพที่ 2.1 แสดงหน้าเข้า Google และค้นหา Visual Studio Code Download

6

2.2.1.2 หนา้ เว็บไซด์ Download Visual Studio Code

ภาพที่ 2.2 แสดงหนา้ Download แต่ละแพลตฟอรม์
2.2.1.3 คลิ๊ก Download ใน แพลตฟอรม์ Windows 8, 10, 11,

ภาพที่ 2.3 แสดงหนา้ Download โปแกรม Visual Studio Code ใน แพลตฟอร์ม Windows

7

2.2.1.4 โปรแกรม Visual Studio Code

ภาพท่ี 2.4 แสดงหนา้ Download โปรแกรม Visual Studio Code

2.2.1.5 หลงั จากที่ Download Visual Studio Code แล้ว ดบั เบลิ คลกิ ที่ตัว
โปรแกรม Visual Studio Code และดำเนนิ ขน้ั ตอนการติดตง้ั โปรแกรม Visual Studio Code

ภาพท่ี 2.5 แสดงขน้ั ตอนการตดิ ตงั้ โปรแกรม Visual Studio Code

8

2.2.1.6 วิธีการตดิ ตัง้ โปรแกรม Visual Studio Code เลอื ก Next >

ภาพท่ี 2.6 แสดงขน้ั ตอนการตดิ ต้งั โปรแกรม Visual Studio Code
2.2.1.7 การเขา้ ส่โู ปรแกรม Visual Studio Code เรม่ิ ต้นจากการคลิก

ภาพที่ 2.7 แสดงหนา้ ตา่ งแสดงการเข้าสู่โปรแกรม Visual Studio Code

9

2.2.1.8 เม่ือเข้าสโู่ ปรแกรมจะพบกบั หนา้ ต่างโปรแกรม Visual Studio Code
ลักษณะดังภาพ

ภาพที่ 2.8 แสดงหนา้ ตา่ งโปรแกรม Visual Studio Code
2.2.1.9 การสรา้ งโปรแกรม Visual Studio Code ลักษณะดังภาพ

ภาพที่ 2.9 แสดงหนา้ ตา่ งใช้คำสั่งรัด ใน Visual Studio Code

10

1) Ctrl+P เปดิ ไฟล์อยา่ งรวดเร็ว โดยการพมิ พช์ ่ือไฟล์ได้เลย
2) Ctrl+Shift+F คน้ หาคำแบบรวดเร็วในไฟล์ตา่ งๆ
3) Ctrl+Shift+P แสดงชุดคำส่งั ต่างๆ เช่น ค้นหาการตงั้ ค่าของ edtior ลอง พมิ พ์
color theme เพ่ือเปลย่ี น theme ของ editor
4) ลองใช้ฟอนต์ Menlo-Regular ติดตั้งลง Windows ก่อน แล้วตั้ค่าที่ User
Settings ดงั นี้ “editor.fontFamily”: “‘Menlo Regular’,Consolas,‘Courier New’,
monospace”,
5) Ctrl+B เปิด-ปิด Sidebar
6) ซ่อน แถบ Open Editors ใน EXPLORER ตั้งค่าที่ User Settings > มี ดงั นี้
“explorer.openEditors.visible”: 0,
7) ซอ่ น mini map ดา้ นขวา จะได้ดูสะอาดๆ ตั้งค่าท่ี User Settings > มี ดังนี้
“editor.minimap.enabled”: false,
8) สำหรบั คนทเี่ ขยี น PHP ให้ติดต้งั extensions phpintelephense และ php
9) ลองตดิ ตงั้ extension ช่ือวา่ snippet creator ไวส้ รา้ ง snippet
10) หากพิมพโ์ คด้ แลว้ เวลากด tab ตอ้ งการใชง้ าน snippet ดว้ ย ต้งั
คา่ ที่ User Settings ดังน“ี้ editor.tabCompletion”: true,
11) หากต้องการใช้ terminal เป็น git แทน powershell หรอื cmd กต็ ้ังค่าที่
User Settings ดังนี้ “terminal.integrated.shell.windows”:“terminal.integrated
shellArg .windows”: [ ”]
12) ใช้ Ctrl+K เพ่ือเคลียร์ข้อความใน terminal
13) จัดรูปแบบโค้ด ใช้ Shift+Alt+F
14) หากต้องการจัดรูปแบบโค้ดตอนบันทึก ไฟล์ คร้ังให้ต้ังค่า UserSettings
ดงั นี้ “editor.formatOnSave”: true
15) สำหรับคนทเ่ี ขยี น Vue.js ก็ใช้ extension ชื่อว่า Vetur
16) สำหรบั ใช้ Git แนะนำ extensions ช่ือว่า Git History และ GitLens
17) กด Alt คา้ งไว้แล้วคลกิ เมาสบ์ รรทัดน้ันๆ หากตอ้ งการใช้ multicursor
18) หากใครใช้ Sublime Text กใ็ ห้ตดิ ตง้ั extension ชือ่ วา่ Sublime
Text Keymap เพือ่ ใช้ keyboard shortcuts ทีค่ นุ้ เคยได้
19) หากต้องการแก้ไข keyboard shortcuts ให้ Ctrl+Shift+P แลว้ พมิ พ์คำ
ว่า Open Keyboard Shortcuts เพ่ือแกไ้ ข shortcuts ตา่ งๆตามต้องการ

11

2.2.2 โปรแกรม xampp
โปรแกรม xampp จะมาพร้อมกับ PHP ภาษาสำหรับพัฒนาเว็บแอพลิเคชั่นที่เป็นท่ี

นิยม , MySQL ฐานข้อมูล, Apache จะทำหน้าที่เป็นเว็บ เซิร์ฟเวอร์, Perl อีกทั้งยังมาพร้อมกับ
OpenSSL , phpMyadmin ระบบบริหารฐานข้อมูลที่พัฒนาโดย PHP เพื่อใช้เชื่อมต่อไปยังฐานข้อมูล
สนับสนนุ ฐานขอ้ มลู MySQL และ SQLite โปรแกรม xampp

2.2.2.1 วิธีการ Download โปรแกรม xampp โดยเข้าทาง Google และ ค้นหาคำว่า
xampp download เลือก Download XAMPP – Apache Friends

ภาพที่ 2.10 แสดงหน้าค้นหาโปรแกรม xampp

12

2.2.2.2 หนา้ เวบ็ ไซด์ Download xampp

ภาพที่ 2.11 แสดงหน้าเว็บ Download โปรแกรม xampp
2.2.2.3 โปรแกรม xampp

ภาพที่ 2.12 แสดงหน้า Download โปรแกรม xampp

13

2.2.2.4 หลงั จากท่ี Download xampp แลว้ ดบั เบิลคลิกที่ตัว โปรแกรม xampp
และดำเนินขน้ั ตอนการตดิ ต้ังโปรแกรม xampp เลือก Next >

ภาพที่ 2.13 แสดงขน้ั ตอนการตดิ ตง้ั โปรแกรม xampp
2.2.2.5 วิธกี ารตดิ ตง้ั โปรแกรม xampp เลอื ก Next >

ภาพท่ี 2.14 แสดงขน้ั ตอนการตดิ ตง้ั โปรแกรม xampp

14

2.2.2.6 การเขา้ สู่โปรแกรม xampp เร่ิมต้นจากการคลิก

ภาพท่ี 2.15 แสดงหนา้ ตา่ งแสดงการเขา้ สโู่ ปรแกรม xampp
2.2.2.7 เม่อื เขา้ สู่โปรแกรมจะพบกับหนา้ ต่างโปรแกรม xampp
ลักษณะดังภาพ

ภาพที่ 2.16 แสดงหน้าต่างโปรแกรม xampp

15

2.2.2.8 เปิด Browser แลว้ พิมพค์ ำว่า localhost/dashboard หรอื 127.0.0.1/
dashboard > ไปทห่ี น้า phpMyAdmin

ภาพท่ี 2.17 แสดงหนา้ Browser
2.2.2.9 หน้า Browser ของ xampp

ภาพที่ 2.18 แสดงหน้า Browser ของ phpMyAdmin

16

2.2.2.10 คลกิ ที่ New และไปท่ี Create database > ตงั้ ชอ่ื Database ให้ ตรงกับ ช่ือ
Folder wordpress > คลกิ ท่ี Create เราจะได้ Database

ภาพที่ 2.19 แสดงหนา้ ต่าง phpMyAdmin
2.2.2.11 ใสช่ ื่อ Database ทีเ่ ราได้สรา้ งขึ้น

ชื่อต้อง
ตรงกนั

ภาพท่ี 2.20 แสดงข้ันตอน Create database

17

2.3 ทฤษฎแี ละงานวจิ ยั ทเี่ กีย่ วข้อง
2.3.1 ทฤษฎีการออกแบบเว็บไซต์ขายสนิ คา้ โชหว่ ยรา้ นป้ายุ
การทํางานของ ระบบติดตามสถานะโครงการ เมื่อผู้ใช้ได้ร้องขอใช้เว็บไซต์จะส่งคําร้องไปท่ี

เครื่อง Server เครื่อง Server สงข้อมูลไปตรวจสอบที่ Database เมื่อได้ข้อมูลแล้ว Database จะสง
ข้อมูลกลับไปยังเครื่อง Server เครื่อง Server จะส่งข้อมูลไปยังผู้ใช้ เช่น ผู้ใช้ร้องขอเข้าใช้ระบบ ติดตาม
สถานะโครงการ เข้าสู่ระบบโดยการกรอกชื่อผู้ใช้ และรหัสผ่าน ข้อมูลที่ได้จะส่งไปเครื่อง Server เครื่อง
Server ส่งข้อมูลไปตรวจสอบที่ Database หากพบข้อมูลผู้ใช้งาน Database จะส่งข้อมูล กลับไปยัง
เครื่อง Server เครื่อง Server จะส่งข้อมูลไปยังผู้ใช้ให้สามารถเข้าใช้งานเว็บไซต์ Project Tracking
ระบบตดิ ตามสถานะโครงการ

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

2.3.1.2 องค์ประกอบของการออกแบบเว็บไซต์ การออกแบบเว็บไซต์ท่ีมีประสิทธิภาพ
น้นั ต้องคํานงึ ถึง องคป์ ระกอบสําคัญดงั ตอ่ ไปน้ี

1.) ความเรียบงา่ ย (Simplicity) หมายถึง การจํากัดองค์ประกอบเสริมให้เหลือ
เฉพาะ องค์ประกอบหลัก กลา่ วคือในการส่อื สารเน้อื หากบั ผู้ใช้นั้น เราตอ้ งเลือกเสนอส่ิง
ท่ีเรา ต้องการนาํ เสนอจริง ๆ ออกมาในสว่ นของกราฟกิ สสี นั ตัวอักษรภาพเคลื่อนไหว
ต้องเลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคําราญตอ
ผู้ใช้ตัวอย่างเว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเชน่
Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบง่าย
ไม่ ซบั ซ้อน และใชง้ านอย่างสะดวก

2.) ความสมํ่าเสมอ (Consistency) หมายถึง การสร้างความสมํ่าเสมอให้
เกดิ ข้นึ ตลอดท้ัง เวบ็ ไซต์ โดยอาจเลอื กใชร้ ปู แบบเดยี วกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้า
หากว่าแต่ละ หน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทําให้ผู้ใช้เกิด
ความสบั สนและ ไม่แน่ใจวา่ กําลงั อยู่ในเว็บไซต์เดมิ หรอื ไม่ เพราะฉะนั้นการออกแบบ
เว็บไซต์ในแตล่ ะ หน้าควรท่จี ะมรี ูปแบบ สไตล์ของกราฟิก ระบบเนวเิ กชั่น (Navigation)

และโทนสีทม่ี ี ความคลา้ ยคลึงกนั ตลอดท้ังเวบ็ ไซต์

18

3.) ความเป็นเอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ต้องคํานึงถึง
ลกั ษณะขององค์กร เปน็ หลัก เนือ่ งจากเว็บไซต์จะสะท้อนถงึ เอกลักษณ์และลักษณะของ
องค์กร การเลือกใช้ ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์
เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือก
สีสนั และกราฟิก มากมาย อาจทาํ ให้ผ้ใู ชค้ ิดวา่ เปน็ เวบ็ ไซต์ของสวนสนุกซ่ึงสง่ ผลต่อความ
เชอ่ื ถอื ของ องค์กรได้

4.) เนื้อหา (Useful Content) ถือเป็นสิ่งสําคัญที่สุดในเว็บไซต์ เนื้อหาใน
เว็บไซต์ต้องสมบูรณ์ และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้อง
เตรียมข้อมูลและเนื้อหาที่ ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สําคัญที่สุดคือ
เนื้อหาที่ทีมผู้พัฒนา สร้างสรรค์ขึ้นมาเอง และไม่ไปซํ้ากับเว็บอื่น เพราะจะถือเป็นสิ่งท่ี
ดึงดูดผู้ใช้ให้เข้ามา เว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ขอ้ มูลจากเวบ็ อืน่ ๆ มาเมื่อใดก็
ตามทผ่ี ใู้ ชท้ ราบว่า ข้อมลู น้นั มาจากเว็บใด ผูใ้ ช้ก็ไมจ่ าํ เปน็ ต้องกลบั มาใชง้ านลิงค์เหล่าน้ัน
อีก

5.) ระบบเนวิเกชั่น (User-Friendly Navigation) เป็นส่วนประกอบที่มี
ความสําคัญต่อเว็บไซต์ มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์
ระบบเนวิเกชั่นจึง เปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้
เข้าใจง่าย ใช้งานได้ สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย ตําแหน่งของการ
วางเนวเิ กชนั่ กค็ วรวางให้ สมาํ่ เสมอ เชน่ อย่ตู าํ แหนง่ บนสุดของทุกหนา้ เป็นต้น ซ่ึงถ้าจะ
ให้ดีเมื่อมีเนวิเกชั่นที่เป็น กราฟิกก็ควรเพิ่มระบบเนวิเกชั่นที่ไว้ส่วนล่างด้วย เพื่อช่วย
อํานวยความ สะดวกให้กับผู้ใช้ที่ยกเลกิ การแสดงผลภาพกราฟิกบนเวบ็ เบราเซอร์

6.) คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) ลักษณะที่
น่าสนใจของ เว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสําคัญ แต่โดยรวมแล้วก็
สามารถสรปุ ได้ ว่าเวบ็ ไซตท์ ีน่ า่ สนใจน้ันสว่ นประกอบตา่ ง ๆ ควรมคี ณุ ภาพ เช่น กราฟิก
ควรสมบูรณ์ไม่มี รอยหรือขอบขั้นบันได้ให้เห็น ชนิดตัวอักษรอ่านง่ายสบายตา มีการ
เลือกใชโ้ ทนสีทเ่ี ข้า กันอย่างสวยงาม เปน็ ตน้

7.) ความสะดวกของการใช้ในสภาพต่างๆ (Compatibility) การใช้งานของ
เว็บไซต์นั้นไม่ ควรมีขอบจํากัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมท่ี
หลากหลาย ไม่มี การบังคับให้ผูใ้ ช้ต้องตดิ ตัง้ โปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บ
บราวเซอร์ ควรเป็น เวบ็ ที่แสดงผลได้ดีในทกุ ระบบปฏิบตั ิการ สามารถแสดงผลไดใ้ นทกุ

19

8.) ความคงท่ีในการออกแบบ (Design Stability) ถ้าต้องการใหผ้ ใู้ ช้งานรู้สึกว่า
เว็บไซต์มี คุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสําคัญกับการออกแบบเว็บไซต์
เป็นอย่างมาก ต้องออกแบบวางแผนและเรยี บเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บท่ีจัดทํา
ขึ้นอย่างลวก ๆ ไม่มีมาตรฐานการออกแบบและระบบการจดั การข้อมูล ถ้ามีปัญหามาก
ข้ึนอาจส่งผลให้ เกิดปัญหาและทาํ ให้ผู้ใช้หมดความเชือ่ ถือ

9.) ความคงที่ของการทํางาน (Function Stability) ระบบการทํางานต่างๆ ใน
เว็บไซต์ควรมี ความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบ
อยู่เสมอ ตัวอย่างเช่น ลิงค์ต่างๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้
ถูกต้อง หรือไม่ เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจาก
ลงิ ค์ กค็ อื ลิงคข์ าด ซึง่ พบได้บ่อยเปน็ ปัญหาที่สรา้ งความราํ คาญกบั ผใู้ ช้เปน็ อยา่ งมาก
2.3.1.3 กาํ หนดเป้าหมายของเว็บไซต์
ข้นั ตอนแรกของการออกแบบเวบ็ ไซต์ คือการกาํ หนดเป้าหมายของเว็บไซต์ใหแ้ น่ชดั เสียก่อน เพื่อ
จะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายท่ีได้ต้งั เอาไว้ โดยทั่วไปมกั จะเขา้ ใจว่าการทําเวบ็ ไซต์
มีจุดมุ่งหมายเพื่อบริการข้อมูลของหน่วยงานหรอื องค์กรเท่านั้น แต่ในความเป็นจริงแล้วเวบ็ ไซต์
แต่ละแหง่ ก็จะมีเปา้ หมายของตนเองแตกต่างกนั ออกไป

2.3.1.4 กาํ หนดกลมุ่ ผใู้ ชเ้ ป้าหมาย
ผู้ออกแบบเว็บไซต์จําเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซต์ เพื่อที่จะได้
ตอบสนองความต้องการของผู้ใช้ได้อย่างชดั เจน ตัวอยา่ งเชน่ เวบ็ ไซตท์ ่ีมีกลุ่มผู้ใช้หลากหลาย เช่น
เซิรช์ เอ็นจนิ เวบ็ ทา่ และเว็บไดเรกทอรี่ แต่เว็บไซตส์ ว่ นใหญน่ ้นั จะตอบสนองความตอ้ งการเฉพาะ
กลุ่มเท่าน้ัน ไม่สําหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลาย
ได้ ในเวบ็ ไซตเ์ ดยี ว

2.3.1.5 ส่ิงทีผ่ ้ใู ช้ตอ้ งการจากเว็บ
หลังจากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลําดับต่อไปคือการออกแบบเว็บไซต์
เพื่อดงึ ดูดผใู้ ช้งานใหไ้ ด้นานทส่ี ุด ด้วยการสรา้ งสิ่งท่นี ่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว ส่ิงที่ผู้ใช้
คาดหวังจากการเขา้ ชมเว็บไซต์หนง่ึ ได้แก่

1.) ขอ้ มูลและการใช้งานที่เป็นประโยชน์
2.) ข่าวและข้อมลู ทนี่ า่ สนใจ
3.) การตอบสนองตอ่ ผ้ใู ช้
4.) ความบันเทิง ของฟรี

20

2.3.1.6 ขอ้ มลู หลกั ทค่ี วรมอี ยใู่ นเว็บไซต์
เมื่อเราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบ
เว็บไซต์ให้มีข้อมลู ที่ผู้ใชต้ ้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวงั จะได้รับเม่ือเขา้
ไปชมเวบ็ ไซต

1.) ข้อมลู เกี่ยวกับบรษิ ัท
2.) รายละเอียดของผลติ ภณั ฑ์
3.) ขา่ วความคืบหน้าและขา่ วจากสอ่ื มวลชน
4.) ข้อมูลในการติดต่อ

2.3.2 ทฤษฎี XAMPP
Xampp คอื โปรแกรม Apache web server ไวจ้ ำลอง web server เพือ่ ไวท้ ดสอบ สคริปหรือ
เว็บไซต์ในเครื่องของเรา โดยที่ไม่ต้องเชื่อมต่ออินเตอร์เน็ตและไม่ต้องมีค่าใช้จ่ายใดๆ ง่ายต่อการติดตั้ง
และใช้งานโปรแกรม Xampp จะมาพร้อมกับ PHP ภาษาสำหรับพัฒนาเว็บแอพลิเคชั่นที่เป็นที่นิยม ,
MySQL ฐานข้อมูล, Apache จะทำหน้าที่เป็นเว็บ เซิร์ฟเวอร์, Perl อีกทั้งยังมาพร้อมกับ OpenSSL ,
phpMyadmin ระบบบริหารฐานข้อมูลที่พัฒนาโดย PHP เพื่อใช้เชื่อมต่อไปยังฐานข้อมูล สนับสนุน
ฐานขอ้ มลู MySQL และ SQLite โปรแกรม Xampp จะอย่ใู นรปู แบบของไฟล์ Zip, tar, 7z หรือ exe
โปรแกรม Xampp อยู่ภายใต้ใบอนุญาตของ GNU General Public License แต่บางครั้งอาจจะมีการ
เปล่ยี นแปลงเร่อื งของลขิ สิทธ์ิในการใชง้ าน จึงควรตดิ ตามและตรวจสอบโปรแกรมดว้ ย

2.3.3 ทฤษฎี MY SQL
MySQL เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธโ์ อเพนซอรส์ บนพ้ืนฐานของ SQL ซง่ึ MySQL ได้รบั
การออกแบบและปรับให้เหมาะสมสำหรับเว็บแอปพลิเคชันและสามารถทำงานบนแพลตฟอร์มใดก็
ได้ MySQL ทำงานเป็นดาต้าเบสเซิร์ฟเวอร์ และอนุญาตให้ผู้ใช้หลายคนจัดการและสร้างฐานข้อมูล
จำนวนมาก มันเป็นองค์ประกอบสำคัญใน LAMP (LAMP ย่อมาจาก Linux, Apache, MySQL และ
PHP) เมื่อความต้องการใหม่และแตกต่างกันเกิดขึ้นกับอินเทอร์เน็ต MySQL กลายเป็นแพลตฟอร์ม
ทางเลือกสำหรับนักพัฒนาเว็บไซต์และเว็บแอปพลิเคชัน เนื่องจากได้รับการออกแบบมาเพื่อประมวลผล
การค้นหานับล้าน และในการติดตั้ง WordPress ส่วนใหญ่ใช้ LAMP stack เพราะเป็นโอเพ่นซอร์สและ
ทำงานร่วมกับ WordPress ได้อย่างราบรื่น MySQL เป็นตัวเลือกยอดนิยมสำหรับธุรกิจอีคอมเมิร์ซท่ี
ตอ้ งการจัดการการโอนเงนิ หลายครง้ั ซึ่งมคี วามยดื หยุ่นตามความต้องการตามคุณสมบัติหลักของ MySQL
ได้รับการพัฒนาให้มีความสามารถมากยิ่งขึ้น รองรับข้อมูลจำนวนมหาศาล สามารถใช้งานหลายผู้ใช้ได้
พรอ้ มๆ กนั (Multi-user) มีการออกแบบให้สามารถแตกงานออกเพ่ือช่วยการทำงานให้เร็วยิ่งขึ้น รองรับ
ข้อมูลจำนวนมหาศาลเพื่อช่วยการทำงานเร็วยิ่งขึ้น (Multi-threaded) วิธีและการเชื่อมต่อที่ดีขึ้น การ

21

กำหนดสิทธิและการรักษาความปลอดภัยของข้อมูลมีความรัดกุมน่าเชื่อถือยิ่งขึ้นเครื่องมือหรือโปรแกรม
สนบั สนุนท้งั ของตัวเองและของผู้พัฒนาอืน่ ๆ มมี ากยิง่ ขน้ึ นอกจากนนี้ส่ิงหน่งึ ที่สำคัญคือ “MySQL ได้รับ
การพัฒนาไปในแนวทางตามข้อกำหนดมาตรฐาน SQL ดังนั้น เราสามารถใช้คำสั่ง SQL ในการทำงาน
MySQL ได้” นักพัฒนาที่ใช้ SQL มาตรฐานอยู่แล้วไม่ต้องศึกษาคำสั่งเพิ่มเติม แต่อาจจะต้องเรียนรู้ถึง
รูปแบบและข้อจำกัดบางอยา่ งโดยเฉพาะ

2.3.4 ทฤษฎี JavaScript
JavaScript เป็นภาษาโปรแกรม (programming language) สำหรับการเขียนโปรแกรมบน
ระบบอินเทอร์เน็ต ที่กำลังได้รับความนิยมอย่างสูง Java JavaScript เป็น ภาษาสคริปต์เชิงวัตถุ ที่เรียก
กันว่า "สคริปต์" (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมี
การเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ซึ่งมีวิธีการทำงานในลักษณะ "แปลความและ
ดำเนินงานไปทีละคำสั่ง" (interpret) หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented
Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียน
ด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับ ภาษา HTML และ
ภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server) JavaScript ถูกพัฒนาข้ึน
โดย เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script
ออกมาพร้อมกับ Netscape Navigator2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire
ต่อมาเน็ตสเคปจึงได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถ
ตดิ ตอ่ ใช้งานกับภาษาจาวาได้ และไดป้ รบั ปรุง LiveScript ใหม่เมอ่ื ปี 2538 แลว้ ตัง้ ช่อื ใหมว่ ่า JavaScript
JavaScript สามารถทำให้ การสร้างเว็บเพจ มีลูกเล่น ต่างๆ มากมาย และยังสามารถโต้ตอบกับผู้ใช้ได้
อย่างทนั ที เชน่ การใชเ้ มาส์คลิก หรือ การกรอกข้อความในฟอร์ม เป็นต้น
2.3.5 ทฤษฎี phpMyAdmin
phpMyAdmin คอื โปรแกรมท่ีถูกพฒั นาโดยใช้ภาษา PHP เพื่อใช้ในการบรหิ ารจัดการฐานข้อมูล
Mysql แทนการคีย์คำสั่ง เนื่องจากถ้าเราจะใช้ฐานข้อมูลที่เป็น MySQL บางครั้งจะมีความลำบากและ
ยุ่งยากในการใช้งาน ดังนั้นจึงมีเครื่องมือในการจัดการฐานข้อมูล MySQL ขึ้นมาเพื่อให้สามารถจัดการ
DBMS ที่เป็น MySQL ได้ง่ายและสะดวกยิ่งขึ้น โดย phpMyAdmin ก็ถือเป็นเครื่องมือชนิดหนึ่งในการ
จัดการเป็นส่วนต่อประสานที่สร้างโดยภาษา PHP ซึ่งใช้จัดการฐานข้อมูล MySQL ผ่านเว็บเบราว์เซอร์
โดยสามารถที่จะทำการสร้างฐานข้อมูลใหม่ หรือทำการสร้าง TABLE ใหม่ๆ และยังมี function ที่ใช้
สำหรับการทดสอบ

22

2.3.6 ทฤษฏเี กีย่ วกับสี
2.3.6.1 แม่สีจิตวิทยาแม่สีดังกล่าวคือสีที่เราพบเห็นจะสามารถโน้มน้าวชวนให้รู้สึก

ตื่นเต้น โศกเศร้า โดยมากมักใช้ในการรักษาคนไข้ได้ เช่นโรคประสาท หรือโรคทางจิตแม่สี
จิตวทิ ยาสี 4 สี

2.3.6.2 แม่สีวิทยาศาสตร์แม่สีวิทยาศาสตร์เป็นสีที่เกิดจากการสร้างหรือประดิษฐ์ข้ึน
จากกระบวนการทางวทิ ยาศาสตร์เชน่ สขี องหลอดไฟสที ่ผี ่านแทง่ แกว้ ปริซมึ ท่เี กิดจากการสะท้อน
และการหกั เหของแสง แม่สใี นกลุ่มนปี้ ระกอบด้วย สแี สด สเี ขียวมรกต และสี

2.3.6.3 แม่สีศิลปะแม่สีศิลปะหรือบางครั้งเรียกว่า แม่สีวัตถุธาตุ หมายถึงสีที่ใช้ในการ
วาดภาพ หรือสร้างสรรค์ผลงานทางศิลปะทั่ว ๆ ไป ซึ่งเมื่อนำมาผสมกันในปริมาณต่าง ๆ ที่ต่าง
อัตราส่วนกันจะเกิดสีสันต่าง ๆ มากมายให้เราได้เลือกหรือนำมาใช้ใน การสร้างสรรค์ผลงานท่ี
สวยงามไดแ้ มส่ ีในกลมุ่ นปี้ ระกอบดว้ ย สีแดง สีเหลอื ง

2.3.6.4 แม่สี Primary Colorแม่สี คือ สีที่นำมาผสมกันแล้วทำให้เกิดสีใหม่ ที่มี
ลักษณะแตกต่างไปจากสเี ดมิ แม่สี มอื ยู่ 2 ชนดิ คือ

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

2) แม่สีวัตถุธาตุเป็นสีที่ได้มาจากธรรมชาติและจากกากสังเคราะห์โดย
กระบวนการทางเคมี มี 3 สี คือ สีแดง สีเหลือง และสีน้ำเงิน แม่สีวัตถุธาตุเป็นแม่สีที่
นำมาใช้งานกันอย่างกว้างขวาง ในวงการศิลปะวงการอุตสาหกรรม ฯลฯ แม่สีวัตถุธาตุ
เมื่อนำมาผสมกันตามหลักเกณฑ์จะทำให้เกิดวงจรสีซึ่งเป็นวงสีธรรมชาติ เกิดจากการ
ผสมกนั ของแมส่ วี ัตถธุ าตเุ ป็นสหี ลกั ท่ีใช้งานกนั ท่วั ไป
2.3.6.5 วงจรสี (Color Circle)

1) สีขน้ั ที่ 1 คอื แม่สี ไดแ้ ก่ สีแดง สเี หลือง สีน้ำเงนิ
2) สีขั้นที่ 2 คือ สีที่เกิดจากสีขั้นที่ 1 หรือแม่สีผสมกันในอตั ราส่วนที่เทา่ กัน
จะทำให้ เกดิ สีใหม่ 3 สี ไดแ้ ก่

2.1) สแี ดง ผสมกับสีเหลือง ไดส้ สี ม้
2.2) สแี ดง ผสมกับสนี ำ้ เงิน ไดส้ มี ่วง
2.3) สีเหลือง ผสมกับสนี ำ้ เงนิ ได้สีเขียว

23

3) สีขั้นที่ 3 คือ สีที่เกิดจากสีข้ันท่ี1ผสมกับสขี ั้นท่ี 2 ในอัตราส่วนที่เท่ากัน จะ
ได้สีอ่นื ๆ*อีก 6 สี คือ

3.1) สีแดง ผสมกับสีส้ม ไดส้ ีส้มแดง
3.2) สแี ดง ผสมกับสีม่วง ไดส้ ีม่วงแดง
3.3) สเี หลือง ผสมกับสีเขยี ว ได้สีเขียวเหลือง
3.4) สนี ้ำเงนิ ผสมกบั สเี ขยี ว ไดส้ เี ขียวน้ำเงนิ
3.5) สนี ำ้ เงิน ผสมกับสมี ว่ ง ได้สมี ว่ งน้ำเงิน
3.6) สีเหลอื ง ผสมกับสีส้ม ไดส้ สี ้มเหลอื ง
2.3.6.6 วรรณะของสคี ือสีท่ีใหค้ วามรสู้ กึ ร้อน-เย็น ในวงจรสีจะมสี รี ้อน 7 สี และสเี ย็น 7
สี ซึ่ง แบ่งที่ สีม่วงกับสีเหลือง ซึ่งเป็นได้ทั้งสองวรรณะสีตรงข้ามหรือสีตัดกัน หรือสีคู่ปฏิปักษ์
เป็นสีท่มี ีคา่ ความเขม้ ของสี ตัดกนั อยา่ งรุนแรง ในทางปฏบิ ัติไมน่ ิยมนำมาใช้ร่วมกัน เพราะจะทำ
ให้แตล่ ะสไี ม่สดใส เทา่ ท่ีควร การนำสตี รงขา้ มกันมาใชร้ ่วมกนั อาจกระทำไดด้ งั น้ี
1) มีพนื้ ที่ของสีหนง่ึ มาก อกี สหี นึ่งนอ้ ย
2) ผสมสอี ื่น ๆ ลงไปสสี ีใดสีหนึ่ง หรอื ทง้ั สองสี
3) ผสมสีตรงข้ามลงไปในสีทั้งสองสีสีกลาง คือ สีที่เข้าได้กับสีทุกสี สีกลางใน
วงจรสี มี*2*สี คอื สีน้ำตาล กับ สีเทาสีน้ำตาลเกิดจากสตี รงข้ามกันในวงจรสีผสมกัน ใน
อัตราส่วนที่เท่ากัน สีน้ำตาลมีคุณสมบัติสำคัญ คือ ใช้ผสมกับสีอื่นแล้วจะทำให้สีนั้นๆ
เข้มข้ึนโดยไม่เปลี่ยน แปลงค่าสี ถา้ ผสมมากๆ เขา้ ก็จะกลายเปน็ สีน้ำตาล*สเี ทา เกดิ จาก
สีทกุ สี ๆ สีในวงจรสผี สมกนั ในอัตราส่วนเทา่ กัน

24

2.3.7 งานวิจยั ท่ีเกีย่ วข้อง

นางสาวฉัตรทิพย์ สง่า และ นางสาวฆัมภิชา สันติสม (2563) ได้ศึกษาเกี่ยวกับการพัฒนาระบบ
สารสนเทศออนไลน์การเช่าชุดและเครื่องประดับ ผลการศึกษาพบว่า ระบบสามารถทำงานได้อย่าง
ถูกต้องและสอดคล้องตามความต้องการของลูกค้าและเจ้าของร้าน อีกทั้งการประเมินประสิทธิภาพของ
ระบบ 4 ด้าน คือ 1) ด้านการทำงานตามความต้องการของผู้ใช้งาน 2) ด้านการทำงานได้ตามหน้าที่ 3)
ด้านการรักษาความปลอดภัยของข้อมูลนั้น ระบบสามารถตอบสนองความต้องการในแต่ละด้านได้อย่าง
ครบถว้ น 4) ด้านความงา่ ยตอ่ การใช้งาน มีผลการประเมินอยใู่ นระดบั มากทีส่ ุด (ค่าเฉลีย่ = 4.5)

อภิวัฒน์ บุบผา (2562) ได้ศึกษาวิจัยเรื่อง “ เว็บไซต์ขายอุปกรณ์คอมพิวเตอร์ ร้าน Kitcenter”
วัตถปุ ระสงค์ของโครงงานเทคโนโลยสี ารสนเทศธรุ กิจฉบับนี้ เพอ่ื เป็นการให้ลูกค้าสามารถสง่ั ซ้ือสินค้าจาก
ร้าน Kit center ผ่านระบบอินเตอร์เน็ตได้ และผู้ดูแลสินค้าร้าน Kitcenter สามารถจัดการสินค้าภายใน
ร้านผ่านเว็บไซต์ได้ โดยมีจุดมุ่งหมายเพื่อเป็นการเพิ่มยอดขายสินค้าให้กับทางร้าน Kit center ด้วย
การศึกษาครั้งนผี้ ูจ้ ัดทําได้ศึกษาในส่วนระบบลูกค้า และระบบของผดู้ ูแลระบบ ซง่ึ ในระบบลูกค้าน้ัน ก่อน
ซื้อสินค้าต้องลงทะเบียนเป็นสมาชิกภายในร้านก่อนจึงสามารถสั่งซื้อสินค้าภายในร้านได้ส่วนระบบของ
ผู้ดูแลระบบ จะทําการเข้าไปเพิ่ม ลบ แก้ไข ข้อมูลสินค้าและรายการต่างๆ หรือทําการรับสินค้าเข้า และ
ออกรายงานที่มอี ย่ภู ายในระบบสนิ คา้ เชน่ รายงานสินค้า รายงานสินคา้ ที่ส่ังซอ้ื เป็นตน้

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

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