ระบบการจัดการร้านขายผลิตภัณฑ์เสริมความงามออนไลน์

38

ก. ปัญหาลูกค้า ลูกค้าไม่สะดวกในการเดินทางเพื่อมาซื้อสินค้า หรือ บางครั้งติดตามข่าวสารหรือ
โปรโมชนั่ ไม่ทัน

ข. ปัญหาสินค้า ในคลังบางคร้ังก็มีสินค้ามากเกินไป และบางสนิ ค้าใกล้จะหมดอายุ ทำให้เกิดความ
เสียหายแกเ่ จ้าของรา้ น หรอื บางครัง้ สนิ คา้ มากเกินไปทำให้สินคา้ ค้างสต็อก

ค. ปัญหาการจัดส่ง การจัดส่งมีความล่าช้าหรอื บางคร้ังจัดส่งสินค้าไปแลว้ ไม่มขี ้อความแจ้งเตือนไป
ยังลกู คา้ หรอื บางคร้ังลกู คา้ กรอกข้อมูลท่ีอยู่

ง. ปัญหาจากรายงาน สาเหตุไม่มีการทำรายงานที่เป็นระเบียบและรายงานทำบันทึกโดยการเขียน
โดยไมม่ ีการนำเทคโนโลยหี รอื โปรแกรมเข้ามาชว่ ย

3.4 การวิเคราะห์ความต้องการของผใู้ ช้งาน
จากการศึกษาและรวบรวมขอ้ มูลตามความต้องการของผใู้ ช้งาน เพือ่ ที่จะนาํ มาพัฒนาเวบ็ ไซตใ์ น

การจดั การข้อมูลรา้ นขายผลติ ภณั ฑ์เสริมความงามออนไลน์เพอ่ื ทีจ่ ะช่วยในการแก้ปญั หานี้ โดยจะมี
3.4.1 User requirement
ก. ลูกค้า
1) สามารถสมัครสมาชิกได้
2) สามารถเขา้ สูร่ ะบบได้
3) สามารถบันทกึ /แกไ้ ขขอ้ มลู รายละเอยี ดสว่ นตัวได้
4) สามารถเรียกดู ลบ แก้ไขรายการสินคา้ ที่สัง่ ซือ้ ได้
ข. ผจู้ ดั การรา้ น
1) สามารถเข้าสูร่ ะบบได้
2) สามารถจัดการข้อมูลผลติ ภณั ฑ์ เช่น ประเภทเครื่องสำอาง จำนวนสินค้าได้
3) สามารถออกรายงานได้ เช่น รายงานยอดการขายในแตล่ ะชว่ งเวลา สินค้าที่
ขายดีมากที่สุด
4) กำหนดการยกเลิกการส่ังสนิ คา้ เมอ่ื คา้ งชำระ
ค. ฝา่ ยบัญชี
1) ตรวจสอบการชำระเงนิ
2) ออกใบเสรจ็ รับเงิน/ใบกำกับภาษี
3) จดั ทำรายงานการขายสนิ ค้า

39

ง. ผ้ดู แู ลระบบ
1) สามารถเข้าสูร่ ะบบได้
2) สามารถจัดการข้อมูลผลิตภัณฑ์และประเภทผลิตภัณฑ์ได้ เช่น ประเภท

เครอ่ื งสำอาง จำนวนสินคา้ แตล่ ะผลิตภณั ฑ์
3) สามารถออกรายงานได้ เช่น รายงานยอดขายในแต่ละช่วงเวลา สนิ ค้าท่ีขาย

ดมี ากที่สุด
3.4.2 Functional requirement

1) ระบบแสดงสนิ คา้
2) ระบบเพ่มิ ลบ แกไ้ ข ขอ้ มูลส่วนตวั ขอ้ มลู สนิ ค้า
3) ระบบออกรายงาน
4) ระบบส่ังซ้อื สินคา้
3.4.3 Non-Functional requirement
1) การจองสินค้าล่วงหนา้
2) โปรโมชน่ั การขาย
3) การจดั สินคา้
3.4.4 Performance Requirement
1) ระบบมคี วามพรอ้ มใชง้ านได้ตลอดเวลา
2) มกี ารอพั เดทขอ้ มลู สินคา้ และการขายตลอดเวลา
3.4.5 Security Requirement
1) มกี ารสำรองการจัดเกบ็ ขอ้ มลู ของสนิ คา้
3.4.6 Cultural and political Requirement
รองรับภาษาไทย

40

บทท่ี 4
การออกแบบระบบ

4.1 สถาปัตยกรรมของระบบใหม่

ภาพที่ 4.1 สถาปตั ยกรรมระบบการจัดการรา้ นขายผลิตภัณฑ์เสริมความงามออนไลน์

จากภาพที่ 4.1 แสดงสถาปัตยกรรมของระบบการจัดการร้านขายผลิตภัณฑ์เสรมิ ความงาม
ออนไลน์ โดยมรี ายละเอยี ด 3 Layer ดังน้ี

Presentation layer เปน็ ส่วนท่ีผู้ใชง้ านทงั้ 4 กลุ่ม ต้องคีย์ข้อมูลต่างๆลงไปใน Server โดยผู้ใช้
แตล่ ะกลมุ่ จะต้องบนั ทึกข้อมูลดงั นี้

• ผู้จัดการร้านบันทกึ ข้อมลู สินค้า ข้อมลู ผ้จู ดั การรา้ น และ บันทกึ รายงาน

• ผ้ดู แู ลบันทกึ ข้อมลู ผ้ดู แู ลระบบ และข้อมูลการจัดส่ง

• พนักงานบัญชีบันทกึ ข้อมลู พนักงานบัญชีและข้อมูลการซื้อขาย

• ลกู ค้าบนั ทึกข้อมูลสมาชิก
Application layer นำข้อมูลจาก Presentation มาประมวลผลเพอื่ ทสี่ ง่ ไปยัง Data layer

โดยใน Application layer จะมีฟงั กช์ ั่นหลกั ๆ คอื การจัดการลกู คา้ จดั การสินคา้ รายงาน และการจัดส่ง
Data layer เปน็ ส่วนท่ีทำการจดั เกบ็ ข้อมูลทั้งหมดหรือขอ้ มลู ผู้ใช้งานทงั้ 4 กลมุ่ ไว้ในฐานข้อมลู รวมไป
ถึงการนำเขา้ ข้อมลู สนิ คา้ ด้วย Excel

41
4.2 การออกแบบกระบวนการ

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

ภาพที่ 4.2 แผนผงั การออกแบบกระบวนการ

42

4.3 แผนภาพบริบท (Context Diagram)
ระบบการจัดการร้านขายผลิตภัณฑ์เสริมความงามออนไลน์ สามารถวิเคราะห์และออกแบบ

แผนกระบวนการโดยใช้แผนลำดับข้นั ตอนกระบวนการ เพ่อื ให้สามารถเหน็ ภาพรวมต่างๆของระบบได้ ดัง
รูปภาพที่ 4.3

ภาพที่ 4.3 แผนภาพบรบิ ท (Context Diagram)
จากแผนภาพบริบทจะแสดงให้เห็นว่ามกี ารแบ่งกลุ่มผู้ใช้งานเป็น 4 กลุ่ม ผู้จัดการร้าน พนักงาน
บัญชี ผดู้ ูแลระบบ และลกู ค้า โดยกล่มุ ผู้ใช้แตล่ ะกลมุ่ จะมีสิทธิ์ในการใช้งานระบบทแี่ ตกต่างกนั ไป สามารถ
แบง่ ไดด้ ังน้ี
ก. ผู้จัดการรา้ นคา้

1) นำข้อมูลสว่ นตวั เขา้ ส่รู ะบบการใช้งาน
2) เรยี กดูรายการสินค้า
3) ออกรายงาน
4) นำขอ้ มลู รายงานการจัดส่งเข้าระบบ
5) นำข้อมลู รายงานจดั สง่ เข้าระบบ
ข. บัญชี
1) ตรวจสอบหลกั ฐานการชำระเงิน
2) เรียกดรู ายการชำระงิน
3) ออกรายงานการขาย รายงานผคู้ า้ งชำระเงนิ

43

ค. ผดู้ แู ลระบบ
1) นำขอ้ มูลส่วนตวั เข้าสู่ระบบการใชง้ าน
2) ออกรายงาน
3) ทำการจัดสง่ สนิ คา้
4) ทำการจัดสต๊อกสินค้า
5) ยืนยนั คำส่ังซื้อสนิ คา้

ง. ลูกคา้
1) นำข้อมูลสว่ นตัวเขา้ สู่ระบบการใช้งาน
2) เลอื ก เพ่ิม ลบ รายการสินคา้
3) บันทกึ รายการสินค้า
4) เรยี กดรู ายละเอยี ดการสง่ั ซอ้ื

44

Data Flow Diagram Level 0

ภาพท่ี 4.4 แผนภาพกระแสข้อมูล ระดบั ท่ี level 0

45

แผนภาพกระแสข้อมูล ระดับที่ level 0 ระบบการจัดการร้านขายผลิตภัณฑ์เสริมความงาม
ออนไลน์มีกระบวนการทำงานดังน้ี

ก. กระบวนการ 1 สมัครสมาชิก
กระบวนการนเี้ ป็นการทผ่ี ู้ใช้ต้องทำกรอกข้อมลู ส่วนตวั เบอรโ์ ทร ท่อี ยู่ อีเมล เพอ่ื ใช้ในการ

จดั สินคา้
ข. กระบวนการ 2 เขา้ สู่ระบบ

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

กระบวนการน้ีเปน็ กระบวนการสั่งซ้ือสนิ ค้าของลูกค้า เมอื่ เข้าส่รู ะบบเรียบร้อยแล้ว ลูกค้า
สามารถทำการสง่ั ซ้อื สนิ ค้า เพิ่ม และลบสนิ คา้ ได้
ง. กระบวนการ 4 จัดการสนิ ค้า

กระบวนการนี้เป็นกระบวนการดูแลสินค้าภายในร้าน โดยผู้จัดการจะจัดการเพิ่ม ลบ
แก้ไขข้อมลู สนิ คา้ และจำนวนสินคา้ กำหนดโปรโมช่นั สนิ คา้ และ แจง้ เตอื นสินคา้ ใกล้หมด
จ. กระบวนการ 5 การจัดส่งสินคา้

กระบวนการนี้เป็นกระบวนการที่จัดการแจ้งเตือนสินค้าให้แก่ลูกค้าสั่งซ้ือสินค้า เช่น แจ้ง
เตอื นเลขการจัดสง่ สินคา้ เป็นตน้
ฉ. กระบวนการ 6 การออกรายงาน

กระบวนการนี้เป็นกระบวนการจัดทำรายงานการขาย โดยจะมีรายงานการขายแต่ละ
ช่วงเวลา รายงานสนิ คา้ ขายดี และในสว่ นนีผ้ ู้จัดการร้านจะนำข้อมลู รายงานเขา้ ระบบ

46

Data Flow Diagram Level 1 Process 1 สมัครสมาขิก

ภาพที่ 4.5 แผนภาพกระแสข้อมูลระดบั Level 1 กระบวนการที่ 1

แผนภาพกระแสข้อมูลระดับ Level 1 กระบวนการที่ 1 มีขั้นตอนการทำงานภายในทั้งหมด 3
กระบวนการดงั นี้

ก. กระบวนการที่ 1.1 กรอกขอ้ มูลสมาชิก กระบวนการนี้เป็นการให้ลกู คา้ ทำการกรอกข้อมลู ส่วนตัว
ไดแ้ ก่ ช่อื -สกุล ทีอ่ ยู่ และอเี มล เพอ่ื ใช้ในการจดั ส่งสนิ คา้

ข. กระบวนการที่ 1.2 ตรวจสอบข้อมูล กระบวนการนี้เป็นกระบวนการตรวจสอบความถูกตอ้ งของ
ข้อมูล ถ้าข้อมูลถูกต้องลูกค้าสามารถลงทะเบียนสมัครสมาชิกสำเร็จ แต่ถ้าลงทะเบียนไม่สำเร็จ
ลูกค้าต้องกรอกข้อมูลใหม่

ค. กระบวนการที่ 1.3 บันทึกข้อมูล กระบวนการน้ีเป็นกระบวนการบนั ทกึ ข้อมลู ลงในระบบ เพื่อใช้
งานคร้งั ต่อไปโดยไมต่ อ้ งกรอกขอ้ มูลส่วนตวั ในคร้งั ถัดไป

47

Data Flow Diagram Level 1 Process 2 การเข้าส่รู ะบบ

ภาพท่ี 4.6 แผนภาพกระแสข้อมูลระดบั Level 1 กระบวนการท่ี 2

แผนภาพกระแสข้อมูลระดับ Level 1 กระบวนการที่ 2 มีขั้นตอนการทำงานภายในทั้งหมด 3
กระบวนการดงั น้ี

ก. กระบวนการที่ 2.1 การตรวจสอบข้อมูล กระบวนการนี้เป็นกระบวนการตรวจสอบความถูกตอ้ ง
ของผู้ใช้งาน ถ้าผู้ใช้งานกรอกชื่อผู้ใช้และรหัสผ่านถูกก็จะสามารถเข้าใช้งานได้ แต่ถ้าผู้ใช้งาน
กรอกขอ้ มูลผิดกไ็ ม่สามารถเข้าใชง้ านได้

ข. กระบวนการที่ 2.2 การเข้าสูร่ ะบบ กระบวนการน้ีเปน็ กระบวนการเริม่ ต้นการใช้งาน เมื่อลูกคา้
ตรวจสอบขอ้ มลู ผ่านแล้ว

ค. กระบวนการท่ี 2.3 แสดงข้อมูลเข้าสู่ระบบ กระบวนการนเี้ ป็นกระบวนการแสดงข้อมูลที่ลูกค้าได้
ทำการกรอกไว้ตัง้ แต่ตน้ เพื่อการใช้งาน

48

Data Flow Diagram Level 1 Process 3 การสั่งซอ้ื

ภาพที่ 4.7 แผนภาพกระแสข้อมูลระดบั Level 1 กระบวนการท่ี 3

แผนภาพกระแสข้อมูลระดับ Level 1 กระบวนการที่ 3 มีขั้นตอนการทำงานภายในทั้งหมด 3
กระบวนการดังน้ี

ก. กระบวนการที่ 3.1 เลือกซื้อสินค้า กระบวนการนี้เป็นกระบวนกรท่ีลูกค้าเลือกดูสินค้าที่ต้องการ
สงั่ ซอ้ื

ข. กระบวนการที่ 3.2 ยืนยันการสัง่ ซื้อสินค้า กระบวนการน้ีเป็นกระบวนการยืนยันการส่ังซื้อสินคา้
เมื่อลกู คา้ ทำการเลอื กสนิ คา้ เสรจ็ เรียบร้อยแลว้

ค. กระบวนการท่ี 3.3 บนั ทึกข้อมลู การส่ังซื้อ กระบวนการนีเ้ ป็นกระบวนการบนั ทึกข้อมูลการส่ังซื้อ
ไว้ในระบบ และแสดงรายการสง่ั ซ้ือของลูกท่บี ันทกึ ข้อมูลไว้ใหล้ กู คา้ ทราบ

49

Data Flow Diagram Level 1 Process 4 จดั การสนิ ค้า

ภาพที่ 4.8 แผนภาพกระแสข้อมลู ระดับ Level 1 กระบวนการท่ี 4

แผนภาพกระแสข้อมูลระดับ Level 1 กระบวนการที่ 4 มีขั้นตอนการทำงานภายในทั้งหมด 6
กระบวนการดงั นี้

ก. กระบวนการที่ 4.1 ค้นหาสนิ ค้า กระบวนการนเี้ ป็นกระบวนการค้นหาสนิ ค้าตามท่ีลกู ค้าต้องการ
ข. กระบวนการที่ 4.2 แก้ไขสถานะสินค้า กระบวนการนี้เป็นกระบวนการแก้ไขสถานะสินค้า เมื่อ

สนิ คา้ ประเภทน้ันหมดหรอื ล้นในการสต๊อกสินค้า
ค. กระบวนการที่ 4.3 เพิ่ม ลบ แก้ไข รายการสินค้า กระบวนการนี้เป็นกระบวนการแก้ไขข้อมูล

สินค้า โดยจะสามารถเพิม่ ลบ เอาจากรายการสนิ คา้ ตามทรี่ า้ นสต๊อกไว้
ง. กระบวนการที่ 4.4 แจ้งเตือนสนิ คา้ กระบวนนี้เป็นกระบวนการแจ้งเตือนสินคา้ ใกล้จะหมดไปยัง

ผูจ้ ัดการร้าน
จ. กระบวนการที่ 4.5 รายงาน กระบวนการนี้เป็นกระบวนการนำข้อมูลที่เกี่ยวข้องมาทำเป็น

รายงาน เพอ่ื ออกรายงานอกี ที
ฉ. กระบวนการที่ 4.6 แสดงข้อมลู การจัดการสินค้า กระบวนการนีเ้ ปน็ กระบวนการแสดงข้อมูลของ

สนิ คา้ ทีผ่ ู้จดั การร้านได้ทำการจดั การไว้

50

Data Flow Diagram Level 1 Process 5 การจัดส่ง

ภาพท่ี 4.9 แผนภาพกระแสข้อมลู ระดับ Level 1 กระบวนการท่ี 5

แผนภาพกระแสข้อมูลระดับ Level 1 กระบวนการที่ 5 มีขั้นตอนการทำงานภายใน
ทงั้ หมด 3 กระบวนการดงั น้ี

ก. กระบวนการที่ 5.1 ตรวจสอบข้อมูล กระบวนการนี้เป็นกระบวนการตรวจสอบความถูกต้องของ
ขอ้ มูลการจดั ส่ง

ข. กระบวนการที่ 5.2 ยืนยันข้อมูล กระบวนการนี้เป็นกระบวนการตรวจสอบข้อมูลอีกครั้ง เพื่อ
ความแน่ใจ ปอ้ งกันการเกดิ ความผิดพลาด

ค. กระบวนการที่ 5.3 แสดงข้อมูลการจัดส่ง กระบวนการนี้เป็นกระบวนการแสดงข้อมูลการจัดส่ง
สนิ ค้าใหแ้ กล่ ูกค้า

51

Data Flow Diagram Level 1 Process 6 ออกรายงาน

ภาพท่ี 4.10 แผนภาพกระแสข้อมลู ระดับ Level 1 กระบวนการท่ี 6

แผนภาพกระแสข้อมูลระดับ Level 1 กระบวนการที่ 6 มีขั้นตอนการทำงานภายใน
ทั้งหมด 3 กระบวนการดังน้ี

ก. กระบวนการที่ 6.1 รายงานแต่ละชว่ งการขาย กระบวนการนเี้ ป็นกระบวนการออกรายงานสินค้า
แตล่ ะช่วงการขาย

ข. กระบวนการที่ 6.2 สินค้าขายดี กระบวนการนี้เป็นกระบวนการออกรายงานสินค้าขายดีแต่ละ
ประเภท

ค. กระบวนการที่ 6.3 รายชื่อลูกค้า กระบวนการนี้เป็นกระบวนการแสดงรายชื่อลูกค้าที่ทำการ
สัง่ ซอ้ื สนิ คา้

52

4.4 การออกแบบฐานขอ้ มลู

ภาพที่ 4.11 การออกแบบฐานขอ้ มูล

53

4.5 พจนานุกรมการออกแบบฐานขอ้ มลู
ตารางท่ี 4.1 ตารางแสดงผลของผใู้ ช้

ลำดบั ชอ่ื คำอธิบาย รปู แบบ/ Key Not null ตัวอย่างข้อมลู

Attribute ขนาด

1 Username ชอื่ ผใู้ ช้ varchar PK Y Burutsakorn_43

2 Password รหัสผ่าน varchar Y 123456

3 Role ประเภทผใู้ ชง้ าน varchar Y พนกั งาน

4 ID รหสั ผใู้ ช้ int FK Y 1234

5 Start_Date วนั ทีเ่ รม่ิ ใช้งาน datetime Y 10/12/2564

6 End_Date วนั ทสี่ นิ้ สดุ การ datetime Y 20/12/2564

ใช้งาน

ตารางที่ 4.2 ตารางแสดงผลรายละเอยี ดของผู้ใช้

ลำดบั ชือ่ คำอธิบาย รูปแบบ/ Key Not null ตัวอย่างข้อมูล
PK
Attribute ขนาด Y 12345
Y Burutsakorn
1 ID รหสั ผู้ใช้ int
Y Saeton
2 First_name ชอ่ื varchar
Y 0812345679
3 Last_name นามสกลุ varchar Y 222 ม. 10 ต.

4 Tel เบอรโ์ ทร varchar ไทยบรุ ี อ.ทา่
5 Address ท่ีอยู่ varchar ศาลา จ.

นครศรธี รรมราช
8016o

54

ตารางท่ี 4.3 ตารางแสดงผลของสนิ ค้า Key Not null ตวั อย่างข้อมูล
PK
ลำดับ ช่อื Attribute คำอธบิ าย รปู แบบ/ Y 12345
ขนาด Y Products.jpg
Y แปง้ ฝุ่น
1 Products_ID รหัสสินคา้ int
2 Image รปู ภาพสินคา้ varchar Y 125.00
3 Details รายละเอียด varchar Y ของใช้
Y2
สินคา้
4 Price ราคาสินคา้ float
5 Type ประเภทสินค้า varchar
6 Quantity จำนวนสินคา้ varchar

ตารางที่ 4.4 ตารางแสดงผลประเภทสนิ ค้า รูปแบบ/ Key Not null ตัวอย่างข้อมูล
ขนาด PK
ลำดับ ชอื่ คำอธิบาย Y M12345
Attribute int Y ของใช้
varchar
1 Type_id รหสั ประเภท
2 Type_name ชอ่ื ประเภท

ตารางที่ 4.5 ตารางแสดงผลการสั่งซอื้ รปู แบบ/ Key Not null ตัวอยา่ งข้อมูล
ขนาด PK
ลำดับ ชื่อ คำอธิบาย int Y 12345
Attribute Y 24/08/64
date
1 Order_id รหัสส่งั ซือ้
2 Oder_Date วนั ทีส่ ัง่ ซอื้

55

ตารางท่ี 4.6 ตารางแสดงผลรายละเอยี ดการสั่งซื้อ

ลำดับ ชอ่ื Attribute คำอธิบาย รูปแบบ/ Key Not null ตวั อย่างข้อมูล

ขนาด

1 Product_id รหัสสนิ ค้า int PK Y 12345

2 Order_id รหสั สง่ั ซื้อ int FK Y 01234

3 Order_quantity จำนวนสนิ คา้ int 3

ตารางที่ 4.7 ตารางแสดงผลเกบ็ ข้อมูลธนาคาร

ลำดับ คำอธิบาย รปู แบบ/ Key Not null ตัวอย่างข้อมูล

ขนาด

1 b_name ชอื่ ธนาคาร varchar PK Y กรงุ ไทย

2 b_type ประเภท varchar Y ออมทรัพย์

ธนาคาร

3 b_number หมายเลข ชอื่ Y 7900453717

ธนาคาร Attribute

4 b_owner เจ้าของบัญชี varchar Y นางสาวดนุนชุ

ธนาคาร คงวัดใหม่

5 bn_name จงั หวัดที่ต้งั varchar Y กระบี่

ธนาคาร

6 b_logo โลโก้ธนาคาร varchar Y Krung

Thai.png

56
4.6 การออกแบบส่วนตดิ ตอ่ ผู้ใช้งาน (User Interface Design)

การออกแบบส่วนนำเข้า (Input Design) จะเปน็ การออกแบบสว่ นของการตดิ ต่อของผใู้ ช้งาน
4.6.1 การออกแบบหนา้ จอการเขา้ ส่รู ะบบ

ภาพท่ี 4.12 หนา้ จอการเข้าสู่ระบบ
เปน็ การออกแบบหนา้ จอท่ีสว่ นของผตู้ ดิ ต่อกับผ้ใู ช้งาน โดยผู้ทไ่ี ดใ้ ช้สทิ ธิ์ในการใช้งานระบบ มีทั้งหมด
3 กลุม่ ผ้ใู ช้งาน คือ ผดู้ แู ลระบบ (Admin), ลูกค้า และผ้จู ัดการรา้ น

58

4.6.2 การออกแบบหน้าจอการลงทะเบยี น

ภาพท่ี 4.13 หน้าจอการลงทะเบยี น

เป็นการออกแบบหน้าจอที่ส่วนของผู้ติดต่อกับโดยการเข้าสู่ระบบถ้าหากผูท้ ี่ไม่เป็นสมาชิก ต้องทํา
การลงทะเบยี นกอ่ นทีจ่ ะเข้าใช้งาน โดยที่ผู้ใชง้ านสามารถกดลงทะเบียนไดก้ ่อนที่จะทําการเข้าสู่ระบบ

ก. หน้าจอในส่วนของผู้ใช้งานจะมีการใช้งาน 2 กลุ่มใช้งาน คือ ผู้จัดการร้านและผู้ดูแลระบบ
(Admin)

58

4.6.3 หนา้ จอการหลักระบบการจัดการรา้ น

ภาพที่ 4.14 หน้าจอการหลักระบบการจัดการร้าน

เป็นการออกแบบหน้าจอเพื่อที่จะให้ผู้ดูแลระบบทําเลือกสิ่งที่ต้องจัดการภายในร้าน ได้แก่
ระบบจดั การสนิ ค้า ระบบจัดการสตอ๊ ก และระบบรายงานการขาย

59

4.6.4 หนา้ จอการสร้างสินคา้ หรือนำเขา้ ข้อมูลสนิ ค้า

ภาพท่ี 4.15 หนา้ จอการสรา้ งสนิ ค้า
เป็นการออกแบบหน้าจอเพื่อให้ผู้ดูแลระบบทำ การสร้างสินค้าโดยการกรอกข้อมูล หรือนำเข้า
ขอ้ มูล สนิ ค้าจากไฟล์ Excel

4.6.5 หน้าจอแสดงขอ้ มูลสนิ ค้าทส่ี ร้าง

ภาพท่ี 4.16 หน้าจอแสดงข้อมูลสนิ ค้าท่ีสรา้ ง
เป็นการออกแบบหนา้ จอเพื่อใหผ้ ดู้ ูแลระบบได้ทราบวา่ มขี ้อมลู สนิ คา้ ชน้ิ ไหนบา้ งที่มีการนำเข้าข้อมูลเรยี บร้อยแลว้

61

4.6.6 หนา้ แสดงการแกไ้ ขขอ้ มลู ของผ้ดู รู ะบบ

ภาพท่ี 4.17 หนา้ แสดงการแก้ไขข้อมูลของผู้ดรู ะบบ
เป็นการออกแบบหน้าจอเพือ่ ใหผ้ ู้ดแู ลระบบและผ้จู ดั การรา้ นได้ทำการแกไ้ ขข้อมลู ส่วนตัว

61

4.6.7 หนา้ จอแสดงรายงานการขาย

ภาพที่ 4.18 หนา้ จอแสดงรายงานการขาย

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

4.6.8 หนา้ จอออกรายงานการขาย

ภาพท่ี 4.19 หน้าจอออกรายงานการขาย
เป็นการออกแบบหน้าจอเพื่อให้ผู้จัดการร้านไดท้ ราบถึงยอดขายในแตล่ ะช่วงเวลา และสามารถ
Export ไฟล์ออกมาในรปู แบบ Excel ได้

62

ข. หนา้ จอในส่วนของผู้ใชง้ าน กลุ่มลูกค้า
4.6.9 หน้าจอหลกั แสดงขา่ วสารโปรโมชนั

ภาพที่ 4.20 หนา้ จอหลักแสดงขา่ วสารโปรโมชัน
เปน็ การออกแบบหนา้ จอเพ่ือให้ลุกค้าทราบวา่ ชว่ งน้ีหรือชว่ งเวลาท่จี ะมาถึงมีข่าวสารหรือโปรโมชัน

อะไรบา้ ง

63

4.6.10 หนา้ จอแสดงประเภทสินคา้

ภาพท่ี 4.21 หน้าจอแสดงประเภทสนิ ค้า
เปน็ การออกแบบเพ่ือให้ลกู ค้าไดท้ ราบและได้เลือกประเภทสนิ คา้ ทต่ี อ้ งการดหู รือเลือกซอ้ื

64

4.6.11 หนา้ จอแสดงสินคา้ ประเภทต่างๆ

ภาพท่ี 4.22 หนา้ จอแสดงสนิ คา้ ประเภทต่างๆ
เป็นการออกแบบเพอ่ื ใหล้ ูกค้าไดเ้ ลอื กซือ้ เลือกชม สนิ คา้ แตล่ ะประเภท

65

4.6.12 หนา้ จอแสดงรายละเอยี ดสนิ ค้า

ภาพท่ี 4.23 หน้าจอแสดงรายละเอยี ดสนิ ค้า

เป็นการออกแบบเพื่อให้ลูกค้าได้ทราบเมื่อกดเลือกสินค้าที่ต้องการ ว่าสินค้าที่เลือกนั้นมี
รายละเอียดอะไรบ้าง รวมไปถึงสามารถหยบิ ใสต่ ะกรา้ ไดใ้ นหน้าน้ี

66

4.6.13 แสดงตะกรา้ ของฉนั

ภาพท่ี 4.24 หนา้ จอแสดงตะกรา้ ของฉนั

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

67

4.6.14 หน้าจอแสดงขอ้ มลู การชำระเงนิ

ภาพที่ 4.25 หน้าจอแสดงขอ้ มลู การชำระเงิน
เป็นการออกแบบเพ่ือให้ลูกค้าทำการชำระเงินตามขอ้ มูลท่ีได้แสดง และทำการแนบหลักฐานใหก้ ับ

ทางร้าน

68

4.6.15 หนา้ จอแนบข้อมูลหลกั ฐานการชำระเงนิ

ภาพที่ 4.26 หนา้ จอแนบขอ้ มลู หลกั ฐานการชำระเงิน

เป็นการออกแบบเพื่อให้ลูกค้าได้ทำการแนบหลักฐานการชำระเงิน เมื่อมีการชำระเงินค่าสินค้า
เกดิ ข้นึ

69

4.6.16 หนา้ จอแสดงหลังจากแนบหลกั ฐานการชำระเงนิ

ภาพที่ 4.27 หน้าจอแสดงหลังจากแนบหลักฐานการชำระเงิน
เปน็ การออกแบบเพ่อื ใหล้ กู ค้าไดท้ ราบวา่ ระบบกำลงั ตรวจสอบหลักฐานการชำระเงนิ ทแี่ นบมา

70

4.6.17 หนา้ จอแสดงเมื่อตรวจสอบหลักฐานการชำระเงินสำเรจ็

ภาพที่ 4.28 หนา้ จอแสดงเม่ือตรวจสอบหลักฐานการชำระเงนิ สำเร็จ
เป็นการออกแบบเพอื่ ให้ลูกค้าไดท้ ราบว่าหลักฐานการชำระเงนิ ทางระบบไดต้ รวจสอบเสรจ็ สนิ้ แล้ว

71

4.6.18 หนา้ จอบัญชีของฉนั

ภาพที่ 4.29 หน้าจอบัญชขี องฉนั
เปน็ การออกแบบเพือ่ ให้ลกู คา้ สามารถแก้ไขข้อมูลส่วนตวั ของตวั เองได้

72

4.6.19 หนา้ จอตดิ ตามการจัดส่ง

ภาพท่ี 4.30 หนา้ จอตดิ ตามการจดั ส่ง

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

73

บทท่ี 5
การพฒั นาและทดสอบระบบ

5.1 การพฒั นาโปรแกรม
ระบบการจดั การร้านขายผลติ ภณั ฑเ์ สรมิ ความงามออนไลน์ ประกอบดว้ ยโครงสร้างของไฟลแ์ ละ

โฟลเดอร์ตา่ งๆ ดังนี้
5.1.1 โครงสร้างของไฟลโ์ ปรแกรม

ภาพที่ 5.1 โฟลเดอรข์ องระบบงานท่พี ัฒนา

74

ภาพที่ 5.2 รายละเอยี ดไฟล์ config
จากภาพที่ 5.2 ไฟล์ config เป็นไฟลท์ ่ีใชใ้ นการเรยี กใช้งานของฟงั กช์ นั ในระบบ

ภาพท่ี 5.3 รายละเอียดไฟล์ condb.php
จากภาพที่ 5.3 ไฟล์ condb.php เป็นไฟล์ท่รี ะบบต้องทำการเชอ่ื ม Database จะใชฐ้ านขอ้ มลู ช่ือ
shopping_cart.sql เพือ่ ทจ่ี ะเขา้ ถงึ ข้อมูลใน Database

75

ภาพท่ี 5.4 ไฟล์ Database
จากภาพท่ี 5.4 ไฟล์ Database เปน็ ไฟล์ทีเ่ ก็บรายละเอียดตารางข้อมลู

76
ภาพที่ 5.5 แสดงรายละเอียด index.php

77
ภาพที่ 5.6 ตัวอยา่ งแสดงหน้าผใู้ ชง้ าน

78
ภาพที่ 5.7 โฟลเดอร์ views กลมุ่ ผใู้ ชง้ าน admin

79

ตารางท่ี 5.1 โฟลเดอร์ views ตามกลุ่มผู้ใชง้ าน คือ admin

ชือ่ โฟลเดอร์ คำอธิบาย
bank_del_db.php ลบบญั ชีธนาคารออกจากฐานข้อมลู
bank_form_add.db.php เพมิ่ บัญชีธนาคารเขา้ ฐานข้อมูล
bank_form_add.php เพม่ิ บัญชธี นาคาร
bank_form_edit_db.php แก้ไขข้อมูลบญั ชีธนาคารในฐานข้อมลู
bank_form_edit.php แก้ไขข้อมูลบญั ชธี นาคาร
bank_list.php หน้าแสดงฟงั กช์ ันการจัดการบญั ชธี นาคาร
bank.php หน้าแสดงรายการธนาคารท้ังหมดในระบบ
footerjs.php เมนสู ว่ น footer
h.php แสดงเมนูหลกั ในสว่ นของ header
index.php หนา้ แสดงรายการหลัก
member_del_db.php ลบสมาชิกออกจากฐานขอ้ มลู
member_form_add_db.php เพ่มิ สมาชิกเข้าฐานข้อมลู
member_form_add.php เพม่ิ สมาชกิ
member_form_edit_db.php แกไ้ ขข้อมลู สมาชิกลงในฐานข้อมูล
member_form_edit.php แก้ไขข้อมูลสมาชกิ

member_list.php หน้าแสดงฟงั กช์ นั การจดั การสมาชกิ
member_profile_edit_db.php แก้ไขข้อมลู ส่วนตวั ของ admin ลงในฐานข้อมลู
member_profile_edit.php แกไ้ ขข้อมูลส่วนตัวของ admin
member_profile.php หน้าแสดงการแกไ้ ขข้อมูลสว่ นตวั ของ Admin
member.php หนา้ แสดงสมาชิกทงั้ หมดในระบบ
menu_l.php ตวั เลอื กเมนู

menutop.php สว่ น header ในการแกไ้ ขข้อมลู ส่วนตัวของ Admin
product_del_db.php ลบสนิ ค้าออกจากฐานข้อมูล
product_form_add_db.php เพิ่มสินคา้ เขา้ ฐานข้อมูล
order_del_db.php ลบข้อมลู การสง่ั ซื้อออกจากฐานข้อมูล
order_form_edit_db.php แกไ้ ขข้อมลู การสัง่ ซ้อื ลงในฐานข้อมลู
order_form_edit.php แก้ไขข้อมูลการส่ังซือ้

order_list.php หนา้ แสดงฟังก์ชันการสั่งซ้ือ

80

ตารางที่ 5.2 โฟลเดอร์ views ตามกลุ่มผ้ใู ช้งาน คือ admin (ต่อ)

order.php หน้าแสดงการจดั การคำส่ังซื้อท้ังหมดในระบบ
product_form_add.php เพิ่มสินค้า
product_form_edit_db.php แก้ไขข้อมูลสนิ ค้าลงในฐานขอ้ มลู
product_form_edit.php แกไ้ ขข้อมูลสนิ คา้
product_list.php หนา้ แสดงฟังก์ชนั รายการสินค้า
product.php หนา้ แสดงสนิ ค้าทง้ั หมดในระบบ
report.php หน้าแสดงรายงานทง้ั หมดในระบบ
report.php หนา้ แสดงรายงานแบบแผนภมู สิ รุปยอดการขาย
report1.php หน้าแสดงรายงานแบบตาราง
report2.php หน้าแสดงตัวเลอื กการเลือกวนั ท่ีตาราง
resetpass_admin_db.php เปลย่ี นรหัสผา่ นใหมเ่ ขา้ ฐานข้อมูล
resetpass_admin.php เปลีย่ นรหัสผ่าน
type_del_db.php ลบประเภทสินคา้ ออกจากฐานข้อมูล
type_form_add_db.php เพมิ่ ประเภทสินคา้ เขา้ ฐานข้อมลู
type_form_add.php เพ่มิ ประเภทสินคา้
type_form_edit_db.php แกไ้ ขประเภทสนิ คา้ ลงในฐานข้อมลู
type_form_edit.php แก้ไขประเภทสินค้า
type_list.php หนา้ แสดงประเภทสนิ ค้า
type.php หน้าแสดงการจัดการข้อมลู ประเภทสินคา้

81
ภาพที่ 5.8 โฟลเดอร์ view กลุ่มผ้ใู ช้งาน member

82

ตารางท่ี 5.3 อธบิ ายโฟลเดอร์ view กลุม่ ผ้ใู ชง้ าน member

ช่ือโฟลเดอร์ คำอธิบาย
cart.php เก็บฟังกช์ ั่นหลัก
clear.php จัดการคำสัง่ ซ้ือ
delete.php ลบคำสง่ั ซอ้ื
finish_order.php จดั เกบ็ ไฟล์คำส่งั ซ้ือท่ีสำเร็จ
h.php หนา้ แสดงส่วนของ Header
h1.php หนา้ แสดงส่วนของ Header ในสว่ นการแกไ้ ขข้อมูล
history.php หน้าแสดงประวัตกิ ารสง่ั ซอ้ื
index.php หน้าแสดง function หลกั
index1.php หนา้ แสดงรายการคำส่ังซื้อในตระกรา้
member_profile_edit.php แก้ไขข้อมลู สว่ นตวั ของ member
member_profile.php หน้าแสดงการแกไ้ ขข้อมลู สว่ นตวั ของ member
menutop.php สว่ น header ในการแกไ้ ขข้อมูลส่วนตวั ของ member
o_img.php ไฟลเ์ ก็บหลกั ฐานการชำระเงิน
pay2.php หนา้ แสดงรายละเอียดการชำระเงิน
Pay3.php หน้าแสดงการชำระเงินพร้อมแนบภาพการโอนเงิน
prd.php หน้าแสดงรายละเอียดของสนิ ค้า
profile.php หนา้ แสดงการแก้ไขข้อมูลสมาชิก
resetpass_admin_db.php จดั เก็บรหัสผา่ นใหม่ของ member
resetpass_admin.php แก้ไขรหสั ผา่ นของ member
save_checkout1.php เก็บรายละเอียดสัง่ ซ้ือ
view_order.php หน้าแสดงรายละเอยี ดการสั่งซ้อื
cheack_login.php หน้าแสดงการเข้าส่รู ะบบ
Condb.php ไฟลส์ ำหรบั การเช่ือมต่อฐานข้อมูล
Form_login.php แบบฟอรม์ ในการลืมรหสั ผา่ น
Logout.php ไฟล์สำหรับออกจากระบบไปยงั หนา้ หลกั
member_form_add_db.php เพ่มิ ข้อมลู สว่ นตัวของ memberลงในฐานข้อมูล
member_form_add.php เพิ่มข้อมลู ส่วนตัว
send_password.php ไฟล์สำหรบั การเกบ็ รหัสผ่าน

83

5.2 การตดิ ต้งั ระบบ

5.2.2 วธิ ีการดาวนโ์ หลด XMAPP สำหรบั Windows
1. ทำการดาวน์โหลด XMAPP สำหรบั Windows

ภาพที่ 5.9 ทำการดาวน์โหลด XMAPP สำหรับ Windows
2. ทำการตดิ ตั้ง คลิก Next

ภาพท่ี 5.10 ทำการติดตัง้ คลิก Next

84

3. ทำการเลือก Components ท่ีเราต้องการเลือก Apache / MySQL

ภาพที่ 5.11 ทำการเลือก Components ท่ตี อ้ งการ
4. เลอื ก Path ในการติดตั้ง XAMPP

ภาพท่ี 5.12 เลือก Path ในการตดิ ตัง้ XAMPP

85

5. คลิก Next

ภาพที่ 5.13 แสดงเมื่อกดยืนยนั Path ในการตดิ ตัง้
6. คลกิ Next

ภาพท่ี 5.14 แสดงเมื่อกดยนื ยัน Path ในการติดต้ังคลิก Next

86

7. รอทำการติดต้ัง

ภาพที่ 5.15 รอทำการตดิ ตัง้
8. ตดิ ตงั้ เรียบร้อย และทำการ Restart Computer 1 ครง้ั

ภาพที่ 5.16 ทำการติดตง้ั เรียบร้อย และทำการ Restart Computer 1 คร้งั

87
9. เขา้ Control Panel ของ XAMPP และทำการคลิก Start Apache และ MySQL ตามลำดบั

ภาพที่ 5.17 Control Panel ของ XAMPP และทำการคลิก Start Apache และ MySQL ตามลำดบั
10. เขา้ PhpMyAdmin และ localhost เพื่อสร้างฐานข้อมลู

ภาพท่ี 5.18 จำลองเข้า PhpMyAdmin และ localhost