ผลงานของนักศึกษาระดับปริญญาตรีคณะเทคโนโลยีสารสนเทศ สาขาไอซีที (ICT) มหาวิทยาลัยศรีปทุม บางเขน

1. เว็บแอพพลิเคชัน มิวสิ ค โซเชียล
่
Music Social
โดย
นายคมสัน ไผ่งาม รหัส 52018096
นายปิ ยกุล รุ่ งแกร รหัส 52026730
โครงงานนี้เป็ นส่ วนหนึ่งของการศึกษาหลักสู ตรวิทยาศาสตร์ บณฑิต
ั
สาขาวิชาเทคโนโลยีสารสนเทศและการสื่ อสารคณะเทคโนโลยีสารสนเทศ
มหาวิทยาลัยศรี ปทุม
พ.ศ.2554

2. ก
มหาวิทยาลัยศรี ปทุม
คณะเทคโนโลยีสารสนเทศ
โครงงาน
ของ
นาย คมสัน ไผ่งาม รหัส 52018096
นาย ปิ ยกุล รุ่ งแกร รหัส 52026730
เรื่ อง
เว็บไซต์สังคมเพลง มิวสิ ค โซเชียล
(Music Social)
ได้รับการตรวจสอบและอนุ มติให้เป็ นส่ วนหนึ่งของการศึกษาตามหลักสู ตรวิทยาศาสตร์ บณฑิต
ั ั
สาขาวิชาเทคโนโลยีสารสนเทศและการสื่ อสาร
เมื่อ วันที่ 23 กันยายน พ.ศ. 2555
ประธานกรรมการ _____________________________
( )
กรรมการ _____________________________
( )
กรรมการและอาจารย์ที่ปรึ กษา _____________________________
( )
กรรมการและเลขานุการ _____________________________
( )

3. ข
บทคัดย่อ ระบบเว็บไซต์สังคมเพลง มิวสิ ค โซเชียล
(Music Social, จานวน 40 หน้า)
โดย นายคมสัน ไผ่งาม รหัส 52018096
นายปิ ยกุล รุ่ งแกร รหัส 52026730
อาจารย์ทปรึกษา อาจารย์ชฎาพร เกตุมณี
ี่
โครงงาน ระบบเว็บไซต์สังคมเพลง มิ วสิ ค โซเชี ย ล มี จุดประสงค์ในการจัดท าเพื่ อเป็ น
เว็บไซต์เพื่อศึกษาระบบ เว็บแอพพลิเคชัน และเป็ นการพัฒนาทางด้านการให้บริ การอีกทางด้านหนึ่ ง
่
ของโซเชียล เน็ตเวิร์กที่ช่วยให้ผที่สนใจในการหาสังคมใหม่ๆ ที่สามารถแชร์ เสี ยงหรื อเพลง รู ปภาพที่
ู้
ตัวเองมีให้ผอื่นได้ฟังได้ดู ได้แลกเปลี่ ยนความคิดเห็นเป็ นสังคมออนไลน์ที่เข้ามาเป็ นส่ วนหนึ่ งใน
ู้
ชี วิต ประจ าวัน ของใครหลายๆคนในปั จ จุ บ ัน เหมื อนเป็ นโลกอี ก โลกหนึ่ ง ที่ ใ ช้ใ นการแสดง
ความสามารถแชร์ให้ผอื่นได้
ู้
เว็บไซต์ที่ได้พฒนาขึ้นมานี้ เป็ นการทางานผ่านทางอินเตอร์ เน็ต โดยใช้ภาษา Ruby ในการ
ั
เขียนโปรแกรม ซึ่งสามารถเชื่อมต่อกับฐานข้อมูล SQLite ได้
ในการจัดทาโครงงานนี้ได้นาโปรแกรมสาเร็ จรู ปมาใช้ในการเขียนโปรแกรม เช่น Ruby on
Rails, SQLite เข้ามาช่วยในการพัฒนาระบบซึ่ งประกอบไปด้วย 2 ส่ วนคือ ส่ วนแรก จะนาโปรแกรม
สาเร็ จรู ปมาช่วยในการออกแบบหน้าจอ (Webpage) ที่ใช้ติดต่อกับผูใช้ ส่ วนที่สอง ตัวโปรแกรมของ
้
ระบบนาเอาภาษา HTML, Ruby มาช่วยในการเขียนโปรแกรมในส่ วนต่างๆ เช่น การเข้าสู่ ระบบ การ
อัพโหลดรู ปภาพ การแสดงความคิดเห็นต่างๆ เป็ นต้น ซึ่งสามารถทาการติดต่อกับฐานข้อมูลได้อย่าง
สมบูรณ์และมีประสิ ทธิภาพ
จากการพัฒนาโครงงานนี้ ทาให้สามารถให้บริ การแก่ผูใช้งานด้านความบันเทิงทางสังคมบน
้
โลกออนไลน์ ได้อย่างสะดวกและรวดเร็ ว ระบบสามารถตอบสนองความต้องการของผูใช้งานได้
้

4. ค
กิตติกรรมประกาศ
ผูจดทาโครงงาน เว็บไซต์สังคมเพลง มิวสิ ค โซเชียล (Music Social) จะเกิดขึ้นไม่ได้ถาหาก
้ั ้
ขาดการสนับสนุนจาก บุคคลหลายท่าน ผูจดทาโครงงานจึงใคร่ ขอขอบคุณท่านต่างๆ ดังนี้
้ั
ขอขอบพระคุณอาจารย์ทุกท่านที่มีส่วนให้โครงงานนี้ ผานไปได้ดวยดี รวมถึงความรู้ในทาง
่ ้
วิชาการและประสบการณ์ชีวตในด้านต่างๆ
ิ
ขอขอบพระคุณอาจารย์ อาจารย์ชฎาพร เกตุมณี อาจารย์ที่ปรึ กษาสาหรับโครงงาน ที่คอย
ช่วยเหลือ ให้คาแนะนาต่างๆ จนทาให้โครงงานประสบความสาเร็ จไปได้ดวยดี
้
ขอกราบขอบพระคุณบิดามารดา ครอบครัว รวมถึงญาติทุกคน ของผูจดทาโครงงานที่คอย
้ั
เป็ นกาลังใจให้ตลอดเวลา สนับสนุ นทางด้านค่าใช้จ่ายในการจัดทาโครงงานนี้ คอยอบรมสั่งสอน
ชี้แนะสิ่ งต่างๆให้ผจดทาได้ประสบความสาเร็ จจนถึงทุกวันนี้
ู้ ั
ขอขอบคุณเพื่อนๆ พี่ๆที่คอยให้กาลังใจ คอยช่ วยเหลื อให้คาแนะนาปรึ กษา และให้ความ
ช่วยเหลือในการจัดทาโครงงานนี้ ตลอดเวลา และขอบคุณคณะเทคโนโลยีสารสนเทศ ที่มีวิชานี้ ข้ ึนมา
เพื่อให้ผจดทาได้พฒนาเว็บไซต์ของตนเองขึ้นมา โดยใช้ความรู ้ และประสบการณ์ที่ได้เรี ยนมาทั้งสิ้ น
ู้ ั ั
มาใช้ในการเขียนโปรแกรมจนสาเร็ จลุล่วงไปได้ดวยดี
้

5. ง
คานา
การจัดทาโครงงาน “เว็บไซต์สังคมเพลง มิวสิ ค โซเชียล” นี้ เป็ นส่ วนหนึ่ งของวิชา ICT 492
โครงงานคอมพิ วเตอร์ (Computer Project Preparation) ของหลัก สู ตรวิทยาศาสตร์ บณฑิ ต
ั
คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรี ปทุม สาหรับนักศึกษาปี สุ ดท้าย เพื่อให้นกศึกษาได้นา
ั
ความรู ้ ที่เรี ยนมาทั้งหมดมาประยุกต์ใช้ในการพัฒนาระบบเป็ นการทดสอบความรู ้ ความสามารถและ
การเพิ่มประสบการณ์ก่อนสาเร็ จการศึกษาจากสถาบัน
โครงงาน “เว็บไซต์สังคมเพลง มิวสิ ค โซเชี ยล” จัดทาขึ้นเพื่อเป็ นการเพิ่มช่ องทางในการหา
สังคมความบันเทิง บนโลกอินเตอร์ เน็ตอีกเว็บ หนึ่ ง โดยผูใช้สามารถติดตามการโพสข้อความ การ
้
อัพเดทเพลงการแชร์รูปของคนที่เราสนใจได้
ทั้งนี้ ผูจดทาโครงงานหวังเป็ นอย่างยิ่งว่าเว็บไซต์น้ ี อาจเป็ นประโยชน์ต่อผูที่มีความสนใจใน
้ั ้
การพัฒนาเว็บไซต์ หรื อผูที่สนใจ ได้มาศึกษาเพิ่มเติมพร้อมทั้งได้นาแนวทางไปพัฒนาต่อยอดให้เกิด
้
ประโยชน์ยงๆ ขึ้นไป
ิ่
นายคมสัน ไผ่งาม
นายปิ ยกุล รุ่ งแกร
กันยายน 2555

6. จ
สารบัญ
หน้ า
หน้าอนุมติั ก
บทคัดย่อ ข
กิตติกรรมประกาศ ค
คานา ง
สารบัญ จ
สารบัญรู ป ช
สารบัญตาราง ฌ
บทที่ 1 บทนา
1.1 ความเป็ นมาและความสาคัญของปั ญหา 1
1.2 วัตถุประสงค์ 1
1.3 ขอบเขตการศึกษา 2
1.4 นิยามศัพท์เฉพาะ 2
1.5 ประโยชน์ที่คาดว่าจะได้รับ 2
1.6แผนการดาเนินงาน 3
1.7 เครื่ องมือที่คาดว่าจะต้องใช้ 3
บทที่ 2 แนวคิด ทฤษฎีและเอกสารที่เกี่ยวข้อง
2.1 เทคโนโลยีที่ใช้ 5-8
บทที่ 3 การวิเคราะห์และออกแบบ
3.1 แผนภาพบริ บท (Use Case Diagrams) 9
3.2 แผนภาพบริ บท (Context Diagram) 10
3.2 แผนภาพกระแสข้อมูล (Data Flow Diagram) 10
3.3 แผนภาพความสัมพันธ์ระหว่างเอนทิตี (Entity-Relationship Diagram) 12
3.4 ตารางฐานข้อมูล ( Data Table ) 13
3.5 ผังงานโครงสร้างระบบ (Flow Chart) 16
บทที่ 4 การพัฒนาโปรแกรม
4.1 อุปกรณ์และโปรแกรมที่ใช้ 24
4.2 การทางานทั้งหมดของโปรแกรม 26

7. ฉ
สารบัญ(ต่ อ)
หน้ า
บทที่ 5 สรุ ปผลการศึกษา การอภิปรายผล และข้อเสนอแนะ
5.1 สรุ ปโครงงาน 31
5.2 ปั ญหาที่เกิดขึ้น 31
5.3 วิธีแก้ปัญหา 32
5.4 ข้อเสนอแนะ 32
บรรณานุกรม 40
ภาคผนวก

8. ช
สารบัญรู ป
หน้ า
3.1 แผนภาพบริ บท (Use Case Diagrams) 9
3.2.1 แผนภาพบริ ษท (Context Diagram)
ั 10
3.3.1 กระบวนการที่ 1.0 สมาชิก 11
3.3.2 กระบวนการที่ 2.0 เข้าสู่ ระบบ 11
3.3.3 กระบวนการที่ 3.0 แก้ไข 11
3.3.4 กระบวนการที่ 4.0 อับโหลดเพลง 11
3.3.5 กระบวนการที่ 5.0 อับโหลดรู ป 11
3.3.6 กระบวนการที่ 6.0 ลบไฟล์ 11
3.3.7 กระบวนการที่ 7.0 ปรับปรุ งข้อมูล 11
3.3.8 กระบวนการที่ 8.0 ความสัมพันธ์ 11
3.4 แผนภาพความสัมพันธ์ระหว่างเอนทิตีที่มีคุณสมบัติ (Entity-Relationship Diagram) 12
3.5การออกแบแฟ้ มข้อมูล (Data Table) 13
3.6.1 การเข้าสู่ ระบบ 16
3.6.2 การสมัครสมาชิก 17
3.6.3 การอัพโหลดรู ปภาพ 18
3.6.4 การอัพโหลดเพลง 19
3.6.4 การเล่นเพลง 20
3.6.4.1 ระบบการเล่นเพลง 20
3.6.5 การPOST ข้อความ 21
3.6.5.1 ระบบการเก็บ POST 21
3.6.6 ระบบการเข้าใช้งาน Admin 22
3.6.6.1 ระบบ Admin 23
รู ปที่ 6.1 หน้าเว็บ มิวสิ ค โซเชียล (Music Social) 33
รู ปที่ 6.2 หน้า สมัครสมาชิก 34
รู ปที่ 6.3 ฟ้ อง error กรณี ชื่อซ้ ากัน 34
รู ปที่ 6.4 ฟ้ อง error กรณี password ไม่ตรงกัน 35
รู ปที่ 6.5 ฟ้ อง error กรณี e-mail ซ้ ากัน 35
รู ปที่ 6.6 ฟ้ อง Error กรณี กรอกข้อมูลไม่ครบ 36
รู ปที่ 6.7 หน้า Login เข้าระบบ 36

9. ซ
สารบัญรู ป(ต่ อ)
หน้ า
รู ปที่ 6.8 แสดงหน้า Login แล้ว 37
รู ปที่ 6.9 อัพโหลดเพลง 37
รู ปที่ 6.10 เล่นเพลงได้ 38
รู ปที่ 6.11 อัพโหลดรู ป 38
รู ปที่ 6.12 ดูรูปที่อพโหลดได้
ั 39

10. ฌ
สารบัญตาราง
หน้ า
ตารางแผนการดาเนินงาน(Gantt chart) 4
ตาราง USER 13
ตาราง ADMIN 14
ตาราง MUSIC 14
ตาราง PHOTO 14
ตาราง POST 15
ตาราง FRIEND 15
ตารางที่ 4.1 แสดงรายชื่อฮาร์ ดแวร์ ท้ งหมดที่ใช้จริ ง
ั 24
ตารางที่ 4.2.1 ซอฟต์แวร์ที่ใช้จริ ง 25
ตารางที่ 4.2.2 ใช้ในการทาเอกสาร 26
ตารางที่ 4.3.1 แสดงกระบวนการการทางานของ กระบวนการ 1.0 หน้าหลัก 26
ตารางที่ 4.3.2 แสดงกระบวนการการทางานของ กระบวนการ 2.0 สมัครสมาชิก 27
ตารางที่ 4.4.3 แสดงกระบวนการการแก้ไขข้อมูลสมาชิก กระบวนการ 3.0 แก้ไขชื่อสมาชิก 27
ตารางที่ 4.4.4 แสดงกระบวนการโพสต์ ข้อความ กระบวนการ 4.0 ข้อความ 28
ตารางที่ 4.4.5 แสดงกระบวนการลบโพสต์ ข้อความ กระบวนการ 5.0 ลบข้อความ 28
ตารางที่ 4.4.6 แสดงกระบวนการอับโหลดไฟล์เพลง กระบวนการ 6.0 การอับโหลดไฟล์เพลง 29
ตารางที่ 4.4.7 แสดงกระบวนการลบไฟล์เพลง กระบวนการ 7.0 ลบไฟล์เพลง 29
ตารางที่ 4.4.8 แสดงกระบวนการอับโหลดไฟล์รูป กระบวนการ 8.0 อับโหลดไฟล์รูป 29
ตารางที่ 4.4.9 แสดงกระบวนการลบไฟล์รูป กระบวนการ 9.0 ลบไฟล์รูป 29
ตารางที่ 4.4.10 แสดงกระบวนการการทางานของผูดูแลระบบ กระบวนการ 10.0 ผูดูแลระบบ 30
้ ้

11. 1
บทที่ 1
บทนำ
1.ประวัติควำมเป็ นมำและควำมสำคัญ
ปั จจุบนอินเตอร์ เน็ตเข้ามาเป็ นสวนหนึ่ งในการใช้ชีวิต ประจาวันของผูคน บนโลก
ั ้
อินเตอร์ เน็ตผูใช้งานส่ วนใหญ่ที่เข้ามาใช้งานมี ความต้องการใช้งานที่ หลากหลาย เช่ น การ
้
ค้นหาข้อมูล การหาข่าวสารและอัพเดทข่าวสารใหม่ๆ การแลกเปลี่ ยนความคิ ดเห็ น การทา
ไดอารี่ ออนไลน์ และ การสร้างความบันเทิงโดยการหาความบันเทิงในโลกอินเตอร์ เน็ตมี
หลายรู ปแบบ เช่น การดูคลิปวิดีโอ เล่นเกม ฟังเพลง
การหาความบันเทิงในรู ปแบบการฟังเพลงผ่านทางเว็บไซต์เป็ นวิธีการที่ผใช้งานส่ วน
ู้
ใหญ่นิยมเลื อกใช้งานมากที่สุดมากกว่าการซื้ อหาแผ่นเพลงมาฟั งและบันทึกลงคอมพิวเตอร์
แต่เว็บไซต์เพลงออนไลน์ส่วนใหญ่จะเป็ นการให้บริ การในรู ปแบบที่ทางเว็บนาเอามาลงไว้ให้
ผูใ ช้ง านได้รั บ ฟั ง โดยไม่ มี ก ารจัด ให้ ผูใ ช้ไ ม่ ส ามารถอัพ โหลดเพลงของตัว เองขึ้ น ไปบน
้ ้
เว็บไซต์ได้ ทาให้เว็บไซต์ส่วนใหญ่ไม่มีการสร้ างสังคมของผูใช้งานที่ มีความชอบในดนตรี
้
แนวเดียวกัน
ดัง นั้น เว็บ ไซต์ที่ ส ร้ า งขึ้ น มานี้ จะเป็ นการสร้ า งสั ง คมบนโลกอิ น เตอร์ เ น็ ต ที่ ผูใ ช้
้
สามารถอัพโหลดเพลงขึ้นไปบนเว็บไซต์ได้รวมไปถึงมีการจัดกระดานข้อความให้ผใช้แต่ละ
ู้
คนสามารถแสดงความคิ ดเห็ นรวมไปถึ งพูดคุ ยกันบนเว็บไซต์ รวมไปถึ งมี การจัดโหวดจัด
อันดับเพลงที่คนชื้นชอบ
2.วัตถุประสงค์
1.เป็ นการสร้างกลุ่มเพื่อนทางอินเตอร์เน็ต
2.เป็ นช่องทางการ แชร์ รูป, อัพเดท เพลง
3.เปิ ดช่องทางการแลกเปลี่ยนแสดงความคิดเห็น

12. 2
3.ขอบเขตกำรศึกษำ
1.กำรลงทะเบียนเป็ นสมำชิก
1.1 ผูใช้สามารถกาหนดชื่อผูใช้ รหัสผ่านได้ในการเข้าสู่ ระบบ
้ ้
1.2 ส่ วนของข้อมูลสมาชิก ผูใช้สามารถระบุชื่อ และอีเมล์
้
2.กำรใช้ งำนของสมำชิก
2.1 ผูใช้สามารถอัพโหลดเพลงเพื่อแบ่งปั นแนวเพลงที่เราชอบให้คนอื่นที่มีความ
้
สนใจเข้ามารับฟังได้
2.2 ผูใช้สามารถแสดงความคิดเห็นเกี่ยวกับแนวเพลงที่รับฟังได้
้
2.3 มีพ้ืนที่ในการเก็บไฟล์ที่ผใช้อบโหลดขึ้นไป
ู้ ั
2.4 ผูใช้สามารถติดตามสมาชิกที่โพสเพลงที่ชื่นชอบได้
้
3.ส่ วนผู้ดูแลระบบ
3.1 สามารถเพิ่ม ลบ แก้ไข ข้อมูลเพลงได้
3.2 สามารถเพิม ลบ แก้ไข ข้อความต่างๆได้
่
4.นิยำมศัพท์เฉพำะ
Ruby เป็ นภาษาคอมพิวเตอร์ ที่มีลกษณะเป็ นโปรแกรมแปลภาษา (interpreter) เหมือนกับ Perl,
ั
Python, Java
Rails เป็ นระบบเฟรมเวิร์กสาหรับเว็บแอปพลิเคชันแบบโอเพนซอร์ส ที่พฒนาด้วยภาษารู บี
ั
5.ผลทีคำดว่ำจะได้ รับจำกกำรทำโครงงำน
่
1. เป็ นเว็บไซด์ที่ได้รับความนิยมในการแลกเปลี่ยนแชร์ รูป ไฟล์เพลง

13. 3
6.แผนกำรดำเนินงำน
1. ศึกษาทฤษฎีและเทคโนโลยีที่ใช้ในการสร้างเว็บไซต์
2. การรวบรวมข้อมูล ที่จาเป็ นในการใช้โปรแกรมต่างๆที่มีส่วนเกี่ยวข้องกับการทางานในการ
เขียนเว็บไซต์ท้ งหมด
ั
3. ออกแบบหน้าตาเว็บไซต์บนกระดาษ
3. นาเอาโปรแกรมต่างๆมาออกแบบสร้างเว็บไซต์
4. ทดสอบและแก้ไข
5. จัดทาเอกสาร
6.อุปกรณ์ และซอฟต์ แวร์ ทใช้ ในกำรทำโครงงำน
ี่
ฮาร์ดแวร์
Computer
Printer
ซอฟต์แวร์
ระบบปฏิบติการ ใช้ Ubuntu (12.04) Linux
ั
ภาษาที่ใช้สร้างเว็บไซต์ Ruby on Rail
สาหรับเก็บฐานข้อมูลใช้ SQLite3
Server ใช้ mongrel
ตกแต่งรู ปภาพใช้ Photoshop

14. 4
ตำรำงแผนกำรดำเนินงำน(Gantt chart)
ตารางแสดงแผนดาเนินการ ระยะเวลาดาเนินงาน
ลาดั กิจกรรม ม.ค.-55 ก.พ.-55 มี.ค.-55 เม.ย.-55 พ.ค.-55 มิ.ย.-55 ก.ค.-55 ส.ค.-55 ก.ย.-55
บ
1 ศึกษาแนวคิด ทฤษฎีและเอกสารที่
เกี่ยวข้อง
2 ศึกษาเทคโนโลยี
3 การระบุปัญหา
4 การรวบรวมข้อมูลหรื อการจัดการ
ข้อมูล
5 การวิเคราะห์ขอมูลหรื อการ
้
ออกแบบระบบและเว็บไซต์
6 การสร้างตัวแบบหรื อพัฒนา
เว็บไซต์
7 การทดสอบการใช้งานหรื อทดสอบ
ตัวเว็บไซต์
8 จัดการทาเอกสาร

15. 5
บทที่2
แนวคิด ทฤษฎีและเอกสำรที่เกียวข้ อง
่
2.1 ทฤษฎีทเี่ กี่ยวข้ อง
ปั จจุบนความเจริ ญก้าวหน้าทางด้านเทคโนโลยี สารสนเทศ และการสื่ อสาร มีการพัฒนา
ั
เปลี่ ยนแปลงไปอย่างรวดเร็ ว มีเทคโนโลยีต่างๆ เกิ ดขึ้นมากมาย เพื่อช่ วยอานวยความสะดวก
รวมทั้งให้ความบันเทิง หรื อแม้กระทังการเชื่ อมต่อกันเป็ นเครื อข่าย โดยที่ทุกคนทัว โลกสามารถ
่ ่
เป็ นเพื่อนกัน พบปะพูดคุยกันได้ตลอดเวลา เพียงแค่มีอินเตอร์ เน็ต กับอุปกรณ์สาหรับเชื่ อมต่อ เช่น
คอมพิวเตอร์ หรื อโทรศัพท์มือถือ ทาให้การติดต่อสื่ อสารเป็ นไปได้อย่างสะดวก รวดเร็ ว ไม่จาเป็ น
ที่จะต้องเดินทางไปพบปะกันโดยตรง
ถ้าพูดถึงคาว่า Social Media หรื อ Social Network ในปั จจุบนหลายคนอาจจะสงสัยว่าสิ่ ง
ั
เหล่านี้ คืออะไร แต่ถาพูดถึง Hi5, Face book, Twitter, Blog, YouTube ฯลฯ เชื่ อว่าหลายคนคงจะ
้
ปฏิเสธไม่ได้ทีจะไม่รู้จก ยิงโดยเฉพาะในวัยรุ่ นหรื อเยาวชนที่อยูในระหว่างการศึกษาเล่าเรี ยน คงจะ
ั ่ ่
คุนเคยกันเป็ นอย่างดี ซึ่ งสิ่ งเหล่านี้ (Hi5, Face book, Twitter, Blog, YouTube ฯลฯ) ที่ถูกเรี ยกกว่า
้
Social Media หรื อ Social Networkดังนั้น
่
ถ้าจะให้ความหมายของคาว่า Social Media หรื อ Social Network นั้น จะได้วา Social
Media หมายถึง สังคมออนไลน์ที่มีผใช้เป็ นผูสื่อสาร หรื อเขียนเรื่ องราว ประสบการณ์ บทความ
ู้ ้
ั
รู ปภาพ และวีดีโอ ที่ผใช้เขียนขึ้นเอง ทาขึ้นเอง หรื อพบเจอจากสื่ ออื่นๆ แล้วนามาแบ่งปั นให้กบ
ู้
ผูอื่นที่อยู่ในเครื อข่ายของตน ผ่านทางเว็บไซต์ Social Network ที่ให้บริ การบนโลกออนไลน์
้
ปัจจุบน การสื่ อสารแบบนี้จะทาผ่านทาง Internet และโทรศัพท์มือถือเท่านั้น
ั
Social Media หมายถึ ง สังคมออนไลน์ที่มีผูใช้เป็ นผูสื่อสาร หรื อเขียนเรื่ องราว
้ ้
ประสบการณ์ บทความ รู ปภาพ และวีดีโอ ที่ผใช้เขียนขึ้นเอง ทาขึ้นเอง หรื อพบเจอจากสื่ ออื่นๆ
ู้
ั ้ ่
แล้วนามาแบ่งปั นให้กบผูอื่นที่อยูในเครื อข่ายของตน ผ่านทางเว็บไซต์ Social Network ที่ให้บริ การ
บนโลกออนไลน์ ปัจจุบน การสื่ อสารแบบนี้จะทาผ่านทาง Internet และโทรศัพท์มือถือเท่านั้น
ั
Social Network คือ การที่ผคนสามารถทาความรู ้จกและเชื่ อมโยงกันในทิศทางใดทิศทาง
ู้ ั
หนึ่ง หากเป็ นเว็บไซต์ที่เรี ยกว่าเป็ นเว็บ Social Network ก็คือเว็บไซต์ที่เชื่ อมโยงผูคนไว้ดวนกัน
้ ้
นั้นเอง (สถาบันคอมพิวเตอร์ มหาวิทยาลัยรามคาแหง, 2552)

16. 6
จากสภาพสังคมในปั จจุ บนที่ อินเตอร์ เข้าถึ งเกื อบทุ กพื้นที่ ทาให้เยาวชนไทยส่ วนใหญ่
ั
สามารถเข้าสู่ ระบบเครื อข่ายสารสนเทศได้ สามารถสื บค้นข้อมูลผ่านทางระบบอินเตอร์ เน็ตได้เป็ น
อย่างดี ประกอบกับมีเครื่ องมือจาพวก Social Media ออกมามากมาย ยิ่ง เป็ นการทาให้เยาวชนเข้าสู่
ระบบของโลกอินเตอร์ เน็ตมากยิงขึ้น ดังจะเห็นได้จากปั ญหาที่ปรากฏทางหน้าจอโทรทัศน์เกี่ยวกับ
่
การใช้งาน Social Media ที่ไม่ถูกต้องและไม่เหมาะสม ซึ่ งการจะแก้ปัญหาเหล่านี้ ไม่ใช่การแก้โดย
การปิ ดกั้นไม่ให้เยาวชนเข้าสู่ โลกอินเตอร์ เน็ตเพราะการปิ ดกั้นเยาวชนจากอินเตอร์ เน็ตก็หมายถึ ง
่
การปิ ดกั้นความรู ้ที่มีอยูมากมายบนโลกอินเตอร์ เน็ตไม่ให้เข้าถึงตัวเยาวชนได้น้ นเอง แต่ทางแก้ที่ดี
ั
และตรงกับปั ญหามากที่สุดก็คือการปลูกฝังและแนะนาให้เยาวชนใช้เครื่ องมือ Social Media เหล่านี้
ในทางที่เหมาะสม เช่ น ใช้ในเชิ งการศึกษา ได้แก่ การสอบถามปั ญหาการเรี ยนกับเพื่อนหรื อ
ครู ผสอน การสรุ ปความรู ้เก็บไว้บนเว็บส่ วนตัว หรื อเผยแพร่ ความรู ้ ต่างๆ ตามความเข้าใจบนสื่ อ
ู้
ทางอินเตอร์ เน็ต รวมทังการสื บค้นข้อมูลบนอินเตอร์ เน็ต เป็ นต้นสิ่ งเหล่านี้ สามารถปลูกฝังได้โดย
่
ผูปกครอง ครู / อาจารย์ รวมทั้งเพื่อนหรื อคนรอบข้าง ยิ่งถ้าสังคมมีแนวโน้มที่ใช้ SocialMedia ใน
้
เชิงการศึกษามาขึ้นเท่าใด เยาวชนทุกคนก็จะมีแนวโน้มที่จะคล้อยตามและปฏิบติตามเป็ นนิ สัยและ
ั
กิจวัตรมากขึ้น
2.2 เทคโนโลยีทเี่ กี่ยวข้ อง
2.2.1 Ruby
จากวิกิพีเดีย สารานุกรมเสรี
ภำษำรู บี (Ruby) เป็ น ภาษาโปรแกรมเชิงวัตถุ ที่ได้รับอิทธิพลของโครงสร้างภาษามาจาก
ภาษาเพิร์ลกับภาษาเอดา มีความสามารถในเชิงวัตถุแบบเดียวกับภาษาสมอลทอล์ค และมี
ความสามารถหลายอย่างจากภาษาไพทอน, ภาษาลิสป์ , ภาษา Dylan และภาษา CLU ตัวแปลภาษารู
บีตวหลักเป็ นซอฟต์แวร์เสรี และเป็ นตัวแปลแบบอินเตอร์ พรี เตอร์
ั
ที่มา : (จากวิกิพีเดีย สารานุกรมเสรี http://th.wikipedia.org/wiki ) เวลา 14.45 7 เมษายน 2555

17. 7
2.2.2 Rails
รู บีออนเรลส์ (อังกฤษ: Ruby on Rails: RoR) หรื อนิยมเรี ยกสั้นๆ ว่า เรลส์ (Rails) เป็ น
ระบบเฟรมเวิร์กสาหรับเว็บแอปพลิเคชันแบบโอเพนซอร์ ส ที่พฒนาด้วยภาษารู บี โดยอิง
ั
แนวความคิดแบบ Model-View-Controller (MVC) เป็ นสถาปั ตยกรรมพื้นฐาน
รู บีออนเรลส์ มีชื่อเสี ยงจากความง่ายในการใช้งาน โดยใช้การเขียนโปรแกรมจานวนน้อยบรรทัด
กว่า และมีการระบุค่าตั้งน้อยกว่าเฟรมเวิร์กที่ออกมาก่อนหน้าตัวอื่นๆ การติดตั้งรู บีออนเรลส์ทาได้
โดยผ่านระบบ RubyGems ซึ่งเป็ นระบบการจัดการส่ วนประกอบในภาษารู บ้ ีอย่างเป็ นทางการ
ั
รู บีออนเรลส์ เริ่ มพัฒนาโดย David Heinemeier Hansson เพื่อใช้กบเครื่ องมือจัดการโครงการชื่ อ
Basecamp ของบริ ษท 37 Signals ที่เขาทางานอยูรูบีออนเรลส์ได้เผยแพร่ สู่สาธารณะชนเมื่อเดือน
ั ่
กรกฎาคม ค.ศ. 2004 โดยรุ่ นปั จจุบนนั้นคือ rails 3.2
ั
ที่มา : (จากวิกิพีเดีย สารานุกรมเสรี http://th.wikipedia.org/wiki) เวลา 15.03 7 เมษายน 2555
2.2.3 CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) จัดเป็ นภาษาที่ใช้เป็ นส่ วนของการจัดรู ปแบบการแสดงผล
เอกสาร HTML โดยที่ CSS กาหนดกฏเกณฑ์ในการระบุรูปแบบ (หรื อ "Style") ของเนื้ อหาใน
เอกสาร อันได้แก่สีของข้อความ สี พ้ืนหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่ งการกาหนด
รู ปแบบ หรื อ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคาสั่งที่ใช้ในการ
่ ั
จัดรู ปแบบการแสดงผล กาหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ข้ ึนอยูกบเนื้อหาของเอกสาร
เพื่อให้ง่ายต่อการจัดรู ปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณี ที่มีการ
เปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรื อต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มี
ลักษณะของความสม่าเสมอทัวกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการ
่
กาหนดรู ปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปี พ.ศ. 2539 ใน
รู ปแบบของ CSS level 1 Recommendations ที่กาหนดโดย องค์กร World Wide Web Consortium
หรื อ W3C
หลังจากนั้น องค์กร W3C ได้กาหนด CSS level 2 Recommendations เพื่อเพิ่มเติม
กฏเกณฑ์การกาหนดรู ปแบบของสื่ อที่ใช้การแสดงผลข้อมูล โดยผูสร้างเอกสาร อาจเลือกใช้
้
รู ปแบบ หรื อ "Style" ในการกาหนดรู ปแบบให้แสดงผล หรื อ กาหนดให้ไม่แสดงผลข้อมูล บน
อุปกรณ์บางประเภทที่มีรูปแบบการแสดงผลข้อมูลต่างจากการแสดงออกทางหน้าจอปกติ โดย
ผูสร้างเอกสารสามารถใช้ CSS ในกาหนดรู ปแบบการแสดงผลที่เหมาะสม โดยไม่ข้ ึนอยูกบ
้ ่ ั
เนื้อหาภายในเอกสาร ตัวอย่างเช่น เอกสารฉบับเดียวกัน เมื่อแสดงผลบนอุปกรณ์สาหรับคน
สายตาพิการ อาจกาหนดรู ปแบบให้ไม่แสดงรู ปภาพ แต่แสดงในรู ปแบบอื่นที่เหมาะสม หรื อ
บนอุปกรณ์สาหรับคนหูหนวก อาจกาหนดไม่ให้ตองแสดงข้อมูลเสี ยง แต่แสดงผลในรู ปแบบ
้
ของข้อความ เป็ นต้น

18. 8
ที่มา : (http://www.xvlnw.com/knowledge-readknowledge-id158.html) เวลา เวลา 16.45 7
เมษายน 2555
2.2.4 SQLite
เป็ นระบบฐานข้อมูลที่มีลกษณะเรี ยบง่ายคือ ตัว SQLite จะเก็บข้อมูลลงในไฟล์โดยตรง
ั
(คล้าย MS Access) ไม่มีการติดต่อผ่าน Network socket เหมือนกับฐานข้อมูลตัวอื่นๆ ทาให้มีขอ
้
ได้เปรี ยบเรื่ องความเร็ วในการดึงข้อมูล ซึ่ งปั จจุบนพัฒนาจนถึงรุ่ นที่ 3 แล้วใน การใช้งาน SQLite
ั
ผูใช้งานสามารถดาวน์โหลดโปรแกรม manager เพื่อจัดการกับฐานข้อมูล ซึ่ งจะทาให้การทางาน
้
นั้นง่ายขึ้นมาก ตั้งแต่การสร้างฐานข้อมูล สร้างตาราง ใส่ ขอมูล จนถึงสาเนาข้อมูล (Dump, Import,
้
Export ใช้งานฟรี (ฟรี แวร์ ) ไม่เสี ยค่าใช้จ่ายและทางานได้บน Windows 32 และ 64 bits
ที่มา : (http://www.allwebfactory.com/news/node/18) เวลา เวลา 17.03 7 เมษายน 2555
2.2.5 JavaScript
เป็ นภาษาสคริ ปต์ ทีมีลกษณะการเขียนแบบโปรโตไทพ (Prototyped-based Programming)
ั
ส่ วนมากใช้ในหน้าเว็บเพื่อประมวลผลข้อมูลที่ฝั่งของผูใช้งาน แต่ก็ยงมีใช้เพื่อเพิ่มเติม
้ ั
่
ความสามารถในการเขียนสคริ ปต์โดยฝังอยูในโปรแกรมอื่นๆ
จาวาสคริ ปต์ (JavaScript) เริ่ มพัฒนาโดย Brendan Eich พนักงานบริ ษทเน็ตสเคป โดย
ั
ขณะนั้นจาวาสคริ ปต์ใช้ชื่อว่า โมคา และภายหลังได้เปลี่ยนชื่อมาเป็ น ไลฟ์ สคริ ปต์ และเป็ น จาวา
สคริ ปต์ในปั จจุบน รู ปแบบการเขียนภาษาที่ใช้ คล้ายคลึงกับภาษาซี รุ่ นล่าสุ ดของจาวาสคริ ปต์คือ
ั
2.0 ซึ่ งตรงกับมาตรฐานของ ECMAScript
ที่มา : (จากวิกิพีเดีย สารานุกรมเสรี http://th.wikipedia.org/wiki ) เวลา 17.20 7 เมษายน 2555

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

20. 10
3.2 ผังงำนโครงสร้ ำงระบบ
3.2.1 แผนภาพบริ ษท (Context Diagram)
ั
3.3 แผนภำพกระแสข้ อมูล ( Data Flow Diagram )
แผนภาพกระแสข้อมูลแสดงรายละเอียดต่างๆ ของการทางานของ เว็บสังคมเพลงออนไลค์
3.3.1 กระบวนการที่ 1.0 สมาชิก
3.3.2 กระบวนการที่ 2.0 เข้าสู่ระบบ
3.3.3 กระบวนการที่ 3.0 แก้ไข
3.3.4 กระบวนการที่ 4.0 อับโหลดเพลง
3.3.5 กระบวนการที่ 5.0 อับโหลดรู ป
3.3.6 กระบวนการที่ 6.0 ลบไฟล์
3.3.7 กระบวนการที่ 7.0 ปรับปรุ งข้อมูล
3.3.8 กระบวนการที่ 8.0 ความสัมพันธ์

21. 11
1.0 D1 Database
Email&Password
2.0 D1 Database
3.0 D1 Database
4.0 D2 Database
5.0
D3 Database
6.0
D2,D3 Database
D5
7.0
D1
8.0
D4

22. 12
3.4 แผนภำพควำมสั มพันธ์ ระหว่ ำงเอนทิตีทมีคุณสมบัติ (Entity-Relationship Diagram)
ี่
M M
สมาชิก เพื่อน
1 1 1
M M
เพลง
M
รู ปภาพ
POST

23. 13
MUSIC USER
PK USER_ID PK ID POST
NAMEMUSIC NAME PK USER_ID
LASTNAME USER_NAME
PK EMAIL POST
PASSWORD TIME
TEL
PHOTO AGE ADMIN
PK USER_ID PK ADMIN
NAMEPHOTO FRIEND ADMIN
PK FRIEND_ID _USERNAME
FRIEND_NAME ADMIN
_PASSWORD
3.5กำรออกแบแฟมข้ อมูล(Data Table)
้
ชื่อตาราง USER
ลาดับ
คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequenc
(Attribute) (Description) (Width) (Type) (Default) ความถูกต้อง (Key Type)
e No)
1 ID รหัส 10 INT - NOT NULL PK
2 NAME ชื่อ 20 Character - NOT NULL
4 EMAIL อีเมลล์ 30 Character - PK
5 PASSWORD รหัสผ่าน 15 INT -

24. 14
ชื่อตาราง ADMIN
ลาดับ
คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequenc
(Attribute) (Description) (Width) (Type) (Default) ความถูกต้อง (Key Type)
e No)
1 USERNAME ชื่อ 30 Character - NOT NULL PK
2 PASSWORD รหัสผ่าน 15 INT - NOT NULL
ชื่อตาราง MUSIC
ลาดับ
คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequenc
(Attribute) (Description) (Width) (Type) (Default) ความถูกต้อง (Key Type)
e No)
1 USER_ID รหัสผูอพ
้ั 10 INT - NOT NULL PK
2 NAMEMUSIC ชื่อเพลง 20 Character - NOT NULL
ชื่อตาราง PHOTO
ลาดับ
คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequenc
(Attribute) (Description) (Width) (Type) (Default) ความถูกต้อง (Key Type)
e No)
1 USER_ID รหัสผูอพ
้ั 10 INT - NOT NULL PK
2 NAMEPHOTO ชื่อเพลง 20 Character - NOT NULL

25. 15
ชื่อตาราง POST
ลาดับ
คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequenc
(Attribute) (Description) (Width) (Type) (Default) ความถูกต้อง (Key Type)
e No)
1 USER_ID รหัสผูอพ
้ั 10 INT - NOT NULL PK
2 ID รหัสโพสต์ 10 INT - NOT NULL
3 POST ข้อความ 140 Character - NOT NULL
4 TIME เวลา 10 Character - NOT NULL
ชื่อตาราง FRIEND
ลาดับ
คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequenc
(Attribute) (Description) (Width) (Type) (Default) ความถูกต้อง (Key Type)
e No)
1 FRIEND_ID ชื่อเพื่อน 20 Character - NOT NULL PK
2 FRIEND_NAME รหัสผ่าน 30 Character - NOT NULL

26. 16
3.6 แผนกำรทำงำน (Flowchart)
3.6.1 การเข้าสู่ ระบบ
เริ่ ม
หน้าแรกของเว็บ
no
สมัครสมาชิก
yes
no
ระบบสมัคร เข้าสู่ระบบ จบการทางาน
สมาชิก
yes
ระบบของผูใช้
้
ระบบสังคม
เพลง
ระบบอัพเดต
สถานะ
จบการทางาน

27. 17
3.6.2 การสมัครสมาชิก

28. 18
3.6.3 การอัพโหลดรู ปภาพ
เริ่ มการทางาน
หน้าเว็บอัพรู ปภาพ
yes
no
ตรวจสอบไฟล์ภาพ
ระบบอัพโหลด
ลงฐานข้อมูล
ระบบแสดง
รู ปภาพ
จบการทางาน

29. 19
3.6.4 การอัพโหลดเพลง
เริ่ มการทางาน
หน้าเว็บอัพโหลดเพลง
yes
no
ตรวจสอบไฟล์เพลง
ระบบอัพโหลดลง
ฐานข้อมูล
แสดงผลการอัพโหลดเพลง
จบการทางาน

30. 20
3.6.4 การเล่นเพลง
เริ่ มการทางาน
หน้าเว็บแสดงเพลง
yes no
ตรวจสอบการเลือกเพลง
ระบบเล่นเพลง
จบการทางาน
3.6.4.1 ระบบการเล่นเพลง เริ่ มการทางาน
ดึงไฟล์เพลงจาก
ฐานข้ อมูล
ระบบเล่นเพลง
แสดงผลการเล่นเพลง
จบการทางาน

31. 21
3.6.5 การPOST ข้อความ
เริ่ มการทางาน
หน้าเว็บPOST
ระบบPOST
ข้อความ
บันทึกลง
ฐานข้อมูล
จบการทางาน
3.6.5.1 ระบบการเก็บ POST
เริ่ มการทางาน
บันทึกข้ อความ
ลงฐานข้ อมูล
จบการทางาน

32. 22
3.6.6 ระบบการเข้าใช้งาน Admin
เริ่ มการทางาน
หน้าเว็บไซต์
Admin
ตรวจสอบ user & Password
Admin
ระบบ Admin
จบการทางาน

33. 23
3.6.6.1 ระบบ Admin
-

34. 24
บทที่ 4
กำรพัฒนำโปรแกรม
บทนี้จะกล่าวถึงเครื่ องมือและอุปกรณ์ที่ใช้ในการพัฒนาเว็บไซต์ การพัฒนาโปรแกรมนี้ จะ
ทาให้เข้าใจถึงระบบการทางาน วิธีการประมวลผลและรวมไปถึงระบบการทางานโดยรวม ซึ่งใน
การกาหนดรายละเอียดต่างๆ ที่เป็ นองค์ประกอบสาคัญในการพัฒนาและปรับปรุ งระบบ
4.1 ฮาร์ดแวร์ที่ใช้
ตารางที่ 4.1 แสดงรายชื่อฮาร์ ดแวร์ ท้ งหมดที่ใช้จริ ง
ั
ชื่อฮาร์ดแวร์ นามาใช้เพื่อ เลือกเพราะ
คอมพิวเตอร์โน๊ตบุค
๊ เขียนโปรแกรม, ทดสอบ สะดวกสบายในการพกพาและ
โปรแกรม, จาลองเป็ นเซิฟ ง่ายต่อการทดสอบโปรแกรม
เวอร์
เครื่ องปริ้ น ใช้ริ้นเอกสารต่างๆ เมือเป็ นเอกสารจะสามารถดูได้
ง่ายกว่าเป็ นไฟล์เอกสารใน
คอมพิวเตอร์

35. 25
4.2 ซอฟต์แวร์ที่ใช้
ตารางที่ 4.2.1 ซอฟต์แวร์ที่ใช้จริ ง
ชื่อซอฟต์แวร์ นามาใช้เพื่อ เลือกเพราะ
OS Ubuntu 12.04 นามาเป็ นระบบปฏิบติการที่ใช้
ั เป็ นOS linuxที่ใช้งานง่ายแล้ว
ในการพัฒนาเว็บไซต์ดวย Ruby คนนิยมที่จะใช้ในการเขียน
้
เว็บ Ruby on Rails
Ruby on Rails (os Ubuntu ) เป็ นภาษาที่ใช้ในการเขียน เป็ นภาษาที่มีความหน้าสนใจมี
เว็บไซต์ รู ปแบบการเขียนที่ดูเข้าใจง่าย
มีการเขียนที่นอยบรรทัด
้
SQLite (os Ubuntu ) จัดการระบบ ฐานข้อมูลของเว็บ เป็ นโปรแกรมที่ใช้งานง่ายใน
การจัดการกับฐานข้อมูล และ
ใช้ควบคู่กบRuby on Rails
ั
Mongrel (os Ubuntu ) นามาใช้เป็ น server เป็ นโปรแกรมที่ใช้งานง่ายกับ
เว็บ Ruby on Rails
OS windows 7 นามาเป็ นระบบปฏิบติการที่ใช้
ั เป็ นOS ที่สนับสนุนการ
เพื่อทาเอกสาร และตกแต่งรู ป ทางานกับโปรแกรม
Microsoft office 2007
และ Photoshop
Photoshop (os windows) แต่งภาพ ตัดต่อภาพมาใช้บน เป็ นโปรแกรมที่ใช้งานง่าย มี
เว็บไซต์ ความสามารถในการตกแต่ง
รู ปภาพต่างๆได้อย่างมี
ประสิ ทธิภาพ

36. 26
ตารางที่ 4.2.2 ใช้ในการทาเอกสาร
Microsoft office 2007 ใช้ทาเอกสารโครงงาน ช่วยในการจัดทาเอกสาร
โครงงานเพราะเป็ นโปรแกรม
(os windows) Word
ที่มีประสิ ทธิภาพในการทา
Powerpoint
เอกสารและง่ายต่อการใช้งาน
Microsoft office Visio 2007 ใช้ทาแผนภาพ ช่วยให้การทาเอกสารที่เป็ น
แผนภาพ ง่ายขึ้นเพราะมี
เครื่ องมือที่ง่ายต่อการสร้าง
4.3 การทางานทั้งหมดของโปรแกรมมีกระบวนการทั้งหมดดังนี้
ตารางที่ 4.3.1 แสดงกระบวนการการทางานของ กระบวนกำร 1.0 หน้าหลัก
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
เข้าสู่ ระบบ เป็ นกระบวนการที่สมาชิกของ
เว็บไซต์ใช้ในการ เข้าสู่ ระบบ
โดยการใส่ อีเมล์ และ รหัสผ่าน
ของตนเอง

37. 27
ตารางที่ 4.3.2 แสดงกระบวนการการทางานของ กระบวนกำร 2.0 สมัครสมาชิก
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
การสมัครสมาชิก เป็ นกระบวนการในการสมัคร
สมาชิกเพื่อเข้าสู่ ระบบการ
ชื่อ และอีเมล์ ไม่สามารถซ้ า
ทางานต่างๆของเว็บไซต์ โดย
กันได้
กรอกข้อมูลในการสมัคร
สมาชิกดังนี้ อย่างน้อย 6 ตัวอักษร
1. ชื่อผูใช้
้
2. e-mail
3. พาสเวิร์ดในการเข้าระบบ
4. คอนเฟิ ร์มพาสเวิร์ด
ตารางที่ 4.4.3 แสดงกระบวนการการแก้ไขข้อมูลสมาชิก กระบวนกำร 3.0 แก้ไขชื่อสมาชิก
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
การแก้ไขชื่อสมาชิก เป็ นกระบวนการที่ใช้ในการ
แก้ไขชื่อ พาสเวิร์ด ไปถึงการ
เปลียน e-mail

38. 28
ตารางที่ 4.4.4 แสดงกระบวนการโพส ข้อความ กระบวนกำร 4.0 ข้อความ
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
กระดานสนทนา เป็ นกระบวนการที่ให้สมาชิก
ใช้ในการแสดงความคิดเห็นใน
กระดานของตนเอง
ตารางที่ 4.4.5 แสดงกระบวนการลบโพสต์ ข้อความ กระบวนกำร 5.0 ลบข้อความ
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
ลบข้อความ เป็ นกระบวนการที่ใช้ในการลบ
ข้อความที่โพสต์ไว้ออก

39. 29
ตารางที่ 4.4.6 แสดงกระบวนการอับโหลดไฟล์เพลง กระบวนกำร 6.0 การอับโหลดไฟล์เพลง
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
การอับโหลดไฟล์เพลง เป็ นการอับโหลดไฟล์เพลงเข้า
ไปบนเว็บเป็ น.mp3
ตารางที่ 4.4.7 แสดงกระบวนการลบไฟล์เพลง กระบวนกำร 7.0 ลบไฟล์เพลง
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
ลบไฟล์เพลง เป็ นการลบเพลงที่ไม่ตองการ
้
ออก
ตารางที่ 4.4.8 แสดงกระบวนการอับโหลดไฟล์รูป กระบวนกำร 8.0 อับโหลดไฟล์รูป
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
อับโหลดไฟล์รูป เป็ นการอับโหลดรู ปภาพที่
ประทับใจ
ตารางที่ 4.4.9 แสดงกระบวนการลบไฟล์รูป กระบวนกำร 9.0 ลบไฟล์รูป
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
ลบไฟล์รูป เป็ นลบไฟล์รูปภาพที่ไม่
ต้องการใช้ออก

40. 30
ตารางที่ 4.4.10 แสดงกระบวนการการทางานของผูดูแลระบบ กระบวนกำร 10.0 ผูดูแลระบบ
้ ้
ชื่อ กระบวนการ คาอธิบายการทางาน หมายเหตุ
การจัดการระบบสมาชิก สามารถลบสมาชิกได้
การจัดการเพลง สามารถลบไฟล์เพลงได้
การจัดการรู ป สามารถลบรู ปได้

41. 31
บทที่ 5
สรุ ปผลกำรศึกษำ กำรอภิปรำยผล และข้ อเสนอแนะ
5.1 สรุ ปผลกำรดำเนินงำน
โครงงาน มิวสิ ค โซเชียล (Music Social) เว็บไซต์สังคมเพลง จัดทาขึ้นโดยออกแบบ
ั
โครงสร้างในรู ปแบบของเว็บไซต์กบฐานข้อมูล เพื่อรองรับการใช้งานของผูใช้ ้
เว็บไซต์สังคมเพลง เป็ นอีกช่องทางเลือกหนึ่งในการบริ การให้ผใช้ที่สนใจเข้ามา
ู้
แลกเปลี่ยนข่าวสารแชร์ รูปภาพ แชร์ เพลงได้ การทางานของเว็บไซต์เน้นให้ผใช้สามารถจัดการ
ู้
ข้อมูลได้เองมากขึ้น ผูใช้สามารถเพิม ลบ แก้ไข ข้อมูล ไฟล์ที่ตนเองได้แชร์ ไว้ ได้ในส่ วนที่ระบบ
้ ่
ได้จดไว้สาหรับการจัดการในส่ วนของสมาชิก
ั
5.2 ปัญหำทีเ่ กิดขึน้
5.2.1 ปั ญหาเกิดจากภาษา Ruby เป็ น ภาษาที่กลุ่มเราไม่เคยศึกษามาก่อนจึงทาให้ไม่เข้าใจการเขียน
code
่
5.2.2 การเขียน Code ruby มีการทางานเป็ น part ดังนั้นไฟล์ codeจะอยูหลาย folder ที่เรี ยกใช้งาน
ดังนั้นจะทาให้เกิดความสับสนในการแก้ไขหรื อ ปรับปรุ งงาน
5.2.3 ภาษา Ruby เป็ นการเขียนโดยใช้ terminal เป็ นตัว create หน้าเว็บไซต์ข้ ึนมาโดยที่เราจะยังไม่
เห็นหน้าเว็บที่เราสร้างขึ้นมาจนกว่าจะพิมพ์ code เสร็ จถึงจะเห็นหน้าเว็บที่เราพิมพ์
5.2.4 ปั ญหาเกิดจาก Os ที่เราใช้ในการทางาน มีการเปลี่ยนเวอร์ ชนเพื่อพัฒนาแก้ไข bug ต่างๆใน
ั่
ระบบทาให้เราต้องเปลี่ยนเวอร์ ชนของโปรแกรม Rails เป็ นเวอร์ ชนใหม่ ทาให้การเรี ยกใช้ขอมูล
ั่ ั่ ้
ของ code เปลี่ยนไป
5.2.5 เมื่อมีการเปลี่ยน rails เป็ นเวอร์ ชนใหม่เพื่อรองรับกับ OS ก็ยงไม่อาจแก้ไข bug ได้ท้ งหมด
่ั ั ั
อาจต้องมีการนา OS ตัวใหม่ มาใช้คู่กบ rails เวอร์ ชนเก่าเพื่อเป็ นการลดปัญหา bug ตัวใหม่ที่ติดมา
ั ั่
ั่ ั่ ั ่
กับ rials เวอร์ ชนใหม่เพราะ rails เวอร์ ชนเก่าก็จะมีตวที่ผานการแก้ไข bug แล้ว

42. 32
5.3 วิธีกำรแก้ไข
5.3.1กลุ่มเราต้องไปศึกษาการเขียน Code Ruby ใหม่ต้ งแรกจากเว็บไซต์ต่างที่เกี่ยวข้องกับ การเขียน
ั
เว็บด้วยภาษา Ruby เช่น เว็บ http://ruby.railstutorial.org/
่
5.3.2 ในการแก้ไขงาน เราต้องเข้าไปเปิ ดไฟล์ที่เราเขียนเพื่อดูวาไฟล์น้ นเรี ยกใช้ไฟล์ตวใดบ้าง แล้ว
ั ั
ไล่ดูถึงความสัมพันธ์เพื่อหาจุดแก้ไข
5.3.3 ต้องไปหาไฟล์ที่ใช้ในการดึงข้อมูลแสดงในหน้าเว็บแล้วเข้าไปลองแก้ไขที่ละจุดแล้วเปิ ดหน้า
เว็บดูการเปลี่ยนแปลงไปที่ละอย่าง
5.3.4 ดังนั้นเราจึงต้องทาการออกแบบ website ก่อนแล้วมาเรี ยบเรี ยง code ของการสร้างชิ้นงาน
เพื่อให้เกิดความผิดพลาดน้อยมี่สุด
5.3.4 มีการนาเอา code เวอร์ ชนเก่า + เวอร์ ชนใหม่เข้ามาใช้งานพสมกันเพื่อเป็ นการลด bug ของ
ั่ ั่
code
5.4 ข้ อเสนอแนะ
5.4.1 ควรศึกษาภาษาและโปรแกรมที่ใช้ในการเขียนเว็บไซต์ให้มาก เพื่อให้เกิดความชานาญและ
ความเข้าใจในการใช้งานได้อย่างมีประสิ ทธิ ภาพเพื่อนามาใช้ในการเขียนโปรแกรม ลดปั ญหาต่างๆ
ในการพัฒนาโปรแกรม
5.4.2 ควรศึกษาถึงการทางานในการจัดการฐานข้อมูลให้เหมาะสมกับเว็บไซต์หรื อเว็บแอพพลิเคชัน่
ที่ตองการ ทาให้ออกแบบเว็บไซต์ได้เป็ นไปตามที่ตองการง่ายในการเขียนเว็บไซต์หรื อเว็บ
้ ้
แอพพลิเคชัน ่
5.4.3 ผูพฒนาเว็บไซต์หรื อเว็บแอพพลิเคชันควรตระหนักถึงการจัดรู ปแบบของ Source code การ
้ ั ่
เขียนคอมเม้นไว้ในแต่ละส่ วนการทางาน เพื่อง่ายต่อการแก้ไข

43. 33
บทที่ 6
คู่มือกำรใช้ งำน
6.1 โปรแกรมทีต้องใช้ ในระบบ
่
6.1.1 Ruby on Rails
6.1.2 SQLite
6.2 คู่มือกำรใช้ งำน
หน้าเว็บ มิวสิ ค โซเชียล (Music Social)
รู ปที่ 6.1 หน้าเว็บ มิวสิ ค โซเชียล (Music Social)

44. 34
สมัครสมาชิกเพื่อสามารถเข้ามาอับโหลดเพลงแชร์ เพลง แชร์รูปที่หน้าประทับใจ แลกเปลี่ยนความ
คิดเห็นติดตามคนที่เราชอบ
รู ปที่ 6.2 หน้า สมัครสมาชิก
รู ปที่ 6.3 ฟ้ อง error กรณี ชื่อซ้ ากัน

45. 35
รู ปที่ 6.4 ฟ้ อง error กรณี password ไม่ตรงกัน
รู ปที่ 6.5 ฟ้ อง error กรณี e-mail ซ้ ากัน

46. 36
รู ปที่ 6.6 ฟ้ อง Error กรณี กรอกข้อมูลไม่ครบ
รู ปที่ 6.7 หน้า Login เข้าระบบ

47. 37
รู ปที่ 6.8 แสดงหน้า Login แล้ว
สมาชิกสามารถเข้ามาอับโหลดเพลงฟังเพลงได้จากหน้าเว็บ
รู ปที่ 6.9 อัพโหลดเพลง

48. 38
รู ปที่ 6.10 เล่นเพลงได้
สมาชิกสามารถเข้ามาอับโหลดรู ปและดูได้จากหน้าเว็บ
รู ปที่ 6.11 อัพโหลดรู ป

49. 39
รู ปที่ 6.12 ดูรูปที่อพโหลดได้
ั

50. 40
บรรณำนุกรม
Ebook ruby on rails tutorial จาก http://ruby.railstutorial.org/
วิธีแสดงการทางานของ code จาก http://stackoverflow.com/ นามาปรับใช้ กบเว็บไซต์
ั