รูปเล่มวิชาโครงงาน

12,260 views
12,159 views

Published on

ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,260
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
89
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

รูปเล่มวิชาโครงงาน

  1. 1. 1 เว็บไซต์ แฟมสะสมผลงาน ออนไลน์ ้ Portfolio Online โดยนายอุเทน จันทรกานต์ รหัส 52018818นายวงษ์ สฤษฏ์ ไชยธรรม รหัส 52039013 โครงงานนีเ้ ป็ นส่ วนหนึ่งของการศึกษาหลักสู ตรวิทยาศาสตรบัณฑิตสาขาวิชาเทคโนโลยีสารสนเทศและการสื่ อสาร คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรีปทุม พ.ศ.2555
  2. 2. ก กิตติกรรมประกาศ เว็บไซต์ มาย พอร์ ตโฟลิโอ เป็ นระบบที่มีการทางานหลายขั้นตอนด้วยความช่วยเหลือจากบุคคลหลายท่านทาให้การจัดทาเว็บไซต์ มาย พอร์ ตโฟลิโอ สามารถสาเร็ จลุล่วงไปได้ดวยดีผจดทา ้ ู้ ัจึงขอขอบพระคุณท่านมาณที่น้ ีดวย ้ ขอขอบพระคุณท่านอาจารย์วสุ วรรธน์พงศ์ขจรที่กรุ ณาให้คาปรึ กษาและคาแนะนาข้อคิดและข้อเสนอแนะในการปฏิบติงานอาจารย์ได้ให้ความสนใจสอบถามความคืบหน้าของระบบ ัตรวจสอบและให้คาแนะนาในการแก้ไขเอกสารและให้ความเอาใจใส่ ดูแลพร้อมให้กาลังใจทาให้การทาโครงงานสาเร็ จลุล่วงไปได้ดวยดี ้ ขอขอบคุณคณาจารย์ประจาภาควิชาเทคโนโลยีสารสนเทศและการสื่ อสารทุกท่านที่มีส่วนร่ วมในการให้ความรู ้ทางวิชาการซึ่ งเป็ นพื้นฐานที่ช่วยให้ผจดทาสามารถจัดทาเว็บไซต์ มาย ู้ ัพอร์ ตโฟลิโอ และจัดทาเอกสารประกอบให้สาเร็ จลุล่วงไปได้ดวยดี ้ ขอขอบคุณครอบครัวที่มีส่วนในการสนับสนุนด้านการศึกษาและกาลังทรัพย์พร้อมทั้งให้กาลังใจมาโดยตลอดทาให้การทาโครงงานสาเร็ จลุล่วงไปด้วยดี สุ ดท้ายขอขอบคุณมหาวิทยาลัยศรี ปทุมที่ให้โอกาสและสถานที่ในการศึกษาหาความรู้ทาให้การทาโครงงานสาเร็ จลุล่วงไปด้วยดี
  3. 3. ข คานา เนื่องจากมนุษย์จาเป็ นต้องพึ่งพาอาศัยเทคโนโลยีในการดาเนินกิจกรรมต่างๆ ปั จจุบนจึงมี ัการพัฒนาระบบต่างๆขึ้นมา เพื่อให้มนุษย์และเทคโนโลยีสามารถผสมผสานกันอย่างลงตัวเว็บไซต์ มาย พอร์ ตโฟลิโอ ก็ เป็ นระบบหนึ่งที่ได้รับการพัฒนาขึ้นมาให้เป็ นส่ วนหนึ่งของมนุษย์เว็บไซต์ มาย พอร์ ตโฟลิโอ มีระบบที่เข้ามาช่วยรองรับปั ญหาต่างๆ เหล่านี้ เพื่อช่วยสร้างและเผยแพร่ แฟ้ มสะสมผลงานในรู ปแบบของเว็บไซต์ ให้นกเรี ยน นักศึกษา สามารถนาข้อมูลผลงาน ัเข้ามาเก็บรวบรวมได้หลากหลายรู ปแบบ เช่น ภาพถ่าย ภาพวีดิทศน์ เอกสารต่างๆ เสี ยง แอนิ เมชัน ัและไฟล์มลติมีเดียต่างๆและเพื่อตอบสนองความต้องการของผูใช้ ั ้ ทั้งนี้ผจดทาโครงงานหวังเป็ นอย่างยิงว่าเว็บไซต์ มาย พอร์ ตโฟลิโอ นี้จะเป็ นประโยชน์ต่อ ู้ ั ่นักเรี ยน นักศึกษา หรื อผูที่สนใจในการทาแฟ้ มสะสมผลงาน หากโครงงานนี้ เกิดข้อบกพร่ องหรื อ ้ข้อผิดพลาดประการใดก็ขอน้อมรับสิ่ งที่เกิดขึ้นไว้ณที่น้ ี ดวยขอบพระคุณ ้ นายวงษ์สฤษฏ์ ไชยธรรม เมษายน 2555
  4. 4. ค สารบัญ หน้ากิตติกรรมประกาศ กคานา ขสารบัญ คสารบัญรู ป จสารบัญตาราง ฉบทที่ 1 บทนา 1.1 ความเป็ นมาและความสาคัญของปั ญหา 1 1.2 วัตถุประสงค์การศึกษา 2 1.3 ขอบเขตการศึกษา 2 1.4 นิยายศัพท์เฉพาะ 5 1.5 ผลที่คาดว่าจะได้รับ 6 1.6 แผนการดาเนินงาน 6 1.7 เครื่ องมืที่คาดว่าจะต้องใช้ 8บทที่ 2 แนวคิด ทฤษฎีและเอกสารทีเ่ กี่ยวข้ อง 2.1 ทฤษฎีเทคโนโลยีที่เกี่ยวข้อง 9 2.1.1 MySQL 9 2.1.2 JavaScript 10 2.1.3 HTML 12 2.1.4 CSS 13 2.1.5 PHP 14บทที่ 3 ขั้นตอนการศึกษา ขั้นตอนที่ 1 การระบุปัญหา 17 ขั้นตอนที่ 2 การรวบรวมข้อมูลและการจัดการข้อมูล 18 ขั้นตอนที่ 3 การวิเคราะข้อมูล 19
  5. 5. ง 3.1 แผนภาพบริ บท (Context Diagram) 19 3.2 แผนภาพกระแสข้อมูล ( Data Flow Diagram) 20 3.3 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตี ( Entity-Relationship Diagrams: ERD ) 23 3.4 ตารางฐานข้อมูล (Data Table) 25 3.5 แผนการทางาน (Flowchart) 34 ขั้นตอนที่ 4 การสร้างตัวแบบ 43 ขั้นตอนที่ 5 การนาตัวแบบมาใช้ 43บทที่ 3 ผลการศึกษา 4.1 ลักษณะงานทัวไปของระบบที่พฒนา ่ ั 44 4.1.1 ความต้องการของผูใช้ระบบ ้ 44 4.1.2 ความสามารถของเว็บไซต์ 54 4.2 ฮาร์ดแวร์ที่ใช้ในระบบ 46 4.3 โปรแกรมและอุปกรณ์ที่ใช้ 46 4.4 สรุ ปกระบวนการทางานทั้งหมดของเว็บ 47 4.5 การออกแบบส่ วนเชื่อมประสานกับผูใช้ (User Interface) ้ 50บทที่ 5 สรุ ปผลการศึกษา การอภิปราย และข้ อเสนอแนะ 5.1 ปัญหาและอุปสรรคในการดาเนินงาน 59 5.2 สรุ ปผลการศึกษา 59 5.3 ข้อเสนอแนะเกี่ยวกับโครงงาน 60 5.4 สรุ ปการทาโครงงาน 60บรรณานุกรม 61ประวัติผ้ ูจัดทาดครงงาน 62
  6. 6. จ สารบัญรู ป หน้ารู ปภาพที่ 2.1 แสดงโค้ดคาสั่ง SQL ในการ Select ตาราง 9รู ปภาพที่ 2.2 แสดงโค้ด JavaScript ในการกาหนดการเริ่ มแสดงของ Slider 11รู ปภาพที่ 2.3 แสดงโค้ด HTML ในการสร้างตาราง 12 ัรู ปภาพที่ 2.4 แสดงโค้ด CSS กาหนดรู ปแบบให้กบ Body 13รู ปภาพที่ 2.5 แสดงโค้ด HPH ในการเปลี่ยนรหัสผ่าน 15รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ 16รู ปภาพที่ 3.2 ภาพตัวอย่างโดยรวมของระบบที่ตองการพัฒนา ้ 18รู ปภาพที่ 3.3 แผนภาพบริ บท(Context Diagram) 19รู ปภาพที่ 3.4 การสมัครสมาชิก 20รู ปภาพที่ 3.5 การเข้าสู่ ระบบสมาชิก 20รู ปภาพที่ 3.6 การแก้ไขข้อมูลสมาชิก 20รู ปภาพที่ 3.7 การจัดการโปรไฟล์ 20รู ปภาพที่ 3.8 การดูโปรไฟล์ส่วนตัว 21รู ปภาพที่ 3.9 Manangment 21รู ปภาพที่ 3.10 Gallery 21รู ปภาพที่ 3.11 แสดงการลืมรหัส 21รู ปภาพที่ 3.12 ระบบAdmin 22รู ปภาพที่ 3.13 บริ หารสามชิก บริ หารบทความ 22รู ปภาพที่ 3.14 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตีและแอททริ บิวต์ 23รู ปภาพที่ 3.15 Use Case Diagram 24รู ปภาพที่ 3.16 แผนภาพเส้นและสัญลักษณ์ของหน้าต้อนรับโดยให้สมาชิกเลือกที่จะ สมัครสมาชิก เข้า ระบบสมาชิก 24รู ปภาพที่ 3.17 แผนภาพเส้นและสัญลักษณ์ของการสมัครสมาชิก 25รู ปภาพที่ 3.18 แผนภาพเส้นและสัญลักษณ์ของการลืมรหัสผ่านของสมาชิก 36รู ปภาพที่ 3.19 แผนภาพเส้นและสัญลักษณ์ของการเข้าสู่ ระบบของสมาชิก 37รู ปภาพที่ 3.20 แผนภาพเส้นและสัญลักษณ์ของหน้าจัดการโปรไฟล์ 38รู ปภาพที่ 3.21 แผนภาพเส้นและสัญลักษณ์ของหน้าจัดการ Template 39รู ปภาพที่ 3.22 แผนภาพเส้นและสัญลักษณ์ของหน้าแก้ไขโปรไฟล์ 40รู ปภาพที่ 3.23 แผนภาพเส้นและสัญลักษณ์ของหน้าการ Upload Certificate 41
  7. 7. ฉรู ปภาพที่ 3.24 แผนภาพเส้นและสัญลักษณ์ของหน้าการ Upload Award 42รู ปภาพที่ 3.25 แผนภาพเส้นและสัญลักษณ์ของหน้าการ Upload Image/Photos 42รู ปภาพที่ 3.26 แผนภาพเส้นและสัญลักษณ์ของหน้าการ Upload File 43รู ปภาพที่ 4.1 แสดงหน้าแรกของเว็บไซต์ 50รู ปภาพที่ 4.2 แสดงหน้าสมัครสมาชิก 51รู ปภาพที่ 4.3 แสดงการเข้าสู่ ระบบ 52รู ปภาพที่ 4.4 แสดงส่ วนของการแก้ไขข้อมูลส่ วนตัว 53รู ปภาพที่ 4.5 แสดงหน้าเปลี่ยนรหัสผ่าน 54รู ปภาพที่ 4.6 แสดงหน้าแรกของโปรไฟล์ 55รู ปภาพที่ 4.7 แสดงประวัติส่วนตัว 56รู ปภาพที่ 4.8 แสดงบริ หารจัดการ 57รู ปภาพที่ 4.9 แสดงหน้าลืมรหัสผ่าน 58
  8. 8. ช สารบัญตาราง หน้าตารางที่ 1.1 ตารางแสดงแผนการดาเนินงาน 6ตารางที่ 3.1 แสดงประเภทของผลงาน 25ตารางที่ 3.2 แสดงแฟ้ มข้อมูลของผูดูแลระบบ ้ 25ตารางที่ 3.3 แสดงประเภทของผลงาน 26ตารางที่ 3.4 แสดงบทความ 26ตารางที่ 3.5 แสดงประวัติการศึกษา 27ตารางที่ 3.6 แสดงประเภทของประวัติ 27ตารางที่ 3.7 แสดงกลุ่ม 28ตารางที่ 3.8 แสดงรู ปภาพ 28ตารางที่ 3.9 แสดงสมาชิก 28ตารางที่ 3.10 แสดงรายละเอียดสมาชิก 29ตารางที่ 3.11 แสดงแฟ้ มข้อมูลรู ปของสมาชิก 30ตารางที่ 3.12 แสดงโปรเจค 31ตารางที่ 3.15 แสดงหัวข้อบทความ 31ตารางที่ 3.16 แสดงแฟ้ มข้อมูลรู ปของสมาชิก 32ตารางที่ 3.17 แสดงรู ปแบนเนอร์ 32ตารางที่ 3.18 แสดงผูใช้ดฟสบุค ้ 33ตารางที่ 4.1 แสดงฮาร์ ดแวร์ ท้ งหมดที่ใช้ในการสร้างระบบ ั 46ตารางที่ 4.2. แสดงรายชื่อโปรแกรมที่ใช้ในระบบ 46ตารางที่ 4.3 แสดงวิธีการทางานการสมัครสมาชิก 47ตารางที่ 4.4 แสดงวิธีการทางานของสมาชิก 47ตารางที่ 4.5 แสดงการทางานจัดการโปรไฟล์ 48ตารางที่ 4.6 แสดงวิธีการทางานการลืมรหัสผ่าน 48ตารางที่ 4.7 แสดงวิธีการทางานของผูดูแลระบบ ้ 49
  9. 9. 1
  10. 10. ก บทที่ 1 บทนา1.1 ความเป็ นมาและความสาคัญของปัญหา แฟ้ มสะสมผลงานเป็ นแหล่ งสะสมงาน หรื อหลักฐานที่นักเรี ยน นักศึกษาจะนาไปใช้ประกอบในการประเมินความรู้ ความสามารถ และทักษะของตัวนักเรี ยน นักศึกษาเองซึ่ งสามารถประเมินได้หลายคุณลักษณะ นักเรี ยน นักศึกษาสามารถนาแฟ้ มสะสมผลงานเพื่อใช้ในการเรี ยนต่อหรื อสมัครงาน แฟ้ มนี้ จะแสดงถึ งความสามารถในด้านการเรี ยนและการทากิ จกรรมพิเศษของนักเรี ยน นักศึกษา เพื่อใช้เป็ นหลักฐานประกอบการพิจารณาเข้าเรี ยนต่อหรื อทางาน ร่ วมกับการสอบหรื อการสัมภาษณ์เป็ นการพรี เซนต์ตนเองให้บุคคลอื่น ได้รู้จกตัวนักเรี ยน นักศึกษาเองมากขึ้น ั จากอดี ต จนถึ ง ปั จจุ บ ันนี้ แฟ้ มสะสมผลงานมี อยู่ใ นรู ป แบบของเอกสารที่ เป็ นเพี ย งแค่ ่กระดาษ หรื อ รู ปภาพที่พิมพ์ผานเครื่ องพิมพ์เอกสารเท่านั้น อาจจะทาให้แฟ้ มสะสมผลงาน ดูเรี ยบๆไม่ค่อยน่าสนใจเท่าที่ควร อีกทั้งนักเรี ยน นักศึกษาบางคนยังมีผลงานที่เป็ นแอนิเมชันหรื อมัลติมีเดียซึ่ งไม่สามารถนาเสนอผ่านเอกสารที่ เป็ นกระดาษได้ แฟ้ มสะสมผลงานที่เป็ นกระดาษต้องเก็ บรวบรวมใส่ ไว้ในแฟ้ ม ถ้านักเรี ยน นักศึกษามีผลงานมากแฟ้ มก็จะมีขนาดใหญ่และลาบากต่อการนาเสนอ จึ ง คารที่ จะมี เครื่ องมื อที่ อานวยความสะดวกสบายให้ก ับผูที่ ต้องการสร้ า งแฟ้ มสะสม ้ผลงาน เว็บไซต์ มาย พอร์ตโฟลิโอ มีระบบที่เข้ามาช่วยรองรับปั ญหาต่างๆ เหล่านี้ เพื่อช่วยสร้างและเผยแพร่ แฟ้ มสะสมผลงานในรู ปแบบของเว็บไซต์ ให้นกเรี ยน นักศึกษา สามารถนาข้อมูล ัผลงานเข้ามาเก็บรวบรวมได้หลากหลายรู ปแบบ เช่น ภาพถ่าย ภาพวีดิทศน์ เอกสารต่างๆ เสี ยง ัแอนิเมชันและไฟล์มลติมีเดียต่างๆ โดยผลงานเหล่านี้จะถูกนาเสนอผ่านหน้าเว็บไซต์ บนเครื อข่าย ัอินเตอร์เน็ต เพื่อแสดงออก ถึงศักยภาพของนักเรี ยน นักศึกษาจะทาให้สะดวกสบายในการนาเสนอผลงาน เพราะสามารถนาเสนอผลงานผ่านคอมพิวเตอร์ โน๊ตบุค หรื อแท็บเล็ตได้ทาให้การนาเสนอมีประสิ ทธิภาพและมีความน่าสนใจมากขึ้น อีกทั้งยังสามารถปรับปรุ งแก้ไขผลงานได้สะดวกรวดเร็ วทันทีที่ตองการ ้
  11. 11. 21.2 วัตถุประสงค์ การศึกษา 1.2.1 เพื่อให้ผที่ตองการสร้างแฟ้ มสะสมผลงานผ่านเว็บไซต์ได้ดวยตัวเอง ู้ ้ ้ 1.2.2 เพื่อให้ผใช้มีพ้ืนที่นาเสนอผลงาน ทั้งเอกสาร ภาพ เสี ยง รวมทั้งมัลติมีเดียต่างๆได้ ู้ 1.2.3 เพื่อให้ผใช้สามารถ แก้ไข เพิ่ม ลบ ข้อมูล ในแฟ้ มสะสมผลงานได้ง่าย ู้1.3 ขอบเขตการศึกษา 1.3.1 หน้าแรก 1.3.1.1 แสดงเมนูของสมาชิกเมื่อสมาชิกเข้าสู่ ระบบ 1.3.1.2 แสดงผลงานใหม่ล่าสุ ด 1.3.1.3 แสดงผลงานที่มีคะแนนโหวตมากที่สุด 5 อันดับแรก 1.3.1.4 แสดงข่าวสาร บทความ จากผูดูแลระบบ ้ 1.3.1.5 ผูใช้ทวไปสามารถสมัครสมาชิกใช้บริ การได้ฟรี ้ ั่ 1.3.2 ระบบสมาชิก ในการ Login จะการตรวจสอบว่าผูที่จะมาใช้บริ การนั้นเป็ นสมาชิกจริ ง โดยระบบ ้ จะทาการตรวจสอบจาก username และ password ในฐานข้อมูลว่าถูกต้องไหม ถ้าถูกต้องก็ จะสามารถเข้าสู่ ระบบได้ 1.3.2.1 สมาชิกสามารถแก้ไขข้อมูลส่ วนตัวได้ 1.3.2.2 สมาชิกสามารถเปลี่ยนรหัสผ่านได้ 1.3.2.3สมาชิกสามารถกูระรหัสผ่าน ้ 1.3.3 ระบบเพิ่มแฟ้ มผลงาน 1.3.3.1 ผูใช้สามารถเลือกสี ที่จะแสดงได้ ้ 1.3.3.2 ผูใช้สามารถเลือกพื้นหลังที่จะแสดงได้ ้ 1.3.3.3 ผูใช้สามารถเลือกที่จะแสดงหรื อไม่แสดงแฟ้ มผลงานได้ ้ 1.3.3.4 ผูใช้สามารถเพิ่มประวัติส่วนตัวได้ ้ 1.3.3.5 ผูใช้สามารถเพิ่มเกียรติบตรที่ได้รับได้ ้ ั 1.3.3.6 ผูใช้สามารถเพิ่มรางวัลที่ได้รับได้ ้ 1.3.3.7 ผูใช้สามารถเพิ่มผลงานได้ ้ 1.3.3.8 ผูใช้สามารถเพิ่มผลงานในรู ปแบบไฟล์ชนิดต่างๆ เช่น เอกสาร ้ ภาพ เสี ยง รวมทั้งมัลติมีเดีย เพื่อนามาแสดงได้ 1.3.3.9 สามารถเพิ่มหมวดหมู่ของผลงาน
  12. 12. 31.3.4 ระบบแก้ไขแฟ้ มผลงาน 1.3.4.1 ผูใช้สามารเปลี่ยนสี ที่จะแสดงได้ ้ 1.3.4.2 ผูใช้สามารเปลี่ยนพื้นหลังที่จะแสดงได้ ้ 1.3.4.3 ผูใช้สามารถแก้ไขจะแสดงหรื อไม่แสดงแฟ้ มผลงานได้ ้ 1.3.4.4 ผูใช้สามารถแก้ไขประวัติส่วนตัวได้ ้ 1.3.4.5 ผูใช้สามารถแก้ไขเกียรติบตรที่ได้รับได้ ้ ั 1.3.4.6 ผูใช้สามารถแก้ไขรางวัลที่ได้รับได้ ้ 1.3.4.7 ผูใช้สามารถแก้ไขผลงานตัวอย่างได้ ้ 1.3.4.8 ผูใช้สามารถแก้ไขผลงานในรู ปแบบไฟล์ชนิ ดต่างๆ เช่น เอกสาร ้ ภาพ เสี ยง รวมทั้งมัลติมีเดียได้1.3.5. ระบบCMS (Content Management System) 1.3.5.1จัดการเนื้อหาในหน้าแรกได้ 1.3.5.2 เพิ่มเนื้อหาข่าวสารในหน้าแรก 1.3.5.3 สามารถกาหนดแสดงหรื อไม่แสดง 1.3.5.4 สามารถจัดหมวดหมู่ของบทความ1.3.6 ระบบแกลอรี่ แสดงรู ปและผลงาน ใช้จาวาสคริ ปในการทาสไลต์โชว์หรื อแกลอรี่ ซึ่ งเป็ นสคริ ปสั้นๆ 1.3.2.6.1 ผูใช้สามารถเลือกรู ปแบบของการแสดงผลของแกลอรี่ ได้ ้ 1.3.2.6.2 ผูใช้สามารถเลือกรู ปเพื่อแสดงในแกลอรี่ ได้ ้ 1.3.2.6.3 ผูใช้สามารถเลือกผลงานเพื่อแสดงในแกลอรี่ ได้ ้ 1.3.2.6.4 ผูใช้สามารถเปลี่ยนรู ปแบบของการแสดงผลของแกลอรี่ แสดง ้ รู ปและผลงานได้1.3.7 ผูดูแลระบบ ้ 1.3.7.1 สามารถระงับการใช้งานของผูใช้งานได้ ้ 1.3.7.2 สามารถ ตรวจสอบ ลบ แก้ไข ข้อมูลของสมาชิกได้ 1.3.7.3 สามารถตรวจสอบข้อมูลการเข้าใช้งานทั้งหมดของผูใช้งาน ้ 1.3.7.4 สามารถปรับปรุ งแก้ไขข้อมูลต่างๆ บนเว็บไซต์ได้ 1.3.7.5 สามารถแก้ไขเทมเพลตได้
  13. 13. 41.3.8 ระบบการให้คะแนนของผลงาน1.3.9 ระบบตรวจสอบความเหมาะสมของผลงาน1.3.10 ระบบแชร์ ผลงาน ผ่าน เฟสบุค ทวิทเตอร์ ๊
  14. 14. 51.4 นิยามศัพท์เฉพาะ Portfolio = แฟ้ มสะสมผลงาน Login = เป็ นการใส่ "ชื่อสมาชิก" และ "รหัสผ่าน" เพื่อทา การตรวจสอบข้อมูลของท่านสมาชิ กก่ อนการ เข้าสู่ ระบบ
  15. 15. 61.5 ผลทีคาดว่าจะได้ รับ ่ 1.5.1. ผูใช้มีแฟ้ มสะสมผลงานที่เป็ นแบบออนไลน์ ้ 1.5.2. ช่วยเพิมความสะดวกในการจัดทาแฟ้ มสะสมผลงาน ่ 1.5.3. ช่วยลดปั ญหาการจัดเก็บข้อมูล 1.5.4. ช่วยลดปั ญหาการสู ญหายของข้อมูล 1.5.5. ช่วยเพิ่มประสิ ทธิ ภาพในการนาเสนอ 1.5.6. ช่วยเผยแพร่ แฟ้ มสะสมผลงานของผูใช้ ้ 1.5.7. ผูใช้สามารถสามารถนาแฟ้ มสะสมผลงานไปเรี ยนต่อหรื อสมัครงานได้ ้1.6 แผนการดาเนินงาน ในการดาเนิดงานของเว็บไซต์ มาย พอร์ ตโฟลิโอ (My Portfolio) จะต้องมีการศึกษาทฤษฎีที่เกี่ยวข้อง อีกทั้งการวิเคราะห์และออกแบบเว็บไซต์การทดสอบติดตั้งและจัดทาเอกสารประการการใช้งานโดยแผนการดาเนินงานดังนี้ 1.6.1. ศึกษาทฤษฎีแนวคิดและเอกสารที่เกี่ยวข้อง 1.6.2. ศึกษาเทคโนโลยีที่ใช้ ศึกษาถึงระบบการทางานที่ทาว่าเป็ นลักษณะอย่างไร มีความ คล่องตัวมากเพียงใด 1.6.3. การระบุปัญหา 1.6.4. รวบรวมข้อมูลที่เกี่ยวข้อง การรวบรวมรายละเอียดต่างๆ ที่เกี่ยวข้องกับเว็บไซต์เพื่อ นามาวิเคราะห์ขอมูล ้ 1.6.5. วิเคราะห์ขอมูล วิเคราะห์ปัญหาที่เกิดขึ้น ออกแบบเว็บไซต์และเงื่อนไขการทางาน ้ โดยการตรวจสอบและค้นหาข้อมูลที่เป็ นไปได้มาประกอบการทางานเพื่อประยุกต์เข้ากับ เว็บไซต์ 1.6.6. พัฒนาและเขียนโปรแกรม ทากราฟิ ก ตามที่ได้ศึกษาและออกแบบมา 1.6.7. ทดสอบเว็บไซต์ในแต่ละส่ วนและทาการติดตั้งบนเซิ ฟเวอร์ 1.6.8. จัดทาเอกสารประกอบการใช้
  16. 16. 7 ตารางแสดงแผนดาเนินการ ระยะเวลาดาเนินการ เม.ย.-55 ก.พ.-55 พ.ค.-55 ส.ค.-55 ม.ค.-55 มี.ค.-55 ก.ค.-55 มิ.ย.-55 ก.ย.-55ลาดับ กิจกรรม 1 ศึกษาแนวคิด ทฤษฎีและเอกสารที่เกี่ยวข้อง 2 ศึกษาเทคโนโลยีที่จะใช้ 3 การระบุปัญหา 4 การรวบรวมข้อมูลและการจัดการข้อมูล 5 การวิเคราะห์ขอมูลหรื อการออกแบบระบบและโปรแกรม ้ 6 การสร้างตัวแบบหรื อการพัฒนาโปรแกรม 7 ทดสอบติดตั้งระบบหรื อการทดสอบตัวแบบ 8 จัดทาเอกสารหมายเหตุ แทนระยะเวลาดาเนินการ ตารางที่ 1.1 ตารางแสดงแผนการดาเนินงาน
  17. 17. 81.7 เครื่องมือทีคาดว่าจะต้ องใช้ ่ 1.7.1. ฮารด์แวร์ 1.7.1.1 เครื่ องคอมพิวเตอร์ 1.7.1.2 โน๊ตบุค ๊ 1.7.1.3 เครื่ องพิมพ์ 1.7.2. ซอฟต์แวร์ 1.7.2.1 EditPlus3.3 1.7.2.2 Adobe Photoshop CS6 1.7.2.3 Adobe Illustrator CS6 1.7.2.4 Adobe Dreamweaver CS6 1.7.2.5 MySQL 1.7.2.6 Adobe Acrobat10 1.7.2.7 XAMPP 1.7.2.8 Microsoft Visio2007 1.7.2.9 Microsoft Office2013
  18. 18. 9 บทที่ 2 แนวคิด ทฤษฎีและเอกสารที่เกียวข้ อง ่2.1 ทฤษฎีทเี่ ทคโนโลยีทเี่ กี่ยวข้ อง 2.1.1 MySQL เอสคิวแอล (SQL) คือ ภาษาสอบถามข้อมูล หรื อภาษาจัดการข้อมูลอย่างมีโครงสร้าง มีการพัฒนาภาษาคอมพิวเตอร์ และโปรแกรมฐานข้อมูลที่รองรับมากมาย เพราะจัดการข้อมูลได้ง่าย เช่นMySQL, MsSQL, PostgreSQL หรื อ MS Access เป็ นต้น สาหรับโปรแกรมฐานข้อมูลที่ได้รับความนิยมคือ MySQL เป็ น Open Source ที่ใช้งานได้ท้ งใน Linux และ Windows MySQL เป็ นภาษาที่ใช้ ัในการเขียนโปรแกรม เพื่อจัดการกับฐานข้อมูลโดยในโครงงานนี้ เราใช้การทางานของ MySQLอยู่ 4 อย่าง ดังนี้ 2.1.1.1 Select query ใช้สาหรับดึงข้อมูลที่ตองการ ้ 2.1.1.2 Update query ใช้สาหรับแก้ไขข้อมูล
 2.1.1.3 Insert query ใช้สาหรับการเพิ่มข้อมูล
 3.1.1.4 Delete query ใช้สาหรับลบข้อมูลออกไป รู ปภาพที่ 2.1 แสดงโค้ดคาสั่ง SQL ในการ Select ตาราง
  19. 19. 10 การใช้งาน MySQL เป็ นที่นิยมใช้กนมากสาหรับฐานข้อมูลสาหรับเว็บไซต์ เช่น มีเดียวิกิ ัและ phpBB และนิ ยมใช้งานร่ วมกับภาษาโปรแกรม PHP ซึ่ งมักจะได้ชื่อว่าเป็ นคู่ จะเห็นได้จากคู่มือคอมพิวเตอร์ ต่างๆ ที่จะสอนการใช้งาน MySQL และ PHP ควบคู่กนไป นอกจากนี้ หลายภาษา ัโปรแกรมที่สามารถทางานร่ วมกับฐานข้อมูล MySQL ซึ่ งรวมถึง ภาษาซี ซี พลัสพลัส ปาสคาล ซีชาร์ป ภาษาจาวา ภาษาเพิร์ล พีเอชพี ไพทอน รู บี และภาษาอื่น ใช้งานผ่าน API สาหรับโปรแกรมที่ติดต่อผ่าน ODBC หรื อ ส่ วนเชื่ อมต่อกับภาษาอื่น (database connector) เช่น เอเอสพี สามารถเรี ยกใช้ MySQL ผ่านทาง MyODBC,ADO,ADO.NET เป็ นต้น 2.1.2 JavaScript JavaScript เป็ นภาษาโปรแกรม (Programming language ) ประเภทหนึ่ ง ที่เรี ยกกันว่า"สคริ ปต์"( Script ) ซึ่ งมีวิธีการทางานในลักษณะ"แปลความและดาเนิ นงานไปทีละคาสั่ง" (inter-pret) ภาษานี้ เดิมมีชื่อว่า Live Script ได้รับการพัฒนาขึ้นโดย Netscape ด้วยวัตถุประสงค์ เพื่อที่จะช่วยให้เว็บเพจสามารถแสดงเนื้ อหา ที่มีการเปลี่ยนแปลงไปได้ ตามเงื่อนไขหรื อ สภาพแวดล้อมต่างๆ กัน หรื อสามารถโต้ตอบกับผูชมได้มากขึ้น ทั้งนี้เพราะภาษา HTML แต่เดิม ้นั้น เหมาะสาหรั บ ใช้แสดงเอกสารที่ มีเนื้ อหาคงที่ แน่ นอนและไม่ มี ลู ก เล่ นอะไรมากมายนักเนื่องจาก JavaScript ช่วยให้ผพฒนา สามารถสร้างเว็บเพจได้ตรงกับความต้องการ และ มีความ ู้ ัน่าสนใจมากขึ้น ประกอบกับเป็ นภาษาเปิ ด ที่ใครก็สามารถนาไปใช้ได้ ดังนั้นจึงได้รับความ นิยมเป็ นอย่างสู ง มีการใช้งานอย่างกว้างขวาง รวมทั้งได้ถูกกาหนดให้เป็ นมาตรฐานโดย ECMA ซึ่งเราจะพบว่าปั จจุบน จะหาเว็บเพจที่ไม่ใช้ JavaScript เลยนั้น ได้ยากเต็มทีการทางานของ JavaScript ัจะต้องมีการแปลความคาสั่ง ซึ่ งขั้นตอนนี้ จะถูกจัดการโดยบราวเซอร์ ดังนั้น JavaScript จึงสามารถทางานได้ เฉพาะบนบราวเซอร์ ที่สนับสนุน ซึ่ งปั จจุบน บราวเซอร์ เกือบทั้งหมดก็สนับสนุ น JavaS- ัcript แล้ว
  20. 20. 11 การทางานของ JavaScript เกิดขึ้นบนบราวเซอร์ ( เรี ยกว่าเป็ น client-side script ) ดังนั้น ไม่ว่าคุณจะใช้เซิ ร์ฟเวอร์ อะไร หรื อที่ไหน ก็ยงคงสามารถใช้ JavaScript ในเว็บเพจได้ ต่างกับภาษา ัสคริ ปต์อื่น เช่น Perl, PHP หรื อ ASP ซึ่ งต้องแปลความและทางานที่ตวเครื่ องเซิ ร์ฟเวอร์ ( เรี ยกว่า ัserver-side script ) ดังนั้นจึงต้องใช้บนเซิ ร์ฟเวอร์ ที่สนับสนุ นภาษาเหล่านี้ เท่านั้น อย่างไรก็ดี จากลักษณะดังกล่าวก็ทาให้ JavaScript มีขอจากัด คือไม่สามารถรับและส่ งขอ้ มูลต่างๆ กับเซิ ร์ฟเวอร์ ้โดยตรง เช่น การอ่านไฟล์จากเซิ ร์ฟเวอร์ เพื่อนามาแสดงบนเว็บเพจ หรื อรับข้อมูลจากผูชม เพื่อ ้นาไปเก็บบนเซิ ร์ฟเวอร์ เป็ นต้น ดังนั้นงานลักษณะนี้ จึงยังคงต้องอาศัยภาษา server-side script อยู่(ความจริ ง JavaScript ที่ทางานบนเซิ ร์ฟเวอร์ ก็มีซ่ ึ งต้องอาศัยเซิ ร์ฟเวอร์ ที่สนับสนุ นโดยเฉพาะเช่นกันแต่ไม่เป็ นที่นิยมนัก) รู ปภาพที่ 2.2 แสดงโค้ด JavaScript ในการกาหนดการเริ่ มแสดงของ Slider การทาางานของ JavaScript จะมีประสิ ทธิ ภาพมาก ถ้ามันสามารถดัดแปลงคุณสมบัติ ขององค์ประกอบต่างๆ บนเว็บเพจ (เช่น สี หรื อรู ปแบบของข้อความ) และสามารถรับรู้เหตุการณ์ ที่ผูชมเว็บเพจโต้ตอบกับองค์ประกอบเหล่านั้น (เช่น การคลิก หรื อเลื่อนเมาส์ไปวาง) ได้ ดังนั้นจาก ้ภาษา HTML เดิม ที่มีลกษณะสถิต ( Static ) ใน HTML เวอร์ ชนใหม่ๆ จึงได้มีการพัฒนาให้มี ั ั่คุณสมบัติบางอย่างเพิ่มขึ้น และมีลกษณะเป็ นออบเจ็ค "object" มากขึ้น การทางานร่ วมกันระหว่าง ัคุณสมบัติใหม่ของ HTML ร่ วมกับ JavaScript นี้เอง ทาให้เกิดเป็ นสิ่ งที่เรี ยกว่า Dynamic HTML คือภาษา HTML ที่สามารถใช้สร้างเว็บเพจที่มีลกษณะพลวัต ( Dynamic ) ได้นนเอง(วศิน เพิ่ม ั ั่ทรัพย์.2553)
  21. 21. 12 2.1.3 HTML HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์ กอัปข้ อความหลายมิติ) คือ ่ภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรื อข้อมูลอื่นที่เรี ยกดูผานทางเว็บเบราว์เซอร์เริ่ มพัฒนาโดย ทิม เบอร์ เนอรส์ ลี (Tim Berners Lee) สาหรับภาษา SGML ในปั จจุบน HTML เป็ น ัมาตรฐานหนึ่งของ ISO ซึ่ งจัดการโดย World Wide Web Consortium (W3C) ในปั จจุบน ทาง W3C ัผลักดัน รู ปแบบของ HTML แบบใหม่ ที่เรี ยกว่า XHTML ซึ่ งเป็ นลักษณะของโครงสร้าง XMLแบบหนึ่ งที่ มีหลักเกณฑ์ในการกาหนดโครงสร้ างของโปรแกรมที่ มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่ น 4.01 ที่ใช้กนอยูในปั จจุบนHTML ยังคงเป็ นรู ปแบบไฟล์อย่างหนึ่ ง สาหรับ ั ่ ั.html และ สาหรับ .htm ที่ใช้ในระบบปฏิบติการที่รองรับ รู ปแบบนามสกุล 3 ตัวอักษร ัตัวอย่าง โครงสร้างไฟล์ html รู ปภาพที่ 2.3 แสดงโค้ด HTML ในการสร้างตาราง---------------------------- ---------------------
  22. 22. 132.1.4 CSS CSS (Cascading Style Sheet) จัดเป็ นภาษาที่ใช้เป็ นส่ วนของการจัดรู ปแบบการ แสดงผลเอกสาร HTML โดยที่ CSS กาหนดกฎเกณฑ์ในการระบุรูปแบบ (หรื อ "Style") ของเนื้ อหา ในเอกสาร อันได้แก่ สี ของข้อความ สี พ้ืนหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่ งการกาหนดรู ปแบบ หรื อ Style นี้ ใช้หลักการของการแยกเนื้ อหาเอกสาร HTML ออกจากคาสั่งที่ใช้ใน ่ ัการจัดรู ปแบบการแสดงผล กาหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ข้ ึนอยูกบเนื้ อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรู ปแบบการแสดงผลลัพธ์ของเอกสารHTML โดยเฉพาะในกรณี ที่มีการเปลี่ ย นแปลงเนื้ อหาเอกสารบ่ อยครั้ งหรื อต้อ งการควบคุ ม ให้รู ป แบบการแสดงผลเอกสารHTML มีลกษณะของความสม่าเสมอทัวกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดย กฎเกณฑ์ ั ่ในการกาหนดรู ปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปี พ.ศ.2539 ในรู ปแบบของ CSS level 1 Recommendations ที่กาหนดโดย องค์กร World Wide Web Con-sortium หรื อ W3C (โสภาพร สุขภิรมย์ .2549) ั รู ปภาพที่ 2.4 แสดงโค้ด CSS กาหนดรู ปแบบให้กบ Body โดยในโครงงานจะมีการใช้ CSS stylesheet แบบ external ในการกาหนด tag <body> <a><img> เป็ นต้นโดยจะมีการกาหนดรู ปแบบต่างๆ เช่น กาหนดฟ้ อนต์เป็ น Arial, Helvetica, Verdana,sans-serif
  23. 23. 142.1.5 PHP PHP ( Professional Home Pages ) เป็ นภาษาจาพวก แปลความและดาเนินงานไปทีละ คาสั่งคาสั่งต่างๆ จะเก็บอยู่ในไฟล์ที่เรี ยกว่า สคริ ปต์ และเวลาใช้งานต้องอาศัยตัวแปลชุ ดคาสั่งตัวอย่างภาษาสคริ ปต์ก็เช่น JavaScript, Perl เป็ นต้น ลักษณะของ PHP ที่แตกต่างจากภาษาสคริ ปต์แบบอื่นๆ คือ PHP ได้รับการพัฒนาและออกแบบมาเพื่อใช้งานในการสร้างเอกสารแบบ HTML (Hyper Text Markup Language ) โดยสามารถสอดแทรกหรื อแก้ไขเนื้ อหาได้โดยอัตโนมัติ ดังนั้นจึงกล่าวว่า PHP เป็ นภาษาที่เรี ยกว่าสคริ ปต์ที่ทางานที่ฝั่งเครื่ องแม่ข่ายหรื อ HTML – EmbeddedScripting Language เป็ นเครื่ องมือสาคัญชนิ ดหนึ่ งที่ช่วยให้เราสามารถสร้างเอกสารแบบแรมแบบพลวัตHTML ได้อย่างมีประสิ ทธิ ภาพและมีลูกเล่นมากขึ้นทาให้สะดวกรวดเร็ วในการใช้งานเนื่ องจากว่า PHP ไม่ได้เป็ นส่ วนหนึ่ งของตัว เครื่ องแม่ข่าย ( Web Server ) ดังนั้นถ้าจะ ใช้ PHP ก็จะต้องดูก่อนว่าตัวเครื่ องแม่ข่ายนั้นสามารถใช้สคริ ปต์ PHP ได้หรื อไม่ยกตัวอย่างเช่ น PHPสามารถใช้ได้กบ โปรแกรมที่ทาหน้าที่เป็ นเครื่ องแม่ข่าย ( Apache Web Server ) และ Personal ัWeb Server ( PWS ) สาหรับระบบปฏิบติการ Windows 95/98/NT---------------------------- ั ในกรณี ของ Apache เราสามารถใช้ PHP ได้สองรู ปแบบคือ ในลักษณะของ Common ่ ่Gateway Interface ( CGI ) และ Apache เกณฑ์ในการวัด ความแตกต่างอยูตรงที่วา ถ้าใช้ PHP เป็ นแบบความรับผิดชอบต่อหน้าที่การทางาน PHP จะเป็ นส่ วนหนึ่งของ Apache หรื อเป็ นส่ วนขยายในการทางานนันเองซึ่ งจะทางานได้เร็ วกว่าแบบที่เป็ น CGI เพราะว่าถ้าเป็ น CGI แล้วตัวแปลชุดคาสั่ง ่ของ PHP ถือว่าเป็ นแค่โปรแกรมภายนอกซึ่ ง Apache จะต้องเรี ยกขึ้นมาทางานทุกครั้ง ที่ตองการใช้ ้PHP(ศรี ไพร ศักดิ์ร่ ุ งพงศากุล.2544)
  24. 24. 15รู ปภาพที่ 2.5 แสดงโค้ด HPH ในการเปลี่ยนรหัสผ่าน
  25. 25. 16 บทที่ 3 ขั้นตอนการศึกษา ขั้นตอนการศึกษาโครงงานสามารถแบ่งขั้นตอนการศึกษาออกเป็ น 5 ขั้นตอนดังรู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ คือ ขั้นตอนที่ 1 การระบุปัญหา ขั้นตอนที่ 2 การรวบรวมข้อมูลและการจัดการข้อมูล ขั้นตอนที่ 3 การวิเคราะห์ขอมูล ้ ขั้นตอนที่ 4 การสร้างตัวแบบ ขั้นตอนที่ 5 การนาตัวแบบมาใช้ และประเมิลผล การระบุปัญหา การรวบรวมข้อมูลและการ จัดการข้อมูล ปรับตัวแบบและเก็บข้อมูลเพิ่ม การวิเคราะห์ขอมูล ้ การสร้างตัวแบบ ทดสอบตัวแบบ ไม่พอใจคาตอบ วิเคราะห์ คาตอบ พอใจคาตอบ การนาตัวแบบมาใช้และการ ประเมินผล รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ
  26. 26. 17ขั้นตอนที่ 1 การระบุปัญหาความเป็ นมาและความสาคัญของปัญหา แฟ้ มสะสมผลงานเป็ นแหล่ งสะสมงาน หรื อหลักฐานที่นัก เรี ยน นักศึ กษาจะนาไปใช้ประกอบในการประเมินความรู้ ความสามารถ และทักษะของตัวนักเรี ยน นักศึกษาเองซึ่ งสามารถประเมินได้หลายคุณลักษณะ นักเรี ยน นักศึกษาสามารถนาแฟ้ มสะสมผลงานเพื่อใช้ในการเรี ยนต่อหรื อสมัครงาน แฟ้ มนี้ จะแสดงถึงความสามารถในด้านการเรี ยนและการทากิจกรรมพิเศษของนักเรี ยน นักศึกษา เพื่อใช้เป็ นหลักฐานประกอบการพิจารณาเข้าเรี ยนต่อหรื อทางาน ร่ วมกับการสอบหรื อการสัมภาษณ์เป็ นการพรี เซนต์ตนเองให้บุคคลอื่น ได้รู้จกตัวนักเรี ยน นักศึกษาเองมากขึ้น ั ปัญหาทีพบ ่ จากอดีตจนถึงปั จจุบนนี้ แฟ้ มสะสมผลงานมีอยู่ในรู ปแบบของเอกสารที่เป็ นเพียง ัแค่กระดาษ หรื อ รู ปภาพที่พิมพ์ผ่านเครื่ องพิมพ์เอกสารเท่านั้น อาจจะทาให้แฟ้ มสะสมผลงาน ดูเรี ยบๆไม่ค่อยน่ าสนใจเท่าที่ควร อีกทั้งนักเรี ยน นักศึกษาบางคนยังมีผลงานที่เป็ นแอนิ เมชันหรื อมัลติมีเดี ย ซึ่ งไม่สามารถนาเสนอผ่านเอกสารที่ เป็ นกระดาษได้ แฟ้ มสะสมผลงานที่เป็ นกระดาษต้องเก็บรวบรวมใส่ ไว้ในแฟ้ ม ถ้านักเรี ยน นักศึกษามีผลงานมากแฟ้ มก็จะมีขนาดใหญ่และลาบาก ั ้ ้ต่อการนาเสนอ จึ ง คารที่ จะมี เครื่ องมื อที่ อานวยความสะดวกสบายให้กบผูท่ี ตองการสร้ างแฟ้ มสะสมผลงาน แนวทางแก้ไข เว็บไซต์ มาย พอร์ ตโฟลิ โอ มีระบบที่เข้ามาช่ วยรองรับปั ญหาต่างๆ เหล่านี้ เพื่อช่วยสร้างและเผยแพร่ แฟ้ มสะสมผลงานในรู ปแบบของเว็บไซต์ ให้นกเรี ยน นักศึกษา สามารถนา ัข้อมูลผลงานเข้ามาเก็บรวบรวมได้หลากหลายรู ปแบบ เช่ น ภาพถ่าย ภาพวีดิทศน์ เอกสารต่างๆ ัเสี ยง แอนิ เมชันและไฟล์มลติ มีเดี ยต่างๆ โดยผลงานเหล่ านี้ จะถูกนาเสนอผ่านหน้าเว็บไซต์ บน ัเครื อข่ายอินเตอร์ เน็ต เพื่อแสดงออก ถึงศักยภาพของนักเรี ยน นักศึกษาจะทาให้สะดวกสบายในการนาเสนอผลงาน เพราะสามารถนาเสนอผลงานผ่านคอมพิวเตอร์ โน๊ตบุค หรื อแท็บเล็ตได้ทาให้การนาเสนอมี ป ระสิ ทธิ ภาพและมี ความน่ าสนใจมากขึ้ น อี กทั้ง ยังสามารถปรั บปรุ งแก้ไขผลงานได้สะดวกรวดเร็ วทันทีที่ตองการ้
  27. 27. 18 ขั้นตอนที่ 2 การรวบรวมข้ อมูลและการจัดการข้ อมูล Web Server Admin Input Document PC Document Output User รู ปภาพที่ 3.2 ภาพตัวอย่างโดยรวมของระบบที่ตองการพัฒนา ้ การวิเคราะห์ระบบมีจุดประสงค์ในการทาความเข้าใจกับระบบงานปั จจุบนเพื่อเป็ น ัแนวทางในการออกแบบใหม่ โดยนักวิเคราะห์ระบบทาการศึกษาระบบปั จจุบนอย่างละเอียด และ ัหาความต้องการของระบบใหม่ที่จะพัฒนา ในขั้นตอนนี้ จะเกี่ยวข้องกับระบบการเก็บรวบรวมข้อมูล การวิเคราะห์ขอมูลที่รวบรวมมา การวิเคราะห์กระบวนการต่างๆในระบบ การวิเคราะห์ ้ลักษณะของผลลัพธ์ และสิ่ งที่นาเข้า เพื่อศึกษาถึงขั้นตอนการทางานของระบบปั จจุบน และ ั ่วิเคราะห์วามีงานใดบ้างที่มีปัญหาเกิดขึ้นควรปรับปรุ งหรื อจะมีแนวทางในการแก้ปัญหาอย่างไร เป็ นกระบวนการในการเก็บ รวบรวมข้อมู ล ข้อเท็จจริ ง และสารสนเทศของระบบแบบดั้งเดิมที่ยงนิ ยมใช้กนอยู่ เช่ น การศึกษาจากเอกสาร แบบฟอร์ ม และฐานข้อมูลที่ใช้อยู่ในปั จจุบน ั ั ัการค้นคว้า การสังเกตการณ์ การจัดทาแบบสอบถาม และการสัมภาษณ์ เป็ นต้นการออกแบบระบบเป็ นขั้นตอนที่สาคัญขั้นตอนหนึ่ งของการพัฒนาระบบสารสนเทศหากทาการออกแบบระบบได้ดีจะทาให้บรรลุไปถึงวัตถุประสงค์ของการพัฒนาระบบทาให้การพัฒนาระบบเป็ นไปได้อย่างมีประสิ ทธิ ภาพซึ่ งการออกแบบระบบจะครอบคลุ มถึ งการออกแบบกระบวนการ
  28. 28. 19ทางานของระบบส่ วนสาคัญของเครื่ องมือที่ใช้คือแผนภาพโครงสร้างระบบเพื่อวิเคราะห์สิ่งที่นาเข้าและสิ่ งที่นาออกจากระบบ ขั้นตอนที่ 3 การวิเคราะข้ อมูล ในการออกแบบระบบเป็ นอีกขั้นตอนหนึ่ งที่ สาคัญมากในการพัฒนาระบบเพราะจะต้อง ้ ่ทราบถึงวัตถุประสงค์ของผูใช้วามีความต้องการแบบไหนและมีปัญหาอะไรบ้าง นาจุดนั้นมาแก้ไขและปรั บ ปรุ ง ให้ ดี ข้ ึ น จากระบบเดิ ม เพื่ อ น าไปใช้วิ เ คราะห์ ใ นการออกแบบงานใหม่ ใ ห้ มีประสิ ทธิ ภาพมากขึ้น ซึ่งการออกแบบระบบ แบ่งการออกแบบขบวนการเก็บและใช้ขอมูลออกแบบ ้ด้วย แผนผังและแผนภูมิ โดยมีรายละเอียดของแต่ละส่ วนในส่ วนของกระบวนการทางานของระบบการทางาน ดังนี้3.1 แผนภาพบริบท (Context Diagram) แสดงให้เห็ นถึ งการติ ดต่อการใช้ขอมูล ระหว่างผูใช้ที่เป็ นสมาชิ กกับเว็บไซต์ให้บริ การ ้ ้ระบบจัดการร้านอาหารและการเรี ยกใช้ขอมูลต่างๆ บนเว็บไซต์ ้ Portfilio Portfilio รู ปภาพที่ 3.3 แผนภาพบริ บท(Context Diagram)
  29. 29. 203.2 แผนภาพกระแสข้ อมูล ( Data Flow Diagram) แผนภาพกระแสข้อมูลแสดงรายละเอียดต่างๆ ของการทางานของ ระบบเว็บไซต์ให้บริ การระบบจัดการ Portfolio . D รู ปภาพที่ 3.4 การสมัครสมาชิก รูปภาพที่ 3.5 การเข้ าสูระบบสมาชิก ่ รู ปภาพที่ 3.6 การแก้ไขข้อมูลสมาชิก รู ปภาพที่ 3.7 การจัดการโปรไฟล์
  30. 30. 21รู ปภาพที่ 3.8 การดูโปรไฟล์ส่วนตัว รู ปภาพที่ 3.9 Manangment รู ปภาพที่ 3.10 ดู Gallery รู ปภาพที่ 3.11 แสดงการลืมรหัส
  31. 31. 22 รู ปภาพที่ 3.12 ระบบAdminรู ปภาพที่ 3.13 บริ หารสามชิก บริ หารบทความ
  32. 32. 233.3 แผนภาพแสดงความสั มพันธ์ ระหว่างเอนทิตี ( Entity-Relationship Diagrams: ERD ) รู ปภาพที่ 3.14 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตีและแอททริ บิวต์
  33. 33. 24 AdminAdmin รู ปที่ 3.15 Use Case Diagram
  34. 34. 253.4 ตารางฐานข้ อมูล (Data Table) ตารางฐานข้อมูลของระบบเว็บไซต์ให้บริ การระบบจัดการร้านอาหารเป็ นตารางแสดงการรวมกลุ่มของคุณสมบัติในฐานข้อมูล หรื อ ไฟล์ชื่อของตารางต่างๆ ดังนี้ ชื่ อตาราง OnOffLine วัตถุประสงค์ แสดงสถานะออฟไลน์ออนไลน์ แฟมทีเ่ กียวข้ อง ้ ่ ลา ข ป ค่า ค่า ป คุณสมบัติ คาอธิบาย ดับ นาด ระเภท เบื้องต้น ว่าง/NULL ระเภทคีย ์ I NOT 1 P 1 Status_id ไอดีสถานะ nt - NULL 5 K 2 Status_name ชื่อสถานะ V - NOT 0 - archar NULL ตารางที่ 3.1 แสดงประเภทของผลงาน ชื่อตาราง tbladministrators วัตถุประสงค์ เพื่อเก็บข้อมูลของผูดูแลระบบ ้ แฟมทีเ่ กียวข้ อง ้ ่ ลา ข ป ค่า ค่า ป คุณสมบัติ คาอธิบาย ดับ นาด ระเภท เบื้องต้น ว่าง/NULL ระเภทคีย ์ 2 NOT V P 1aUserName ชื่อเข้าระบบ 5 - NULL archar K 2 aPassword รหัสผ่าน 1 - NOT Varchar - 00 NULL ตารางที่ 3.2 แสดงแฟ้ มข้อมูลของผูดูแลระบบ ้
  35. 35. 26ชื่อตาราง tblCategoriesวัตถุประสงค์ ประเภทของผลงานแฟมทีเ่ กียวข้ อง ้ ่ tblMember ลา ข ป ค่า ค่า ป คุณสมบัติ คาอธิบาย ดับ นาด ระเภท เบื้องต้น ว่าง/NULL ระเภทคีย ์ Int 1 catID IDประเภทชื่อรู ป 11 Autoincrement NOT NULL PK Varchar 2 mUserName ชื่อผูใช้ 25 - NOT NULL - Varchar 3 linktext ลิ้งค์เว็บไซต์ 255 - - - Int 4 show ตาแหน่งที่แสดง 11 - - - Varchar 5 catName ชื่อประเภท 255 - NOT NULL - I 6 ContShow แสดงไม่แสดง 1 - - - nt ตารางที่ 3.3 แสดงประเภทของผลงานชื่อตาราง tblContentวัตถุประสงค์ แสดงบทความแฟมทีเ่ กียวข้ อง ้ ่ ลา ข ป ค่า ค่า ป คุณสมบัติ คาอธิบาย ดับ นาด ระเภท เบื้องต้น ว่าง/NULL ระเภทคีย ์ รหัสบทความ 11 Int 1 idCon รหัสประเภท Autoincrement NOT NULL PK 20 Int 2 topID บทความ - NOT NULL - 250 Varchar 3 nameCon ชื่อบทความ - - - - Text 4 detailCon รายละเอียด - - - 255 Varchar 5 dateCon บทความ - NOT NULL - 1 I 6 Contshow วันที่เขียน - - - 1 nt ลาดับที่แสดง ตารางที่ 3.4 แสดงบทความ
  36. 36. 27ชื่อตาราง tbleducationวัตถุประสงค์ แสดงประวัติการศึกษาแฟมทีเ่ กียวข้ อง ้ ่ tblmember , tblmemberdetail ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ค่าว่าง/NULL ประเภทคีย ์ 1 mUserName ชื่อผูใช่ ้ 25 Varchar - NOT NULL PK 2 pEducationH การศึกษาสูงสุด 255 Varchar - NOT NULL - 3 pUniversity จากมหาวิทยาลัย 255 Varchar - NOT NULL - 4 pFaculty คณะ 255 Varchar - NOT NULL - 5 pBranch สาขา 255 Varchar - NOT NULL - 6 pUStatus สถานะ 255 Varchar - NOT NULL - 7 pUniyear ปี ที่จบ 255 Varchar - NOT NULL - 8 pSchoolpai โรงเรี ยนมัธยม 255 Varchar - NOT NULL - 9 pCoursepai สาย 255 Varchar - NOT NULL - 10 pSchyearpai ปี ที่จบ ม.ปลาย 255 Varchar - NOT NULL - 11 pSchoolton โรงเรี ยนมัธยม 255 Varchar - NOT NULL - 12 pCourseton สาย 255 Varchar - NOT NULL - 13 pSchyearton ปี ที่จบ ม.ปลาย 255 Varchar - NOT NULL ตารางที่ 3.5 แสดงประวัติการศึกษาชื่อตาราง tblFileวัตถุประสงค์ ประวัติแฟมทีเ่ กียวข้ อง ้ ่ tblMemberลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ค่าว่าง/NULL ประเภทคีย ์ 1 FileID รหัวไฟล์ 11 Int Au- NOT NULL PK 2 mUserName ชื่อผูใช้ ้ 50 Varchar to_increment - NOT NULL - 3 File_Name ชื่อไฟล์ 250 Varchar - NOT NULL - 4 File_Type ชนิด 10 Varchar - NOT NULL - 5 File_Size ขนาด 10 Varchar - NOT NULL - 6 File_Content Part - longblob - NOT NULL - ตารางที่ 3.6 แสดงประเภทของประวัติ
  37. 37. 28ชื่ อตาราง tblGroupวัตถุประสงค์ กลุ่มแฟมทีเ่ กียวข้ อง ้ ่ tblMember ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ค่าว่าง/NULL ประเภทคีย ์ 1 gID รหัสกลุ่ม 11 Int Autoincrement NOT NULL PK 2 mUserName ชื่อผูใช้ ้ 25 Varchar - NOT NULL - 3 gName ชื่อกลุ่ม 255 Varchar - NOT NULL - ตารางที่ 3.7 แสดงกลุ่มชื่ อตาราง tblimagesวัตถุประสงค์ ผลงานแฟมทีเ่ กียวข้ อง ้ ่ tblMember ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ค่าว่าง/NULL ประเภทคีย ์ 1 Image_id รหัสรู ป 11 Int Autoincrement PK NOT NULL 2 mUserName ชื่อผูใช้ ้ 25 Varchar – - NOT NULL 3 filename ชื่อรู ป Longblob - - NOT NULL 4 thumbname ชื่อรู ปresize 50 Varchar - ตารางที่ 3.8 แสดงรู ปชื่ อตาราง tblmemberวัตถุประสงค์ ผลงานแฟมทีเ่ กียวข้ อง ้ ่ tblMemberลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ค่าว่าง/NULL ประเภทคีย ์ 1 mNumber ลาดับสมาชิก 11 Int Autoincrement NOT NULL PK 2 mUserName ชื่อเข้าระบบ 25 Varchar - NOT NULL - 3 mPassword รหัสผ่าน 100 Varchar - NOT NULL - 4 mEmail อีเมลล์ 255 Varchar NOT NULL 5 mQuestion คาถาม 255 Varchar NOT NULL 6 mAnswer คาตอบ 255 Varchar NOT NULL ตารางที่ 3.9 แสดงสมาชิก

×