ระบบการขายสินค้าออนไลน์ ประเภท อุปกกรณ์การช่าง (การช่าง)

2. Flowchart เขา้ สรู่ ะบบ - - - ? รูปท่ี 3.3 Flowchart 38

3. Flowchart การสง่ั ซอื้ รปู ท่ี 3.4 Flowchart แ 39

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

3.3 การออกแบบแผนภาพกระแสความไหลขอ้ มูล (Dataflow Diagram) 1. Dataflow Diagram Level 0 /- 1 แ , D1 2 D2 แ 3 4 - 5 D1 6 D3 7 D4 แ D2 รูปท่ี 3.6 Data Flow Diagram Level 0 41

2. Dataflow Diagram Level 1 Process1 /- 1.1 แ 1.2 1.3 D1 , 1.4 แ รูปท่ี 3.7 Data Flow Diagram Level 1 Process1 3. Dataflow Diagram Level 1 Process2 2.1 2.2 2.3 D2 2.4 แ รปู ท่ี 3.8 Data Flow Diagram Level 1 Process2 42

4. Dataflow Diagram Level 1 Process3 D2 แ 3.1 แ 3.2 แ 3.3 3.4 แ แ รูปที่ 3.9 Data Flow Diagram Level 1 Process3 5. Dataflow Diagram Level 1 Process4 - 4.1 4.2 D2 - 4.3 แ รูปที่ 3.10 Data Flow Diagram Level 1 Process4 43

6. Dataflow Diagram Level 1 Process5 , D1 5.1 5.2 5.3 5.4 แ รูปที่ 3.11 Data Flow Diagram Level 1 Process5 7. Dataflow Diagram Level 1 Process6 D3 6.1 6.2 แ D4 รปู ที่ 3.12 Data Flow Diagram Level 1 Process6 44

8. Dataflow Diagram Level 1 Process7 D2 D3 7.1 D4 7.2 7.3 แ รปู ท่ี 3.13 Data Flow Diagram Level 1 Process7 45

3.4 การออกแบบแผนภาพความสัมพันธ์ของข้อมลู (Entity Relationship Diagram) สมาชกิ 1 มี M บส่งั ซ้อื 1 ประเภทสินค้า 1 ระบ M M 1 M สินคา้ รปู ท่ี 3.14 E-R Diagram TP 46

3.5 การออกแบบพจนานกรมขอ้ มลู (Data Dictionary) TP แฐ 1. (member) Field Side Description หมาย Field Name Type ขนาดของฟลิ ด์ ช้เกบ็ ข้อมูล เหต ชอ่ื ฟลิ ด์ 11 รหัสสมาชิก ชนิดของฟิลด์ PK ID Int 30 ชือ่ ผู้ ช้ 20 รหัสผ่าน Username varchar 60 ชื่อสมาชกิ 5 เพศชาย,หญงิ Password varchar 30 อีเมล Name varchar Sex varchar Email varchar ตารางท่ี 3.1 2. (purchase) Field Side Description หมายเหต Field Name Type ขนาดของฟลิ ด์ ช้เกบ็ ข้อมูล PK ชือ่ ฟิลด์ FK ชนดิ ของฟลิ ด์ 6 เลขที่ บสั่งซือ้ Order_id Yes,No Int p_id Int 6 รหัสสินคา้ total Int 10 ยอดรวม pu_status varchar 3 สถานะการสั่งซ้ือ ตารางท่ี 3.2 47

3. (type) Field Side Description หมายเหต Field Name Type ขนาดของฟลิ ด์ ช้เก็บข้อมูล PK ชือ่ ฟิลด์ ชนดิ ของฟลิ ด์ type_id int 3 รหัสประเภทสินค้า type_name varchar 30 ชื่อประเภทสนิ ค้า ตารางที่ 3.3 4. (product) Field Side Description หมายเหต Field Name Type ขนาดของฟิลด์ ช้เก็บขอ้ มูล PK ชื่อฟิลด์ รหัสสนิ ค้า p_id ชนิดของฟลิ ด์ 11 ช่อื สินค้า p_name int 50 รายละเอยี ดสินคา้ p_detail 400 รูปภาพสินค้า p_img Varchar - p_price Text 11 ราคา p_number Mediumblob 10 จำนวนสนิ คา้ int int ตารางท่ี 3.4 5. Type (order) Description หมายเหต Field Name ชนดิ ของฟลิ ด์ Field Side ชเ้ ก็บขอ้ มูล ชื่อฟลิ ด์ ขนาดของฟลิ ด์ เลขที่ บสั่งซ้อื FK Order_id Int 11 รหัสสินค้า FK P_id Int 11 จำนวน P_amount Int 2 ยอดรวม total Int 10 ตารางท่ี 3.5 48

3.6 การออกแบบ Sitemap หน้าหลกั สินคา้ INDEX วธิ กี ารชาระเงนิ ติดตอ่ เรา วธิ กี ารส่ังซื้อ เขา้ สู่ระบบ วสั ดก่อสร้าง กสกิ รไทย สมคั รสมาชกิ หลอดไฟ ไทยพา ชิ น์ เครอ่ื งมือชา่ ง พรอ้ มเพย์ รปู ที่ 3.15 โ (Site Map) 49

3.7 การออกแบบ Story Board รูปท่ี 3.16 แ Index รปู ที่ 3.17 แ Login 50

รูปท่ี 3.18 แ รปู ที่ 3.19 แ แ 51

รปู ที่ 3.20 แ รูปที่ 3.21 แ 52

รูปที่ 3.22 แ ำ รูปท่ี 3.23 แ ธ 53

3.8 การออกแบบสงิ่ นำเขา้ (Input Design) 1. 2. แ 3. ธ ำ 4. แ 5. ธ 6.แ 3.9 การออกแบบสงิ่ นำออก (Output Design) 1.แ 2.แ ำ 3. แ 54

บทท่ี 4 การพัฒนาระบบการขายสินค้าออนไลน์ ประเภท อปุ กรณ์การช่าง (TPการชา่ ง) 4.1 เครอ่ื งมือและอุปกรณท์ ีใ่ ช้ 1. CPU AMD Ryzen 5 5600H 3.3GHz 2. RAM 16 GB 3. Storage 512GB SSD 4. GPU RTX3060 5. Display 15.6 FHD IPS 6. Battery 4Gell 7. OS Windows 10 Home SL 8. Printer EPSON 9. Keyboard NUBWO New X21 10. Mouse PLESIOS NM-89M 4.2 โปรแกรมท้งั หมดทีใ่ ชพ้ ฒั นา ใช้ในการตดั ตอ่ รปู ภาพ 1. โปรแกรม Adobe Photoshop CS6 ใช้ในการออกแบบเว็บไซต์ 2. โปรแกรม Microsoft Visual Studio Code 2019 ใชใ้ นการจำลองเซิอรฟ์ เวอร์ 3. โปรแกรม Xampp ใช้ในการพมิ พ์เอกสาร 4. Microsoft Office Word 2019 ใช้ในการออกแบบรูป 5.โปรแกรม canva

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

3. ทำการเลอื ก Components ท่ีเราตอ้ งการ รูปท่ี 4.3 หน้าต่างเลอื กการทำงานของ Xampp 4. เลอื ก Path ในการตดิ ตงั้ XAMPP รูปท่ี 4.4 หนา้ ต่างเลอื กที่อยกู่ ารติดต้งั 60

5. คลิก Next รูปที่ 4.5 หน้าตา่ งการเลอื กภาษาการใช้งาน 6. คลกิ Next รูปท่ี 4.6 หน้าตา่ งการพร้อมจะตดิ ตง้ั 61

7. รอทำการตดิ ตั้ง รูปที่ 4.7 หน้าตา่ งรอการตดิ ตัง้ 8. ทำการตดิ ตง้ั เรียบรอ้ ย และทำการ Restart Computer 1 ครั้ง รูปที่ 4.8 หน้าตา่ งบอกการพรอ้ มตดิ ต้งั 62

9. จากนั้นเข้า Control Panel ของ XAMPP และทำการคลิก Start Apache และ Mysql ตามลำดับ รูปที่ 4.9 หน้าต่างการเปดิ ใช้งานโปรแกรม Xampp 10. จากน้นั ลองเขา้ Phpmyadmin และ localhost ดู รูปที่ 4.10 หน้าตา่ งของสว่ น phpMyAdmin 63

11. หน้าต่างการควบคุมทำงานของโปรแกรม Xampp รูปท่ี 4.11 หนา้ ต่างการควบคุมของโปรแกรม Xampp 64

4.4 วิธกี ารนำไปใช้งาน การนำเวบ็ ไซต์ข้ึนโฮสต์ รปู ที่ 4.12 เข้าเว็บไซต์ https://www.000webhost.com/ รูปท่ี 4.13 เลือก create website 65

รูปที่ 4.14 เลือกไฟล์ file manager รปู ท่ี 4.15 นำไฟล์ที่ตอ้ งการขึ้นโฮสตล์ าดใส่ folder public_html 66

รปู ท่ี 4.16 แสดงไฟลท์ ัง้ หมดทนี่ ำเขา้ มาใส่ใน Folder 67

รูปที่ 4.17 เขา้ ส่เู วบ็ ไซต์ https://tpkarchans.000webhostapp.com/ รูปที่ 4.18 แสดงหนา้ เข้าสูร่ ะบบของสมาชกิ 68

รูปที่ 4.19 แสดงหน้าสมัครสมาชกิ รปู ที่ 4.20 แสดงหนา้ แรก 69

รปู ท่ี 4.21 แสดงหนา้ ตดิ ตอ่ เรา รูปท่ี 4.22 แสดงหนา้ วธิ กี ารสง่ั ซอ้ื 70

รปู ที่ 4.23 แสดงหน้าสินค้า รปู ที่ 4.24 แสดงหนา้ สนิ คา้ ingco 71

รปู ท่ี 4.25 แสดงหน้าสนิ คา้ dewalt รปู ท่ี 4.26 แสดงหน้าสินคา้ milwaukee 72

รูปที่ 4.27 แสดงหนา้ สินค้ามีป่มุ ให้เลือกประเภทและป่มุ รายละเอยี ด รปู ท่ี 4.28 แสดงหน้ารายละเอยี ดสนิ คา้ 73

รปู ที่ 4.29 แสดงหน้าตะกร้าสินคา้ รปู ที่ 4.30 แสดงหนา้ รายการคำส่งั ซ้อื 74

รูปที่ 4.31 แสดงหน้ายืนยันการสั่งซื้อ รูปที่ 4.32 แสดงหน้าส่งสลิป 75

รูปที่ 4.33 แสดงหน้ารายการคำสง่ั ซื้อเมือ่ ชำระเงนิ เรียบรอ้ ย รปู ท่ี 4.34 แสดงหนา้ พิมพใ์ บสงั่ ซอื้ 76

รูปที่ 4.35 แสดงหน้าส่วนของแอดมนิ ที่แก้ไขได้ รปู ท่ี 4.36 แสดงหนา้ แกไ้ ขขอ้ มูลสมาชิก 77

รูปท่ี 4.37 แสดงหนา้ เพิม่ ลบแก้ไขข้อมลู สนิ ค้า รปู ที่ 4.38 แสดงหนา้ เพิ่มลบแกไ้ ขแบรนด์ 78

รูปท่ี 4.39 แสดงหนา้ เพมิ่ ลบแกไ้ ขประเภทสินค้า รูปที่ 4.40 แสดงหน้าตรวจสอบรายการคำสั่งซ้อื 79

บทที่ 5 สรปุ ผลการทำโครงงาน 5.1 สรุปผลการทำโครงงาน 1. ไดเ้ วบ็ ไซต์ทผ่ี ู้ศกึ ษานนั้ มคี วามรคู้ วามเขา้ ใจมากข้นึ 2. ไดค้ วามรคู้ วามเข้าใจในการทำเว็บไซตข์ ายสนิ ค้าออนไลน์ 3. ได้เว็บไซตท์ ่ีผู้ศกึ ษาสนใจได้ทดสอบความร้แู ละความเขา้ ใจของตนเองได้ 4. ไดเ้ รียนวธิ กี ารทำหน้า สมัครสมาชกิ ลอ็ กอนิ และสามารถใชง้ านไดจ้ รงิ 5. ไดเ้ ว็บไซต์ที่ผใู้ ชส้ ามารถนำความร้ทู ี่ไดไ้ ปประยุกตใ์ ช้ในชวี ติ ประจำวนั 5.1.1 ขนาดโปรแกรมของแตล่ ะไฟล์ ท่ี ชอ่ื ไฟล์ ขนาดของไฟล์ หมายเหตุ 1 home.php 2 login.php 4 KB หน้าหลกั เวบ็ ไซต์ 3 register.php 4 prod_ingco.php 2 KB หน้าเขา้ สู่ระบบ 5 prod_dewalt.php 6 prod_milwaukee.php 4 KB หน้าสมคั รสมาชิก 7 howtobuy.php 8 contact.php 3 KB หน้าสนิ ค้าingco 9 product_detail.php 10 confirm.php 3 KB หน้าสินคา้ dewalt 11 editmember.php 12 editproduct.php 3 KB หนา้ สนิ ค้าmilwaukee 13 editbrand.php 14 edit_type.php 1 KB หน้าวธิ กี ารสั่งซอื้ 15 history_admin.php 1 KB หน้าตดิ ต่อเรา 4 KB หนา้ รายละเอียดสินค้า 4 KB หน้ายืนยนั การสง่ั ซ้ือ 2 KB หนา้ แก้ไขข้อมลู สมาชิก 2 KB หนา้ เพ่ิมลบแกไ้ ขข้อมลู สนิ ค้า 2 KB หนา้ เพมิ่ ลบแกไ้ ขแบรนด์ 2 KB หนา้ เพิ่มลบแก้ไขประเภทสินคา้ 3 KB หนา้ ตรวจสอบคำสั่งซอ้ื แอดมิน ตารางท่ี 5.1 แสดงขนาดของโปรแกรม

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. วางแผนหน้างานเรง่ รบี จนเกินไป 2. โค้ด Error บ่อยและแก้นาน 3. ใส่เครือ่ งหมายผดิ จึงหาวธิ ีแก้คร่ึงวนั จงึ เสียเวลา 4. การลงิ้ ค์ผิดทเี่ ปิดไฟลใ์ หมเ่ ขยี นใหม่ 81

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

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

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



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