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

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



บทคัดยอ่ หัวข้อโครงการ ระบบขายสนิ ค้าออนไลน์ ประเภทสนิ คา้ ร้านขายรองเท้าเดก็ E-Commerce for baby shoes shop ผจู้ ัดทำโครงการ นางสาวศวิ ลี ศรบี ัวแกว้ รหสั นักศึกษา 43525 นางสาวณฐั ชยา ประสงคส์ ุข รหสั นกั ศกึ ษา 43550 อาจารย์ทปี่ รึกษาหลัก อาจารยฐ์ ติ ิรตั น์ นัยพัฒน์ อาจารย์ทป่ี รึกษารว่ ม อาจารยส์ ุมลฑา สุขสวสั ดิ์ สาขาวชิ า เทคโนโลยีธุรกิจดิจิทลั สถาบัน วทิ ยาลยั เทคโนโลยอี รรถวทิ ย์พณิชยการ ปีการศึกษา 2565 บทคัดยอ่ ในการจัดทําโครงการเล่มนี้จัดทําขึ้นเกี่ยวกับเว็บไซต์ระบบการขายสินค้าออนไลน์ ประเภท สนิ คา้ ร้านขายรองเท้าเด็ก วตั ถปุ ระสงค์ของโครงการจดั ทําข้ึนเพ่ือตอบสนองความต้องการของลูกค้า ทั้งรปู แบบและคุณภาพ เพือ่ ใหล้ ูกคา้ พงึ พอใจในสนิ ค้ามสี ินคา้ คณุ ภาพดี รปู แบบทนั สมยั โครงการระบบการขายสินค้าออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก ในลักษณะของ การขายสินค้า เพื่อตอบสนองความต้องการของลูกค้าที่จะเข้ามาชมเว็บไซต์ ผลการดําเนินงานระบบ ขายสินค้าออนไลน์นี้มีระบบสมัครสมาชิกและมีการ Login เข้าระบบเพื่อทําการสั่งซื้อสินค้ามีระบบ ซื้อสินค้าที่ใช้งานได้อย่างง่ายดาย มีการบอกวิธีการสั่งซื้อสินค้าและวิธีการชําระเงินเมื่อสั่งซื้อสินค้า อย่างครบถ้วน ประโยชนไ์ ดร้ ับจากการทาํ เว็บขายสนิ คา้ ออนไลนข์ ึน้ เพ่ือใหท้ า่ นผู้ชมได้รับความสะดวกสบาย และยังประหยัดเวลาในการไปเลือกซื้อที่ห้างสรรพสินค้า สินค้ามีให้เลือกหลายประเภท สามารถใช้ งานระบบได้อย่างง่ายดาย ผู้ใช้ยังสามารถได้รับความรู้ความเข้าใจในการใช้สินค้าของเราได้ง่ายและ เขา้ ใจย่งิ ขนึ้ อีกด้วย ข

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

คำนำ การจัดทำโครงงานนี้เป็นส่วนหนึ่งของวิชาโครงงาน 1 (30204-8502) และ โครงงาน 2 (30204-8503) หลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล โดยคณะ ผู้จดั ทำไดจ้ ัดทำโครงงานเรอ่ื ง ระบบขายสนิ ค้าออนไลน์ ประเภทสินค้า รา้ นขายรองเท้าเดก็ โดยมีการ สร้างเวบ็ ไซต์เพือ่ นำเสนอผลงานแกผ่ ้ทู ี่สนใจในการเลือกซ้ือสินค้าออนไลน์ โครงงานที่ทางคณะผู้จัดทำได้จัดทำนั้น ประกอบไปด้วยวัตถุประสงค์ของโครงการ แผนการ ดําเนินการในการจดั ทาํ เว็บไซต์ เคร่อื งมือและอปุ กรณ์ที่ใชต้ ่าง ๆ และรายละเอียดคา่ ใช้จ่าย ต่าง ๆ ใน การจดั ทาํ โครงการน้ีเกี่ยวกับรา้ นขายรองเทา้ เด็ก เว็บไซต์ระบบขายสินคา้ ออนไลน์ ประเภทสนิ คา้ ร้าน ขายรองเท้าเด็ก เหมาะสําหรับผู้ที่มีความสนใจเกี่ยวกับร้านขายรองเท้าเด็ก ผู้ที่สนใจสามารถเข้ามา เลือกซื้อได้ตามใจชอบ ทั้งนี้คณะผู้จัดทํา จึงจัดทําเวบ็ ไซตน์ ้ีเพื่อให้ความสะดวกสบายแกผ่ ู้ท่ีสนใจรา้ น ขายรองเท้าเดก็ และมีราคาถกู สามารถเลือกซือ้ สินค้าไดส้ ะดวกสบาย หากโครงการนี้มีข้อผิดพลาดประการใด ทางคณะผู้จัดทำ ขออภัยไว้ ณ ที่นี้ และจะ ดำเนินการพัฒนาผลงานทางดา้ นคอมพิวเตอรใ์ ห้พฒั นาใหด้ ขี ้ึนไป คณะผ้จู ดั ทำ 9 กุมภาพนั ธ์ 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 ปัญหาระบบงานในปัจจบุ ัน 7 2.3 การวิเคราะหแ์ ละความต้องการของระบบใหม่ 31 2.4 ทฤษฎีทเ่ี ก่ยี วข้อง 2.5 ระบบงานท่ีเกย่ี วขอ้ ง 32 บทที่ 3 การออกแบบระบบงานด้วยคอมพิวเตอร์ 36 3.1 การออกแบบระบบงานในปจั จุบัน (Flow Chart) 37 3.2 การออกแบบแผนภาพบริบท (Context Diagram) 42 3.3 แผนภาพกระแสการไหลข้อมลู (Data Flow Diagram) 43 3.4 การออกแบบแผนภาพความสมั พนั ธ์ของข้อมลู 45 3.5 พจนานกุ รมข้อมลู (Data Dictionary) 3.6 การออกแบบผังโครงสรา้ งเวบ็ ไซต์ (Site Map) จ

สารบญั (ตอ่ ) หน้า 46 3.7 การออกแบบแผนภาพแนวความคิด (Story Board Design) 50 3.8 การออกแบบส่งิ นาเข้า (Input Design) 50 3.9 การออกแบบสงิ่ นาออก (Output Design) บทท่ี 4 การพฒั นาระบบการขายสินค้าออนไลน์ ประเภทสนิ ค้า ร้านขายรองเท้าเด็ก 51 4.1 เครอ่ื งมอื และอุปกรณท์ ่ใี ช้ 51 4.2 โปรแกรมท่ใี ช้ในการพฒั นา 52 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) 79 - ใบบันทกึ การเขา้ พบท่ีปรกึ ษาโครงการ (ATC.05) 88 - ใบขออนุญาตอาจารย์ทป่ี รึกษาร่วมจดั ทา เอกสารบทท่ี 4-5 (ATC.06) 89 - ใบรับรองการนาไปใช้ประโยชน์ได้จรงิ (ATC.07) 93 ประวัติผู้จดั ทาโครงการ ฉ

สารบญั รูป หน้า 6 รปู ท่ี 2.1 Flow chart ระบบงานปัจจบุ ัน 13 รูปท่ี 2.2 ภาพแสดงวงจรของสที ่เี กดิ จากการนาแม่มาผสมกัน 13 รปู ที่ 2.3 สีพ้ืนฐานแม่สี 14 รปู ท่ี 2.4 สีเหลอื งแกมเขียว 14 รูปที่ 2.5 สีนา้ เงินแกมม่วง 14 รปู ท่ี 2.6 สแี ดงแกมมว่ ง 14 รปู ท่ี 2.7 สีแดงแกมสม้ 15 รปู ท่ี 2.8 สีเหลืองแกมส้ม 15 รปู ท่ี 2.9 สนี ้าเงนิ แกมเขียว 23 รูปท่ี 2.10 ผงั การทางานของ Flow chart 25 รูปท่ี 2.11 สญั ลกั ษณร์ ะบบกระแสข้อมูล 26 รูปที่ 2.12 หนา้ ตา่ งโปรแกรม Adobe Photoshop CS6 28 รูปที่ 2.13 แสดง phpMyAdmin 28 รูปท่ี 2.14 แสดงโคด้ สาหรบั สรา้ ง MySQL 29 รปู ท่ี 2.15 หนา้ ตา่ งโปรแกรม Visual Studio Code 29 รปู ท่ี 2.16 หน้าตา่ งการเปิดอ่าน แก้ไข และ เขยี นโค้ด 30 รปู ท่ี 2.17 หน้าการดไี ซนแ์ ก้ไข และ เขียนโค้ด 31 รูปที่ 2.18 หน้าตา่ งการเปิดใช้งาน XAMPP 32 รปู ที่ 3.1 การออกแบบระบบงาน (Flow chart) 33 รปู ที่ 3.2 Flow chart การสมัครสมาชิก 34 รูปที่ 3.3 Flow chart การเขา้ สู่ระบบ 35 รูปที่ 3.4 Flow chart การสง่ั ซือ้ 36 รูปที่ 3.5 การเขียน Context Diagram ระบบขายสินค้าออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก 37 รูปที่ 3.6 Data Flow Diagram Level 0 ระบบขายสนิ คา้ ออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 38 รปู ที่ 3.7 Data Flow Diagram Level 1 Process 1 ระบบขายสินค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเดก็ ช

สารบญั รปู (ตอ่ ) หน้า 38 รปู ที่ 3.8 Data Flow Diagram Level 1 Process 2 ระบบขายสินค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 39 รูปท่ี 3.9 Data Flow Diagram Level 1 Process 3 ระบบขายสนิ ค้าออนไลน์ ประเภทสนิ ค้า ร้านขายรองเท้าเดก็ 39 รปู ที่ 3.10 Data Flow Diagram Level 1 Process 4 ระบบขายสนิ คา้ ออนไลน์ ประเภทสินค้า รา้ นขายรองเท้าเดก็ 40 รูปที่ 3.11 Data Flow Diagram Level 1 Process 5 ระบบขายสนิ คา้ ออนไลน์ ประเภทสินค้า รา้ นขายรองเท้าเดก็ 40 รูปท่ี 3.12 Data Flow Diagram Level 1 Process 6 ระบบขายสินคา้ ออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเดก็ 41 รปู ที่ 3.13 Data Flow Diagram Level 1 Process 7 ระบบขายสนิ ค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 41 รูปที่ 3.14 Data Flow Diagram Level 1 Process 8 ระบบขายสินค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 42 รปู ที่ 3.15 Data Flow Diagram Level 1 Process 9 ระบบขายสนิ ค้าออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก 42 รูปที่ 3.16 E-R Diagram ระบบขายสนิ ค้าออนไลน์ ประเภทสินค้า รา้ นขายรองเท้าเดก็ 45 รูปท่ี 3.17 ผงั โครงสร้างเว็บไซต์ (Site Map) 46 รูปที่ 3.18 แสดงหน้า Index 46 รูปท่ี 3.19 แสดงหน้าแรก 47 รูปท่ี 3.20 แสดงหน้า Login 47 รปู ที่ 3.21 แสดงหนา้ ประเภทสนิ คา้ 48 รูปท่ี 3.22 แสดงหน้าสมคั รสมาชกิ 48 รูปท่ี 3.23 แสดงหน้าวิธกี ารสงั่ ซ้อื 49 รปู ที่ 3.24 แสดงหน้าการชาระเงิน 49 รปู ท่ี 3.25 แสดงหน้าการแจ้งชาระเงนิ 50 รูปที่ 3.26 แสดงหน้าตดิ ตอ่ ซ

สารบญั รปู (ตอ่ ) หน้า 52 รูปที่ 4.1 ไปที่เว็บไซต์ apachefriends.org เพื่อดาวน์โหลด XAMPP 52 รปู ที่ 4.2 ทาการติดตั้ง คลกิ Next 53 รูปท่ี 4.3 ทาการเลือก Components ใชแ้ ค่ Apache / MySQL 53 รูปท่ี 4.4 เลอื ก ทเี่ ก็บ ในการติดตง้ั XAMPP 54 รูปที่ 4.5 คลกิ Next 54 รูปท่ี 4.6 คลิก Next 55 รูปท่ี 4.7 รอทาการติดตัง้ 55 รูปที่ 4.8 ทาการติดตง้ั เรียบร้อย และทาการ Restart Computer 1 คร้งั 56 รูปที่ 4.9 จากน้ันเขา้ Control Panel ของ XAMPP และทาการคลกิ Start Apache และ Mysql 56 รูปที่ 4.10 จากนนั้ ลองเขา้ phpMyAdmin และ localhost ดู 57 รูปท่ี 4.11 การตดิ ต้งั XAMPP Version v3.2.2 เรียบร้อย 57 รปู ท่ี 4.12 เข้าเว็บไซต์ https://support.netdesignhost.com/ 58 รปู ที่ 4.13 กดที่ addon domain 58 รปู ที่ 4.14 ใสช่ อ่ื โดเมน คลิก create an ftp เพื่อสรา้ ง ftp accout หลงั จากทใี่ สข่ อ้ มูลแล้ว กด add domain เพ่อื สร้าง 59 รปู ที่ 4.15 เลอื ก File Manager 59 รปู ที่ 4.16 เลือก Folder ทง้ั หมดทีน่ าเข้ามาใส่ 60 รปู ท่ี 4.17 เข้าสู่ http://projectcomatc.com/2565/babyshoes/ 60 รปู ที่ 4.18 แสดงหน้า home 61 รูปท่ี 4.19 แสดงหน้าเข้าสรู่ ะบบ 61 รูปท่ี 4.20 แสดงหนา้ สมคั รสมาชกิ 62 รูปท่ี 4.21 แสดงหนา้ สินคา้ 62 รปู ที่ 4.22 แสดงหนา้ วธิ ีการสัง่ ซ้อื 63 รปู ที่ 4.23 แสดงหนา้ วิธกี ารชาระเงิน 63 รปู ท่ี 4.24 แสดงหนา้ ตดิ ตอ่ เรา 64 รูปที่ 4.25 แสดงหน้าตะกร้าสนิ คา้ 64 รปู ท่ี 4.26 แสดงหนา้ เขา้ สู่ระบบของผู้ดแู ลระบบ ฌ

สารบัญรูป (ตอ่ ) หน้า รปู ท่ี 4.27 แสดงหน้าข้อมูลสนิ ค้าทง้ั หมด 65 ญ

สารบญั ตาราง หน้า 3 ตารางท่ี 1.1 แผนการดาเนินงาน (Gantt Chart) 5 ตารางท่ี 1.2 งบประมาณการดาเนินงาน 16 ตารางที่ 2.1 ความรู้สกึ ของสี 21 ตารางที่ 2.2 แสดงสัญลักษณ์ในการออกแบบระบบฐานข้อมลู 43 ตารางท่ี 3.1 ตารางขอ้ มลู สินค้า 43 ตารางที่ 3.2 ตารางข้อมูลรายละเอียดการสั่งซือ้ 44 ตารางที่ 3.3 ตารางข้อมลู สมาชกิ 44 ตารางที่ 3.4 ตารางขอ้ มลู ใบเสร็จ 45 ตารางที่ 3.5 ตารางขอ้ มูลใบสั่งซอ้ื 66 ตารางท่ี 5.1 แสดงขนาดของโปรแกรม 68 ตารางที่ 5.2 สรปุ เวลาการดาเนินงานจริง 70 ตารางที่ 5.3 สรุปค่าใช้จ่ายในการดาเนินงานจรงิ ฎ

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

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

รายการ พฤศจกิ ายน 65 ธันวาคม 65 มกราคม 66 กุมภาพันธ์ 66 ระยะเวลา ภาคเรียนท่ี 2 1234 1234 1234 1234 1-7 พ.ย. 65 สง่ ความคืบหน้าโปรแกรม 26 พ.ย. 65 100 % สอบนำเสนอโครงงาน 1-16 ธ.ค. 65 ระดบั ปวส.2 - ปวช.3 ATC.03 ครั้งท่ี 2 ส่ง ATC.06 ส่ง ATC.07 1-30 ม.ค. 66 สง่ เอกสาร บทท่ี 4 20 ธ.ค. - สมบูรณ์ 23 ม.ค. 66 สง่ เอกสาร บทที่ 5 31 มกราคม สมบรู ณ์ บทคัดยอ่ 2566 กิตติกรรมประกาศ คำนำ สารบญั สารบัญรปู 1-7 ก.พ.66 สารบญั ตาราง 8-14 ก.พ.66 ประวตั ผิ ู้จดั ทำ หนา้ อนมุ ัติ 15-19 ก.พ.66 ภาคผนวก ATC.04-05 20-27 ก.พ.66 ส่งเลม่ โครงงาน 28 ก.พ.66 ส่งไฟล์เอกสาร Word PDF โปรแกรม ไฟล์รวม PDF ไม่เกนิ 10 มนี าคม 2566 ตารางท่ี 1.1 แผนการดำเนินงาน (ตอ่ ) 1.6 เคร่อื งมือท่ใี ชพ้ ัฒนาโปรแกรม ใช้ในการตดั ตอ่ รปู ภาพสินค้า 1. โปรแกรม Adobe Photoshop CS6 ใชใ้ นการแก้ไขซอร์สโค้ด 2. โปรแกรม Visual Studio Code v.1.45.1 ใช้ในการจำลอง Server 3. โปรแกรม XAMPP Control Panel v.2.2.3 ใชใ้ นการจัดการฐานขอ้ มลู 4. โปรแกรม PHP My Admin 4

1.7 งบประมาณการดำเนนิ งาน ลำดับ รายการ จำนวน ราคา (บาท) 1 คา่ พิมพเ์ อกสาร 400 แผน่ 2,000 2 คา่ เชา่ พ้ืนที่เก็บขอ้ มูล 100 GB 700 3 ค่าแฟลชไดร์ (USB) 1 อนั (32 GB) 200 4 ค่าลงโปรแกรม 2 โปรแกรม 500 5 เขา้ เลม่ 1 เลม่ 200 รวมเป็นเงิน 3,600 ตารางที่ 1.2 งบประมาณการดำเนนิ งาน 5

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

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

หลักการออกแบบเว็บไซต์ เว็บไซต์เป็นส่ือที่ได้รับความนิยมอย่างมากบนอินเตอร์เน็ต ซ่ึงเว็บไซต์เป็นสื่อที่อยู่ในความ ควบคุมของผู้ใช้โดยสมบูรณ์ กล่าวคือผ้ใู ช้สามารถตัดสินใจเลือกได้ว่าจะดเู ว็บไซต์ใดและจะไม่เลือกดู เว็บไซต์ได้ตามต้องการ จึงทําให้ผู้ใช้ไม่มีความอดทนต่ออุปสรรคและปัญหาท่ีเกิดจากการออกแบบ เวบ็ ไซต์ผดิ พลาด ถ้าผใู้ ช้เห็นว่าเว็บทก่ี ําลังดูอยนู่ ้ันไมม่ ีประโยชน์ต่อตวั เขาหรือไม่เข้าใจว่าเว็บไซต์น้ีจะ ใช้งานอย่างไรเขาก็สามารถท่ีจะเปล่ียนไปดูเว็บไซต์อื่น ๆ ได้อย่างรวดเร็ว เนื่องจากในปัจจุบันมี เว็บไซต์อยู่มากมายและยังมีเว็บไซต์ท่ีเกิดขึ้นใหม่ ๆ ทุกวันผู้ใช้จึงมีทางเลือกมากขึ้นและสามารถ เปรียบเทียบคุณภาพของเว็บไซต์ตา่ ง ๆ ไดเ้ อง เว็บไซดท์ ี่ได้รบั การออกแบบอยา่ งสวยงามมีการใชง้ านทส่ี ะดวกย่อมได้รบั ความสนใจจากผใู้ ช้ มากกว่าเว็บไซต์ที่ดูสับสนวุ่นวายมีข้อมูลมากมายแต่หาอะไรไม่เจอ นอกจากนี้ยังใช้เวลาในการ แสดงผลแต่ละหน้านานเกินไปซ่ึงปัญหาเหล่าน้ีล้วนเป็นผลมาจากการออกแบบเว็บไซต์ไม่ดีท้ังสิ้น ดังน้ันการออกแบบเว็บไซต์จึงเป็นกระบวนการสําคัญในการสร้างเว็บไซด์ให้ประทับใจผู้ใช้ทําให้เขา อยากกลับเข้ามาเว็บไซต์เดิมอีกในอนาคต ซึ่งนอกจากต้องพัฒนาเว็บไซต์ท่ีดีมีประโยชน์แล้วยังต้อง คํานึงถึงการแข่งขันกับเว็บไซต์อื่น ๆ อีกดว้ ย องค์ประกอบของการออกแบบเวบ็ ไซต์ การออกแบบเว็บไซตท์ ี่มีประสทิ ธิภาพน้ันต้องคํานึงถึงองค์ประกอบสาํ คญั ดงั ต่อไปนี้ 1. ความเรียบง่าย (Simplicity) หมายถึง การจํากัดองค์ประกอบเสริมให้เหลือเฉพาะ องค์ประกอบหลัก กลา่ วคอื ในการสือ่ สารเนื้อหากบั ผูใ้ ชน้ ้ันเราต้องเลือกเสนอสงิ่ ที่เราตอ้ งการนําเสนอ จริง ๆ ออกมาในส่วนของกราฟิกสีสันตัวอักษรและภาพเคลื่อนไหวต้องเลือกให้พอเหมาะ ถ้าหากมี มากเกินไปจะรบกวนสายตาและสร้างความรําคาญต่อผู้ใช้ตัวอย่างเว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft หรือ Kokai ท่ีมีการออกแบบ เวบ็ ไซต์ในรูปแบบทเี่ รียบง่ายไมซ่ บั ซ้อนและใชง้ านอย่างสะดวก 2. ความสม่ําเสมอ (Consistency) หมายถึง การสร้างความสมํ่าเสมอให้เกิดขึ้นตลอดท้ัง เว็บไซต์ โดยอาจเลอื กใช้รูปแบบเดยี วกันตลอดทง้ั เว็บไซตก์ ็ได้เพราะถ้าหากว่าแตล่ ะหน้าในเว็บไซต์น้ัน มีความแตกต่างกันมากจนเกนิ ไป อาจทําให้ผู้ใช้เกิดความสับสนและไม่แนใ่ จว่ากําลังอยู่ในเวบ็ ไซต์เดิม หรือไม่เพราะฉะน้ันการออกแบบเว็บไซต์ในแต่ละหน้าควรที่จะมีรูปแบบสไตล์ของกราฟิกระบบเนวิ เกชัน่ (Navigation) และโทนสที ่มี ีความคล้ายคลึงกนั ตลอดทง้ั เว็บไซต์ 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) หน้าเว็บเป็นส่ิงแรกที่ผู้ใช้จะได้เห็นขณะที่เปิดเข้าสู่เว็บไซต์และยังเป็นส่ิงแรกที่แสดงถึง ประสิทธิภาพในการออกแบบเว็บไซต์อีกด้วยหน้าเว็บจึงเป็นสิ่งสําคัญมาก เพราะเป็นส่ือกลางให้ผู้ใช้ สามารถใช้ประโยชน์จากข้อมูลของระบบงานของเว็บไซต์น้ันได้ โดยปกติหน้าเว็บจะประกอบด้วย รูปภาพ ตวั อักษร สีพ้ืน ระบบเนวิเกชัน่ และองค์ประกอบอ่ืน ๆ ท่ีช่วยสื่อความหมายของเนื้อหาและ อํานวยความสะดวกตอ่ การใชง้ าน หลักสําคญั ในการออกแบบหนา้ เวบ็ กค็ อื การใช้รปู ภาพและองค์ประกอบต่าง ๆ รว่ มกันเพือ่ ส่ือ ความหมายเกี่ยวกับเน้ือหาหรือลักษณะสําคัญของเว็บไซต์ โดยมีเป้าหมายสําคัญเพ่ือการส่ือ ความหมายท่ีชดั เจนและน่าสนใจบนพื้นฐานของความเรียบง่ายและความสะดวกของผใู้ ช้ การออกแบบเว็บไซต์ ตอ้ งคํานงึ ถึง 1. ความเรียบงา่ ย ได้แก่ มีรูปแบบที่เรียบงา่ ยไมซ่ ับซอ้ นและใช้งานได้สะดวกไม่มีกราฟิกหรือ ตัวอักษรท่ีเคลือ่ นไหวอยตู่ ลอดเวลาชนิดและสขี องตวั อักษรไม่มากจนเกินไปทาํ ให้วุ่นวาย 2. ความสมํ่าเสมอได้แก่ใช้รูปแบบเดียวกันตลอดท้ังเว็บไซต์ เช่น รูปแบบของหน้าสไตล์ของ กราฟกิ ระบบเนวเิ กชนั และโทนสีควรมคี วามคล้ายคลงึ กันตลอดท้ังเวบ็ ไซต์ 3. ความเปน็ เอกลักษณก์ ารออกแบบเว็บไซต์ควรคาํ นึงถงึ ลกั ษณะขององคก์ รเพราะรูปแบบ ของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรน้ัน ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการจะต้องดนู า่ เชือ่ ถอื ไม่เหมอื นสวนสนกุ ฯลฯ 4. เน้ือหาที่มีประโยชน์เน้ือหาเป็นสิ่งที่สําคัญที่สุดในเว็บไซต์ดังนั้นควรจัดเตรียมเนื้อหาและ ข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์มีการปรับปรุงและเพิ่มเตมิ ให้ทันเหตุการณ์อยเู่ สมอเนื้อหา ไม่ควรซ้ํากบั เวบ็ ไซต์อน่ื จึงจะดึงดดู ความสนใจ 5. ระบบเนวิเกชันที่ใชง้ านง่ายต้องออกแบบใหผ้ ู้ใช้เข้าใจง่ายและใชง้ านสะดวกใช้กราฟิกที่ส่ือ ความหมายรว่ มกับคาํ อธิบายทช่ี ัดเจนมรี ูปแบบและลาํ ดับของรายการทีส่ ม่ําเสมอ เชน่ วางไว้ตําแหน่ง เดยี วกนั ของทุกหนา้ 11

6. ลักษณะทน่ี ่าสนใจหน้าตาของเว็บไซต์จะตอ้ งมีความสัมพันธ์กบั คุณภาพขององค์ประกอบ ตา่ ง ๆ เชน่ คณุ ภาพของกราฟกิ ทจี่ ะต้องสมบรู ณ์การใชส้ กี ารใช้ตัวอกั ษรที่อา่ นง่ายสบายตาการใชโ้ ทน สที ีเ่ ข้ากันลักษณะหนา้ ตาท่ีน่าสนใจน้ันขึ้นอยกู่ บั ความชอบของแตล่ ะบคุ คล 7. การใชง้ านอยา่ งไม่จาํ กัดผ้ใู ช้ส่วนใหญ่สามารถเข้าถงึ ไดม้ ากท่สี ดุ เลือกใช้บราวเซอร์ชนิดใดก็ ได้ในการเข้าถึงเน้ือหาสามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่าง ๆ กัน อยา่ งไม่มีปัญหาเปน็ ลักษณะสาํ คญั สาํ หรบั ผใู้ ช้ท่ีมจี าํ นวนมาก 8. คุณภาพในการออกแบบการออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบสร้างความรู้สึก วา่ เว็บไซต์มีคุณภาพถกู ต้องและเชอื่ ถือได้ 9. ลิงค์ต่าง ๆ จะต้องเช่ือมโยงไปหน้าที่มีอยู่จริงและถูกต้องระบบการทํางานต่าง ๆ ใน เวบ็ ไซต์จะต้องมคี วามแน่นอนและทําหนา้ ท่ไี ดอ้ ยา่ งถกู การออกแบบโครงสรา้ งเวบ็ ไซต์ (Site Structure Design) โครงสร้างเว็บไซต์ (Site Structure) เป็นแผนผังของการลําดับเน้อื หาหรอื การจดั วางตําแหน่ง เว็บเพจท้งั หมด ซึ่งจะทําให้เราร้วู า่ ทั้งเว็บไซตป์ ระกอบไปดว้ ยเนอื้ หาอะไรบา้ งและมเี ว็บเพจหนา้ ไหนท่ี เกี่ยวข้องเช่ือมโยงถึงกัน ดังนั้นการออกแบบโครงสร้างเว็บไซต์จึงเป็นเรอ่ื งสาํ คัญเปรียบเสมอื นกับการ เขียนแบบอาคารก่อนที่จะลงมือสรา้ ง เพราะจะทาํ ใหเ้ รามองเหน็ หน้าตาของเว็บไซตเ์ ป็นรูปธรรมมาก ข้ึนสามารถออกแบบระบบเนวิเกช่นั ไดเ้ หมาะสมและเป็นแนวทางการทํางานทีช่ ัดเจนสําหรบั ข้ันตอน ต่อ ๆ ไป นอกจากนี้โครงสร้างเว็บไซต์ที่ดียังช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่าง รวดเรว็ วธิ ีการจดั โครงสร้างเวบ็ ไซต์สามารถทําได้หลายแบบแตแ่ นวคิดหลกั ๆ ท่นี ิยมใช้กันมอี ยู่ 2 แบบคือ จดั ตามกลมุ่ เน้อื หา (Content-based Structure) จัดตามกลุม่ ผู้ชม (User-based Structure) รูปแบบของโครงสรา้ งเว็บไซต์ เราสามารถวางรูปแบบโครงสรา้ งเวบ็ ไซตไ์ ด้หลายแบบตามความเหมาะสม เช่น แบบเรียงลําดับ (Sequence) เหมาะสําหรับเว็บไซต์ท่มี ีจํานวนเว็บเพจไม่มากนักหรือเวบ็ ไซต์ ที่มีการนําเสนอข้อมลู แบบท่ีละข้นั ตอน แบบระดับช้ัน (Hierarchy) เหมาะสําหรับเว็บไซต์ที่มีจํานวนเว็บเพจมากข้ึนเป็นรูปแบบที่เรา จะพบได้ทัว่ ไป แบบผสม (Combination) เหมาะสําหรบั เว็บไซต์ที่ซับซ้อนเป็นการนําข้อดีของรูปแบบท้ัง 2 ข้างต้นมาผสมกนั การใช้สใี นการออกแบบเวบ็ ไซต์ สีเป็นสิ่งที่มีความสําคัญต่อวิถีชีวิตนับแต่สมัยดึกดําบรรพ์จนถึงปัจจุบันได้นําสีมาใช้ให้เกิด ประโยชน์โดยใช้เป็นสัญลักษณ์ในการถ่ายทอดความหมายอย่างใดอย่างหน่ึงสีจึงเป็นส่ิงที่ควรศึกษา เพ่อื ใชป้ ระโยชน์กบั วถิ ีชีวิตของเรา เพราะสรรพส่งิ ทั้งหลายท่แี วดล้อมตวั เราประกอบไปดว้ ยสีท้ังส้นิ ใน 12

งานศิลปะสี เป็นองคป์ ระกอบสาํ คญั อย่างหน่งึ และในวิถชี ีวติ ของเราสีเป็นองค์ประกอบท่มี ีอทิ ธพิ ลต่อ ความรสู้ ึก อารมณ์ และจติ ใจแมส่ ี ประกอบด้วย สีแดง สีเหลือง และสนี าํ้ เงนิ ซึ่งเมือ่ นําแม่สที ้งั สามมา ผสมกนั ในอตั ราส่วนต่าง ๆ กจ็ ะเกิดสีข้ึนมามากมายซึ่งประโยชนจ์ ากการทีเ่ รานําสมี าผสมกนั ทําใหเ้ กิด สใี หม่เมอื่ นํามาจดั เรยี งอยา่ งเปน็ ระบบรวมเรียกว่าวงจรสี รปู ที่ 2.2 ภาพแสดงวงจรของสที เี่ กดิ จากการนําแม่สมี าผสมกนั การเกิดสีดังภาพเกิดจากการนาํ เอาแมส่ ีมาผสมกันในอตั ราสว่ นต่าง ๆ กันซ่งึ สรุปได้ดังน้ี สขี นั้ ที่ 1 (Primary Color) คือสีพ้ืนฐานมีแมส่ ี 3 สี 1. สีพ้นื ฐานแมส่ ี รูปที่ 2.3 สีพืน้ ฐานแมส่ ี 1. แดง 2. สีเหลอื ง 3. สนี ้ําเงนิ 13

สีขั้นที่ 2 (Binary Color) คือสีที่เกิดจากการนําเอาสีขั้นท่ี 1 หรือแม่สีมาผสมกันในอัตราส่วนเท่ากัน จะทําให้เกดิ สีใหม่ 3 สี ไดแ้ ก่ 1. สีเขยี ว เกิดจากการนาํ เอา สีเหลอื ง กบั สนี ้าํ เงนิ มาผสมกันในอัตราส่วนเท่า ๆ กนั 2. สีสม้ เกิดจากการนาํ เอา สเี หลือง กบั สีแดง มาผสมกนั ในอตั ราส่วนท่เี ท่า ๆ กัน 3. สีมว่ ง เกดิ จากการนาํ เอา สนี า้ํ เงนิ กับ สีแดง มาผสมกนั ในอตั ราสว่ นทีเ่ ท่า ๆ กนั สีข้ันที่ 3 (Intermediate Color) คือ สีท่ีเกิดจากการผสมกันระหว่างสีของแม่สีกีบสีข้ันท่ี 2 จะเกิดสี ข้นึ อีก 6 สี ได้แก่ รูปที่ 2.4 สเี หลืองแกมเขียว สีเหลืองแกมเขียว เกดิ จากการผสมกนั ระหว่างสเี หลอื งกับสีเขยี วอยา่ งละเท่า ๆ กนั รปู ท่ี 2.5 สีน้าํ เงนิ แกมมว่ ง สนี า้ํ เงินแกมมว่ ง เกดิ จากการผสมกนั ระหว่างสนี ้ําเงนิ กบั สมี ่วงอยา่ งละเท่า ๆ กัน รูปท่ี 2.6 สแี ดงแกมม่วง สแี ดงแกมมว่ ง เกดิ จากการผสมกันระหว่างสแี ดงกบั สีม่วงอยา่ งละเท่า ๆ กัน รปู ท่ี 2.7 สีแดงแกมส้ม สีแดงแกมสม้ เกิดจากการผสมกันระหว่างสีแดงกบั สสี ้มอยา่ งละเท่า ๆ กัน 14

รูปท่ี 2.8 สีเหลืองแกมส้ม สเี หลืองแกมส้ม เกิดจากการผสมกันระหวา่ งสเี หลืองกับสีส้มอย่างละเท่า ๆ กนั รปู ที่ 2.9 สีนํา้ เงนิ แกมเขยี ว สีนํ้าเงนิ แกมเขยี ว เกิดจากการผสมกนั ระหว่างสนี า้ํ เงินกบั สเี ขยี วอย่างละเทา่ ๆ กนั คุณลกั ษณะของสมี ี 3 ประการ คือ 1. สีแทห้ รือความเป็นสี (Hue) หมายถึงสีท่อี ยู่ในวงจรสธี รรมชาติทง้ั 12 สี 2. สีท่ีเราเห็นอยู่ทุกวันน้ีแบ่งเป็น 2 วรรณะ โดยแบ่งวงจรสีออกเปน็ 2 ส่วน จากสีเหลอื งวน ไปถงึ สีม่วง 2.1 สีร้อน (Warm Color) ให้ความรู้สึกรุนแรงร้อนตื่นเต้น ประกอบด้วย สีเหลืองสีม่วง สี เหลอื งส้ม สสี ้ม สีแดงสม้ สแี ดง สมี ว่ งส้ม 2.2 สเี ยน็ (Cool Color) ให้ความรู้สึกเย็นสงบ สบายตา ประกอบด้วย สีเหลอื ง สีเขียวเหลอื ง สเี ขยี ว สีนํ้าเงินเขียว สีนํ้าเงิน สีม่วงนํ้าเงิน สีม่วงเราจะเห็นว่า สีเหลอื ง และสีม่วง เป็นสีทีอ่ ยู่ได้ท้ัง 2 วรรณะ คอื เป็นสกี ลาง เปน็ ได้ทั้งสรี ้อน และสีเย็น ความเข้มของสี (Intensity) เกิดจากสแี ท้ คือสีท่ีเกิดจากการผสมกันในวงจรสเี ป็นสีหลักท่ีผสมขึน้ ตามกฎเกณฑแ์ ละไม่ถูก ผสมด้วยสีกลางหรือสีอื่น ๆ จะมีค่าความเข้มสูงสุดหรือแรงจัดท่ีสุดเป็นค่าความแท้ของสีที่ไม่ถูกเจือ ปนเมือ่ สเี หล่าน้ีอยู่ทา่ มกลางสีอื่น ๆ ทีถ่ ูกผสมให้เข้มขึ้นหรืออ่อนลง ให้มืดหมน่ หรือเปลี่ยนค่าไปแล้ว สีแท้จะแสดงความแรงของสีปรากฏออกมาให้เห็นอย่างชัดเจน ซ่ึงจะทําให้เกิดจุดสนใจข้ึนในผลงาน ลักษณะเช่นน้ีเหมือนกับดอกเฟื่องฟ้าสีชมพูสดหรือบานเย็นท่ีอยู่ท่ามกลางใบเฟื่องฟ้าท่ีเขียวจัด ๆ หรอื พลทุ ีถ่ ูกจดุ ส่องสวา่ งในยามเทศกาลตัดกบั สมี ดื ๆ ทบึ ๆ ของท้องฟ้ายามค่ําคนื นาํ้ หนักของสี (Value) เป็นการใชส้ ีโดยให้มีค่านํ้าหนักในระดบั ต่าง ๆ กัน และมีสีหลาย ๆ สี ซ่ึงถา้ เปน็ สีเดียวก็จะมี ลกั ษณะเป็นสีเอกรงค์การใชค้ ่าน้ําหนักของสีจะทําให้เกิดความกลมกลืนเกิดระยะใกล้ไกลตื้นลึกถ้ามี ค่านํ้าหนักหลาย ๆ ระดับสีก็จะกลมกลนื กันมากขึ้นแต่ถ้ามีเพียง 1 - 2 ระดับทีห่ ่างกัน จะทําให้ เกิด ความแตกตา่ ง 15

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

สีกับการออกแบบ ผู้สร้างสรรคง์ านออกแบบจะเป็นผู้ที่เก่ียวข้องกับการใช้สีโดยตรง มัณฑนากรจะคดิ ค้นสีขึ้นมา เพ่ือใช้ในงานตกแต่งคนออกแบบฉากเวทีการแสดงจะคิดค้นสีเก่ียวกับแสง จิตรกรก็จะคิดค้นสีขึ้นมา ระบายให้เหมาะสมกับความคิดและจินตนาการของตน แล้วตัวเราจะคิดค้นสีข้ึนมาเพื่อความงาม ความสุขสําหรับเรามิได้หรือสีที่ใช้สําหรับการออกแบบนั้น ถ้าเราจะใช้ให้เกิดความสวยงามตรงตาม ความต้องการของเรามหี ลักในการใชก้ ว้าง ๆ อยู่ 2 ประการ คอื การใชส้ กี ลมกลืนกนั และการใชส้ ีตดั การใช้สีให้กลมกลืนกันเป็นการใช้สีหรือน้ําหนักของสีให้ใกล้เคียงกันหรือคล้ายคลึงกัน เช่น การใช้สีแบบเอกรงค์เป็นการใชส้ ีสีเดียวท่ีมีนาํ้ หนักอ่อนแก่หลายลําดับการใชส้ ีข้างเคียงเป็นการใช้สีท่ี ใกล้เคียงกัน 2 - 3 สี ในวงสี เช่น สีแดง สีส้มแดง และสีม่วงแดง การใช้สีใกล้เคียงเป็นการใช้สีท่ีอยู่ เรียงกันในวงสีไม่เกิน 5 สี ตลอดจนการใช้สีวรรณะร้อนและวรรณะเย็น (warm tone colors and cool tone colors) ดงั ไดก้ ล่าวมาแลว้ การใช้สีตัดกันสีตัดกันคือสีที่อยู่ตรงข้ามกันในวงจรสีการใช้สีให้ตัดกันมีความจําเป็นมากใน งานออกแบบเพราะชว่ ยให้เกดิ ความน่าสนใจในทันทีที่พบเหน็ สีตดั กนั อยา่ งแท้จริงมีอยดู่ ้วยกัน 6 คูส่ ี - สีเหลอื ง ตรงขา้ มกับ สมี ่วง - สีสม้ ตรงขา้ มกบั สีนาํ้ เงนิ - สีแดง ตรงข้ามกับ สเี ขียว - สเี หลอื งส้ม ตรงขามกับ สมี ่วงนํ้าเงนิ - สสี ม้ แดง ตรงข้ามกบั น้ําเงินเขียว - สีมว่ งแดง ตรงข้ามกับ สีเหลืองเขยี ว การใช้สีตัดกันควรคํานึงถึงความเป็นเอกภาพด้วยวิธีการใช้มีหลายวิธี เช่น ใช้สีให้มีปริมาณ ต่างกัน เชน่ ใช้สีแดง 20% สเี ขยี ว 80% หรือ ใชเ้ นอ้ื สผี สมในกันและกันหรอื ใช้สีหนง่ึ สีใดผสมกับสคี ู่ที่ ตัดกันด้วยปริมาณเล็กน้อยรวมทั้งการเอาสีท่ีตัดกันมาทําให้เป็นลวดลายเลก็ ๆ สลับกนั ในผลงานชิ้น หนึ่งอาจจะใช้สีให้กลมกลืนกันหรือตัดกันเพียงอย่างใดอย่างหน่ึงหรืออาจจะใช้พร้อมกันทั้ง 2 อย่าง ทั้งน้ีแล้วแต่ความต้องการและความคิดสร้างสรรค์ของเราไม่มีหลักการหรือรูปแบบท่ีตายตัวในงาน ออกแบบหรือการจัดภาพหากเรารู้จักใช้สีให้มีสภาพโดยรวมเป็นวรรณะร้อนหรือวรรณะเย็นเราจะ สามารถควบคมุ และสร้างสรรค์ภาพใหเ้ กดิ ความประสานกลมกลนื งดงามได้ง่ายขึ้น เพราะสีมีอิทธิพล ต่อ มวลปริมาตร และชอ่ งวา่ งสีมีคุณสมบัติท่ีทําให้เกิดความกลมกลนื หรือขัดแย้งได้สีสามารถขับเน้น ให้ให้เกิดจุดเด่นและการรวมกันให้เกิดเป็นหน่วยเดียวกันได้เราในฐานะผู้ใช้สีต้องนําหลักการต่าง ๆ ของสีไปประยุกต์ใช้ให้สอดคล้องกับเป้าหมายในงานของเราเพราะสีมีผลต่อการออกแบบคือสร้าง ความรู้สึกสีให้ความรู้สึกต่อผู้พบเห็นแตกต่างกันไปทั้งนี้ขึ้นอย่กู ับประสบการณ์และภูมิหลังของแต่ละ คนสีบางสีสามารถรักษาบําบัดโรคจิตบางชนิดได้การใช้สีภายในหรือภายนอกอาคารจะมีผลต่อการ สัมผัสและสร้างบรรยากาศได้ 17

สร้างความน่าสนใจสีมีอิทธิพลต่องานศิลปะการออกแบบจะช่วยสร้างความประทับใจและ ความนา่ สนใจเป็นอนั ดบั แรกท่พี บเหน็ สีบอกสัญลักษณ์ของวัตถุซึ่งเกิดจากประสบการณ์หรือภูมิหลัง เช่น สีแดงสัญลักษณ์ของไฟ หรืออนั ตรายสเี ขียวสญั ลักษณแ์ ทนพชื หรอื ความปลอดภยั เปน็ ตน้ สีช่วยให้เกิดการรับรกู้ ารออกแบบต้องการให้ผู้พบเห็นเกิดการจดจําใจรปู แบบแลผลงานหรือ เกิดความประทับใจการใช้สีจะตอ้ งสะดุดตาและมีเอกภาพ ทฤษฎเี ก่ยี วกับ E-Commerce การพัฒนาระบบอินเทอร์เน็ตให้สามารถซ้ือขายสินค้าผู้อ่านทางเว็บไซต์ที่เรียกว่า การค้า อิเล็กทรอนิกสห์ รืออีคอมเมิรซ์ (E-Commerce) ช่วยลดขั้นตอนและความยุ่งยากเกี่ยวกับการซ้ือขาย สินค้าได้อย่างยอดเย่ียม ระบบอีคอมเมิร์ซได้เข้ามาแทนที่วิธีการซ้ือขายในรูปแบบเก่า ๆ ภายใน ร ะ ย ะ เว ลาอั น ร ว ด เร็ ว ใน ข ณ ะ เดี ย ว กั น บ ริ ษั ท ผู้ พั ฒ น าซ อ ฟ ต์ แ ว ร์ ก็ เร่ ง พั ฒ น าซ อ ฟ ต์ แ ว ร์ ให้ มี ความสามารถในการสร้างเว็บไซต์รวมทั้งสร้างระบบอีคอมเมิร์ซให้ง่ายต่อการใช้งานมากข้ึนโดย สามารถแยกออกได้เปน็ 2 ส่วนหลกั คอื - เว็บเพจหนา้ ร้าน (Store Front) คอื หน้าเว็บเพจสําหรับใช้ในการสรา้ งซอื้ สินคา้ หรือบรกิ าร - เว็บเพจหลังร้าน (Back Office) คือเว็บเพจท่ีใช้เฉพาะบุคลากรของร้านค้าซ่ึงผู้ใช้งาน ภายนอกไม่สามารถเข้ามาในสว่ นน้ีไดป้ ระโยชน์เพื่อกําหนดรายละเอียดต่าง ๆ ท่ีเกย่ี วข้องกับตัวสนิ ค้า หน้าเว็บรา้ นค้า ระบบพาณชิ ย์อิเลก็ ทรอนิกสไ์ มไ่ ด้หยุดอย่แู คน่ ั้นต่อมาไดม้ ีการพฒั นาระบบต่าง ๆ ขึน้ มากมาย ท่ีนํามาใช้ทางธุรกรรมต่าง ๆ รวมทั้งการขายสินค้าออนไลน์ซ่ึงในปัจจุบันได้มีการพัฒนาระบบหรือ โปรแกรมที่เข้ามาช่วยในการสนับสนุนการขายสินคาให้มีประสิทธิภาพมากขึ้นปัจจุบันมกี ารทําธุรกิจ ผ่านระบบเครือข่ายอินเทอร์เนต็ เกดิ ขึ้นมากมายโดยมีรปู แบบต่าง ๆ ดงั นี้ 1. การประกาศซื้อขายเป็นรูปแบบเว็บไซต์ E-Commerce ที่เปิดโอกาสให้ผู้สนใจประกาศ ความต้องการซ้ือขายสินค้าของตนเองได้ภายในเว็บไซต์โดยเว็บไซต์จะทําหน้าที่เหมือนกระดานข่าว และตัวกลางการแสดงข้อมูลสนิ คาต่าง ๆ และหากมีคนสนใจสินค้าที่ประกาศไว้สามารถติดต่อตรงไป ยังผู้ประกาศได้ทันท่ีจากข้อมูลที่ประกาศอยู่ภายในเว็บไซต์เว็บไซต์แคตตาล็อกสินค้าออนไลน์เป็น เวบ็ ไซต์มีรายละเอียดแสดงขอ้ มูลสินคา้ รปู ภาพและรายละเอยี ดต่าง ๆ รวมทั้งขอ้ มูลการตดิ ต่อในกรณี ทส่ี นใจจะซอ้ื สินคา้ แตจ่ ะไมม่ ีระบบเงินหรือส่งั ซือ้ สินค้า 2. ร้านค้าออนไลน์เป็นเว็บไซต์ E-Commerce ที่มีทั้งระบบการจัดการสินค้าระบบตะกร้า สินค้า Shopping Cart ระบบการชําระเงินรวมถงึ การขนส่งสนิ ค้าครบสมบูรณแ์ บบทาํ ให้ผซู้ ้ือสามารถ สัง่ ซอื้ สินคา้ ทาํ การชาํ ระเงนิ ผ่านเว็บไซต์ได้ทนั ที ทฤษฎีเก่ียวขอ้ งกับระบบฐานข้อมูล และ E-R Diagram Database (ฐานข้อมูล) คือระบบท่ีรวบรวมข้อมูลไว้ในที่เดียวกันซ่ึงประกอบไปด้วยแฟ้มข้อมูล (File) ระเบียน (Record) และ เขตข้อมูล (Field) และถกู จัดการด้วยระบบเดยี วกนั โปรแกรมคอมพวิ เตอร์จะเขา้ ไปดงึ 18

ข้อมูลท่ีต้องการได้อย่างรวดเร็วซ่ึงอาจเปรียบฐานข้อมูลเสมือนเป็น 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 เช่น เก็บแฟ้มข้อมูลนักเรียน อาจารย์วิชาท่ีเปิดสอน เป็นต้น การเข้าถึงข้อมูลในฐานข้อมูลจึงจําเป็นต้องมีระบบการจัดการ ฐานข้อมูลมาช่วยเรียกว่า database management System (DBMS) ซึ่งจะช่วยให้ผู้ใช้สามารถ จัดการกับข้อมูลตามความต้องการได้ในหน่วยงานใหญ่ๆอาจมีฐานข้อมูลมากกว่า 1 ฐานข้อมูล เช่น ฐานข้อมูลบุคลากร ฐานขอ้ มูลลูกคา้ ฐานข้อมูลสินคา้ เป็นต้น สาระสาํ คัญ ฐานข้อมูลเป็นการจัดเก็บข้อมูลอย่างเป็นระบบทําให้ผู้ใช้สามารถใช้ข้อมูลท่ีเก่ียวข้องใน ระบบงานต่าง ๆ ร่วมกันได้โดยท่ีจะไม่เกิดความซ้ําซ้อนของข้อมูลและยังสามารถหลีกเลี่ยงความ ขดั แย้งของข้อมูลด้วยอีกท้ังข้อมูลในระบบก็จะถูกต้องเช่ือถือได้และเป็นมาตรฐานเดียวกัน โดยจะมี การกําหนดระบบความปลอดภัยของข้อมูลขึ้น นับได้ว่าปัจจุบันเป็นยุคของสารสนเทศเป็นที่ยอมรับ กันว่าสารสนเทศเป็นข้อมูลที่ผ่านการกลั่นกรองอย่างเหมาะสมสามารถนํามาใช้ประโยชน์อย่าง มากมายไมว่ ่าจะเป็นการนํามาใช้งานด้านธุรกิจการบริหารและกิจการอ่ืน ๆ องค์กรท่ีมีข้อมลู ปริมาณ มาก ๆ จะพบความยุ่งยากลําบากในการจัดเก็บข้อมูลตลอดจนการนาํ ข้อมูลที่ตอ้ งการออกมาใชใ้ หท้ ัน ต่อเหตุการณ์ดังน้ันคอมพิวเตอร์จึงถูกนํามาใช้เป็นเครื่องมือช่วยในการจัดเก็บข้อมูลการประมวลผล ข้อมูลซ่ึงทําให้ระบบการจัดเก็บข้อมูลเป็นไปได้สะดวกทั้งนี้โปรแกรมแต่ละโปรแกรมจะต้องสร้างวิธี ควบคุมและจัดการกบั ข้อมูลขึ้นเองฐานข้อมูลจึงเข้ามามบี ทบาทสําคัญอย่างมากโดยเฉพาะระบบงาน ตา่ ง ๆ ท่ีใช้คอมพิวเตอร์การออกแบบและพัฒนาระบบฐานข้อมลู จึงต้องคํานึงถึงการควบคุมและการ จัดการความถูกตอ้ งตลอดจนประสิทธภิ าพในการเรียกใช้ข้อมลู ดว้ ย ระบบจัดการฐานข้อมูลซอฟต์แวร์สําหรับจดั การฐานข้อมูลน้นั โดยท่วั ไปเรยี กว่า ระบบจัดการ ฐานข้อมูลหรือดีบีเอ็มเอส (DBMS - Database Management System) สถาปัตยกรรมซอฟต์แวร์ ของดีบีเอ็มเอสอาจมีได้หลายแบบ เช่น สําหรับฐานข้อมูลขนาดเล็กที่มีผใู้ ช้คนเดียว บ่อยครั้งท่ีหน้าที่ ทงั้ หมดหมดจะจัดการด้วยโปรแกรมเพียงโปรแกรมเดียวสว่ นฐานข้อมูลขนาดใหญ่ทม่ี ีผใู้ ชจ้ ํานวนมาก 19

นนั้ ปกติจะประกอบด้วยโปรแกรมหลายโปรแกรมด้วยกันและโดยทั่วไปส่วนใหญ่จะใช้สถาปัตยกรรม แบบรับ-ใหบ้ ริการ (client-server) โปรแกรมส่วนหน้า (front-end) ของดบี เี อ็มเอส (ไดแ้ ก่ โปรแกรม รับบริการ) จะเก่ียวข้องเฉพาะการนําเขา้ ข้อมูลการตรวจสอบเป็นสําคัญในขณะที่โปรแกรมส่วนหลัง (back-end) ซึ่งได้แก่ โปรแกรมให้บริการจะเป็นชุดของโปรแกรมที่ดําเนินการเกี่ยวกับการควบคุม การเก็บข้อมูลและการตอบสนองการร้องขอจากโปรแกรมส่วนหน้าโดยปกติแล้วการค้นหาและการ เรียงลําดับจะดําเนินการโดยโปรแกรมให้บริการรูปแบบของระบบฐานข้อมูลมีหลากหลายรูปแบบ ด้วยกนั นับตัง้ แต่การใช้ตารางอยา่ งงา่ ยทเ่ี ก็บในแฟม้ ข้อมลู แฟ้มเคียวไปจนกระท่ังฐานข้อมูลขนาดใหญ่ มากท่ีมีระเบียนหลายล้านระเบียนซ่ึงเก็บในห้องท่ีเต็มไปด้วยดิสก์ไดรฟ์ หรืออุปกรณ์หน่วยเก็บข้อมูล อิเลก็ ทรอนิกสร์ อบขา้ ง (peripheral) อ่นื ๆ การออกแบบฐานข้อมูลการออกแบบฐานข้อมูล (Designing Databases) มีความสําคัญต่อ การจัดการระบบฐานข้อมูล (DBMS) ทั้งน้ีเน่ืองจากข้อมูลท่ีอยู่ภายในฐานข้อมูลจะต้องศึกษาถึง ความสัมพันธข์ องขอ้ มูลโครงสร้างของข้อมูลการเขา้ ถงึ ข้อมูลและกระบวนการที่โปรแกรมประยกุ ต์จะ เรยี กใช้ฐานขอ้ มูลดงั น้นั เราจึงสามารถแบ่งวธิ กี ารสรา้ งฐานข้อมูลได้ 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) โดยท่ตี ารางแตล่ ะตารางทส่ี รา้ งขึ้นจะเปน็ อสิ ระดังน้ันผู้ออกแบบฐานขอ้ มูลจะต้องมีการ วางแผนถึงตารางขอ้ มูลท่ีจาํ เป็นต้องใชเ้ ช่นระบบฐานข้อมูลบรษิ ัทแห่งหนงึ่ ประกอบดว้ ยตารางประวัติ พนักงานตารางแผนกและตารางข้อมูลโครงการแสดงประวัติพนักงานตารางแผนกและตารางข้อมูล โครงการการออกแบบฐานข้อมูลเชงิ สัมพันธก์ ารออกแบบฐานข้อมลู ในองค์กรขนาดเล็กเพือ่ ตอบสนอง ความตอ้ งการของผ้ใู ช้งานอาจเปน็ เร่อื งท่ีไมย่ ุ่งยากนกั เน่ืองจากระบบและข้ันตอนการทํางานภายในองค์กรไม่ซับซ้อนปริมาณข้อมูลท่ีมีก็ไม่มาก และจํานวนผู้ใช้งานฐานข้อมูลก็มีเพียงไม่กี่คหากทว่าในองค์กรขนาดใหญ่ซ่ึงมีระบบและข้ันตอนการ ทาํ งานทซ่ี บั ซ้อนรวมทงั้ มปี ริมาณขอ้ มูลและผใู้ ชง้ านจาํ นวนมากการออกแบบฐานข้อมลู จะเปน็ เรอ่ื งที่มี 20

ความละเอียดซับซ้อนและต้องใช้เวลาในการดาํ เนินการนานพอควรท่ีเดียวทั้งนี้ฐานข้อมูลท่ีได้รับการ ออกแบบอย่างเหมาะสมจะสามารถตอบสนองต่อความต้องการของผู้ใช้งานภายในหน่วยงานต่าง ๆ ขององค์กรได้ซงึ่ จะทาํ ให้การดาํ เนนิ งานขององค์กรมีประสิทธิภาพดียงิ่ ข้ึนเป็นผลตอบแทนท่คี ุ้มค่าต่อ การลงทุนเพ่ือพัฒนาระบบฐานขอ้ มลู ภายในองค์กรทงั้ นี้การออกแบบฐานข้อมูลที่นําซอฟต์แวร์ระบบ จัดการฐานข้อมลู มาช่วยในการดําเนินการสามารถจําแนกหลักในการดาํ เนินการได้ 6 ขนั้ ตอน คอื สัญลกั ษณ์ในการออกแบบระบบฐานข้อมูล การรวบรวมและวเิ คราะห์ความต้องการในการใชข้ อ้ มลู 1. การเลือกระบบจดั การฐานขอ้ มูล 2. การออกแบบฐานข้อมลู ในระดบั แนวคดิ 3. การนําฐานข้อมูลทีอ่ อกแบบในระดับแนวคดิ เขา้ สูร่ ะบบจดั การฐานข้อมูล 4. การออกแบบฐานข้อมลู ในระดับกายภาพ สัญลกั ษณใ์ นการออกแบบระบบ ตารางที่ 2.2 แสดงสญั ลกั ษณใ์ นการออกแบบระบบฐานขอ้ มูล 21

ผังงาน 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) เพ่ือพัฒนาระบบของเราได้ปัญหาหลักของการออกแบบ ระบบทาํ งานก็คอื การทาํ งานํซา้ ทํางานชกั ช้าทาํ งานหลายขัน้ ตอนเกิดจาํ เปน็ โดยเฉพาะในระบบท่ีมีคน ทรัพยากรหรอื กระบวนการเยอะซง่ึ ส่วนมากหากจะเกิดจากการที่เราใส่ใจกระบวนการเฉพาะจุดมาก เกินไปจนลืมดูภาพรวมของทั้งหมดในส่วนนีก้ ารพัฒนาและออกแบบกระบวนการทํางานก็มีเครอื่ งมือ อยหู่ ลายแบบผมแนะนําใหล้ องอ่านบทความเหลา่ น้ดี นู ะครับ 5ส คอื อะไร และ Design Thinking กับ การคิดเชิงออกแบบขอ้ เสียและขอ้ จํากัดของ Flow Chart ในบทความส่วนท่ีแลว้ เราเห็นแล้วว่า Flow Chart น้ันสามารถใช้ทําประโยชน์ให้กับการออกแบบระบบเพิ่มประสิทธิภาพการทํางานได้อย่างไร บ้าง อย่างไรก็ตามก่อนท่ีเราจะเริ่มศึกษาวิธีการเขียนผังงาน Flow Chart ดิฉันก็อยากจะแนะนํา ข้อเสียและข้อจํากัดของ Flow Chart ด้วยข้อเสียแรกก็คือ Flow Chart ไม่เหมาะกับระบบการ ตัดสินใจท่ีซับซ้อนมากเกินไปซึ่งเราจะเห็นได้บ่อยในการออกแบบระบบการตัดสินใจของโปรแกรม คอมพิวเตอร์ ยกตัวอย่างเช่นถา้ คุณมรี ะบบท่ีต้องวิเคราะห์ 100 ปัจจัยเพ่ือเลอื กระหว่างการตัดสนิ ใจ 50 อยา่ งการวาดแบบ Flow Chart ออกมาใหม้ นษุ ย์เข้าใจได้ก็ทาํ ได้ยากในระบบทีซ่ บั ซ้อนแบบน้กี าร วาดแบบ Flow Chart ออกมาก็คงใช้เวลานานไม่น้อยและการท่ีเราจะกลับมาแก้ Flow Chart ภายหลังเมื่อเรามีข้อมูลเพิ่มเติมก็คงใช้เวลามากไม่แพ้กันพูดง่าย ๆ ก็คือในกรณีที่เรามีรายละเอียด เยอะมาก ๆ การออกแบบระบบให้เข้าใจไดง้ ่ายกเ็ ป็นขอ้ จํากัดของการวาดผังงานข้อเสียอีกอย่างหน่งึ ก็ คือการจัดเก็บข้อมูลสําหรับผู้ใช้จํานวนมากหมายถึงว่ารูปภาพผังงานท่ีถูกออกแบบมาจะแสดงถึง เกณฑก์ ารตัดสินใจและขนั้ ตอนกิจกรรมต่าง ๆ เช่นถา้ ใช่ให้ทําอย่างนึงถา้ ไม่ใชใ่ ห้ทําอีกอย่างหรือการ แสดงการกระทาํ ท่ีนอ้ ยกว่าเทา่ กับหรือมากกว่าตัวเลขใดตัวเลขหนง่ึ ในกรณนี ห้ี ากเปน็ การใช้งานระยะ 22

สน้ั หรอื มผี ูใ้ ชง้ านและออกแบบงานไมก่ ่คี นปญั หาก็คงไม่ไดม้ อี ะไรมากแต่ถา้ คณุ มีผใู้ ช้งานออกแบบงาน หลักรอ้ ยหรือพันคนการกลับมาแก้ไขข้อมลู 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 ใหใ้ ช้งานได้จริงก็ต้องคํานึง ด้วยว่า “คนอ่ืนจะอ่านแล้วเข้าใจหรือเปล่าสําหรับคนที่ยังไม่เห็นภาพนะคะ ข้างล่างจะเป็นตัวอย่าง ของผังงาน Flow Chart ในตอนนี้คุณยังไม่ต้องทําความเขา้ ใจท้ังหมดก็ได้แค่ดคู ร่าว ๆ ไว้ก่อนเวลาที่ ดิฉนั อธิบายเรื่องสัญลักษณต์ ่าง ๆ และวิธกี ารเขยี นคณุ จะได้ไมง่ งมาก รปู ที่ 2.10 ผังการทาํ งานของ Flow chart 23

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

สญั ลักษณ์ระบบกระแสข้อมูล รปู ที่ 2.11 สญั ลักษณ์ระบบกระแสข้อมูล แผนภาพแสดงการไหลกระแสของข้อมูล (Data Flow Diagram: DFD) Data Flow Diagram เป็นเครื่องมือของนักวิเคราะห์ระบบท่ีช่วยให้สามารถเข้าใจกระบวนการทํางานของแต่ละ หน่วยงานซ่ึงทราบถึงการรับส่งข้อมูลการประสานงานระหว่างกิจกรรมต่าง ๆ ในการดําเนินงานซ่ึง เป็นแบบจําลองของระบบแสดงถึงการไหลของข้อมูลทั้ง INPUT และ OUTPUT ระหว่างระบบกับ แหล่งกําเนิดรวมทั้งปลายทางของการส่งข้อมูลซ่ึงอาจเป็นแผนกบุคคลหรือระบบอ่ืนโดยข้ึนอยู่กับ ระบบงานและการทํางานประสานงานภายในระบบน้ันนอกจากน้ียังช่วยให้รู้ถึงความต้องการข้อมูล และข้อบกพร่อง (ปัญหา) ในระบบงานเดิมเพื่อใช้ในการออกแบบการปฏิบัติงานในระบบใหม่ Data Flow Diagram (DFD) เป็นภาพแสดงการเปลยี่ นแปลงข้อมูลในขณะไหลผ่านกระบวนการทํางานตา่ ง ๆ ของระบบสารสนเทศ DFD จึงเป็นโครงสร้างของระบบงานสารสนเทศที่ส่ือเข้าใจในการทํางานของ ระบบงานในรูปแบบของความสัมพันธ์ระหว่างกระแสข้อมูลและโปรเซส DFD ภายใน DFD ทําให้เรา เข้าใจส่วนประกอบของงานเข้าใจการใช้ข้อมูลในแต่ละโปรเซสและข้อมูลที่เป็นผลจากการทํางาน โปรเซสโดยโครงสรา้ งจะเริม่ จากระดับสงู สดุ ซึ่งจะแสดงส่วนทอี่ ยู่ภายนอกระบบส่วนน้สี าํ คัญ เพราะว่า เป็นส่วนที่บอกว่าระบบนั้น ๆ ได้รับข้อมูลมาจากท่ีใดและผลลัพธ์ต่าง ๆ ถูกส่งไปท่ีใดบ้าง DFD ใน ระดับลึกลงไปจะไม่แสดงส่ิงท่ีอยู่นอกระบบคือไม่มีส่ิงน้ีเป็นส่วนประกอบโดยปกติจะวางแหล่งที่มา ของข้อมูลไว้ทางซ้ายมือของ DFD และส่วนภายนอกที่รับผลลัพธ์ของระบบจะอยู่ทางขวามือทั้งน้ี เพ่อื ใหอ้ ยใู่ นรปู แบบของกระแสข้อมลู จากซ้ายไปขวา โปรแกรมทใ่ี ช้ในการทําเว็บไซต์ โปรแกรม Adobe Photoshop CS6 เครือ่ งมอื ใน Photoshop CS6 จะแตกตา่ งจาก CS4 และ CS5 ไปบา้ งเลก็ น้อย กล่าวคือ โดย พื้นฐานจะคงเดมิ แต่จะปรบั การใชง้ านให้ดูงา่ ยขึ้น มกี ารเก็บรวบรวมเครื่องมือท่เี กี่ยวขอ้ งเอาไวท้ เี่ ดยี ว 25

กันเพิม่ ชุดเคร่ืองมอื เขา้ มาใหม่ และลดข้ันตอนการทํางานให้น้อยลง ทําให้ใช้งานสะดวกยิง่ ขน้ึ ในเวอร์ ชัน่ น้ีได้เพิ่มคําสั่ง และแถบเครื่องมือที่ใช้บ่อย ๆ วางแยกออกมาจากกลุ่มเครื่องมือเดิม เช่นเครอ่ื งมือ ปรับมุมมอง เครอ่ื งมือปรับแต่งภาพที่รวมอยใู่ นพาเนลเดียวกัน เช่น พาเนล Adjustments สว่ นการ ทํางานหลัก ๆ ยังคงอิงการใชง้ านเหมือนเวอร์ชั่นที่ผา่ นๆ มา ซ่ึงหน้าจอใหม่ของ Photoshop CS6 มี ส่วนประกอบ ดังภาพ รปู ท่ี 2.12 หน้าต่างโปรแกรม Adobe Photoshop CS6 รายละเอยี ดสว่ นประกอบของโปรแกรม Photoshop CS6 1. Application Menu (แอพพลิเคชั่นเมนู) จะเป็นแถบเคร่ืองมือที่เก็บปุ่มคําส่ังที่ใช้งาน บ่อยๆเอาไว้ เช่น เปิดโปรแกรม Bridge หมุนพื้นที่ทํางานย่อขยายภาพ, จัดเรียงวินโดว์ภาพและจัด องคป์ ระกอบของเครอ่ื งมือตามพืน้ ทใ่ี ชง้ าน (Workspace) 2. Tools Control Menu (ทูลคอลทลเมนู) ประกอบด้วยกลุ่มคาํ ส่ังตา่ งๆที่ใช้จดั การกับไฟล์ ทํางานกับรูปภาพและใช้การปรับแต่งการทํางานของโปรแกรมโดยแบ่งเมนูตามลักษณะงาน นอกจากนี้บางเมนูหลักจะมีเมนูย่อยซ้อนอยู่ โดยสังเกตจากเครื่องหมาย ซึ่งคุณต้องเปิดเข้าไปเพ่ือ เลือกคาํ ส่งั ภายในอีกที 3. Stage (สเตช) เปน็ พน้ื ทว่ี า่ งสาํ หรบั แสดงงานทกี่ ําลังทาํ อยู่ 4. Tool (ทูล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ในการวาด ตกแต่งและแก้ไขภาพ เคร่ืองมือเหล่านี้มีจํานวนมาก ดังน้ันจึงมีการรวมเคร่ืองมือท่ีทําหน้าที่คล้าย ๆ กนั ไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหล่ียมอยู่บริเวณมุมด้านล่างดงั ภาพ เพ่ือบอกให้รู้ว่า ใน ปุม่ นีย้ งั มีเครอ่ื งมอื อ่ืนอยดู่ ว้ ย 26

5. Panel Menu (พาเนลเมนู) เป็นวินโดว์ย่อย ๆ ท่ีใช้เลือกรายละเอียด หรือคําส่ังควบคุม การทํางานต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจํานวนมาก เช่น พาเนล Color ใช้ สาํ หรับเลือกสี พาเนล info ใช้แสดงค่าสตี รงตําแหน่งท่ชี ้ีเมาส์รวมถึงขนาดตาํ แหนง่ ของพื้นที่ทเี่ ลือกไว้ Photoshop เป็นโปรแกรมในชุด Creative Suite 6 หรือเรียกสั้นๆว่า CS6 ซึ่งใช้สําหรับสร้าง และ ตกแต่งภาพกราฟกิ ซึ่งมปี ระสทิ ธิภาพและมีช่อื เสียงมากโปรแกรมหนึ่งด้วยความสามารถทีห่ ลากหลาย ท้งั การสร้างภาพใหม่และตกแต่งภาพดว้ ยเครอื่ งมอื และเทคนคิ พิเศษต่างๆ จึงทําให้ Photoshop เป็น โปรแกรมสําคัญที่จําเป็นต้องมีติดตั้งใช้งานในเคร่ืองคอมพิวเตอร์ของผู้ใช้งาน ส่วนใหญ่ในที่น้ีขอ กล่าวถึง Photoshop ท่ีได้ผ่านการพัฒนามาจนถึงเวอร์ช่ันท่ี 12 ซึ่งมีช่ือเรียกอย่างเป็นทางการว่า Adobe Photoshop CS6 โดยในเวอร์ชั่นน้ีจะแบ่งออกเป็น 2 เวอร์ชั่นย่อยคือ Photoshop CS6 และ Photoshop CS6 Extended ซ่ึงทั้ง 2 เวอร์ช่ันน้ี มีความสามารถแตกต่างกันออกไป Photoshop CS6 เป็นเวอรช์ ั่นแบบธรรมดาท่ีเน้นการทํางานด้านการตกแต่งตัดต่อภาพถ่ายเป็นเวอร์ ช่ันท่ีนิยมใช้กันอย่างแพร่หลายเพราะมีฟังก์ชันการทํางานพ้ืนฐานท่ีครบถ้วน Photoshop CSS ได้ เพิ่มความสามารถนอกเหนือจากการตกแต่งและการตัดต่อคือการทาํ งานด้าน 3D (3 มติ ิ) ให้รูปทรงมี แสงเงาสมจริง สร้างภาพเคลื่อนไหวด้วย Timeline แต่ Photoshop CS6 ไม่ว่าจะเวอร์ช่ันธรรมดา หรอื เวอรช์ นั่ Extended ถูกออกแบบให้มคี วามสามารถเพิม่ มากขนึ้ และออกแบบเคร่ืองมอื ให้เรยี กใช้ ไดส้ ะดวกข้ึน ซ่ึงสามารถนาํ มาใช้ในการออกแบบช้นิ งานด้านตา่ ง ๆ ดงั น้ี 1. สอ่ื สิง่ พิมพ์ไมว่ า่ จะเปน็ นิตยสารวารสารหนังสอื แผน่ พบั และโบชวั ร์ 2. งานกราฟกิ โฆษณาสนิ ค้าทางโทรทศั น์ 3. งานนาํ เสนอ (Presentation) และตกแตง่ ภาพสาํ หรับภาพยนตรแ์ ละมเี ดียทวั่ ไป 4. ออกแบบกราฟิกสาํ หรับเว็บไซต์ โปรแกรม phpMyAdmin เป็นส่วนเชื่อมต่อประสานที่สร้างโดยภาษา PHP ซึ่งโดยการจัดฐานข้อมูล MySQL ผ่านเว็บ บราวเซอร์ โดยสามารถสร้างฐานข้อมูลใหม่หรือทําการสรา้ ง Table ใหม่ ๆ และยงั มี Function ท่ีใช้ สําหรับทดสอบการ Query ข้อมูลด้วยภาษา SQL พร้อมกันนั้นยังสามารถทําการ Insert,Delete, Update หรือแม้กระท่ัง ใชค้ ําสั่งตา่ ง ๆ เหมือนกับการใช้ภาษา SQL ในการสร้างตารางขอ้ มูล ในการ แสดงผลหน้าแรกเมื่อเข้าสู่หน้าหลัก จะแสดงผล phpMyAdmin ท่ีใช้งานอยู่ พร้อมทั้งที่สามารถ จัดเก็บรหัสอักขระทใ่ี ช้ในการเก็บข้อมลู ฝั่งเมนูด้านซา้ ยจะแสดงข้อมูลฐานข้อมูลปัจจุบัน และเมอ่ื ทํา การเลือกแล้วจะแสดงโครงสร้างของตารางฐานข้อมูล 27

หากเลือกท่ี phpMyAdmin โปรแกรมจะปรากฏข้ึนมาโดยจะปรากฏไอคอนอยู่ท่ี System Tray จากน้ันคลิกที่ไอคอน Wamp และเลือก php My Admin เพ่ือเข้าไปในการจัดเก็บบัญชีผู้ใช้ php My Admin นําช่ือและรหัสผ่านของผู้ใช้งานฐานข้อมูลใส่ในขั้นตอนตอนติดตั้ง Web Applications ต่าง ๆ ค่าเดิมของโปรแกรมชื่อผู้ใช้คือ root รหัสผา่ นว่างเปลา่ แน่นอนวา่ ใส่ชื่อ root ได้แต่ปลอ่ ยรหัสผ่านว่างเปลา่ ไม่ได้เราต้องสรา้ งผ้ใู ชใ้ หม่โดยแก้ไขค่า Config โดยค่าที่แก้คือค่าท่ีสร้าง ผใู้ ช้ใหม่ในทีท่ ต่ี ิดตง้ั Wamp รูปท่ี 2.13 แสดง phpMyAdmin รปู ที่ 2.14 แสดงโค้ดสาํ หรบั สรา้ ง MySQL 28

โปรแกรม Visual Studio Code Visual Studio Code หรือ VS Code เป็นโปรแกรมแก้ไขซอร์สโค้ดที่พัฒนาโดย Microsoft สําหรับ Windows, Linux และ macOS สามารถทํางานข้ามแพลตฟอร์มกันไปมาได้รองรับภาษา โปรแกรมได้หลายภาษา โดย Visual Studio Code เป็นตัวแก้ไขซอร์สโค้ด (Source Code Editor) ที่ได้รับความนิยมเป็นอย่างมาก ถือเป็นโปรเจค โอเพนซอร์สของ Microsoft ที่ประสบความสําเร็จ เป็นอย่างมาก รูปแบบการทํางานจะเหมือนกับ Text Editor ที่มีความสามารถเฉพาะ ในการทํา แอพพลิเคชัน่ ให้ใช้งานง่ายโดยเฉพาะฟีเจอร์การทํางานร่วมกับ Git ท่ีทําให้สามารถดูและแก้ไขได้ง่าย จุดเด่นสําคัญของ Visual Studio Code คือระบบ IntelliSense เป็นตัวช่วยเพ่ือความสะดวกและ ความถกู ตอ้ งในการเขียนโค้ด ซง่ึ มีลักษณะเป็น Popup ท่ีแสดงรายการทีส่ ามารถใช้งานไดใ้ นขณะนั้น ความสามารถของ Visual Studio Code น้ันจะมีความสามารถในการเปิดอ่าน แก้ไข และเขียนโค้ด ได้เหมือน Editor ตัวอื่น ๆ เช่น Sublime Text, Atom, Notepad++ รวมถึงความสามารถในการ ตดิ ตงั้ เคร่อื งมอื เสรมิ (Extension) รูปที่ 2.15 หน้าต่างโปรแกรม Visual Studio Code รปู ท่ี 2.16 หน้าตา่ งการเปดิ อ่าน แกไ้ ข และ เขียนโค้ด 29

Visual Studio Code ถูกพัฒนามาให้ตอบโจทย์นักพัฒนามากท่ีสุด การดีไซน์จึงออกมา แตกต่างจากโปรแกรมอ่ืนอย่างเห็นได้ชัด ใหเ้ ปน็ รูปแบบทเี่ ข้าใจและใชง้ านไดง้ า่ ย รปู ที่ 2.17 หน้าการดีไซน์แก้ไข และ เขยี นโคด้ สงิ่ ที่ทําให้โดนเด่นกว่าตัวอื่น ๆ คือการที่ออกแบบให้การคน้ หาสิ่งต่าง ๆ ทําออกมาให้ใช้งาน ได้ง่ายและดูง่ายกว่าตัวอื่น ๆ รวมถึงการท่ีสร้างมาให้สามารถเช่ือมต่อกับ Git ได้อย่างรวดเร็วและ งา่ ยดาย มฟี ังกช์ ัน่ ในการ Commit, Push & Pull อยใู่ นตัว หรือจะดู Change ของไฟลท์ ี่เกิดขนึ้ ได้ โปรแกรม XAMPP Control Panel v.3.2.2 XAMPP โปรแกรมนี้เป็นโปรแกรมที่มีการนําโปรแกรมท่ีเกี่ยวข้องกับการพัฒนาระบบมา รวมเข้าไว้ด้วยกัน ซ่ึงก็มีตั้งแต่ Apache สําหรับทําหน้าที่เป็นเว็บเซิร์ฟเวอร์, MySQL ซึ่งเป็นระบบ ฐานขอ้ มลู ฟรที ีเ่ ป็นที่นยิ มอยา่ งแพร่หลายในปจั จบุ ัน, PHP ภาษาสําหรับพัฒนาเวบ็ แอพลเิ คชนั่ ทเ่ี ปน็ ท่ี นิยมเช่นกัน PHP MyAdmin ระบบบริหารฐานข้อมูลที่พัฒนาโดย PHP เพื่อใช้เชื่อมต่อไปยัง ฐานข้อมูล MySQL FileZilla ที่ใช้สําหรับเชื่อมต่อไปยังระบบ FTP และ Tomcat ทําหน้าที่เป็นเว็บ เซิฟเวอร์ XAMPP มีการนําโปรแกรมเหล่าน้ีมารวมกัน สามารถลง XAMPP และใช้งานได้ทันทีโดยไม่ต้องตั้งค่าให้ยุ่งยาก แต่วัตถุประสงค์ XAMPP คอื ใช้เพ่ือพัฒนาและทดสอบระบบเท่านั้น ทาํ ใหร้ ะบบความปลอดภยั ที่ตัง้ ไว้ด้อยกวา่ การท่จี ะนําไปใช้ งานจริง หากใครต้องการนําไปใช้งานจริง ควรศึกษาการต้ังค่าความปลอดภัยให้ดีก่อนนําไปใช้งาน XAMPP คือโปรแกรมทรี่ วบรวมเอา Open Source Software หลาย ๆ อยา่ งมารวมกนั นักพัฒนาเว็บไซด์หลายคน อาจจะเคยเจอประสบการณ์ที่ยากลําบากในการจําลองเคร่ือง คอมพิวเตอร์ตัวเอง ให้กลายเป็นเวบ็ เซิร์ฟเวอร์เพ่ือจะสามารถทดสอบการเขยี นโปรแกรมบนเว็บไซด์ 30

ได้ เพราะว่าจะต้องติดตั้ง เว็บเซิร์ฟเวอร์ (จะเป็น IIS หรือ Apache ก็ตาม) และก็ต้องติดต้ัง PHP หรือ Perl แลว้ ก็ตามด้วยการตดิ ตง้ั MySQL เพื่อจัดการฐานขอ้ มูล รูปท่ี 2.18 หนา้ ตา่ งการเปิดใชง้ าน XAMPP 2.5 ระบบงานท่เี กีย่ วข้อง นายเมธาวิน จําเจริญ และ นายพงษ์พันธ์ุ ชูพันธ์ (2563) โครงการระบบการขายสินค้า ออนไลน์ประเภทสินค้า ถุงเท้า วัตถุประสงค์ของการทําโครงการจัดทําเพื่อตอบสนองความต้องการ ของผใู้ ช้ในการซอ้ื สินคา้ ออนไลน์ นายระพีพัฒน์ เพ็งน่วม และ นายเมธา เสมสําราญ (2563) โครงการระบบการขายสินค้า ออนไลน์ ประเภทสนิ คา้ เสือ้ ผ้าแฟช่ัน วตั ถปุ ระสงค์ของการทาํ โครงการจดั ทาํ เพือ่ ใหผ้ ูค้ นที่สนใจสงั่ ซื้อ เส้ือผ้าแฟชนั่ สามารถสง่ั ซอ้ื สนิ คา้ ผา่ งทางเวบ็ ไซตไ์ ด้ นางสาวปิยาภรณ์ เวียนเวช และ นางสาวภัทรวรรณ กลิ่นหอม (2563) โครงการระบบการ ขายสินค้าออนไลน์ ประเภทสินค้า ชุดว่ายน้ําชาย-หญิง โครงการน้ีจัดทําขึ้นเพ่ือให้ผู้คนที่สนใจ เกี่ยวกับชุดว่ายน้ําเพิ่มมากข้ึนเป็นการเผยแพร่อย่างท่ัวถึงให้บุคคลที่สนใจเข้ามาศึกษาผ่านเว็บไซต์ ของเราได้ 31

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

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

2. Flowchart การเข้าสรู่ ะบบ รปู ท่ี 3.3 Flow chart การเข้าสู่ระบบ 34

3. Flowchart การสงั่ ซือ้ รปู ที่ 3.4 Flow chart การสงั่ ซ้อื 35

3.2 การออกแบบแผนภาพบริบท (Context Diagram) รปู ที่ 3.5 การเขียน Context Diagram ระบบขายสนิ คา้ ออนไลน์ ประเภทสินค้า รา้ นขายรองเทา้ เด็ก 36

3.3 การออกแบบแผนภาพกระแสการไหลขอ้ มูล (Data Flow Diagram) 1. Data Flow Diagram Level 0 รปู ท่ี 3.6 Data Flow Diagram Level 0 ระบบขายสนิ ค้าออนไลน์ ประเภทสินค้า ร้านขายรองเทา้ เด็ก 37

2. Data Flow Diagram Level 1 Process 1 รปู ท่ี 3.7 Data Flow Diagram Level 1 Process 1 ระบบขายสินค้าออนไลน์ ประเภทสินค้า ร้านขายรองเท้าเด็ก 3. Data Flow Diagram Level 1 Process 2 รปู ท่ี 3.8 Data Flow Diagram Level 1 Process 2 ระบบขายสินค้าออนไลน์ ประเภทสนิ ค้า รา้ นขายรองเท้าเด็ก 38