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

ระบบขายสินคา้ ออนไลน์ ประเภทสินค้า อุปกรณเ์ ครื่องเขยี น P จงั โลลิ E-Commerce for Stationary Tool’s by P’JungLoLi Online Selling นายปฐมชล สขุ านนท์ นางสาวพรี ลั ญาดา กุลพพิ ัฒน์ภาธร โครงงานนี้เปน็ สว่ นหนึ่งของการเรยี นตามหลักสูตรประกาศนยี บัตรวีชาชีพชนั้ สงู สาขาวชิ าเทคโนโลยธี รุ กจิ ดจิ ทิ ลั วิทยาลยั เทคโนโลยอี รรถวทิ ย์พณชิ ยการ ปกี ารศกึ ษา 2565



บทคดั ย่อ หัวขอ้ โครงงาน ระบบขายสนิ คา้ ออนไลน์ ประเภทสินค้า อุปกรณ์เครือ่ งเขยี น P จังโลลิ ผจู้ ัดทำโครงงาน E-Commerce for Stationary Tool’s by P’JungLoLi Onilne Selling อาจารยท์ ่ีปรึกษา 1. นายปฐมชล สุขานนท์ รหสั นักศกึ ษา 42867 อาจารยท์ ปี่ รึกษาร่วม สาขาวชิ า 2. นางสาวพีรัลญาดา กุลพิพัฒน์ภาธร รหัสนกั ศกึ ษา 43287 สถาบนั อาจารยน์ ราภรณ์ เจรญิ ชัย อาจารย์สมาภรณ์ เยน็ ดี เทคโนโลยีธุรกิจดิจิทัล วทิ ยาลยั เทคโนโลยอี รรถวิทยพ์ ณิชยการ ปกี ารศกึ ษา 2565 ----------------------------------------------------------------------------------------------------------------------- บทคดั ยอ่ ใน ก า ร จั ด ท ำ โค ร ง ง า น เล่ ม น้ี จั ด ท ำ ขึ้ น เกี่ ย ว กั บ ร ะ บ บ ก า ร ข า ย สิ น ค้ า แ บ บ อ อ น ไ ล น์ ประเภทสินค้า อุปกรณเ์ ครื่องเขียน P จังโลลิ วตั ถุประสงคข์ องโครงงานจัดทำขน้ึ เพ่ือตอบสนองความ ต้องการของลูกค้าท้ังรูปแบบและคุณภาพ เพ่ือให้ลูกค้าพึงพอใจในสินค้า ประหยัดเวลาและราคา ค่าใชจ้ า่ ย และสะดวกสบาย โครงงานระบบขายสินค้าออนไลน์ ประเภทสินค้า อุปกรณ์เคร่ืองเขียน P จังโลลิ ในลักษณะของการขายสินค้า เพื่อตอบสนองความต้องการของลูกค้าที่เข้ารับชมเว็บไซต์ ผลการดำเนินงานระบบขายสินค้าออนไลน์น้ีระบบสมัครสมาชิกและมีการ Login เข้าระบบเพื่อทำ การสั่งซื้อสินคา้ มีระบบซือ้ สินค้าท่ีใช้งานได้ง่ายดาย มีการบอกวิธีการสัง่ ซอ้ื และวธิ ีชำระเงินเมื่อสัง่ ซ้ือ สินคา้ เมอ่ื สั่งซ้อื สนิ ค้าอย่างครบถ้วน ประโยชน์ที่ได้รับจากการทำเว็บไซต์ขายสินค้าออนไลน์ขึ้น เพื่อให้ท่านผู้ชมได้รับความ สะดวกสบายและประหยัดเวลาในการเดินทางไกลไปเลือกซ้ือสินคา้ ทีห่ ้างสรรพสินค้า สินค้ามีใหเ้ ลอื ก หลายประเภท และสามารถใช้งานระบบได้อย่างสะดวกสบาย ผใู้ ชส้ ามารถได้รับความรเู้ ขา้ ใจในการใช้ สินคา้ เราไดง้ า่ ยเกิดความเขา้ ใจมากข้นึ ข

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

คำนำ การจัดทำโครงงานน้ีเป็นสว่ นหน่ึงของวิชาโครงงาน 30204-8502 หลักสตู รประกาศนียบัตร วิชาชีพชั้นสูง สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล โดยคณะผู้จัดทำได้จัดทำโครงงานระบบขายสินค้า ออนไลน์ ประเภท E-Commerce อุปกรณ์เครื่องเขยี น P จงั โลลิ โดยมีการสรา้ งเวบ็ ไซต์เพื่อนำเสนอ ผลงานแกผ่ ทู้ ีส่ นใจในการเลอื กซ้อื สินคา้ ออนไลน์ โครงงานที่ทางคณะผู้จัดทำได้จัดทำนั้น ประกอบไปด้วยวัตถุประสงค์ของโครงงาน แผนการดำเนนิ การในการจดั ทำเว็บไซต์ เคร่ืองมือและอุปกรณ์ท่ีใช้ต่างๆ และรายละเอียดค่าใช้จ่าย ต่างๆ ในการจัดทำโครงงานน้ีเกี่ยวกับอุปกรณ์ เครื่องเขียน เว็บไซต์ระบบขายสินค้าออนไลน์ ประเภท E-Commerce อุปกรณ์เคร่ืองเขียน P จังโลลิ เหมาะสำหรับผู้ที่มีความสนใจเก่ียวกับ อปุ กรณเ์ คร่ืองเขียนไม่วา่ จะเป็นอุปกรณ์เคร่ืองเขยี น สำหรับการเรียนและสำนักงาน ผทู้ ส่ี นใจสามารถ เข้ามาเลือกซ้ือได้ตามใจชอบ ทั้งน้ีคณะผู้จัดทำ จึงจัดทำเว็บไซต์นี้ เพื่อให้ความสะดวกสบายแก่ผู้ท่ี สนใจอุปกรณ์เครอ่ื งเขียนและมีราคาถกู สามารถเลอื กซอ้ื สินค้าไดต้ ามความสะดวกสบายประหยัดเวลา หากโครงงานน้ีมีข้อผิดพลาดประการใด ทางคณะผู้จัดทำ ขออภัยไว้ ณ ท่ีน้ี และ จะดำเนินการพัฒนาผลงานทางด้านคอมพวิ เตอร์ใหพ้ ัฒนาใหด้ ีข้นึ ไป คณะผจู้ ัดทำ 22 กมุ ภาพันธ์ 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 ระบบงานในปัจจบุ นั 8 2.2 ปญั หาระบบงานในปจั จุบนั 8 2.3 การวเิ คราะห์และความต้องการของระบบใหม่ 32 2.4 ทฤษฎที ีเ่ ก่ยี วขอ้ ง 2.5 ระบบงานทเี่ กย่ี วขอ้ ง 33 บทที่ 3 การออกแบบระบบงานดว้ ยคอมพวิ เตอร์ 37 3.1 การออกแบบระบบงาน (Flow Chart) 38 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 การพัฒนาระบบขายสนิ คา้ ออนไลน์ ประเภทอุปกรณ์เคร่อื งเขียน P จังโลลิ 53 4.1 เครื่องมือและอปุ กรณท์ ่ใี ช้ 53 4.2 โปรแกรมทใ่ี ช้ในการพัฒนา 54 4.3 การติดตัง้ โปรแกรมและระบบ 60 4.4 วิธีการนำไปใช้งาน บทท่ี 5 สรุปผลการทำโครงงาน 67 5.1 สรุปผลโครงงาน 68 5.2 ปัญหาและอุปสรรคในการดำเนนิ งาน 69 5.3 สรปุ เวลาการทำงานจรงิ (Gantt Chart) 71 5.4 สรุปค่าใช้จ่ายในการดำเนินการจรงิ 72 บรรณานุกรม 73 ภาคผนวก 74 - ใบขอเสนออนุมตั ิโครงงานระบบคอมพิวเตอร์ (ATC.01) 75 - ใบขอเสนออาจารยท์ ี่ปรกึ ษาร่วมโครงงาน (ATC.02) 76 - ใบขอสอบโครงงานระบบคอมพิวเตอรธ์ รุ กจิ (ATC.03) คร้งั ท่ี 1 77 - ใบขอสอบโครงงานระบบคอมพวิ เตอรธ์ ุรกจิ (ATC.03) ครง้ั ท่ี 2 78 - ใบรายงานความคืบหน้าโครงงานระบบคอมพิวเตอร์ธรุ กิจ (ATC.04) 80 - ใบบันทกึ การเข้าพบทป่ี รึกษาโครงงาน (ATC.05) 91 - ใบขออนุญาตอาจารย์ทป่ี รกึ ษาร่วมจัดทำ เอกสารบทท่ี 4-5 (ATC.06) 92 - ใบรับรองการนำไปใชป้ ระโยชนไ์ ดจ้ รงิ (ATC.07) 96 ประวัติผูจ้ ดั ทำโครงงาน ฉ

สารบญั รปู หน้า 6 รปู ที่ 2.1 Flow chart ระบบงานปัจจบุ นั รูปที่ 2.2 ภาพแสดงวงจรของสีทเ่ี กิดจากการนําแม่สมี าผสมกนั 14 รปู ท่ี 2.3 สีพืน้ ฐานแม่สี รปู ที่ 2.4 สีเหลืองแกมเขียว สีเหลอื งแกมเขียว 14 รปู ท่ี 2.5 สนี ้ำเงนิ แกมม่วง 15 รปู ท่ี 2.5 สแี ดงแกมม่วง 15 รปู ท่ี 2.6 สแี ดงแกมม่วง 15 รปู ที่ 2.7 สีแดงแกมสม้ 15 รปู ที่ 2.8 สีเหลืองแกมสม้ 15 รปู ท่ี 2.9 สีน้ำาเงินแกมเขียว 15 รปู ท่ี 2.10 ผังการทํางานของ Flow chart 20 รปู ที่ 2.11 สญั ลกั ษณ์ระบบกระแสขอ้ มูล 22 รปู ท่ี 3.1 การออกแบบระบบงาน Flow Chart 23 รูปท่ี 3.2 FlowChart (การสมัครสมาชกิ ) 31 รูปที่ 3.3 FlowChart (การเขา้ สู่ระบบ) 32 รูปท่ี 3.4 FlowChart (การส่งั ซ้ือสนิ คา้ ) 33 รูปที่ 3.5 การออกแบบแผนภาพบริบท (Context Diagram) 34 รปู ที่ 3.6 Data Flow Diagram Level 0 35 รปู ที่ 3.7 Data Flow Diagram Level 1 36 รปู ท่ี 3.8 Data Flow Diagram Level 2 37 รูปที่ 3.9 Data Flow Diagram Level 3 38 รปู ท่ี 3.10 Data Flow Diagram Level 4 39 รูปที่ 3.11 Data Flow Diagram Level 5 40 รปู ท่ี 3.12 E-R Diagram ระบบขายสินคา้ ออนไลน์ 41 รปู ท่ี 3.13 การออกแบบผังโครงสร้างเว็บไซต์ (Site Map) 42 รปู ที่ 3.14 การออกแบบแผนภาพแนวความคิด (หนา้ หลกั ) 45 รปู ท่ี 3.15 การออกแบบแผนภาพแนวความคิด (หน้าเขา้ สรู่ ะบบ) 46 รูปที่ 3.16 การออกแบบแผนภาพแนวความคิด (ประเภทสินคา้ ) 46 รูปที่ 3.17 การออกแบบแผนภาพแนวความคดิ (หน้าสนิ คา้ ) 47 47 ช

สารบญั รูป (ต่อ) หน้า 50 รูปท่ี 4.1 ทำการดาวน์โหลด XAMPP 50 รูปที่ 4.2 ทำการติดตงั้ คลกิ Next 51 รปู ที่ 4.3 ทำการเลอื ก Apache / MySQL และคลกิ Next 51 รปู ท่ี 4.4 เลอื ก Path ในการติดต้งั XAMPP 52 รปู ที่ 4.5 คลิก Next 52 รูปที่ 4.6 คลิก Next (2) 53 รปู ท่ี 4.7 รอทำการติดตง้ั 53 รปู ท่ี 4.8 เม่อื ทำการติดต้ังเรียบรอ้ ยแลว้ ให้คลกิ ที่ Finish 54 รูปท่ี 4.9 เข้าไปท่ี Control Panel ของ XAMPP ทำการคลิก Start Apache และMySQL 54 รปู ท่ี 4.10 จากน้ันเข้าไปท่ี Phpmyadmin และ localhost 55 รูปท่ี 4.11 Code ต่างๆ ในการทำเว็บไซต์ให้เอามาไวท้ ่ี 56 C:\\xampp\\htdocs\\ 56 รูปท่ี 4.12 แสดงหนา้ เวบ็ ไซต์ 57 รูปที่ 4.13 หน้าแสดงการสมคั รสมาชิก 57 รปู ท่ี 4.14 หน้าแสดงการ Login เขา้ สหู่ น้าสมาชิก 58 รูปที่ 4.15 หนา้ แสดงการเป็นสมาชกิ 58 รปู ที่ 4.16 หน้าแสดงรายการสนิ คา้ 59 รปู ท่ี 4.17 หนา้ แสดงขอ้ มลู สินค้า 59 รปู ท่ี 4.18 หน้าแสดงตะกร้าสินคา้ รปู ที่ 4.19 หนา้ แสดงการยนื ยนั การสั่งซ้อื สินคา้ ซ

สารบัญตาราง หน้า 3 ตารางท่ี 1.1 แผนการดำเนินงาน (Gantt Chart) ตารางที่ 1.2 งบประมาณการดำเนินงาน 5 ตารางท่ี 2.1 ความรู้สึกของสี ตารางท่ี 3.1 ตารางข้อมลู สมาชิก (tbl_member) 17 ตารางที่ 3.2 ตารางขอ้ มูลสินค้า (tbl_product) 43 ตารางท่ี 3.3 ตารางขอ้ มูลรายละเอียดคำสงั่ ซ้ือ ((tbl_order) 43 ตารางที่ 3.4 ตารางข้อมูลใบส่งั ซอ้ื (tbl_sales) 44 ตารางที่ 5.1 แสดงขนาดของโปรแกรม 44 ตารางท่ี 5.2 สรุปเวลาการดำเนนิ งานจริง 60 ตารางท่ี 5.3 สรปุ ค่าใชจ้ ่ายในการดำเนนิ งานจรงิ 62 63 ฌ

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

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

1.5 แผนการดำเนินงาน (Gantt Chart) รายการ มิถุนายน 65 กรกฎาคม 65 สิงหาคม 65 กันยายน 65 ระยะเวลา ภาคเรียนท่ี 1 1234123412341234 เสนอหวั ขอ้ ATC.01 5-10 มิ.ย. 65 ประกาศผลรอบที่ 1 13 ม.ิ ย. 65 เสนอหัวขอ้ รอบท่ี 2 14-16 มิ.ย 65 ประกาศผล รอบท่ี 2 17 มิ.ย. 65 เสนออาจารย์ทป่ี รกึ ษา 13 -30 ร่วม ATC.02 มิถุนายน 65 ส่งเอกสารบทท่ี 1 14- ม.ิ ย. 65 สมบรู ณ์ ถึง 8 ก.ค. 65 อมรมโครงการ 19 ม.ิ ย. 65 9-31 ก.ค. 65 ส่งเอกสารบทที่ 2 สมบูรณ์ 1-31 ส.ค. 65 สง่ เอกสาร บทที่ 3 5-23 ก.ย. 65 สมบูรณ์ สอบนำเสนอโครงงาน 26-30 ก.ย. 65 ATC.03 ครั้งท่ี 1 สง่ เอกสารโครงงาน ตลุ าคม 65 รายละเอยี ดในการเข้าพบที่ปรกึ ษาร่วม ปก ,บทที่ 1-3 บรรณานุกรม 1234 ATC 01-05 โครงร่างชน้ิ งาน ออกแบบโลโก้ ชอ่ื แบรนด์ 3-9 ต.ค. 65 ติดตามความคบื หนา้ โปรแกรม อาจารยท์ ่ีปรกึ ษาร่วม การลงเนอื้ หา จัดวางรปู ภาพ สีที่ใช้ 10-16 ต.ค. 65 ส่งความคบื หน้าโปรแกรม 20 % การเช่ือมโยง การต้ังช่ือ 17-23 ต.ค. 65 สง่ ความคบื หนา้ โปรแกรม 40 % ระบบเรม่ิ ใชง้ านได้ 24-31 ต.ค. 65 ส่งความคบื หนา้ โปรแกรม 60 % ส่งความคบื หน้าโปรแกรม 80 % ตารางท่ี 1.1 แผนการดำเนนิ งาน (Gantt Chart) 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 20 ธ.ค. - สง่ เอกสาร บทที่ 4 สมบูรณ์ 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.2 แผนการดำเนนิ งาน (Gantt Chart) (ตอ่ ) 1.6 เครื่องมอื ท่ใี ชพ้ ัฒนาโปรแกรม 1. โปรแกรม Microsoft Visual Studio Code ใช้ออกแบบหน้าเว็บไซต์ 2. โปรแกรม XAMPP Control Panel ใชใ้ นการสรา้ งเว็บเซริ ์ฟเวอรส์ ำเรจ็ รปู 3. โปรแกรม phpMyAdmin ใช้ในการจัดการฐานขอ้ มลู MySQL 4

1.7 งบประมาณการดำเนนิ งาน ลำดบั รายการ จำนวน ราคา (บาท) 1 กระดาษ A4 2 รีม 250 2 ตลับหมกึ พมิ พ์ 1 ตลบั 500 3 คา่ เข้าเลม่ 1 เล่ม 250 รวมเป็นเงนิ 1,000 ตารางท่ี 1.3 งบประมาณการดำเนินงาน 5

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

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

2.3 วิเคราะหแ์ ละความต้องการของระบบใหม่ 1. ลกู คา้ ทกุ คนจะสามารถเขา้ มาชมสนิ ค้า ชมหน้าเว็บไซต์ได้ 2. สามารถเลือกดูสินค้าและรายละเอียดสินค้าได้แม้ไม่ได้เป็นสมาชิก แต่ถ้าหากต้องการ ส่งั ซื้อสินคา้ จะต้องทาํ การสมคั รสมาชิก เพอื่ เก็บข้อมลู สาํ หรบั การจดั ส่งสนิ ค้า 3. ระบบงานมคี วามสะดวกในการใชง้ าน ไมซ่ บั ซอ้ นยงุ่ ยาก และมปี ระสทิ ธภิ าพ 4. การนําเสนอขอ้ มูลสนิ ค้ามคี วามละเอยี ด ชัดเจน และถกู ต้อง 5. มีการแบ่งหมวดหมู่สินค้าอย่างชัดเจน เพื่อให้การค้นหาและเลือกดูสินค้านั้นง่ายและ รวดเรว็ ทําให้ลูกค้าไมเ่ กดิ ความรําคาญใจในการเลือกซอื้ สินคา้ 6. มีระบบที่สามารถ เพิ่ม ลบ แก้ไขข้อมูลสินค้า เพื่อความสะดวกต่อการจัดการสินค้าของ ผขู้ าย 2.4 ทฤษฎีทเ่ี กี่ยวข้อง การพัฒนาระบบอินเทอร์เน็ตให้สามารถซื้อขายสินค้าผ่านทางเว็บไซต์ที่เรียกว่าการค้า อิเล็กทรอนิกส์หรือ E-Commerce ซึ่งช่วยลดขั้นตอนและความยุ่งยากเกี่ยวกับการซื้อขายสินค้าได้ อย่างยอดเยี่ยม ระบบ E-Commerce ได้เข้ามาแทนที่วิธีการซื้อขายสินค้าในรูปแบบเก่า ๆ ภายใน ระยะเวลาอันรวดเร็ว ในขณะเดียวกันบริษัทผู้พัฒนาซอฟต์แวร์ก็เร่งพัฒนาซอฟต์แวร์ให้มี ความสามารถในการสร้างเว็บไซต์ รวมทั้งสร้างระบบ E-Commerce ให้ง่ายต่อการใช้งานมากข้ึน ลักษณะขั้นตอนการสั่งซื้อสินค้าจากเว็บไซต์ที่พบเห็นทั่วไปนั้นจะมรี ูปแบบและวิธีการเดียวกัน โดย สามารถแยกออกได้เปน็ 2 ส่วนหลกั คอื หลกั การออกแบบเวบ็ ไซต์ 1. เว็บเพจหน้าร้าน (Store Front) คือ หน้าเว็บเพจสําหรับใช้ในการสั่งซื้อสินค้าหรือบริการ ตา่ ง ๆ จากรา้ นคา้ 2. เว็บเพจหลังร้าน (Back Office) คือเว็บเพจที่ใช้เฉพาะบุคลากรของร้านค้า เพื่อกําหนด รายละเอยี ดตา่ งที่เกี่ยวกับตวั สินค้าหน้าเว็บและร้านค้าต่อมาได้มกี ารพัฒนาระบบต่าง ๆ ขึ้นมากมาย ที่นํามาใช้ทางธุรกรรมต่าง ๆ รวมทั้งการขายสินค้าออนไลน์ซึ่งในปัจจุบันได้มีการพัฒนาระบบหรือ โปรแกรมท่ีเขา้ มาช่วยในการสนับสนุนการขายสินค้าให้มีประสิทธภิ าพมากขน้ึ ปัจจุบันมีการทําธุรกิจ ผ่านระบบเครือขา่ ยอินเทอร์เน็ตเกิดขนึ้ มากมายโดยมรี ปู แบบต่าง ๆ ดงั น้ี - การประกาศซื้อขายเป็นรูปแบบเว็บไซต์ E-Commerce ที่เปิดโอกาสให้ผู้ที่สนใจประกาศ ความต้องการซื้อขายสินค้าของตนได้ภายในเวบ็ ไซต์โดยเว็บไซต์จะทาํ หน้าที่เหมือนกระดานข่าวและ ตัวกลางในการแสดงขอ้ มูลสินค้าต่าง ๆ และหากมีคนสนใจสินค้าที่ประกาศไวท้ ี่สามารถติดต่อไปยัง ผู้ประกาศไดท้ นั ทีจากขอ้ มลู ทป่ี ระกาศอยู่ภายในเวบ็ ไซต์ - เว็บไซตแ์ คตตาลอ็ กสนิ ค้าออนไลนเ์ ป็นเว็บไซต์ทมี่ รี ายละเอียดแสดงข้อมูลสนิ ค้ารูปภาพ และ รายละเอียดต่าง ๆ รวมทั้งข้อมูลการติดต่อในกรณีที่สนใจจะซื้อสินค้าแต่จะไม่มีระบบการชําระเงิน หรอื สัง่ ซื้อสนิ คา้ 8

- รา้ นค้าออนไลนเ์ ป็นเวบ็ ไซต์ E-Commerce ที่มีทง้ั ระบบการจัดการสนิ ค้าระบบตะกร้าสินค้า Shopping Cart ระบบการชําระเงินรวมถงึ การขนส่งสนิ ค้าครบสมบรู ณแ์ บบทําใหผ้ ู้ซื้อสามารถสั่งซ้ือ สนิ คา้ ทาํ การชําระเงินผ่านเว็บไซต์ได้ทันที- การประมลู สนิ คา้ เปน็ เว็บไซต์ E-Commerce ที่มีรูปแบบ ของการนําสินค้าไปประมลู ขายกนั โดยจะเป็นการแข่งขันในการเสนอราคาสนิ ค้าหากผู้ใดเสนอราคา สนิ ค้าไดส้ งู สุดในชว่ งเวลาที่กําหนดก็จะชนะการประมูล และสามารถซ้ือสินค้าชิน้ นั้นไปได้ด้วยราคาท่ี ไดก้ าํ หนดไว้- ประวตั ิความเป็นมาของอินเทอรเ์ นต็ (Internet) อินเทอรเ์ นต็ เป็นเครือข่ายคอมพวิ เตอร์ ที่ก่อตั้งโดยกระทรวงกลาโหมของประเทศสหรัฐอเมริกา ซึ่งเป็นการนําคอมพิวเตอร์มาเชื่อมต่อกัน มีชื่อ สมัยนั้นว่า อาร์พาเน็ต (ARPANET) โดยการเชื่อมต่อคอมพิวเตอร์จํานวนมากเข้าด้วยกัน ก่อให้เกิดการแลกเปลี่ยน และการสื่อสารที่เป็นประโยชน์อย่างมหาศาล ส่งผลให้อาร์พาเน็ตเติบโต อย่างรวดเร็ว เพราะมอี งค์กรทางทหารและมหาวทิ ยาลยั นําเคร่ืองคอมพวิ เตอรเ์ ช่ือมต่อกับเครือข่าย เป็นจาํ นวนมากในปี พ.ศ.2532 มเี ครอื่ งคอมพวิ เตอร์เช่ือมตอ่ กบั เครือข่ายมากกว่า 10,000เครื่องทั่ว โลก และได้ถูกขนานนามใหม่ว่า อินเทอร์เนต็ การสื่อสารข้อมูลบนอินเทอร์เน็ตจะมีขอ้ กําหนดที่เป็น มาตรฐาน หรือที่เรียกว่า โพรโทคอล(Protocol) โดยพื้นฐานของการสื่อสารข้อมูลอินเทอรเ์ น็ตจะใช้ โครงสร้างแบบ TCP/IP ซ่งึ เปน็ มาตรฐานท่ีวา่ ดว้ ยการกําหนดวิธกี ารติดต่อส่ือสารระหวา่ งคอมพิวเตอร์ ทําให้คอมพิวเตอร์ภายในระบบเครือข่ายอินเทอร์เน็ต สามารถเชื่อมต่อเข้าหากันและติดต่อสื่อสาร แลกเปล่ียนข้อมลู กันได้ หลักการออกแบบเวบ็ ไซต์ เว็บไซต์เป็นสื่อที่ได้รับความนิยมอย่ามากบนอินเทอร์เน็ต ซึ่งเว็บไซต์เป็นสื่อที่อยู่ใน ความควบคุมของผู้ใช้โดยสมบูรณ์ กล่าวคือ ผู้ใช้สามารถตัดสนิ ใจเลือกได้ว่าจะดูเว็บไซตใ์ ดและจะไม่ เลือกดูเว็บไซต์ใด ได้ตามต้องการ จึงทําให้ผู้ใช้ไม่มีความอดทนต่ออปุ สรรคและปัญหาที่เกดิ จากการ ออกแบบเว็บไซต์ผิดพลาดถ้าผู้ใช้เห็นว่าเว็บที่กําลังดูอยู่นั้นไม่มีประโยชน์ต่อตัวเขา หรือไม่เข้าใจว่า เว็บไซต์น้ีจะใช้งานอย่างไร เขาก็สามารถที่จะเปลี่ยนไปดูเว็บไซต์อื่น ๆ ได้อย่างรวดเร็ว เนื่องจากใน ปัจจุบันมีเว็บไซต์อยู่มากมาย และยังมีเว็บไซต์ที่เกิดขึ้นใหม่ ๆ ทุกวัน ผู้ใช้จึงมีทางเลือกมากขึ้น และ สามารถเปรียบเทียบคุณภาพของเว็บไซด์ต่าง ๆ ได้เองเว็บไซด์ที่ได้รับกาออกแบบอย่างสวยงาม มี การใชง้ านที่สะดวก ย่อมได้รับความสนใจจากผู้ใช้ มากกว่าเวบ็ ไซดท์ ่ีดสู ับสนวุ่นวาย มีข้อมูลมากมาย แตห่ าอะไรไม่เจอ นอกจากนีย้ ังใชเ้ วลาในการแสดงผลแต่ละหน้านานเกินไป ซง่ึ ปัญหาเหลา่ นล้ี ้วนเป็น ผลมาจากการออกแบบเว็บไซด์ไม่ดีทั้งสิ้นดังนั้น การออกแบบเว็บไซด์จึงเป็นกระบวนการสําคัญใน การสรา้ งเวบ็ ไซด์ให้ประทับใจผใู้ ช้ ทําใหเ้ ขาอยากกลบั เข้ามาเวบ็ ไซดเ์ ดมิ อกี ในอนาคต ซง่ึ นอกจากต้อง พฒั นาเวบ็ ไซด์ทด่ี มี ีประโยชน์แล้ว ยังตอ้ งคาํ นงึ ถงึ การแขง่ ขันกบั เวบ็ ไซด์อื่น ๆ อกี ดว้ ย 9

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

6. คณุ ภาพของสง่ิ ทป่ี รากฏให้เห็นในเวบ็ ไซต์ (Visual Appeal) ลกั ษณะทน่ี ่าสนใจของเว็บไซต์ นั้น ขึ้นอยู่กับความชอบส่วนบคุ คลเป็นสําคัญ แต่โดยรวมแล้วก็สามารถ สรุปได้ว่าเว็บไซตท์ ี่น่าสนใจ นั้นส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอย หรือขอบขั้นบันได้ให้เห็น ชนดิ ตัวอกั ษรอา่ นงา่ ยสบายตา มีการเลือกใช้โทนสีทเี่ ข้ากนั อยา่ งสวยงาม เปน็ ตน้ 7. ความสะดวกของการใช้ในสภาพตา่ ง ๆ (Compatibility) การใชง้ านของเว็บไซต์น้นั ไม่ควรมี ขอบจาํ กดั กล่าวคอื ตอ้ งสามารถใชง้ านได้ดีในสภาพแวดล้อมที่ หลากหลาย ไมม่ ีการบังคับให้ผู้ใช้ต้อง ติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควร เป็นเว็บที่แสดงผลได้ดีในทุก ระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหาก เป็นเว็บไซตท์ ี่มีผู้ใช้บรกิ าร มากและกลุ่มเปา้ หมายหลากหลายควรใหค้ วามสาํ คญั กับเรอื่ งนี้ให้มาก 8. ความคงที่ในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มี คุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสําคัญกับการ ออกแบบเว็บไซต์เป็นอย่างมาก ต้อง ออกแบบวางแผนและเรยี บเรียงเนือ้ หาอย่างรอบคอบ ถ้าเว็บที่ จัดทําขึ้นอย่างลวก ๆ ไม่มีมาตรฐาน การออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจ ส่งผลให้เกิดปัญหาและทําให้ผู้ใช้ หมดความเช่ือถือ 9. ความคงที่ของการทํางาน (Function Stability) ระบบการทํางานต่าง ๆ ในเว็บไซต์ควรมี ความถูกต้องแนน่ อน ซง่ึ ตอ้ งไดร้ ับการออกแบบสร้างสรรค์ และตรวจสอบอยู่เสมอ ตวั อย่างเช่น ลิงค์ ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ ถูกต้องหรือไม่ เพราะเว็บไซต์อื่นอาจมี การเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็นปัญหาที่สร้าง ความราํ คาญกบั ผ้ใู ช้เป็นอย่างมาก การออกแบบเวบ็ ไซต์ การออกแบบเว็บไซต์นั้นประกอบด้วยกระบวนการต่าง ๆ มากมาย เช่น การออกแบบ โครงสร้าง ลักษณะหน้าตา หรือการเขียนโปรแกรม แต่มีหลายคนที่พัฒนาเว็บไซต์ โดยขาดการ วางแผนและทํางานไม่เป็นระบบ ตัวอย่างเช่น การลงมือออกแบบโดยการใช้โปรแกรมช่วยสร้างเวบ็ เน้ือหาและรปู แบบก็เป็นไปตามท่นี กึ ขึ้นได้ขณะนน้ั และเมื่อเหน็ วา่ ดดู แี ล้วกเ็ ปิดตัวเลย ทําให้เว็บนั้นมี เปา้ หมายและแนวทางที่ไมแ่ น่นอน ผลลพั ธท์ ไี่ ดจ้ ึงเสี่ยงกบั ความลม้ เหลวค่อนข้างมาก ความลม้ เหลวท่ี พบเห็นได้ทั่วไป ได้แก่ เว็บที่แสดงข้อความว่าอยู่ระหว่างการก่อสร้าง (Under Construction หรือ Coming Soon) ซึ่งแสดงให้เห็นถึงการขาดการวางแผนที่ดีบางเว็บถือได้ว่าตาย ไปแล้ว เนื่องจาก ข้อมูลไม่ทนั สมัย ขาดการพัฒนาปรับปรุงเทคโนโลยีล้าสมัย ลิงค์ผิดพลาด สิ่งเหล่านี้ แสดงให้เห็นถงึ การขาดการดูแล ตรวจสอบและพฒั นาให้ทันสมยั อยู่เสมอ การออกแบบเว็บไซต์อย่างถกู ต้องจะชว่ ย ลดความผิดพลาดเหล่านี้ และช่วยลดความเสี่ยงที่ จะทําให้เว็บประสบความล้มเหลว การออกแบบ เว็บไซต์ที่ดีต้องอาศัยการออกแบบและจัดระบบข้อมูล อย่างเหมาะสมกระบวนการแรกของการ ออกแบบเว็บไซต์คือการกําหนดเป้าหมายของเว็บไซต์กําหนดกลุ่ม ผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล 11

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

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

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

รูปที่ 2.2 ภาพแสดงวงจรของสที เี่ กดิ จากการนําแมส่ ีมาผสมกนั การเกิดสดี ังภาพ เกิดจากการนาํ เอาแม่สีมาผสมกัน ในอตั ราส่วนตา่ ง ๆ กนั ซ่ึงสรปุ ได้ดังน้ี สี ข้ันท่ี 1 (Primary Color) คือสีพืน้ ฐานมีแมส่ ี 3 สี รูปท่ี 2.3 ภาพแสดงวงจรของสที ี่เกิดจากการนำแมส่ มี าผสมกัน สีขั้นที่ 2 (Binary Color) คือสีที่เกิดจากการนําเอาสีขัน้ ที่ 1 หรือแม่สีมาผสมกันในอัตราส่วนเทา่ กนั จะทำใหเ้ กิดสีใหม่ 3 สไี ด้แก่ 1. สีเขียว เกิดจากการนําเอา สีเหลอื ง กับ สีน้ำเงนิ มาผสมกนั ในอตั ราสว่ นเทา่ ๆ กนั 2. สสี ม้ เกิดจากการนําเอา สีเหลือง กบั สีแดง มาผสมกันในอัตราส่วนที่เท่า ๆ กัน 3. สีม่วง เกดิ จากการนําเอา สนี ำ้ เงนิ กบั สีแดง มาผสมกนั ในอัตราส่วนทเ่ี ท่า ๆ กัน สีขั้นที่ 3 (Intermediate Color) คือ สีที่เกิดจากการผสมกันระหวา่ งสีของแม่สีกีบสขี ้ันที่ 2 จะเกิดสี ขึ้นอกี 6 สไี ดแ้ ก่ รปู ท่ี 2.4 สเี หลืองแกมเขยี ว สีเหลืองแกมเขียว เกดิ จาก การผสมกันระหวา่ งสีเหลอื งกับสเี ขียวอยา่ งละเท่าๆ 15

รูปท่ี 2.5 สีนำ้ เงนิ แกมม่วง สีนำ้ เงินแกมมว่ ง เกิดจากการผสมกนั ระหว่างสีนำ้ เงินกับสมี ว่ งอยา่ งละเท่า ๆ กัน รูปที่ 2.6 สีแดงแกมมว่ ง สแี ดงแกมมว่ ง เกิดจากการผสมกนั ระหว่างสแี ดงกบั สีมว่ งอย่างละเทา่ ๆ กนั รูปท่ี 2.7 สีแดงแกมส้ม สแี ดงแกมส้ม เกิดจากการผสมกันระหว่างสีแดงกับสสี ม้ อยา่ งละเท่า ๆ กนั รปู ท่ี 2.8 สีเหลืองแกมสม้ สเี หลอื งแกมสม้ เกดิ จากการผสมกันระหว่างสีเหลืองกับสีส้มอยา่ งละเทา่ ๆ กัน รปู ที่ 2.9 สนี ้ำเงินแกมเขยี ว สนี ้ำเงนิ แกมเขียวเกดิ จากการผสมกันระหวา่ งสีน้ำเงนิ กับสีเขยี วอยา่ งละเทา่ ๆ กัน 16

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

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

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

- เว็บเพจหน้าร้าน (Store Front) คือหนา้ เวบ็ เพจสำหรับใชใ้ นการสรา้ งซ้ือสินคา้ หรอื บริการ ต่าง ๆ - เว็บเพจหลังร้าน (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 คน เปน็ ต้นการจดั เก็บ แฟม้ ขอ้ มูล หลาย ๆ 20

แฟ้มข้อมูลไว้ภายใต้ระบบเดียวกนั เรยี กวา่ ฐานข้อมลู หรอื Database เชน่ เก็บแฟม้ ข้อมูลนักเรียน อาจารย์ วชิ าทเี่ ปิดสอน เป็นต้นการเข้าถึงขอ้ มูลในฐานขอ้ มูลจงึ จําเปน็ ต้องมีระบบการจดั การ ฐานข้อมูลมาช่วยเรยี กวา่ database management System (DBMS) ซ่งึ จะช่วยให้ผู้ใช้ สามารถ จดั การ กบั ขอ้ มูล ตามความตอ้ งการไดใ้ นหนว่ ยงานใหญ่ๆอาจมีฐานข้อมูลมากกว่า 1 ฐานข้อมูลเช่น ฐานขอ้ มูลบุคลากร ฐานข้อมูลลกู ค้า ฐานข้อมูลสินค้า เปน็ ตน้ สาระสำคญั ฐานข้อมูลเป็นการจัดเก็บข้อมูลอย่างเป็นระบบ ทำให้ผู้ใช้สามารถใช้ข้อมูลที่เกี่ยวข้องใน ระบบงานต่าง ๆ ร่วมกันได้ โดยที่จะไม่เกิดความซ้ำซ้อนของข้อมูล และยังสามารถหลีกเลี่ยง ความขดั แยง้ ของข้อมูลด้วย อกี ท้งั ขอ้ มูลในระบบกจ็ ะถกู ตอ้ งเชอ่ื ถือได้ และเป็นมาตรฐานเดียวกัน โดย จะมี การกำหนดระบบความปลอดภัยของข้อมูลขึ้นนับได้ว่าปัจจุบันเป็นยุคของสารสนเทศ เป็นที่ยอมรับ กันว่า สารสนเทศเป็นข้อมูลที่ผ่านการกลั่นกรองอย่างเหมาะสม สามารถนำมาใช้ ประโยชน์ อย่าง มากมาย ไม่ว่าจะเป็นการนำมาใช้งานด้านธุรกิจ การบริหาร และกิจการอื่น ๆ องค์กรทมี่ ขี อ้ มูล ปรมิ าณมาก ๆ จะพบความยุ่งยากลําบากในการจดั เกบ็ ข้อมลู ตลอดจนการนําข้อมูล ที่ต้องการออกมา ใช้ให้ทันต่อเหตุการณ์ ดังนั้นคอมพิวเตอร์จึงถูกนำมาใช้เป็นเครื่องมือช่วยในการ จดั เก็บขอ้ มลู การ ประมวลผลขอ้ มูล ซงึ่ ทำให้ระบบการจดั เก็บข้อมูลเป็นไปได้สะดวก ท้ังน้ีโปรแกรม แต่ ละ โปรแกรม จะต้องสร้างวิธีควบคุมและจัดการกับข้อมูลขึ้นเอง ฐานข้อมูลจึงเข้ามามีบทบาท สำคัญ อย่างมาก โดยเฉพาะระบบงานต่าง ๆ ที่ใช้คอมพิวเตอร์ การออกแบบและพัฒนาระบบ ฐานข้อมูล จึงต้อง คำนึงถึงการควบคุมและการจัดการความถูกต้องตลอดจนประสิทธิภาพในการ เรียกใช้ข้อมลู ดว้ ย ระบบจัดการฐานข้อมูลซอฟต์แวร์สำหรับจัดการฐานข้อมูลนั้น โดยทั่วไปเรียกว่า จัดการฐานข้อมูล หรือ ดีบีเอ็มเอส (DBMS - Database Management System) สถาปัตยกรรม ซอฟตแ์ วรข์ องดีบีเอม็ เอสอาจมไี ด้หลายแบบ เชน่ สำหรบั ฐานข้อมลู ขนาดเลก็ ทม่ี ผี ู้ใช้คนเดียวบ่อยครั้ง ที่หน้าหมดจะจัดการดว้ ยโปรแกรมเพียงโปรแกรมเดยี ว ส่วนฐานข้อมูลขนาดใหญ่ทมี่ ีผใู้ ช้ จำนวนมาก นัน้ ปกติจะประกอบดว้ ยโปรแกรมหลายโปรแกรมด้วยกนั และโดยทว่ั ไปสว่ นใหญจ่ ะใชส้ ถาปตั ยกรรม แบบรบั -ให้บริการ (client-server) โปรแกรมส่วนหนา้ (front-end) ของดบี เี อ็มเอส (ไดแ้ ก่ โปรแกรม รบั บริการ) จะเกีย่ วขอ้ งเฉพาะการนําเข้าขอ้ มลู การตรวจสอบ เปน็ สำคญั ในขณะท่ีโปรแกรมส่วนหลัง (back-end) ซึ่งได้แก่ โปรแกรมให้บริการจะเป็นชุดของโปรแกรมที่ดำเนินการเกี่ยวกับการควบคุม การเก็บข้อมูล, และการตอบสนองการร้องขอจากโปรแกรมส่วนหน้าโดยปกติแล้วการค้นหาและการ เรียงลำดับจะดำเนินการโดยโปรแกรมให้บริการรูปแบบของระบบฐานข้อมูล มีหลากหลายรูปแบบ ดว้ ยกันนับตงั้ แต่การใชต้ ารางอย่างง่ายที่เก็บในแฟ้มข้อมูลแฟ้มเคียวไปจนกระทงั่ ฐานข้อมูลขนาดใหญ่ มากท่มี รี ะเบียนหลายล้านระเบียน ซงึ่ เก็บในห้องที่เต็มไปด้วยดิสก์ ไดรฟ์ หรอื อปุ กรณห์ น่วยเก็บข้อมลู อิเล็กทรอนิกสร์ อบข้าง(peripheral) อ่ืน 21

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

สัญลักษณ์ในการออกแบบระบบฐานข้อมูล การรวบรวมและวเิ คราะห์ความตอ้ งการในการใช้ขอ้ มูล 1. การเลือกระบบจัดการฐานขอ้ มูล 2. การออกแบบฐานข้อมลู ในระดับแนวคดิ 3. การนาํ ฐานขอ้ มลู ท่ีออกแบบในระดบั แนวคดิ เข้าสู่ระบบจัดการฐานขอ้ มูล 4. การออกแบบฐานขอ้ มลู ในระดับกายภาพ ตารางที่ 2.2 แสดงสญั ลกั ษณ์ในการออกแบบระบบฐานขอ้ มูล ผงั งาน FlowChart หรือ ผังงาน หมายถึงแผนภาพแสดงลำดับการเคลื่อนไหวหรือการกระทำของ คนหรือสิ่งที่เกี่ยวข้องในระบบต่างๆ ข้อดีของ FlowChart คือการแสดงภาพรวมและช่วยจัดลำดับ ขัน้ ตอนการทำงานในระบบได้อย่างเปน็ ระเบยี บและถูกต้อง เพือ่ เพิ่มประสิทธิภาพในการทำงาน ทว่ั ไป แล้ว ประเภทของ Flow Chart ถูกแบ่งออกมาได้สี่รูปแบบดังนี้ผังงานเอกสาร (Documents FlowChart) - หมายถึงการเคลื่อนไหวของเอกสารในระบบผังงานข้อมูล (Data FlowChart) – หมายถึง การเคลื่อนไหวของข้อมูลในระบบ ผังงานระบบ (System FlowChart) – หมายถึงการ เคลื่อนไหว ของสิ่งของและทรัพยากรในระบบ ผังงานโปรแกรม (Program FlowChart) – หมายถึง ควบคุมการ ตัดสินใจโปรแกรมในระบบผังงาน FlowChart จะถูกแสดงในรูปแบบ “กล่อง” หรือ “สัญลักษณ์” (block) ในรูปทรงต่าง ๆ เพื่อแทน กิจกรรมและการตัดสินใจในระบบ ซึ่ง FlowChart สามารถถูกใช้ เพอื่ วิเคราะห์ ออกแบบ จัดเก็บ ข้อมลู หรอื บรหิ ารกระบวนการหลายรูปแบบในหลาย อุตสาหกรรมในส่วนถัดไปของบทความ ผมจะ เขียนอธิบายความหมายของ “กล่อง” หรือ “สัญลักษณ”์ ตา่ ง ๆ และ วิธีการใชง้ านทถ่ี ูกต้องให้หนา้ อก การ ทำใหเ้ ห็นภาพ” คือขอ้ ดหี ลักของการ 23

เขยี นผังงาน เราจะเหน็ ได้ ว่ากระบวนการทำงานตา่ ง ๆ จะ ประกอบไปด้วยกจิ กรรมหรือขั้นตอนย่อย มากมาย แต่ละขั้นตอนก็ ตอ้ งการขอ้ มูลและทรพั ยากรที่แตกตา่ ง เพราะฉะนัน้ หากเรามี FlowChart เรากส็ ามารถหา จุดอ่อน จดุ บอด หรือปัญหาคอขวด (Bottleneck) เพ่ือพัฒนาระบบของเราได้ปัญหา หลกั ของการออกแบบ ระบบทำงานก็คอื การทำงาน ซ้ำ ทำงานชักช้า ทำงานหลายขัน้ ตอนเกิดจําเป็น โดยเฉพาะในระบบทม่ี ี คน ทรัพยากร หรอื กระบวนการเยอะ ซ่งึ ส่วนมากหากจะเกิดจากการที่เราใส่ ใจกระบวนการ เฉพาะ จุด” มากเกินไป จน ลืมดูภาพรวมของทั้งหมดในส่วนนี้ การพัฒนาและ ออกแบบกระบวนการทำงานก็ มีเครือ่ งมืออยหู่ ลาย แบบ ผมแนะนําให้ลองอ่านบทความเหล่าน้ีดูนะ ครับ 5ส คืออะไร และ Design Thinking กับการคิด เชิงออกแบบข้อเสียและข้อจํากัดของ FlowChart ในบทความสว่ นท่ีแลว้ เรา เหน็ แล้วว่า FlowChart นั้นสามารถใช้ทำประโยชน์ให้กับการ ออกแบบระบบ เพิ่มประสิทธิภาพการ ทำงานได้อย่างไรบ้าง อย่างไรก็ตามก่อนที่เราจะเริ่มศึกษา วิธีการเขียนผังงาน FlowChart ผมก็ อยากจะแนะนําข้อเสียและ ข้อจํากัดของ FlowChart ด้วย ข้อเสียแรกก็คือ FlowChart ไม่เหมาะ กับระบบการตัดสินใจที่ ซับซ้อนมากเกินไป ซึ่งเราจะเห็นได้ บ่อยในการออกแบบระบบการตัดสินใจ ของโปรแกรมคอมพิวเตอร์ ยกตัวอย่างเช่นถ้าคุณมีระบบท่ี ต้องวิเคราะห์ 100 ปัจจยั เพ่อื เลือก ระหวา่ งการตัดสินใจ 50 อยา่ ง การวาดแบบ FlowChart ออกมาให้มนุษย์เข้าใจได้ก็ทําได้ยาก ใน ระบบที่ซับซ้อนแบบนี้ การวาด แบบ FlowChart ออกมาก็คงใช้เวลานานไม่น้อย และการที่เราจะ กลับมาแก้ FlowChart ภายหลัง เมื่อเรามีข้อมูลเพิ่มเติมก็คงใช้เวลามากไม่แพ้กัน พูดง่ายๆก็คือใน กรณีที่เรามีรายละเอียด เยอะมาก ๆ การออกแบบระบบใหเ้ ขา้ ใจไดง้ ่ายก็เปน็ ขอ้ จํากดั ของการวาดผงั งาน ขอ้ เสยี อีกอย่างหน่ึง ก็คือ การ จัดเก็บข้อมูลสำหรับผู้ใชจ้ ำนวนมาก หมายถึงว่ารูปภาพผงั งานที่ถูก ออกแบบมา จะแสดง ถึงเกณฑก์ าร ตดั สินใจและขั้นตอนกิจกรรมต่าง ๆ เชน่ ถ้าใชใ่ หท้ ำอยา่ งนึง ถา้ ไมใ่ ช่ให้ทำอีกอย่าง หรอื การแสดงการ กระทำที่น้อยกว่า เท่ากับ หรือมากกว่าตัวเลขใดตัวเลขหนึง่ ในกรณีนี้หากเป็นการใช้ งานระยะส้ัน หรอื มีผูใ้ ช้งานและออกแบบงานไมก่ ี่คน ปญั หากค็ งไมไ่ ด้มีอะไร มาก แตถ่ ้าคุณมีผู้ใช้งาน ออกแบบงาน หลกั รอ้ ยหรอื พันคน การกลบั มาแก้ไขข้อมลู FlowChart ภายหลงั กท็ ำได้ยาก ซ่งึ เราจะ เห็นไดบ้ ่อยใน องคก์ รใหญ่ๆอย่าง Microsoft หรือ Facebook ที่มีการ ออกแบบระบบหลังบา้ นท่ไี ม่มี ใครรู้ว่า “ทำ อะไรได้” และ “ต้องแก้ไขยังไง? (เรียกว่า Legacy Code) ซึ่งส่วนมากการแก้ปัญหา “การจัดเก็บข้อมูล * ก็อยู่การสร้างวินัยและระเบียบของการทำงาน แต่ โดยรวมแล้ว ยิ่งองค์กรมี ขนาดใหญ่ การสื่อสารใน องค์กรก็จะมีประสิทธิภาพน้อยลง และ FlowChart ก็เป็นตัวอย่างที่ดี ข้อเสียและข้อจํากัดของ Flow Chart ที่ผมอธิบายไว้ไม่ได้เป็นข้อเสียของ FlowChart โดยตรง แต่ เป็นปัญหาที่ทำให้ประสิทธิภาพการทำงานนอ้ ยลงเมื่ออยู่ในบางสถานการณ์ ในส่วนถัดไปเราจะมาดู กันเรื่องวิธีการเขียนผังงาน Flow Chart ผมเสนอให้ทุกคนลองเขียน “FlowChart ของการเลือก กรณีใช้ FlowChart” ดเู ล่น ๆ กไ็ ด้ 24

การเขยี นผังงาน Flow Chart ในสมัยนี้ ถึงแม้ว่าเราจะสามารถวาด Flow Chart ด้วยมือได้ แต่องค์กรส่วนมากก็หนั มาใช้ โปรแกรมตา่ ง ๆ เพอ่ื ชว่ ยในการเขยี น Flow Chart ใหเ้ ร็วข้ึน มีประสทิ ธภิ าพไดม้ ากขึน้ ได้ เพราะการ ออกแบบระบบทำงานก็เปน็ แค่ขั้นตอนแรก การเขยี นผังงาน Flow Chart ให้ใช้งานไดจ้ รงิ กต็ ้องคํานึง ด้วยว่า “คนอื่นจะอ่านแลว้ เข้าใจหรือเปลา่ สำหรับคนที่ยังไม่เห็นภาพนะครับ ข้างล่างจะเป็นตัวอยู่ ของผังงาน Flow Chart ในตอนนีค้ ณุ ยงั ไม่ต้องทำความเข้าใจทงั้ หมดก็ได้ แคด่ ูคร่าวๆไว้ก่อน เวลาท่ี ผมอธบิ ายเรอื่ งสัญลักษณต์ ่างๆและวิธีการเขยี นคุณจะได้ไมง่ งมาก รูปท่ี 2.10 ผังการทำงานของ Flow chart แตก่ อ่ นการท่ีเราจะเขยี น Flow Chart ไดน้ ้นั เราต้องเข้าใจก่อนว่า สญั ลกั ษณ์” ตา่ งๆ ของ Flow Chart มอี ะไรบา้ ง และแต่ละอย่างหมายถึงอะไร ไปดกู ันเลยครับ ทำความรูจ้ กั “สญั ลักษณ์” ใน Flow Chart สญั ลักษณ์ Flow Chart แต่ละอย่างจะใช้แทนคำอธบิ ายกิจกรรมและการตัดสนิ ใจต่างๆ เชน่ จดุ เรมิ่ ตน้ จุดสิน้ สุด จดุ ประมวลผล การทำงานเป็นต้น วธิ กี ารเขยี นผังงาน Flow Chart หลักจากที่เราไดท้ ำความเข้าใจสัญลักษณ์ต่าง ๆ ใน Flow Chart แล้ว เรามาดูกันว่าวิธกี าร เขยี นผังงานทด่ี ี ตอ้ งทำอย่างไร 1.กำหนดเป้าหมายและขอบเขตของงาน - เป้าหมายและขอบเขคจะเป็นตัวกําหนด จุดเริ่มต้นและจุดสิ้นสุด การกำหนดทุกอย่างให้ชัดเจนตัง้ แต่แรกจะทำให้คุณเรียบเรียงทุกอย่างไดด้ ี มากขนึ้ ทำให้ผงั งานอา่ นแล้วเขา้ ใจง่าย 25

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

แผนภาพแสดงการไหลกระแสของข้อมูล (Data Flow Diagram: DFD) Data Flow Diagram เป็นเครื่องมือของนักวิเคราะหร์ ะบบที่ช่วยให้สามารถเข้าใจกระบวนการทำงานของแต่ละ หน่วยงาน ซึ่งทราบถึงการรับส่งขอ้ มูลการประสานงานระหว่างกิจกรรมต่าง ๆ ในการดําเนินงานซ่งึ เป็น แบบจําลองของระบบแสดงถึงการไหลของข้อมูลทั้ง INPUT และ OUTPUT ระหว่างระบบกับ แหล่งกำเนิดรวมทั้งปลายทางของการส่งข้อมลู ซ่ึงอาจเป็นแผนก บุคคล หรือระบบอื่น โดยขึ้นอย่กู บั ระบบงานและการทำงานประสานงานภายในระบบนั้นนอกจากนี้ยังช่วยให้รู้ถึงความต้องการข้อมูล และข้อบกพร่อง (ปัญหา) ในระบบงานเดิมเพื่อใช้ในการออกแบบการปฏิบัติงานในระบบใหม่ Data Flow Diagram (DFD) เป็นภาพแสดงการเปลี่ยนแปลงข้อมูลในขณะไหลผ่านกระบวนการ ทำงาน ต่าง ๆ ของระบบสารสนเทศ DFD จึงเป็นโครงสร้างของระบบงานสารสนเทศที่สื่อเข้าใจใน การ ทำงานของระบบงานในรูปแบบของความสัมพันธ์ระหว่างกระแสขอ้ มูลและโฟรเซส DFD ภายใน DFD ทำให้เราเข้าใจส่วนประกอบของงาน เขา้ ใจการใชข้ ้อมูลในแต่ละโปรเซส และขอ้ มูลทีเ่ ป็นผลจากการ ทำงานโฟรเซสโดยโครงสร้างจะเริ่มจากระดับสงู สุดซึ่งจะแสดงส่วนท่อี ยู่ภายนอก ระบบ ส่วนน้ีสำคัญ เพราะว่าเป็นส่วนที่บอกว่าระบบนั้น ๆ ได้รับข้อมูลมาจากที่ใด และผลลัพธ์ต่าง ๆ ที่ใด และผลลัพธ์ ต่าง ๆ ถูกส่งไปที่ใดบ้าง DFD ในระดับลึกลงไปจะไม่แสดงสิ่งที่อยู่นอกระบบ คือ ไม่มีสิ่งนี้เป็น ส่วนประกอบโดยปกติ จะวางแหล่งที่มาของข้อมูลไว้ทางซ้ายมือของ DFD และ ส่วนภายนอกที่รับ ผลลพั ธข์ องระบบจะอยู่ทางขวามอื ท้ังนี้เพ่อื ให้อย่ใู นรูปแบบของกระแสข้อมูล จากซ้ายไปขวา โปรแกรมที่ใช้ในการทำเว็บไซต์ โปรแกรม 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 เปน็ ต้น 27

ความสามารถของ 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.มีความสามารถทำการติดตอ่ กับฐานขอ้ มลู เพื่อเช่ือมต่อกบั เว็บไซต์ สว่ นประกอบ Adobe Dreamweaver CS6 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 ได้ สะดวกข้ึน 9. Code Editor เป็นหน้าต่างที่ใช้สำหรับเขียนโปรแกรม ให้กับเหตุการณ์หลกั ของ Object นน้ั 28

โปรแกรม 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 การทา งานใน ด้านต่างๆ ให้มากและง่ายขึ้นโดย บริษัท Zend ซึ่งมี Zoey และ AndiGatmans ได้ร่วมก่อตั้ง ข้ึน (http:/www.zend.com ) ในเวอรช์ ่นั น้จี ะเปน็ compile script ซ่ึง ในเวอรช์ น่ั หนา้ นี้จะเป็น embed script interpreter ในปจั จบุ ันมคี นได้ใช้ PHPสงู กว่า 5,100,000 ไซต์ในท่วั โลก และผูพ้ ฒั นา ได้ตั้งช่ือ ของ PH\"ใหมว่ า่ PHP: Hypertext Preprocessor 29

Object Oriented Model 1. การกำหนดสโคป public/private/protected 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: 30

Hypertext Preprocessor โค้ดของภาษา PHP นั้นสามารถฝังกบั โค้ดของ HTML ได้ ซึ่งมนั สามารถ นาํ ไปร่วมใชร้ ว่ มกับระบบเว็บเท็มแพลตทห่ี ลากหลาย ระบบจดั การเน้ือหา (CMS) หรอื เวบ็ เฟรม เวิร์ค การทำงานของภาษา PHP นั้นเป็นแบบ Interpreter ที่ถูกพัฒนาเป็นแบบโมดูลในเว็บ เซิร์ฟเวอร์ หรือ Common Gateway Interface (CGI) โปรแกรม SQL เป็นโปรแกรมฐานข้อมูลที่มีโครงสร้างของภาษาที่เข้าใจง่าย ไม่ซับซ้อน มี ประสิทธิภาพการทำงานสงู สามารถทำงานทีซ่ บั ซ้อนไดโ้ ดยใช้คำส่ังเพียงไม่กคี่ ำสง่ั โปรแกรม SQL จึง เหมาะที่จะใช้กับระบบฐานข้อมูลเชิงสัมพันธ์ และเป็นภาษาหนึ่งที่มีผู้นิยมใช้กันมาก โดย ทั่วไป โปรแกรมฐานขอ้ มลู ของบริษัทต่าง ๆ ทม่ี ีใช้อย่ใู นปัจจุบัน เชน่ Oracke, DB2 ก็มักจะมีคำส่ัง SQL ท่ี ตา่ งจากมาตรฐานไปบา้ งเพือ่ นให้เปน็ จุดเด่นของแตล่ ะโปรแกรมไป ความสำคญั ของการประมวลผลแบบระบบฐานขอ้ มูลจากการจัดเก็บขอ้ มูลรวมเป็น ฐานข้อมูล จะก่อใหเ้ กดิ ประโยชน์ดงั น้ี 1.สามารถลดความซ้ำซ้อนของข้อมูลได้ การเก็บข้อมูลชนิดเดียวกันไว้หลาย ๆ ที่ทำให้เกิด ความซ้ำซ้อน (Redundancy) ดังนั้นการนาํ ข้อมูล มารวมเก็บไว้ในฐานข้อมูล จะลดปัญหาการ เกิด ความซ้ำซ้อนของข้อมูลได้ โดยระบบจัดการ จะช่วยควบคุมความซ้ำซ้อนได้เนื่องจากระบบ จัดการ ฐานข้อมลู จะทราบได้ตลอดเวลาวา่ มี ข้อมลู ซำ้ ซ้อนกันอยู่ทีใ่ ดบา้ ง 2. หลีกเล่ียงความขดั แยง้ ของขอ้ มูลได้หากมีการเก็บข้อมลู ชนิดเดียวกนั ไวห้ ลายๆ ท่แี ละมี การ ปรับปรุงข้อมูลเดียวกันนี้ แต่ปรับปรุงไม่ครบทุกที่ที่มีข้อมูลเก็บอยู่ก็จะทำให้เกิดปัญหาข้อมูล ชนิด เดียวกันอาจมคี า่ ไม่เหมอื นกนั ในแต่ละทท่ี เ่ี กบ็ ข้อมลู อยู่ จงึ กอ่ ให้เกิดความขดั แย้งของข้อมลู ขน้ึ 3. สามารถใช้ขอ้ มลู ร่วมกนั ได้ฐานขอ้ มูลจะเปน็ การจัดเก็บข้อมูลรวมไว้ด้วยกัน ดงั น้นั หาก ผู้ใช้ ต้องการใช้ขอ้ มูลในฐานข้อมลู ท่มี าจากแฟ้มข้อมูลตา่ ง ๆ กจ็ ะทำไดโ้ ดยงา่ ย 4. สามารถรักษาความถูกตอ้ งเชื่อถอื ได้ของข้อมูลบางครัง้ พบว่าการจัดเก็บขอ้ มูลใน ฐานข้อมูล อาจมีข้อผิดพลาดเกิดขึ้น เช่น จากการที่ผูป้ ้อนข้อมูลป้อนข้อมูลผิดพลาดคอื ปอ้ นจาก ตัวเลขหนึง่ ไป เปน็ อกี ตวั เลขหน่งึ โดยเฉพาะกรณีมีผู้ใช้หลายคนตอ้ งใช้ขอ้ มูลจากฐานข้อมูลร่วมกนั หากผู้ใช้คนใดคน หนง่ึ แกไ้ ขขอ้ มลู ผดิ พลาดก็ทำใหผ้ อู้ น่ื ไดร้ ับผลกระทบตามไปดว้ ย ในระบบ จดั การ ฐานขอ้ มูล (DBMS) จะสามารถใส่กฎเกณฑเ์ พ่ือควบคุมความผิดพลาดที่เกิดขึน้ 5. สามารถกำหนดความเป็นมาตรฐานเดียวกันของข้อมูลได้การเก็บข้อมูลร่วมกันไว้ใน ฐานข้อมูลจะทำใหส้ ามารถกำหนดมาตรฐานของข้อมูลไดร้ วมท้งั มาตรฐานตา่ ง ๆ ในการจดั เกบ็ ขอ้ มูล ให้เปน็ ไปในลกั ษณะเดยี วกันได้ เชน่ การกำหนดรูปแบบการเขียนวนั ทใี่ นลกั ษณะวัน/เดอื น/ปี ท้ังน้ีจะ มผี ู้ทคี่ อยบรหิ ารฐานขอ้ มลู ที่เราเรยี กว่า ผู้บรหิ ารฐานขอ้ มูล เป็นผู้กำหนดมาตรฐานตา่ ง ๆ 6. สามารถกำหนดระบบความปลอดภัยของข้อมูลได้ระบบความปลอดภัยในที่นี้ เป็นการ ป้องกันไม่ให้ผู้ใช้ที่ไม่มีสทิ ธิมาใช้ หรือมาเห็นข้อมูลบางอย่างในระบบผู้บรหิ ารฐานข้อมูลจะ สามารถ กำหนดระดับการเรียกใช้ขอ้ มลู ของผ้ใู ช้แต่ละคนไดต้ ามความเหมาะสม 31

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

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

1. Flowchart (การสมคั รสมาชกิ ) รปู ท่ี 3.2 Flow Chart การสมคั รสมาชิก 34

2.Flowchart (เขา้ สรู่ ะบบ) รปู ที่ 3.3 Flow Chart การเขา้ สรู่ ะบบ 35

3. Flowchart (การเลือกซอื้ สนิ ค้า) รปู ที่ 3.4 Flow Chart การเลอื กซ้อื สินค้า 36

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

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

2. Data Flow Diagram Level 1 Process 1 รูปที่ 3.7 Data Flow Diagram Level 1 Process 1 ระบบการสมัครสมาชกิ 39

3. Data Flow Diagram Level 1 Process 2 รูปท่ี 3.8 Data Flow Diagram Level 1 Process 2 ระบบเพม่ิ แกไ้ ขขอ้ มลู สมาชกิ 40