ระบบขายสินค้าออนไลน์ ประเภทสินค้าธานทิพย์โทรศัพท์

41 บทที่ 3 การออกแบบระบบงานด้วยคอมพิวเตอร์ 3.1 การออกแบบระบบงาน (FlowChart) รูปที่ 3.1 การออกแบบระบบงาน (FlowChart)

42 1. FlowChart (การสมัครสมาชิก) รูปที่ 3.2 FlowChart (การสมัครสมาชิก)

43 2. FlowChart (การเข้าสู่ระบบ) รูปที่ 3.3 FlowChart (การเข้าสู่ระบบ)

44 3. FlovwChart (การสั่งซื้อสินค้า) รูปที่ 3.4 FlowChart (การสั่งซื้อสินค้า)

45 3.2 การออกแบบแผนภาพบริบท (Context Diagram) รูปที่ 3.5 การออกแบบแผนภาพบริบท (Context Diagram)

46 3.3 การออกแบบแผนภาพกระแสการไหลข้อมูล (Data Flow Diagram) 1. Data Flow Diagram Level 0 รูปที่ 3.6 Data Flow Diagram Level 0

47 2. Data Flow Diagram Level 1 Process 1 รูปที่ 3.7 Data Flow Diagram Level 1 Process 1

48 3. Data Flow Diagram Level 1 Process 2 รูปที่ 3.8 Data Flow Diagram Level 1 Process 2

49 4. Data Flow Diagram Level 1 Process 3 รูปที่ 3.9 Data Flow Diagram Level 1 Process 3

50 5. Data Flow Diagram Level 1 Process 4 รูปที่ 3.10 Data Flow Diagram Level 1 Process 4

51 5. Data Flow Diagram Level 1 Process 5 รูปที่ 3.11 Data Flow Diagram Level 1 Process 5

52 5. Data Flow Diagram Level 1 Process 6 รูปที่ 3.12 Data Flow Diagram Level 1 Process 6

53 3.4 การออกแบบแผนภาพความสัมพันธ์ของข้อมูล (Entity Relationship Diagram) รูปที่ 3.13 การออกแบบแผนภาพความสัมพันธ์ของข้อมูล (Entity Relationship Diagram)

54 3.5 การออกแบบพจนานุกรมข้อมูล (Data Dictionary) 1. ตารางข้อมูลสมาชิก (tbl_Member) Field Name ชื่อฟิลด์ Type ชนิดของฟิลด์ Filed Side ขนาดของฟิลด์ Description ใช้เก็บข้อมูล หมายเหตุ mb_id varchar 5 รหัสสมาชิก PK mb_user varchar 15 ชื่อผู้ใช้ mb_pass varchar 15 รหัสผู้ใช้ mb_name varchar 50 ชื่อ-นามสกุล mb_add varchar 10 เพศ mb_tel varchar 10 เบอร์โทร ตารางที่ 3.1 ตารางข้อมูลสมาชิก 2.ตารางข้อมูลสินค้า (tbl_product) Field Name ชื่อฟิลด์ Type ชนิดของฟิลด์ Filed Side ขนาดของฟิลด์ Description ใช้เก็บข้อมูล หมายเหตุ pd_id int 5 รหัสสินค้า PK pd_name int 60 ชื่อสินค้า pd_detail varchar 90 รายระเอียดสินค้า pd_amount text 3 จ านวนสินค้า pd_ price int 7 ราคาสินค้า pd_picture mediumbiob - รูปภาพสินค้า ตารางที่ 3.2 ตารางข้อมูลสินค้า

55 3.ตารางข้อมูลประเภทสินค้า (CP_receipt) Field Name ชื่อฟิลด์ Type ชนิดของฟิลด์ Filed Side ขนาดของฟิลด์ Description ใช้เก็บข้อมูล หมายเหตุ rc_id varchar 5 เลขที่ใบเสร็จ FK mb_id varchar 5 รหัสสมาชิก FK rc_net Int 7 ยอดสุทธิ rc_date date 8 วันที่ช าระเงิน ตารางที่ 3.3 ตารางข้อมูลใบเสร็จ 4.ตารางข้อมูลรายละเอียดค าสั่งซื้อ (order_detail) Field Name ชื่อฟิลด์ Type ชนิดของฟิลด์ Filed Side ขนาดของฟิลด์ Description ใช้เก็บข้อมูล หมายเหตุ rc_id varchar 5 เลชที่ใบเสร็จ FK mb_id varchar 5 รหัสสมาชิก FK rp_amount int 3 จ านวน rp_total int 7 ยอดรวม ตารางที่ 3.4 ตารางข้อมูลรายละเอียดค าสั่งซื้อ

56 5.ตารางข้อมูลค าสั่งซื้อ (purchase_order) Field Name ชื่อฟิลด์ Type ชนิดของฟิลด์ Filed Side ขนาดของฟิลด์ Description ใช้เก็บข้อมูล หมายเหตุ rc_id Varchar 5 เลขที่ใบสั่งซื้อ PK mb_id Varchar 5 รหัสสมาชิก FK rc_net Int 7 สุทธิ rc_date Date 8 วันที่ช าระเงิน ตารางที่ 3.5 ตารางข้อมูลใบสั่งซื้อ 3.6 การออกแบบ Sitemap รูปที่3.14 การออกแบบ Sitemap

57 3.7 การออกแบบแผนภาพแนวความคิด (Story Board Design) รูปที่3.15 หน้าแรก รูปที่3.16 หน้าเข้าสู่ระบบ

58 รูปที่3.17 หน้าสินค้า รูปที่3.18 หน้าวิธีการสั่งซื้อสินค้า

59 รูปที่3.19 หน้าเกี่ยวกับเรา 3.8 การออกแบบสิ่งน าเข้า (Input Design) 1.รูปภาพประกอบสินค้า 2.รายละเอียดสินค้า 3.รายละเอียดสมาชิก 4.ชื่อผู้ใช้ และ รหัสผ่าน 5.หน้ายืนยันรายการค าสั่งซื้อ 3.9 การออกแบบสิ่งน าออก (Output Design) 1.แสดงออกทางหน้าจอคอมพิวเตอร์ คือ รูปแบบของเว็บไซต์ที่สมบูรณ์ 2.แสดงการค านวณราคาสินค้าออกทางจอภาพ 3.แสดงเกร็ดความรู้การใช้งานมือถือ 4.แสดงออกทางหน้าจอคอมพิวเตอร์ คือ การน าเสนอวิชาโครงงาน

บทที่ 4 การพัฒนาระบบการขายสินค้าออนไลน์ ประเภท ธารทิพย์โทรศัพท์ 4.1 เครื่องมือและอุปกรณ์ที่ใช้ 1. VGA Nvidia Geforce Rtx 3070 2. RAM HyperX Best RGB 32 GB 3. Window 10 Pro Version 21H2 4. CPU AMD RYZEN™ 7 5800X 3.8 GHz 5. SSD 500 GB SSD 2 TB 6. Monitor Display 1920 x 1080p Refresh Rate 240Hz 7. Flash Drive 16 GB 8. Printer Cannon 9. Mouse Logitech G Pro X Superlight 4.2 โปรแกรมทั้งหมดที่ใช้พัฒนา 1. โปรแกรม Adobe Photoshop CS6 ใช้ในการตัดต่อรูปภาพ 2. โปรแกรม Microsoft Visual Studio Code 2019 ใช้ในการออกแบบเว็บไซต์ 3. โปรแกรม Xampp ใช้ในการจ าลองเซิอร์ฟเวอร์ 4. Microsoft Office Word 2013 ใช้ในการพิมพ์เอกสาร

61 4.3 วิธีการติดตั้งโปรแกรม 1. ไปที่เว็บไซต์ Xampp แล้วดาวน์โหลด ก่อนโหลดต้องดูว่าเครื่องนั้นระบบปฎิบัติการอะไร จากนั้นให้เลือกเวอร์ชั่นที่ต้องการ รูปที่ 4.1 เข้าเว็บไซต์ดาวน์โหลด Xampp 2. โหลดจากเว็บเสร็จก็ให้เป็นไฟล์ดาว์โหลดโปรแกรมจากนั้นท าการคลิกที่ตัวดาวน์โหลด รูปที่ 4.2 ไฟล์ดาวน์โหลดตัว Xampp

62 3. หลังจากคลิกไฟล์ดาวน์โหลดแล้วจะขึ้นหน้าต่างแบบนี้มา ให้กด Next รูปที่ 4.3 หน้าต่างการติดตั้ง Xampp 4. พอคลิก Next จะขึ้นหน้านี้มาให้ท าการกด Next ต่อไป รูปที่ 4.4 หน้าต่างเลือกการท างานของ Xampp

63 5. หน้านี้จะให้เลือกที่อยู่ในการติดตั้งไม่ต้องไปปรับเปลี่ยนเพราะส่วนใหญ่นิยมติดตั้งที่ไดรฟ์ C เป็น หลัก ให้กด Next รูปที่ 4.5 หน้าต่างเลือกที่อยู่การติดตั้ง 6. ให้กด Next รูปที่ 4.6 หน้าต่างการเลือกภาษาการใช้งา

64 7. ให้กด Next รูปที่ 4.7 หน้าต่างบอกการพร้อมติดตั้ง 8. รอการดาวน์โหลดตัวโปรแกรม Xampp รูปที่ 4.8 หน้าต่างรอการดาวน์โหลดตัวโปรแกรม Xampp

65 9. พอโหลดเสร็จให้คลิก Finish รูปที่ 4.9 หน้าต่างการดาวน์โหลดเสร็จสิ้น 10. หน้าต่างการควบคุมท างานของโปรแกรม Xampp รูปที่ 4.10 หน้าต่างการควบคุมของโปรแกรม Xampp

66 11. ถ้าเปิดการใช้งานเลือก 2 ตัว บน คือ Apache และ Mysql แล้วกด Start ทั้ง 2 อัน รูปที่ 4.11 หน้าต่างการเปิดใช้งานโปรแกรม Xampp 12. ให้ท าการพิมพ์ช่อง URL ว่า 127.0.0.1 หรือ Localhost ก็ได้ รูปที่ 4.12 แสดงการเข้าโปรแกรม Xampp 13. ให้คลิกที่ค าว่า phpMyAdmin

67 รูปที่ 4.13 หน้าต่างของส่วน phpMyAdmin 4.4 วิธีการน าไปใช้งาน รูปที่4.14 ถ้าต้องการไปที่หน้าหลักพิมพ์ช่อง URL ดังนี้ https://tarnthipphone.000webhostapp.com/

68 รูปที่ 4.15 แสดงหน้าเข้าสู่ระบบของสมาชิก รูปที่ 4.16 แสดงหน้าสมัครสมาชิก

69 รูปที่ 4.17 แสดงหน้าหลัก รูปที่ 4.18 แสดงหน้าสินค้า

70 รูปที่ 4.19 แสดงหน้ารายละเอียดสินค้า รูปที่ 4.20 แสดงหน้าตะกร้าสินค้า

71 รูปที่ 4.21 แสดงหน้ายืนยันการสั่งซื้อ รูปที่4.22 แสดงหน้าเข้าสู่ระบบของผู้ดูแลระบบ

72 รูปที่ 4.23 แสดงหน้าจัดการสมาชิก รูปที่ 4.24 แสดงหน้าจัดการประเภทสินค้า

บทที่ 5 สรุปผลการท าโครงงาน 5.1 สรุปผลการท าโครงงาน 1. ได้เว็บไซต์ที่ผู้ศึกษานั้น มีความรู้ความเข้าใจมากขึ้น 2. ได้ความรู้ความเข้าใจในการท าเว็บไซต์ขายสินค้าออนไลน์ 3. ได้เว็บไซต์ที่ผู้ศึกษาสนใจได้ทดสอบความรู้และความเข้าใจของตนเองได้ 4. ได้เรียนรู้วิธีการท าหน้า สมัครสมาชิก ล็อกอินและสามารถใช้งานได้จริง 5. ได้เว็บไซต์ที่ผู้ใช้สามารถน าความรู้ที่ได้ไปประยุกต์ใช้ในชีวิตประจ าวัน 5.1.1 ขนาดโปรแกรมของแต่ละไฟล์ ที่ ชื่อไฟล์ ขนาดของไฟล์ หมายเหตุ 1 website.php 6 KB หน้าหลักเว็บไซต์ 2 login.php 2 KB หน้าเข้าสู่ระบบ 3 register.php 2 KB หน้าสมัครสมาชิก 4 about.php 7 KB หน้าเกี่ยวกับเรา 5 product.php 4 KB หน้าสินค้า 6 contact.php 3 KB หน้าติดต่อ 7 credit.php 6 KB หน้าผู้จัดท า 8 order.php 5 KB หน้าวิธีการสั่งซื้อ 9 cart.php 6 KB หน้าการสั่งซื้อสินค้า 10 show_product.php 1 KB หน้าโชว์สินค้า 11 login_admin.php 2 KB หน้าเข้าสู่ระบบแอดมิน 12 product_manage.php 2 KB หน้าจัดการสินค้า 13 type.php 2 KB หน้าจัดการประเภทสินค้า 14 admin.php 2KB หน้าแอดมิน 15 member.php 3 KB หน้าสมาชิก ตารางที่ 5.1 แสดงขนาดของโปรแกรม

74 5.1.2 ข้อผิดพลาดที่มีต่อการออกแบบระบบงาน 1. ฐานข้อมูลท างานผิดพลาดบ่อยครั้ง 2. ไฟล์งานค่อนข้างซับซ้อนจึงใช้เวลาอย่างมาก 3. ยังไม่ค่อยชินกับการใช้โค้ด php จึงขัดข้อง 4. ใช้เวลาในการศึกษาอย่างมากในการวางแบบ 5. โปรแกรม Error จึงลบและติดตั้งใหม่บ่อยครั้ง 5.1.3 ข้อผิดพลาดที่มีในโปรแกรม 1. ยังไม่รู้เรื่องภาษา mysqli ของฐานข้อมูล 2. โค้ดเชื่อมฐานข้อมูลจะ Error บ่อยครั้ง 3. Run โปรแกรมแล้วภาพไม่เปลี่ยนให้ 4. ใส่โค้ดรวมฐานข้อมูลแล้วแต่ข้อมูลไม่ปรากฏออกมา 5. จ าโค้ดที่ต้องใส่เพิ่มอีกจ านวนมาก 6. ต้องวางแผนตลอดเวลาในการเขียนโค้ด 7. ใส่ค่าตัวแปรผิดและเครื่องหมายปีกกาเปิดปิด 5.2 ปัญหาและอุปสรรคในการด าเนินงาน 1. โปรแกรม Xampp มักจะ Error บ่อยจึงเสียเวลาในการท างาน 2. สมาชิกในกลุ่มมีเวลาว่างไม่เท่ากัน 3. ใส่เครื่องหมายผิดจึงหาวิธีแก้ครึ่งวันจึงเสียเวลา 4. ระบบปฏิบัติการวินโดวส์อัพเดตบ่อยชิ้นงานจึงล้าช้า

75 5.3 สรุปเวลาการท างานจริง (Gantt Chart) ตารางที่ 5.2 สรุปเวลาการด าเนินงานจริง รายการ ภาคเรียนที่ 1 มิถุนายน 65 กรกฎาคม 65 สิงหาคม 65 กันยายน 65 ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 เสนอหัวข้อ ATC.01 5-10 มิ.ย. 65 ประกาศผลรอบที่ 1 13 มิ.ย. 65 เสนอหัวข้อ รอบที่2 14-16 มิ.ย 65 ประกาศผล รอบที่ 2 17 มิ.ย. 65 เสนออาจารย์ที่ปรึกษา ร่วม ATC.02 13 -30 มิถุนายน 65 ส่งเอกสารบทที่ 1 สมบูรณ์ 14- มิ.ย. 65 ถึง 8 ก.ค. 65 ส่งเอกสารบทที่ 2 สมบูรณ์ 9-31 ก.ค. 65 ส่งเอกสาร บทที่ 3 สมบูรณ์ 1-31 ส.ค. 65 สอบน าเสนอโครงงาน ATC.03 ครั้งที่ 1 5-23 ก.ย. 65 ส่งเอกสารโครงงาน ปก ,บทที่ 1-3 บรรณานุกรม ATC 01-05 26-30 ก.ย. 65 ติดตามความคืบหน้าโปรแกรม อาจารย์ที่ปรึกษาร่วม ตุลาคม 65 รายละเอียดในการเข้าพบที่ปรึกษาร่วม 1 2 3 4 ส่งความคืบหน้าโปรแกรม 20 % โครงร่างชิ้นงาน ออกแบบโลโก้ชื่อแบรนด์ 3-9 ต.ค. 65 ส่งความคืบหน้าโปรแกรม 40 % การลงเนื้อหา จัดวางรูปภาพ สีที่ใช้ 10-16 ต.ค. 65 ส่งความคืบหน้าโปรแกรม 60 % การเชื่อมโยง การตั้งชื่อ 17-23 ต.ค. 65 ส่งความคืบหน้าโปรแกรม 80 % ระบบเริ่มใช้งานได้ 24-31 ต.ค. 65

76 ตารางที่ 5.3 สรุปเวลาการด าเนินงานจริง (ต่อ) หมายเหตุ เส้นสีด าคือ ระยะเวลาที่ก าหนด เส้นสีแดง คือ ระยะเวลาในการด าเนินงานจริง รายการ ภาคเรียนที่ 2 พฤศจิกายน 65 ธันวาคม 65 มกราคม 66 กุมภาพันธ์ 66 ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 ส่งความคืบหน้าโปรแกรม 100 % 1-7 พ.ย. 65 สอบน าเสนอโครงงาน ระดับปวส.2 - ปวช.3 ATC.03 ครั้งที่ 2 26 พ.ย. 65 ส่ง ATC.06 1-16 ธ.ค. 65 ส่ง ATC.07 1-30 ม.ค. 66 ส่งเอกสาร บทที่ 4 สมบูรณ์ 20 ธ.ค. - 23 ม.ค. 66 ส่งเอกสาร บทที่ 5 สมบูรณ์ 31 มกราคม 2566 บทคัดย่อ กิตติกรรมประกาศค าน า 1-7 ก.พ.66 สารบัญ สารบัญรูป สารบัญตาราง 8-14 ก.พ.66 ประวัติผู้จัดท า หน้าอนุมัติ 15-19 ก.พ.66 ภาคผนวก ATC.04-05 20-27 ก.พ.66 ส่งเล่มโครงงาน 28 ก.พ.66

77 5.4 สรุปค่าใช้จ่ายในการด าเนินงานจริง ตารางที่ 5.4 สรุปค่าใช้จ่ายในการด าเนินงานจริง ล าดับ รายการ จ านวน ราคา (บาท) 1 กระดาษ A4 4 รีม 520 2 ค่าเครื่องพิมพ์ 1 เครื่อง 2,900 3 ค่าเข้าเล่ม 1 เล่ม 200 4 ค่าหมึก 1 ตลับ 450 5 ค่าหัวแปลงสายสัญญาณ 1 อย่าง 350 6 ค่าเช่าพื้นที่ Host 1 อย่าง 1,000 7 ค่าเช่าพื้นที่ Drive 1 อย่าง 20 รวมเป็นเงิน 5,440

79 ภาคผนวก - ใบเสนอขออนุมัติการท าโครงการระบบคอมพิวเตอร์ (ATC.01) - ใบเสนออาจารย์ที่ปรึกษาร่วมโครงการ (ATC.02) - ใบขอสอบโครงการระบบคอมพิวเตอร์ธุรกิจ ครั้งที่ 1 (ATC.03) - ใบรายงานความคืบหน้าโครงการระบบคอมพิวเตอร์ธุรกิจ (ATC.04) - ใบบันทึกการเข้าพบที่ปรึกษาโครงการ (ATC.05) - ใบขออนุญาตอาจารย์ที่ปรึกษาจัดท า เอกสารบทที่ 4-5 (ATC.06) - ใบรับรองการน าไปใช้ประโยชน์ได้จริง (ATC.07)