ระบบการขายสินค้าออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก

4. Data Flow Diagram Level 1 Process 3 รปู ที่ 3.9 Data Flow Diagram Level 1 Process 3 ระบบขายสินคา้ ออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก 5. Data Flow Diagram Level 1 Process 4 รปู ที่ 3.10 Data Flow Diagram Level 1 Process 4 ระบบขายสินค้าออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก 39

6. Data Flow Diagram Level 1 Process 5 รปู ท่ี 3.11 Data Flow Diagram Level 1 Process 5 ระบบขายสินค้าออนไลน์ ประเภทสนิ ค้า ร้านขายรองเทา้ เด็ก 7. Data Flow Diagram Level 1 Process 6 รูปท่ี 3.12 Data Flow Diagram Level 1 Process 6 ระบบขายสินค้าออนไลน์ ประเภทสินค้า รา้ นขายรองเทา้ เด็ก 40

8. Data Flow Diagram Level 1 Process 7 รปู ที่ 3.13 Data Flow Diagram Level 1 Process 7 ระบบขายสนิ คา้ ออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 9. Data Flow Diagram Level 1 Process 8 รปู ท่ี 3.14 Data Flow Diagram Level 1 Process 8 ระบบขายสนิ ค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 41

10. Data Flow Diagram Level 1 Process 9 รูปที่ 3.15 Data Flow Diagram Level 1 Process 9 ระบบขายสินค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 3.4 การออกแบบแผนภาพความสัมพนั ธข์ องขอ้ มลู (Entity Relationship Diagram) รูปท่ี 3.16 E-R Diagram ระบบขายสนิ ค้าออนไลน์ ประเภทสินคา้ ร้านขายรองเท้าเดก็ 42

3.5 การออกแบบพจนานกุ รมขอ้ มูล (Data Dictionary ) ออกแบบฐานข้อมูล ระบบขายสินค้าออนไลนป์ ระเภทสนิ ค้ารองเทา้ เดก็ Baby Shoes Shop 1. ตารางขอ้ มลู สนิ คา้ (tb_product) Field Name Type Field Side Description หมายเหตุ ชอ่ื ฟิลด์ ชนิดของฟลิ ด์ ขนาดของฟิลด์ ใช้เก็บขอ้ มูล id_Product Int 5 รหัสสนิ ค้า PK name_product Varchar 20 ช่อื สนิ ค้า photo Mediumblob 50 รูปสินค้า price Int 5 ราคาสนิ ค้า ตารางที่ 3.1 ตารางขอ้ มูลสินคา้ 2. ตารางข้อมลู รายละเอียดการส่ังซ้ือ (tb_order_detail) Field Name Type Field Side Description หมายเหตุ ใชเ้ กบ็ ข้อมลู ชอ่ื ฟิลด์ ชนิดของฟิลด์ ขนาดของฟิลด์ รหสั สินคา้ FK เลขที่ใบสั่งซ้อื PK ref_id_product Int 5 จานวนสินค้า order_number Int 5 ยอดรวม amount Int 10 total Int 10 ตารางท่ี 3.2 ตารางขอ้ มูลรายละเอียดการสงั่ ซอื้ 43

3. ตารางข้อมลู สมาชกิ (tb_member) Field Name Type Field Side Description หมายเหตุ ขนาดของฟลิ ด์ ใช้เก็บขอ้ มูล PK ช่ือฟลิ ด์ ชนิดของฟลิ ด์ รหัสสมาชิก 10 id Int 30 ช่อื ผูใ้ ช้ 10 รหสั ผู้ใช้ username Varchar 30 ชอื่ -สกลุ 10 password Varchar 20 เพศ 80 เบอรโ์ ทรศัพท์ name Varchar 30 ท่ีอยู่ sex Varchar E-mail tal Varchar address Varchar email Varchar ตารางท่ี 3.3 ตารางข้อมูลสมาชกิ 4. ตารางข้อมูลใบเสรจ็ (tb_bill) Field Name Type Field Side Description หมายเหตุ ขนาดของ ใชเ้ กบ็ ข้อมลู PK ช่ือฟลิ ด์ ชนดิ ของฟิลด์ ฟลิ ด์ เลขท่ีใบเสรจ็ ref_bill_number Int 5 รูปภาพสลปิ Bill_photo Attachment 50 เลขท่ีใบสัง่ ซอ้ื 10 ยอดรวมชาระเงิน Receipt_number_order Varchar 30 วันทช่ี าระเงิน total_order Int 10 data_order Data/Time ตารางที่ 3.4 ตารางขอ้ มูลใบเสร็จ 44

5. ตารางข้อมูลใบสัง่ ซื้อ (tb_order) Field Name Type Field Side Description หมายเหตุ ขนาดของ ใช้เก็บขอ้ มลู PK ชือ่ ฟลิ ด์ ชนิดของฟลิ ด์ ฟิลด์ รหสั สมาชิก id Int 10 เลขที่ใบสง่ั ซื้อ Receipt_number_order Varchar 10 datetime 15 วนั ท่ี Date_order 30 ยอดสทุ ธิ total Int ตารางท่ี 3.5 ตารางข้อมลู ใบส่ังซ้ือ 3.6 การออกแบบแผนผงั โครงสรา้ งเว็บไซต์ (Site Map) หน้าแรก หน้าแรก สนิ คา้ วิธีการสงั่ ซ้ือ การชาระเงนิ ติดต่อเรา สมคั รสมาชิก รองเท้าเดก็ ผชู้ าย วิธกี ารชาระเงิน LINE เข้าสรู่ ะบบ รองเท้าเด็กผู้หญิง แจ้งชาระเงิน FACEBOOK รูปท่ี 3.17 ผังโครงสร้างเว็บไซต์ (Site Map) 45

3.7 การออกแบบแผนภาพแนวความคิด (Story Board Design) รูปท่ี 3.18 แสดงหน้า Index รูปท่ี 3.19 แสดงหน้าแรก 46

รูปท่ี 3.20 แสดงหนา้ Login รูปที่ 3.21 แสดงหน้าประเภทสนิ คา้ 47

รูปที่ 3.22 แสดงหน้าสมคั รสมาชิก รปู ที่ 3.23 แสดงหน้าวิธีการส่ังซ้ือ 48

รปู ท่ี 3.24 แสดงหนา้ การชาระเงิน รปู ที่ 3.25 แสดงหน้าการแจ้งชาระเงนิ 49

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

บทท่ี 4 การพฒั นาระบบขายสินค้าออนไลน์ ประเภทสินคา้ รา้ นขายรองเทา้ เด็ก 4.1 เครื่องมือและอุปกรณ์ทใี่ ช้ 1. CPU INTEL CORE I3-12100 LGA 1700 2. SSD M.2 PCIe/NVMe 512 GB 3. การด์ จอ NVIDIA RTX 3060 4. RAM 16 GB 5. Windows 10 Pro (64 Bit) 6. Notebook aser 7. Flash Drive 32 GB 8. Printer canon 4.2 โปรแกรมที่ใช้ในการพัฒนา 1. โปรแกรม Visual Studio Code v.1.45.1 ใช้ในการทาํ เว็บไซต์ 2. โปรแกรม Adobe Photoshop CS6 ใช้ในการตัดแต่งรปู ภาพ 3. โปรแกรม Visio 2016 ใชใ้ นการสร้าง Flowchart 4. โปรแกรม XAMPP Version v3.2.2 ใชจ้ าํ ลองเซิรฟ์ เวอร์ 5. โปรแกรม PHP My Admin ใช้ในการจดั การฐานขอ้ มลู

4.3 การติดตัง้ โปรแกรม โปรแกรม XAMPP Version v3.2.2 รูปที่ 4.1 ไปทเ่ี วบ็ ไซต์ apachefriends.orgเพอื่ ดาวนโ์ หลด XAMPP รปู ที่ 4.2 ทาํ การติดต้ัง คลกิ Next 52

รปู ท่ี 4.3 ทําการเลือก Components ใช้แค่ Apache / MySQL รปู ที่ 4.4 เลือก ท่เี ก็บ ในการติดตง้ั XAMPP 53

รูปที่ 4.5 คลิก Next รูปที่ 4.6 คลิก Next 54

รปู ท่ี 4.7 รอทาํ การติดตง้ั รปู ท่ี 4.8 ทาํ การติดตง้ั เรียบร้อย และทําการ Restart Computer 1 ครง้ั 55

รปู ท่ี 4.9 จากนนั้ เข้า Control Panel ของ XAMPP และทําการคลกิ Start Apache และ Mysql รูปที่ 4.10 จากน้นั ลองเข้า phpmyadmin และ localhost ดู 56

รูปท่ี 4.11 การตดิ ตั้ง XMAPP Version v3.2.2 เรยี บร้อย การนาํ เวบ็ ไซต์ขน้ึ โฮสต์ รปู ที่ 4.12 เข้าเวบ็ ไซต์ https://support.netdesignhost.com/ 57

รปู ที่ 4.13 กดที่ addon domain รูปที่ 4.14 ใส่ชอ่ื โดเมน คลกิ create an ftp เพื่อสร้าง ftp account หลงั จากทใี่ ส่ข้อมูลแล้ว กด add domain เพอื่ สร้าง 58

รปู ที่ 4.15 เลือก File Manager รปู ที่ 4.16 เลอื ก Folder ทง้ั หมดที่นําเข้ามาใส่ 59

4.4 วธิ ีการนาไปใช้งาน เขา้ ไปทีโ่ ปรแกรม Chrome ตรงช่อง Url ให้ใส่ http://www.projectcomatc.com/2565/babyshoes/ แล้วกด Enter รูปที่ 4.17 เข้าสู่ http://www.projectcomatc.com/2565/babyshoes/ หน้า home เป็นหน้าแรกของเวบ็ ไซต์ภายในเว็บไซตจ์ ะประกอบไปดว้ ยปุม่ ต่าง ๆ ของเวบ็ ไซต์ รปู ท่ี 4.18 แสดงหน้า home 60

หน้า Login เปน็ หน้าท่ีผู้ใช้งานจะตอ้ งทําการพิมพ์ Username และ Password เพือ่ ทาํ การ Login เข้าสเู้ วบ็ ไซตไ์ ดเ้ ลย ถา้ ยงั ไมเ่ ปน็ สมาชกิ สามารถกดที่ปุม่ สร้างบญั ชี เพอ่ื สมัครสมาชิกกอ่ นก็ได้ 1. 2. . รูปท่ี 4.19 แสดงหน้าเขา้ สรู่ ะบบ หนา้ Register เปน็ การสมคั รสมาชิก เพื่อเก็บไว้ในฐานข้อมูล โดยจะตอ้ งใส่ Username Password และรายละเอยี ดของผู้ใช้ และกดปมุ่ ลงทะเบยี นเพอื่ สมัครสมาชิก รูปท่ี 4.20 แสดงหนา้ สมัครสมาชิก 61

หน้า Product เป็นหนา้ ที่แสดงสินค้าของเว็บไซต์ รปู ที่ 4.21 แสดงหน้าสินค้า หน้า Order จะบอกขั้นตอนการสั่งซ้อื ให้ผู้เข้าใช้งาน รูปที่ 4.22 แสดงหนา้ วิธีการสงั่ ซ้อื 62

หนา้ Payment จะแสดงชอ่ งทางการชําระเงนิ ให้ผูใ้ ชง้ าน รูปที่ 4.23 แสดงหน้าวธิ กี ารชําระเงนิ หนา้ Contact จะแสดงขอ้ มูลการติดต่อของผ้ดู ูแลระบบ รูปท่ี 4.24 แสดงหน้าติดตอ่ เรา 63

หนา้ Cart จะบอกรายละเอียดในการส่งั ซื้อสนิ คา้ มจี ํานวนเงนิ ท่ตี ้องชําระ รปู ที่ 4.25 แสดงหนา้ ตะกรา้ สินคา้ หนา้ Login_admin ใหa้ dmin ไดท้ าํ การเข้าสู่ระบบในการจดั การสินค้า หรือตวั เว็บไซต์ รูปท่ี 4.26 แสดงหนา้ เขา้ สรู่ ะบบของผูด้ ูแลระบบ 64

หน้า Admin แสดงข้อมูลสินคา้ ท้งั หมด ได้ รปู ที่ 4.27 แสดงหน้าข้อมูลสนิ ค้าทัง้ หมด 65

บทท่ี 5 สรปุ ผลการทําโครงการ 5.1 สรุปผลโครงการ 1. ได้เวบ็ ไซตท์ ผ่ี ศู้ กึ ษานัน้ มคี วามรคู้ วามเข้าใจมากขน้ึ 2. ไดค้ วามรู้ความเขา้ ใจในการทาํ เว็บไซตข์ ายสินค้าออนไลน์ 3. ไดเ้ วบ็ ไซตท์ ผ่ี ู้ศึกษาสนใจได้ทดสอบความรูแ้ ละความเข้าใจของตนเองได้ 4. ได้เรยี นรวู้ ิธกี ารทําหนา้ สมัครสมาชกิ ลอ็ กอนิ และสามารถใช้งานได้จรงิ 5. ได้เว็บไซต์ทีผ่ ใู้ ชส้ ามารถนําความรทู้ ่ีไดไ้ ปประยุกต์ใช้ในชวี ติ ประจําวนั 5.1.1 ขนาดโปรแกรมของแต่ละไฟล์ ขนาดของไฟล์ หมายเหตุ ท่ี ช่อื ไฟล์ 2 KB หน้าหลักของเว็บไซต์ 1 Index.php 7 KB หนา้ แรกของเว็บไซต์ 2 home.php 5 KB หนา้ รายละเอยี ดสินค้า 3 product.php 5 KB หน้าวธิ กี ารสัง่ ซ้ือสนิ ค้า 4 htbuy.php 5 KB หน้าวธิ กี ารชาํ ระเงนิ 5 pay.php 5 KB หนา้ ติดต่อเรา 6 contact.php 5 KB หน้าตะกร้าสนิ ค้า 7 cart.php 5 KB หน้าลงทะเบียนสมคั ร 8 customer_registration.php สมาชกิ 4 KB หนา้ ลอ็ คอินสมาชกิ 9 login_form.php 5 KB หนา้ รายละเอยี ดการ 10 customer_order.php สงั่ ซ้ือของลกู คา้ 1 KB หน้าเข้าสรู่ ะบบของ 11 admin/login.php ผ้ดู แู ลระบบ 2 KB หนา้ รายละเอยี ดผูด้ ูแล 12 admin/index.php ระบบ ตารางท่ี 5.1 แสดงขนาดของโปรแกรม

ที่ ช่ือไฟล์ ขนาดของไฟล์ หมายเหตุ 13 admin/products.php 8 KB หน้าแกไ้ ขรายการสนิ ค้า ของผดู้ ูแลระบบ 14 admin/brands.php 4 KB หนา้ จดั การแบรนดข์ อง ผดู้ ูแลระบบ 15 admin/categories.php 4 KB หนา้ จดั การหมวดหมู่ ของผดู้ ูแลระบบ 16 admin/customers.php 4 KB หนา้ ชือ่ ลูกคา้ ของผดู้ ูแล ระบบ ตารางที่ 5.1 แสดงขนาดของโปรแกรม (ตอ่ ) 5.1.2 ขอ้ ผิดพลาดท่ีมีตอ่ การออกแบบระบบงาน 1. ผิดพลาดเกย่ี วกบั ฐานข้อมลู บ่อยครง้ั 2. แบ่งเวลางานไม่ดี ทําใหโ้ ปรแกรมสําเร็จชา้ และไม่สมบรู ณ์เท่าทีค่ วร 3. ชว่ งแรกยังไม่ชํานาญในการใชโ้ ปรแกรมจงึ เกิดความลา่ ช้า 4. โค้ดปญั หาไมส่ ามารถ Run ได้ โคด้ ทบั ซอ้ นกันเปิดไม่ตดิ 5. การตดิ ตอ่ สือ่ สารระหวา่ งกลุ่มไม่ต่อเน่ืองทําใหง้ านลา่ ชา้ และผดิ แผนทว่ี างไว้ 5.1.3 ขอ้ ผิดพลาดท่ีมใี นโปรแกรม 1. ไม่รู้จักวิธกี ารติดต้งั เซริ ์ฟเวอร์ 2. โคด้ ท่ีเขยี นผิดพลาดและ Run ไม่ได้ 3. Run โปรแกรมในโน๊ตบุ๊คไม่ได้ 4. เชอ่ื มฐานข้อมลู สําเร็จแต่ไมส่ ามารถเรียกใช้งานได้ 5. ไมร่ จู้ กั วธิ ีการกรอกข้อมลู ในฐานขอ้ มลู 6. ตง้ั ชือ่ ฐานข้อมลู ช้ากับบคุ คลอืน่ จึงต้องทาํ การเปลย่ี นชอ่ื ฐานขอ้ มลู ใหม่ 7. ตวั โปรแกรมกับตัวบราวเซอรภ์ าพไมต่ รงกัน 5.2 ปัญหาและอปุ สรรคในการดาํ เนินงาน 1. คอมพิวเตอรม์ ีอาการชาํ รุด หนา้ จอค้าง ตอ้ งเปล่ยี นมาใช้ Note Book ในการทํางานแทน 2. สมาชิกในกลุ่มมีเวลาในการทํางานไม่ตรงกัน 3. โค้ดปญั หาไมส่ ามารถ Run ได้ โค้ดทับซ้อนกันเปิดไม่ติด 4. การตดิ ตอ่ สือ่ สารระหว่างกลุ่มไม่ต่อเนือ่ งทาํ ใหง้ านลา่ ช้าและผดิ แผนที่วางไว้ 5. เครอ่ื งปรน้ิ เอกสารคาดเคลือ่ นเป็นปญั หาไม่ตรงตามท่กี ําหนด 67

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 ส่งเอกสารบทที่ 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 % 68

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

5.4 สรุปค่าใช้จ่ายในการดําเนินการจริง จาํ นวน ราคา (บาท) 1 รมี 250 ลาํ ดบั รายการ 1 ซอง 50 1 กระดาษ A4 1 เล่ม 240 2 ซองใสเ่ อกสาร 1 อนั 200 3 ค่าเขา้ เลม่ เอกสาร 1 เว็บ 3,000 4 Flash Drive รวมเปน็ เงิน 3,740 5 ค่าเชา่ โฮสตเ์ ว็บไซต์ ตารางที่ 5.3 สรุปค่าใชจ้ ่ายในการดำเนนิ งานจริง 70



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