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

1. 1
เว็บไซต์ แฟมสะสมผลงาน ออนไลน์
้
Portfolio Online
โดย
นายอุเทน จันทรกานต์ รหัส 52018818
นายวงษ์ สฤษฏ์ ไชยธรรม รหัส 52039013
โครงงานนีเ้ ป็ นส่ วนหนึ่งของการศึกษาหลักสู ตรวิทยาศาสตรบัณฑิต
สาขาวิชาเทคโนโลยีสารสนเทศและการสื่ อสาร คณะเทคโนโลยีสารสนเทศ
มหาวิทยาลัยศรีปทุม พ.ศ.2555

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

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

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. ง
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. จ
สารบัญรู ป
หน้า
รู ปภาพที่ 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. ฉ
รู ปภาพที่ 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. ช
สารบัญตาราง
หน้า
ตารางที่ 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. 1

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

11. 2
1.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. 3
1.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. 4
1.3.8 ระบบการให้คะแนนของผลงาน
1.3.9 ระบบตรวจสอบความเหมาะสมของผลงาน
1.3.10 ระบบแชร์ ผลงาน ผ่าน เฟสบุค ทวิทเตอร์
๊

14. 5
1.4 นิยามศัพท์เฉพาะ
Portfolio = แฟ้ มสะสมผลงาน
Login = เป็ นการใส่ "ชื่อสมาชิก" และ "รหัสผ่าน" เพื่อทา
การตรวจสอบข้อมูลของท่านสมาชิ กก่ อนการ
เข้าสู่ ระบบ

15. 6
1.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. 7
ตารางแสดงแผนดาเนินการ ระยะเวลาดาเนินการ
เม.ย.-55
ก.พ.-55
พ.ค.-55
ส.ค.-55
ม.ค.-55
มี.ค.-55
ก.ค.-55
มิ.ย.-55
ก.ย.-55
ลาดับ กิจกรรม
1 ศึกษาแนวคิด ทฤษฎีและเอกสารที่เกี่ยวข้อง
2 ศึกษาเทคโนโลยีที่จะใช้
3 การระบุปัญหา
4 การรวบรวมข้อมูลและการจัดการข้อมูล
5 การวิเคราะห์ขอมูลหรื อการออกแบบระบบและโปรแกรม
้
6 การสร้างตัวแบบหรื อการพัฒนาโปรแกรม
7 ทดสอบติดตั้งระบบหรื อการทดสอบตัวแบบ
8 จัดทาเอกสาร
หมายเหตุ แทนระยะเวลาดาเนินการ
ตารางที่ 1.1 ตารางแสดงแผนการดาเนินงาน

17. 8
1.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. 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. 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. 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. 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. 13
2.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. 14
2.1.5 PHP
PHP ( Professional Home Pages ) เป็ นภาษาจาพวก แปลความและดาเนินงานไปทีละ คา
สั่งคาสั่งต่างๆ จะเก็บอยู่ในไฟล์ที่เรี ยกว่า สคริ ปต์ และเวลาใช้งานต้องอาศัยตัวแปลชุ ดคาสั่ง
ตัวอย่างภาษาสคริ ปต์ก็เช่น JavaScript, Perl เป็ นต้น ลักษณะของ PHP ที่แตกต่างจากภาษาสคริ ปต์
แบบอื่นๆ คือ PHP ได้รับการพัฒนาและออกแบบมาเพื่อใช้งานในการสร้างเอกสารแบบ HTML (
Hyper Text Markup Language ) โดยสามารถสอดแทรกหรื อแก้ไขเนื้ อหาได้โดยอัตโนมัติ ดังนั้น
จึงกล่าวว่า PHP เป็ นภาษาที่เรี ยกว่าสคริ ปต์ที่ทางานที่ฝั่งเครื่ องแม่ข่ายหรื อ HTML – Embedded
Scripting 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. 15
รู ปภาพที่ 2.5 แสดงโค้ด HPH ในการเปลี่ยนรหัสผ่าน

25. 16
บทที่ 3
ขั้นตอนการศึกษา
ขั้นตอนการศึกษาโครงงานสามารถแบ่งขั้นตอนการศึกษาออกเป็ น 5 ขั้นตอนดังรู ปภาพ
ที่ 3.1 ขั้นตอนการศึกษาตัวแบบ คือ
ขั้นตอนที่ 1 การระบุปัญหา
ขั้นตอนที่ 2 การรวบรวมข้อมูลและการจัดการข้อมูล
ขั้นตอนที่ 3 การวิเคราะห์ขอมูล
้
ขั้นตอนที่ 4 การสร้างตัวแบบ
ขั้นตอนที่ 5 การนาตัวแบบมาใช้ และประเมิลผล
การระบุปัญหา
การรวบรวมข้อมูลและการ
จัดการข้อมูล
ปรับตัวแบบและเก็บข้อมูลเพิ่ม การวิเคราะห์ขอมูล
้
การสร้างตัวแบบ
ทดสอบตัวแบบ
ไม่พอใจคาตอบ
วิเคราะห์
คาตอบ พอใจคาตอบ
การนาตัวแบบมาใช้และการ
ประเมินผล
รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ

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

27. 18
ขั้นตอนที่ 2 การรวบรวมข้ อมูลและการจัดการข้ อมูล
Web Server
Admin
Input Document
PC Document Output
User
รู ปภาพที่ 3.2 ภาพตัวอย่างโดยรวมของระบบที่ตองการพัฒนา
้
การวิเคราะห์ระบบมีจุดประสงค์ในการทาความเข้าใจกับระบบงานปั จจุบนเพื่อเป็ น
ั
แนวทางในการออกแบบใหม่ โดยนักวิเคราะห์ระบบทาการศึกษาระบบปั จจุบนอย่างละเอียด และ
ั
หาความต้องการของระบบใหม่ที่จะพัฒนา ในขั้นตอนนี้ จะเกี่ยวข้องกับระบบการเก็บรวบรวม
ข้อมูล การวิเคราะห์ขอมูลที่รวบรวมมา การวิเคราะห์กระบวนการต่างๆในระบบ การวิเคราะห์
้
ลักษณะของผลลัพธ์ และสิ่ งที่นาเข้า เพื่อศึกษาถึงขั้นตอนการทางานของระบบปั จจุบน และ
ั
่
วิเคราะห์วามีงานใดบ้างที่มีปัญหาเกิดขึ้นควรปรับปรุ งหรื อจะมีแนวทางในการแก้ปัญหาอย่างไร
เป็ นกระบวนการในการเก็บ รวบรวมข้อมู ล ข้อเท็จจริ ง และสารสนเทศของระบบแบบ
ดั้งเดิมที่ยงนิ ยมใช้กนอยู่ เช่ น การศึกษาจากเอกสาร แบบฟอร์ ม และฐานข้อมูลที่ใช้อยู่ในปั จจุบน
ั ั ั
การค้นคว้า การสังเกตการณ์ การจัดทาแบบสอบถาม และการสัมภาษณ์ เป็ นต้น
การออกแบบระบบเป็ นขั้นตอนที่สาคัญขั้นตอนหนึ่ งของการพัฒนาระบบสารสนเทศหากทาการ
ออกแบบระบบได้ดีจะทาให้บรรลุไปถึงวัตถุประสงค์ของการพัฒนาระบบทาให้การพัฒนาระบบ
เป็ นไปได้อย่างมีประสิ ทธิ ภาพซึ่ งการออกแบบระบบจะครอบคลุ มถึ งการออกแบบกระบวนการ

28. 19
ทางานของระบบส่ วนสาคัญของเครื่ องมือที่ใช้คือแผนภาพโครงสร้างระบบเพื่อวิเคราะห์สิ่งที่นาเข้า
และสิ่ งที่นาออกจากระบบ
ขั้นตอนที่ 3 การวิเคราะข้ อมูล
ในการออกแบบระบบเป็ นอีกขั้นตอนหนึ่ งที่ สาคัญมากในการพัฒนาระบบเพราะจะต้อง
้ ่
ทราบถึงวัตถุประสงค์ของผูใช้วามีความต้องการแบบไหนและมีปัญหาอะไรบ้าง นาจุดนั้นมาแก้ไข
และปรั บ ปรุ ง ให้ ดี ข้ ึ น จากระบบเดิ ม เพื่ อ น าไปใช้วิ เ คราะห์ ใ นการออกแบบงานใหม่ ใ ห้ มี
ประสิ ทธิ ภาพมากขึ้น ซึ่งการออกแบบระบบ แบ่งการออกแบบขบวนการเก็บและใช้ขอมูลออกแบบ ้
ด้วย แผนผังและแผนภูมิ โดยมีรายละเอียดของแต่ละส่ วนในส่ วนของกระบวนการทางานของ
ระบบการทางาน ดังนี้
3.1 แผนภาพบริบท (Context Diagram)
แสดงให้เห็ นถึ งการติ ดต่อการใช้ขอมูล ระหว่างผูใช้ที่เป็ นสมาชิ กกับเว็บไซต์ให้บริ การ
้ ้
ระบบจัดการร้านอาหารและการเรี ยกใช้ขอมูลต่างๆ บนเว็บไซต์
้
Portfilio
Portfilio
รู ปภาพที่ 3.3 แผนภาพบริ บท(Context Diagram)

29. 20
3.2 แผนภาพกระแสข้ อมูล ( Data Flow Diagram)
แผนภาพกระแสข้อมูลแสดงรายละเอียดต่างๆ ของการทางานของ ระบบเว็บไซต์ให้บริ การ
ระบบจัดการ Portfolio
.
D
รู ปภาพที่ 3.4 การสมัครสมาชิก
รูปภาพที่ 3.5 การเข้ าสูระบบสมาชิก
่
รู ปภาพที่ 3.6 การแก้ไขข้อมูลสมาชิก
รู ปภาพที่ 3.7 การจัดการโปรไฟล์

30. 21
รู ปภาพที่ 3.8 การดูโปรไฟล์ส่วนตัว
รู ปภาพที่ 3.9 Manangment
รู ปภาพที่ 3.10 ดู Gallery
รู ปภาพที่ 3.11 แสดงการลืมรหัส

31. 22
รู ปภาพที่ 3.12 ระบบAdmin
รู ปภาพที่ 3.13 บริ หารสามชิก บริ หารบทความ

32. 23
3.3 แผนภาพแสดงความสั มพันธ์ ระหว่างเอนทิตี ( Entity-Relationship Diagrams: ERD )
รู ปภาพที่ 3.14 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตีและแอททริ บิวต์

33. 24
Admin
Admin
รู ปที่ 3.15 Use Case Diagram

34. 25
3.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. 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. 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. 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 แสดงสมาชิก

38. 29
ชื่อตาราง tblmemberdetail
วัตถุประสงค์ ผลงาน
แฟมทีเ่ กียวข้ อง
้ ่ tblMember
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ค่าว่าง/NULL ประเภทคีย ์
1 mUserName ชื่อเข้าระบบ 25 Varchar - - PK
2 mdName ชื่อจริ ง 255 Varchar - - -
3 mdSurname นามสกุล 255 Varchar - - -
4 mdaddress ที่อยู่ 255 Varchar - - -
5 mdDistrict เขต/อาเภอ 255 Varchar - - -
6 mdProvince จังหวัด 255 Varchar - - -
7 mdZipcode รหัสไปรษณี ย ์ 5 Varchar - - -
8 mdPhone เบอร์โทร 10 Varchar - - -
9 CreateDate วันที่สมัคร - Dateime - - -
10 LastLogin ล็อกอินล่าสุด - Dateime - - -
11 LastLogout ล็อกเอาท์ล่าสุด - Dateime - - -
12 FreqLogin จานวนที่ลอกอิน็ 6 Smallint - - -
13 Status สถานะออนไลน์ 1 Int - - -
14 Block ระงันผูใช้ ้ 1 Int - - -
15 editCou จานวนที่แก้ไข 11 Int - - -
16 show แสดงฝไม่แสดง 11 Int - - -
17 pColor สี 25 Varchar - - -
18 pBG พื้นหลัง 255 Varchar - - -
19 pHD Header 255 Varchar - - -
ตารางที่ 3.10 แสดงรายละเอียดสมาชิก