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

4. Data Flow Diagram Level 1 Process 3 รปู ที่ 3.9 Data Flow Diagram Level 1 Process 3 การเขา้ สรู่ ะบบ 41

5. Data Flow Diagram Level 1 Process 4 รูปท่ี 3.10 Data Flow Diagram Level 1 Process 4 เลือกสนิ คา้ 42

6. Data Flow Diagram Level 1 Process 5 รูปที่ 3.11 Data Flow Diagram Level 1 Process 5 ยนื ยันการสงั่ ซอ้ื 43

3.4 การออกแบบแผนภาพความสัมพันธ์ของขอ้ มลู (Entity Relationship Diagram) รูปที่ 3.12 E-R Diagram ระบบขายสินค้า ประเภทอปุ กรณเ์ ครื่องเขียน 44

3.5 พจนานุกรมขอ้ มูล (Data Dictionary) ออกแบบฐานขอ้ มูล ระบบขายสินค้าออนไลน์ ประเภทอปุ กรณ์ เครือ่ งเขยี น 1.ตารางขอ้ มลู สมาชิก (resgister_db) Field Name Type Field Side Description หมายเหตุ ชอ่ื ฟิลด์ ชนิดของขอ้ มลู ขนาดของฟลิ ด์ ใชเ้ ก็บข้อมูล PK int รหัสสมาชกิ Id_user varchar 5 ชอ่ื ผใู้ ชง้ าน username varchar 30 email varchar 50 อเี มล์ password varchar 30 รหัสผา่ น phone 15 เบอร์โทรศพั ท์ ตารางท่ี 3.1 ตารางข้อมลู สมาชิก 2.ตารางรายละเอยี ดการสง่ั ซื้อ(product _detail) Field Name Type Field Side Description หมายเหตุ ชอ่ื ฟลิ ด์ ชนิดของขอ้ มลู ขนาดของฟิลด์ ใช้เก็บข้อมลู FK int รหัสสินค้า FK Id_product varchar 5 qualitity int 10 จำนวน order_number int 10 เลขท่ีใบสั่งซ้อื 10 total ยอดรวม ตารางรูปท่ี 3.2 รายละเอียดการสง่ั ซื้อ 45

3.ตารางขอ้ มลู สินค้า(tb_product) Field Name Type Field Size Description หมายเหตุ ชื่อฟิลด์ ชนดิ ของขอ้ มลู ขนาดของฟลิ ด์ ใชเ้ กบ็ ขอ้ มูล PK รหสั สินค้า Id_pro int 10 ชอ่ื สินค้า name_pro varchar 20 ราคาสินค้า price_pro int 10 รูปภาพสินคา้ pic_pro mediumblob - ประเภทสนิ คา้ type_pro varchar 20 ตารางรูปท่ี 3.3 ตารางข้อมลู สนิ คา้ 4. ตารางใบสัง่ ซื้อ (purchase) Field Name Type Field Size Description หมายเหตุ ช่ือฟิลด์ ชนิดของข้อมลู ขนาดของฟลิ ด์ ใช้เก็บข้อมลู int เลขท่ีใบสังซือ้ PK id_number int 10 รหัสสมาชกิ FK user_id date 10 date int 10 วันที่ net 11 ยอดสุทธิ ตารางรูปที่ 3.4 ตารางใบสง่ั ซื้อ 46

3.6 การออกแบบผังโครงสร้างเว็บไซต์ Sitemap รปู ท่ี 3.13 การออกแบบผังโครงสร้างเวบ็ ไซต์ Sitemap 47

3.7 การออกแบบแผนภาพแนวความคิด (Story Board Design) รปู ท่ี 3.14 แสดงหนา้ แรก รปู ที่ 3.15 แสดงหน้าสมัครสมาชิก 48

รูปท่ี 3.16 แสดงหน้าเข้าสู่ระบบ รปู ที่ 3.17 แสดงหนา้ สินค้า 49

รปู ที่ 3.18 แสดงรายละเอยี ดสินค้า รูปที่ 3.19 แสดงรายการโปรด 50

รปู ท่ี 3.20 แสดงหนา้ วิธีการส่งั ซ้ือ รปู ที่ 3.21 แสดงหนา้ ประวตั เิ กย่ี วกบั เรา 51

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

บทท่ี 4 การพัฒนาระบบขายสินค้าออนไลน์ประเภท อปุ กรณเ์ คร่อื งเขยี น P จังโลลิ 4.1 เครอ่ื งมือและอปุ กรณ์ที่ใช้ 1. CPU Intel(R) Core(TM) i3 2. RAM 8.00 GB 3. Notebook DELL 4. Windows 10 5. เคร่ืองปร้ิน Epson l3250 6. Flash Drive 4.2 โปรแกรมทีใ่ ชใ้ นการพัฒนา 1.โปรแกรม Microsoft Visual Studio Code ใชอ้ อกแบบหนา้ เว็บไซต์ 2.โปรแกรม XAMPP Control Panel ใชใ้ นการสรา้ งเวบ็ เซริ ์ฟเวอรส์ ำเรจ็ รปู 3.โปรแกรม phpMyAdmin ใชใ้ นการจดั การฐานขอ้ มูล MySQL 4.โปรแกรม Visio 2016 ใชใ้ นการสร้าง Flow Chart

4.3 การติดตั้งโปรแกรมและระบบ โปรแกรม XAMPP Control Panel รูปท่ี 4.1 คลกิ เขา้ ไป ที่ตวั โปรแกรม XAMPP Control Panel แล้วกด Next รูปท่ี 4.2 หลังจากเขา้ ไปในโปรแกรม จะขึ้นหน้า setup แลว้ กด Next 54

รปู ท่ี 4.3 จะเป็นการเลอื ก Folder แล้วกด Next รปู ท่ี 4.4 เลือกภาษา แล้วกด Next 55

รูปท่ี 4.5 จะเป็นยืนยันวา่ พรอ้ มจะลงโปรแกรม ถ้ายืนกด Next รปู ที่ 4.6 เมอื่ ยนื ยนั แลว้ จะขึน้ หนา้ โหลดแบบนี้ 56

รปู ที่ 4.7 เมอ่ื โหลดเสร็จแล้ว จะเป็นการเข้าสู่ โปรแกรม รูปที่ 4.8 กดป่มุ start ของ Apache และ MySQL 57

รปู ท่ี 4.9 หนา้ ไฟล์ โปรเจค Pjungloli.sql รูปท่ี 4.10 นำไฟล์โปรเจคไปใส่ใน C:\\xampp\\htdocs 58

รปู ที่ 4.11 พิมพ์ค้นหาเว็บไซต์ localhost เพือ่ อัพโหลดฐานขอ้ มูล รูปท่ี 4.12 อพั โหลดฐานขอ้ มลู เสรจ็ ส้ินเรียบรอ้ ย 59

4.4วิธีการนำไปใช้งาน เข้าไปท่ีโปรแกรม Chrome ตรงช่อง URL ให้ใส่ http://pjungloli.com รปู ท่ี 4.13 หนา้ หลกั ของเวบ็ ไซต์ ในภาพน้ีจะเปน็ ป่มุ ต่างๆในหน้าเว็บไซต์ รูปท่ี 4.14 ปมุ่ ต่างๆในหน้าเวบ็ ไซต์ 60

ในรูปน้ี จะเปน็ สว่ นด้านลา่ งของหนา้ หลกั จะมีช่องทางการติดต่อ รูปท่ี 4.15 ดา้ นล่างของตวั เวบ็ ไซต์ ในส่วนนี้ จะเป็นหน้าทบ่ี อกขอ้ มูลรายละเอียดของแอดมิน รูปท่ี 4.16 หน้าแอดมิน 61

รปู ที่ 4.17 หนา้ แอดมิน (ตอ่ ) ในส่วนนี้คอื หนา้ สินคา้ เมื่อกดเลอื กซ้ือสนิ ค้า สนิ ค้าจะถกู ส่งไปยังตะกร้าสนิ ค้า รปู ท่ี 4.18 หนา้ สินค้า 62

เม่อื กดยนื ยนั การสัง่ ซ้ือจะขึ้นใบสง่ั ซอ้ื พร้อมแจง้ การสงั่ ซ้อื สนิ คา้ เสร็จส้ิน รปู ที่ 4.19 หนา้ ใบสงั่ ซ้อื หลงั จากกด Print จะขึ้นหนา้ ส่ังพิมพใ์ บสั่งซ้อื รปู ที่ 4.20 หนา้ พิมพใ์ บส่ังซ้ือ 63

ส่วนนจ้ี ะเปน็ คณะผู้จัดทำ รปู ท่ี 4.21 คณะผ้จู ดั ทำ ส่วนนจ้ี ะเป็นสว่ นของแอดมนิ จะเรม่ิ จากการล็อกอนิ เขา้ สรู่ ะบบ รูปท่ี 4.22 หน้าลอ็ กอนิ เขา้ สรู่ ะบบ 64

ส่วนนจี้ ะเป็นส่วนจดั การผูด้ ูแลระบบ สามารถ เพ่ิม ลบ และแกไ้ ขขอ้ มูลได้ รปู ที่ 4.23 จัดการผูด้ แู ลระบบ ส่วนน้จี ะเปน็ ส่วนจดั การสมาชกิ สามารถ เพ่ิม ลบ และแกไ้ ขขอ้ มลู ได้ รปู ท่ี 4.24 ส่วนจัดการสมาชิก 65

ส่วนนีจ้ ะเปน็ สว่ นจดั การประเภทสินค้า สามารถ เพ่ิม ลบ และแก้ไขขอ้ มลู ได้ รปู ที่ 4.25 จัดการประเภทสนิ ค้า สว่ นน้ีจะเปน็ ส่วนจดั การสนิ คา้ สามารถ เพ่มิ ลบ และแกไ้ ขขอ้ มูลได้ รปู ที่ 4.26 จดั การสินค้า 66

บทท่ี 5 สรปุ ผลการทำโครงงาน 5.1 สรุปผลโครงงาน 1. ไดม้ ีความรู้ความเข้าใจเกย่ี วกบั เว็บไซตข์ ายของออนไลน์มากขึ้น 2. ได้เรียนรถู้ ึงการใชโ้ ปรแกรมต่าง ๆ จากการทาํ โครงงาน 3. ได้เวบ็ ไซต์ที่ผูส้ นใจไดท้ ดสอบความรแู้ ละความเขา้ ใจของตนเองได้ 4. ได้เวบ็ ไซตท์ ผ่ี ู้ใช้สามารถนําความรทู้ ไ่ี ด้ไปประยุกต์ใชใ้ นชวี ติ ประจําวนั 5.1.1 ขนาดโปรแกรมของแตล่ ะไฟล์ ขนาดของไฟล์ หมายเหตุ ท่ี ช่ือไฟล์ 1 KB หน้าหลักของเว็บไซต์ 1 index.php 3 KB หนา้ เมนู 2 navbar.php 3 KB หน้าสมัครสมาชกิ 3 member_form_add.php 3 KB หน้าเขา้ สู่ระบบสมาชิก 4 cheack_login.php 2 KB หน้าแสดงสินค้า 5 Show_product.php 6 KB หน้ารายละเอยี ดสินค้า 6 prd.php 2 KB หนา้ เลอื กซอ้ื สนิ คา้ 7 product.php 4 KB หน้าตะกรา้ สนิ ค้า 8 cart.php 4 KB หนา้ ยนื ยันการสัง่ ซือ้ สนิ คา้ 9 comfirm.php 3 KB หน้าแจ้งการสัง่ ซ้อื สนิ คา้ 10 saveorder.php 3 KB หนา้ ของผูด้ แู ลระบบ 11 menu_l.php 1 KB หนา้ ขอ้ มูลสมาชกิ 12 member_profile.php 4 KB หนา้ แก้ไขข้อมลู สมาชิก 13 member_profile_edit.php 5 KB หน้าแกไ้ ขข้อมลู สินคา้ 14 product_form_edit.php 1 KB หน้าการออกจากระบบ 15 logout.php ตารางท่ี 5.1 แสดงขนาดของโปรแกรม

5.1.2 ขอ้ ผดิ พลาดทม่ี ีต่อการออกแบบระบบงาน 1. ผดิ พลาดเก่ียวกบั ฐานขอ้ มูลบอ่ ยครงั้ 2. ถอนการติดต้ังXAMPPทำใหไ้ ฟลห์ ายต้องใชไ้ ฟล์สำรองไม่สมบูรณ์แทน 3. ชว่ งแรกยงั ไมช่ ํานาญในการใชโ้ ปรแกรมจึงเกิดความลา่ ช้า 4. โค้ดมปี ญั หาไมส่ ามารถ Run ได้ โค้ดทบั ซ้อนกันเปิดไม่ตดิ 5.1.3 ขอ้ ผิดพลาดทมี่ ใี นโปรแกรม 1. ไม่สามารถพมิ พ์เพมิ่ จำนวนสนิ คา้ ได้ 2. โคด้ ที่เขียนของหนา้ แอดมินเกดิ error บางสว่ น 3. หน้าตะกร้าเวบ็ เกิดบัค 4. ไมร่ ้จู ักวิธกี ารกรอกข้อมลู ในฐานขอ้ มลู 5. ตวั โปรแกรมกับตวั บราวเซอรภ์ าพไมต่ รงกนั 5.2 ปัญหาและอุปสรรคในการดาํ เนนิ งาน 1. ระยะการกำหนดส่งเกิดการเปล่ียนแปลงจำเป็นต้องส่งกอ่ นกำหนดการ 2. การติดตอ่ สอ่ื สารระหว่างกลุ่มไมต่ อ่ เนือ่ งทําให้งานลา่ ชา้ และผิดแผนท่วี างไว้ 3. Flash Drive ติดไวรัสทำให้ไฟล์งานบางตัวหายและตอ้ งเสยี เวลาในการทำใหม่ 4. เครื่องพมิ พ์เอกสารคาดเคลือ่ นเป็นปญั หาไม่ตรงตามทกี่ ําหนด 68

5.3 สรปุ เวลาการทํางานจรงิ (Gantt Chart) รายการ มถิ ุนายน 65 กรกฎาคม 65 สงิ หาคม 65 กันยายน 65 ระยะเวลา ภาคเรยี นท่ี 1 1234123412341234 เสนอหวั ขอ้ ATC.01 5-10 ม.ิ ย. 65 ประกาศผลรอบที่ 1 13 ม.ิ ย. 65 เสนอหัวข้อ รอบท่ี 2 14-16 มิ.ย 65 ประกาศผล รอบที่ 2 17 ม.ิ ย. 65 เสนออาจารยท์ ่ปี รกึ ษา 13 -30 ร่วม ATC.02 มถิ นุ ายน 65 ส่งเอกสารบทที่ 1 14- มิ.ย. 65 สมบูรณ์ ถึง 8 ก.ค. 65 อบรมโครงงาน 19 มิ.ย. 65 9-31 ก.ค. 65 ส่งเอกสารบทท่ี 2 สมบูรณ์ 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 สรุปเวลาการดาํ เนินงานจริง 69

รายการ พฤศจิกายน 65 ธันวาคม 65 มกราคม 66 กุมภาพนั ธ์ 66 ระยะเวลา ภาคเรียนที่ 2 1234 1234 1234 1234 1-7 พ.ย. 65 สง่ ความคบื หนา้ โปรแกรม 26 พ.ย. 65 100 % สอบนำเสนอโครงงาน 1-16 ธ.ค. 65 ระดับปวส.2 - ปวช.3 ATC.03 คร้ังที่ 2 ส่ง ATC.06 สง่ 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 สง่ ไฟลเ์ อกสาร Word PDF โปรแกรม ไฟล์รวม PDF ไม่เกิน 10 มีนาคม 2566 ตารางท่ี 5.2 สรปุ เวลาการดําเนินงานจริง (ตอ่ ) หมายเหตุ เส้นสีดาํ คือ ระยะเวลาท่กี ําหนด เส้นสีแดง คือ ระยะเวลาในการดําเนนิ งานจริง 70

5.4 สรุปคา่ ใช้จ่ายในการดาํ เนินการจรงิ จำนวน ราคา (บาท) 3 รีม 360 ลำดับ รายการ 2 ขวด 500 1 กระดาษ A4 2 เลม่ 400 2 ค่าหมกึ เครอื่ งพมิ พ์ 2 คน 1,600 3 ค่าเขา้ เล่มเอกสาร รวมเปน็ เงิน 2,860 4 คา่ เช่า Sever Host ตารางท่ี 5.3 สรุปค่าใช้จ่ายในการดาํ เนินงานจรงิ 71



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