โครงงานเรื่องการสร้างเว็บไซต์ระบบร้านค้าออนไลน์

44

3.2.3 User Interface Design (การออกแบบสว่ นตดิ ต่อกบั ผ้ใู ช้)
3.2.3.1 Input Design (การออกแบบส่วนรบั ข้อมูล)
1) Input Design (การออกแบบ หนา้ แรก ของรา้ น)

เมนู Logo สินคา้
สง่ั ซื้อ รายละเอยี ด
- ประเภทสินคา้ รายงานขอ้ มูล
สนิ คา้ สินค้า
- xxxxxxx สั่งซื้อ รายละเอียด
- xxxxxxx
- xxxxxxx สินคา้

เขU้าsรeะrnบaบme

password

เข้า สมัคร ส่ังซ้ือ รายละเอยี ด สัง่ ซอ้ื รายละเอียด
สมาชิก
ระบบ

สนิ ค้า สนิ ค้า

ช่อื สนิ ค้า ค้นห สง่ั ซ้อื รายละเอียด สั่งซอื้ รายละเอยี ด
า

ข้อความดา้ นลา่ งของเว็บ

ภาพที่ 22 Input Design หน้าแรกของร้าน

รปู ที่ 18 การออกแบบ หนา้ แรก ของร้าน

2) Input Design (การออกแบบ หนา้ สมคั รสมาชิกใหม่) 45

Logo เรยี
กดู
เมนู สมคั รสมาชกิ

-- ปปรระเะภเทภสินทคสา้ ินคา้ Username :
Password :
-- xxxxxxxxxxxxxx ชอ่ื -สกลุ :
-- xxxxxxxxxxxxxx เพศ :
-- xxuxxxsxxexxrxxnxxaxme อายุ :
ทอ่ี ยู่ :
เขpU้าaรssะesบrwnบaomrde
เขา้ ระบบ

เข้า สมัคร
สมาชกิ
Pระaบssบword

เขา้ สมัคร

รชะอื่บบสนิ คา้ สมาชกิ คน้

หา

ชื่อสินค้า คน้ หา

คน้ หาสนิ ค้า

ภาพที่ 23 Input Design หนา้ การสมัครสมาชิกใหม่

เบอรโ์ ทร :
ขอ้ ความดา้ นลา่ งของเว็บ

อเี มล์ :

รูปที่ 19 การออกแบบ หนา้ สมัครสมาชกิ ใหม่

รปู ภาพ :

46

3) Input Design (การออกแบบ เขา้ ระบบของสมาชิก)

Logo

เมนู ขอ้ มูลสินคา้ สนิ คา้
- ประเภทสินคา้ สินค้า
สัง่ ซอ้ื รายละเอยี ด
- xxxxxxx สง่ั ซอื้ รายละเอียด
- xxxxxxx สนิ คา้
สนิ ค้า
-ยxxxนิxxxxดตี อ้ นรบั

คยณุินด:ีตxxอ้ xนxxรบั
คุณ : xxxxxx

- ชข้ออื่ มสูลกินารคสา้ั่งซื้อ สั่งซือ้ รายละเอียด สัง่ ซ้ือ รายละเอียด

- xxxxxxxxxxxxx ค้น สนิ คา้
- xxxxxxxxxxxxx หา
- xxxxxxxxxxxxx
- xxxxxxxxxxxxx สินค้า

สั่งซ้อื รายละเอียด สง่ั ซ้อื รายละเอียด

ภาพท่ี 24 Input Design หนา้ เขา้ ระบบของสมาชิก

ขอ้ ความดา้ นล่างของเว็บ

รปู ที่ 20 การออกแบบ เข้าระบบของสมาชกิ 46

47

4) Input Design (การออกแบบ การส่งั ซื้อสนิ ค้า)

เมนู Logo จานวน ราคา รวม
- ประเภทสนิ คา้
ข้อมูลการส่งั ซ้อื xxx xx xxx
- xxxxxxx xx xx xxx
รายการส่ังซือ้ xx xx xxx
- xยxินxxดxxตี xอ้ นรับ ลบ รายการสนิ คา้
- xคxxุณxxx:xxxxxxx xxx
xxxxxxx
- ข้อมลู การสง่ั ซ้ือ xxxxxxxxxxx ซือ้ สินคา้ เพ่มิ
xxxxxx
- xxxxxxxxxxxxx
- xxxxxxxxxxxxx รวมราคาทตี่ อ้ งชาระ
- xxxxxxxxxxxxx ส่งั ซอ้ื สนิ คา้
- xxxxxxxxxxxxx
ภาพท่ี 25 Input Design หนา้ การสัง่ ซอ้ื สนิ คา้

ขอ้ ความด้านลา่ งของเว็บ

รปู ท่ี 21 การออกแบบ การส่ังซื้อสินคา้

48

5) Input Design (การออกแบบ การยืนการสัง่ ซื้อสินคา้ )

Logo

เมนู ขอ้ มลู การสัง่ ซื้อ
- ประเภทสินคา้
รายการสั่งซ้อื
- xxxxxxx
- xxxxxxx รหัส รายการสนิ ค้า จานวน ราคา รวม
- xxxxxxx
xxx xxxxxxx xxx xx xxx
ยนิ ดตี ้อนรบั xxx xxxxxxxxxxx xx xx xxx
คุณ : xxxxxx xxx xxxxxx xx xx xxx
xxx
- ข้อมูลการสง่ั ซอ้ื รวมราคาที่ต้องชยาืนระยนั การ ย้อนกลบั
สัง่ ซ้อื
- xxxxxxxxxxxxx
- xxxxxxxxxxxxx ภาพที่ 26 Input Design หน้ายืนยนั การสั่งซื้อสนิ คา้
- xxxxxxxxxxxxx
- xxxxxxxxxxxxx ขอ้ ความด้านล่างของเวบ็

รปู ท่ี 22 การออกแบบ การยืนการส่งั ซ้อื สนิ ค้า

49

6) Input Design (การออกแบบ ใบสงั่ ซอื้ สินค้า)
ใบสัง่ ซ้ือสนิ ค้า

ขอ้ มูลผู้ซือ้ สนิ คา้
ชื่อ - สกลุ : xxxx xxxxx ท่อี ยู่ : xxxxxxx เบอร์โทร : xxxxxxx อีเมล์ : xxxx @ xxxxxxx. xxx

รหสั รายการสินค้า รายการสงั่ ซ้ือ จานวน ราคา รวม

ยนิ ดตี อ้ นรบั xxx xx xxx

xxx xxxxxxx xx xx xxx

xคxxณุ : xxxxxxxxxxxxxxxxx รหัส รายการสนิ ค้า จานวน ราคา รวม

xxx xxxxxx xx xx xxx
xxx xxxxxxx
รวxมxรxาคาทีต่ ้องชxxาระ xxxxxx
xxx xxxxxxxxxxx
xx xx xxx

xxx xxxxxx xx xx xxx

รวมราคาทต่ี อ้ งชาระ xxx

ยนื ยันการ ย้อนกลบั
ส่ังซื้อ

ภาพที่ 26 Input Design การออกแบบ ใบสง่ั ซื้อสินคา้
รปู ท่ี 23 การออกแบบ ใบสัง่ ซ้ือสนิ ค้า

50

7) Error Message Design (การออกแบบ Error Message)

ตารางท่ี 20 Error Message Design

การการะทา Error Message

สมคั รสมาชิก - คุณกรอก Username หรอื password ไม่
- กรอกรหัสผ่านไมถ่ กู ตอ้ ง ถกู ต้อง
- กรณุ ากรอกเบอรโ์ ทรศัพทเ์ ปน็ ตวั เลขใหถ้ ูกต้อง
- กรอกเบอร์โทรศัพทไ์ ม่ถูกด้วย ดว้ ย
- กรุณากรอกข้อมลู ให้ครบดว้ ย
- กรอกสมดุ เย่ียมไม่ถูกต้อง

ผู้ดแู ลระบบ - คณุ กรอก Username หรอื password ไมถ่ ูกต้อง
- กรอก User Name ไม่ถกู ตอ้ ง

51

บทท่ี 4
ผลการดาเนินงาน
4.1 ผลการออกแบบและพัฒนาโปรแกรม
4.1.1 User
1) สามารถสืบค้นข้อมูลสนิ ค้าตามประเภทของสินค้าและแสดงผลข้อมลู ทลี่ ูกคา้ ต้องการทราบ
2) สามารถสมัครเป็นสมาชิกเพื่อเลือกซือ้ สนิ คา้ ในรูปแบบของใบสงั่ ซอ้ื
3) สามารถดูรายละเอยี ดมุมมองสมาชกิ เชน่ รายการสินคา้ ท่ีอนุมัติ ,รายการสนิ ค้าที่ไม่อนมุ ัติ, ปรบั
ขอ้ มลู สมาชิกใหม,่ เปลี่ยนรหสั ผ่านใหม่
4) สามารถเรยี กดขู ้อมูลความถกู ต้องเก่ียวกับรา้ นประกอบการ
5) สามารถบอกเงื่อนไขวิธีการส่งั ซอื้ กับลูกคา้
6) สามรถสอบถามขอ้ มลู ทั้งทางตรงหรอื ฝากคาถามไวท้ ีห่ น้าเว็บ
4.1.2 Admin
1) สามารถเพ่มิ ,ลบ,แก้ไขข้อมูลสินคา้
2) สามารถเรยี กรายการสินคา้ ท่ีถกู สง่ั ซ้ือและรอการอนุมัติ
3) สามารถฝากคาตอบไวท้ ห่ี น้าเวบ็ และลบคาถามคาตอบออกจากเวบ็
4) สามารถเรยี กดูข้อมูลสมาชิก
4.2 ผลการทางานของโปรแกรม
โปรแกรมสามารถทางานได้ตามความต้องการที่ไดต้ ั้งเปา้ หมายไว้ แสดงขอ้ มูลต่างๆ ในฐานขอ้ มลู และ
ผ้ใู ช้(เจ้าของรา้ น) สามารถจัดการกบั ข้อมลู ไดด้ ว้ ยตนเอง จากรูปแบบของ Interface ทอี่ อกแบบให้ใชง้ านได้
งา่ ย
4.2 ผลจากการพฒั นาโปรแกรม
การใชง้ านโปรแกรมก็เหมอื นกับทเี่ ราเข้าไปเลือกสินค้าตามรา้ นคา้ หรือห้างสรรพสินคา้ ซงึ่ จะมีการ
เลอื กสินคา้ และทาการหยิบใส่ตะกร้าสินค้า หลงั จากท่ีไดส้ ินค้าทเี่ ราต้องการแลว้ ก็ทาการชาระเงนิ สินคา้ ที่ทา
การสงั่ ซือ้ ซึง่ ได้อธิบายข้ันตอนของการเขา้ ไปเลือกสินค้าและทาการสง่ั ซอ้ื สินค้าไวด้ ังนี้
4.2.1 หนา้ index.php (หนา้ หลกั ของระบบ)

รูปท่ี 24 แสดงหนา้ index.php (หนา้ หลกั ของระบบ)

52

4.2.2 หนา้ Member.php ให้กรอบข้อมูลเพ่ือสมัครเป็นสมาชิก

รปู ท่ี 25 แสดงหนา้ Member.php (เพ่ือกรอกข้อมลู สมาชกิ )
4.2.3 หน้า Member_Main.php แสดงเมนขู ้อมลู สมาชิก

รูปท่ี 26 แสดงหน้า Member_Main.php (แสดงรายการข้อมลู เกย่ี วกับสมาชิก)

53

4.2.4 หน้าแสดงการ Login สาหรับสมาชิก โดยจะให้ผูเ้ ข้าใชท้ าการ Login เข้าไปยงั ระบบเพื่อใช้
งานระบบ ดังภาพท่ี 4.2.3

รูปที่ 27 แสดงหน้า Login (เพอื่ เขา้ ใช้ระบบ)
4.2.5 หน้า Product.php (หน้าของสนิ ค้า)

รูปที่ 28 แสดงหน้า Product.php (หน้าของสนิ คา้ )

54

4.2.6 หน้า Product_Detail.php รายการทจี่ ะสนิ ค้าเลอื กซอ้ื

รปู ท่ี 29 แสดงหน้า Product_Detail.php (รายการที่จะสินคา้ เลือกซ้ือ)
4.2.7 หนา้ Order.php แสดงรายการสัง่ ซื้อ

รูปที่ 30 แสดงหนา้ Order.php (แสดงรายการสัง่ ซื้อ)

55

4.2.8 หนา้ save_order.php แสดงรายการสนิ คา้ ,ราคาสนิ คา้

รูปท่ี 31 หน้า save_order.php (แสดงรายการสนิ คา้ ,ราคาสนิ คา้ )
4.2.9 หน้า Ex_Order.php แสดงขอ้ มลู วิธีการสงั่ ซือ้

รปู ท่ี 32 แสดงหน้า Ex_Order.php (แสดงขอ้ มลู วธิ กี ารสั่งซ้ือ)
4.2.10 หน้า member_order1.php แสดงข้อมูลใบส่งั ซอ้ื สินคา้

56

รปู ท่ี 33 แสดงหน้า member_order1.php (แสดงข้อมลู ใบส่ังซ้อื สนิ ค้า)56
4.2.11 หนา้ Admin.php สาหรบั ผู้ดแู ลระบบ

รูปท่ี 34 แสดงหนา้ Admin.php ( สาหรับผดู้ ูแลระบบ)

57

4.2.13 หน้า Admin_Main.php แสดงเมนูการทางานของผดู้ ูแลระบบ

รูปท่ี 35 แสดงหน้า Admin_Main.php (แสดงเมนูการทางานของผู้ดแู ลระบบ)

58

บทท่ี 5
สรุปและขอ้ เสนอแนะ

5.1 สรปุ ผลการดาเนินงาน
การพัฒนาระบบการขายสินค้าออนไลน์ผ่านทางอินเตอร์เน็ต ระบบสามารถรองรับระบบการทางาน

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

5.1.1 User
1) สามารถสบื ค้นข้อมูลสนิ ค้าตามประเภทของสนิ ค้าและแสดงผลข้อมลู ทลี่ ูกค้าต้องการทราบ
2) สามารถสมัครเป็นสมาชิกเพ่ือเลอื กซ้ือสินคา้ ในรูปแบบของใบส่ังซอ้ื
3) สามารถดูรายละเอียดมุมมองสมาชิกเช่น รายการสนิ ค้าทอี่ นมุ ัติ ,รายการสนิ คา้ ท่ีไม่อนุมตั ,ิ ปรับข้อมูล
สมาชกิ ใหม,่ เปลย่ี นรหัสผา่ นใหม่
4) สามารถเรียกดูขอ้ มูลความถูกต้องเกย่ี วกับรา้ นประกอบการ
5) สามารถบอกเง่ือนไขวธิ ีการสั่งซื้อกบั ลูกคา้
6) สามรถสอบถามข้อมลู ท้ังทางตรงหรอื ฝากคาถามไว้ท่หี น้าเวบ็
5.1.2 Admin
1) สามารถเพ่ิม,ลบ,แกไ้ ขข้อมูลสินค้า
2) สามารถเรียกรายการสนิ ค้าทีถ่ ูกส่งั ซื้อและรอการอนมุ ตั ิ
3) สามารถฝากคาตอบไว้ทหี่ นา้ เว็บและลบคาถามคาตอบออกจากเว็บ
4) สามารถเรียกดูข้อมูลสมาชิก

ผลการทางานของโปรแกรม
โปรแกรมสามารถทางานไดต้ ามความต้องการทีไ่ ด้ต้ังเปา้ หมายไว้ แสดงขอ้ มลู ,บนั ทึกขอ้ มลู ตา่ งๆ ใน
ฐานขอ้ มูล และผู้ใช(้ เจ้าของร้าน)สามารถจัดการกับขอ้ มลู ไดด้ ้วยตนเอง จากระบบการทางานของโปรแกร

59

5.2 ปญั หา อุปสรรค และแนวทางการแก้ไขปญั หา
5.2.1 ปัญหาและอุปสรรคท่พี บ
1) ในการเตรียมเสนอหวั ข้อพิเศษของระบบการซือ้ -ขายออนไลนม์ ขี อบเขตที่เลก็
2) การทางานของระหวา่ งทาโปรแกรมมีความยากและมีความซับช้อน
3) ในบางครั้งการทาโปรเจคทาให้เกิดความทอ้ แท้
4) มหี ลายจุดท่ีต้องแก้ไขเมื่อที่ตอ้ งแก้ไขเม่ือเข้าพบอาจารย์ท่ีปรึกษา

5.2.2 แนวทางทจ่ี ะนามาแก้ไข

1) ปรับขนั้ ตอนการทางานในระบบให้มีขอบเขตที่กว้างมากข้นึ
2) เข้ารบั คาปรึกษาจากอาจารย์ทป่ี รึกษาในการแก้ไขปัญหาหรอื บางครัง้ กป็ รกึ ษาเพอ่ื นเกี่ยวกบั
ระบบนน้ั ๆ
3) พยายามศึกษาเก่ียวกบั การทาระบบงานและการทารูปเล่มจากอาจารยท์ ป่ี รกึ ษาและเพื่อน
4) พยายามแก้ไขจดุ ทผี่ ดิ ให้มีความถกู ตอ้ ง

5.3 ขอ้ จากดั ของโปรแกรมทพี่ ัฒนา
สาหรับผ้ทู ี่สนใจจะซ้อื สนิ คา้ จากระบบต้องสมัครเปน็ สมาชิกก่อน ในการสง่ั ซ้ือสินค้า,การชาระเงนิ ,การ

จัดสง่ สินค้าตอ้ งเปน็ ไปตามเง่ือนไขของทางรา้ น

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

กว้างมากขึน้ เจา้ ของร้านสามารถมีส่วนรว่ มในการใช้ระบบท่ีเตม็ รูปแบบต่อไป

60

เอกสารอา้ งอิง

ภาณุพงศ์ ปญั ญาดี. 2563. AppServ คอื อะไร?. (ออนไลน์).
https://www.appserv.org/th/%E0%B9%80%E0%B8%81%E0%B8%B5%E0%B9%8

8%E0%B8%A2%E0%B8%A7%E0%B8%81%E0%B8%B1%E0%B8%9A/

อดุลย์ ภูสติ ลิต. 27 ตุลาคม 2555. การสรา้ งเวบ็ ด้วยโปรแกรม MACROMEDIA DREAMWEAVER 8.(
ออนไลน)์

http://202.143.168.19/3640900093896/Dreamweaver8.doc

คณุ วิว ณฐั พร. 2557. โปรแกรม Adobe Photoshop CS3. (ออนไลน์).
https://viewnattapohn.wordpress.com/2015/06/06/%E0%B8%84%E0%B8%A7%

E0%B8%B2%E0%B8%A1%E0%B8%A3%E0

BRAIN. 26 สงิ หาคม 2560. โปรแกรม Photoscape คอื . (ออนไลน)์ .
https://www.bangkokbrain.com/blog/2017/08/%E0%B9%82%E0%B8%9B%E0%B8%A3

%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1-photoscape-
%E0%B8%84%E0%B8%B7%E0%B8%AD/
ครเู อ็กซ์ จกั รกฤษณ์. 2562. การเขยี นผังงาน (Flowchart). (ออนไลน์).

https://sites.google.com/a/muk.ac.th/programs/hlak-kar-kheiyn-flowchart

886301-ฐานขอ้ มูล โดย อ.ดร. โกเมศ อมั พวนั . การเขยี น Data Model. (ออนไลน์).
https://staff.informatics.buu.ac.th/~komate/886301/DB-Chapter-2.pdf

อมิตา คาพลิ า. 2561. การเขียน Process Model. (ออนไลน)์ .
https://sites.google.com/site/amitaoilysites/5-1baeb-calxng-krabwnkar

พรทิพย์ โต๊ะระหมาน.(2542). กฎของ Process. โครงการตาราวิชาการราชภัฏเฉลิมพระเกียรติ เน่ืองใน
วโรกาสพระบาทสมเดจ็ พระเจา้ อยู่หัวทรงพระเจริญพระชนมายุครบ 6 รอบ. สถาบนั ราชภัฏเพชรบรุ .ี

อาไพ พรประเสรฐิ สกลุ .(2544). กฎของ Data Store กรุงเทพฯ:ซเี อ็ดยเู คชนั่ .
Thai wear. 2 ตุลาคม 2564. Internet คืออะไร? และประวัติความเป็นมาของอินเทอรเ์ น็ต ใครเป็นผู้สร้าง

ขน้ึ มา?.
https://tips.thaiware.com/1711.html

KruPor Kaneungnit Chaloempong. แผนผงั ลาดับการทางาน(Flowchart). (ออนไลน)์ .
https://sites.google.com/site/porkaermbeuxngtn/home/3-1--kar-kheiyn-phang-ngan-

khxng-porkaerm

Panida Lapyingyong. แผนภาพการไหลของขอ้ มูล (Data Flow Diagram). (ออนไลน)์ .
https://sites.google.com/site/avafarmcrayfish/3-2-3-phaenphaph-krasae-kar-hil-khxng-

khxmul-radab-thi-1-data-flow-diagram-level-1

61

62