ระบบขายสินค้าออนไลน์ประเภทสินค้า ร้านขายอุปกรณ์น้องแมว

ระบบขายสินคา้ ออนไลน์ประเภทสินคา้ รา้ นขายอปุ กรณน์ ้องแมว E-Commerce For Cat Accessories Shop นายรชั ชานนท์ เกตนุ ุช นายวริ ณุ ฤทธิ์ โพธร์ิ งุ่ โครงงานนี้เป็นส่วนหน่ึงของการเรยี นตามหลกั สตู รประกาศนยี บตั รวิชาชีพช้ันสงู สาขาวิชาเทคโนโลยีธุรกิจดจิ ทิ ลั วทิ ยาลัยเทคโนโลยีอรรถวิทย์พณชิ ยการ ปีการศกึ ษา 2565





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

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

สารบญั หน้า ก หนา้ อนุมัติ ข บทคดั ยอ่ ค กติ ติกรรมประกาศ ง คานา จ สารบญั ช สารบัญรปู ญ สารบญั ตาราง บทท่ี 1 บทนา 1 2 1.1 ภูมิหลังและความเป็นมา 2 1.2 วตั ถุประสงคโ์ ครงการ 2 1.3 ขอบเขตการศกึ ษา 3 1.4 ประโยชนท์ ่คี าดวา่ จะได้รับ 4 1.5 แผนการดาเนินงาน 5 1.6 เครื่องมือที่ใชพ้ ฒั นาโปรแกรม 1.7 งบประมาณการดาเนินงาน 5 บทท่ี 2 ระบบงานและทฤษฎที ่เี กี่ยวข้อง 6 2.1 ระบบงานในปัจจุบนั 6 2.2 ปญั หาระบบงานในปัจจุบนั 6 2.3 การวิเคราะหแ์ ละความต้องการของระบบใหม่ 34 2.4 ทฤษฎีที่เกี่ยวขอ้ ง 2.5 ระบบงานท่เี กี่ยวขอ้ ง 35 บทที่ 3 การออกแบบระบบงานด้วยคอมพิวเตอร์ 39 3.1 การออกแบบระบบงาน (Flow Chart) 40 3.2 การออกแบบแผนภาพบริบท (Context Diagram) 44 3.3 แผนภาพกระแสการไหลข้อมลู (Data Flow Diagram) 45 3.4 การออกแบบแผนภาพความสัมพันธ์ของข้อมูล 47 3.5 พจนานุกรมขอ้ มลู (Data Dictionary) 3.6 การออกแบบผังโครงสรา้ งเวบ็ ไซต์ (Site Map) จ

สารบญั (ต่อ) หน้า 48 3.7 การออกแบบแผนภาพแนวความคิด (Story Board Design) 52 3.8 การออกแบบสิ่งนาเข้า (Input Design) 52 3.9 การออกแบบสงิ่ นาออก (Output Design) บทท่ี 4 การพัฒนาระบบขายสนิ คา้ ออนไลน์ ประเภทสินค้าร้านขายอุปกรณน์ อ้ งแมว 53 4.1 เครื่องมอื และอุปกรณท์ ่ใี ช้ 53 4.2 โปรแกรมท่ีใชใ้ นการพัฒนา 54 4.3 การตดิ ตง้ั โปรแกรมและระบบ 60 4.4 วธิ กี ารนาไปใช้งาน บทที่ 5 สรุปผลการทาโครงการ 66 5.1 สรุปผลโครงการ 67 5.2 ปัญหาและอปุ สรรคในการดาเนนิ งาน 68 5.3 สรปุ เวลาการทางานจรงิ (Gantt Chart) 70 5.4 สรปุ ค่าใชจ้ ่ายในการดาเนินการจรงิ 71 บรรณานกุ รม 72 ภาคผนวก 73 - ใบขอเสนออนุมตั โิ ครงการระบบคอมพวิ เตอร์ (ATC.01) 74 - ใบขอเสนออาจารยท์ ี่ปรึกษารว่ มโครงการ (ATC.02) 75 - ใบขอสอบโครงการระบบคอมพิวเตอรธ์ รุ กิจ (ATC.03) 77 - ใบรายงานความคืบหน้าโครงการระบบคอมพวิ เตอรธ์ รุ กจิ (ATC.04) 78 - ใบบันทึกการเข้าพบท่ปี รึกษาโครงการ (ATC.05) 83 - ใบขออนญุ าตอาจารย์ที่ปรึกษาร่วมจัดทา เอกสารบทที่ 4-5 (ATC.06) 84 - ใบรบั รองการนาไปใช้ประโยชนไ์ ด้จริง (ATC.07) 89 ประวัติผู้จัดทาโครงการ ฉ

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

สารบัญรูป (ตอ่ ) หน้า รปู ที่ 3.7 Data Flow Diagram Level 1 Process 1 ระบบจดั การข้อมูลสนิ ค้า 40 รปู ท่ี 3.8 Data Flow Diagram Level 1 Process 2 ระบบสมคั รสมาชิก 41 รูปที่ 3.9 Data Flow Diagram Level 1 Process 3 การจดั การข้อมูลสมาชกิ 42 รูปท่ี 3.10 Data Flow Diagram Level 1 Process 4 ระบบเขา้ สรู่ ะบบ 43 รูปที่ 3.11 Data Flow Diagram Level 1 Process 5 ระบบสั่งซอื้ สนิ คา้ 44 รูปท่ี 3.12 Data Flow Diagram Level 1 Process 6 รายการสัง่ ซอื้ 45 รปู ท่ี 3.13 Data Flow Diagram Level 1 Process 7 ตรวจสอบใบสงั่ ซ้ือ 46 รปู ที่ 3.14 E-R Diagram ระบบขายสินค้าออนไลนป์ ระเภทอุปกรณ์เครื่องสาอาง 48 รปู ที่ 3.15 แสดงหน้าแรก 49 รูปที่ 3.16 แสดงหนา้ ลงชอื่ เขา้ ใช้ 49 รูปท่ี 3.17 แสดงหน้าสมคั รสมาชกิ 50 รูปท่ี 3.18 แสดงหนา้ หลัก 50 รูปที่ 3.19 แสดงหน้าประเภทสนิ คา้ 51 รปู ที่ 3.20 แสดงหน้าวธิ กี ารสัง่ ซื้อ 51 รปู ท่ี 4.1 เข้าเว็บไซตท์ าการดาวโหลดน์ XMAPP 53 รปู ท่ี 4.2 เลือกเวอร์ชนั ทีต่ อ้ งการดาวโหลดน์ xampp 53 รูปท่ี 4.3 หน้าต่างการตดิ ต้งั xampp 54 รปู ที่ 4.4 หนา้ ตา่ งเลือกการทางานของ xampp 54 รูปที่ 4.5 หนา้ ตา่ งเลือกการท่อี ยกู่ ารตดิ ต้ัง 55 รูปที่ 4.6 หนา้ ตา่ งเลอื กภาษาการใช้งาน 55 รูปท่ี 4.7 หนา้ ตา่ งบอกการพร้อมตดิ ตง้ั 56 รปู ท่ี 4.8 หน้าตา่ งรอการดาวโหลดน์ตัวโปรแกรม xampp 56 รูปที่ 4.9 หนา้ ต่างการดาวโหลดน์เสร็จสนิ้ 57 รปู ที่ 4.10 หน้าต่างการควบคุมของโปรแกรม xampp 57 รปู ที่ 4.11 เขา้ สู่หนา้ เวบ็ ไซต์ https://www.000webhost.com และลงชอ่ื เขา้ ใช้ 58 รปู ท่ี 4.12 เลือก Create New Site 58 รูปท่ี 4.13 ต้ังค่า IP Address และเลอื ก File Manager 59 ซ

สารบญั รปู (ต่อ) หน้า 59 รูปที่ 4.14 นาไฟลท์ ่ตี อ้ งการขน้ึ โฮสมาใส่ public_html 60 รปู ท่ี 4.15 แสดงไฟลท์ ั้งหมดทน่ี ามาใส่ในโฟลเดอร์ 60 รูปท่ี 4.16 เข้าสู่ http://www.projectcomatc.com/2565/toptenbeauty/ 61 รูปที่ 4.17 แสดงหนา้ เข้าสู่ระบบ 61 รูปท่ี 4.18 แสดงหน้าสมัครสมาชิก 62 รปู ที่ 4.19 แสดงหน้าหลัก 62 รปู ที่ 4.20 แสดงหน้าเกยี่ วกบั เรา 63 รูปท่ี 4.21 แสดงหน้าสินค้า 63 รูปที่ 4.22 แสดงหน้าผจู้ ัดทาเว็บไซต์ 64 รปู ที่ 4.23 แสดงหน้าขั้นตอนการสัง่ ซอื้ สนิ ค้า 64 รปู ที่ 4.24 แสดงหนา้ การสั่งซอ้ื สนิ ค้า ฌ

สารบัญตาราง หนา้ 3 ตารางท่ี 1.1 แผนการดาเนินงาน (Gantt Chart) 4 ตารางที่ 1.2 งบประมาณการดาเนนิ งาน 24 ตารางท่ี 2.1 แสดงสัญลักษณก์ ารเขยี น DFD 31 ตารางท่ี 2.2 แสดงสัญลักษณ์การเขยี น ER Diagram 42 ตารางที่ 3.1 ตารางข้อมลู ผู้ใชง้ าน 43 ตารางที่ 3.2 ตารางขอ้ มลู เอกสาร 43 ตารางที่ 3.3 ตารางขอ้ มูลการดาวน์โหลด 67 ตารางที่ 5.1 แสดงขนาดของโปรแกรม 69 ตารางท่ี 5.2 สรปุ เวลาการดาเนินงานจรงิ 70 ตารางท่ี 5.3 สรปุ คา่ ใช้จ่ายในการดาเนนิ งานจรงิ

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

1.2 วัตถุประสงคโ์ ครงการ 1. เพื่อวิเคราะห์และออกแบบระบบการขายสินค้าออนไลน์ ประเภท อปุ กรณ์ของแมว 2. เพ่ือความสะดวกรวดเร็วถกู ต้อง ในการจดั เก็บขอ้ มลู 3. เพอ่ื ใช้เครอื ขา่ ยอินเตอร์เน็ตอย่างสรา้ งสรรค์และเกิดประโยชน์ 4. เพ่ือชว่ ยเพ่มิ ชอ่ งทางการขายสนิ ค้าออนไลน์ให้มากขึน้ 5. เพ่อื ลดต้นทุนในการดาเนนิ ธุรกิจ 1.3 ขอบเขตการศึกษา สว่ นของสมาชิกผใู้ ชง้ าน 1. ผู้ใชง้ านสามารถสมัครเพ่ือเข้ามาเลือกซื้อสนิ ค้าได้ 2. ผู้ใช้งานสามารถ Login และ Logout ได้ 3. ผใู้ ชง้ านสามารถเลอื กสินค้าและดูรายละเอยี ดสินคา้ ได้ 4. ผู้ใช้งานสามารถใช้ระบบสามารถคานวณราคาการซอื้ สินค้าได้ สว่ นผดู้ แู ลระบบ administrator 1. ผดู้ ูแลสามารถ เพิ่มหรือลบและแก้ไขสินค้า 2. ผดู้ แู ลสามารถ พฒั นาดแู ลระบบเวป็ ไซต์ไดท้ ุกอย่าง 3. ผูด้ ูแลสามารถ ตรวจสอบใบสง่ั สนิ ค้าจากลกู คา้ ได้ 1.4 ประโยชน์ทคี่ าดวา่ จะไดร้ บั 1. ไดร้ ับทราบวา่ มปี ัจจัยใดบ้างทีจ่ ะสง่ ผลใหเ้ ลือกซ้ือสินคา้ หรอื บริการจากเวบ็ ไซตข์ องตน 2. ได้ทราบถึงปัจจยั ตา่ ง ๆ การใชง้ านเวบ็ ไซต์.องค์ประกอบเวบ็ ไซต์ 3. ไดใ้ ชเ้ ครือขา่ ยอนิ เตอรเ์ นต็ อย่างสร้างสรรคแ์ ละเกดิ ประโยชน์ 4. ได้มาใชเ้ ป็นแนวทางในการออกแบบเวบ็ ไซตใ์ หต้ รงกับความตอ้ งการของผบู้ รโิ ภค 5. ได้มาวเิ คราะหแ์ ละปรับปรงุ ใชก้ บั เว็บไซตข์ องตนเอง 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 แผนการดาเนินงาน 3

รายการ พฤศจิกายน 65 ธนั วาคม 65 มกราคม 66 กมุ ภาพนั ธ์ 66 ระยะเวลา ภาคเรยี นที่ 2 1234 1234 1234 1234 1-7 พ.ย. 65 ส่งความคบื หน้าโปรแกรม 26 พ.ย. 65 100 % สอบนาเสนอโครงงาน 1-16 ธ.ค. 65 ระดับปวส.2 - ปวช.3 1-30 ม.ค. 66 ATC.03 คร้งั ที่ 2 สง่ ATC.06 สง่ ATC.07 ส่งเอกสาร บทท่ี 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 ตารางที่ 1.1 แผนการดาเนนิ งาน (ตอ่ ) 1.6 เครอ่ื งมือทีใ่ ชพ้ ัฒนาโปรแกรม 1. โปรแกรม Microsoft Windows 10 เป็นระบบปฏบิ ตั กิ ารคอมพิวเตอร์ 2. โปรแกรม Adobe Dreamweaver 2021 ใชอ้ อกแบบหนา้ เวบ็ ไซต์ 3. โปรแกรม Adobe Photoshop 2021 ใช้ในการตกแต่งรปู ภาพ 4. โปรแกรม XAMPP Control Panel V3.2.2 ใช้เป็นระบบจดั การฐานขอ้ มลู เชิงสัมพนั ธ์ 5. โปรแกรม PHP My Admin 2.10.3 ใชใ้ นการเกบ็ ขอ้ มูล 4

1.7 งบประมาณการดาเนนิ งาน จานวน ราคา (บาท) 4 รีม 500 ลาดบั รายการ 1 ตลบั 320 1 กระดาษ A4 1 เล่ม 200 2 ตลบั หมึกพมิ พ์ 1 เดอื น 1,500 3 คา่ เขา้ เล่ม 1 ปี 799 4 คา่ เชา่ โปรแกรม Adobe รวมเป็นเงนิ 3,319 5 คา่ เช่า Web Hosting ตารางที่ 1.2 งบประมาณการดาเนนิ งาน 5

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

2.2 ปัญหาระบบงานในปัจจบุ นั 1. ามไมปล ดภัย ง มล าด ารตร จส บ ารใชบัตร รดตบน น ต ร นต มลบน บัตร รดต าจถ ดั ฟงั หร าน พ าช และหมาย ล บัตร รดตไปใชโดยที จา งบัตร รดตไม ร ารสง มลจงต งมี ารพฒั นา ธี าร ารหสั ทีซับซ นหลาย นั ต น พ ให มล งล าไดรับ ามปล ดภัยสงสุด 2. E-Commerce ยังมีประ ดน ชงนโยบายทีทาใหรัฐบาลต ง ามา าหนดมาตร าร พ ให าม มุ ร ง บั ผซ และผ าย ณะ ดีย นั มาตร ารมี ร งระ บยี บที าหนด ันต นต งไม ัด าง ารพัฒนา ท โนโลยี 3. ารทีผ ายไมมันใน าล ามีตั ตน ยจรง จะ ป็นบุ ล ดีย ับทีแจงซ สน าหร ไมมี ามสามารถใน ารทจี ะจายสน าและบร าร 4. ผซ ไมมนั ใจ ร ง าร บรั ษา ามลับทางธุร จ มลส นบุ ล ชน ไมมันใจ าจะมีผนา หมาย ล บตั ร รดตไปใชประโยชนในทางมช บ 2.3 วิเคราะหแ์ ละความตอ้ งการของระบบใหม่ 1. มี ารใสรหสั ประจาตั ประชาชน งผสมั รและ จา งบัตร รดต พ ใหไม ด าม สียง ใน ารใชบตั ร รดต ทีถ โมยมา พ ารซ สน า 2. มี ารศ ษา ฎระ บียบและ บัง ับ งรัฐบาล พ ไมให ดปัญหาภายหลัง และยังใช ท โนโลยีใหม ๆ ทีมี น ย ร ย ๆ พ ให ป็น ารพัฒนาระบบและไม ัด าง ารพัฒนา ง ท โนโลยี 3. ใน ันต น ารซ สน าจา ปน็ ต งใหล าโ น งน าบัญชี นทีจะจัด ารสงสน าให าร สังซ จา ปน็ ต งมี าร Login าสระบบ นจงจะสามารถซ สน าได นันทาใหมันใจ าล า นใด ป็นผสงั พราะสามารถทราบไดจา าร Login าระบบ 4. มี ารปู ง ัน าร าถง งระบบ พ ไมใหใ ร ามานา มลส นตั งล า ไปได 2.4 ทฤษฎที เ่ี กย่ี วข้อง ทฤษฎีทเ่ี ก่ียวข้องกับเวบ็ ไซต์ บไซต (website หร web site) หมายถง หนา บ พจหลายหนา ซง ช มโยง ันผานทาง ไฮ ป รลง ส นใหญจัดทา น พ นา สน มลผาน มพ ต รโดยถ จัด บไ ใน ลดไ ด บ หนาแร ง บไซตที บไ ทีช หลั จะ รีย าโฮม พจ บไซตโดยทั ไปใหจะใหบร ารต ผใชฟรี แต ณะ ดีย ันบาง บไซตจา ป็นต งมี ารสมั รสมาช และ สีย าบร าร พ ทีจะด มลใน บไซตนัน ซงไดแ มลทาง ชา าร มลตลาดหลั ทรัพย หร มลส ตาง ๆ ผทา บไซตมี หลา หลายระดับ ตังแตสราง บไซตส นตั จนถงระดับ บไซตสาหรับนั ธุร จหร ง รตาง ๆ าร รยี ด บไซตโดยทั ไปนยม รีย ดผานซ ฟแ รในลั ษณะ ง บบรา ด ซ ร 7

หลกั การออกแบบเวบ็ ไซต์ บไซต ป็นส ทีไดรับ ามนยม ยางมา บน น ท ร นต ซง บไซต ป็นส ที ยใน าม บ ุม งผใชโดยสมบรณ ลา ผใชสามารถตดั สนใจ ล ได าจะด บไซตใดและจะไม ล ด บไซตใดไดตามต ง าร จงทาใหผใชไมมี าม ดทนต ุปสรร และปัญหาที ดจา าร แบบ บไซตผดพลาดถาผใช หน า บที าลังด ยนันไมมีประโยชนต ตั า หร ไม าใจ า บไซตนีจะใชงาน ยางไร า สามารถทีจะ ปลียนไปด บไซต น ๆ ได ยางร ด ร น งจา ใน ปัจจบุ ันมี บไซต ยมา มาย และยังมี บไซตที ด นใหม ๆ ทุ ัน ผใชจงมีทาง ล มา น และ สามารถ ปรยี บ ทียบ ณุ ภาพ ง บไซตตาง ๆ ได ง บไซตทีไดรับ าร แบบ ยางส ยงามมี ารใชงานทีสะด ย มไดรับ ามสนใจจส ผใช มา า บไซตทีดสับสน ุน าย มี มลมา มายแตหา ะไรไม จ น จา นียังใช ลาใน าร แสดงผลแตละหนานาน นไป ซงปัญหา หลานีล น ป็นผลมาจา าร แบบ บไซตไมดีทังสน ดังนัน าร แบบ บไซตจง ปน็ ระบ น ารสา ัญใน ารสราง บไซตใหประทับใจผใช ทาให า ยา ลบั ามา บไซต ดม ี ใน นา ต ซงน จา ต งพัฒนา บไซตทีดีมีประโยชนแล ยังต ง านงถง ารแ ง นั ับ บไซต น ๆ ด ย องคป์ ระกอบของการออกแบบเวบ็ ไซต์ าร แบบ บไซตทีมีประสทธภาพนันต ง านงถง ง ประ บสา ัญดังต ไปนี 1. าม รียบงาย (Simplicity) หมายถง ารจา ัด ง ประ บ สรมให หล ฉพาะ ง ประ บหลั ลา ใน ารส สาร น หา ับผใชนัน ราต ง ล สน สงที ราต ง ารนา สน จรง ๆ มาในส น ง ราฟิ สีสัน ตั ั ษรและภาพ ล นไห ต ง ล ใหพ หมาะ ถาหา มีมา นไปจะรบ นสายตาและสราง ามรา ราญต ผใช ตั ยาง บไซตทีไดรับ าร แบบทีดี ไดแ บไซต งบรษัทใหญ ๆ ชน Apple Adobe Microsoft ทีมี าร แบบที รียบงาย ไมซับซ น และใชงาน ยางสะด 2. ามสา สม (Consistency) หมายถง ารสราง ามสา สม ให ด นตล ดทัง บไซต โดย าจ ล ใชรปแบบ ดีย ันตล ดทัง บไซต ได พราะถาหา าแตละหนา บไซตนันมี ามแต ตาง ันมา นไป าจทาใหผใช ด ามสับสนและไมแนใจ า าลัง ยใน บไซต ดมหร ไม พราะฉะนัน าร แบบ บไซตในแตละ หนา รจะมรี ปแบบและโทนสีทีมี าม ลาย ลง นั ตล ดทงั บไซต 3. าม ป็น ลั ษณ (Identity) ใน าร แบบ บไซตต ง านงถงลั ษณะ ง ง ร ป็นหลั น งจา บไซตจะสะท นถง ลั ษณและลั ษณะ ง ง ร าร ล ใชตั ั ษร ชุดสี รปภาพหร ราฟิ จะมีผลต รปแบบ ง บไซต ป็น ยางมา ชน ถา ราต ง าร แบบ บไซต งธนา ารแต รา ลับ ล สีสันและ ราฟฟิ มา มาย าจทาใหผใช ด า ป็น บไซต งส นสนุ ซงสงผลต าม ช ถ ง ง รได 8

4. น หา (Useful Content) น หา ป็นสงทีสา ญั ทสี ุด ง ารสราง บไซต พราะสงทีทาใหผ น ด ามสนใจ และหมันตดตาม บไซต หลานนั ย สม น หาทีมี ามสมบรณและนาสนใจ น จา นจี ะต งมี ารปรับปรุง พัฒนา น หาบน บใหมี ามทนั สมัย ย สม ร มถง มลต งมี ามถ ต งทสี ุด 5. ระบบ น ชัน (User-Friendly Navigation) ระบบ น ชัน ปน็ สม นปาู ยบ ทาง พ ใหผใชงาน ไม ด ามสบั สนใน ณะใชงาน บไซต ซง าร แบบ น ชนั จะต ง นนที าม รียบงาย ใชงานสะด และมี าม าใจไดงาย ทีสา ัญ จะต งมตี าแหนง าร างทสี มา สม พ ใหด ป็นแน ทาง ดีย นั ทาใหผใชงานหร ผชมรส ประทับใจ และจดจา บไซตไดงาย น ส นใ รทีมี ารนา ราฟิ มาใชในระบบ น ชนั จะต ง ล ราฟิ ทีสามารถส ามหมายไดดี ชน ัน 6. ุณภาพ ง บไซต (Visual Appeal) บไซตทีดีจะต งมี ุณภาพ ทังสงทีปรา ฏให หนบน บไซต ไม าจะ ป็น ราฟิ ชนดตั ั ษร รปภาพหร สสี นั ทีใช น หาทนี ามาแสดงผล ซงหา บไซตมี ุณภาพ จะสราง ามนา ช ถ และ ป็นจุด ดนทีทาใหผ นส นใหญ ด ามสนใจไดดี พราะฉะนันหามละ ลยในส น ง ุณภาพ ดด าด 7. ามสะด ง ารใชในสภาพตาง ๆ (Compatibility) บไซต รให ามสะด สบายแ ผใชงานไดดี จะต งมี ารแสดงผลไดในทุ ระบบปฏบัต าร ไม าจะ ปน็ บ บรา ซ ร มพ ต ร โน๊ตบุ๊ หร บนโทรศัพทม ถ ทีสา ัญจะต งมี ามละ ียด ง ารแสดผลและสามารถใชงานไดโดยไมมีปญั หาด ย 8. าม งทใี น าร แบบ (Design Stability) าร แบบ บไซต รจะมี าม งทีใน าร แบบ ด ย ารสราง บไซตด ยแบบแผน ดีย ัน และมี าร รยี บ รียง น หา ยางร บ บ ทาให บมี ามนา ช ถ และดมี ุณภาพ ช ยสราง าม ประทบั ใจให บั ผใชงานได ป็น ยางดี 9. าม งที ง ารทางาน (Function Stability) ระบบ ารทางานบน บไซตจะต งมี าม งที และสามารถใชงานไดดี ซงน จา าร แบบ ระบบ ารทางานใหมี ามทันสมัยและสรางสรร แล จะต งหมันตร จส บ ย สม พราะหา ระบบ ารใชงานมี ามผดป ต จะไดแ ปัญหาไดทนั น จา นี าจมี าร พั ดตดีไซนใหทันสมัย น บ ยๆ พ ใหผใชงานรส สนุ ไป บั ารใชงาน บไซต 9

กาหนดเป้าหมายของเวบ็ ไซต์ ันต นแร ง าร แบบ บไซต าร าหนด ปูาหมายใหแนชัด สีย น พ จะได แบบ ารใชงานไดตรง ับ ปูาหมายทีไดตังไ โดยทั ไปมั จะ าใจ า ารทา บไซตมีจุดมุงหมาย พ บร าร มล งหน ยงานหร ง ร ทานัน แตใจ าม ป็นจรงแล บไซตแตละแหง จะมี ปาู หมาย งตน งตาง นั ไป กาหนดดกล่มุ ผูใ้ ช้เปา้ หมาย ผ แบบ บไซตจา ป็นต งทราบ ลุมผใช ปูาหมายที ามาใชบร าร บไซต พ ทีจะได ต บสน ง ามต ง าร งผใชไดยางชัด จน ตั ยาง ชน บไซตส นใหญนันจะต บสน ง าม ต ง าร ฉพาะ ลุม ทานัน ไมสาหรับทุ น พราะ ุณไมสามารถต บสน ง ามต ง าร ง นที หลา หลายไดใน บไซต ดีย การออกแบบเวบ็ ไซต์ ใน าร แบบ บไซตนันประ บด ย ระบ น ารตาง ๆ มา มาย ชน าร แบบ โ รงสราง ลั ษณะหนาตา หร าร ียนโปรแ รม แตมีหลาย นทีพัฒนา บไซตโดย าด าร างแผนและทางานไม ป็นระบบ ตั ยาง ชน ารลงม แบบโดย ารใชโปรแ รมช ยสราง บ น หาและรปแบบ ป็นไปตามทีน นได ณะนัน และ ม หน าดดีแล ปิดตั ลย ทาให บนันมี ปาู หมายและแน ทางทไี มแนน น ผลลัพธทีไดจง สยี ง ับ ามลม หล น างมา ามลม หล ทีพบ หนไดทั ไป ไดแ บทีแสดง าม า ยระห าง าร สราง (Under Construction หร Coming Soon) ซงแสดงให หนถง าร าด าร างแผนทีดีบาง บถ ได าตาย ไปแล น งจา มลไมทันสมยั าด ารพฒั นาปรับปรุง ท โนโลยีลาสมัย ลง ผดพลาด สง หลานี แสดงให หนถง าร าด ารดแล ตร จส บและพัฒนาใหทันสมยั ย สม าร แบบ บไซต ยางถ ต งจะช ยลด าม สียงทีจะทาให บประสบ ามลม หล าร แบบ บไซตทดี ีต ง าศยั าร แบบและ ารจัดระบบ มล ยาง หมาะสม ระบ น ารแร ง าร แบบ บไซต าร าหนด ปูาหมาย ง บไซต าหนด ลุมผใช ซง ารจะใหไดมาซง มลผพัฒนาต ง รียนรผใช หร จาล งสถานณ ารณ สง หลานีจะช ยให รา สามารถ แบบ น หาและ ารใชงาน บไซตได ยาง หมาะสม ตรง ับ ามต ง าร งผใช ยาง แทจรง 10

ส่ิงทผ่ี ใู้ ช้ตอ้ งการจากเว็บ หลังจา ได ปูาหมายและ ลุม ปูาหมาย ง บไซตแล ลาดับต ไป าร แบบ บไซต พ ดงดดผใชงานใหไดนานทีสุด ด ย ารสรางสงทีนาสนใจ พ ดงดดผใชโดยทั ไปแล สงทีผ าดห ังจา าร าชม บไซตหนง ไดแ - มลและ ารใชงานที ปน็ ประโยชน - า และ มลทีนาสนใจ - ารต บสน งต ผใช - ามบัน ทง - โปรโมชนั งฟรี ข้อมลู หลกั ท่คี วรมีอยู่ในเว็บไซต์ แบบ ม ราทราบถง าต ง ารทีผใชต ง ารไดรับ ม าชม บไซตหนง ๆ แล รา าม บไซตทีมี มลทีผใชต ง าร ซง มลต ไปนี ป็นสงทีผใชส นใหญ าดห ังจะไดรับ ม บไซต - มล ีย ับบรษทั - รายละ ยี ด งผลตภณั ฑ - า าม บหนาและ างจา ส ม ลชน - าถามย ดนยม - มลใน ารตดต ออกแบบหนา้ เว็บไซต์ (Page Design) หนา บ ป็นสงแร ทีผใชจะได หน ณะที ปิด าส บไซต และยัง ป็นสงแร ทีแสดงถง ประสทธภาพใน าร แบบ บไซต ี ด ย หนา บจง ป็นสงสา ญั มา พราะ ป็นส ลางใหผชม สามารถใชประโยชนจา มล งระบบงาน ง บไซตนันได โดยป ตหนา บจะประ บด ย รปภาพ ตั ั ษร สพี น ระบบ น ชนั และ ง ประ บ น ๆ ทีช ยส ามหมาย ง น หาและ าน ย ามสะด ต ารใชงาน หลั สา ญั ใน าร แบบหนา บ ารใชรปภาพและ ง ประ บตาง ๆ ร ม ัน พ ส ามหมาย ีย ับ น หาหร ลั ษณะสา ัญ ง บไซต โดยมี ปูาหมายสา ัญ พ ารส ามหมายทชี ดั จนและนาสนใจ บนพนฐาน ง าม รยี บงายและ ามสะด งผใช 11

การออกแบบเว็บไซต์ ตอ้ งคานงึ ถึง 1. าม รยี บงาย ไดแ มีรปแบบที รยี บงาย ไมซบั ซ น และใชงานไดสะด ไมมี ราฟิ หร ตั ั ษรที ล นไห ยตล ด ลา ชนดและสี งตั ั ษรไมมา จน นไปทาให นุ าย 2. ามสมา สม ไดแ ใชรปแบบ ดีย ันตล ดทัง บไซต ชน รปแบบ งหนา สไตล ง ราฟิ ระบบ น ชันและโทนสี รมี าม ลาย ลง นั ตล ดทัง บไซต 3. าม ป็น ลั ษณ าร แบบ บไซต ร านงถงลั ษณะ ง ง ร พราะรปแบบ ง บไซตจะสะท นถง ลั ษณและลั ษณะ ง ง รนัน ๆ ชน ถา ป็น บไซต งทาง ราช าร จะต งดนา ช ถ ไม หม นส นสนุ ฯลฯ 4. น หาทีมีประโยชน น หา ป็นสงทีสา ัญทีสุดใน บไซต ดังนัน รจัด ตรียม น หาและ มลทีผใชต ง ารใหถ ต ง และสมบรณ มี ารปรับปรุงและ พม ตมใหทัน หตุ ารณ ย สม น หาไม รซา ับ บไซต น จงจะดงดด ามสนใจ 5. ระบบ น ชนั ทีใชงานงาย ต ง แบบใหผใช าใจงายและใชงานสะด ใช ราฟิ ทีส ามหมายร ม ับ า ธบายทีชัด จน มีรปแบบและลาดับ งราย ารทีสมา สม ชน างไ ตาแหนง ดยี ัน งทุ หนา 6. ลั ษณะทีนาสนใจ หนาตา ง บไซตจะต งมี ามสัมพันธ ับ ุณภาพ ง ง ประ บ ตาง ๆ ชน ณุ ภาพ ง ราฟิ ทีจะต งสมบรณ ารใชสี ารใชตั ั ษรที านงาย สบายตา ารใช โทนสที ี า ันลั ษณะหนาตาทนี าสนใจนนั น ย ับ ามช บ งแตละบุ ล 7. ารใชงาน ยางไมจา ัด ผใชส นใหญสามารถ าถงไดมา ทีสุด ล ใชบรา ซ รชนดใด ไดใน าร าถง น หาสามารถแสดงผลไดทุ ระบบปฏบัต ารและ ามละ ียดหนาจ ตาง ๆ ัน ยางไมมีปญั หา ปน็ ลั ษณะสา ญั สาหรับผใชทีมีจาน นมา 8. ณุ ภาพใน าร แบบ าร แบบและ รียบ รียง น หา ยางร บ บ สราง ามรส า บไซตมี ุณภาพ ถ ต ง และ ช ถ ได 9. ลง ตาง ๆ จะต ง ช มโยงไปหนาทีมี ยจรงและถ ต ง ระบบ ารทางานตาง ๆ ใน บไซต จะต งมี ามแนน นและทาหนาทีได ยางถ การออกแบบโครงสรา้ งเวบ็ ไซต์ (Site Structure Design) โ รงสราง บไซต ( Site Structure ) ป็นแผนผัง ง ารลาดับ น หาหร ารจัด าง ตาแหนง บ พจทงั หมด ซงจะทาให ราร าทงั บไซตประ บไปด ย น หา ะไรบาง และมี บ พจ หนาไหนที ีย ง ช มโยงถง ัน ดังนัน าร แบบโ รงสราง บไซตจง ป็น ร งสา ัญ ปรียบ สม น ับ าร ียนแบบ า าร นทีจะลงม สราง พราะจะทาให ราม ง หนหนาตา ง บไซต ป็นรปธรรมมา น สามารถ แบบระบบ น ชันได หมาะสม และ ป็นแน ทาง าร ทางานทชี ดั จน สาหรบั นั ต นต ๆ ไป น จา นีโ รงสราง บไซตทีดียังช ยใหผชมไมสับสนและ 12

นหา มลทตี ง ารได ยางร ด ร ธี ารจดั โ รงสราง บไซตสามารถทาไดหลายแบบ แตแน ด หลั ๆทนี ยมใช ันมี ย 2 แบบ จดั ตาม ลุม น หา (Content-based Structure ) จดั ตาม ลุมผชม ( User-based Structure) รูปแบบของโครงสร้างเว็บไซต์ ราสามารถ างรปแบบโ รงสราง บไซตไดหลายแบบตาม าม หมาะสม ชน แบบ รียงลาดบั ( Sequence) หมาะสาหรับ บไซตทมี จี าน น บ พจไมมา นั หร บไซตทีมี าร นา สน มลแบบทลี ะ ันต น แบบระดับชนั (Hierarchy ) หมาะสาหรบั บไซตทีมีจาน น บ พจมา น ป็นรปแบบที รา จะพบไดทั ไป แบบผสม (Combination ) หมาะสาหรับ บไซตทีซับซ น ป็น ารนา ดี งรปแบบ ทัง 2 างตนมาผสม นั การใชส้ ีในการออกแบบเว็บไซต์ สี ป็นสงทีมี ามสา ัญต ถีชี ต นับแตสมัยด ดาบรรพจนถงปัจจุบัน ไดนาสีมาใชให ด ประโยชนโดยใช ป็นสัญลั ษณใน ารถายท ด ามหมาย ยางใด ยางหนง สีจง ป็นสงที รศ ษา พ ใชประโยชน บั ถชี ี ต ง รา พราะสรรพสงทังหลายทแี ดล มตั ราประ บไปด ยสีทังสนใน งานศลปะสี ปน็ ง ประ บสา ญั ยางหนงและใน ถีชี ต ง ราสี ป็น ง ประ บทีมี ทธพลต ามรส ารมณ และจตใจแมสี ประ บด ย สี แดง สี หล ง และสีนา งน ซง ม นาแมสที ังสาม มาผสม นั ใน ัตราส นตาง ๆ จะ ดสี นมามา มาย ซงประโยชน จา ารที รานาสีมาผสม ันทา ให ราสามารถ ล สตี าง ๆ มาใชไดตาม ามพ ใจ สรางสรร ผลงานศลปะทีงดงามตาม าม พ ใจ ผสรางสีที ดจา ารนา าแมสีมาผสม ัน ดสีใหม ม นามาจัด รียง ยาง ป็นระบบร ม รยี า งจรสี รูปที่ 2.2 ภาพแสดง งจร งสที ี ดจา ารนาแมสีมาผสม นั 13

าร ดสดี ังภาพ ดจา ารนา าแมสมี าผสม ัน ใน ัตราส นตาง ๆ ันซงสรุปไดดังนี สี ัน ที 1 (Primary Color) สพี นฐานมแี มสี 3 สี 1. สีพืน้ ฐานแม่สี รปู ที่ 2.3 สีพนฐานแมสี 1. แดง 2. สี หล ง 3. สนี า งน สี ันที 2 (Binary Color) สีที ดจา ารนา าสี ันที 1 หร แมสีมาผสม ันใน ัตราส น ทา ัน จะทาให ดสใี หม 3 สีไดแ 1. สี ีย ดจา ารนา า สี หล ง บั สนี า งน มาผสม นั ใน ัตราส น ทา ๆ นั 2. สีสม ดจา ารนา า สี หล ง ับ สแี ดง มาผสม นั ใน ตั ราส นที ทา ๆ ัน 3. สีม ง ดจา ารนา า สีนา งน บั สีแดง มาผสม ันใน ัตราส นที ทา ๆ นั สี ันที 3 (Intermediate Color) สีที ดจา ารผสม นั ระห างสี งแมสี บี สี นั ที 2 จะ ดสี น ี 6 สไี ดแ รปู ที่ 2.4 สี หล งแ ม ีย สี หล งแ ม ีย ดจา ารผสม ันระห างสี หล ง ับสี ยี ยางละ ทาๆ รูปที่ 2.5 สีนา งนแ มม ง สนี า งนแ มม ง ดจา ารผสม ันระห างสีนา งน ับสีม ง ยางละ ทา ๆ นั 14

รูปที่ 2.6 สแี ดงแ มม ง สีแดงแ มม ง ดจา ารผสม ันระห างสแี ดง บั สีม ง ยางละ ทา ๆ นั รปู ท่ี 2.7 สีแดงแ มสม สีแดงแ มสม ดจา ารผสม นั ระห างสีแดง ับสีสม ยางละ ทา ๆ ัน รปู ท่ี 2.8 สี หล งแ มสม สี หล งแ มสม ดจา ารผสม ันระห างสี หล ง บั สสี ม ยางละ ทา ๆ ัน รูปที่ 2.9 สนี า งนแ ม ีย สนี า งนแ ม ยี ดจา ารผสม ันระห างสนี า งน ับสี ีย ยางละ ทาๆ นั คุณลักษณะของสีมี 3 ประการ คือ 1. สแี ทหร าม ปน็ สี (Hue) หมายถงสีที ยใน งจรสธี รรมชาตทงั 12 สี 2. สีที รา หน ยทุ ันนแี บง ปน็ 2 รรณะ โดยแบง งจรสี ปน็ 2 ส น จา สี หล ง นไป ถงสีม ง 1.1 สีร น (Warm Color) ให ามรส รุนแรงร นตน ตนประ บด ย สี หล งสีม ง สี หล งสม สีสม สีแดงสม สีแดง สมี งสม 1.2 สี ยน (Cool Color) ให ามรส ยนสงบสบายตาประ บด ย สี หล ง สี ีย หล ง สี ีย สีนา งน ีย สีนา งน สีม งนา งน สีม ง ราจะ หน า สี หล ง และสีม ง ป็นสีที ยไดทัง 2 รรณะ ป็นสี ลาง ป็นไดทงั สีร น และสี ยน 15

ความเขม้ ของสี (Intensity) ดจา สแี ท สีที ดจา ารผสม ันใน งจรสี ป็นสีหลั ทีผสม นตาม ฎ ณฑและไม ถ ผสมด ยสี ลางหร สี น ๆ จะมี า าม มสงสดุ หร แรงจัดทสี ุด ปน็ า ามแท งสีทีไมถ จ ปน ม สี หลานี ยทาม ลางสี น ๆ ทถี ผสมให ม น หร นลง ใหมด หมน หร ปลียน า ไป แล สีแทจะแสดง ามแรง งสีปรา ฏ มาให หน ยางชัด จน ซงจะทาให ดจุดสนใจ นใน ผลงานลั ษณะ ชนนี หม น ับ ด ฟ่ื งฟูาสีชมพสด หร บาน ยน ที ยทาม ลางใบ ฟื่ งฟูาที ีย จัด ๆ หร พลทุ ถี จุดส งส างในยาม ทศ าล ตัด บั สีมด ๆ ทบ ๆ งท งผายาม า น ป็น ตน นา้ หนักของสี (Value) ป็น ารใชสีโดยใหมี านาหนั ในระดับตาง ๆ ัน และมีสีหลาย ๆ สี ซงถา ป็นสี ดีย จะมี ลั ษณะ ป็นสี รง ารใช านาหนั งสี จะทาให ด าม ลม ลน ดระยะใ ลไ ล ตนล ถามี านาหนั หลาย ๆ ระดบั สี จะ ลม ลน ันมา นแตถามี พียง 1 - 2 ระดับทีหาง ัน จะทาให ด ามแต ตาง ความรู้สึกของสี ารใช รรณะร น ชนสีแดงสม ทาให ด ามรส บ ุน ทาทาย ล นไห สงตาง ๆ ที รา สมั ผัสด ยสายตา จะทาให ด ามรส นภายในต รา ทันทีที ราม ง หนสี ไม าจะ ป็น ารแตง าย บานที ย าศัย ร งใชตาง ๆ แล ราจะทา ยางไร จงจะใชสไี ด ยาง หมาะสม และส ด ล ง บั หลั จต ทยา ราจะต ง าใจ าสีใดให ามรส ต มนษุ ย ยางไร ซง ามรส ีย ับสีสามารถ จาแน ไดดงั นี สกี บั การออกแบบ ผสรางสรร งาน แบบจะ ป็นผที ีย ง ับ ารใชสีโดยตรงมัณฑนา รจะ ด นสี นมา พ ใชในงานต แตง น แบบฉา ที ารแสดงจะ ด นสี ีย ับแสง จตร ร จะ ด นสี นมา ระบายให หมาะสม ับ าม ดและจนตนา าร งตนแล ตั ราจะ ด นสี นมา พ ามงาม ามสุ สาหรับ รามไดหร สีทีใชสาหรับ าร แบบนันถา ราจะใชให ด ามส ยงามตรงตาม ามต ง าร ง รา มหี ลั ใน ารใช างๆ ย 2 ประ าร ารใชสี ลม ลน ันและ ารใชสีตัด ัน ารใชสี ลม ลน ัน ารใชสีให ลม ลน ัน ป็น ารใชสีหร นาหนั งสีใหใ ล ียง ัน หร ลาย ลง ัน ชน ารใชสีแบบ รง ป็น ารใชสีสี ดีย ทีมีนาหนั นแ หลายลาดับ ารใชสี าง ียง ปน็ ารใชสีที ียง นั 2 - 3 สี ใน งสี ชน สีแดง สีสมแดง และสีม งแดง ารใชสีใ ล ียง ป็น ารใชสีที ย รียง ันใน งสีไม น 5 สี ตล ดจน ารใชสี รรณะร นและ รรณะ ยน (warm tone colors and cool tone colors) ดังได ลา มาแล 16

ตารางความรสู้ กึ ของสี รูปท่ี 2.10 ามรส งสี ารใชสีตัด ัน สีตัด ัน สีที ยตรง าม ันใน งจรสี ารใชสีใหตัด ันมี ามจา ป็นมา ใน งาน แบบ พราะช ยให ด ามนาสนใจในทนั ทที พี บ หน สีตดั ัน ยางแทจรงมี ยด ย นั 6 สี - สี หล ง ตรง าม ับ สมี ง - สีสม ตรง าม บั สนี า งน - สแี ดง ตรง าม บั สี ีย - สี หล งสม ตรง าม ับ สีม งนา งน - สสี มแดง ตรง าม บั นา งน ีย 17

- สีม งแดง ตรง าม บั สี หล ง ยี ารใชสีตัด ัน ร านงถง าม ป็น ภาพด ย ธี ารใชมีหลาย ธี ชน ใชสีใหมีปรมาณ ตาง นั ชน ใชสีแดง 20 % สี ยี 80% หร ใช น สีผสมใน ันและ ันหร ใชสีหนงสีใดผสม ับสี ทีตัด ันด ยปรมาณ ล น ยร มทัง าร าสีทีตัด ันมาทาให ป็นล ดลาย ล ๆ สลับ ัน ในผลงาน ชนหนง าจจะใชสีให ลม ลน ันหร ตัด ัน พียง ยางใด ยางหนงหร าจจะใชพร ม ันทัง 2 ยาง ทงั นีแล แต ามต ง ารและ าม ดสรางสรร ง ราไมมีหลั ารหร รปแบบทีตายตั ใน งาน แบบหร ารจัดภาพหา รารจั ใชสีใหมีสภาพโดยร ม ป็น รรณะร น หร รรณะ ยน รา จะสามารถ บ ุมและสรางสรร ภาพให ด ามประสาน ลม ลนงดงามไดงาย น พราะสีมี ทธพลต ม ล ปรมาตร และช ง างสีมี ุณสมบัตทีทาให ด าม ลม ลน หร ัดแยงได สี สามารถ บั นนใหให ดจุด ดน และ ารร ม ันให ด ป็นหน ย ดีย ันได ราในฐานะผใชสีต งนา หลั ารตาง ๆ งสีไปประยุ ตใชใหส ด ล ง ับ ปูาหมายในงาน ง รา พราะสีมีผลต าร แบบ สราง ามรส สใี ห ามรส ต ผพบ หนแต ตาง นั ไปทงั นี น ย บั ประสบ ารณและภม หลัง งแตละ นสีบางสีสามารถรั ษาบาบัดโร จตบางชนดได ารใชสีภายในหร ภายน า ารจะ มี ผลต ารสัมผัสและสรางบรรยา าศได สราง ามนาสนใจสมี ี ทธพลต งานศลปะ าร แบบจะช ยสราง ามประทับใจและ าม นาสนใจ ป็น ันดับแร ทีพบ หน สบี สัญลั ษณ ง ัตถุซง ดจา ประสบ ารณหร ภมหลัง ชนสีแดงสัญลั ษณ งไฟ หร นั ตรายสี ีย สญั ลั ษณแทนพชหร ามปล ดภัย ป็นตน สีช ยให ด ารรับร าร แบบต ง ารใหผพบ หน ด ารจดจาใจรปแบบแลผลงาน หร ด ามประทบั ใจ ารใชสีจะต งสะดุดตา และมี ภาพ ทฤษฎเี ก่ียวกบั E-Commerce ารพัฒนาระบบ น ท ร นตใหสามารถซ ายสน าผ านทาง บไซตที รีย า าร า ล ทร น สหร ี ม มรซ (E-Commerce) ซ ช ยลด ันต นและ ามยังยา ีย ับ ารซ ายสน าได ยางย ด ยียมระบบ ี ม มรซได ามาแทนที ธี ารซ ายในรปแบบ า ๆ ภายใน ระยะ ลา ันร ด ร ใน ณะ ดีย ันบรษัทผพัฒนาซ ฟตแ ร รงพัฒนาซ ฟตแ รใหมี ามสามารถใน ารสราง บไซต ร มทงั สรางระบบ ี ม มรซใหงายต ารใชงานมา นโดย สามารถแย ได ปน็ 2 ส นหลั - บ พจหนาราน (Store Front) หนา บ พจสาหรับใชใน ารสรางซ สน าหร บร าร ตาง 18

- บ พจหลังราน (Back Office) บ พจทใี ช ฉพาะบุ ลา ร งราน าซงผใชงานภายน ไมสามารถ ามาในส นนีไดประโยชน พ าหนดรายละ ยี ดตาง ๆ ที ยี ง ับตั สน าหนา บ ราน า ระบบพาณชย ล ทร น สไมไดหยุด ยแ นันต มาไดมี ารพัฒนาระบบตาง ๆ นมา มายที นามาใช ทางธุร รรมตาง ๆ ร มทัง าร ายสน า นไลนซงในปัจจุบันไดมี ารพัฒนาระบบหร โปรแ รมที ามาช ยใน ารสนบั สนุน าร ายสน าใหมีประสทธภาพมา น ปัจจุบันมี ารทาธุร จ ผานระบบ ร าย น ท ร นต ด นมา มายโดยมีรปแบบตาง ๆ ดังนี 1. ารประ าศซ าย ป็นรปแบบ บไซต E-Commerce ที ปิดโ าสใหผสนใจประ าศ าม ต ง ารซ ายสน า งตน งได ภายใน บไซตโดย บไซต จะทาหนาที หม น ระดาน า และ ตั ลาง ารแสดง มลสน าตาง ๆ และหา มี นสนใจสน าทีประ าศไ สามารถตดต ตรงไปยังผ ประ าศไดทันทีจา มลทีประ าศ ยภายใน บไซต บไซต แ ตตาล สน า นไลน ป็น บไซต มีรายละ ียดแสดง มลสน ารปภาพและรายละ ียดตาง ๆ ร มทัง มล ารตดต ใน รณีทสี นใจจะซ สน าแตจะไมมีระบบ งนหร สงั ซ สน า 2. ราน า นไลน ป็น บไซต E-Commerce ทีมีทังระบบ ารจัด ารสน าระบบตะ รา สน า Shopping Cart ระบบ ารชาระ งนร มถง าร นสงสน า รบสมบรณแบบทาใหผซ สามารถสงั ซ สน าทา ารชาระ งนผาน บไซตไดทนั ที ทฤษฎีเก่ยี วขอ้ งกับระบบฐานข้อมลู และ E-R Diagram Database (ฐานข้อมลู ) ระบบทีร บร ม มลไ ในที ดีย ัน ซงประ บไปด ยแฟูม มล (File) ระ บียน (Record) และ ต มล (Field) และถ จัด ารด ยระบบ ดีย ัน โปรแ รม มพ ต รจะ าไป ดง มลทตี ง ารได ยางร ด ร ซง าจ ปรยี บฐาน มล สม น ปน็ electronic filing System บด (bit) ย มาจา Binary Data มลใน มพ ต ร 1 บต จะแสดงได 2 สถานะ 0 หร 1 าร บ มลตาง ๆไดจะต งนา บต หลายๆ ปิด มา รียงต ัน ชน นา 8 บด มา รียง ป็น 1 ชุด รยี า1 ไบต ชน 10100001 หมายถง 10100010 หมายถง ม รานา ไบต (byte) หลายๆ ไบต มา รียงต ัน รีย า ต มล (field) ชน Name ใช บช Last Name ใช บ นามส ุล ป็นตน ม นา ต มล หลายๆ ต มล มา รียงต ัน รีย า ระ บียน (record) ชน ระ บียน ที 1 บช นามส ุล ัน ด นปี ด ง นั รียน นที 1 ปน็ ตน าร บระ บยี นหลายๆระ บียน ร ม ัน รีย า แฟูม มล (File) ชน แฟูม มลนั รียน จะ บช นามส ุล ัน ด นปี ด งนั รียน จาน น 500 น ป็นตน ารจัด บ แฟูม มล หลายๆ แฟูม มลไ ภายใตระบบ ดีย ัน รีย า ฐาน มล หร Database ชน บแฟูม มล 19

นั รียน าจารย ชาที ปิดส น ป็นตน าร าถง มลในฐาน มลจงจา ป็นต งมีระบบ าร จัด าร ฐาน มลมาช ย รีย า database management System (DBMS) ซงจะช ยใหผใช สามารถจัด าร ับ มล ตาม ามต ง ารไดในหน ยงานใหญๆ าจมีฐาน มลมา า 1 ฐาน มล ชน ฐาน มลบุ ลา ร ฐาน มลล า ฐาน มลสน า ปน็ ตน สาระสาคัญ ฐาน มล ป็น ารจัด บ มล ยาง ป็นระบบ ทาใหผใชสามารถใช มลที ีย งใน ระบบงานตาง ๆ ร ม ันได โดยทีจะไม ด ามซาซ น ง มล และยังสามารถหลี ลียง าม ัดแยง ง มลด ย ี ทัง มลในระบบ จะถ ต ง ช ถ ได และ ป็นมาตรฐาน ดีย ัน โดยจะมี าร าหนดระบบ ามปล ดภัย ง มล นนับได าปัจจุบัน ป็นยุ งสารสน ทศ ป็นทีย มรับ ัน า สารสน ทศ ป็น มลทีผาน าร ลัน ร ง ยาง หมาะสม สามารถนามาใชประโยชน ยาง มา มาย ไม าจะ ป็น ารนามาใชงานดานธุร จ ารบรหาร และ จ าร น ๆ ง รทีมี มล ปรมาณมา ๆ จะพบ ามยุงยา ลาบา ใน ารจัด บ มล ตล ดจน ารนา มลทีต ง าร มาใชใหทนั ต หตุ ารณ ดงั นัน มพ ต รจงถ นามาใช ป็น ร งม ช ยใน ารจัด บ มล ารประม ลผล มล ซงทาใหระบบ ารจัด บ มล ป็นไปไดสะด ทังนีโปรแ รมแต ละ โปรแ รมจะต งสราง ธี บ ุมและจัด าร บั มล น ง ฐาน มลจง ามามีบทบาทสา ัญ ยาง มา โดย ฉพาะระบบงานตาง ๆ ทใี ช มพ ต ร าร แบบและพัฒนาระบบฐาน มล จง ต ง านงถง าร บ ุมและ ารจัด าร ามถ ต งตล ดจนประสทธภาพใน าร รีย ใช มล ด ย ระบบจดั ารฐาน มลซ ฟตแ รสาหรับจัด ารฐาน มลนัน โดยทั ไป รีย า ระบบ จัด าร ฐาน มล หร ดีบี ม ส (DBMS - Database Management System) สถาปัตย รรม ซ ฟตแ ร งดีบี ม ส าจมีไดหลายแบบ ชน สาหรับฐาน มล นาด ล ทีมีผใช น ดีย บ ย รังทีหนาหมดจะจัด ารด ยโปรแ รม พียงโปรแ รม ดีย ส นฐาน มล นาดใหญทีมีผใช จาน นมา นัน ป ตจะประ บด ยโปรแ รมหลายโปรแ รมด ย ัน และโดยทั ไปส นใหญจะใช สถาปัตย รรมแบบรับ-ใหบร าร (client-server) โปรแ รมส นหนา (front-end) งดีบี ม ส (ไดแ โปรแ รมรบั บร าร) จะ ีย ง ฉพาะ ารนา า มล ารตร จส บ ป็นสา ัญ ใน ณะที โปรแ รมส นหลัง (back-end) ซงไดแ โปรแ รมใหบร าร จะ ป็นชุด ง โปรแ รมทีดา นน าร ีย บั าร บ มุ , าร บ มล, และ ารต บสน ง ารร ง จา โปรแ รมส นหนา โดยป ต แล าร นหา และ าร รยี งลาดบั จะดา นน ารโดยโปรแ รม ใหบร ารรปแบบ งระบบฐาน มล มีหลา หลายรปแบบด ย ัน นับตังแต ารใชตาราง ยางงาย ที บในแฟูม มลแฟูม ีย ไป จน ระทัง ฐาน มล นาดใหญมา ทีมีระ บียนหลายลานระ บียน ซง บในห งที ตมไปด ยดส ไดรฟ์ หร ปุ รณหน ย บ มล ล ทร น สร บ าง(peripheral) น ๆ าร แบบฐาน มล าร แบบฐาน มล (Designing Databases) มี ามสา ัญต าร จัด ารระบบฐาน มล (DBMS) ทังนี น งจา มลที ยภายในฐาน มลจะต งศ ษาถง 20

ามสัมพนั ธ ง มล โ รงสราง ง มล าร าถง มลและ ระบ น ารทีโปรแ รม ประยุ ต จะ รยี ใชฐาน มล ดังนัน ราจงสามารถแบง ธี ารสรางฐาน มลได 3 ประ ภท 1. รปแบบ มลแบบลาดับ นั หร โ รงสรางแบบลาดับ นั (Hierarchical data model) ธี ารสรางฐาน มลแบบลาดบั นั ถ พฒั นาโดยบรษัท ไ บี ม จา ัด ในปี 1980 ไดรับ ามนยม มา ใน ารพฒั นาฐาน มลบน ร ง มพ ต ร นาดใหญและ นาด ลาง โดยทีโ รงสราง มล จะสรางรปแบบ หม นตนไม โดย ามสัมพนั ธ ป็นแบบหนงต หลาย (One-to Many) 2. รปแบบ มลแบบ ร าย (Network data Model) ฐาน มลแบบ ร ายมี าม ลาย ลง บั ฐาน มลแบบลาดบั ชัน ตาง นั ทีโ รงสรางแบบ ร าย าจจะมี ารตดต หลาย ต หนง (Many-to-one) หร หลายต หลาย (Many-to-many) ลา ล (Child) าจมีพ แม (Parent) มา าหนง สาหรบั ตั ยาง ฐาน มลแบบ ร ายใหล งพจารณา ารจัด าร มล ง ห งสมดุ ซงราย ารจะประ บด ย ช ร ง ผแตง สานั พมพ ที ย ประ ภท 3. รปแบบ ามสมั พนั ธ มล (Relation data model) ป็นลั ษณะ าร แบบ ฐาน มล โดยจดั มลให ยในรป งตารางทีมีระบบ ลายแฟูม โดยที มลแตละแถ (Row) ง ตารางจะ แทน ร รด (Record) ส น มลนแน ดงจะแทน ลัมน (Column) ซง ป็น บ ต ง มล (Field) โดยทีตารางแตละตารางทีสราง นจะ ป็น สระ ดังนันผ แบบฐาน มลจะต งมี าร างแผนถงตาราง มลทีจา ป็นต งใช ชนระบบฐาน มลบรษัทแหงหนง ประ บด ย ตาราง ประ ัตพนั งาน ตารางแผน และตาราง มลโ รง าร แสดงประ ัตพนั งานตารางแผน และ ตาราง มลโ รง าร าร แบบฐาน มล ชงสัมพันธ าร แบบฐาน มลใน ง ร นาด ล พ ต บสน ง ามต ง าร งผใชงาน าจ ปน็ ร งทีไมยุงยา นั น งจา ระบบและ นั ต น ารทางานภายใน ง รไมซับซ น ปรมาณ มลทีมี ไมมา และ จาน นผใชงานฐาน มล มี พียงไม ี น หา ท าใน ง ร นาดใหญ ซงมีระบบและ ันต น าร ทางานทีซบั ซ น ร มทงั มีปรมาณ มลและผใชงานจาน นมา าร แบบ ฐาน มลจะ ป็น ร ง ทีมี ามละ ียดซับซ น และต งใช ลาใน ารดา นน ารนานพ ร ที ดีย ทังนีฐาน มลที ไดรับ าร แบบ ยาง หมาะสมจะสามารถต บสน งต ามต ง าร งผใชงานภายใน หน ยงานตาง ๆ ง ง รได ซงจะทาให ารดา นนงาน ง ง รมี ประสทธภาพดียง น ป็น ผลต บแทนที ุม าต ารลงทุน พ พัฒนาระบบฐาน มลภายใน ง รทังนี าร แบบ ฐาน มลทีนาซ ฟตแ รระบบจัด ารฐาน มลมาช ยใน ารดา นน าร สามารถจาแน หลั ใน าร ดา นน ารได 6 นั ต น สญั ลกั ษณใ์ นการออกแบบระบบฐานข้อมูล ารร บร มและ ราะห ามต ง ารใน ารใช มล 1. าร ล ระบบจัด ารฐาน มล 2. าร แบบฐาน มลในระดบั แน ด 21

3. ารนาฐาน มลที แบบในระดับแน ด าสระบบจัด ารฐาน มล 4. าร แบบฐาน มลในระดบั ายภาพ รูปที่ 2.11 แสดงสัญลั ษณใน าร แบบระบบฐาน มล ผงั งาน Flow Chart หร ผงั งาน หมายถงแผนภาพแสดงลาดบั าร ล นไห หร าร ระทา ง น หร สงที ีย งในระบบตางๆ ดี ง Flow Chart ารแสดงภาพร มและช ยจัดลาดับ ันต น ารทางานในระบบได ยาง ป็นระ บียบและถ ต ง พ พมประสทธภาพใน ารทางาน ทั ไปแล ประ ภท ง Flow Chart ถ แบง มาไดสีรปแบบดังนีผังงาน สาร (Documents Flow Chart) - หมายถง าร ล นไห ง สารในระบบผังงาน มล (Data Flow Chart) – หมายถง าร ล นไห ง มลในระบบ ผังงานระบบ (System Flow Chart) – หมายถง าร ล นไห งสง งและทรัพยา รในระบบ ผังงานโปรแ รม (Program Flow Chart) – หมายถง บ ุม ารตัดสนใจโปรแ รมในระบบผังงาน Flow Chart จะถ แสดงในรปแบบ “ ล ง” หร “สญั ลั ษณ” (block) ในรปทรงตาง ๆ พ แทน จ รรมและ ารตัดสนใจในระบบ ซง Flow Chart สามารถถ ใช พ ราะห แบบ จัด บ มล หร บรหาร ระบ น ารหลายรปแบบในหลาย ุตสาห รรมในส นถัดไป งบท าม ผมจะ ียน ธบาย ามหมาย ง “ ล ง” หร “สัญลั ษณ” ตาง ๆ และ ธี ารใชงานทีถ ต งใหหนา าร ทาให หนภาพ” ดีหลั ง าร ยี นผงั งาน ราจะ หนได า ระบ น ารทางานตาง ๆ จะ ประ บไปด ย จ รรมหร ันต นย ย มา มาย แตละ ันต น ต ง าร มลและทรัพยา รทีแต ตาง พราะฉะนันหา รามี Flow Chart รา สามารถหา จุด น จุดบ ด หร ปญั หา ด (Bottleneck) พ พัฒนาระบบ ง ราไดปัญหา หลั ง าร แบบระบบทางาน ารทางาน ซา ทางานชั ชา ทางานหลาย ันต น ดจา ป็น 22

โดย ฉพาะในระบบทมี ี น ทรัพยา ร หร ระบ น าร ย ะ ซงส นมา หา จะ ดจา ารที ราใส ใจ ระบ น าร ฉพาะจุด” มา นไป จน ลมดภาพร ม งทังหมดในส นนี ารพัฒนาและ แบบ ระบ น ารทางาน มี ร งม ยหลาย แบบ ผมแนะนาใหล ง านบท าม หลานีดนะ รับ 5ส ะไร และ Design Thinking ับ าร ด ชง แบบ สียและ จา ัด ง Flow Chart ในบท ามส นทีแล รา หนแล า Flow Chart นันสามารถใชทาประโยชนให ับ าร แบบระบบ พมประสทธภาพ ารทางานได ยางไรบาง ยางไร ตาม นที ราจะ รมศ ษา ธี าร ียนผังงาน Flow Chart ผม ยา จะแนะนา สียและ จา ัด ง Flow Chart ด ย สียแร Flow Chart ไม หมาะ ับระบบ ารตัดสนใจที ซับซ นมา นไป ซง ราจะ หนได บ ยใน าร แบบระบบ ารตัดสนใจ งโปรแ รม มพ ต ร ย ตั ยาง ชนถา ุณมีระบบที ต ง ราะห 100 ปัจจัย พ ล ระห าง ารตัดสนใจ 50 ยาง าร าดแบบ Flow Chart มาใหมนุษย าใจได ทาไดยา ในระบบทีซับซ นแบบนี าร าด แบบ Flow Chart มา งใช ลานานไมน ย และ ารที ราจะ ลับมาแ Flow Chart ภายหลัง ม รามี มล พม ตม ง ใช ลามา ไมแพ ัน พดงายๆ ใน รณีที รามรี ายละ ยี ด ย ะมา ๆ าร แบบระบบให าใจ ไดงาย ป็น จา ัด ง าร าดผังงาน สีย ี ยางหนง าร จัด บ มลสาหรับผใช จาน นมา หมายถง ารปภาพผังงานทีถ แบบมา จะแสดงถง ณฑ าร ตัดสนใจและ ันต น จ รรมตาง ๆ ชนถาใชใหทา ยางนง ถาไมใชใหทา ี ยาง หร ารแสดง าร ระทาทีน ย า ทา ับ หร มา าตั ล ใดตั ล หนง ใน รณีนีหา ป็น ารใชงานระยะสัน หร มีผใชงานและ แบบงานไม ี น ปญั หา งไมไดมี ะไรมา แตถา ุณมีผใชงาน แบบงาน หลั ร ยหร พัน น าร ลับมาแ ไ มล Flow Chart ภายหลัง ทาไดยา ซง ราจะ หนไดบ ยใน ง รใหญๆ ยาง Microsoft หร Facebook ทีมี าร แบบระบบหลงั บานทีไมมีใ รร า “ทา ะไรได” และ “ต งแ ไ ยังไง? ( รีย า Legacy Code) ซงส นมา ารแ ปัญหา “ ารจัด บ มล * ย าร สราง นัยและระ บยี บ ง ารทางาน แตโดยร มแล ยง ง รมี นาดใหญ ารส สารใน ง ร จะมปี ระสทธภาพน ยลง และ Flow Chart ป็นตั ยางทีดี สียและ จา ัด ง Flow Chart ทีผม ธบายไ ไมได ป็น สีย ง Flow Chart โดยตรง แต ป็นปญั หาทีทาใหประสทธภาพ ารทางานน ยลง ม ยในบางสถาน ารณ ในส นถัดไป ราจะมาด ัน ร ง ธี าร ียนผังงาน Flow Chart ผม สน ใหทุ นล ง ียน “Flow Chart ง าร ล รณีใช Flow Chart” การเขยี นผงั งาน Flow Chart ในสมัยนี ถงแม า ราจะสามารถ าด Flow Chart ด ยม ได แต ง รส นมา หันมาใช โปรแ รมตาง ๆ พ ช ยใน าร ียน Flow Chart ให ร น มีประสทธภาพไดมา นได พราะ าร แบบระบบทางาน ปน็ แ นั ต นแร าร ียนผงั งาน Flow Chart ใหใชงานไดจรง ต ง านง ด ย า “ น นจะ านแล าใจหร ปลา สาหรับ นทยี ังไม หนภาพนะ รับ างลางจะ ป็นตั ย43 23

งผงั งาน Flow Chart ในต นนี ณุ ยังไมต งทา าม าใจทังหมด ได แ ด รา ๆไ น ลาที ผม ธบาย ร งสัญลั ษณตาง ๆ และ ธี าร ยี น ณุ จะไดไมงงมา
a,b
a>b Sum = (a*7)/100
Sum = (a*3)/100 รปู ที่ 2.12 ผงั ารทางาน ง Flow chart แต น ารที ราจะ ียน Flow Chart ไดนัน ราต ง าใจ น า สัญลั ษณ” ตางๆ ง Flow Chart มี ะไรบาง และแตละ ยางหมายถง ะไร ทาความรูจ้ ัก “สัญลกั ษณ์” ใน Flow Chart สญั ลั ษณ Flow Chart แตละ ยางจะใชแทน า ธบาย จ รรมและ ารตดั สนใจตางๆ ชน จดุ รมตน จดุ สนสดุ จุดประม ลผล ารทางาน ป็นตน 24

วิธีการเขยี นผังงาน Flow Chart หลั จา ที ราไดทา าม าใจสญั ลั ษณตาง ๆ ใน Flow Chart แล รามาด ัน า ธี าร ยี นผังงานทดี ี ต งทา ยางไร #1 าหนด ปูาหมายและ บ ต งงาน - ปาู หมายและ บ จะ ป็นตั าหน) จดุ รมตน และจุดสนสุด าร าหนดทุ ยางใหชัด จนตงั แตแร จะทาให ุณ รยี บ รยี งทุ ยางไดดี มา น ทา ใหผงั งาน านแล าใจงาย #2 าหนด จ รรมและลาดบั าร ระทา - ร มถง ารพด ุย ับ นที ยี งและสัง ต ธี าร ทางานปัจจบุ นั หร ศ ษา มล าๆ พ สราง ระบ น ารทางาน และ จ รรมทีมี ประสทธภาพ ทีสุด แนน น า าร รียงลาดบั าร ระทาให ป็น ันต นทีชดั จน จะทาให าร ียนผงั งานงาย น #3 จดั รยี ง จ รรมลงผงั งาน ตามสัญลั ษณ – ตามสัญลั ษณ งผังงานทีไดระบุไ ในส นที แล #4 โยง จ รรมตาง ๆ าด ย นั ผานล ศร - ใน รณที ี ุณยังไมมันใจ ให รมจา าร าดใน ระดาษ นแล ยนามาจดั รียงในโปรแ รมใหส ยๆ โปรแ รมพนฐานทีสดุ Microsoft Powepoint ทมี สี ัญลั ษณทุ ยางให ยแล #5 ตร จส บ ามถ ต ง – นาผังงานทถี รยี บ รยี งแล ไปตร จส บ บั บุ ลที ีย ง ี ที พ ปู ง ัน ามผดพลาด แนะนาใน าร ยี น Flow Chart ทีดี ใ ร าน าใจ #1 จาไ าผังงาน าร รยี บ รียง มล - หมาย าม า ุณต ง แบบผงั งานโดย ดถง ผ าน รายละ ียด ย ะไป านยา รายละ ยี ดน ยไป านไม าใจ #2 ยี นผังงานใหจบภายใน 1 หนา – พราะจะงายต าร านมา า ใหล งศ ษา สญั ลั ษณ “ ารทางานย ย” พ ลด ามจา ปน็ ง าร ียนระบบงานแบบซา ๆ #3 หา ป็นไปไดให ียนจา ซายไป า - นส นมา านจา ซายไป า แต ี ตั ล หนง ที รา จะ หนไดบ ย ยี นจา บนลงลาง ซง ียนจา บนลงลางมปี ระโยชนมา าใน รณที ผี ัง งานมี ระบบซับซ น แตผงั งานพนฐาน ียนจา ซายไป าจะ านงาย า #4 ประ บสีตาง ๆ า บั สัญลั ษณ - พ ทาให านงาย น ชนสี หลียมผนผาสีนง สี หลียม าง หม ี สี ใชแมสแี บบ นๆ จะทาให านงาย ส นล ศรและตั ั ษร ใชสดี า 25

สญั ลกั ษณ์ระบบกระแสข้อมูล รปู ที่ 2.13 สัญลั ษณระบบ ระแส มล แผนภาพแสดงการไหลกระแสของขอ้ มูล (Data Flow Diagram: DFD) ป็น ร งม งนั ราะหระบบทีช ยใหสามารถ าใจ ระบ น ารทางาน งแตละ หน ยงาน ซงทราบถง ารรับสง มล ารประสานงานระห าง จ รรมตาง ๆ ใน ารดา นนงานซง ป็น แบบจาล ง งระบบแสดงถง ารไหล ง มลทัง INPUT และ OUTPUTระห างระบบ ับ แหลง า นดร มทังปลายทาง ง ารสง มลซง าจ ป็นแผน บุ ล หร ระบบ น โดย น ย ับ ระบบงานและ ารทางานประสานงานภายในระบบนันน จา นยี งั ช ยใหรถง ามต ง าร มล และ บ พร ง (ปัญหา) ในระบบงาน ดม พ ใชใน าร แบบ ารปฏบัตงานในระบบใหม Data Flow Diagram (DFD) ป็นภาพแสดง าร ปลียนแปลง มลใน ณะไหลผาน ระบ น าร ทางาน ตาง ๆ งระบบสารสน ทศ DFD จง ป็นโ รงสราง งระบบงานสารสน ทศทีส าใจใน าร ทางาน งระบบงานในรปแบบ ง ามสัมพันธระห าง ระแส มลและโปร ซส DFD ภายใน DFD ทาให รา าใจส นประ บ งงาน าใจ ารใช มลในแตละโปร ซส และ มลที ป็นผลจา าร ทางานโปร ซสโดยโ รงสรางจะ รมจา ระดับสงสุดซงจะแสดงส นที ยภายน ระบบ ส นนีสา ัญ พราะ า ป็นส นทีบ าระบบนัน ๆ ไดรับ มลมาจา ทีใด และผลลัพธตาง ๆ ทีใด และผลลัพธ ตาง ๆ ถ สงไปทีใดบาง DFD ในระดับล ลงไปจะไมแสดงสงที ยน ระบบ ไมมีสงนี ป็น ส นประ บโดยป ต จะ างแหลงทีมา ง มลไ ทางซายม ง DFD และ ส นภายน ทีรับ ผลลพั ธ งระบบจะ ยทาง าม ทังนี พ ให ยในรปแบบ ง ระแส มล จา ซายไป า 26

โปรแกรมทีใ่ ชใ้ นการทาเว็บไซต์ โปรแกรม Dreamweaver CS6 ะโดบี รีม ีฟ ร (Adobe Dreamweaver) หร ช ดม แมโ รมี ดีย ดรีม ีฟ ร (Macromedia Dreamweaver) ปน็ โปรแ รมแ ไ HTML พัฒนาโดยบรษัทแมโ รมี ดีย (ปัจจุบัน บ จ ารร ม ับบรษัท ะโดบีซส ตมส) สาหรับ าร แบบ บไซตในรปแบบ WYSIWYG ับ าร บ มุ งส นแ ไ รหสั HTML ใน ารพัฒนาโปรแ รมทมี ี ารร มทังส งแบบ า ด ย ันแบบ นที าให รีม ีฟ ร ป็นโปรแ รมทีแต ตางจา โปรแ รม น ๆ ในประ ภท ดีย ัน ในช งปลายปี ทศ รรษ 2533 จนถงปีพ.ศ. 2544 รีม ีฟ รมีสัดส นตลาดโปรแ รมแ ไ HTML ยมา า 70% รีม ี รมีทังในระบบปฏบัต ารแม นท ช และไมโ รซ ฟท นโด ส รีม ีฟ รยัง สามารถทางานบนระบบปฏบัต ารแบบยน ซ ผานโปรแ รมจาล ง ยาง WINEได รุน ลาสุด รีม ฟี ร CS6 าร รม าหนดโ รงสราง ง บ นดา นน ารสราง บ พจ ันแร ร าหนดให มลตาง ๆ ที ีย ง ยใน Folder ดยี ัน พ งายต นหาและจัด บ ตั ยาง ชนทา บ พจ งหน ยงาน น น รา รสราง Folder ช งหน ยงาน น าจ ป็น ภาษา ัง ฤษหร ภาษาไทย ได แล ใน Folder หน ยงาน ยสราง Folder ย ย ี ที าจ ประ บด ยหลาย Folder ย ย พ ใชสาหรบั แย บไฟลตาง ๆ ปน็ หม ดหม ชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตาง ๆ Dreamweaver ป็น ร งม ใน ารสราง บ พจทีมีประสทธภาพสง ปัจจุบัน Dreamweaver ไดพฒั นา ปน็ CS แล ป็นโปรแ รมสราง บ พจแบบ สม นจรง ง าย AdoB8 ซงช ยใหผทีต ง ารสราง บ พยไมต ง ียนภาษาบIML หร โ ด โปรแ รม หร ทีศัพท ท น รีย า \"WYSIWYG โปรแ รม Dreamweaver มีฟัง ชันทีทา ใหผใชสามารถจัด าง าม รปภาพ ตาราง ฟ รม ดีโ ร มถง ง ประ บ น ๆ ภายใน บ พจได ยางส ยงามตามทีผใช ต ง าร โดย ไมต งใชภาษาส รปตทียุงยา ซับซ น หม น น [ Dreamweaver มีทังใน ระบบปฏบตั าร แม นท ช และ ไมโ รซ ฟท นโด ส ยังสามารถทางานบนระบบปฏบัต ารแบบ ยน ซ ผาน โปรแ รมจา ล ง ยาง WINI: ได รชันลาสุด งโปรแ รมตั นี Adobe Dreamweaver CS6 ความสามารถของ Dreamweaver CS6 1. สนบั สนุน ารทางานแบบ WYSIWYG (What You See Is What You Get) หมาย าม า ะไร ตามที ราทา บนหนาจ Dreamweaver จะปรา ฏผลแบบ ดีย ันบน บ พจ ซงช ยให าร สรางและแ ไ บ พจนนั ทา ไดงาย โดยไมต งมี ามรภาษา HTML ลย 2. มี ร งม ใน ารสรางรปแบบหนาจ บ พจ ซงช ย า น ย ามสะด ใหผใชงานได มา 3. สนับสนนุ ภาษาส รปตตาง ๆ ชน Java, ASP, PHP, CGI, VBScript 27

4. มี ร งม ทีช ยใน าร Upload หนา บทีสรางไปที Server พ ทา าร ผยแพรงานที สรางบน Internet 5. ร งรบั ารใชมนั ตมี ดยี ตางๆ ชน สียง ราฟฟิ และภาพ ล นไห ทีสรางโดย โปรแ รม Flash, Shockwave, Firework ป็นตน 6. มี ามสามารถทา ารตดต ับฐาน มล พ ช มต ับ บไซต ส่วนประกอบ Adobe Dreamweaver CS6 1. มนบาร (Menu bar) ป็นส นทีใชใน ารสรางและทางาน ับโปรแ รม ซงมี ารแบง ป็น ลุม าสังตาง ๆ ป็นหม ดหมและ บไ ป็น มน โดยในแตละ มน จะมี มนย ย ๆ ไ รีย ใชงาน ตามต ง าร 2. แถบ ร งม (Insert bar) ป็นส น ง ารร บร ม ร งม ทีใชใน ารสราง ัตถุหร ง ประ บตาง ๆ งหนา บ พจ ซงแบง ป็น ลมุ ๆ มีทงั หมด 8 ลุม - Common ป็น ลมุ ร งม ทีใชงานบ ย ๆ ใน ารสราง บ พจ ชน ารแทร ตาราง าร แทร รปภาพ ป็นตน - Layout ใชสาหรบั าง ตั ถทุ ใี ชจดั โ รงสราง ง บ พจ ชน ตาราง ฟรม และ AP Element - Forms ใชสาหรับ าง ัตถุทีใชสรางแบบฟ รม พ รับ มลจา ผใชงาน บไซต ชน าร สมั รสมาช ป็นตน - Data ใชสาหรบั าง าสงั ทีใชจัด าร บั ฐาน มลและนาฐาน มล มาแสดงบนหนา บ พจ - Spray ใชสาหรับ าง ัตถุทใี ช ท โนโลยี ง Spary ในรปแบบตาง ๆ - In Context Editing ใชสาหรับสรางพนที ทม พลต พ าน ย ามสะด ต ผใชใน าร แ ไ น หา - Text ใชสาหรับจัดรปแบบ ง ามภายใน บ พจ ชน ตั หนา ตั ียง หั บุล ลต และแทร สัญลั ษณตาง ๆ ได - Favorites ใชสาหรับ พม ร งม ที รีย ใชงานบ ย ๆ โดย พมจา ลุม ร งม น ๆ ได โดย ล มาส าบน Insert bar แล ล Customize Favorites (ตั ยางดานลาง ป็น ารดง ร ง ทใี ชงานบ ย ๆ ตาราง รปภาพ และ Rollover Image) หนาตาง ารทางาน (Document Window) ป็นบร ณทใี ชใน าร แบบและสราง บ พจตามต ง าร ซงสามารถแทร าม รปภาพ และ ัตถตุ าง ๆ ลงไปได ลย 3. แถบสถานะ (Status bar) ป็นส นทีแสดง มล พม ตม ีย ับงานที าลังทา ย ชน าร ปรับ นาศ ารแสดงผลและ ลาทใี ชใน ารโหลด บ พจนัน ๆ 4. Properties Inspector ใชใน าร าหนด า ุณสมบัต งหนา บ พจและในส น ง ัตถุ ตาง ๆ ซงจะมรี ายละ ยี ดแสดง นมา ม มี าร ล ล ัตถนุ ัน ๆ 28

5. พา นล (Panel) ป็นหนาตางหร ชุด าสังพ ศษทีใชงาน ฉพาะดาน ชน ฐาน มล ไฟล งานตาง ๆ สราง าร ช มโยง ร มถง ร ง าร พั โหลดไฟลงาน น ซรฟ ร โปรแกรม Php My Admin phpMyAdmin โปรแ รมทีถ พัฒนาโดยใชภาษา PHP พ ใชใน ารบรหารจัด าร ฐาน มล MySQL แทน าร ีย าสัง น งจา ถา ราจะใชฐาน มลที ป็น MySQL บาง รังจะมี ามลาบา และยุงยา ใน ารใชงาน ดังนันจงมี ร งม ใน ารจัด ารฐาน มล MySQL นมา พ ใหสามารถจัด าร ตั DBMS ที ป็น MySQL ไดงายและสะด ยง น โดย php My Admin ถ ป็น ร งม ชนดหนงใน ารจดั ารนัน ง php My Admin ป็นส นต ประสานทีสรางโดยภาษาพี ชพี ซงใชจัด าร ฐาน มล MySQL ผาน บ บรา ซ ร โดยสามารถทีจะทา ารสรางฐาน มลใหม หร ทา าร สร าง TABLE ใหมๆ และ ยัง มี function ทีใชสาหรั บ ารทดส บ าร query มลด ย ภาษา SQL พร ม ันนัน ยังสามารถทา าร insert delete update หร แม ระทังใช าสังตาง ๆ หม น บั ัน ารใชภาษา SQL ใน ารสรางตาราง มล php My Admin ป็นโปรแ รมประ ภท MySQL Client ตั หนงทีใชใน ารจัด าร มล MySQL ผานweb browser ไดโดยตรง phpMyAdmin ตั นีจะทางานบน Web server ป็น PHP Application ทใี ช บ มุ จดั าร MySQL Server ความสามารถของ php My Admin 1. สรางและลบ Database 2. สรางและจดั าร Table ชน แทร record, ลบ record, แ ไ record, ลบ Table, แ ไ field 3. โหลด ท ซไฟล าไป บ ปน็ มลในตารางได 4. หาผลสรุป (Query) ด ย าสงั SQL การสร้างฐานข้อมูล MySQL ด้วย php My Admin โปรแ รมบรหารจัด ารฐาน มล mysql ทีช ย าน ย ามสะด ใน าร จัด ารฐาน มล โดยไมต งจัด ารฐาน มลผานทางหนาจ Commandline ซงต ง าศัย ารพมพ าสัง พ จัด าร ับฐาน มล 1. ธี ารสรางฐาน มล ปิด php my admin นมา โดยพมพ า http://localhost/phpmyadmin จา นนั จะ ปรา ฎได ะล บ๊ ให ราใสช ผใช และ รหสั ผาน งMySQL ดงั รป 29

รูปที่ 2.14 ธี าร าระบบฐาน มล 2. ารสรางฐาน มล ให ล ชุดตั ั ษรใหร งรบั บั ภาษาไทย โดย ล tis620_thai_ci หร utf8_unicode_ci และตงั ช ฐาน มล แล ดปุมสราง จะไดฐาน มลที ราสราง ีนมา 1 ตั รปู ท่ี 2.15 ล ชุดตั ั ษรใหร งรบั บั ภาษาไทยและ ารตงั ช ฐาน มล 3. ารสราง ท บลและฟลิ ดในฐาน มลที ราสราง น - ล ล ฐาน มล, พมพช ท บล, าหนดจาน นฟลิ ดใน ท บล ง รา, ดปุม ลงม 30

รปู ท่ี 2.16 ารสราง ท บลและฟิลดในฐาน มล 4. าร าหนดช และ าตางๆให ับฟิลดใน ท บล ง รา - ตงั ช ฟิลดตามจาน น มลที ราจะจัด บ - าหนดชนด มลให ับฟิลด ง รา ชน mb_id รหัส งสมาช ซง ป็นตั ล ให าหนด ปน็ INT ส น mb_fname ป็นช จรง งสมาช ป็น ั ระ ให าหนด ปน็ VARCHA - าหนด ามยา งตั ั ษร - บัง ับใหฟิลดใดๆจา ปน็ ต งมี มลจัด บ ย(not null)หร ไมจา ปน็ ต งมี มล ได (null) ให ราสามารถ าหนดฟิลด ง ราได - าหนดให mb_id ป็น auto_increment าร พมลาดบั ร รดให ัตโนมตั โดยที ราไมต ง าหนดตั ล ให ง บั ส นมา แล ราจะ าหนด ณุ สมบตั นใี ห ับฟิลดที ปน็ PRIMARY KEY ับ - าหนด ใหฟิลด mb_id ป็น PRIMARY KEY ( ียหลั ) ป็น าทีไมซา สามารถ ป็น ลั ษณ ฉพาะให ับ มลใตแตละ ร รดได ซีงมนั มีประโยชนต ารทาน รม ลไล ซชัน จา นนั ให ดทปี ุม บนั ท ป็น ัน สรจ นั ต น ารสรางฐาน มล รปู ที่ 2.17 าร าหนดช และ าตาง ๆ ให บั ฟิลดใน ท บล โปรแกรม Visual Studio Code Visual Studio Code หร VSCode ป็นโปรแ รม Code Editor ทีใชใน ารแ ไ และปรับแตง โ ด จา ายไมโ รซ ฟท มี ารพฒั นา มาในรปแบบ ง OpenSource จงสามารถนามาใชงาน ไดแบบฟรี ๆ ทีต ง าร าม ป็นม าชีพ ซง Visual Studio Code นัน หมาะสาหรับนั พัฒนา โปรแ รมทีต ง ารใชงาน ามแพลตฟ รม ร งรบั ารใชงานทังบน Windows, macOS และ Linux สนับสนุนทังภาษา JavaScript, TypeScript และ Node.js สามารถ ช มต ับ Git ได นามาใชงาน ไดงายไมซับซ น มี ร งม ส น ยายตาง ๆ ให ล ใช ยางมา มา ไม าจะ ปน็ 1. าร ปิดใชงาน ภาษา น ๆ ทัง ภาษา C++, C#, Java, Python, PHP หร Go 2.Themes 3.Debugger 4.Commands ปน็ ตน 31

ความสามารถของ Visual Studio Code 1. สนับสนนุ ารทางานแบบ WYSIWYG (What You See Is What You Get) หมาย าม า ะไร ตามที ราทาบนหนาจ Visual Studio Code จะปรา ฏผลแบบ ดีย ันบน บ พจ ซงช ยให ารสรางและแ ไ บ พจนนั ทาไดงายมา น 2. มี ร งม ใน ารสรางรปแบบหนาจ บ พจ ซงช ย าน ย ามสะด ใหผใชงาน ได มา 3. สนับสนุนภาษาส รปตตาง ๆ ชน Java, ASP, PHP, CGI, VBScript 4. มี ร งม ทีช ยใน าร Upload หนา บทีสรางไปที Server พ ทา าร ผยแพรงานที สรางบน Internet 5. ร งรับ ารใชมันตมี ดียตางๆ ชน สียง ราฟฟิ และภาพ ล นไห ทีสรางโดย โปรแ รม Flash, Shockwave, Firework ป็นตน 6. มี ามสามารถทา ารตดต ับฐาน มล พ ช มต ับ บไซต สว่ นประกอบ Visual Studio Code 1. Title Bar แถบแสดงสถานะ า าลังทางาน ับไฟลใด 2. Menu Bar แถบแสดง าัสงตาง ๆ ทีสามารถ รีย ใชงานไดในโปรแ รม Visual Basic 3. Tool Bar ป็นแถบ ร งม ทีประ บไปด ย Icon ตาง ๆ 4. Tool Box ปน็ หนาตางทีใชใน าร บ ActiveX Controls 5. Form Designer ป็น Background งจ ภาพ ทุ รังทีมี าร ปิด Project ใหม นมาใชงานจะได Form ปลาช Form1 และ Project ใหม ช Project1 6. Project Explore Windows ป็นหนาตางทใี ชสาหรบั แสดงส นประ บและแฟูม มล ตาง ๆ ใน Project พ ามสะด ใน าร บ ุมและ ปลียน ารทางาน ระห าง ส นประ บตาง ๆ โดย Project าจประ บด ยแฟูม มลตาง ๆ มา า 1 แฟูม มล ได 7. Properties Windows ป็นหนาตางที าหนด ุณสมบตั (Properties) ให ับ Form และ Object ตาง ๆ ที ยบน Form โดยจะแสดง ุณสมบัตทงั หมด ง Object ทีถ ล 8. Form Layout Windows ป็นหนาตางทีใชสาหรับดตาแหนง ง Form บนจ ภาพ พ าหนดตาแหนง ง Form ณะทางานหร Run ทาใหจัดตาแหนง ง Form ได สะด น 32

9. Code Editor ปน็ หนาตางทใี ชสาหรับ ียนโปรแ รม ให ับ หตุ ารณหลั ง Object นัน โปรแกรม SQL Server หรือ Microsoft SQL Server ระบบจดั ารฐาน มล ชงสัมพันธ (relational database management System หร RDBMผลตโดยบรษัท Microsoft ป็นระบบฐาน มลแบบ Client Server และรัน ยบน Window NT ซงใชภาษา T-SQL ใน ารดง รีย มลด ย หตุที มลส นใหญทั โล บไ ใน ร งทีใช Microsoft Windows ป็น operating System จงทา ให ป็น ารงายต Microsoft SQLที จะนา มลที ยในรป Windows Based มา บและประม ลผล และประ บ ับ ารทีรา า ถ และ หา งาย จง ปน็ ปัจจัยหลั ทีทา ให Microsoft SQL จง ปน็ ระบบฐาน มลทมี ั จะถ ล ใช ทฤษฎี PHP ดในปี 1994 โดย Rasmus Lerdorf โปรแ รม ม ร มร ันได ด นสราง ร งม ทีใชใน ารพัฒนา บส นตั โดยใช ดี งภาษา C และ Perl รีย า Personal Home Page และได สรางส นตดต บั ฐาน มลทีช า Forum Interpreter (F) ร มทังส งส น รยี า PHPF ซง ป็น จดุ รมตน ง PHP มีผที ามา ยยี มชม บไซตและช บจงตดต าโ ดไปใช และนา พัฒนา ต ในลั ษณะ ง Open Source ภายหลังมี ามนยม น ป็น ยางมา ภายใน 3 ปี มี บไซต ทีใช PHP/ในตดต ฐาน มลและแสดงผลแบบ ไดนาม และ นๆ มา า 50,000 ไซต PHP2 (ในต น นนั ใชช า PHP/FI) ในช งระห าง 1995-1997 RasmusLerdorf ไดมีผทีมาช ยพัฒนา ี 2 น ZeevSuraski และ Andi Guitmans ชา สรา ล ซงปรับปรุงโ ด ง Lerdorf ใหมโดยใช C++ ให มี ามสามารถจัด าร ีย ับแบบฟ รม มลทีถ สรางมาจา ภาษา HTML และ สนับสนุน าร ตดต บั โปรแ รมจัด ารฐาน มล MySQL จงทาให PHP รมถ ใชมา น ยางร ด ร และ รมมี ผสนับสนุน ารใชงาน PHP มา น โดยในปลายปี 1996 PHP ถ นา ประมาณ 15,000 บทั โล และ พมจาน น น ร ย ๆ ต มามีผมาช ยพัฒนา ี 3 น StigBakken รับผดช บ ามสามารถใน ารตดต Oracle, Shane Caraveo รับผดช บดแล PHP บน Window9x/NT, และ Jim Winsteadรับผดช บ ารตร จ ามบ พร งตางๆ และได ปลียนช ป็น Professional Home Page ใน รชนั ที 2PHP3 มาในช งระห าง ด นมถุนายน 1997 ถง 1999 มี ุณสมบัต ดน สนับสนุนระบบปฏบัต ารทัง Window 95/98/MENT, Linux และ บ ซรฟ ร ยาง IS, PWS, Apache , OmniHTTPd สนับสนุนระบบฐาน มลไดหลายรปแบบ ชน SQL Server MySQL, mSQL, Oracle,Informix, ODBCPHP4 ตังแต 1999 - 2007 ซงได พม Functions ารทา งานในดานตางๆ ใหมา และงาย น Object Oriented Model 1. าร าหนดสโ ป public/private/protected 33

2. Exception handling 3. XML และ Web Service 4. MySQL NO: SQLite 5. Zend Engine 2.0 ลักษณะเดน่ ของ PHP 1. สามารถใชไดฟรี 2. PHP ปน็ โปรแ รม ง าง Sever ดงั นัน ีด ามสามารถไมจา ดั 3. Conlatfun นนั PHP งบน ร ง UNIX, Linux Windows ไดหมด 4. รียนรงาย น งจา PHP ฝ่งั าไปใน HTML และใชโ รงสรางและไ ยา รณภาษางายๆ 5. ใชร ม ับ XML ไดทนั ที 6. ใช ับระบบแฟูม มลได 7. ใช ับ มลตั ั ษรได ยางมปี ระสทธภาพ 8. ใช ับโ รงสราง มลใชไดแบบ Scalar Array Associative array 9. ใช บั ารประม ลผลภาพได โปรแกรมฐานข้อมูลที่นิยมใช้ โปรแ รมฐาน มล ป็นโปรแ รมหร ซ ฟแ รทีช ยจัด าร มลหร ราย ารตาง ๆ ที ย ในฐาน มล ไม าจะ ป็น ารจดั บ าร รีย ใช ารปรับปรุง มล โปรแ รมฐาน มล จะ ช ยให ผใชสามารถ นหา มลได ยางร ด ร ซงโปรแ รมฐาน มมลทีนยมใชมี ยด ย ัน หลายตั ชน Access, PHP, SQL ป็นตน โดยแตละโปรแ รมจะมี ามสามารถตาง ัน บาง โปรแ รมใชงายแตจะ จา ัด บ ต ารใชงาน บง โปรแ รมใชงานยา า แตจะมี ามสามารถ ใน ารทางานมา า โปรแ รม Access นับ ป็นโปรแ รมทีนยมใช ันมา ใน ณะนี โดย ฉพาะใน ระบบฐาน มล นาด ใหญสามารถสรางแบบฟ รมทีต ง ารจะ รีย ด มลในฐาน มล หลังจา บันท มลใน ฐาน มล รยี บร ยแล จะสามารถ นหาหร รยี ด มลจา ต มล ใด ได น จา นี Access ยังมีระบบรั ษา ามปล ดภัย ง มล โดย าร าหนดรหัสผาน พ ปู ง ัน ามปล ดภัย ง มลในระบบไดด ย โปรแ รม PHP ภาษาสาหรับทางานดานฝ่ัง ง ซรฟ ร (server-side scripting) ถ แบบมาสาหรบั ารพัฒนา บไซต แตมัน ยังสามารถใช ียนโปรแ รม พ ัตถุประสง ทั ไปได PHP ถ สรางโดย Rasmus Leadoff ในปี 1994 โดยที PHP ในปัจจุบันไดถ พัฒนาโดยทีมพัฒนา งภาษา PHP ซง า า PHP นนั ย มาจา Personal Home Page ซงในปจั จบุ ันนันหมายถง PHP: Hypertext Preprocessor โ ด งภาษา PHP นันสามารถฝัง ับโ ด ง HTML ได ซงมันสามารถ นาไปร มใชร ม บั ระบบ บ ทมแพลตทหี ลา หลาย ระบบจดั าร น หา (CMS) หร บ ฟรม ร 34

ารทางาน งภาษา PHP นัน ป็นแบบ Interpreter ทีถ พัฒนา ป็นแบบโมดลใน บ ซรฟ ร หร Common Gateway Interface (CGI) โปรแ รม SQL ป็นโปรแ รมฐาน มลทีมีโ รงสราง งภาษาที าใจงาย ไมซับซ น มี ประสทธภาพ ารทางานสง สามารถทางานทีซบั ซ นไดโดยใช าสงั พียงไม ี าสัง โปรแ รม SQL จง หมาะทีจะใช ับระบบฐาน มล ชงสัมพันธ และ ป็นภาษาหนงทีมีผนยมใช ันมา โดย ทั ไป โปรแ รมฐาน มล งบรษัทตาง ๆ ทีมีใช ยในปัจจุบัน ชน Oracke, DB2 มั จะมี าสัง SQL ที ตางจา มาตรฐานไปบาง พ นให ป็นจุด ดน งแตละโปรแ รมไป ามสา ัญ ง ารประม ลผลแบบระบบฐาน มลจา ารจัด บ มลร ม ป็น ฐาน มล จะ ให ดประโยชนดังนี 1.สามารถลด ามซาซ น ง มลได าร บ มลชนด ดีย ันไ หลาย ๆ ทีทาให ด ามซาซ น (Redundancy) ดังนัน ารนา มล มาร ม บไ ในฐาน มล จะลดปัญหา าร ด ามซาซ น ง มลได โดยระบบจัด าร จะช ย บ ุม ามซาซ นได น งจา ระบบ จัด าร ฐาน มลจะทราบไดตล ด ลา ามี มลซาซ น ัน ยทีใดบาง 2. หลี ลยี ง าม ัดแยง ง มลไดหา มี าร บ มลชนด ดีย ันไ หลายๆ ทีและมี าร ปรับปรุง มล ดีย ันนี แตปรับปรุงไม รบทุ ทีทีมี มล บ ย จะทาให ดปัญหา มล ชนด ดีย ัน าจมี าไม หม น ันในแตละทีที บ มล ย จง ให ด าม ัดแยง ง มล น 3. สามารถใช มลร ม ันไดฐาน มลจะ ป็น ารจดั บ มลร มไ ด ย ัน ดังนันหา ผใช ต ง ารใช มลในฐาน มลทีมาจา แฟูม มลตาง ๆ จะทาไดโดยงาย 4. สามารถรั ษา ามถ ต ง ช ถ ได ง มลบาง รงั พบ า ารจัด บ มลใน ฐาน มล าจมี ผดพลาด ด น ชน จา ารทีผปู น มลปู น มลผดพลาด ปู นจา ตั ล หนงไป ป็น ี ตั ล หนงโดย ฉพาะ รณมี ผี ใชหลาย นต งใช มลจา ฐาน มลร ม ัน หา ผใช นใด น หนงแ ไ มลผดพลาด ทาใหผ นไดรับผล ระทบตามไปด ย ในระบบ จดั าร ฐาน มล (DBMS) จะสามารถใส ฎ ณฑ พ บ มุ ามผดพลาดที ด น 5. สามารถ าหนด าม ป็นมาตรฐาน ดีย ัน ง มลได าร บ มลร ม ันไ ใน ฐาน มลจะทาใหสามารถ าหนดมาตรฐาน ง มลไดร มทังมาตรฐานตาง ๆ ใน ารจัด บ มล ให ปน็ ไปในลั ษณะ ดยี ันได ชน าร าหนดรปแบบ าร ียน ันทีในลั ษณะ ัน/ ด น/ปี ทังนีจะ มีผที ยบรหารฐาน มลที รา รยี า ผบรหารฐาน มล ปน็ ผ าหนดมาตรฐานตาง ๆ 6. สามารถ าหนดระบบ ามปล ดภัย ง มลไดระบบ ามปล ดภัยในทีนี ป็น าร ปู ง ันไมใหผใชทไี มมีสทธมาใช หร มา หน มลบาง ยางในระบบผบรหารฐาน มลจะ สามารถ าหนดระดับ าร รีย ใช มล งผใชแตละ นไดตาม าม หมาะสม 7. ด าม ป็น สระ ง มลในระบบฐาน มลจะมีตั จัด ารฐาน มลทีทาหนาที ป็น ตั ช มโยง บั ฐาน มล โปรแ รมตาง ๆ าจไมจา ป็นต งมโี รงสราง มลทุ รัง ดังนัน าร แ ไ 35

มลบาง รงั จง าจ ระทา ฉพาะ ับโปรแ รมที รีย ใช มลที ปลยี นแปลง ทานัน ส น โปรแ รม ทีไมได รยี ใช มลดัง ลา จะ ป็น สระจา าร ปลียนแปลง 2.5 ระบบงานท่เี กย่ี วข้อง นายณัฐ านต ท งบางพง และ นาย ฤษฎา ีย ล (2563) ณะผจัดทาได ดทาโ รง าร นนี ัน พ สราง บไซต ร ง พระ ร งและ ง า งสะสม ตั ถุประสง งโ รง ารนี พ ใหผ น สนใจ ีย ับพระ ร งและ ง า งสะสม พมมา น ป็น าร ผยแพร ยางทั ถงใหบุ ลทีจะ สนใจได ามาศ ษาต ผานทาง บไซต ง รา มล ีย ับ พระ ร งและ ง า งสะสม บไซต ง ราจะนา สน หลาย ยาง ีย ับพระ ร งและ ง า งสะสม และ ี มา มาย ยี บั บไซต ง รา นายนันท านต โ นถ น และ นางสา ศุภั ชญา ท งสา (2564) ณะผจัดทาได ดทา โ รงงานระบบ ายสน า นไลนประ ภทสน านาปั่นผลไมสมทตี พ ให ผ นสนใจ ีย ับ ารทา ระบบสน า นไลน พมมา น ป็น าร ผยแพร ยางทั ถงใหบุ ลทีสนใจได ามาซ สน าผาน ทาง บไซต ง รา ช ย าน ย าม สะด ใหแ ล าใน ารซ สน า และใช ป็น รณีศ ษาใน ารพฒั นา บไซตต ไป นายภา ภม ท ง นทร และ นายจันท านต จันทร ลน (2564) โ รงงานระบบ าร าย สน า นไลน ประ ภทสน า ร งรา ามห าน พ ฝึ ทั ษะใน าร แบบและพัฒนา บไซตประ ภท E-Commerce พ ใหผทสี นใจสน า สามารถ ล ซ สน าผานระบบ นไลนได และ พ าร พัฒนา แบบ บไซต พ ไปต ย ดใน ารทางาน ระบบสามรถ พมลบหร แ ไ ราย ารสน าได สามารถ าน ณรา าสน าได และ สามารถแจงชาระ งนไดหร มลส ตาง ๆ ผทา บไซตมีหลา หลายระดับ ตังแตสราง บไซตส นตั จนถงระดับ บไซตสาหรับนั ธุร จหร ง รตาง ๆ าร รยี ด บไซตโดยทั ไปนยม รยี ดผานซ ฟตแ รในลั ษณะ ง บ บรา ซ ร 36

บทที่ 3 การออกแบบระบบงานด้วยคอมพิวเตอร์ 3.1 การออกแบบระบบงาน (Flowchart) เร่ิมตน้ เขา้ สูเ่ วบ็ ไซต์ ไม่ใช่ สมัครสมาชิก สมาชิก ตะกรา้ สินคา้ สินค้า เขา้ สู่ระบบ ใบสง่ั ซอ้ื ตรวจสอบรหสั ผ่าน 37 ใช่ เลือกซอ้ื สนิ ค้า ยืนยนั การสง่ั ซ้อื บันทกึ ใบส่ังซอ้ื แจ้งการโอนเงนิ ใบสง่ั ซ้ือ จบการทางาน รูปที่ 3.1 การออกแบบระบบงาน (Flowchart)

1. Flowchart การสมคั รสมาชกิ ไม่ใช่ เริ่มต้น กรอกขอ้ มูลสมาชิก ตรวจสอบขอ้ มลู สมาชกิ ยนื ยนั สมัคร สมาชกิ สมาชกิ ใช่ บนั ทกึ ข้อมูลสมาชกิ แสดงขอ้ มลู สมาชกิ จบการทางาน รปู ท่ี 3.2 Flowchart การสมคั รสมาชิก 38

2. Flowchart การเข้าสรู่ ะบบ สมาชิก เร่มิ ต้น เขา้ สรู่ ะบบ กรอกชอ่ื ผู้ใช/้ รหัสผ่าน ตรวจสอบช่อื ผูใ้ ช้/รหสั ผา่ น รหสั ผ่าน ไม่ใช่ ถูกตอ้ งหรอื ไม่ ใใชช่ ่ แสดงข้อมูลสมาชกิ จบการทางาน รูปที่ 3.3 Flowchart การเข้าส่รู ะบบ 39