05_3

บทที่ 3 การออกแบบ การวิ เ คราะห แ ละการออกแบบระบบบริก าร เป น สิ่ งสํ า คัญ ที่ สุด ในการพั ฒ นาระบบ สารสนเทศ เพราะเปนการศึกษาหาความตองการ (Requirements) ของระบบสารสนเทศเดิมที่ใชใน การศึก ษาถึง ปญหาที่เกิดจากระบบงานเดิม หรือตองการระบบงานเพิ่มเติมเพื่อปรับปรุงใหมี ประสิทธิภาพ หลังจากวิเคราะหระบบแลว สิ่งที่จะตองกระทําเปนลําดับตอไปคือ การออกแบบ โครงสรางของ ระบบงานวาแตละระบบงานนั้นมีโครงสรางการทํางานอยางไร ประกอบดวยการ ทํางานภายในมี อะไรบาง เมื่อมีการวิเคราะหออกแบบโครงสรางการทํางาน ก็ยอมตองมีการจัดเก็บขอมูลของระบบ เปนระบบการทํางานภายใน ซึ่งฐานขอมูลก็นับเปนปจจัยหนึ่งที่มีบทบาทสําคัญอยางยิ่งสําหรับการ วิเคราะหและการออกแบบระบบงาน เนื่องจากฐานขอมูลเปนสวนที่ใชจัดเก็บขอมูลนําเขาของทุก ระบบงาน ดังนั้น การวิเคราะหแ ละการออกแบบจึงจําเปน ตองใหความสําคัญตอการออกแบบ ฐานขอมูลดวย ในการวิเคราะหออกแบบโครงสรางระบบและการทํางาน จําเปน ตองใชแผนภาพแสดง ขั้นตอนการทํางานของระบบ (Flowchart) เพื่อแสดงขั้นตอนการทํางานของระบบ แผนภาพ กระแส ขอมูล (Data Flow Diagram) เพื่อออกแบบขอมูลที่รับเขาและสงออกของระบบ แผนภาพ จําลอง ขอมูล (ER-Diagram) เพื่อแสดงถึงความสัมพันธระหวางเอนทิตี้ในระบบ พจนานุกรมขอมูล (Data Dictionary) เพื่ออธิบายขอมูลที่ใชในระบบ และสวนของกาติดตอกับผูใช (User Interface) เพื่อ แสดงรูปแบบการจัดวางขอมูลของระบบงาน จากการวิเคราะหออกแบบโครงสรางระบบบริการและการทํางาน ดังกลาวนั้น สามารถแบง เรื่อง ของการวิเคราะหและออกแบบระบบไดเปน 5 เรื่อง ดังนี้ 3.1 การออกแบบโครงสราง 3.2 การออกแบบฐานขอมูล 3.3 ER-Diagram 3.4 Data Dictionary 3.5 User Interface

54 3.1 การออกแบบโครงสราง การออกแบบเพื่อแสดงเคาโครงการทํางานของระบบงาน วาระบบงานั้น ประกอบดว ย ระบบงานยอยอะไรบาง และแตละระบบยอยมีการทํางานอยางไร โดยสามารถแสดงแผนผังของ ระบบงานโดยรวมไดดังนี้

ภาพที่ 3.1 แผนผังระบบบริการเว็บไซตศิษยเกา จากแผนผังระบบบริการเว็บไซตศิษยเกา จะประกอบดวยระบบบริการยอย 7 ระบบ ไดแก ระบบคนหางานจากรุน พี่ ระบบฝากแจงงาน ระบบคน หาพี่ร หัส ระบบการบัน ทึก เหตุก ารณ ระบบบริการฝากแจงขาว ระบบบริการออกแบบเสื้อ และระบบบริหารการเงินศิษยเกา จากระบบ ยอยดังกลาวยังสามารถแบงระบบยอย ลงไปอีก ซึ่งสามารถอธิบายไดดังนี้ 3.1.1 ระบบคนหางานจากรุนพี่ เปนการคนหางานจากรุนพี่ที่เปนศิษยเกา ที่ไดกรอกขอมูล เกี่ยวกับงานในฟอรมสมัครสมาชิก โดยจะเลือกประเภทของการคนหาแลวจะแสดงรายชื่อรุนพี่ศิษย เกาและขอมูลการฝากงานของรุนพี่ที่ทําการฝากงานไวในระบบขึ้นมาแสดง 3.1.1.1 แผนผังระบบฝากแจงงาน

ภาพที่ 3.2 แผนผังระบบคนหางานจากรุนพี่

55 จากแผนผังแผนผังระบบคนหางานจากรุนพี่ จะเห็นไดวาสมาชิกสามารถเขา ใชในระบบคนหางานรุนพี่ได โดยการเลือกประเภทการคนหา คือ คนหา ชื่อ/นามสกุล/ชื่อเลน และ คนหาตามหมวด ได แก ชื่อสถานที่ทํางาน ประเภทของงาน รายไดเฉลี่ยตอเดือน จังหวัด เมื่อทําการ คนหาก็จะปรากฏ รายการคนหางานของรุนพี่ออกมา 3.1.1.2 ขั้นตอนการทํางานของระบบคนหางานจากรุนพี่

ภาพที่ 3.3 ขั้นตอนการทํางานของระบบคนหางานจากรุนพี่

56 3.1.1.3 อธิบายการทํางานของระบบคนหางานจากรุนพี่ จากรูปภาพขั้นตอนการทํางานของระบบคนหางานจากรุนพี่เมื่อ เขาสูระบบ คนหางานจากรุนพี่ ระบบจะทําการตรวจสอบวาเปนสมาชิกหรือไมหากไมเปนสมาชิกก็จะใหไป สมัครเปนสมาชิกเสียกอน เมื่อสมัครเปนสมาชิกแลว ทําการตรวจสอบวาถูกตอง ก็สามารถเขาใช งานในระบบไดทันที่ การใชงานในระบบคนหางานจากรุนพี่ เริ่มจากใหสมาชิกเลือกประเภทการ คนหา คือ การคนหา ชื่อ/นามสุกล/ชื่อเลน และการคนหาตามหมวดรายการ เมื่อทําการเลือกการ คนหาชื่อ/นามสุกล/ชื่อเลน ใหสมาชิกทําการกรอก ชื่อ/นามสุกล/ชื่อเลน อยางใดอยางหนึ่งเขาไป แลวระบบจะทําการตรวจสอบการรายชื่อวามามีอยูหรือไม หากมีก็จะแสดงรายชื่อของรุน พี่ทานนั้น ขึ้นมาแสดงรายการงานรุนพี่ขึ้นมา หากไมพบระบบก็จะแจงวาไมพบรายการ หรือวาหากเลือก ประเภทการคนหาแบบตามหมวดไดแก ชื่อสถานที่ทํางาน ,ประเภทของงาน,รายไดเฉลี่ยตอเดือน และจังหวัด ใหสมาชิกเลือกอยางไดอยางหนึ่งแลวทําการกรอกขอมูลเขาไป แลวระบบจะทําการ ตรวจสอบการวาพบขอมูลการคนหาหรือไม หากพบเจอก็จะแสดงรายการงานรุนพี่นั้นขึ้นมา หาก ไมพบก็จะแสดงวาไมพบรายการ 3.1.2 ระบบฝากแจงงาน เปนการฝากงานจากรุนพี่ที่เปนศิษยเกา ที่ไดกรอกขอมูลเกี่ยวกับ งานในฟอรมการฝากงานไวที่ระบบ โดยจะลงขอมูลการฝากงานของรุนพี่ที่ที่ทํางานในสถานที่ นั้นๆแลวนําไปแสดงผลเมื่อทําการคนหางานตามประเภทการคนหาตอไป โดยมี แผนผังของระบบ และขั้นตอนการทํางานของระบบดังนี้ 3.1.2.1 แผนผังระบบฝากแจงงาน

ภาพที่ 3.4 แผนผังระบบฝากแจงงาน

57 จากแผนผังแผนผังระบบฝากแจงงาน จะเห็นไดวาสมาชิกสามารถเขาใชใน ระบบฝากแจงงานได โดยสมาชิกจะลงขอมูลการฝากงานของรุนพี่ที่ที่ทํางานในสถานที่นั้นๆแลว นําไปแสดงผลเมื่อทําการคนหางานตามประเภทการคนหาตอไป 3.1.2.2 ขั้นตอนการทํางานของระบบฝากแจงงาน

ภาพที่ 3.5 ขั้นตอนการทํางานของระบบฝากแจงงาน 3.1.2.3 อธิบายการทํางานของระบบฝากแจงงาน จากรูปภาพขั้นตอนการทํางานของระบบคนหาพี่รหัส เมื่อเขาสูระบบคนหา พี่รหัส ระบบจะทําการตรวจสอบวาเปนสมาชิกหรือไมหากไมเปนสมาชิกก็จะใหไปสมัครเปน สมาชิก เมื่อสมัครเปน สมาชิกแลวก็ทําการตรวจสอบความถูกตอง แลว ก็สามารถเขาใชงานใน ระบบไดทัน ที่ หลัก จากนั้นระบบจะใหสมาชิก กรอกขอมูลฝากแจงงาน คือ ตําแหนงงานวาง คุณสมบัติผูสมัครและเบอรโทรติดตอ เมื่อลงขอมูลเรียบรอยแลวระบบก็จะแสดงผลการฝากแจง งานขึ้นมา

58 3.1.3 ระบบคนหาพี่รหัส เปนระบบที่ใหคนหาดูขอมูลของพี่รหัสโดยระบุหอง และรหัสรุนพี่ แลวจะแสดงรายละเอียดของพี่รหัสโดยมีแผนผังของระบบและขั้นตอนการทํางานของระบบดังนี้ 3.1.3.1 แผนผังระบบคนหาพี่รหัส

ภาพที่ 3.6 แผนผังระบบคนหาพี่รหัส จากแผนผังแผนผังระบบคนหาพี่รหัส จะเห็นไดวาสมาชิกสามารถเขาใชใน ระบบคนหางานรุนพี่ได โดยการสมาชิกตองใสขอมูลพี่รหัสเขาไปและจะทําการแสดงขอมูลพี่รหัส ในรหัสนั้นๆขึ้นมา

59 3.1.3.2 ขั้นตอนการทํางานของระบบคนหาพี่รหัส

ภาพที่ 3.7 ขั้นตอนการทํางานของระบบคนหาพี่รหัส 3.1.3.3 อธิบายการทํางานของระบบคนหาพี่รหัส จากรูปภาพขั้นตอนการทํางานของระบบคนหาพี่รหัส เมื่อเขาสูระบบคนหา พี่รหัส ระบบจะทําการตรวจสอบวาเปนสมาชิกหรือไมหากไมเปนสมาชิกก็จะใหไปสมัครเปน สมาชิก เมื่อสมัครเปน สมาชิกแลวก็ทําการตรวจสอบความถูกตอง แลว ก็สามารถเขาใชงานใน ระบบไดทันที่ หลักจากนั้น ระบบจะตรวจสอบ คณะ สาขา และรหัสรุนวาถูกตองหรือไมจาก

60 ขอมูลสมาชิกที่ทําการกรอบเขาเปนสมาชิก ถาคณะ สาขา และรหัสรุนไมถูกตอง ระบบจะแสดงวา ไมพบรายการแตถา คณะ สาขา และรหัสรุนถูกตอง ก็จะทําการแสดงขอมูลพี่รหัสของสมาชิกทาน นั้นๆ ขึ้นมาแสดง 3.1.4 ระบบการบันทึกเหตุการณ เปนระบบการบันทึกเหตุการณที่จะตองทํา หรือการนัด หมาย ขอมูลเหตุการณ แลวบันทึกขอมูล ระบบจะสงเมลไปยังศิษยเกา เพื่อแจงไปยังสมาชิกที่อยูใน ระบบที่เพิ่มความรวดเร็วของเหตุการณ โดยมีแผนผังของระบบและขั้นตอนการทํางานของระบบ ดังนี้ 3.1.4.1 แผนผังระบบการบันทึกเหตุการณ

ภาพที่ 3.8 แผนผังระบบการบันทึกเหตุการณ จากแผนผังแผนผังระบบการบันทึกเหตุการณ จะเห็นไดวาสมาชิกสามารถ เขาใชในระบบการบันทึกเหตุการณได โดยสมาชิกจะบันทึกเหตุการณหรือนัดหมาย และจะสงไป ยัง Email สมาชิกศิษยเกาในระบบได

61 3.1.4.2 ขั้นตอนการทํางานของระบบการบันทึกเหตุการณ

ภาพที่ 3.9 ขั้นตอนการทํางานของระบบการบันทึกเหตุการณ 3.1.4.3 อธิบายการทํางานของระบบการบันทึกเหตุการณ จากรูปภาพขั้น ตอนการทํางานของระบบการบัน ทึก เหตุก ารณ เมื่อเขาสู ระบบการบันทึกเหตุการณ ระบบจะทําการตรวจสอบวาเปนสมาชิกหรือไมหากไมเปนสมาชิกก็จะ ใหไปสมัครเปนสมาชิก เมื่อสมัครเปนสมาชิกแลวก็ทําการตรวจสอบความถูกตอง แลวก็สามารถ เขาใชงานในระบบได หลังจากนั้นระบบจะแสดงรูปแบบใหสมาชิกเลือก Email ของผูที่สงถึง หลักจากนั้นกรอกหัวขอขาวและรายละเอียดขาว หลักจากนั้นระบบจะทําการสงรายละเอียดไปยัง Emailปลายทาง

62 3.1.5 ระบบบริก ารฝากแจงขาว เปน ระบบฝากแจงขาวสําหรับสมาชิก ศิษยเกาไดก รอก ขอความฝากแจงขาว โดยกรอกชื่อผูฝาก และชื่อผูที่ตองการใหรับ และกรอกรายละเอียดขอความ ฝากแจงขาวโดยมีแผนผังของระบบและขั้นตอนการทํางานของระบบดังนี้ 3.1.5.1 แผนผังระบบบริการฝากแจงขาว

ภาพที่ 3.10 แผนผังระบบบริการฝากแจงขาว จากแผนผังระบบบริการฝากแจงขาว จะเห็นไดวาสมาชิกสามารถเขาใชใน ระบบบริการฝากแจงขาวได โดยสมาชิกฝากแจงขาวสารไปยังชื่อที่ตองจะฝากแจง

63 3.1.5.2 ขั้นตอนการทํางานของระบบบริการฝากแจงขาว

ภาพที่ 3.11 ขั้นตอนการทํางานของระบบบริการฝากแจงขาว 3.1.5.3 อธิบายการทํางานของระบบบริการฝากแจงขาว จากรูปภาพขั้นตอนการทํางานของระบบบริการฝากแจงขาว เหตุการณ เมื่อ เขาสูระบบบริก ารฝากแจงขาว ระบบจะทําการตรวจสอบวาเป นสมาชิก หรือไมหากไมเปน สมาชิกกจะใหไปสมัครเปนสมาชิก เมื่อสมัครเปนสมาชิกแลวก็ทําการตรวจสอบความถูกตอง แลว ก็สามารถเขาใชงานในระบบไดทันที่ หลังจากนั้นระบบจะแสดงรูปแบบใหสมาชิกเลือก ID ของ

64 ผูท ี่สงถึงหลักจากนั้นกรอกหัวขอที่แจงและรายละเอียด หลักจากนั้นระบบจะทําการสงรายละเอียด ไปยังสมาชิกในระบบทานนั้นที่เลือกไว 3.1.6 ระบบบริการออกแบบเสื้อ เปนระบบฝากแจงขาวสําหรับสมาชิกศิษยเกาไดทําการ ออกแบบเสื้ อ และจัด ทํา การประกวด เพื่ อใหส มาชิ ก ไดทํ าการใหค ะแนนวา เสื้อ ตัว ใดเป น ที่ เหมาะสมในการสั่งซื้อเปนเสื้อรุนตอไปโดยมีแผนผังของระบบและขั้นตอนการทํางานของระบบ ดังนี้ 3.1.6.1 แผนผังระบบบริการออกแบบเสื้อ

ภาพที่ 3.12 แผนผังระบบบริการออกแบบเสื้อ จากแผนผังระบบบริการออกแบบเสื้อ จะเห็นไดวาสมาชิกสามารถเขาใชใน ระบบบริการออกแบบเสื้อได โดยสมาชิกจะทําการเพิ่มโลโกเขาไปในระบบ หลักจากนั้นระบบจะ ทําการเขาระบบออกแบบเสื้อ

65 3.1.6.2 ขั้นตอนการทํางานของบริการออกแบบเสื้อ

ภาพที่ 3.13 ขั้นตอนการทํางานของบริการออกแบบเสื้อ 3.1.6.3 อธิบายการทํางานของบริการออกแบบเสื้อ จากรูปภาพขั้น ตอนการทํางานของบริการออกแบบเสื้อ เมื่อเขาสูบริก าร ออกแบบเสื้อ ระบบจะทําการตรวจสอบวาเปนสมาชิกหรือไมหากไมเปนสมาชิกก็จะใหไปสมัคร เปนสมาชิก เมื่อสมัครเปนสมาชิกแลวก็ทําการตรวจสอบความถูกตอง แลวก็สามารถเขาใชงานใน ระบบไดทันที่ หลักจากนั้นระบบจะใหผูใชทําการโหลดโลโกเสื้อที่ไดออกแบบไวแลวเขาไปใน ระบบ เพื่อทําการนํามาใสในตัวเสื้อของระบบ แลวเมื่อเราทําการออกแบบเสื้อเรียบรอยแลวก็ทําการ เซฟ เพื่อนําไปทําการใหคะแนนตอไป

66 3.1.7 ระบบบริหารการเงินศิษยเกา เปนระบบบริหารเงินสําหรับศิษยเกาที่เปนสมาชิก โดย ใหอาจารยในสาขาตางๆ ไดทําการกรอกเอกสารเปนผูดูแลบริหารการเงินศิษยเกา โดยที่ระบบนี้จะ ทําการเช็คการจายเงินของสมาชิกศิษยเกาที่ทําการสั่งซื้อของหรือการเงินตางๆ ที่ไดทํารายการไวกับ ระบบบริหารการเงินศิษยเกา ที่มีไวโดยมีแผนผังของระบบและขั้นตอนการทํางานของระบบดังนี้ 3.1.7.1 แผนผังระบบบริหารการเงินศิษยเกา

ภาพที่ 3.14 แผนผังระบบบริหารการเงินศิษยเกา จากแผนผังระบบบริหารการเงินศิษยเกา จะเห็นไดวาสมาชิกสามารถเขาใช ในระบบบริหารการเงินศิษยเกาได โดยสมาชิกสามารถทํารายการในการสั่งซื้อหรือตรวจสถานการ ชําระเงินได และหลังจากนั้นก็จะเขาสูระบบการเงินเพื่อตรวจเช็คการจายเงินตอไป

67

3.1.7.2 ขั้นตอนการทํางานของบริการออกแบบเสื้อ

ภาพที่ 3.15 ขั้นตอนการทํางานของระบบบริหารการเงินศิษยเกา 3.1.7.3 อธิบายการทํางานของระบบบริหารการเงินศิษยเกา จากรูปภาพขั้นตอนการทํางานของระบบบริหารการเงินศิษยเกา เมื่อเขาสู ระบบบริหารการเงินศิษยเกา ระบบจะทําการตรวจสอบวาเปนสมาชิกหรือไมหากไมเปนสมาชิกก็ จะใหไปสมัครเปนสมาชิก เมื่อสมัครเปนสมาชิกแลวก็จะใหสมาชิกทําการเลือกรายการที่เราจะทํา รายการที่เราจะทําในที่นี้คือ การเลือกซื้อสินคาที่ไดมีรายการไว เมือเลือกไดแลวก็จะเขาสู ระบบ การเงินเพื่อทําการตรวจเช็คการจายเงินตอไป

รูปภาพ 3.16 แสดงโครงสรางการทํางานของระบบเว็บไซตศิษยเกา

68

69 3.2 Data Flow Diagram เปนการจําลองการทํางานของระบบ ซึ่งจะประกอบดวย Diagram ดังตอไปนี้ 3.2.1 Context Diagram ของระบบการเรียนรูรวมกันผานสื่อเล็กทรอนิกสนี้ ซึ่งใชสัญลักษณ Process จะใชแทนการทํางานทุกขั้นตอนของระบบนี้ โดย Entity ที่เกี่ยวของกับระบบนี้ได แกผูดู แลระบบ (Admin) สมาชิก (member) และ อาจารย (teacher) ซึ่งมีขอมูลรับเขาและออกระหวาง Entity ดังกลาวกับระบบ ทําใหทราบโดยภาพรวมวาระบบการเรียนรูรวมกันผานสื่อเล็กทรอนิกสนี้ ทําอะไรไดบาง และเกี่ยวของกับใครบาง

ภาพที่ 3.17 แสดง Context Diagram ของระบบบริการเว็บไซตศิษยเกา

70

ภาพที่ 3.18 แสดง Process Decomposition Diagram

71 สมาชิก

อาจารย

1

ผูดูแลระบบ

username,password สถานะการเขาระบบ

ระบบ สมาชิก

เพิ่มลบแกไขขอมูลสมาชิก

4 ระบบการจัดการ ขอมูลระบบ

D1 สมาชิก

ขอมูลฝากแจงขาว D3 ฝากแจงขาว

2

D2 บันทึกเหตุการณ

ระบบ คนหา

ระบบบันทึก เหตุการณ

D2 ขอมูลเพิ่มลบโลโก, บันทึกเสื้อที่ออกแบบ

สมาชิก

ขอมูลโหวต

บันทึกเหตุการณ

6 ระบบ การโหวตเสื้อ

5

แสดงเสื้อที่ออกแบบ

ระบบ ออกแบบเสื้อ

เพิ่มลบโลโก, เสื้อที่ออกแบบ

ขอมูลเสื้อที่ออกแบบ

ขอมูลเพิ่มลบรายการสั่งสินคา ขอมูลเพิ่มลบแกไขรายการสินคา ยืนยันขอมูลสถานะสินคา ,แสดงสถานะสินคา อาจารย

D8 โหวตเสื้อ D9 คะแนนโหวต

ขอมูลเพิ่มลบบันทึกเหตุการณ , ขอมูลขอมูลบันทึกเหตุการณ

ผูดูแลระบบ

อาจารย

D4 ฝากแจงงาน ขอมูลฝากแจงงาน

3 ขอมูลลบบันทึกเหตุการณ หรือนัดหมาย

สมาชิก

7

D5

เสื้อ

เพิ่มลบแกไข ขอมูลสินคา

D6

คลังสินคา

ผูดูแลระบบ

สมาชิก

ระบบการเงิน ขอมูลเพิ่มลบ รายการสั่งสินคา

D7 รายการสั่งสินคา

ยืนยันสถานะสินคา ขอมูลสถานะสินคา

ภาพที่ 3.19 แสดง Data Flow Diagram Level 1 3.2.2 Data Flow Diagram Level 1 จาก Context Diagram สามารถแบงขั้นตอนการทํางาน ออกเปน 7 ขั้นตอน (Process) ดวยการวิเคราะหจากความตองการของผูใชที่รวบรวมมาได โดยการ แบงแยกแตละ Process ตามหมวดหมูของขอมูล ไดแก 3.2.2.1 Process 1 การจัดการระบบสมาชิก เปนระบบการตรวจสอบ การเขาสูระบบ ของผูดูระบบ, สมาชิก, อาจารยและบุคคลภายนอก ดังนี้

72 1) ผูดูแลระบบปอนขอมูล Login เขาสูระบบ ระบบจะทําการเปลี่ยนสถานะ เปน Admin ใหแกผูดูแลระบบ 2) อาจารยปอนขอมูล Login เขาสูระบบ ระบบจะทําการเปลี่ยนสถานะเปน อาจารย ใหแกอาจารยเพื่อดําเนินงานในระบบการเงินตอไป 3) สมาชิกปอนขอมูล Login เขาสูระบบ ระบบจะทําการเปลี่ยนสถานะเปน member ใหแกสมาชิก 4) Process นี้จะทําการดึงขอมูลจากฐานขอมูล สมาชิก(fusion_users) เพื่อใช ในการตรวจสอบ Username และ Password 3.2.2.2 Process 2 ระบบคนหา เปนระบบบริการคนหา ดังนี้ 1) ผูดูแลระบบสามารถเขาไปคนหาขอมูลงานจากรุนพี่ได 2) สมาชิกสามารถเขาไปคนขอมูลงานจากรุนพี่วาทํางานที่ไหนและงานรุนพี่ ฝากไวแจงไวได และเขาไปดูพี่รหัสของตนเองได 3) Process นี้ระบบจะทําการคนหาขอมูลงานจากรุนพี่ในฐานขอมูลตาราง ฝากแจงงาน (tb_work) 3.2.2.3 Process 3 ระบบบันทึกเหตุการณเปนระบบการบันทึกเหตุการณสงถึง สมาชิกในระบบทาง Email ดังนี้ 1) สมาชิกสามารถกรอกขอมูลขอมูลบันทึกเหตุการณได 2) ผูดูแลระบบสามารถลบขอมูลบันทึกเหตุการณหรือนัดหมายได 3) Process นี้ระบบจะทําการเพิ่ม ลบขอมูลบันทึกเหตุก ารณใ นฐานขอมูล ตาราง บันทึกเหตุการณ (note_mb) 3.2.2.4 Process 4 ระบบการจัดการขอมูล เปนระบบการจัดการขอมูล ดังนี้ 1) ผูดูแลระบบจะทําการลบ ขอมูลสมาชิกในระบบได 2) ผูดูแลระบบจะทําการเพิ่ม ลบ ขอมูลฝากแจงขาวในระบบได 3) ผูดูแลระบบจะทําการลบ ขอมูลบันทึกเหตุการณในระบบได 4) ผูดูแลระบบจะทําการลบ ขอมูลฝากแจงงานในระบบได 5) สมาชิกจะทําการเพิ่ม แกไข ขอมูลสวนตัวได 6) สมาชิกจะทําการเพิ่ม ลบ ขอมูลฝากแจงขาวในระบบได 7) สมาชิกจะทําการเพิ่ม ลบ แกไขขอมูลฝากแจงงานในระบบได 8) Process นี้ร ะบบจะทําการเพิ่ม ลบ แกไข ขอมูลสมาชิก ในฐานขอมูล สมาชิก (fusion_users) , ทําการเพิ่ ม ลบ แก ไข ข อมูล ฝากแจง ขาวในฐานข อมูล ฝากแจง ขา ว

73 (fusion_messges), ทําการเพิ่ม ลบ แก ไข ขอมูลบันทึก เหตุก ารณใ นฐานขอมูลบัน ทึก เหตุก ารณ (note_mb) และทําการเพิ่ม ลบ แกไข ขอมูลฝากแจงงานในฐานขอมูลฝากแจงงาน( tb_work) 3.2.2.5 Process 5 ระบบออกแบบเสื้อ สมาชิกสามารถทําไดดังนี้ 1) สมาชิกสามารถเขาเพิ่ม ลบโลโก และเสื้อที่ออกแบบ ได 2) Process นี้ ร ะบบจะทําการเพิ่ม ลบ ขอ มูลโลโก และออกแบบเสื้ อใน ฐานขอมูลตาราง เสื้อ (tb_logo) 3.2.2.6 Process 6 ระบบการโหวตเสื้อ ผูดูแลระบบ และสมาชิกสามารถทําไดดังนี้ 1) ผูดูและระบบเพิ่ม และลบตัวเลือกการโหวต เพื่อทําการโหวตในระบบการ โหวตได 2) ผูดูและระบบเพิ่ม และลบคะแนนโหวต เพื่อทําการโหวตในระบบการ โหวตได 3) อาจารยสามารถเพิ่มคะแนนโหวต เพื่อทําการโหวตในระบบการโหวตได 4) สมาชิกสามารถเพิ่มคะแนนโหวต เพื่อทําการโหวตในระบบการโหวตได 5) Process นี้ระบบจะทําการเพิ่ม ลบ ขอมูลตัวเลือกการโหวต ในฐานขอมูล ตาราง โหวตเสื้อ (fusion_polls) และเพิ่ม ลบคะแนนโหวต ในฐานขอมูลตาราง คะแนนโหวต (fusion_poll_votes) 3.2.2.7 Process 7 ระบบการเงิน อาจารยและสมาชิกสามารถเขาไดใชดังนี้ 1) อาจารยสามารถเขาใชระบบนี้โดยการเพิ่มลบแกไขสินคาในคลังสินคาได 2) อาจารยสามารถลบ รายการสั่งสินคาในระบบได 3) สมาชิกสามารถเพิ่ม ลบ แกไข รายการสั่งสินคาในระบบได 4) Process นี้ระบบจะทําการเพิ่ม ลบ แกไขคลังสินคาในฐานขอมูลตาราง คลังสินคา (tb_stock) และเพิ่ม ลบ แกไขรายการสั่งสิน คา ในฐานขอมูลตาราง รายการสั่งสินคา (tb_produck)

74 3.2.3 Data Flow Diagram Level 2 of Process 1 ระบบสมาชิก มีขั้นตอนการทํางานยอยภาย ในทั้งหมด 2 Process ดังนี้

ภาพที่ 3.20 แสดง DFD Level 2 of Process 1 3.2.3.1 Process 1.1 1) ผูใ ชงานจะเขาสูร ะบบล็อกอิ น โดยใชข อมูลการล็ อกอิน (Username, Password) โดยดึงมาจากฐานขอมูลมาเปรียบเทียบ 2) ระบบทําการตรวจสอบขอมูลจากฐานขอมูลวาถูก ตองหรือไม ถาไม ถูกตองก็จะนํากลับเขาไปสูระบบใหม 3.2.3.2 Process 1.2 1) ระบบจะทําการเปรียบเทียบขอมูลการล็อกอินแลว สงการล็อกอิน ไป ตรวจสอบสิทธิ์ในการเขาถึงขอมูล วาเปน Admin , Member, User หรือ Teacher 2) ระบบจะเขาสูการทํางานตามสิทธิ์ที่ไดรับ

75

ภาพที่ 3.21 แสดง DFD Level 2 of Process 2 3.2.3.3 Process 2.1 1) สมาชิกสามารถเลือกขอมูลในการคนหางานจากรุนพี่ในระบบ 2) ระบบจะคนหาในฐานขอมูลที่มีอยูในตาราง ฝากแจงงาน (tb_work) และ ตารางสมาชิก (fusion_users) 3) สมาชิกจะไดรับรายการงานรุนพี่และรายการฝากแจงงาน 3.2.3.4 Process 2.2 1) สมาชิกลงชื่อเขาใชระบบบริการ แลวนั้นระบบคนหาพี่รหัสจะทําการดึง ขอมูลในฐานขอมูลในตารางสมาชิก (fusion_users) ที่เหมือนกับสมาชิกที่คนหา 2) ระบบจะทําการสงรายการพี่รหัสใหแกสมาชิก

76

ภาพที่ 3.22 แสดง DFD Level 2 of Process 3 3.2.3.5 Process 3.1 1) สมาชิกทําการกรอกขอมูลบันทึกเหตุการณเขาไปในระบบ 2) ระบบจะทําการบัน ทึก ขอมูลลงในฐานขอมูลตารางบัน ทึก เหตุก ารณ (note_mb) และระบบจะแสดงที่อยู Email ของผูทําการสงขึ้นมา 3) เมื่อทําการสงขอมูลระบบ จะทําการสงขอมูลยัง Process ที่ 3.2 3.2.3.6 Process 3.2 1) ผูดูแลระบบระบุขอมูลที่จะทําการลบรายการบันทึกเหตุการณ 2) ระบบจะทําการลบขอมูลออกจากฐานขอมูลตารางบัน ทึก เหตุก ารณ (note_mb) 3.2.3.7 Process 3.3 1) หลังจากที่สมาชิกทําการสงบันทึกขอลงฐานขอมูลแลวนั้น ระบบสง Email จะทําการสง E-mail ไป E-mail สมาชิกปลายทาง 2) ระบบสง E-mail จะทําการดึงขอมูล E-mail สมาชิกปลายทางที่ทําการรับ จากฐานข อมูล ตารางสมาชิก (fusion_users) และดึ งขอ มูลฝากแจ งขา ว จากฐานขอ มูลตาราง ประชาสัมพันธ (note_mb)

77

ภาพที่ 3.23 แสดง DFD Level 2 of Process 4 3.2.3.8 Process 4.1 1) ผูดูแลระบบสามารถเพิ่มขอมูลฝากแจงขาวได โดยระบบจะทําการเพิ่ม ขอมูลลงในฐานขอมูลตารางฝากแจงขาว (fusion_messages) 2) สมาชิกสามารถเพิ่มขอมูลการเปนสมาชิกของระบบได โดยระบบจะทํา การเพิ่มขอมูลลงในฐานขอมูลตารางสมาชิก (fusion_users) 3) สมาชิกสามารถเพิ่มขอมูลฝากแจงขาวได โดยระบบจะทําการเพิ่มขอมูล ลงในฐานขอมูลตารางฝากแจงขาว (fusion_messages) 4) สมาชิกสามารถเพิ่มขอมูลฝากแจงงานได โดยระบบจะทําการเพิ่มขอมูล ลงในฐานขอมูลตารางฝากแจงงาน (tb_work) 3.2.3.9 Process 4.2 1) สมาชิกสามารถแกไขขอมูลสวนตัวในการสมัครเปนสมาชิกของตนเอง ได โดยระบบจะทําการแกไขขอมูลในฐานขอมูลตารางสมาชิก (fusion_users) 2) สมาชิกสามารถแกไขขอมูลฝากแจงขาวได โดยระบบจะทําการแกไข ขอมูลในฐานขอมูลตารางฝากแจงขาว (fusion_messages) 3) สมาชิกสามารถแกไขขอมูลฝากแจงงานได โดยระบบจะทําการแกไข ขอมูลในฐานขอมูลตารางฝากแจงงาน (tb_work)

78 3.2.3.10 Process 4.3 1) ผูดูแลระบบสามารถลบขอมูลสมาชิกได โดยระบบจะทําการลบขอมูล ในฐานขอมูลตารางสมาชิก (fusion_users) 2) ผูดูแลระบบสามารถลบขอมูลฝากแจงขาวได โดยระบบจะทําการลบ ขอมูลในฐานขอมูลตารางฝากแจงขาว (fusion_messages) 3) ผูดูแลระบบสามารถลบขอมูลฝากแจงงานได โดยระบบจะทําการลบ ขอมูลในฐานขอมูลตารางฝากแจงงาน (tb_work) 4) สมาชิกสามารถลบขอมูลฝากแจงขาวได โดยระบบจะทําการลบขอมูล ในฐานขอมูลตารางฝากแจงขาว (fusion_messages) 5) สมาชิกสามารถลบขอมูลฝากแจงงานได โดยระบบจะทําการลบขอมูล ในฐานขอมูลตารางฝากแจงงาน (tb_work)

ภาพที่ 3.24 แสดง DFD Level 2 of Process 5 3.2.3.11 Process 5.1 1) สมาชิกสามารถเพิ่มโลโกที่จะอกแบบ และ เสื้อที่ออกแบบเสร็จได โดย จะทําการเพิ่มขอมูลในฐานขอมูลตารางเสื้อ (tb_logo) 3.2.3.11 Process 5.2 1) สมาชิกสามารถลบโลโกเกาและเสื้อที่เคยออกแบบแลว เพื่อทําใหมได โดยจะทําการลบขอมูลออกจากฐานขอมูลตาราง เสื้อ (tb_logo)

79

ภาพที่ 3.25 แสดง DFD Level 2 of Process 6 3.2.3.12 Process 6.1 1) ผูดูแลระบบทําการเพิ่มตัวโหวต หรือ Choice ทีใชในการโหวตโดยการ ดึงขอมูลรูปภาพมาจากฐานขอมูลโลโก (tb_logo) และทําการเพิ่ง ตัวโหวตลงไปในฐานขอมูลตาราง โหวตเสื้อ (fusion_poll) 3.2.3.13 Process 6.2 1) ผูดูแลระบบลบตัวโหวต โดยระบุที่จะใชลบ แลวระบบจะทําการลบ ขอมูลในฐานขอมูลตารางคะแนนโหวต (fusion_poll_votes) 3.2.3.14 Process 6.3 1) ผูดูแลระบบทําการใหคะแนน โดยการเพิ่มคะแนนลงไปในฐานขอมูล ตาราง คะแนนโหวต (fusion_poll) 2) สมาชิกทําการใหคะแนน โดยการเพิ่มคะแนนลงไปในฐานขอมูลตาราง คะแนนโหวต (fusion_poll) 3.2.3.15 Process 6.4 1) ผูดูแลระบบทําการลบคะแนนโหวต โดยการลบคะแนนในฐานขอมูล ตาราง คะแนนโหวต (fusion_poll_votes)

80

ภาพที่ 3.26 แสดง DFD Level 2 of Process 7 3.2.3.16 Process 7.1 1) อาจารยสามารถเพิ่มขอมูลสินคาได โดยจะทําการเพิ่มขอมูลใน ฐานขอมูลตารางมูลคลังสินคา (tb_stock) 2) สมาชิกเพิ่มขอมูลรายการสั่งสินคาได โดยจะทําการเพิ่มขอมูลใน ฐานขอมูลตารางมูลรายการสินคา (tb_produck) 3.2.3.17 Process 7.2 1) อาจารยสามารถแกไขขอมูลสินคาได โดยจะทําการแกไขขอมูลใน ฐานขอมูลตารางมูลคลังสินคา (tb_stock) 3.2.3.18 Process 7.3 1) อาจารยสามารถลบขอมูลสินคาได โดยจะทําการลบขอมูลในฐานขอมูล ตารางคลังสินคา (tb_stock) 2) สมาชิกสามารถลบขอมูลรายการสั่งสินคาได โดยจะทําการลบขอมูลใน ฐานขอมูลตารางรายสินคา (tb_produck) 3.2.3.19 Process 7.4 1) อาจารยสามารถยืนยันขอมูลการสั่งสินคาได โดยจะทําการยืนยันขอมูล ในฐานขอมูลตารางสถานะสินคา (tb_produck) แลวแสดงสถานะใหสมาชิกทราบ

81 3.3 Entity Relationship Diagram (E-R Diagram) เปนการจําลองความสัมพันธของขอมูลในระบบจัดการของระบบบริการเว็บไซตสมาคมศิษย เกา จากรูปภาพที่ 3.7 E-R Diagram ของระบบบริการ จะแสดงใหเห็น ความสัมพันธข องขอมูล ดังตอไปนี้ ฐานขอมูลตารางสมาชิก (fusion_users) มีความสัมพัน ธกับฐานขอมูลตารางฝากแจงงาน (tb_work) แบบ One to Many Relationship เพราะสมาชิก 1 คนจะสามารถฝากแจงงานไดมากกวา หนึ่งรายการ ฐานขอมูลตารางสมาชิก (fusion_users) มีความสัมพันธกับฐานขอมูลตารางประชาสัมพันธ (note_mb ) แบบ one to Many Relationship เพราะสมาชิก 1 คนจะสามารถฝากแจงงานไดมากกวา ขาวประชาสัมพันธ ฐานขอมูลตารางสมาชิก (fusion_users) มีความสัมพัน ธกับฐานขอมูลตารางฝากแจงขาว (fusion_messages) แบบ one to one Relationship เพราะสมาชิก 1 คนจะสามารถฝากแจงขาวได 1 ขาว

82 fusion_users

tb_work

user_id user_name user_password user_admin_password user_email user_hide_email user_offset user_avatar user_posts user_threads user_joined user_lastvisit user_ipuser_rights user_groups user_level user_status user_theme user_Fname user_Lname user_Nname user_Sex user_Blood user_IDCard user_Tel user_HighEdu user_IDStu user_CodeID user_YearIn user_YearOut user_Mager user_Major user_Addr1 user_ProvCode1 user_PostCode1 user_Addr2 user_ProvCode2 user_PostCode2 user_phon1 user_Wcompany user_Wclass user_Wtype user_Wmoney user_Waddr user_WProvCode user_WPostCode user_Wtel user_WTel2 user_Wfax user_Bank_ID user_Bank_Name user_Bank_Major

work_id user_id work_date work_position work_properties work_tel status note_mb note_id user_id note_name note_email note_head note_text note_accapt note_date note_staus

fusion_messages message_id(user_id) message_to(user_id) message_from message_subject message_message message_smileys message_read message_datestamp message_folder tb_logo logo_id user_id logo_images t_image logo_status

tb_stock poll_id poll_title poll_opt_0 poll_opt_1 poll_opt_2 poll_opt_3 poll_opt_4 poll_opt_5 poll_opt_6 poll_opt_7 poll_opt_8 poll_opt_9 poll_started poll_ended

tb_produck

tb_stock stock_id user_id stock _name stock _image stock_all stock _cost stock_date stock _detail stock _status

ภาพที่ 3.27 แสดง E-R Diagrams

produck_id stock_id user_id produck_major produck_stock produck_ok produck_date produck_status

83 3.4 Data Dictionary สําหรับ Relation ฐานขอมูลเปนสวนสําคัญอีกสวนหนึ่งของระบบงาน ซึ่งฐานขอมูลสามารถเก็บขอมูลตางๆ ไดเปนระเบียบสามารถแกไขขอมูลไดงาย ผูจัดทําไดออกแบบฐานขอมูลที่ใชกับ My SQL ออกเปน ตารางตาง ๆ ไดดังนี้ ตารางที่ 3.1 แสดง Data Dictionary ขอมูลของสมาชิก (fusion_users) Relation fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users

Attribute user_id user_name user_password user_admin_password user_email user_hide_email user_offset user_avatar user_posts user_threads user_joined user_lastvisit user_ip user_rights user_groups user_level user_status user_theme user_FName user_LName user_NName user_Sex

Description id_user ชื่อล็อกอิน รหัสผานสมาชิก รหัสผาน admin อีเมล สถานะอีเมล สถานะเวลา สถานนะผูใช สถานะการโพส สถานะแสดงระบบ สถานะรวม สถานะเยี่ยม IP ผูใช รายเซ็นต กลุม ระดับการใช สถานะสมาชิก แทมเพลด ชื่อ นามสกุล ชื่อเลน เพศ

Type mediumint(8) varchar(30) varchar(32) varchar(32) varchar(100) tinyint(1) char(3) varchar(100) smallint(5) text int(10) int(10) varchar(20) text text tinyint(3) tinyint(1) varchar(100) varchar(30) varchar(50) varchar(10) varchar(10)

PK FK Yes

84 ตารางที่ 3.1 แสดง Data Dictionary ขอมูลของสมาชิก (fusion_users) (ตอ) Relation fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users

Attribute user_Blood user_IDCard user_Tel user_HighEdu user_IDStu user_CodeID user_YearIn user_YearOut user_Mager user_Major user_Addr1 user_ProvCode1 user_PostCode1

fusion_users fusion_users fusion_users

user_Addr2 user_ProvCode2 user_PostCode2

fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users

user_phon1 user_WCompany user_WClass user_WType user_WMoney user_Waddr user_WProvCode

Description กรุบเลือด เลขบัตรประชาชน เบอรโทร วุฒิการศึกษา รหัสนักศึกษา รหัสรุน ปที่เขา ปที่จบ คณะ สาขา ที่อยูภูมิลําเนา จังหวัดภูมิลําเนา รหัสไปรษณีย ภูมิลําเนา ที่อยูปจจุบัน จังหวัดปจจุบัน รหัสไปรษณีย ปจจุบัน เบอรโทรบาน ชื่อสถานที่ทํางาน ตําแหนงงาน ประเภทงาน เงินเดือนเฉลี่ย ที่อยูที่ทํางาน จังหวัดที่ทํางาน

Type varchar(5) varchar(13) varchar(10) varchar(30) varchar(12) varchar(5) varchar(4) varchar(4) varchar(50) varchar(50) varchar(100) varchar(30) varchar(5) varchar(100) varchar(30) varchar(5) varchar(9) varchar(50) varchar(50) varchar(20) varchar(20) varchar(100) varchar(30)

PK FK

85 ตารางที่ 3.1 แสดง Data Dictionary ขอมูลของสมาชิก (fusion_users) (ตอ) Relation fusion_users

Attribute user_WPostCode

fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users fusion_users

user_WTel user_WTel2 user_WFax user_Bank_ID user_Bank_Name user_Bank_Major user_check

Description รหัสไปรษณียที่ ทํางาน เบอรโทรที่ทํางาน เบอรโทรมือถือ เบอรโทรสาร หมายเลขธนาคาร ชื่อธนาคาร สาขาธนาคาร เช็คสถานะ

Type

PK FK

varchar(5) varchar(10) varchar(10) varchar(10) varchar(10) varchar(30) varchar(30) varchar(10)

ตารางที่ 3.2 แสดง Data Dictionary ขอมูลฝากแจงขาว (note_mb) Relation note_mb note_mb note_mb note_mb note_mb note_mb note_mb note_mb note_mb

Attribute note_id user_id note_name note_email note_head note_text note_accapt note_date note_staus

Description Id id_user ชื่อผสง อีเมล ชื่อเรื่อง ขอความ ชื่อผูรับ วันที่สง สถานะ

Type int(11) varchar(10) varchar(20) varchar(30) varchar(50) text varchar(20) varchar(30) tinyint(1)

PK FK Yes Yes

86 ตารางที่ 3.3 แสดง Data Dictionary ขอมูลขาวประชาสัมพันธหรือบันทึกเหตุการณนัดหมาย (tb_work) Relation tb_work tb_work tb_work tb_work tb_work tb_work tb_work

Attribute work_id user_id work_date work_position work_properties work_tel status

Description Id Id_user วัยที่ลงงาน ตําแนงวางงาน คุณสมบัติ เบอรโทรติดตอ สถานะ

Type int(11) int(11) varchar(30) varchar(30) text varchar(10) int(11)

PK FK Yes Yes

ตารางที่ 3.4 แสดง Data Dictionary ขอมูลขาวประชาสัมพันธหรือบันทึกเหตุการณนัดหมาย (Fusion_messages) Relation fusion_messages fusion_messages fusion_messages fusion_messages fusion_messages fusion_messages fusion_messages fusion_messages fusion_messages

Attribute message_id message_to message_from message_subject message_message message_smileys message_read message_datestamp message_folder

Description

Type Id int(11) Id ผูรับ int(11) Id ผูสง varchar(30) หัวขอ varchar(30) เนื้อหา text ลักษณะยิ้ม varchar(10) สถานะการอาน int(11) เขารหัส int(11) โฟเดอรขอความ int(11)

PK FK Yes Yes

87 ตารางที่ 3.5 แสดง Data Dictionary ขอมูลเสื้อ (tb_logo) Relation tb_shirt tb_shirt tb_shirt tb_shirt

Attribute logo_id user_id logo_images t_image

tb_shirt

logo_status

Description Id Id สมาชิก ที่อยูรูป ที่อยูเสื้อที่ ออกแบบ คะแนนโหวต

Type int(11) int(11) varchar(30) varchar(30)

PK FK Yes Yes

text

ตารางที่ 3.6 แสดง Data Dictionary ขอมูลคลังสินคา (tb_stock) Relation tb_stock tb_stock tb_stock tb_stock tb_stock tb_stock tb_stock tb_stock tb_stock

Attribute stock _id user_id stock _image stock _name stock _all stock _detail stock _cost Stock_date stock _status

Description Id Id สมาชิก ที่อยูรูปสินคา ชื่อสินคา จํานวนสินคา รายละเอียด ราคาสินคา วันที่ลง สถานะสินคา

Type int(11) int(11) varchar(30) varchar(30) int(11) varchar(200) int(11) varchar(50) int(11)

ตารางที่ 3.7 แสดง Data Dictionary ขอมูลสถานะคลังสินคา (tb_produck)

PK FK Yes Yes

88

Relation tb_produck tb_produck tb_produck tb_produck tb_produck tb_produck tb_produck tb_produck

Attribute produck_id user_id stock _id produck_major produck_stock produck_ok produck_date produck_status

Description Id Id สมาชิก Id สินคา สาขา วันที่สั่ง สถานะรายการ วันที่สั่งรายการ สถานนะ

Type int(11) int(11) int(11) varchar(30) int(11) int(11) varchar(30) int(11)

PK FK Yes Yes Yes

ตารางที่ 3.8 แสดง Data Dictionary ขอมูลสถานะคลังสินคา (fusion_polls) Relation fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls fusion_polls 3.8 User Interface

Attribute poll_id poll_title poll_opt_0 poll_opt_1 poll_opt_2 poll_opt_3 poll_opt_4 poll_opt_5 poll_opt_6 poll_opt_7 poll_opt_8 poll_opt_9 poll_started poll_ended

Description Id หัสขอ ตัวเลื่อกที1่ ตัวเลื่อกที2่ ตัวเลื่อกที3่ ตัวเลื่อกที4่ ตัวเลื่อกที5่ ตัวเลื่อกที6่ ตัวเลื่อกที7่ ตัวเลื่อกที8่ ตัวเลื่อกที9่ ตัวเลื่อกที1่ 0 สถานะเริ่ม ปด

Type int(11) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) varchar(200) int(10)

PK FK Yes

89 การออกแบบสวนติดตอระหวางผูใชกับระบบ การเรียนรูรวมกันผานสื่อเล็กทรอนิกสนี้ เพื่อ การปอนขอมูลเขาสูระบบ 3.8.1 ออกแบบ User Interface หลัก

ภาพที่ 3.28 แสดง User Interface หลัก หมายเลข 1 แสดงตําแหนงของ Logo ของ เว็บ มีขนาด 978 Pixels X 130 Pixels หมายเลข 2 แสดงตําแหนงของ Menu มีขนาด 978 Pixels X 24 Pixels หมายเลข 3 แสดงตําแหนงของ Menu มีขนาด 524 Pixels X180 Pixels หมายเลข 4 แสดงตําแหนงของ Main มีขนาด 798 Pixels X 524 Pixels หมายเลข 5 แสดงตําแหนงของ Footer มีขนาด 798 Pixels X 30 Pixels

3.8.2 ออกแบบ User Interface ผูใชทั่วไป

90

ภาพที่ 3.29 แสดง User Interface ผูใชทั่วไป หมายเลข 1 แสดงตําแหนงของ Logo ของ เว็บ มีขนาด 978 Pixels X 130 Pixels หมายเลข 2 แสดงตําแหนงของ Menu มีขนาด 978 Pixels X 24 Pixels - หนาแรก - เกี่ยวกับสมาคม - บทความ - กระดานขาว - ติดตอเรา หมายเลข 3 แสดงตําแหนงของ Menu มีขนาด 524 Pixels X180 Pixels หมายเลข 4 แสดงตําแหนงของ Main มีขนาด 798 Pixels X 524 Pixels หมายเลข 5 แสดงตําแหนงของ Footer มีขนาด 798 Pixels X 30 Pixels

3.8.3 ออกแบบ User Interface ผูดูแลระบบ

91

ภาพที่ 3.30 แสดง User Interface ผูดูแลระบบ หมายเลข 1 แสดงตําแหนงของ Logo ของ เว็บ มีขนาด 978 Pixels X 130 Pixels หมายเลข 2 แสดงตําแหนงของ Menu มีขนาด 978 Pixels X 24 Pixels - หนาแรก - เกี่ยวกับสมาคม - คนหางานรุนพี่ - ฝากแจงขาวไปยังรุนนอง - คนหาพี่รหัส - นัดหมาย - ตรวจสอบการสงขาวสาร - โหวต - ติดตอเรา หมายเลข 3 แสดงตําแหนงของ Login มีขนาด 524 Pixels X180 Pixels หมายเลข 4 แสดงตําแหนงของ Main มีขนาด 798 Pixels X 524 Pixels หมายเลข 5 แสดงตําแหนงของ Footer มีขนาด 798 Pixels X 30 Pixels

3.8.4 ออกแบบ User Interface สมาชิก

92

ภาพที่ 3.31 แสดง User Interface สมาชิก หมายเลข 1 แสดงตําแหนงของ Logo ของ เว็บ มีขนาด 978 Pixels X 130 Pixels หมายเลข 2 แสดงตําแหนงของ Menu มีขนาด 978 Pixels X 24 Pixels - หนาแรก - เกี่ยวกับสมาคม - คนหางานรุนพี่ - ฝากแจงขาวไปยังรุนนอง - คนหาพี่รหัส - ระบบการเงิน - ออกแบบเสื้อ - นัดหมาย - ติดตอเรา หมายเลข 3 แสดงตําแหนงของ Login มีขนาด 524 Pixels X180 Pixels หมายเลข 4 แสดงตําแหนงของ Main มีขนาด 798 Pixels X 524 Pixels หมายเลข 5 แสดงตําแหนงของ Footer มีขนาด 798 Pixels X 30 Pixels 3.8.5 ออกแบบ User Interface อาจารย

93

ภาพที่ 3.32 แสดง User Interface อาจารย หมายเลข 1 แสดงตําแหนงของ Logo ของ เว็บ มีขนาด 978 Pixels X 130 Pixels หมายเลข 2 แสดงตําแหนงของ Menu มีขนาด 978 Pixels X 24 Pixels - หนาแรก - เกี่ยวกับสมาคม - คนหางานรุนพี่ - ฝากแจงขาวไปยังรุนนอง - คนหาพี่รหัส - ระบบการเงิน - ออกแบบเสื้อ - นัดหมาย - ติดตอเรา หมายเลข 3 แสดงตําแหนงของ Login มีขนาด 524 Pixels X180 Pixels หมายเลข 4 แสดงตําแหนงของ Main มีขนาด 798 Pixels X 524 Pixels หมายเลข 5 แสดงตําแหนงของ Footer มีขนาด 798 Pixels X 30 Pixels