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

1. เว็บแอพพลิเคชันค้นหาร้านอาหาร
่
Search restaurant web application
โดย
นางสาวอิสรี ย ์ สวัสดิ์รัตนกร 52006667
นายวีรยุทธ เวทยวิศิษฎ์ 52003193
โครงงานนี้เป็ นส่ วนหนึ่งของการศึกษาหลักสู ตรวิทยาศาสตรบัณฑิต
สาขาวิชาเทคโนโลยีสารสนเทศและการสื่ อสาร คณะเทคโนโลยีสารสนเทศ
มหาวิทยาลัยศรี ปทุม
พ.ศ.2554

2. สารบัญ
หน้า
หน้าอนุมติ
ั ก
บทคัดย่อ ข
กิตติกรรมประกาศ ค
คํานํา ง
สารบัญ จ
บทที่ 1 บทนํา
1.1 ความเป็ นมาของโครงการ 1
1.2วัตถุประสงค์ของโครงการ 2
1.3ขอบเขตของโครงการ 2
1.4 ประโยชน์ที่คาดว่าจะได้รับ 3
1.5 แผนการดําเนินงานของโครงงาน 4
1.6 อุปกรณ์และโปรแกรมที่ใช้ 4
บทที่ 2 ทฤษฎีที่เกี่ยวข้อง
2.1 ทฤษฎีที่เทคโนโลยีที่เกี่ยวข้อง 5
บทที่ 3 การออกแบบระบบ
3.1 แผนภาพบริ บท (Content Diagram) 14

3. 3.2 แผนภาพกระแสข้อมูล (Data Flow Diagram) 15
3.3แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิต้ ี 17
3.4 ตารางฐานข้อมูล ( Data Table ) 18
3.5แผนการทํางาน ( Flowchart ) 21
3.6การออกแบบส่ วนเชื่อมประสานกับผูใช้ ( User Interface Design )
้ 22
บทที่ 4 การพัฒนาโปรแกรมในระบบ
4.1 อุปกรณ์และโปรแกรมที่ใช้ 32
4.2 การทํางานทั้งหมดของโปรแกรม 34
บทที่ 5 การพัฒนาโปรแกรมในระบบ
5.1 ปัญหาและอุปสรรคในการดําเนินงาน 42
5.2 ข้อเสนอแนะเกี่ยวกับโครงการ 42
5.3 สรุ ปการทําโครงงาน 42
บรรณานุกรม 43
ภาคผนวก 44
ประวัติผจดทําโครงงาน
ู้ ั 55

4. ข
บทคัดย่อ เว็บแอพพลิเคชันค้นหาร้านอาหาร
่
(Search restaurant web application)
โดย 1. นายวีรยุทธ เวทยวิศิษฎ์ รหัส 52003193
2. นางสาวอิสรี ย ์ สวัสดิ์รัตนกร รหัส 52006667
อาจารย์ทปรึกษา
ี่ อาจารย์ ชฎาพร เกตุมณี
เครื อข่ายสังคมร้านอาหารออนไลน์ (The social restaurant) บนเว็บไซต์ที่พฒนาด้วยภาษา Ruby On
ั
่
Rails ก็สามารถใช้งานได้ เป็ นการแนะนาร้านอาหารในรู ปแบบใหม่ ที่มีการนาเทคโนโลยีที่มีอยูในปั จจุบน ั
มาใช้ให้เกิดประโยชน์ และช่วยส่ งเสริ มการขายภายในประเทศ ในการค้นหาร้านอาหาร จะสามารถเลือกให้
ดูรายละเอียด ที่ต้ งของสถานที่ และสถานที่ใกล้เคียง เพื่อเป็ นสื่ อกลางในการค้นหาข้อมูลร้านอาหารให้
ั
เหมาะสมกับความต้องการของผูที่จะใช้บริ การร้านอาหาร นอกจากนั้นยังช่วยลดเวลาในการเลือกร้านอาหาร
้
และเพิ่มความสะดวกสบายให้แก่ผใช้ได้อีกด้วย
ู้
โครงงานเว็บแอพพลิเคชันค้นหาร้านอาหารนี้ เป็ นทางเลือกหนึ่งสาหรับผูที่ตองการที่จะ
่ ้ ้
รับประทานอาหาร เพื่อให้ผที่ตองการได้ทราบเบื้องต้นว่าตนเองสามารถไปที่ไหนได้ ที่ต้ งของสถานที่
ู้ ้ ั
่
ร้านอาหารนั้นอยูที่ไหน โดยที่ผใช้มีการระบุสถานที่ตองการได้ สามารถบอกเส้นทางออกมาให้ผใช้ได้
ู้ ้ ู้
ทางผูจดทาโครงงานได้ใช้โปรแกรม Ruby on Rails รวมถึง ฐานข้อมูล MySQL ในการพัฒนา
้ั
โครงงานมาใช้ในการพัฒนาโครงงานอีกด้วย

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

6. ง
คำนำ
ในการทาโครงงานครั้งนี้สืบเนื่องมาจากผูจดทาเป็ นคนชอบรับประทานอาหารจึงอยาก
้ั
สร้างเครื อค่ายสังคมร้านอาหารออนไลน์ (The social restaurant) ทางผูจดทาจึงอยากจะให้เพื่อน ๆ
้ั
ที่ได้ไปรับประทานอาหารตามร้านต่าง ๆ เพื่อมาเล่าสู่ กนฟั ง อาทิเช่น เมนูอาหาร ความอร่ อย ความ
ั
ความสบายและสะอาดของร้านอาหาร รวมถึงบริ การอื่น ๆ โครงงานนี้มีจุดมุ่งหมายเพื่อช่วยในการ
โปรโมทร้านอาหารและช่วยในการตัดสิ นใจเลือกใช้บริ การร้านอาหารและคาแนะนาเกี่ยวกับ
ร้านอาหารจากผูที่ใช้บริ การร้านอาหาร
้
ทางผูจดทาขอขอบคุณ อาจารย์ ชฎาพร เกตุมณี ผูให้ความรู้ แนวทางการศึกษาพัฒนา
้ั ้
โครงงาน รวมถึงคุณพ่อและคุณแม่ที่ให้กาลังใจมาโดยตลอด ผูจดทาหวังว่าโครงงานฉบับนี้จะให้
้ั
ความรู ้ และเป็ นประโยชน์แก่ผอ่านทุก ๆ ท่าน
ู้
นายวีรยุทธ เวทยวิศิษฎ์
นางสาวอิสรี ย ์ สวัสดิ์รัตนกร
กันยายน 2555

7. 1
บทที่ 1
บทนำ
1.1 ควำมเป็ นมำและควำมสำคัญของปัญหำ
ภัตตาคาร หรื อ ร้านอาหาร เป็ นร้านที่คอยบริ การอาหารตามความต้องการของลูกค้า ตาม
พจนานุกรมฉบับราชบันฑิตยสถาน พ.ศ. 2525 หมายถึง อาคารที่จาหน่ายอาหารและเครื่ องดื่ม ใน
ปั จจุบนคาว่าภัตตาคาร เป็ นคาที่ใช้เรี ยกสถานที่สาธารณะที่มีการเตรี ยมอาหารสาหรับผูบริ โภคหรื อ
ั ้
อาหารนอกสถานที่
อาหารเป็ นปั จจัยหลักในการดารงชีพของมนุษย์ ทุกสังคมจึงดาเนินชีวต ด้วยรู ปแบบแตกต่างกัน
ิ
ในปัจจุบนสามารถจาแนกอาหารไทยได้เป็ น ๒ รู ปแบบคือ
ั
- อาหารแบบราชสานัก ด้วยธรรมเนียมราชสานักฝ่ ายในมักถือเป็ นต้นแบบประเพณี การดารงชีวตที่ ิ
ดีของคนไทย อาหารในราชสานักจึงเป็ นที่นิยมบริ โภคตามแบบตั้งแต่อดีตถึงปั จจุบน ั
- อาหารพื้นเมือง คือ อาหารประจาภูมิภาคต่าง ๆ ที่แตกต่างกันตามลักษณะพืชพันธุ์ และสภาพภูมิ
ประเทศ
ข้าวเป็ นอาหารหลักของคนไทย เมื่อหิ วก็นึกถึงข้าวเรี ยกอาหารแต่ละมื้อการทามาหากินก็มีอาชีพ
่ ั
ปลูกข้าวเป็ นหลักมาแต่อดีต วงจรชีวิตและประเพณี วฒนธรรมจึงผูกพันอยูกบข้าวตลอดปี มี
ั
ประเพณี ทาบุญ บูชาเทพยาดา บรรพบุรุษ เพื่อผลแห่งความอุดมสมบูรณ์ของธัญญาหาร
และในปั จจุบนการใช้อินเตอร์ เน็ตมีอย่างแพร่ หลาย จึงอยากที่จะพัฒนาเว็บสาหรับค้นหา
ั
ร้านอาหาร
และยังมีบริ การค้นหาร้านอาหาร และบอกรายละเอียดของร้านอาหารสามารถแสดงความ
คิดเห็น โพสต์รูปภาพเพื่อให้สมาชิกคนอื่นใช้ประกอบการตัดสิ นใจ

8. 2
1.2 วัตถุประสงค์ ของโครงงำน
1.2.1 เพื่อความสะดวกสาหรับข้อมูลในการค้นหาร้านอาหารต่างๆสาหรับคนที่ไม่เคยไป
ร้านนั้นๆ
่
1.2.2 สามารถบอกถึงกิจกรรมที่เรากาลังทาอยูในร้านนั้นๆเพื่อประโยชน์ในการพบปะหรื อ
นัดกันให้พบกันง่ายมากขึ้น
1.2.3 เป็ นการช่วยกันสร้างข้อมูลร้านอาหารโดย คนทัวไปหรื อเจ้าของร้าน
่
ั
1.2.4 แบ่งปั นสถานที่ของเราให้กบเพื่อนโดยผ่านสังคมออนไลน์ได้
1.2.5 อิสระในการออกความคิดเห็น
1.3 ขอบเขตกำรศึกษำ
โครงงานระบบช่วยตัดสิ นใจและแนะนาเกี่ยวกับร้านอาหาร เป็ นทางเลือกหนึ่งสาหรับผูที่
้
ต้องการที่จะรับประทานอาหาร เพื่อให้ผที่ตองการรับประทานอาหารได้ทราบเบื้องต้นว่าตนเอง
ู้ ้
สามารถไปที่ไหนได้ เดินทางไปอย่างไร มีร้านอาหารบริ การที่ไหนน่าสนใจบ้าง เพื่อเพิ่มความ
สะดวกสบายและประหยัดเวลา
1.3.1 ส่ วนของการทางานผูใช้( User )
้
- ใช้บญชี จากสังคมออนไลน์ที่มีอยู่เพื่อแบ่งปั นให้เพื่อนในสังคมออนไลน์ของผู ้
ั
ใช้ได้
- สามารถบอกถึ งกิ จกรรมของร้านอาหารที่ผใช้ได้ทาการระบุไว้ให้เพื่อนในสังคม
ู้
ออนไลน์ได้ทราบเพื่อสะดวกต่อการค้นหาของเพื่อนคนอื่นๆ
- มีการค้นหาร้ านอาหารโดยใส่ ความต้องการหรื อปั จจัยในการค้นหาได้จากข้อมูล
ในฐานข้อมูล
- แสดงแผนที่ของร้านอาหารตามความต้องการ
- มีความสัมพันธ์เพื่อจัดอันดับความนิยมของร้านอาหาร
1.3.2 ส่ วนของผูดูแลและจัดการระบบ ( Administrators )
้
- เข้าสู่ ระบบได้ โดยใช้รหัสผ่านตามที่กาหนด
Username : somune-_-cawaii@hotmail.com
Password : isaree
- มีการจัดการฐานข้อมูลภายในระบบ (Manage)
- ลบ (Delete)

9. 3
1.4 ประโยชน์ ทคำดว่ำจะได้ รับ
ี่
- สามารถสร้างข้อมูลขนาดใหญ่ได้โดยผูใช้(User) ที่หลากหลาย
้
ั
- เพื่อประโยชน์ในการโฆษณาให้กบเจ้าของร้านอาหาร เพื่อสร้างความหลากหลาย
ั ้
ให้กบ ผูบริ โภคได้เลือกมากขึ้น
- สามารถบอกถึ ง กิ จกรรมที่ ผูใ ช้ได้ท าการระบุ ไ ว้ให้เพื่อนในสั งคมออนไลน์ ไ ด้
้
ทราบเพื่อสะดวกต่อการค้นหาของเพื่อนคนอื่นๆในการนัดเจอกัน
- ผูใช้สามารถโพสรู ปในอัลบั้มร้านอาหารของตนเองได้
้
1.5 แผนกำรดำเนินงำน
1.5.1 ศึกษาเนื้อหาที่ตองใช้ในการทาโครงงาน
้
1.5.2 รวบรวมเนื้ อหาที่ตองใช้ในการทาโครงงาน โดยการรวบรวมเนื้อหาที่เกี่ยวข้องกับ
้
ระบบ และศึกษาการใช้ฐานข้อมูล MySQLรวมถึง การเขียนโปรแกรมด้วยภาษา Ruby
1.5.3 ออกแบบโปรแกรมหลังจากวิเคราะห์แล้วจะทาการออกแบบ เป็ นขั้นตอนที่สาคัญมาก
อย่างหนึ่ง ระบบที่ออกแบบจะต้องมีถูกต้อง เพื่อไม่ให้เกิดปั ญหาในการพัฒนาต่อไป
1.5.4 การพัฒนาและทดสอบการนาข้อมูลที่ออกแบบมาปฏิบติดงต่อไป ั ั
1.5.4.1 การเขียนโปรแกรม
1.5.4.2 การทดสอบย่อย
1.5.4.3 การทดสอบรวม
1.5.5 ทดสอบและติดตั้งระบบ
1.5.6 จัดทาเอกสาร เป็ นการทาเอกสารที่แสดงรายละเอียดต่างๆ ที่เกี่ยวข้องกับระบบ และจะ
ถูกตรวจสอบ โดยอาจารย์ท่ีปรึ กษา หากมีขอผิดพลาดจะทาการแก้ไขและปรับปรุ งให้ถูกต้อง
้
ตารางที่ 1.1 แสดงระยะเวลาที่กาหนดในแผนดาเนินการ

10. 4
ระยะเวลาดาเนิ นงาน พ.ย 53 ธ.ค. 53 ม.ค. 54 ก.พ. 54 มิ.ย. 54 ก.ค. 54 ส.ค. 54 ก.ย. 54
กิจกรรม 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
1. ศึกษาทฤษฎี
2. เก็บรวบรวมข้อมูล
3. วิเคราะห์ขอมูล
้
4. ออกแบบโปรแกรม
5. พัฒนาทดสอบ
5.1 การเขียนโปรแกรม
5.2 การทดสอบย่อย
5.3 การทดสอบรวม
6. ทดสอบติดตั้งระบบ
7. จัดทาเอกสาร
1.7 ฮำร์ ดแวร์ และโปรแกรมทีคำดว่ำจะได้ ใช้
่
1.7.1 ฮาร์ ดแวร์ ที่คาดว่าจะใช้
1.7.1.1 Computer
1.7.1.2 Printer
1.7.2 โปรแกรมที่คาดว่าจะใช้
1.7.2.1 Ubuntu ( 12.04 ) Linux
1.7.2.2 MySQL
1.7.2.3 Sublime Text 2
1.7.2.4 Rails ver. 3.2
1.7.2.5 Ruby ver. 1.9.3

11. 5
บทที่2
แนวคิด ทฤษฎีและเอกสารที่เกียวข้ อง
่
เทคโนโลยีทใช้ ี่
2.1 Ruby
จากวิกิพีเดีย สารานุกรมเสรี
ภาษารู บี (Ruby) เป็ นภาษาโปรแกรมเชิงวัตถุ ที่ได้รับอิทธิพลของโครงสร้างภาษามาจาก ภาษาเพิร์ลกับ
ภาษาเอดา มีความสามารถในเชิงวัตถุแบบเดียวกับภาษาสมอลทอล์ค และมีความสามารถหลายอย่างจากภาษาไพ
ทอน, ภาษาลิสป์ , ภาษา Dylan และภาษา CLU ตัวแปลภาษารู บีตวหลักเป็ นซอฟต์แวร์ เสรี และเป็ นตัวแปลแบบ
ั
อินเตอร์พรี เตอร์
ประวัติ
ภาษารู บีสร้างโดย Yukihiro Matsumoto หรื อ "Matz" ซึ่ งเริ่ มพัฒนาเมื่อ 24 กุมภาพันธ์ ค.ศ. 1993 และออ
กรุ่ นแรกสู่ สาธารณะใน ค.ศ.1995 ชื่อ "รู บี" ที่แปลว่า ทับทิม นั้นเป็ นหิ นประจาเดือนเกิดของเพื่อนร่ วมงานของ
Matsumoto โดยรู บีไม่ได้ต้ งใจตั้งชื่อล้อกับ Perl (แปลว่า ไข่มุก) ซึ่งเป็ นหินประจาเดือนมิถุนายน ในขณะที่ทบทิม
ั ั
เป็ นหินของเดือนกรกฎาคม
รุ่ นล่าสุ ดคือรู บีคือ 1.9.2
ปรัชญา
ประเด็นหลักในการออกแบบภาษารู บีของ Matz คือการทาให้โปรแกรมเมอร์ มีความสุ ขโดยการลดงานที่ไม่
ต้องใช้ทกษะออกไป โดยเป็ นไปตามหลักการของการออกแบบส่ วนต่อประสานกับผูใช้ที่ดี[1] Matz เน้นว่าการ
ั ้
ออกแบบระบบควรให้ความสาคัญกับความจาเป็ นของมนุ ษย์มากกว่าความจาเป็ นของเครื่ องคอมพิวเตอร์
บ่อยครั้งที่ผคนโดยเฉพาะวิศวกรคอมพิวเตอร์ เพ่งความสนใจไปที่เครื่ องจักร พวกเขาคิดว่า "โดยการ
ู้
กระทานี้ทาให้เครื่ องจักรทางานได้เร็ วขึ้น โดยการกระทานี้เครื่ องจักรจะทางานอย่างมีประสิ ทธิ ภาพมากขึ้น โดย
่
การกระทานี้เครื่ องจะทาบางอย่างๆๆ" พวกเขาพุงความสนใจไปที่เครื่ องจักร แต่แท้ที่จริ งแล้ว เราจาเป็ นที่จะต้อง
่
พุงความสนใจไปที่มนุษย์ ได้แก่ การสนใจว่ามนุษย์เขียนโปรแกรมอย่างไร หรื อใช้งานเครื่ องจักรอย่างไร เราเป็ น
นาย เครื่ องจักรที่เป็ นทาส
กล่าวกันว่าภาษารู บีทาตามหลักการทาให้ประหลาดใจน้อยที่สุด (principle of least surprise; POLS) ซึ่ง
หมายความว่าภาษาปกติแล้วควรมีลกษณะที่สอดคล้องกับสัญชาตญาณหรื อเป็ นไปตามสมมุติฐานที่
ั
่
โปรแกรมเมอร์ ได้คาดไว้ วลีน้ ีไม่ได้มีที่มาจาก Matz แต่พูดกันทัวไป วิถีทางของภาษารู บีอาจจะใกล้เคียงกับวลีวา
่

12. 6
"การทาให้ Matz ประหลาดใจน้อยที่สุด" อย่างไรก็ตามโปรแกรมเมอร์ หลายคนพบว่าการทาให้ Matz ประหลาดใจ
น้อยที่สุดก็ใกล้เคียงกับตัวแบบของจิตใจของพวกเขาด้วย
ในการให้สัมภาษณ์ Matz นิยามว่า "ทุกคนมีภูมิหลังของตนเอง บางคนอาจจะเคยใช้ภาษาไพทอน บางคน
อาจจะเคยใช้ภาษาเพิร์ล พวกเขาอาจประหลาดใจโดยมีสาเหตุจากแง่มุมต่างๆ กันของภาษา จากนั้นพวกเขามาหา
ฉันและพูดว่า 'ฉันประหลาดใจเนื่องจากลักษณะพิเศษนี้ของภาษา ดังเมื่อมีเหตุการเช่นนี้ภาษารู บีจึงละเมิดหลักการ
ทาให้ประหลาดใจน้อยที่สุด' ช้าก่อนๆ หลักการทาให้ประหลาดใจน้อยที่สุดไม่ใช่สาหรับทุกคน หลักการทาให้
ประหลาดใจน้อยที่สุดหมายถึงหลักการทาให้ "ฉัน" ประหลาดใจน้อยที่สุด และจะเป็ นหลักการทาให้ประหลาดใจ
น้อยที่สุดก็ต่อเมื่อคุณได้ศึกษาภาษารู บีมาแล้วอย่างดี ตัวอย่างเช่น ฉันเคยเป็ นโปรแกรมเมอร์ ภาษาซี พลัสพลัสมา
ก่อนที่ออกแบบภาษารู บี ฉันได้เขียนโปรแกรมภาษาซี พลัสพลัสเพียงภาษาเดียวมาสองหรื อสามปี และหลังจาก
สองปี นั้นภาษาซี พลัสพลัสก็ยงทาให้ฉนประหลาดใจอยู"
ั ั ่
ที่มา : (จากวิกิพเี ดีย สารานุกรมเสรี http://th.wikipedia.org/wiki เวลา 22.45 25 มีนาคม 2555
นวรัตน์ ธนะรุ่ งรักษ์ และ ประเวศน์ วงษ์คาชัย, การพัฒนาเว็บแอปพลิเคชันแบบ Agile ด้วย Rails และ Ruby,
่
พิมพ์ครั้งที่ 1, สานักพิมพ์ เคทีพี, 2549.
ด.ร.วีระศักดิ์ ซึ งถาวร, Ruby on Rails, พิมพ์ครั้งที่ 1, สานักพิมพ์ ไอนิม, 2552. )
ตัวอย่าง
def show
@user = User.find(params[:id])
@microposts = @user.microposts.paginate(:page => params[:page])
@title = @user.name
end
ส่ วนนี้เป็ นการทางานภาษา Ruby ในส่ วนของ controller คือ ส่ วนที่ควบคุมการทางานต่างของเว็บแอพพลิเคชัน ดัง
่
code ตัวอย่างเป็ นการแสดงข้อมูลของ user โดยเรี ยกจาก User Model ซึ่ง User Model จะทาหน้าที่ติดต่อกับ
ฐานข้อมูล ส่ งไปยัง controller และแสดงผลทางหน้าจอโดย user view

13. 7
2.2 Rails
รู บีออนเรลส์ (อังกฤษ: Ruby on Rails: RoR) หรื อนิยมเรี ยกสั้นๆ ว่า เรลส์ (Rails) เป็ นระบบเฟรมเวิร์ก
สาหรับเว็บแอปพลิเคชันแบบโอเพนซอร์ส ที่พฒนาด้วยภาษารู บี โดยอิงแนวความคิดแบบ Model-View-
ั
Controller (MVC) เป็ นสถาปั ตยกรรมพื้นฐาน
รู บีออนเรลส์ มีชื่อเสี ยงจากความง่ายในการใช้งาน โดยใช้การเขียนโปรแกรมจานวนน้อยบรรทัดกว่า และมี
การระบุค่าตั้งน้อยกว่าเฟรมเวิร์กที่ออกมาก่อนหน้าตัวอื่นๆ การติดตั้งรู บีออนเรลส์ทาได้โดยผ่านระบบ
RubyGems ซึ่ งเป็ นระบบการจัดการส่ วนประกอบในภาษารู บ้ ีอย่างเป็ นทางการ
ั
รู บีออนเรลส์ เริ่ มพัฒนาโดย David Heinemeier Hansson เพื่อใช้กบเครื่ องมือจัดการโครงการชื่ อ Basecamp
ของบริ ษท 37 Signals ที่เขาทางานอยูรูบีออนเรลส์ได้เผยแพร่ สู่สาธารณะชนเมื่อเดือนกรกฎาคม ค.ศ. 2004 โดยรุ่ น
ั ่
ปั จจุบนนั้นคือรุ่ น 2.3 ออกเมื่อวันที่ 15 มีนาคม พ.ศ. 2552
ั
ที่มา : ((จากวิกิพีเดีย สารานุกรมเสรี http://th.wikipedia.org/wiki เวลา23.16 วันทีใช้ งาน 25 มีนาคม 2555
่
นวรัตน์ ธนะรุ่ งรักษ์ และ ประเวศน์ วงษ์คาชัย, การพัฒนาเว็บแอปพลิเคชันแบบ Agile ด้วย Rails และ Ruby,
่
พิมพ์ครั้งที่ 1, สานักพิมพ์ เคทีพี, 2549.
สุ ธิ พงศาสกุลชั ย และ ประเวศน์ วงษ์ คาชั ย, การโปรแกรมภาษา Ruby, พิมพ์ครั้งที่ 1, สานักพิมพ์ เคทีพี, 2550.)

14. 8
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
ก่อนหน้าการถือกาเนิ ดของ CSS level 1 Recommendations นั้น การจัดรู ปแบบของข้อความใน
เอกสาร HTML ใช้แท็ก (Tag) ควบคุมรู ปแบบข้อความ กาหนดขอบเขตของข้อความส่ วนที่ตองการแสดงผล
้
ซึ่งในเอกสาร HTML ฉบับเดียวกัน หรื อ เอกสาร HTML หลายฉบับภายในเว็บไซต์เดียวกัน มักกาหนดแท็ก
สาหรับแสดงผลคล้ายๆ กัน เพื่อให้รูปแบบการแสดงผลสอดคล้องกัน เช่น รู ปแบบของหัวข้อจะซ้ ากัน และ
รู ปแบบการจัดวางหน้าเอกสารจะเหมือนกัน เป็ นต้น ซึ่ งการที่ตองระบุแท็ก ควบคุมรู ปแบบเดียวกันซ้ ากัน
้

15. 9
หลายที่ในเอกสาร ทาให้การจัดรู ปแบบเอกสารทาได้ไม่สะดวกนัก ตัวอย่างเช่น แท็ก <FONT> และ ส่ วน
ั
ขยายของแท็ก (แอ็ททริ บิวต์ หรื อ attribute) COLOR เพื่อกาหนดสี ให้กบข้อความจะต้องแทรกไว้ในทุกๆ
ตาแหน่งของข้อความที่ตองการกาหนดสี เป็ นต้น
้
นอกจากนั้นโปรแกรมที่ทาหน้าที่เว็บบราวเซอร์ จะทาหน้าที่แปลความหมายของแท็ก ในเอกสาร
HTML และแสดงผลลัพธ์ออกทางหน้าจอได้แก่ โปรแกรมประยุกต์ประเภทเว็บบราวเซอร์ ซึ่ งโปรแกรม
ประเภทนี้ มีจานวนมากมาย หลายโปรแกรม แต่โปรแกรมเว็บบราวเซอร์ ท่ีเป็ นที่นิยมมากที่สุด 2 โปรแกรม
ได้แก่ Netscape และ Internet Explorer
ซึ่ งโปรแกรมเว็บบราวแต่ละโปรแกรม สนับสนุนลักษณะการกาหนดรู ปแบบการแสดงผลของเอกสาร
HTML เพิ่มเติมจากข้อกาหนดมาตรฐานของ HTML เพื่อให้การแสดงผลเนื้ อหาเอกสารทาได้หลากหลาย
รู ปแบบ ดังนั้น หากเอกสาร HTML มีการเรี ยกใช้แท็ก และแอททริ บิวต์ที่กาหนดขึ้นใช้งานเฉพาะเจาะจงกับ
ั
โปรแกรมเว็บบราวเซอร์ แต่ละโปรแกรม มีผลทาให้การแสดงผลเอกสารที่เหมาะสม ทาได้กบเฉพาะบางเว็บ
บราวเซอร์ ที่สนับสนุน และอาจไม่สามารถแสดงผลได้ถูกต้องเหมาะสมด้วยโปรแกรมเว็บบราวเซอร์
โปรแกรมอื่น
ด้วยสาเหตุดงกล่าว ทาให้การสร้างเว็บเพจในขณะนั้น แยกส่ วนการกาหนดรู ปแบบการแสดงผล
ั
เอกสาร ออกจากเนื้อหาของเอกสาร ทาได้ยาก นอกจากนั้น รู ปแบบการแสดงผลยังอาจขึ้นอยูกบโปรแกรม ่ ั
เว็บบราวเซอร์เฉพาะบางโปรแกรม ดังนั้น เพื่อที่จะลดปั ญหาดังกล่าว องค์กร World Wide Web Consortium
หรื อ W3C ได้กาหนดมาตรฐานของ การกาหนดรู ปแบบการแสดงผลเอกสาร HTML ในรู ปแบบของ CSS
level 1 Recommendation ขึ้น และแทรกเข้าไปในมาตรฐานของข้อกาหนดภาษา HTML 4.0 ซึ่งโปรแกรม
Netscape เวอร์ ชนตั้งแต่ 4.0 ขึ้นไป รวมทั้ง โปรแกรม Internet Explorer ตั้งแต่เวอร์ ชน 4.0 ขึ้นไป สนับสนุน
ั ั
มาตรฐานของการกาหนดรู ปแบบการแสดงผล HTML ดังกล่าว
ดังนั้น ผูสร้างเอกสาร HTML สามารถใช้ CSS กาหนดรู ปแบบของข้อความในเอกสาร HTML ไว้
้
เป็ นรู ปแบบ หรื อ "Style" แทนการต้องกาหนดใหม่ทุกครั้งที่แสดงผลข้อความ ทาให้การจัดการรู ปแบบ
ข้อความทาได้สะดวกมากยิงขึ้น และสามารถออกรู ปแบบการจัดวางเอกสารได้ โดยไม่ข้ ึนกับเนื้อหาของ
่
เอกสาร นอกจากนั้นยังมีผลทาให้ขนาดของเอกสาร HTML ที่ใช้ CSS ในการจัดรู ปแบบข้อความ ซึ่งอาจมีผล
ทาให้ขนาดของแฟ้ มมีขนาดลดลง และทาให้สามารถใช้ช่องทางการสื่ อสารเพื่อถ่ายโอนแฟ้ มเอกสารผ่านทาง
ระบบเครื อข่ายอินเทอร์ เน็ตได้อย่างมีประสิ ทธิ ภาพมากขึ้น
หลังจากนั้น องค์กร W3C ได้กาหนด CSS level 2 Recommendations เพื่อเพิ่มเติมกฏเกณฑ์การ
กาหนดรู ปแบบของสื่ อที่ใช้การแสดงผลข้อมูล โดยผูสร้างเอกสาร อาจเลือกใช้รูปแบบ หรื อ "Style" ในการ
้
กาหนดรู ปแบบให้แสดงผล หรื อ กาหนดให้ไม่แสดงผลข้อมูล บนอุปกรณ์บางประเภทที่มีรูปแบบการ
แสดงผลข้อมูลต่างจากการแสดงออกทางหน้าจอปกติ โดยผูสร้างเอกสารสามารถใช้ CSS ในกาหนดรู ปแบบ
้
่ ั
การแสดงผลที่เหมาะสม โดยไม่ข้ ึนอยูกบเนื้ อหาภายในเอกสาร ตัวอย่างเช่น เอกสารฉบับเดียวกัน เมื่อ
แสดงผลบนอุปกรณ์สาหรับคนสายตาพิการ อาจกาหนดรู ปแบบให้ไม่แสดงรู ปภาพ แต่แสดงในรู ปแบบอื่น

16. 10
ที่เหมาะสม หรื อ บนอุปกรณ์สาหรับคนหูหนวก อาจกาหนดไม่ให้ตองแสดงข้อมูลเสี ยง แต่แสดงผลใน
้
รู ปแบบของข้อความ เป็ นต้น
ที่มา : (http://www.xvlnw.com/knowledge-readknowledge-id158.html เวลา 14.25 วันที่ใช้งาน 25 มีนาคม
2555
ตัวอย่าง
#menu {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande",
Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #333 url(/images/seperator.gif) bottom right no-repeat;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2 url(/images/hover.gif) bottom center no-repeat;
color: #fff;
padding-bottom: 8px;

17. 11
}
ตัวอย่าง code นี้นามาใช้ในส่ วนของเมนูเพื่อให้เว็บแอพพลิเคชันมีรูปแบบของหน้าเว็บที่เหมือนกันและสวยงาม
่
มีการกาหนอรู ปแบบของเมนูเช่น เมื่อเม้าส์ช้ ี เม้าส์คลิก จะเปลี่ยนสี เปลี่ยนรู ป พื้นหลังของเมนู กาหนดขนาด
ตัวอักษรในเมนู กาหนดรู ปแบบของตัวอักษร และกาหนดส่ วนต่างๆของเมนู
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 เวลา 14.50 วันที่ใช้งาน 25 มีนาคม 2555
ตัวอย่าง

18. 12
่
เป็ นการสร้างตารางลงฐานข้อมูลนั้นจะทาในcommand line หรื อ Terminal แล้วต้องอยูใน Project Directory โดย
ใช้คาสัง rails generate model ชื่อตาราง ชื่อคอลัม:ประเภทของข้อมูล ชื่อคอลัม:ประเภทของข้อมูล
่ ่ ่
่
การเชื่อมต่อProject กับ ฐานข้อมูลนั้นจะทาในcommand line หรื อ Terminal แล้วต้องอยูใน Project Directory
โดยใช้คาสั่ง rake db:migrate
2.5 HTML
่
เป็ นภาษามาร์กอัปหลักในปัจจุบนที่ใช้ในการสร้างเว็บเพจ หรื อข้อมูลอื่นที่เรี ยกดูผานทางเว็บ
ั
เบราว์เซอร์ ซึ่ งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้าง
่
แบบฟอร์ ม เชื่อมโยงภาพหรื อวิดีโอด้วย โครงสร้างของโค้ดเอชทีเอ็มแอลจะอยูในลักษณะภายในวงเล็บ
สามเหลี่ยม
เอชทีเอ็มแอลเริ่ มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) [ซึ่ งในขณะนั้นเขาได้ประกอบอาชีพ
นักวิทยาศาสตร์] สาหรับภาษา SGML ในปัจจุบน HTML เป็ นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide
ั
Web Consortium (W3C) ในปัจจุบน ทาง W3C ผลักดัน รู ปแบบของ HTML แบบใหม่ ที่เรี ยกว่า XHTML ซึ่งเป็ น
ั
ลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกาหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่
มาตรฐานกว่า มาทดแทนใช้ HTML รุ่ น 4.01 ที่ใช้กนอยูในปั จจุบน[1] ขณะที่ HTML รุ่ น 5 ยังคงยังอยูในระหว่าง
ั ่ ั ่
การพิจารณา โดยได้มีการออกดราฟต์มาเสนอเมื่อวันที่ 22 มกราคม 2551 [2]
HTML ยังคงเป็ นรู ปแบบไฟล์อย่างหนึ่ง สาหรับ .html และ สาหรับ .htm ที่ใช้ในระบบปฏิบติการที่รองรับ
ั
รู ปแบบนามสกุล 3 ตัวอักษร
ตัวอย่าง
<table class="profile" summary="Profile information">
<tr>
<td class="main">
<h1>
<%= image_tag @user.image_url, :size => 30 %>
<%= @user.name %>
</h1>
<%= render 'follow_form' if signed_in? %>
<% unless @user.microposts.empty? %>
<table class="microposts" summary="User microposts">
<%= render @microposts %>
</table>
<%= will_paginate @microposts %>

19. 13
<% end %>
</td>
<td class="sidebar round">
<strong>Name</strong> <%= @user.name %><br />
<strong>URL</strong> <%= link_to user_path(@user), @user %>
<strong>Microposts</strong> <%= @user.microposts.count %>
<%= render 'shared/stats' %>
</td>
</tr>
</table>
<table class="microposts" summary="User microposts">
<%= render @microposts %>
</table>
เป็ นการแสดงหน้าโปรไฟล์ของ user โดยใช้ภาษา HTML ร่ วมกับ ภาษา Ruby เพื่อควบคุมการแสดงผล
ของหน้าเว็บตามที่ตองการ
้

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

21. 15
3.2 แผนภาพกระแสข้ อมูล ( Data Flow Diagram )
แผนภาพกระแสข้ อมูลแสดงรายละเอียดต่างๆ ของการทางานของ เว็บแอพพลิเคชันค้ นหาร้ านอาหาร
่
ผูใช้งานทัวไป
้
สมัครสมาชิก แฟ้ มข้อมูลสมาชิก
่ ข้อมูลสมาชิก ข้อมูลสมาชิก
รู ปที่ 3.2 แสดงการสมัครสมาชิก
ผูใช้ที่เป็ นสมาชิก
้
อีเมล รหัสผ่าน เข้ าสูระบบ
่ ข้อมูลสมาชิก
แฟ้ มข้อมูลสมาชิก
ส่งชื่อผูใช้ รหัสผ่าน
้
่
ผ่านหรื อไม่ผาน
รู ปที่ 3.3 แสดงการเข้าสู่ ระบบสมาชิก
ข้อมูลสมาชิกใหม่
ผูใช้ที่เป็ นสมาชิก
้
แก้ไขข้อมูล แก้ ไบปรุงอข้มูมูลผู้ใช้ก
ปรั ขข้ อ ลสมาชิ
แฟ้ มข้อมูลสมาชิก
ข้อมูลสมาชิก
ข้อมูลสมาชิก
รู ปที่ 3.4 แสดงการแก้ไขข้อมูลสมาชิก

22. 16
อัพเดทสถานะ อัพเดทสถานะ อัพเดทสถานะ
ผูใช้ที่เป็ นสมาชิก
้ แฟ้แฟ้ มเก็บการโพสข้อความ
มข้อมูลข้อความ
แสดงข้อความ
แสดงข้อความ
ที่โพส
รู ปที่ 3.5 แสดงการอัพเดทสถานะ
ระบุชื่อร้านหรื อละแวกใกล้เคียง ระบุชื่อร้านหรื อละแวกใกล้เคียง
ค้นหาร้านอาหาร
ผูใช้ที่เป็ นสมาชิก
้ แฟ้ มข้อมูลสมาชิก
แสดงร้านอาหาร แสดงร้านอาหาร
รู ปที่ 3.6 แสดงการค้นหา
ความสัมพันธ์ระหว่าง ติดตามผูใช้คนอื่นๆ
้
ติดตามผูใช้คนอื่นๆ
้ แฟ้ มข้อมูลความสัมพันธ์
ผูใช้ที่เป็ นสมาชิก
้ ผูใช้
้ แสดงข้อมูล
แสดงข้อมูล
ความสัมพันธ์
ความสัมพันธ์
รู ปที่ 3.7 แสดงความสัมพันธ์ระหว่างผูใช้
้

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

24. 18
3.4 ตารางฐานข้ อมูล ( Data Table )
ตารางฐานข้อมูลของระบบเว็บไซต์ให้บริ การระบบจัดการร้านอาหารเป็ นตารางแสดงการรวมกลุ่มของ
คุณสมบัติในฐานข้อมูล หรื อ ไฟล์ชื่อของตารางต่างๆ ดังนี้
ชื่อตาราง Users
วัตถุประสงค์ เพื่อเก็บข้อมูลผูใช้
้
แฟ้ มที่เกี่ยวข้อง -
ตารางที่ 3.1 แสดงแฟ้ มผูใช้
้
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequence (Attribute) (Description) (Width) (Type) (Default) ความถูก (Key Type)
No) (Validation
Check)
1 User_id รหัสผูใช้
้ 10 integer - NOT NULL PK
2 name ชื่อผูใช้
้ 30 Varchar - NOT NULL -
3 Email อีเมลล์ผใช้
ู้ 50 Varchar - NOT NULL -
4 Password รหัสผ่าน 20 Varchar - NOT NULL -
5 Image_url รู ปของผูใช้
้ 20 Varchar - NOT NULL -
6 Details รายละเอียด 255 Varchar - - -
เพิ่มเติม
7 type ประเภทของ 20 Varchar - NOT NULL -
ผูใช้
้
8 address ่
ที่อยูของผูใช้
้ 255 Varchar - - -

25. 19
ชื่อตาราง Micropost
วัตถุประสงค์ เพื่อเก็บข้อมูลของข้อความ
แฟ้ มที่เกี่ยวข้อง User
ตารางที่ 3.1 แสดงแฟ้ มของข้อความ
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequence (Attribute) (Description) (Width) (Type) (Default) ความถูก (Key Type)
No) (Validation
Check)
1 micropost_id รหัสของ 10 integer - NOT NULL PK
ข้อความ
2 micropost ข้อความ 30 Varchar - NOT NULL -
3 User_id ผูโพส
้ 10 intager - NOT NULL FK

26. 20
ชื่อตาราง Relation
วัตถุประสงค์ เพื่อเก็บข้อมูลความสัมพันธ์ระหว่างผูใช้
้
แฟ้ มที่เกี่ยวข้อง users
ตารางที่ 3.3 แสดงแฟ้ มข้อมูลความสัมพันธ์ระหว่างผูใช้
้
ลาดับ คุณสมบัติ คาอธิบาย ขนาด ประเภท ค่าเบื้องต้น ตรวจสอบ ประเภทคีย ์
(Sequence (Attribute) (Description) (Width) (Type) (Default) ความถูก (Key Type)
No) (Validation
Check)
1 Follower_id รหัสของผูใช้ที่
้ 10 integer - NOT NULL PK
ติดตาม
2 Followed_id รหัสของผูที่ถูก
้ 10 integer - NOT NULL -
ติดตาม

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

28. 22
3.6 การออกแบบส่ วนเชื่ อมประสานกับผู้ใช้ ( User Interface Design )
การออกแบบการเชื่ อมประสานกับผูใช้งาน คือ การออกแบบส่ วนของเว็บไซต์ที่เกี่ยวข้อง
้
กับการมองเห็น การได้ยน หรื อการสัมผัสกับผูใช้ โดยส่ วนนี้สร้างขึ้นเพื่อแสดงข้อมูลที่สามารถ
ิ ้
ติดต่อกับผูใช้ ดังรู ปที่ 3.8
้
Code MAINPAGE
Name หน้าหลักก่อนเข้าสู่ ระบบ
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

29. 23
รู ปที่ 3.8 หน้าหลัก เข้าสู่ระบบ
Code SIGNUP
Name หน้าสมัครสมาชิกเพื่อเข้าสู่ระบบ
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

30. 24
รู ปที่ 3.9 หน้าสมัครสมาชิกเพื่อเข้าสู่ระบบ
Code MAINPAGE
Name หน้าหลักเมื่อเข้าสู่ระบบแล้ว
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

31. 25
รู ปที่ 3.10 หน้าหลักเมื่อเข้าสู่ระบบแล้ว
Code MAINPAGE USER
Name หน้าแสดงรายละเอียดของผูใช้ท้ งหมดและแผนที่
้ ั
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

32. 26
รู ปที่ 3.11 หน้าแสดงรายละเอียดของผูใช้ท้ งหมดและแผนที่
้ ั
Code PROFILE USER
Name หน้าแสดงข้อมูลของสมาชิก
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

33. 27
รู ปที่ 3.12 หน้าปรับปรุ งข้อมูลของสมาชิก โดยจาเป็ นจะต้องกรอกรหัสผ่านยืนยันการปรับปรุ ง
Code EDIT PROFILE USER
Name หน้าปรับปรุ งข้อมูลสมาชิก
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

34. 28
รู ปที่ 3.13 หน้าแสดงความคิดเห็น โดยจาเป็ นต้องเป็ นผูที่ติดตามผูใช้อื่นๆถึงจะเห็นข้อความของผูใช้น้ นๆและลบข้อความที่ไม่
้ ้ ้ ั
ต้องการของผูใช้
้
Code POST
Name หน้าแสดงความคิดเห็น
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

35. 29
รู ปที่ 3.14 หน้าแสดงผูท่ีผใช้กาลังติดตามและลบได้ตามต้องการ
้ ู้
Code SHOW FOLLOWING
Name หน้าแสดงผูที่ผใช้กาลังติดตาม
้ ู้
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆ

36. 30
รู ปที่ 3.15 หน้าแสดงผูท่ีกาลังติดตามผูใช้ และลบได้ตามต้องการ
้ ้
Code SHOW FOLLOWERS
Name หน้าแสดงผูที่กาลังติดตามผูใช้
้ ้
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไปยังหน้าต่างๆรู ปที่

37. 31
บทที่ 4
การพัฒนาโปรแกรมในระบบ
บทนี้จะกล่าวถึงเครื่ องมือและอุปกรณ์ที่ใช้ในการพัฒนาเว็บให้บริ การระบบจัดการร้านอาหาร ในการพัฒนา
โปรแกรมนี้ จะทําให้เข้าใจถึงระบบการทํางาน วิธีการประมวลผลและระบบการทํางานโดยรวม ซึ่งในการ
กําหนดรายละเอียดต่างๆ ที่เป็ นองค์ประกอบสําคัญในการพัฒนาและปรับปรุ งระบบ ซึ่งจะเป็ นการพัฒนาระบบ
ในอนาคต รวมถึงปั ญหาที่อาจเกิดขึ้น เพื่อแก้ไขได้ง่าย และสามารถบํารุ งรักษาระบบในอนาคต และสามารถ
บํารุ งรักษาระบบงานให้มีประสิ ทธิ ภาพเหมาะกับงานที่ทาด้วย ซึ่งผูจดทําได้พฒนาเว็บค้นหาร้านอาหารโดยมี
ํ ้ั ั
การใช้งานทางด้านอุปกรณ์และโปรแกรมต่างๆ ดังนี้
4.1 อุปกรณ์ และโปรแกรมทีใช้
่
4.1.1 อุปกรณ์ที่ใช้
อุปกรณ์ที่ใช้ในการพัฒนาเว็บค้นหาร้านอาหารประกอบไปด้วย
่
อุปกรณ์ตางๆ ดังในตารางที่ 4.1
ตารางที่ 4.1อุปกรณ์ที่ใช้ในการพัฒนาระบบ
ชื่ออุปกรณ์ นํามาใช้เพื่อ สาเหตุที่เลือกใช้
Laptop
- CPU Intel Pentium จัดทําโปรแกรมและ
สะดวกในการนํามาใช้งาน
- Ram : DDR3 2GB จัดทําเอกสารโครงงาน
- HDD : 500GB
Printer
- Model : EPSON TX111 จัดทําเอกสารโครงงาน สะดวกในการนํามาใช้งาน

38. 32
4.1.2 โปรแกรมทีใช้ ในการพัฒนาโครงงาน
่
โปรแกรมที่ใช้ในการพัฒนาระบบร้านอาหารประกอบไปด้วย โปรแกรมต่างๆ ดังใน ตารางที่ 4.2
ตารางที่ 4.2โปรแกรมที่ใช้ในการพัฒนาโครงงาน
ชื่อโปรแกรม นํามาใช้เพื่อ สาเหตุที่เลือกใช้
Sublime Text 2 เขียนโปรแกรม ง่ายต่อการเขียนโปรแกรม
Ruby เขียนโปรแกรม ง่ายต่อการเขียนโปรแกรม
ั
เพราะเป็ น Framework ที่ตองใช้กบ
้
Rails เป็ น Framework
ภาษา Ruby
เพราะสามารถประมวลผล section
MySQL เป็ นฐานข้อมูล
ได้ทีละมากๆ

39. 33
4.2 การทํางานทั้งหมดของโปรแกรมมีวธีการ ทั้งหมดดังนี้
ิ
4.2.1 หน้าต้อนรับสําหรับเข้าสู่ ระบบ
รู ปที่ 4.1แสดงหน้าเข้าสู่ ระบบ
ตารางที่ 4.3 แสดงวิธีการทํางานของการทํางาน 1.0 เข้าสู่ ระบบ
ชื่อวิธีการ คําอธิบายการทํางาน หมายเหตุ
เป็ นวิธีที่สมาชิกใช้ในการเข้าระบบ โดยการใส่
เข้าสู่ ระบบ
อีเมลเข้าระบบ และ รหัสผ่าน

40. 34
4.2.2 หน้าสมัครสมาชิก
รู ปที่ 4.2 แสดงการสมัครสมาชิก
ตารางที่ 4.4 แสดงวิธีการทํางานของการทํางาน 2.0 สมัครสมาชิก
การทํางาน 2.0 สมัครสมาชิก
ชื่อวิธีการ คําอธิบายการทํางาน หมายเหตุ
ผูที่ตองการใช้งานต้องทําการสมัครสมาชิกเพื่อ
้ ้
สมัครสมาชิก เข้าสู่ ระบบก่อนการใช้งานโดยต้องกรอก ชื่อ
อีเมล รหัสผ่าน ยืนยันรหัสผ่าน ให้ครบถ้วน

41. 35
4.2.3 หน้าหลักเมื่อเข้าสู่ ระบบ
รู ปที่ 4.3 แสดงการใช้งานหน้าหลักเมื่อเข้าสู่ ระบบ
รู ปที่ 4.4 แสดงแผนที่แบบรวม

42. 36
ตารางที่ 4.5 แสดงวิธีการทํางาน 3.0 ดูรายชื่อสมาชิก ค้นหาร้านอาหาร ดูแผนที่โดยรวม
ชื่อวิธีการ คําอธิบายการทํางาน หมายเหตุ
เพื่อต้องการดูรายละเอียดและติดตามความ
ดูรายชื่อสมาชิกร้านอาหาร
เคลื่อนไหวของร้านอาหารนั้นๆ
ค้นหาจากคียเ์ วิร์ดที่ตองการ เช่น ประเภทของ
้
ค้นหาร้านอาหาร ่
ร้านอาหาร ที่อยูของร้านอาหาร ชื่อของ
ร้านอาหาร
ดูแผนที่โดยรวมจะแสดงตําแหน่งของ
ร้านอาหารทุกร้านที่แสดงอยู่ เมื่อค้นหา
ดูแผนที่โดยรวม
ร้านอาหารจะแสดงเฉพาะร้านอาหารที่ได้จาก
การค้นหา

43. 37
4.2.4 หน้าแสดงข้อมูลของผูใช้
้
รู ปที่ 4.5 แสดงข้อมูลของผูใช้ แผนที่ และแสดงความคิดเห็น
้
รู ปที่ 4.6 แสดงข้อความแสดงความคิดเห็นของผูใช้
้

44. 38
ตารางที่ 4.6 แสดงวิธีการทํางาน 4.0 แสดงความคิดเห็น
ชื่อวิธีการ คําอธิบายการทํางาน หมายเหตุ
แสดงควมคิดเห็นโดยการพิมพ์ขอความ และ
้
แสดงความคิดเห็น
สามารถเพิ่มรู ปถ่ายได้
ลบความคิดเห็นเมื่อไม่ตองการ โดยความ
้
ลบความคิดเห็น
คิดเห็นนั้นต้องเป็ นของผูใช้
้
4.2.5 หน้าแสดงข้อมูลของผูใช้อื่นๆ
้
รู ปที่ 4.7 แสดงข้อมูลของผูใช้อื่นๆ
้

45. 39
ตารางที่ 4.7 แสดงวิธีการทํางาน 5.0 ติดตามผูใช้อื่นๆ
้
ชื่อวิธีการ คําอธิบายการทํางาน หมายเหตุ
ติดตามผูใช้อื่นๆ
้ กดปุ่ ม follow เพื่อติดตามผูใช้
้
กดปุ่ ม unfollow เมื่อไม่ตองการ
้
ติดตามผูใช้
้
4.2.6 หน้าแสดงผูที่ติดตามผูใช้ และ ผูที่ผใช้ติดตาม
้ ้ ้ ู้
รู ปที่ 4.8 แสดงผูที่ผใช้ติดตาม
้ ู้

46. 40
รู ปที่ 4.9 แสดงผูที่ติดตามผูใช้
้ ้
ตารางที่ 4.8 แสดงการทํางาน 6.0 การลบความสัมพันธ์ระหว่างผูใช้
้
ชื่อวิธีการ คําอธิบายการทํางาน หมายเหตุ
การลบความสัมพันธ์ระหว่างผูใช้
้ ั ้
ลบความสัมพันธ์กบผูใช้ที่ไม่
ต้องการ