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

ระบบขายสนิ ค้าออนไลน์ ประเภท สนิ ค้าอปุ กรณช์ ่าง TPการชา่ ง E-Commerce for TP Karchans Technician Tools นายพฒุ ิพงษ์ มว่ งไม้ นายธรรมธชั อนุ่ ศริ ิ โครงงานนเ้ี ปน็ ส่วนหน่ึงของการเรยี นตามหลักสูตรประกาศนียบตั รวชิ าชีพชน้ั สูง สาขาวิชาเทคโนโลยีธุรกิจดิจทิ ลั วทิ ยาลยั เทคโนโลยอี รรถวิทย์พณชิ ยการ ปกี ารศกึ ษา 2565



บทคัดย่อ หัวขอ้ โครงงาน ระบบการขายสินค้าออนไลน์ ประเภท อุปกรณก์ ารชา่ ง (TPการช่าง) E-Commerce for TP Karchans Technician Tools ผจู้ ัดทำโครงงาน 1. นายพฒุ พิ งษ์ ม่วงไม้ รหัสประจำตวั 40169 2. นายธรรมธัช อนุ่ ศริ ิ รหสั ประจำตวั 40401 อาจารยท์ ่ีปรึกษาหลกั อาจารย์นราภรณ์ เจริญชยั อาจารยท์ ่ปี รึกษารว่ ม อาจารย์ฐิตริ ตั น์ นยั พฒั น์ สาขาวชิ า เทคโนโลยธี ุรกิจดิจทิ ลั สถาบัน วิทยาลยั เทคโนโลยีอรรถวิทยพ์ ณชิ ยการ ปกี ารศึกษา 2565 ................................................................................................................................................................ บทคดั ย่อ คณะผู้จัดทําได้คิดทำโครงงานนี้นั้นเพื่อสร้างเว็บไซต์เรื่องของระบบขายสินค้าออนไลน์ ประเภท อุปกรณ์การช่าง (TPการช่าง) โครงงานนี้เพื่อให้ผู้คนสนใจเกี่ยวกับสินค้าอุปกรณ์ช่างหรือ เครื่องมือช่างมากขึ้นเป็นการเผยแพร่อย่างทั่วถึง ให้บุคคลที่จะสนใจได้เข้ามาศึกษาต่อผ่านทาง เว็บไซต์และสามารถใช้งานได้จริงเกี่ยวกับระบบขายสินค้า ออนไลน์ ประเภท อุปกรณ์การช่าง (TPการชา่ ง) เว็บไซตข์ องเราจะนําเสนอหลายอย่างเกย่ี วกบั สนิ คา้ อปุ กรณ์ชา่ งและเครื่องมือ โครงการระบบขายสินคา้ ออนไลน์ ประเภทอปุ กรณ์การชา่ ง ได้รบั การพฒั นามาจากเวบ็ ตน้ แบบ หลาย ๆ เวบ็ โดยนําข้อมลู มาเสนอใหด้ ูนา่ สนใจมากยิ่งขึ้นและอยากศกึ ษาเพ่มิ เตมิ โดยจะมกี ารนาํ เสนอ สินค้าเกี่ยวกับเครื่องมือช่าง มีการทำปุ่มเมนูเพื่อเชื่อมโยงต่าง ๆ เพื่อความสะดวกสบายในการใช้ เวบ็ ไซต์ และมกี ารนําภาพมาตกแต่งเว็บไซต์ให้ดสู วยงามมากยิง่ ข้ึน ประโยชน์ของเว็บไซต์ ระบบขายสินค้าออนไลน์ ประเภท อุปกรณ์การช่าง (TPการช่าง) โครงงานนี้เป็นประโยชน์ให้กับผู้อื่นที่เข้ามาชมเว็บไซต์เกี่ยวกับ ระบบขายสินค้าออนไลน์ ประเภท อุปกรณ์การช่าง (TPการช่าง) ด้วยเหตุนี้พวกเราเลยสร้างเว็บไซต์ขึ้นมาเพื่อใช้ประโยชน์เกี่ยวกับการ ซื้อสนิ ค้าผ่านทางออนไลน์ได้จริงอกี ดว้ ย ข

กิตติกรรมประกาศ โครงการระบบขายสินค้าออนไลน์ ประเภท อุปกรณ์การช่าง (TPการช่าง) ฉบับน้ีได้ จัดทำ ขึ้นมาด้วยความต้ังใจและความพยายามเป็นอย่างมากโดยได้รบั ความร่วมมือเป็นอยา่ งดจี ากทุกท่านท่ี เกี่ยวข้องกับ โครงการฉบับนี้ไม่ว่าจะเป็นท่านอาจารย์ทุกท่านรวมถึงเพื่อน ๆ และผู้ที่มีส่วน ร่วมใน โครงการฉบับนี้ ขอขอบพระคุณอาจารย์นราภรณ์ เจริญชัย ท่ีปรึกษาโครงการ และ อาจารย์ฐติ ริ ตั น์ นัยพัฒน์ ที่ปรึกษาร่วมโครงการที่ได้ให้การสนับสนุนให้ความช่วยเหลือรวมทั้งคำปรึกษา และคำแนะนำ ตลอด การทำโครงการ รวมท้ังท่านอาจารย์สาขาวิชาเทคโนโลยีธุรกิจดิจิทัลทุกท่านที่คอย ตักเตือนส่วนท่ี ผิดพลาดของโครงการน้ี ขอขอบคุณวิทยาลัยเทคโนโลยีอรรถวิทย์พณิชยการที่ได้ เอื้อเฟื้อตำราจาก หอ้ งสมุดทเี่ กยี่ วขอ้ งกับโครงการพร้อมท้ังขอบพระคณุ ทา่ นคณะกรรมการในการ สอบโครงการที่ให้คำ ติชมในการสอบวชิ าโครงการเพ่ือท่ีคณะผจู้ ัดทำได้นำไปปรับปรุง แกไ้ ขในส่วนท่ีบกพร่องให้ดีขึ้นเพื่อท่ี โครงการในคร้ังนจี้ ะได้ออกมาสมบูรณ์ ขอขอบพระคุณพ่อแม่ บุคคลภายในครอบครัวทุกท่านที่คอยให้กำลังใจและให้โอกาสใน การศึกษาที่วิทยาลัยเทคโนโลยีอรรถวิทย์พณิชยการ รวมทั้งเพื่อน ๆ ทุกคนที่คอยช่วยให้คำปรึกษา ร่วมทกุ ข์ร่วมสุขและอุปสรรคต่าง ๆ ไปดว้ ยกนั จนทำใหก้ ารดำเนินการวชิ าโครงการน้ีได้ลลุ ่วงและผ่าน ไปดว้ ยดี พฒุ ิพงษ์ มว่ งไม้ ธรรมธัช อุ่นศริ ิ ค

คำนำ การจัดทำโครงงานนี้เป็นส่วนหนึ่งของวิชาโครงงาน 1 (30204-8502) และโครงงาน 2 (30204-8503) ตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล โดย คณะผู้จัดทำได้จัดทำโครงงานเว็บไซต์ระบบการขายออนไลน์ประเภท อุปกรณ์การช่าง (TPการ ช่าง) โดยมีการสร้างระบบเพ่ือ นำเสนอผลงานแกผ่ ้ทู ี่สนใจในการทำเว็บไซต์ เว็บไซต์ที่คณะผู้จัดทำได้จัดทำนั้น ประกอบไปด้วยความรู้เกี่ยวกับการวางจัดสินค้า การเชค็ อุปกรณ์ช่าง การเพิ่ม ลบ และบันทึกสินค้า โดยภายในเว็บไซต์จะประกอบไปด้วยข้อมูลอุปกรณ์ช่าง เพิ่ม ลบข้อมูล เพื่อให้เข้าใจในระบบสต็อกสินค้า ส่วนประกอบต่าง ๆ ภายในระบบและสามารถใช้ คอมพิวเตอร์ได้อย่างมี ประสิทธิภาพสูงสุด รู้จักแก้ไขและป้องกนั ภัยคุกคามทางคอมพิวเตอร์เบือ้ งต้น ได้อกี ด้วย รวมถงึ ยงั สามารถ นำความรู้ทไ่ี ด้จากการศกึ ษาไปประยกุ ต์ใชใ้ นชวี ติ ประจำวันหรอื ประกอบ เป็นอาชพี รายได้เสรมิ หากโครงงานน้ีมีข้อผิดพลาดประการใด ทางคณะผ้จู ัดทำขออภยั ไว้ ณ ทน่ี ี้ และจะดำเนนิ การ พฒั นาผลงานทางด้านคอมพิวเตอรใ์ หพ้ ัฒนาใหด้ ขี ึ้นไป คณะผูจ้ ดั ทำ 24 มกราคม 2566 ง

สารบัญ หน้า ก หนา้ อนุมตั ิ ข บทคดั ย่อ ค กติ ตกิ รรมประกาศ ง คำนำ จ สารบญั ช สารบัญรปู ฎ สารบญั ตาราง บทที่ 1 บทนำ 1 2 1.1 ภูมหิ ลังและความเปน็ มา 2 1.2 วตั ถปุ ระสงค์โครงการ 2 1.3 ขอบเขตการศึกษา 3 1.4 ประโยชน์ทค่ี าดวา่ จะไดร้ บั 4 1.5 แผนการดำเนนิ งาน 5 1.6 เครอื่ งมือทใ่ี ช้พัฒนาโปรแกรม 1.7 งบประมาณการดำเนินงาน 6 บทท่ี 2 ระบบงานและทฤษฎที ่ีเกย่ี วขอ้ ง 7 2.1 ระบบงานในปัจจบุ นั 7 2.2 ปัญหาระบบงานในปจั จุบนั 8 2.3 การวเิ คราะหแ์ ละความต้องการของระบบใหม่ 35 2.4 ทฤษฎีท่เี ก่ยี วข้อง 2.5 ระบบงานทีเ่ ก่ียวข้อง 36 บทท่ี 3 การออกแบบระบบงานด้วยคอมพวิ เตอร์ 40 3.1 การออกแบบระบบงาน (Flowchart) 41 3.2 การออกแบบแผนภาพบริบท (Context Diagram) 49 3.3 แผนภาพการไหลของขอ้ มลู (Dataflow Diagram) 50 3.4 การออกแบบแผนภาพความสมั พันธข์ องข้อมลู 52 3.5 พจนานกุ รมข้อมูล (Data Dictionary) 3.6 การออกแบบ Sitemap จ

สารบญั (ต่อ) หน้า 53 3.7 การออกแบบ (Story Board Design) 57 3.8 การออกแบบสิ่งนำเขา้ (Input Design) 57 3.9 การออกแบบส่งิ นำออก (Output Design) บทท่ี 4 การพฒั นาระบบการขายสนิ คา้ ออนไลน์ ประเภท อปุ กรณ์การช่าง (TPการชา่ ง) 58 4.1 เคร่ืองมือและอปุ กรณ์ท่ีใช้ 58 4.2 โปรแกรมทใี่ ช้ในการพฒั นา 59 4.3 การติดตั้งโปรแกรมและระบบ 65 4.4 วิธกี ารนำไปใชง้ าน บทที่ 5 สรุปผลการทำโครงงาน 80 5.1 สรุปผลโครงงาน 81 5.2 ปัญหาและอปุ สรรคในการดำเนินงาน 82 5.3 สรปุ เวลาการทำงานจริง (Gantt Chart) 84 5.4 สรปุ ค่าใช้จา่ ยในการดำเนนิ การจริง 85 บรรณานุกรม 86 ภาคผนวก 87 - ใบขอเสนออนุมตั โิ ครงการระบบคอมพวิ เตอร์ (ATC.01) 88 - ใบขอเสนออาจารย์ทป่ี รกึ ษารว่ มโครงการ (ATC.02) 89 - ใบขอสอบโครงการระบบคอมพวิ เตอรธ์ ุรกิจ (ATC.03) 91 - ใบรายงานความคบื หนา้ โครงการระบบคอมพิวเตอร์ธุรกิจ (ATC.04) 93 - ใบบนั ทึกการเขา้ พบทปี่ รกึ ษาโครงการ (ATC.05) 98 - ใบขออนญุ าตอาจารย์ที่ปรกึ ษาร่วมจดั ทำ เอกสารบทท่ี 4-5 (ATC.06) 99 - ใบรับรองการนำไปใชป้ ระโยชน์ไดจ้ รงิ (ATC.07) 103 ประวัตผิ ู้จดั ทำโครงการ ฉ

สารบัญรูป หน้า 6 รูปที่ 2.1 ระบบงานในปัจจุบนั (Flowchart) 14 รูปท่ี 2.2 แสดงตัวอยา่ งโครงสรา้ งเวบ็ ไซต์ 15 รปู ท่ี 2.3 แสดงคณุ ลกั ษณะของสี 15 รูปที่ 2.4 แสดงความตา่ งของประเภทสี 16 รปู ที่ 2.5 แสดงแม่สขี องแสง 17 รูปท่ี 2.6 แสดงแม่สวี ัตถธุ าตุ (CMYK) 18 รูปท่ี 2.7 แสดงวงจรสี (Color Wheel) 18 รูปท่ี 2.8 แสดงวรรณะของสี (Tone of Color) 19 รูปท่ี 2.9 แสดงสตี รงขา้ ม (Complementary Color) 20 รูปท่ี 2.10 แสดงสขี ้างเคียง (Analogous Color) 23 รูปท่ี 2.11 แสดงหน้าต่างการทำงานโปรแกรม Adobe Dreamweaver 24 รปู ท่ี 2.12 แสดงหน้าต่างโคด้ ของโปรแกรม Adobe Dreamweaver 25 รูปท่ี 2.13 แสดงหนา้ ตา่ งการทำงานของโปรแกรม Adobe Photoshop 27 รูปที่ 2.14 แสดงแถบเครอ่ื งมือ 28 รูปที่ 2.15 แสดงหน้าตา่ งการทำงานของโปรแกรม Canva 29 รูปที่ 2.16 แสดงหน้าตา่ งการทำงานของโปรแกรม XAMPP 30 รปู ที่ 2.17 แสดงหน้าตา่ งการทำงานของโปรแกรม Microsoft Visio 31 รปู ที่ 2.18 แสดงหน้าตา่ งเริ่มต้นของโปรแกรม Microsoft Visio 31 รปู ที่ 2.19 แสดงหน้าต่างหน้าหมวดหมหู่ ลักของโปรแกรม Microsoft Visio 32 รปู ที่ 2.20 แสดงตัวอยา่ งผงั งานองค์กร 33 รปู ที่ 2.21 แสดงตัวอยา่ งโฟลว์ชารต์ สำหรับงานดา้ นธรุ กจิ 34 รปู ที่ 2.22 แสดงตัวอยา่ งเมนูนีแ้ บง่ หมวดหม่ขู องแผนผงั 36 รปู ที่ 3.1 การออกแบบระบบงาน (Flow Chart) 37 รปู ที่ 3.2 Flowchart การสมคั รสมาชิก 38 รปู ท่ี 3.3 Flowchart การเขา้ สู่ระบบ 39 รูปท่ี 3.4 Flowchart แสดงการส่ังซอื้ 40 รูปที่ 3.5 การออกแบบแผนภาพบรบิ ท (Context Diagram) 41 รปู ที่ 3.6 Data Flow Diagram Level 0 ระบบขายสินค้าออนไลนป์ ระเภท ช อุปกรณ์การชา่ ง

สารบญั รปู (ตอ่ ) หน้า 42 รปู ท่ี 3.7 Data Flow Diagram Level 1 Process1 ระบบ จัดการข้อมลู สนิ คา้ 43 รปู ท่ี 3.8 Data Flow Diagram Level 1 Process2 ระบบ สมัครสมาชกิ 44 รูปที่ 3.9 Data Flow Diagram Level 1 Process3 ระบบ การจัดการขอ้ มูลสมาชกิ 45 รูปท่ี 3.10 Data Flow Diagram Level 1 Process4 ระบบ การเขา้ สรู่ ะบบ 46 รปู ท่ี 3.11 Data Flow Diagram Level 1 Process5 ระบบ เลอื กซอ้ื สนิ ค้า 47 รปู ที่ 3.12 Data Flow Diagram Level 1 Process6 ระบบ ยืนยนั การสงั่ ซือ้ 48 รูปท่ี 3.13 Data Flow Diagram Level 1 Process7 ระบบ ตรวจสอบการสัง่ ซื้อ 49 รูปท่ี 3.14 E-R Diagram ระบบขายสนิ ค้าออนไลน์ประเภท อปุ กรณ์ TPการชา่ ง 52 รูปท่ี 3.15 ผังโครงสร้างเวบ็ ไซต์ (Site Map) 53 รูปที่ 3.16 แสดงหน้า Index 53 รปู ที่ 3.17 แสดงหนา้ Login 54 รูปที่ 3.18 แสดงหนา้ สมัครสมาชกิ 54 รปู ท่ี 3.19 แสดงหน้าแรก 55 รปู ที่ 3.20 แสดงหน้าสนิ คา้ 55 รปู ที่ 3.21 แสดงหนา้ การสัง่ ซ้อื สนิ คา้ 56 รูปท่ี 3.22 แสดงหนา้ ชอ่ งทางการชำระเงนิ 56 รปู ท่ี 3.23 แสดงหน้าวิธตี ดิ ตอ่ เรา 59 รปู ที่ 4.1 เขา้ เว็บไซตด์ าวนโ์ หลด 59 รูปท่ี 4.2 หน้าตา่ งการตดิ ต้ัง Xampp 60 รปู ที่ 4.3 หนา้ ต่างเลือกการทำงานของ Xampp 60 รปู ท่ี 4.4 หนา้ ตา่ งเลอื กทีอ่ ยู่การติดตงั้ 61 รปู ท่ี 4.5 หนา้ ตา่ งการเลอื กภาษาการใชง้ าน 61 รปู ท่ี 4.6 หนา้ ตา่ งการพรอ้ มจะตดิ ตัง้ 62 รูปที่ 4.7 หนา้ ตา่ งรอการติดตัง้ 62 รปู ท่ี 4.8 หน้าตา่ งบอกการพรอ้ มตดิ ต้งั ซ

สารบญั รปู (ตอ่ ) หน้า 63 รปู ท่ี 4.9 หนา้ ตา่ งการเปิดใช้งานโปรแกรม Xampp 63 รูปที่ 4.10 หน้าต่างของส่วน phpMyAdmin 64 รปู ที่ 4.11 หน้าตา่ งการควบคมุ ของโปรแกรม Xampp 65 รูปที่ 4.12 เขา้ เวบ็ ไซต์ https://www.000webhost.com/ 65 รปู ท่ี 4.13 เลอื ก create website 66 รปู ท่ี 4.14 เลอื กไฟล์ file manager 66 รปู ท่ี 4.15 นำไฟลท์ ต่ี อ้ งการข้ึนโฮสต์ลาดใส่ folder public_html 67 รูปท่ี 4.16 แสดงไฟล์ทั้งหมดที่นำเข้ามาใส่ใน Folder 68 รูปท่ี 4.17 เข้าสเู่ วบ็ ไซต์ https://www.000webhost.com/ 68 รปู ที่ 4.18 แสดงหนา้ เข้าสรู่ ะบบของสมาชกิ 69 รูปท่ี 4.19 แสดงหน้าสมคั รสมาชกิ 69 รูปที่ 4.20 แสดงหนา้ แรก 70 รูปที่ 4.21 แสดงหนา้ ติดตอ่ เรา 70 รูปที่ 4.22 แสดงหนา้ วิธกี ารส่ังซอื้ 71 รูปที่ 4.23 แสดงหนา้ สินค้า 71 รูปท่ี 4.24 แสดงหน้าสินคา้ ingco 72 รปู ท่ี 4.25 แสดงหน้าสินค้า dewalt 72 รปู ท่ี 4.26 แสดงหนา้ สนิ ค้า Milwaukee 73 รปู ท่ี 4.27 แสดงหนา้ สินคา้ มีปมุ่ ใหเ้ ลือกประเภทและปุ่มรายละเอียด 73 รปู ที่ 4.28 แสดงหน้ารายละเอียดสินค้า 74 รปู ท่ี 4.29 แสดงหน้าตะกรา้ สนิ ค้า 74 รปู ที่ 4.30 แสดงหนา้ รายการคำสั่งซ้อื 75 รปู ที่ 4.31 แสดงหน้ายนื ยนั การส่ังซอื้ 75 รูปที่ 4.32 แสดงหนา้ สง่ สลปิ 76 รูปที่ 4.33 แสดงหนา้ รายการคำส่ังซอ้ื เม่อื ชำระเงินเรยี บรอ้ ย 76 รูปที่ 4.34 แสดงหน้าพิมพ์ใบสั่งซือ้ 77 รูปที่ 4.35 แสดงหนา้ สว่ นของแอดมินทีแ่ กไ้ ขได้ ฌ

สารบญั รูป (ตอ่ ) หน้า 77 รูปที่ 4.36 แสดงหน้าแกไ้ ขข้อมลู สมาชกิ 78 รูปที่ 4.37 แสดงหน้าเพ่มิ ลบแก้ไขขอ้ มูลสนิ ค้า 78 รปู ท่ี 4.38 แสดงหนา้ เพิม่ ลบแก้ไขแบรนด์ 79 รปู ท่ี 4.39 แสดงหน้าเพม่ิ ลบแกไ้ ขประเภทสนิ ค้า 79 รปู ท่ี 4.40 แสดงหน้าตรวจสอบรายการคำสัง่ ซื้อ ญ

สารบัญตาราง หน้า 3 ตารางที่ 1.1 แผนการดำเนินงาน (Gantt Chart) 4 ตารางท่ี 1.1 แผนการดำเนินงาน (Gantt Chart) (ตอ่ ) 5 ตารางที่ 1.2 งบประมาณการดำเนนิ งาน 20 ตารางท่ี 2.1 แสดงความรูส้ กึ เก่ยี วกับสใี นเชงิ จิตวทิ ยา 21 ตารางท่ี 2.1 แสดงความรู้สึกเก่ียวกับสีในเชงิ จติ วทิ ยา (ต่อ) 22 ตารางท่ี 2.2 แสดงสัญลกั ษณร์ ะบบกระแสข้อมลู 22 ตารางที่ 2.3 แสดงสัญลกั ษณ์ Flowchart 22 ตารางท่ี 2.3 แสดงสญั ลกั ษณ์ Flowchart (ต่อ) 50 ตารางท่ี 3.1 ตารางข้อมูลสินคา้ 50 ตารางท่ี 3.2 ตารางข้อมลู รายละเอียดการสั่งซื้อ 51 ตารางท่ี 3.3 ตารางข้อมลู ประเภทสินค้า 51 ตารางที่ 3.4 ตารางขอ้ มลู สินค้า 51 ตารางที่ 3.5 ตารางขอ้ มลู รายละเอยี ดใบสง่ั ซือ้ 80 ตารางที่ 5.1 แสดงขนาดของโปรแกรม 82 ตารางท่ี 5.2 สรุปเวลาการดำเนินงานจริง 83 ตารางท่ี 5.3 สรปุ เวลาการดำเนนิ งานจริง (ตอ่ ) 84 ตารางท่ี 5.4 สรุปค่าใช้จา่ ยในการดำเนินงานจริง ฎ

ฎ

บทที่ 1 บทนำ 1.1 ภมู หิ ลังและความเปน็ มา ในปัจจุบัน E-Commerce หรือ พาณิชย์อิเล็กทรอนิกส์มีส่วนสำคัญอย่างมากในการดำเนิน ธุรกิจโดยการซื้อขายสินค้าและบริการต่าง ๆ ผ่านสื่ออิเล็กทรอนิกส์ ไม่ว่าจะเป็นโทรศัพท์ โทรทัศน์ โดยเฉพาะอินเทอร์เน็ต เราจะเห็นได้ว่าในปัจจุบันนี้ เราสามารถเข้าถึงอินเทอร์เน็ตได้ง่าย ขึ้น ทำให้การทำการตลาดแบบออนไลนน์ ้ันเติบโตขึ้นอยา่ งรวดเร็ว ซึ่ง E-Commerce นั้นมีประโยชน์ กับธุรกิจ ของเราเป็นอย่างมาก สามารถทำการค้าได้แบบอัตโนมัติ หรือสามารถเปิดขายสินค้า ได้ทั่ว โลก ไม่วา่ จะอยู่ทไ่ี หนกส็ ามารถเข้าถึงสินค้าของเราไดต้ ลอด 24 ช่ัวโมง ทำให้เข้าถึงกลุ่มลกู คา้ ได้อย่าง ตรงจุด และที่สำคัญ E-Commerce จะช่วยเพิ่มยอดขายสินค้าให้กับเราโดยที่เราไม่ต้องลงแรงอะไร มากมาย นอกจากที่กล่าวมาแล้ว E-Commerce ยังสามารถช่วยอำนวยความสะดวกให้กับนักธุรกิจ แบบเรา ๆ ได้อกี หลายด้านเลยทีเดียว ปัจจุบันร้านTPการช่าง เปิดบริการขายสินค้าประเภทอุปกรณ์การช่างแบบออนไลน์ ทำให้ ลูกค้าสามารถสั่งซ้อื สินค้า ไดง้ า่ ย เพราะในรูปแบบเว็บไซต์ดังนั้นผู้ซอ้ื จะทราบรายละเอียดอุปกรณ์การ ช่างและราคาของอุปกรณ์นั้น ๆ ได้สะดวกและรวดเร็ว สามารถเข้าถึงได้หลากหลายช่องทาง เช่น โทรศัพท์ คอมพิวเตอร์ แท็บเล็ต มีความสะดวกในการดูรายละเอียดสินค้าการสั่งซื้อ และเข้าถึง ผู้บริโภคได้ง่าย ในกรณีสินค้าท่ีต้องการอยู่ห่างไกลจากที่อยู่ของผู้ซื้อทำให้การคมนาคมเป็นไปได้ยาก จึงทำให้การซื้อ ขายสินค้าผ่านเว็บไซต์หรือระบบ E-Commerce เข้ามาเป็นตัวเลือกในการซื้อสินค้า ทีก่ ำลังได้รบั ความนยิ มเป็นอย่างมาก ทำใหเ้ กิดการแข่งขันสงู เราจงึ ไดร้ วบรวมข้อมลู ต่าง ๆ เก่ียวกับ อุปกรณ์การช่างเข้ามาในระบบ E-Commerce ในรูปแบบของเว็บไซต์ เพื่อให้ผู้ที่ใช้งานอุปกรณ์การ ชา่ งเข้าถงึ ขอ้ มลู ของสนิ คา้ ตา่ ง ๆ ได้สะดวกและเลือกสินคา้ ไดห้ ลากหลาย ดังนน้ั ผู้จัดทำโครงการได้เลง็ เหน็ ความสำคัญของระบบ E-Commerce จึงได้จดั ทำระบบขาย สินค้าออนไลน์ประเภทอุปกรณ์การช่างเพื่อเพิ่มช่องทางการค้าขายให้มากขึ้น และ อำนวยความ สะดวกให้แกล่ ูกคา้ ในระบบ E-Commerce ในรูปแบบของเว็บไซต์และเราจะพฒั นาข้อมลู และ ระบบ E-Commerce ใหด้ ยี ่งิ ข้ึน

1.2 วัตถุประสงค์โครงการ 1. เพื่อพัฒนาการสร้างระบบขายสนิ ค้าออนไลน์ประเภทอุปกรณก์ ารช่าง 2. เพ่ือใหล้ กู ค้าสามารถเลอื กซื้ออุปกรณ์ไดห้ ลากหลายมากข้นึ 3. เพื่อพฒั นาทกั ษะการออกแบบเวบ็ ไซตแ์ ละตอ่ ยอดในการทำงาน 4. เพื่อพัฒนาการขายสนิ คา้ ออนไลน์โดยใชร้ ะบบ E-Commerce ด้วยภาษา PHP 1.3 ขอบเขตการศึกษา สว่ นของสมาชิกผู้ใช้งาน 1. ผใู้ ชง้ านสามารถสมัครสมาชิกและเข้าส่รู ะบบเพอ่ื ยีนยนั ตวั ตนภายในระบบได้ 2. ผู้ใชง้ านสามารถเลอื กสินคา้ ออนไลน์ได้ 3. ผู้ใช้งานสามารถคำนวณราคาสินคา้ ได้ สว่ นของผู้ดแู ลระบบ 1. ผู้ดแู ลสามารถ จัดการขอ้ มลู รายการสนิ คา้ ได้ 2. ผดู้ แู ลสามารถ จัดการขอ้ มลู สมาชกิ ผใู้ ชง้ านได้ 3. ผดู้ แู ลสามารถ ตรวจสอบใบสงั่ ซื้อได้ 1.4 ประโยชน์ทค่ี าดวา่ จะได้รับ 1. ได้พฒั นาการสรา้ งระบบขายสนิ คา้ ออนไลน์ประเภทอุปกรณก์ ารชา่ ง 2. ได้ทำให้ลูกคา้ สามารถเลือกซื้ออปุ กรณก์ ารชา่ งสะดวกยง่ิ ข้ึน 3. ไดพ้ ัฒนาทกั ษะการออกแบบเวบ็ ไซต์และตอ่ ยอดในการทำงาน 4. ไดพ้ ัฒนาการขายสนิ คา้ ออนไลนโ์ ดยใช้ระบบ E-Commerce ดว้ ยภาษา PHP 2

1.5 แผนการดำเนนิ งาน (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 % ตารางที่ 1.1 แผนการดำเนินงาน (Gantt Chart) 3

รายการ พฤศจิกายน 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 กิตติกรรมประกาศ คำนำ สารบญั สารบัญรปู สารบญั ตาราง ประวตั ผิ ู้จดั ทำ หน้าอนมุ ตั ิ ภาคผนวก ATC.04-05 20-27 ก.พ.66 ส่งเลม่ โครงงาน 28 ก.พ.66 สง่ ไฟลเ์ อกสาร Word PDF โปรแกรม ไฟลรวม PDF ไมเ่ กิน 10 มนี าคม 2566 ตารางท่ี 1.1 แผนการดำเนินงาน (Gantt Chart) (ตอ่ ) 1.6 เครื่องมือท่ใี ช้พฒั นาโปรแกรม 1. โปรแกรม Adobe Dreamweaver CS6 ใชอ้ อกแบบหนา้ เวบ็ ไซต์ 2. โปรแกรม Adobe Photoshop 2021 ใชแ้ ต่งและออกแบบรปู ภาพ 3. โปรแกรม Microsoft Visio2019 ใชท้ ำ Flowchart 4. โปรแกรม XAMPP v.3.2.2 ใชใ้ นการสร้างเซฟิ เวอร์สำเร็จรูป 5. โปรแกรม Canva ใช้ในการดีไซนโ์ ลโก้ 4

1.7 งบประมาณการดำเนนิ งาน ลำดับ รายการ จำนวน ราคา (บาท) 1 กระดาษ A4 4 รมี 600 2 เครอ่ื งปร้นิ ท์ (ต่อกล่มุ ) 1 เครื่อง 300 3 ซองเอกสาร 3 ซอง 60 4 คา่ เขา้ เลม่ 1 เลม่ 200 รวมเป็นเงิน 1,160 ตารางที่ 1.2 งบประมาณการดำเนินงาน 5

บทที่ 2 ระบบงานการขายสนิ คา้ ออนไลน์ ประเภทสินคา้ อุปกรณ์การชา่ ง(TPการช่าง) และทฤษฎีทีเ่ กย่ี วขอ้ ง 2.1 ระบบงานในปัจจบุ นั (Flowchart) N Y N Y รปู ที่ 2.1 Flowchart ปั ุ

2.2 ปัญหาระบบงานในปัจจบุ นั 1. E-Commerce ีป ด โ ี ำห ฐ ำห ด ดี ี ี ำห ด พห ุ ผแผ ำห ึ ด พฒ โ โ ี 2. ี ดี ถี ผ แพ ดี ผด พี ด 3. ผ ี ห 4. ผ 2.3 การวเิ คราะห์และความตอ้ งการของระบบใหม่ 1. ี ศึ ษ ฎ ี แ ฐ พ ห ดปัญห ภ ห แ โ โ ีห ๆ ี ี ึ พ ห ป็ พฒ แ ด พฒ โ โ ี 2. ห ห พ ห ด ีถ ผด พี 3. ำ ป็ ห ำ โ ญี ี ดำ หแ ำ ป็ ห ี Login ถึ ถ ด ำ ห ถ ด ห ป็ พ ด ี Login แ 4. ี ป้ ถึ พ ห ำ ป ดแ ผดแ ี ำแ ด 7

2.4 ทฤษฎีที่เก่ียวข้อง ึ โ แ ปี พ.ศ. 2513 ึ ด ี โ ห ี ฟ ี (EFT = Electronic Fund Transfer) แ ี พี ษ ด หญแ ถ ีโ ีด ห ีดี (EDI = Electronic Data Interchange) ึถ ด ี ป็ ดี ป็ แ พึ หถ ผผ ห ผ ผ ป ี ป็ ห ี ถึ โป แ ๆ ด ึ แี หุ ปถึ ี ำ ีพ ึ ี ด โ ด ุ แุ ถึ ป ปี พ.ศ. 2533 ำ ผ พึ ด ด ด ึ ห ุผ ี ำ ห โ ด โป แ ุ ี ด พฒ ึ ถึ ด ถึ ป ปี พ.ศ. 2537 – 2542 ถ ด ห ี ป็ ี แด แ ด ึ ดด ีี ษ ๆ ดห ำ ญแ ี นยิ ามของพาณชิ ย์อเิ ลก็ ทรอนกิ ส์ ุ ปแ โด ุ ถึ พ ห ถึ ำธุ ำ โฆษ โด ผ ป ภ ๆ โด ฉพ โด พ ุพ ห ถึ ดำ ธุ ุ ปแ ี ี โห แ ผแ ห ถึ ผ โ หำำด พ โด ดห ผ ภ ฑแ E-Commerce คอื อะไร E-Commerce พ E-Commerce Electronic Commerce ำธุ โด ห โฆษ ผ ดี ผ ๆ โศ ุ ี ี ุด ปั ุ โด ถ ี ภ พ ป ดีโ ป ธุ ด ำธุ E-commerce ถ ถึ ด ำห ด ๆ ดำ ธุ ด ป็ ดี 8

ประเภทของ E-Commerce 1. ธุ ผ ป ี ห B to C ( Business to Consumer ) ผ ป ี ผ ผ ำ ผ ป็ 2. ธุ ห ฐ ห B to G ( business to Government ) ี ี ธุ หภ ห ฐ ดี ผ ป ป ำปี ห ป็ 3. ธุ ธุ ห B to B ( business to Business ) ผป ฝ่ ำ ด ำธุ โด ป ี ึำ ผ 4. ฐ ฐ ห G to G ( Government to Government ) ฐ ีี ห ถึ ภ ฐ หญ ป็ ด ป ี ห ศ ี 5. ผ โภ ผ โภ ห C to C ( Consumer to Consumer ) ด ป ี ห ผ โภ ด ผ โภ ี ีห ถึ ุ ี ดป ธุ ป ศ ผ โภ ป ี หญ ผ พ ฟ Social Media พ ีห ด ด 6. ฐ ป ห G to C ( Government to Consumer ) ห ภ ฐผ ๆำ ี ภ ษีผ ป ด โห ด ฟ พ ี ๆผ ป 9

ทำไมเราจึงควรมีธุรกจิ รูปเเบบ E-Commerce ปั ุ ี ุ ปพ ๆ Social Media ห Internet ๆ ผ ถ ถึ ด ดด Internet ป็ ี ห ึ ป ำ ป ด ห ุ ี ำ หห ๆ ธุ ห ำ E-Commerce ึ พ ห ถึ ุ ป้ ห ี ธุ E-Commerce ี ดหี ด ด 1. พึ ห พ ถ ด ดผ ป ดีโ ผ Social Media 2. ด พ ถ ด พ โ ด ำห ถ ี ด ด 24 . 3. พ โ พ ีโ ถึ ุ ด ห ห ึ ถ ดภ ป ศ ป ศ ปั ุ ำ ด ึด 4. ด หด ถห ุ พ ป ุ ำ พด ธุ พ หห ห พ หธุ ุ ุฐ ุ ุ ห ำ ป ุ โฆษ พ ี ด 5. ำ ด ด ำ ถ ดผ ด ถ ป ห Social Media ผี ด ถ ำ ห ีป ด ำ ด ด ุ ป้ ห ี ี ีถ ป ธภ พ ด ึ โฆษ ธุ ด ด ี โฆษ ผ โ ศ ห ห พพ หลักการออกแบบเวบ็ ไซต์ ำญ ี แพ ี ี ปแ ผ ดดี ำ หผ ด ึ ป ห ถดึ ดด ำ ึ ำ ป็ ำ ีด แ แ แ ปแ โ 10

องคป์ ระกอบในการออกแบบเวบ็ ไซต์ แ พ ห ีป ธภ พ แ ถดึ ดด ผ ดดี ี ป ถ ึ ดแ 1. ี แ ีดี ี ี ป็ ห โด ำ ฉพ ี ำ ๆ ปแ หี ห โด ป็ ี ฟิ ภ พ ห ห ษ ี ำ ญ ี ำ ี ด ห ปพ ห ด ึ ห ห ำ ญห ผ ี ี ี ี แ โด ี ดดี 2. ำ แด ำ ี ปแ ฟิ โ ีแ แ ๆ หแ ห ี ึแ ป็ แ ดี ป ด ด ๆปี ห ด ุ ห แ ปแ ดี ห ด แ ำ แห 3. โดด ด ป็ ษ แ พ ห ถ ถึ ุดป ำ ดดี ี ป็ ษ แ ุด ด ห พ ห ถ ถึ ษ ด ี ุด โด ษ ด ุด ี ปภ พ ษ ห ฟิ ี ึ ป็ แ ห พ ด แ ด ห ี ุด 4. ห ดี ถ ห ป็ ี ำ ญ ี ดุ พ ี ำห ผด แห ด ห ห ีี แ ี ี ป ป ุ พฒ ห ห ี ถึ ี ถ ี ุด 5. ป็ ป้ พ หผ ด ึแ ีี ดแ ี ด ี ำ ญ ี ำแห ีำ 6. ุ ภ พ ีดี ี ุ ภ พ ีป ฏ ห ห ป็ ฟิ ด ษ ปภ พห ี ี ห ี ำ แ ด ผ ึ ห ีุ ภพ ถ แ ป็ ุด ด ี ำ หผ หญ ด ดดี พ ฉ ห ุ ภ พ ดด ด 7. ด ห ด แ ผ ดดี ี แ ด ผ ด ุ ปฏ ป็ พ 11

โ ๊ ุ๊ ห โ ศพ ถ ี ำ ญ ี ี ด แ ดผ แ ถ ดโด ีปญั ห ด 8. ี แ แ ีี แ ด ด แ แผ ดี แ ี ี ี ห ำห ี ถ แ ด ีุ ภพ ป หผ ด ป็ ดี 9. ี ำ ำ ี ีแ ถ ดดี ึ แ ำ หี แ แห พ ห ี ผดป ด แ ปัญห ด ี ี พ ด ดี ห ึ ๆ พ หผ ึ ุป รูปแบบโครงสร้างของเว็บไซต์ แ โ ถ ำ ดห ห แ ึ ึ แ ถด แ ุ ีึ ุ ป้ ห ี ำพ แ หห ุ ป้ ห ี ุด โด โ หญ ป ปด 4 ปแ ด ี 1. โ แ ี ำด ป็ โ แ ธ ด ี ี ุด ี ด แ ถำ ำด ด ป็ ดี ห ีี ด ี ห ี หญ ป็ พ ีห ห ด โด ษ ห ปี ห ีศ ห ๆแ ปุ่ ด ห -ถ ห ำห ด ศ ึ ำ ห ป็ ป แ โ แ ี ำด ี ี ำ หผ ี หพ ถ ำห ด ศ หด ด 2. โ แ ำด ีี พ ห ถ ถึ ๆ ด ึ โด ี แ ห ป็ ๆ แ ี ำ ี ด ๆ ี ดห ำห ถ ำ โ หด ึ โด ีโฮ พ ป็ ุด แ ุด ุด ดี ี ำ ป โ ห ป็ ำด 3. โ แ ป็ โ แ ีี แี ดห ุ ด ห ึ พ หผ ถ ห ๆด ึ แ ษ ีี โ หแ ึ แ ำ หผ ถ 12

ป ี ศ ห ำห ด ศ หด ด ึ ำห ี แถ ำ ห ี ึ พี ถ ถึ ห 4. โ แ แ ุ ป็ โ ีด ป็ ีถ ดห ุ ี ุด โด ุ ห ี โ ถึ ห ด ำ ห พ ๆี ด แี ึ โ ป ภ ดดี ข้อมลู สำคัญทคี่ วรมอี ย่ใู นเวบ็ ไซต์ ุดป ห ึ พ ดึ ดด หผ ด ด ีด ด ๆ ึ ดแ ด ำ ญ ผี ดห ด ห ๆ • ี ด ผ ภ ฑ ึ ป็ ีด • ี ษ ห ถ ผี - • ำห ด โ • ห ๆห พด ี • ำถ ด ๆ การออกแบบโครงสรา้ งของเวบ็ ไซต์ ห ป็ แผ ผ ี โ ด ำด ห ีห ี พ ห ห ห ี ำ โ ถึ ห ๆห โ ี หห แ ด แโ ึ ี ำญ ึ ถ ำ ดห ห ปแ ด แ ีแ ดห ๆ ี ด ี ุด 2 ปแ • ดโ ุ ห (Content-based Structure) • ดโ ุ ผ (User-based Structure) 13

รปู ท่ี 2.2 แ ด โ ทฤษฎีสี ห ห ป็ ี ีผ ถึ ีำ ห ด ี ห ถึ ษ ึป ำ ึ ด ีดห ี แี แ หด ึ ๆ ธพ ี ด ศ คำจำกดั ความของสี ถี ด ี ุษ ถ ผด ำ 1. แ ี ี ถุ (PIGMENTARY PRIMARY) ป ด แด ห 2. แ ี ี ป็ 3. ี ี ด ผ แี คุณลกั ษณะของสี ษ ีแ ี ี ดด 1. ีแ (HUE) ี ี ถ ี ผ ป็ ี ,ี พ แด ห ำ ี 2. ี ห ี (TINT) ี แี ีถ ผ ด ีำ 3. ีแ (SHADE) ี ีแ ถี ผ ด ดี ำ 14

รปู ท่ี 2.3 แ ด ุ ษ ี สีสามารถแยกออกเป็น 2 ประเภท 1. ธี ป็ ี ี ด ึ ธ ีแ ี ฟ้ ีด ี ุ ำหุ ี ดึ ธ ด พด ุษ ด ด แ ฟ้ ำ 2. ี ี ุษ ึ ห ด ห ึ ี ศ ๆ ฟฟ้ ำ ผ โด แ ป รูปที่ 2.4 แ ด ปภี 15

แมส่ ี (PRIMARIES) แห ำ ด ีแ ธี ผ ี ด ึ ี ี ี ีๆ ี ี ๆ ีป ฎ ด ึ แ ี ษ ีแ ุษ แ ุ ห ดแ ป ภ ี แม่สมี ี 2 ชนดิ คือ แ ี แ (RGB) ด ห ห แ ผ แ แ ป ึ ี 3 ี ีแด ี ห ถำ แ ีำ ป แ ี ึ ป็ พ ด ดี ี ี ี ุ แ ผแ ำห ด ถ ภ พ ภ พโ ศ ดแ ี แ ด ๆ โด RGB แี ด หี 3 ี ด แด (RED) ี (GREEN) แ ำ (BLUE) ึ ผ ีำ แ ำ ี ดุ ด ี รปู ที่ 2.5 แ ด แ ี แ (RGB) แ ี ถุธ ุ (CMYK) ป็ ี ี ด ธ แ หโด ี ี 3 ี ีแด ี ห แ ี ำ แ ี ถุธ ุ ป็ แ ี ี ำ ศ ป ุ ห ฯ ฯ แ ี ถธุ ุ ำ ผ ห ฑ ำ ห ด ี ึ ป็ ีธ ดผ แ ี ถุธ ุ ป็ ีห ี ป ี แ ด ๆ โด ภ พ ถ แ ป็ แ พ พ ีห พี 4 ี ฟ้ (CYAN) แด (MAGENTA) ห (YELLOW) ดำ (BLACK) ึ ำ แ ด ดี ำ 16

รูปท่ี 2.6 แ ด แ ี ถธุ ุ (CMYK) วงจรสี (Color Wheel) ี ี ี ด ผ ป็ แ แ ี 3 ี แ ด ป็ ี ห ึ ด ี ห ด 12 ี ึ แ ี ป็ 3 • ี ี 1 (Primary Colors) แ ี 3 ี ดแ แี ด ห แ ำ • ี ี 2 (Secondary Colors) ี ี ด ผ ป็ ๆ ห แ ี 3 ี ด ีพ ึ ี 3 ี • ี ี 3 (Tertiary Colors) ี ี ด ผ ป็ ๆ ห แ ี 3 ี ี ี2 ด ีพ ึ ี 6 ี • ี (Neutral Color) ี ี ด ผ ี ุ ี ีห แ ี3 ีผ ดี แ ี 3 ำ ด ป็ ด ษ ป็ ี 17

รูปที่ 2.7 แ ด ี (Color Wheel) วรรณะของสี (Tone of Color) ีแ ีแ ุ ีโด แ ึ ด ุ หภ โด แ ป็ 2 ี (Warm Tone) ป ด ี ห , ห , , แด , แด แ แด , ี (Cool Tone) ป ด ี , ำ , ำ , ี ำ ,ีแ ี ห รปู ท่ี 2.8 แ ด ี (Tone of Color) 18

สีตรงข้าม (Complementary Color) ี ห ถึ ี ี ำแห ีแ ี ด ด ดึ ( ) ึ ี ห ด 6 ดแ ห ึ ี ดแ ห ำ ผ ดี • ีห ี • แี ด ีี • ีำ ี • ีี ห ี แด • ี แด ีี ำ •ี ำ ีห รปู ที่ 2.9 แ ด ี (Complementary Color) สขี า้ งเคียง (Analogous Color) ี ี ห ถึ ี ี ี แ ีี ึห 19 ำ ดด ี หห ด ดแ ี ึ หญ ป็ ี ดี ี ี ดแ • - แี ด - แด - ห แด -แด – แด • - ี ห - ห - ี ห ห แด - – ห •-ีี - ี ำ -ำ ห ี ำ - ี – ี ห • - ี ำ - - แด ห ำ - ำ – ี ำ

รูปท่ี 2.10 แ ด ี ี (Analogous Color) ความร้สู ึกเกี่ยวกบั สีในเชิงจิตวทิ ยา รูป สี ความหมาย แี ด ห ึ ุแ ุ ห พี ุด ำญ ี หึ ุ ด ีี ี ุ ึ ป ดป ปี ีห ห ึแ ด แผ ดี ห ดห ุ ำี ีี ห ึี พผ ผ ธ ป ดภ ป ุ ุุ ีำ หึ ุ ุ ภุ พ ห แ ึ ีด ีศ ดศ์ ี ศ ด์ ป็ ี ถ ี ห ึีห ด ี ำ ีพ แฝ ศ ผดห ศ ด์ ฟี ้ ห ึ ป ดโป โ โป ด ป ดภ ห ป็ ีภ พ ห แ ปั ตารางท่ี 2.1 แ ด ึ ี ี 20

รปู สี ความหมาย ี ห ึ ุ ธ์ ด ด โ ปิด ผ ด ห ศ ธ ดี ีดำ ห ึดป ึ ห ดุ ด ีพ ุ โหด ศหแ ีพ หึ ุ โุ ห ุ หุ ด ี ห ึศ แึ หดห ี ุภ พ ุ ุ ถ ี หึ หห โ ี ำญ ญุ ุำ แผ ตารางท่ี 2.1 แ ด ึ ี ี () การวเิ คราะหร์ ะบบและการออกแบบ ( System Analysis and Design) ธี ี ศ ึ ห ธุ ดธุ ห ึ ห ห แ ศ ด ี ี แ หดี ึ ด ด ห พพ (Requirements) ศหพ แแ ำ ป็ แ แผ ห ี ี ศห ด แผนภาพกระแสข้อมูล (Data Flow Diagram : DFD) แผ ภ พ แ ห แผ ภ พ ห ป็ ี แ ด ห แ ป ผๆ พ ธ แห ี โด ป็ ห หด แ ี หผ ห โป แ ห ห ผห ผ 21

สัญลกั ษณ์ทีใ่ ช้ในการเขียนแผนภาพกระแสข้อมูล DeMarco & Yourdon Gane & Sarson ห Process : ำ ภ Data Store : แห ถ ป็ ด ฟ แ ฐ ห (File or Database) External Agent : ป ั ภ พแ ด ี ีผ Data Flow : แ ด ศ ำ หึ ป ี หึ ตารางท่ี 2.2 แ ด ญ ษ แ สญั ลักษณ์ Flow Chart ปภ พ ห ญ ษ ี ีแ ำธ Flowchart ห ผ ึ (Algorithm) พ ำ ห ห ำพด ี ำพด ห ำ ด ห ผี ด ปภ พ ญ ษ ห ญษ ห Flowchart (Start or Stop) ป ผ (Process) ำ ห แ ด ผ (Input or Output) ตารางที่ 2.3 แ ด ญ ษ Flowchart 22

ด (Decision) ุด (Connector) ศ ำ (Direction of Flow) ตารางที่ 2.3 แ ด ญ ษ Flowchart ( ) โปรแกรม Adobe Dreamweaver Dreamweaver ป็ โป แ ำห พี ี พฒ แ ปั ุ แ ป็ ี แ ห ุผ ำ Dreamweaver ถึ ป็ ี ผี พ หุ ำ ด ึ ถ พ ี ภ ษ HTML ึ พ หแ ด ผ ผ browser ป็ ปภ พห ึ ำห ำ ด พ ี HTML ปแ ด แ ด ผ ผ browser ป หผ ถ ี ห แ ห Dreamweaver โป แ แ ด ห ีแ ด ผ ห ถ ปแห พ ด โด ำ ี HTML ห ป็ Editor ี ี ป ธภ พ ห ึ ี ี ี HTML Dreamweaver ป็ ีำ ด ห ดดี พี แ HTML Dreamweaver ภ ษ CFML, PHP, ASP, ASP.NET แ ี รูปที่ 2.11 แ ด ห ำ โป แ Adobe Dreamweaver 23

Adobe Dreamweaver ป็ โป แ ด ีดี ห ำ ด ึ ห ี ำ ถ Dreamweaver พี โป แ ดี พ พฒ ึ ดห ี ห แ ำห ี ี ญ Dreamweaver ำ ห ี ึ พ ี Dreamweaver ี แ ำ โป แ ด ๆ Photoshop, Illustrator, Flash ห แ แ ษ Dynamic webpage พฒ ึ ห Dreamweaver CS3 ี Ajax พ ี ด ถึ CSS ี ด พฒ ึ ี ถึ Template ี ด ,ห พ แ ี 1. FTP ถแ ห พ แ ปแ ด ผ ี server ด ี พ Dreamweaver ด server ห แ แ ด ฟ ี server ห ห แ แ ด ี ี ถ ป็ ีด ห ี ดด 2. Site map ป็ ี แดผ ห ป็ ป ึ โด แ ด ห ห ห ด link ป ห ด โด ถ ห ป ี แป link ด โด ี Dreamweaver ำ ี Code ห ห ี ถ ป็ ดี ี พ แ แพ ด รปู ที่ 2.12 แ ด ห โ ด โป แ Adobe Dreamweaver 24

โปรแกรม Adobe Photoshop โป แ Photoshop ป็ โป แ แ แ ปภ พ ีพโด ฉพ แุ โป แ ีดี โป แ Photoshop ป็ โป แ ี ี พุ ป ภ พ พ ดี ศ ำ ี ดี ด แ แ พฒ ี โป แ Photoshop ุ ี ี ี ถพ ี ป ผ แ ีห ำ ี พี พ ุ ุ แ พ ำ แ ีปัญห ความสามารถพ้นื ฐานของ Adobe Photoshop ห ภพด 1. แ ห แ ปภ พ 2. ด ภ พ ห ี ี crop ภ พ 3. ป ี แป ี ภ พ ีห ึ ป็ ี ีห ึ ด 4. ถ แ ฟ ี ห ปภ พ ี ห ี 5. ี แ ภ พ ป็ Layer ถ ภ พ ด ป็ 6. ำ cloning ภ พ ห ำภ พ ำ ปภ พ ดี 7. พ effect ด 8. Brush ห แป ี ี ถ ปแ ำ ป ภ พ ดแ ๆี รูปท่ี 2.13 แ ด ห ำ โป แ Adobe Photoshop 25

เมนูของโปรแกรม Application menu หรอื Menu bar 1. File ห ถึ ำ ี ด ฟ ปภ พ ฟ ห , ปิด, ปิด, ึ ฟ, ำ ฟ, ฟ แ ๆ ี ี ฟ 2. Edit ห ถึ ำ ี ำห แ ภ พ แ ป แ ำ โป แ ๊ ปป้ี, , ำ , แ แๆ 3. Image ห ถึ ำ ี ป แ ภ พ ี, แ , ด ภ พ (image size), ด (canvas), โห ด ี ภ พ, ห ุ ภ พ แ ๆ 4. Layer ห ถึ ำ ี ด , แป แ ด ดๆ 5. Select ำ ี ถุห พ ี ปภ พ (Selection) พ ำ ป ำๆ พ ป ี ี, ห ฟ ฟ็ ๆ ปภ พ 6. Filter ป็ ำ Effects ๆ ำห ปภ พแ ถุ 7. View ป็ ำ ี ุ ภ พแ ถุ ษ ๆ ภพ แ ภ พ หด 8. Window ป็ ำ ุป ๆ ี ำ ป็ Effects ๆ 9. Help ป็ ำ พ แ ำ ี โป แ ฯแ ี ี ด โป แ เมนูของพ้นื ท่ที ำงาน Panel menu ๆี ี ดห ำ ุ ำ ๆ Panel (พ ) ป็ โด ป็ ำ แพ พ Color ำห ี, โป แ Photoshop ีพ พ Layers ำห ด Info แ ด ี ำแห ี ี ถึ ด/ ำแห พ ี ี พื้นท่ีทำงาน Stage หรอื Panel ป็ พ ี ำห แ ด ี ำ ำ เคร่ืองมือทใี่ ชง้ าน Tools panel หรอื Tools box Tool Panel ( พ ) ห ป ปด ๆี ึี ี ำห ด แ แ แ ภพ ห ีีำ ด ุด ดภพ2 พ ี ๆ ปุ่ ดี โด ี ษ ป ห ี ห ปุ่ ี ี ด 26

สิ่งท่คี วบคมุ เคร่อื งมอื ท่ีใชง้ าน Tools control menu หรือ Option bar Option Bar ( ป ) ป็ ี ป แ ำ ๆ โด ีด ป ปี ป ี Brush (พ ) ป ป ฏป ี ำห ด ด แ ษ ห แป , โห ด โป ี แ ห ี ป็ เครอ่ื งมือพน้ื ฐานของโปรแกรม Tools Tool Panel ( พ ) ห ป ปด ๆี ึี ี ำห ี ด แ แ แ ภพ ห ีีำ ด ุด ดภพ2 พ ๆ ปุ่ ดี โด ี ษ ป ห ี ห ปุ่ ี ี ด รปู ท่ี 2.14 แ ด แถ Canva คืออะไร Canva แพ ฟ ี พแ Tools ๆ ี ำ ป็ ฟิ ดี แ ๆ ี ถำ ด พี แ พี ี ี ถพ ป็ Artwork ดแ ถ ำ ป พ พ ด โด Canva ี แ Template ี ห ปแ ๆ Logo, Social Post, Infographic, Resume, Presentation 27

คณุ สมบตั ิเด่นของ Canva 1. ี ฟ ฟ ำห ภ พถ พ ป แ ภ พถ โด ุ ถ พโห ดภ พ ป พ แ ด ห โป แ Editor ภ พ ๆ ป โ ี ป ด ป พ ฟิ 2. ถึ พ ๆ ถึ ปภ พแ ดีโ 70 ป 400,000 พ โด ี ธ์ 3. Canva ีพ Element icon ถึ Sticker ๆ ห พ แ ี ป ด ีแ ี ด ป ปแ 4. ีแ ษ ี ปแ ษ ำ ป ี ถ ด ด ี ี ฟ แ ถึ ฟ ี 5. แ โด แ แ Canva ห ำ ปภ พห ดีโ ด พี แ พี ี โด พ ีี ห ุ แห พ ี ี ด พี แ 6. ภ พ ห ี Canva ถ ฟ ฟ ห พี แ ี ุ ดภ พ ห แ 7. ผ แพ ป Social ด ด ำ ุ ถแ Social media ี ุ ดแ ด ี ห ุ ถ โพ ี ด 8. ถ ฟ Video ด พี แ แ พโห ด ี พ ป ด รูปที่ 2.15 แ ด ห ำ โป แ Canva 28

XAMPP คอื อะไร XAMPP ป็ โป แ Apache web server ำ web server พ ด ปห โด ี แ ี ด แ โป แ XAMPP พ PHP ภ ษ ำห พฒ แ แพ ี ป็ ี , MySQL ฐ , Apache ำห ี ป็ ฟ , Perl ี พ OpenSSL, phpMyAdmin ( ห ฐ ีพฒ โด PHP พ ป ฐ ุ ฐ MySQL แ SQLite ส่วนของประกอบ XAMPP 1. X = Cross Platform โป แ XAMPP ปฏ ๆ Windows, Linux แ OS X โป โ HTTP ำห ห ด ฐ 2. A = โป แ ำห ฟำ 3. M = MySQL (MariaDB) โป แ ฐ 4. P = PHP ภ ษ พ ำห พฒ ี ป ผ ฝั่ Server 5. P = Perl ป็ ภ ษ พ พฒ โป แ ษๆ รปู ที่ 2.16 แ ด ห ำ โป แ XAMPP 29

Microsoft Visio คอื อะไร Microsoft Visio ป็ ี ำ Microsoft Office ห แผ ภ แผ ผ แ ด โ แผ ภ ด แ ๆ ด ด พ ป ธภ พ โด หแ แผ ถดแผ ภ ห ปแ ฟ ีแ ด ฟ ี ี- , ป็ แ หผ ด ำ ภ พ ฟฟิ ห ๆ แป ๆ ด ด พ พ ี ด ห ๆ ด ป็ ดี แ ป ห ด ห ฟ ห ี ดถึ ห ึ ความสามารถพน้ื ฐานของ Microsoft Visio 1. พ ห ห แ แ ป พ ด 2. ุ ำห ฐ ุ ห 3. ป ฉ ถ ำ ฟ DWG (ดดี ี) 4. โ ฟ์ 5. ด แ 6. ฟิ 7. โ ดี 8. แ ด แ รปู ท่ี 2.17 แ ด ห ำ โป แ Microsoft Visio 30

ห ห ห New ป ด ห Featured ห ห ีแ ด ปแ แผ ภ ี ี ดุ รูปที่ 2.18 แ ด ห โป แ Microsoft Visio ห ห ดห ห ห Categories แ ป ภ แผ ภ ป็ 8 ป ภ ด ี รูปท่ี 2.19 แ ด ห ห ห ดห ห โป แ Microsoft Visio 31

ด แ ป ภ ๆี ปั ุ ึ Visio แ โด แ ป็ ป ภ ๆ ด ี 1. ด แ ป ป็ ด แ ีป ด ป พ ฐ พ ห ด ป ถ ำป ด ๆ แ ป ี ศึ ษ ห ี ฉพ ด แ ฝ่ แผ 2. ผ ห ี Organization chart ป็ ด แ แ ด ห ี ผด ุ โด ป็ ำด ี ห แ ด รูปที่ 2.20 แ ด ผ 3. โฟ ำห ด ธุ แ ด ำ ฝ่ ๆ ี ด ึ ห ป็ ี แผ ึ พ พ ป ธภ พ ห ด ๆ 4. แผ ภ ฟ ำ ผ ีด ึ ี ป็ ำ ๆ พ ปี ี ีห แ แ แ แ ปภ พ พ ี 5. แผ โ ป็ แ ด ห แผ ี ด ด ำ ึ โด แ ี แ ุด พ ห ุ ป้ ห ห ถุป ี ำห ด ภ แห พ แ ป ี 6. โ โ พ แผ แ ุ ฝ่ ี ี 32

7. แป ฟฟิศ โ ถ แ แป ุ Top View ด ๆ ด โด ป โ แ AutoCAD ึ ี แพ แ ำญ 8. ฟฟ้ ป็ ฉพ แ ศ โด ำ ๆ ป็ ห ำ ป ษ โ ศแ โโ ี 9. โ ด ฟ แ โป แ แ โ ป็ ด แ แ พพ ๆ ด แ UML (Unified Modeling Language) ึ ถ ป็ ฐ ด แ โ ด ฟแ ปั ุ 10. พ ห ห ีฝ่ ศ แ ำห ด ษ แ ด ุป พ หห ๆ รปู ท่ี 2.21 แ ด โฟ ำห ด ธุ Ribbon คืออะไร Visio ี ด ี ำ ๆ ป็ ุด แ โด แ Ribbon ป็ ด ผ แ ีปุ่ ำ ภ ี ี 33

ส่วนประกอบของ Ribbon ึ ภ Ribbon ป ด แ ภ ุด ำ ี ุด ำ ด ี 1. Home ำ ี ด / ป ด ำห ด ปแ ษ ำห ด ษ ห ด แ ป็ 2. Insert ำ ภ พป แ แผ ภ ป็ 3. Design ำ ำ (Task Pane) ำ ี ีำ ำ พ ห ำ ดด ึ 4. Data ำ ี Microsoft Excel workbook 5. Process ำ ี ห Check Diagram Import แ Export 6. Review ำ ห ผ 7. View ำ ห ด ุ ฟ 8. Acrobat ำ ป็ ฟ PDF ฟ รปู ท่ี 2.22 แ ด แี ห ดห แผ ผ 34

2.5 ระบบงานท่ีเกีย่ วข้อง ุฬ ด แ ี . (2564) โ ปภ ผ ดษ พ ี ผด ีี ด แ ี Login พำ ีี ผี ด ี ธี แ ธี ถ ผ ศ ี ุ แ ปิ พ ธุ แ (2564) โ ปภ ี ษ ผพ ผด ีี แ ี Login ถ แด ๆด ุ แแ ดภ พ (2564) โ ป ภ โ ผ ,โ ีด ึ พ ึ พ ปแ แ ุ ภ พ พ ห พึ พ ี ุ ภ พดี 35

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

1. Flowchart สมัครสมาชกิ รปู ท่ี 3.2 Flowchart 37