1

บทท 1

บทน า

ในปจจบนอปกรณพกพาและอนเทอรเนต ไดเขามามบทบาท เปนอยางมากตอการด ารงชวตของมนษย ท าใหการใชงานโทรศพทมอถอหรออปกรณพกพากลายเปนสงทจ าเปนในการด าเนนชวต ซงอปกรณพกพาแตละชนดกมความสามารถทแตกตางกนออกไป ไมวาจะใชตดตอสอสาร ใชเพอความบนเทงหรอใชเพอสบคนขอมลตางๆ

1.1 ทมาของโครงงาน

ในปจจบนอปกรณพกพาและอนเทอรเนตกลายเปนสงทจ าเปนส าหรบมนษย ซงโทรศพทมอถอและอนเทอรเนตเปรยบเสมอนอกหนงปจจยในการด ารงชวตของมนษย กลายเปนอกหนงสงส าคญในการด ารงชวต มการใชงานโทรศพทมอถอและอนเทอรเนตมากมายหลายรปแบบ ตงแตใชเพอตดตอสอสารระหวางกน ใชเพอความบนเทง ใชเพอสบคนขอมลทางอนเทอรเนต

หากยอนกลบไปประมาณสถงหาปเราคงจะนกถงภาพเครองคอมพวเตอรขนาดใหญหรอเครองคอมพวเตอรพซ, โนตบค เพยงเทานนทจะสามารถใชงานหรอคนหาขอมลได แตทกลาวไปขางตนวาปจจบนโทรศพทมอถอและอปกรณพกพาตางๆนน มฟงกชนการท างานทหลากหลายมากขน สามารถท างานได เสมอน คอมพวเตอรเครองหนง ท าใหการคนหาขอมลจากอนเทอรเนตผานโทรศพทมอถอจงเปนเรองทสะดวกและสามารถสบคนขอมลไดทกททกเวลาทมสญญาณอนเทอรเนต หมดยคของเครองคอมพวเตอรตงโตะทใชพนทขนาดใหญในการตดตงเปนอยางมาก เพยงเพอการใชงานคนหาขอมล

จากเหตผลขางตนทกลาวมา จงไดมการพฒนาระบบคนหาหอพกบรเวณมหาวทยาลยบรพาและไดน า เอาเทคโนโลย jQuery Mobile เขามาชวย ในการพฒนาระบบ คนหาหอพกบรเวณมหาวทยาลยบรพา ซงเทคโนโลย jQuery Mobile เปนอกหนงทางเลอกส าหรบการสราง Platform เพอใชงานบนอปกรณพกพาตางๆ มความสะดวก และท าใหหนาเวบไซตหรอระบบงานทเราพฒนามความนาเชอถอ

1.2 วตถประสงคของโครงงาน

1) เพอศกษาและออกแบบระบบสารสนเทศเพอการคนหาหอพกบรเวณมหาวทยาลยบรพาโดยใช jQuery Mobile 2) เพอเกบรวมรวบขอมลหอพกบรเวณมหาวทยาลยบรพาและน าไปใชประโยชนตอไป

2

1.3 แนวทางการพฒนาโครงงาน

1) น าเสนอหวขอโครงงานตออาจารยทปรกษา 2) ศกษาและเกบรวบรวมขอมลทเกยวของ

- เกบรวมรวมขอมลหอพกตาง ๆ - ศกษาวธใชงานโปรแกรมทใชพฒนาโครงงาน

3) วเคราะหขอมล - ศกษาปญหาตาง ๆ ทเกดจากระบบงานแบบเดม - น าขอมลทรวบรวมไดมาวเคราะหปญหาและหาแนวทางแกไข - น าผลลพธทไดจาการวเคราะหมาออกแบบระบบงาน

4) ออกแบบระบบ - ออกแบบหนาจอการใชงานตาง ๆ บนโทรศพท - ออกแบบฐานขอมลทใช - ออกแบบแผนภาพตาง ๆ ทเกยวของกบระบบ

5) พฒนาและทดสอบระบบ - น าขอมลทไดจาการวเคราะหมาพฒนาระบบ - ทดสอบรายละเอยดยอยตาง ๆ - ทดสอบการใชงานจรงและอพโหลดขอมลขนเซฟเ วอร - สรปผลการทดสอบ

6) น าเสนอโครงงาน 7) จดท าเอกสารและคมอการใชงานระบบ

1.4 ขอบเขตของโครงงาน

1) สมาชก - สามารถเขาสระบบได - สามารถคนหาขอมลหอพกได - สามารถดขอมลหอพกได - สามารถดขอมลการแสดงความคดเหนแตละหอพกได - สามารถเปรยบเทยบขอมลตาง ๆ ของหอพกได - สามารถดต าแหนงหอพกบนแผนทได - สามารถใหคะแนนแตละหอพกได - สามารถแสดงความคดเหนในแตละหอพกได

2) ผใชทวไป

3

- สามารถสมครสมาชกได - สามารถคนหาขอมลหอพกได - สามารถดขอมลหอพกได - สามารถดขอมลการแสดงความคดเหนแตละหอพกได - สามารถเปรยบเทยบขอมลตาง ๆ ของหอพกได - สามารถดต าแหนงหอพกบนแผนทได

1.5 ประโยชนทคาดวาจะไดรบ

1) เพออ านวยความสะดวกในการคนหาหอพกบรเวณมหาวทยาลยบรพา 2) เพอเปนขอมลเบองตนกอนการตดสนใจเขาพกอาศย 3) ประหยดเวลาในการคนหาหอพก 4) ประหยดคาใชจายในการเดนทางเพอคนหาหอพก

1.6 ทรพยากรทใชในการด าเนนโครงงาน

1.6.1 ทรพยากรทางดาน Hardware

Notebook จ านวน 1 เครอง ดงรายระเอยดดงน

1) CPU Intel® Core™ i5-3210M CPU @ 2.50GHz 2.50GHz 2) DDR 3 RAM 8 GB 3) HDD 1 TB 4) เครองปรนซเตอร จ านวน 1 เครอง 5) Mobile Device จ านวน 1 เครองพรอมแอพพลเคชน WhereAmIAt? และ Camera

1.6.2 ทรพยากรทางดาน Software

1) Microsoft Windows7 เปนโปรแกรมระบบปฏบตการ 2) http://jquerymobile.com ชวยในการออกแบบหนาจอ 3) โปรแกรม AppServ เปนชดตดตงโปรแกรม 4) โปรแกรม Apache โปรแกรมเวบเซอรฟเวอร 5) โปรแกรม PHP MyAdmin เปนโปรแกรมจดการฐานขอมล MySQL ผาน เวบ

เบราวเซอร 6) โปรแกรม Mysql เปนโปรแกรมระบบจดการฐานขอมล 7) โปรแกรม Notepad++ เพอแกไขโคดของระบบงาน 8) แอพพลเคชน WhereAmIAt? บน iOS เพอบนทกต าแหนงของหอพก

4

1.7 ระยะเวลาการด าเนนงาน ตารางท 1-1 ระยะเวลาทใชในการด าเนนโครงงาน

ขนตอนการด าเนนงาน

ระยะเวลาด าเนนงาน

พ.ศ.2556

ก.พ. ม.ค. เม.ย. พ.ค. 1-

10

11-2

0 21

-28

1-10

11

-20

21-3

1 1-

10

11-2

0 21

-30

1-10

11

-20

21-3

1

1. น าเสนอหวขอโครงงานตออาจารยทปรกษา

2. ศกษาและเกบรวบรวมขอมลทเกยวของ - เกบรวมรวมขอมลหอพกตางๆ - ศกษาวธใชงานโปรแกรมทใชพฒนาโครงงาน

3. วเคราะหขอมล - ศกษาปญหาตางๆทเกดจากระบบงานแบบเดม - น าขอมลทรวบรวมไดมาวเคราะหปญหาและหา แนวทางแกไข - น าผลลพธทไดจาการวเคราะหมาออกแบ ระบบงาน

4. ออกแบบและพฒนาเวบไซต - ออกแบบหนาจอการใชงานตางๆบนโทรศพท - ออกแบบฐานขอมลทใช - ออกแบบแผนภาพตางๆทเกยวของกบระบบ

5. พฒนาและทดสอบเวบไซต - น าขอมลทไดจาการวเคราะหมาพฒนาระบบ - ทดสอบรายละเอยดยอยตางๆ - ทดสอบการใชงานจรง, อพโหลดขอมลขนเซฟเวอร - สรปผลการทดสอบ

5

6. น าเสนอโครงงาน

7. จดท าเอกสารและคมอการใชงานระบบ

6

บทท 2

ทฤษฎและโครงงานทเกยวของ

2.1 HTML 5

2.1.1 HTML 5 คออะไร [1]

ภาษา HTML เกดขนครงแรกในป ค.ศ. 1991 โดย Tim Berners-Lee เปนผคดคนขนตอมาภาษา HTML ในยคแรกเรมนนถกน าไปใชเพอการแสดงผลตวอกษรเปนหลกผานทางหนาเวบบราวเซอร ซงปจจบน HTML ไดพฒนามาถงรนท 5 และถกดแลภายใตองคกร W3C (World Wide Web Consortium) และรนลาสดไดถกพฒนาขนมาโดย WHATWG (The Web Hypertext Application Technology Working Group) โดยภาษา HTML 5 คอ ภาษาพนฐานทใชส าหรบเขยนเวบไซตในปจจบน โดยถกพฒนาตอมาจากภาษา HTML 4 ซงท าใหมความสามารถมากยงขน มการปรบปรงเพมคณสมบตตาง ๆ มากมายเพอใหนกพฒนาสามารถใชงานงายมากยงขน

2.1.2 ความสามารถของ HTML 5 1) Semantic Markup : การเพม Element ท อานงายมากขน 2) Form Enhancements : เพมความสามารถของ Form ตางๆ เชน Input type, Attribute 3) Audio / Video : รองรบการอานไฟลเสยงและวดโอโดยไมจ าเปนตองใช Embed Code 4) Canvas : สามารถใชการวาดรป โดยจ าเปนตองใช Javascript ในการชวยวาด 5) Content Editable : สามารถแกไข Content ไดโดยตรงผานทางหนาเวบ 6) Drag and Drop : สามารถลากวาง Object ได เพอเพมการตอบสนองระหวางระบบกบผใช 7) Persistent Data Storage : มการจดการทดขน โดยเกบขอมลลงบนเครองของผใช

2.1.3 สงทเปลยนไปใน HTML5 [2]

นอกจาก Features ใหมๆทถกเพมเขามาใน HTML5 แลวยงมการเปลยนแปลงการเขยนภาษาใหผพฒนาสามารถพฒนาได สะดวกมากยงขน อาทเชน

1) Doctype ทสนกวาเดม HTML5 ตองการ Doctype

7

2) การก าหนดคาภาษาท าไดงายขน ไมจ าเปนตองใช xmlns หรอ xml:langใน <html> อกตอไปแตจะเหลอแค <html lang=”en”> เทานน

3) การก าหนดชดอกษร ( Charset) ทสะดวกขนจากเดมทเราเคยเขยน <meta> ทยงยากและซบซอนซง HTML5 จะท าใหการเขยนเหลอเพยงแค<meta>charset=”utf-8″ เทานน

4) ไมตองม / เพอปด Tag เดยวเชน <img><br><input> 5) Tag บางอยางจะไมถกรองรบแลวม ดงน <acronym>, <applet>, <basefont>, <big>,

<center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> และ <xmp>

2.1.4 โครงสราง HTML5 มโครงสรางดงน [3]

2.1.4.1 โครงสรางสวนของ Article Element

<article id=" "> <header> <h1>สวนหว</h1> </header>

8

<section> <h2>เนอหา</h2> <article id="comment1"> <p>ความเหน</p> </article> </section> <footer> </article> 2.1.4.2 โครงสรางสวนของ Header Element <header> <hgroup> <h2>สวนหว</h2> </hgroup> </header> 2.1.4.3 โครงสรางสวน Navigator <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> 2.1.4.4 โครงสรางสวน Section <section> <h1>Section 1</h1> <p>Section 2</p> </section> <section id="test"> <h1>Section Test1 </h1> <p>Section Test2</p> </section> 2.1.4.5 โครงสรางสวน Aside <aside>

9

<h1>aside 1</h1> <p>aside 2</p> </aside> 2.1.4.6 โครงสรางสวน Footer

<footer> <address> ขอมลเพมเตม ตดตอ <a href="mailto:test@example.com">ทดสอบ</a>. </address> <p>© Copyright 2013</p> </footer>

รปท 2-1 โครงสราง HTML5 ตามทกลาวมาขางตน

2.1.5 ตวอยาง HTML5 Source Code [4]

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title>

10

<link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section> <aside>

11

<section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Footer - Copyright 2011</footer> </body> </html>

รปท 2-2 ผลลพธทไดจากตวอยางขางตน

12

2.2 jQuery Mobile

2.2.1 jQuery Mobile คออะไร [5]

jQuery Mobile คอ Framework ชนดหนงซงไดรบความนยม และใชงานอยางแพรหลาย เนองจากปจจบน อปกรณพกพาตาง ๆ สามารถเขาถงเวบไซตไดงายกวาคอมพวเตอร จงท าให ผใชงานเวบไซตผานอปกรณ พกพามอยางแพรหลาย ซง jQuery Mobile Framework นชวยใหผพฒนาเขยนเวบไซต เพอใชงานบนอปกรณพกพาไดอยางงายดาย และ รองรบการใชงาน ไดทกอปกรณพกพาในปจจบนทสามารถเชอมตอเครอขายอนเทอรเนตไดและมเวบบราวเซอร ซงสงนอาจเปนอกทางเลอกส าหรบนกพฒนา และสรางประสบการณใหม ๆ ใหกบนกพฒนาและผใชงานเปนอยางมากโดย Platform Mobile ในปจจบนทรองรบไดแนนอน มดงนน

iOS, Android, Bada, Windows Phone, Blackberry, Plam WebOS, Symbian, Meego และ อน ๆ

jQuery Mobile เปดตวรนแรกวนท 16 ตลาคม 2553 โดยเปดตวเปนเวอรชน 1.0a1 โดยมการพฒนาเวอรชนมาจนถงปจจบนคอ วนท 10 เมษายน 2556 เปนเวอรชน 1.3.1 Latest Stable

2.2.2 ขอดของ jQuery Mobile [6]

1) jQuery Mobile ชวยในเรองของ Interface โดยทนกพฒนาไมตองไปเสยเวลาสราง Interface ใหมส าหรบเวบทมอย เชน เรามเวบเกาท Online อยแลว แตตองการจะให Support Mobile Version ดวย กสามารถท าไดงายๆ โดยการดงเอาเฉพาะขอมลทจ าเปนนนออกมาโชวดวย jQuery Mobile

2) jQuery Mobile จะชวยใหนกพฒนาไมตองกงวลกบมอถอรนตางกน หรอ ยหอตางกน เชนท าออกมารองรบ iPhone แลวแตดนมปญหากบ Android เพราะทาง jQuery Mobile สามารถรองรบไดทงหมด ไมวาเราจะใชอปกรณพกพาแบบไหน jQuery Mobile กยงสามารถใชงานไดและแสดงผลเหมอนกนอกดวยทกๆ Platform มอถอแสดงผลเหมอนกนทงหมด

3) jQuery Mobile สามารถเรยนรไดอยางรวดเรวไมยงยากซบซอนมากมายนกซงม Demo ทเราสามารถเรยนรและเขาใจไดงาย

2.2.3 ขอเสยของ jQuery Mobile

1) jQuery Mobile ความสามารถตางๆยงเทยบเทากบ Application ไมไดมความ หลากหลายนอยกวา Application

2) เมอใชงาน jQuery Mobile จ าเปนทจะตองเชอมตอเครอขายอนเทอรเนตซงแตกตาง จาก Application สวนใหญไมจ าเปนทจะตองเชอมตอเครอขายอนเทอรเนตตลอดเวลา

13

3) jQuery Mobile ดดแปลงไดนอยไมสามารถเพมเตมหรอแกไขอะไรไดมากมายนกซง ขนอยกบ Framwork ของ jQuery Mobile แตละรนทพฒนาออกมา

2.2.4 โครงสรางของ jQuery Mobile

<html> <head “สวนหวของ jQuery Mobile ใชเชอมโยงไฟลตางๆเชน CSS หรอ js”> <title></title> <link rel="stylesheet" href="เชอมโยงไฟล"> <script src="เชอมโยงสครป"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="content">

“สวนเนอหาตางๆ” </div> </div> </body> </html>

2.2.5 ตวอยางโคด jQuery Mobile

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/default/jquery.mobile.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mobile.js"></script>

14

</head> <body> <div data-role="page"> <div data-role="header"><h1>My First App</h1></div> <div align="center" data-role="content">Hello, JQuery Mobile :)</div> </div> </body> </html>

รปท 2-3 ผลลพธทไดจากตวอยางขางตน

15

บทท 3

วธการด าเนนโครงงาน

ผจดท าเวบไซตไดศกษาแนวคดและทฤษ ฎเพอทจะออกแบบและพฒนา ระบบคนหาหอพกบรเวณมหาวทยาลยบรพา โดยการน าเอาเทคโนโลย jQuery Mobile เขามาชวยในการพฒนาระบบ โดยในบทนจะกลาวถงกระบวนการออกแบบ Use case diagram, Use case description, Activity diagram และ Screen prototype โดยท าการออกแบบและวเคราะหงานตามการสอบถามความตองการของผใชงานระบบ

3.1 ศกษาปญหาของระบบงานเดม

จากระบบเดม คอ การเดนทางไปยงหอพกตาง ๆ เพอสอบถามถงคาใชจายและรายละเอยดในการเขาอย ซงการเดนทางเพอสอบถามจะมขอจ ากดหลาย ๆ ดาน เชน เรองเวลาและคาใชจายในการเดนทาง ซงภายในหนงวนเราอาจจะสอบถามรายละเอยดของหอพกไดไมหมด

ระบบงานใหม สมาชกสามารถเขาคนหาขอมลไดแบบออนไลน ไมจ ากดเวลาและสถานท สามารถเขาดรายละเอยด ดความคดเหนหรอแสดงความคดเหนเกยวกบหอพกไดตลอด 7 วน 24 ชวโมง หากมเครอขายอนเทอรเนต ซงผพฒนาระบบไดมการน าเอาเทคโนโลย jQuery Mobile เขามาชวยใหการเขาถงเวบไซตจากโทรศพทมอถอดไดสะดวกมากขน

3.1.1 ตารางเปรยบเทยบขอดและขอเสยของงานแตละระบบ

ตารางท 3-1 ตารางแสดงขอดและขอเสยของระบบงานเดม

16

หวขอ ขอด ขอเสย ระบบงานเดม 1. สามารถเหนสภาพหอพกทตองการ

ไดจรงดวยสายตาตนเอง 2. สามารถทราบระยะทางระหวาง

สถานทใกลเคยงหอพกและชมชน

1. มขอจ ากดดานเวลา ไมสามารถสอบถามรายละเอยดหากถงเวลาทหอพกปดหรอผดแลหอไมอย

2. มคาใชจายในการเดนทางเพอไปสอบถามรายละเอยดหอพก

3. มความเสยงในการเดนทางเพอสอบถามรายละเอยดหอพก

4. ไมสามารถทราบขอดหรอขอเสยของหอพกนนไดหากไมไดเขาอย

ตารางท 3-2 ตารางแสดงขอดและขอเสยของระบบงานใหม

หวขอ ขอด ขอเสย ระบบคนหาหอพกบรเวณมหาวทยาลยบรพา

1. สามารถเขาดรายละเอยดเวลาใดกไดไมจ ากดในเรองของเวลา

2. สามารถเขาดรายละเอยดของหอพกพรอมๆกนไดหลายคนในเวลาเดยวกน

3. ลดคาใชจายในเดนทางเพอเขาไปสอบถามรายละเอยด

4. ลดความเสยงของอบตเหตในการเดนทางเขาไปสอบถาม

5. สามารถทราบขอดและขอเสยของแตละหอพกไดจากการรววหอพก

1. ไมสามารถเหนสภาพของหอพกไดจรง

2. ไมสามารถรแหลงชมชนหรอรานคาบจรเวณใกลเคยงไดทงหมด

3.2 การออกแบบระบบงานใหม

3.2.1 Use Case Diagram

จากการศกษาและเกบรวบรวมขอมลความตองการของระบบน ามาวเคราะหและเขยนเปน (Use case diagram) ซงเปนแผนภาพแสดงความสมพนธภายในระบบ ดงแสดงในรปท 3-1

17

รปท 3-1 Use case diagram ระบบคนหาหอพกบรเวณมหาวทยาลยบรพา

3.2.2 Use case Index และ Use Case Description

จาก Use case diagram เราสามารถน ามาเขยนเปน Use case Description เพออธบายการท างานแตละขนตอนของระบบ คนหาหอพกบรเวณมหาวทยาลยบรพา เพอใหทราบถงรายละเอยดการท างานแตละขนตอนของระบบ โดยมรายละเอยดทงหมด 10 ขนตอน ดงแสดงในตารางท 3-3

ตารางท 3-3 ตารางแสดง Use case index

18

Use case ID Use case name Primary Actor 01 สมครสมาชก ผใชทวไป 02 เขาสระบบ สมาชก 03 คนหาขอมลหอพก สมาชก, ผใชทวไป 04 ดขอมลหอพก สมาชก, ผใชทวไป 05 ดขอมลการแสดงความคดเหนหอพก สมาชก, ผใชทวไป 06 เปรยบเทยบขอมลหอพก สมาชก, ผใชทวไป 07 ดต าแหนงหอพกบนแผนท สมาชก, ผใชทวไป 08 ใหคะแนนหอพก สมาชก 09 แสดงความคดเหนหอพก สมาชก

ตารางท 3-4 ตาราง UC01 - สมครสมาชก

Use Case ID UC01 User Case Name: สมครสมาชก Brief Description: ผใชทวไปจะตองท าการสมครสมาชกกอน จงจะสามารถแสดงความคดเหน

และใหคะแนนได ระบบสมาชกมความปลอดภยในการรกษาความเปนสวนตวของสมาชก

Triggering Event: เมอมการสมครสมาชก จะสามารถแสดงความคดเหนและใหคะแนนได Actor: ผใชทวไป Related Use Case: - Stakeholders: - Preconditions: ขอมลทกรอกเขามาจะตองถกตองตามรปแบบทก าหนดในการสมคร

19

Postconditions: ผใชทวไปไดเปนสมาชกของระบบคนหาหอพกบรเวณมหาวทยาลยบรพา Created/Updated By:

นายสรวฒ มาสข / 2 เมษายน 2556

Flow of Event: Actor System 1. กดทหรอสมผสปมสมาชก

3. กรอกขอมลทปรากฏบนหนาจอใหครบถวนเพอสมครสมาชก 4. กดยนยนการสมครสมาชก

2. แสดงหนาจอสมครสมาชก 5. ตรวจสอบขอมลทผใชกรอกเขามา วาถกตองตามรปแบบหรอไม 6. จดเกบขอมลสมาชกลงฐานขอมล 7. แสดงขอความ “การสมครสมาชกเสรจสมบรณ”

Exceptions: 4. หากผใชกรอกขอมลไมครบและไมตรงตามรปแบบ ระบบจะแสดงขอความแจงเตอนใหผใชกรอกขอมลใหครบถวนและตรงตามรปแบบ

ตารางท 3-5 ตาราง UC02 - เขาสระบบ

Use Case ID UC02 User Case Name: เขาสระบบ Brief Description: สมาชก Triggering Event: สมาชกเขาสระบบเพอท าการดขอมลหรอแสดงความคดเหนหอพกได , Actor: สมาชก Related Use Case: UC01 Stakeholders: - Preconditions: ผทจะเขาสระบบจะตองท าการสมครสมาชกกอนและตองจ าชอผใชงานและ

รหสผานของตนเองได จงจะสามารถเขาสระบบได Postconditions: สมาชก เขาสเวบไซตในสวนของตนเองได Created/Updated By:

นายสรวฒ มาสข / 2 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสทหวขอสมาชก

2. แสดงหนาจอ เขาสระบบ

20

3. กรอกชอผใชงานและรหสผาน

4. ตรวจสอบวาชอผใชงานและรหสผานทกรอกเขามาถกตองหรอไม 5. สมาชก เขาสระบบ

Exceptions: 4. หากผใชกรอกขอมลไมครบหรอกรอกขอมลผด ระบบจะแสดงขอความแจงใหผใชกรอกขอมลใหถกตอง

ตารางท 3-6 ตาราง UC03 - คนหาขอมลหอพก

Use Case ID UC03 User Case Name: คนหาขอมลหอพก Brief Description: สมาชก, ผใชทวไป สามารถคนหาขอมลหอพกตามทตองการคนหา Triggering Event: สมาชก, ผใชทวไป ตองการทจะท าการคนหาหอพกทมเงอนไขตางๆทตาม

ตนเองสนใจ Actor: สมาชก, ผใชทวไป Related Use Case: - Stakeholders: - Preconditions: เลอกเงอนไขตางๆตามทสนใจ Postconditions: รบทราบรายชอของหอพกทมเงอนไขทไดท าการระบไว Created/Updated By:

นายสรวฒ มาสข / 2 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสทปมคนหา

3. เลอกรายละเอยดตางๆตามทตองการคนหาและกดคนหา

2. หนาจอแสดงรายละเอยดตางๆ เพอใหเลอกคนหา 4. หนาจอแสดงรายชอหอพกตาม

21

เงอนไขทไดระบในการคนหา Exceptions: 3. หากไมมการเลอกรายละเอยดใดๆ และกดคนหา ระบบจะแสดงรายชอ

หอพกทงหมดทมอยออกมา

ตารางท 3-7 ตาราง UC04 – ดขอมลหอพก

Use Case ID UC04 User Case Name: ดขอมลหอพก Brief Description: สมาชก, ผใชทวไปเขาดรายละเอยดของหอพกทตวเองสนใจ Triggering Event: สมาชก, ผใชทวไปตองการทราบขอมลหอพกทสนใจ Actor: สมาชก, ผใชทวไป Related Use Case: - Stakeholders: - Preconditions: สมาชก, ผใชทวไปตองการดรายละเอยดของหอพกทตวเองสนใจ Postconditions: สมาชก, ผใชทวไปสามารถเขาดรายละเอยดของหอพกทตวเองสนใจได Created/Updated By:

นายสรวฒ มาสข / 2 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสหอพกทตองการ

2. หนาจอ แสดงรายละเอยดของหอพกทเลอก

Exceptions: -

22

ตารางท 3-8 ตาราง UC05 – ดขอมลการแสดงความคดเหนหอพก

Use Case ID UC05 User Case Name: ดขอมลการแสดงความคดเหนหอพก Brief Description: สมาชก, ผใชทวไป สามารถดขอมลการแสดงความคดเหนหอพกทมสมาชก

อนเขยนแสดงความคดเหนไวได Triggering Event: สมาชก, ผใชทวไปตองการดขอมลความคดเหนหอพก Actor: สมาชก, ผใชทวไป Related Use Case: - Stakeholders: - Preconditions: สมาชก, ผใชทวไปตองการดขอมลความคดเหนหอพก Postconditions: สมาชก, ผใชทวไปสามารถดความคดเหนหอพกทตองการดได Created/Updated By:

นายสรวฒ มาสข / 4 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสทหอพกทตองการ

ดความคดเหน

2. หนาจอจะแสดงขอมลทมความคดเหนหอพกไวทเมนความคดเหน

Exceptions: -

23

ตารางท 3-9 ตาราง UC06 - เปรยบเทยบขอมลหอพก

Use Case ID UC06 User Case Name: เปรยบเทยบขอมลหอพก Brief Description: สมาชก, ผใชทวไป สามารถเปรยบเทยบรายละเอยดระหวางหอพก Triggering Event: สมาชก, ผใชทวไป ตองการทจะเปรยบเทยบขอมลและรายละเอยดตางๆ

ระหวางหอพก Actor: สมาชก, ผใชทวไป Related Use Case: - Stakeholders: - Preconditions: เปรยบเทยบหอพกทสนใจ Postconditions: หนาจอจะแสดงขอมลของหอพกทสนใจออกมาและเปรยบเทยบกน Created/Updated By:

นายสรวฒ มาสข / 3 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสทปมเปรยบเทยบ

หอพก 3. กดเลอกชอหอพก2ชอทตองการน าขอมลมาเปรยบเทยบและกดเปรยบเทยบ

2. หนาจอจะใหเลอกชอหอพก2ชอทตองการเปรยบเทยบ 4. ระบบแสดงขอมลเปรยบเทยบตามชอหอพกทเลอกมา

Exceptions: 3. หากไมกดเลอกหอพกอะไรเลย ระบบจะแสดงขอความผดพลาดกรณาเลอกหอพกทตองการเปรยบเทยบ

ตารางท 3-6 ตาราง UC07 – ดต าแหนงหอพกบนแผนท

Use Case ID UC07 User Case Name: สมาชก, ผใชงานทวไปสามารถดต าแหนงหอพก Brief Description: สมาชก, ผใชงานทวไปสามารถดต าแหนงหอพกตามทตนเองสนใจ

24

Triggering Event: สมาชก, ผใชงานทวไปสามารถดต าแหนงหอพกทตองการ Actor: สมาชก, ผใชงานทวไป Related Use Case: - Stakeholders: - Preconditions: สมาชก, ผใชงานทวไปตองการดต าแหนงหอพก Postconditions: สมาชก, ผใชงานทวไปสามารถดต าแหนงหอพกทตองการได Created/Updated By:

นายสรวฒ มาสข / 4 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสหอพกทตองการด

ต าแหนง 3. กดหรอสมผสทแทบแผนทดานลางเพจเพอดแผนท

2. หนาจอจะขอมลหอพก 4. ระบบจะท าการแสดงแผนหอพก

Exceptions: -

ตารางท 3-11 ตาราง UC08 – ใหคะแนนหอพก

Use Case ID UC08 User Case Name: ใหคะแนนหอพก Brief Description: สมาชก สามารถใหคะแนนหอพกตามทตนเองสนใจ Triggering Event: สมาชกตองใหคะแนนหอพกตามทตองการ Actor: สมาชก Related Use Case: UC02 Stakeholders: -

25

Preconditions: สมาชกตองการใหคะแนนหอพก Postconditions: สมาชกสามารถใหคะแนนหอพกทตองการได Created/Updated By:

นายสรวฒ มาสข / 4 เมษายน 2556

Flow of Events: Actor System 1. กดหรอสมผสหอพกทตองการให

คะแนน 3. กดหรอสมผสทแทบความคดเหน 5.กดหรอสมผสคะแนนทตองการ

2. หนาจอจะแสดงขอมลหอพก 4. ระบบจะแสดงคะแนนใหเลอก

Exceptions: -

ตารางท 3-12 ตาราง UC09 – แสดงความคดเหนหอพก

Use Case ID UC09 User Case Name: แสดงความคดเหนหอพก Brief Description: สมาชก สามารถแสดงความคดเหนหอพกตามทตนเองสนใจ Triggering Event: สมาชกตองการแสดงความคดเหนหอพกทตองการ Actor: สมาชก Related Use Case: UC02 Stakeholders: - Preconditions: สมาชกตองการแสดงความคดเหนหอพก Postconditions: สมาชกสามารถแสดงความคดเหนหอพกทตองการแสดงความคดเหนได Created/Updated By:

นายสรวฒ มาสข / 4 เมษายน 2556

Flow of Events: Actor System

26

1. กดหรอสมผสทหอพกทตองการแสดงความคดเหน

3. เขยนแสดงความคดเหนหอพกทตองการและกดยนยนการแสดงความคดเหน

2. หนาจอจะขอมลทมการรววหอพกไวดานลางสดของเพจและมกลองขอความเพอใหเขยนแสดงความคดเหน 4. ระบบจะท าการเกบขอความทสมาชกไดเขยนลงสฐานขอมล

Exceptions: -

3.2.3 ER-Diagram

27

3.2.4 Class diagram

28

3.3 การออกแบบหนาจอ

3.3.1 ผใชทวไป

1) เมอเขาส ระบบคนหาหอพกบรเวณมหาวทยาลยบรพา หนาแรกจะแสดงขอมล 5 อนดบหอพกราคาถกทสด ดงแสดงในรปท 3-2 และเมอเลอนลงไปจะแสดงขอมล 5 อนดบหอพกทมยอดรววเยอะทสด ดงแสดงในรปท 3-3

รปท 3-2 หนาจอแสดง 5 อนดบหอพกราคาถกทสด

29

รปท 3-3 หนาจอแสดง 5 อนดบหอพกทมยอดรววเยอะทสด

30

2) เมอคลกท คนหา หนาจอจะแสดงเงอนไขทเราสามารถเลอกเพอใชในการคนหาขอมลหอพกทเราตองการ ดงแสดงในรปท 3-4

รปท 3-4 หนาจอแสดงเงอนไขทสามารถใชในการคนหา

31

3) เมอผใชงานเลอกขอมลทตองการคนหาครบถวนและกดคนหาหนาจอจะแสดงขอมลทคนพบทงหมดวามกรายการ ดงแสดงในรปท 3-5

รปท 3-5 หนาจอแสดงรายการทคนหาพบทงหมด

32

4) เมอกดเลอกรายการทตองการดรายละเอยดหนาจอจะแสดงรายละเอยดตางๆของหอพก พรอมทงรปหอพก ดงแสดงในรป 3-6

รปท 3-6 หนาจอแสดงรายละเอยดหอพก

33

5) เมอคลกทสมาชก หนาจอจะแสดงแบบฟอรม การเขาสระบบเพอใหผใชงานกรอกชอผใชงานและรหสผาน ดงแสดงในรปท 3-7

รปท 3-7 หนาจอเขาสระบบ

6) เมอคลกทสมาชกและคลกทปม สมครสมาชก ระบบจะแสดงแบบฟอรมเพอใหผใชงานกรอกขอมลการสมครสมาชกตางๆ ดงแสดงในรปท 3-8

34

รปท 3-8 หนาจอแสดงแบบฟอรมสมครสมาชก

7) เมอผใชคลกท เปรยบเทยบ ระบบจะแสดงแบบฟอรมใหเลอกหอพกทตองการเปรยบเทยบ 2 หอพก ดงแสดงในรป 3-9

35

รปท 3-9 หนาจอแสดงแบบฟอรมใหเลอกเปรยบเทยบหอพก

8) เมอกดยนยนการเปรยบเทยบแลว ระบบจะแสดงขอมลหอพก 2 หอพกทผใชไดท าการเลอก ไวกอนหนาน ดงแสดงในรป 3-10

36

รปท 3-10 หนาจอแสดงการเปรยบเทยบหอพก 2 หอพก

3.3.2 สมาชก

1) เมอสมาชก Login ส าเรจระบบจะแสดงหนาแรกของเวบไซตพรอมทงมชอผใชงานและสามารถออกจากระบบได ดงแสดงในรป 3-11

37

รปท 3-11 หนาจอแสดงสมาชกเขาสระบบส าเรจระบบจะเชอมโยงมายงหนาแรก

2) เมอสมาชกกรอกขอมลการเขาสระบบไมถกตองระบบจะแสดงหนาจอแจงเตอน พรอมทงยอนกลบและกรอกใหถกตอง ดงแสดงในรป 3-12

38

รปท 3-12 หนาจอแสดงการแจงเตอนเมอผใชงานกรอกขอมลไมถกตอง

3) สมาชกสามารถใหคะแนนหอพกหรอแสดงความคดเหนได ดงแสดงในรป 3-13

39

รปท 3-13 หนอจอแสดงความคดเหนและใหคะแนนหอพก

4) ถาผใชงานไมไดเขาสระบบหนาจอจะแจงเตอนใหผใชงานเขาสระบบ ดงแสดงในรป 3-14 และ เมอเขากดเขาสระบบหนาจอจะใหกรอกชอผใชงานและรหสผาน ดงแสดงในรป 3-15

40

รปท 3-14 หนาจอแสดงการแจงเตอนเมอผใชงานยงไมไดเขาสระบบ

41

รปท 3-15 ระบบแสดงแบบฟอรมเขาสระบบกอนถงจะสามารถแสดงความคดเหนและใหคะแนนได

42

บทท 4

ผลการด าเนนงาน

4.1 หนาจอและการท างานของโปรแกรม

หนาแรกเปนหนาทเวลาเราเปดเวบไซตขนมาเรากจะเจอหนานเปนหนาแรก ซงในหนาแรกนจะประกอบสวนตางๆ ดงน

1) สวนของเนอหา 2) สวนของแทบการเชอมโยงหนาตาง ขอเวบไซต ดงแสดงในรป 4-1

รปท 4-1 หนาแรกของเวบไซต

หนาคนหาหอพก เมอผใชงานตองการคนหาหอพกสามารถเลอก ราคาหอพกประเภทหอพกรวมถง เลอกสงอ านวยความสะดวกทตองการได ดงแสดงในรป 4-2

43

รปท 4-2 หนาคนหาหอพก

จากนนเมอกดคนหาหอพก ระบบจะท าการ แสดงหอพกทมตามเงอนไขทก าหนด ดงแสดงในรป 4-3

44

รปท 4-3 แสดงรายการหอพกทมตามเงอนไขทระบ

จากนนเลอกหอพกทสนใจระบบจะท าการแสดงรายละเอยดหอพกทงหมด ดงแสดงรปท 4-4

45

รปท 4-4 หนาจอแสดงรายละเอยดหอพก

หากตองการทจะดรายละเอยดเพมเตม สงอ านวยความสะดวก และ แผนทสามารถกดดไดทนท ดงแสดงรปท 4-5

46

รปท 4-5 แสดงรายละเอยดเพมเตม สงอ านวยความสะดวก และ แผนท

หนาจอเปรยบเทยบหอพก เลอกหอพกทตองการเปรยบเทยบ 2 หอพก ดงแสดงรปท 4-6 และเมอกดยนยนการเปรยบเทยบหอพก ระบบจะท าการ เปรยบเทยบหอพกตามทผใชงานเลอก ดงแสดงรปท 4-7

47

รปท 4-6 เลอกหอพกทตองการเปรยบเทยบ

48

รปท 4-7 แสดงรายละเอยดหอพกทท าการเปรยบเทยบ

เมอตองการสมครสมาชก เขาไปทแทบ สมาชกและกดสมครสมาชก ดงแสดงรปท 4-8 หลงจากนนระบบจะแสดงฟอรมสมครสมาชก ดงแสดงรปท 4-9 และเมอกดสมครสมาชกส าเรจ

49

ระบบจะท าการแจงเตอนผใชงาน ดงแสดงรปท 4-10 และเมอผใชกรอกขอมลไมถกตองตามทก าหนดไวระบบจะท าการแจงเตอน ดงแสดงรปท 4-11

รปท 4-8 แสดงหนาจอการสมครสมาชก

50

รปท 4-9 แสดงแบบฟอรมการสมครสมาชก

51

รปท 4-10 ระบบแสดงการสมครสมาชกส าเรจ

52

รปท 4-11 หนาจอแสดงการกรอกฟอรมสมครสมาชกไมตองตามทก าหนด

หนาจอเขาสระบบเมอผใชงานสมครสมาชกเรยบรอยแลวระบบจะท าการเขาสระบบใหโดยทนท แตถาผใชงานตองการเขาสระบบอกครงสามารถท าไดทหนาจอสมาชก ดงแสดงรปท 4-12 และ

53

เมอกดเขาสระบบ ระบบจะท าการเชอมโยงไปทหนาแรกพรอมทงระบชอผใชงานใหทราบ ดงแสดงรปท 4-13 แตหากผใชงานกรอกชอและรหสผานไมถกตองระบบจะแจงเตอน ดงแสดงรปท 4-14

รปท 4-12 แสดงหนาจอเขาสระบบ

54

รปท 4-13 หนาจอแสดงชอผใชงานเมอเขาสระบบเรยบรอยแลว

55

รปท 4-14 แสดงขอความแจงผใชงานเมอระบชอและรหสผานไมถกตอง

หนาจอแสดงความคดเหนและใหคะแนนตองเปนสมาชกเทานนถงจะสามารถแสดงความคดเหนหรอใหคะแนนได ถายงไมไดเขาสระบบ ระบบจะแจงเตอน ดงแสดงรปท 4-15 และถาเขาส

56

ระบบเรยบรอยแลวจะสามารถท าการ แสดงความคดเหนหรอใหคะแนนได ดงรปท 4-16 และระบบจะท าการเกบขอมลลงฐานขอมล

รปท 4-15 ระบบแสดงการแจงเตอนใหท าการเขาสระบบกอนแสดงความคดเหน

57

รปท 4-16 สมาชกสามารถแสดงความคดเหนและใหคะแนนได

58

จากนนเมอผใชงานทวไปหรอสมาชกเขามาดรายละเอยดหอพก สามารถดความคดเหนตางๆของเราได ดงแสดงรปท 4-17

รปท 4-17 แสดงรายการความคดเหน

59

บทท 5

สรปและวจารณผลการด าเนนการโครงงาน

5.1 สรปผลการด าเนนโครงงาน

จากการทไดศกษาและคนควาขอมลเกยวกบระบบคนหาหอพกออนไลน และไดจดท าระบบคนหาหอพกเพอใหสะดวกแกการน าไปใชงานส าหรบผทตดการหาหอพกหรอเปนขอมลเบองตนส าหรบตดสนใจเขาอยหอพกได มการทดสอบการใชงานระบบสรปออกมาไดดงน

1) ระบบสามารถสมครสมาชกเพอในกรณทผใชงานตองการแสดงความคดเหนหอพกหรอใหคะแนนหอพก

2) ระบบสามารถคนหาขอมลหอพกตาง ๆ ไดโดยการเลอกจากฟอรมททางระบบก าหนดใหเพอสะดวกแกการคนหาขอมล

3) ระบบสามารถดรายละเอยดขอมลหอพกตางๆไดมการแสดงรปภาพหอพกเพอใหผใชงานเหนสภาพจรง ๆ ของหอพก

4) ระบบสามารถดขอมลการแสดงความคดเหนของผอนได วามใครแสดงความคดเหนไววาอยางไรบาง

5) ระบบสามารถเปรยบเทยบขอมลหอพก เพอเปรยบเทยบและดความแตกตางของหอพกไดผใชงานจะสะดวกเมอตองตรวจสอบขอมลหอพกอยางชดเจน

6) ระบบสามารถดต าแหนงบนแผนทได ซงจะสะดวกเมอผใชงานตองการเดนทางไปยงหอพกนน ๆ

7) ระบบสามารถใหคะแนนหอพกและแสดงความคดเหนหอพกได เปนขอมลใหผใชงานคนอน ๆ เขามาดความคดเหนไดวาหอพกนเปนอยางไรบาง

60

5.2 ประโยชนทไดรบ

1) อ านวยความสะดวกในการคนหาหอพกบรเวณมหาวทยาลยบรพา 2) ชวยตดสนใจกอนการเขาพกอาศย 3) ชวยประหยดเวลาในการคนหาหอพก 4) ชวยประหยดคาใชจายในการคนหาหอพก

5.3 ขอจ ากดของโครงงาน

1) ระบบคนหาหอพกนไมสามารถเหนสภาพแวดลอมหรอสภาพหอพกทแทจรงไดซงถาดจากรปภาพกบสถานทจรงอาจจะไมตรงกนกเปนได

2) เนองจากเปนระบบคนหาหอพก ราคาอาจจะเปลยนแปลงไดตลอดเวลา 3) เนองจากเปนระบบคนหาหอพก สงตาง ๆ ทระบบไวบนเวบไซตอาจจะไมตรงทงหมดซะ

ทเดยวเชน ภายในหองเตยงอาจช ารดหอพกอาจจะน าเตยงออกจากหองพกกเปนได

5.4 ขอเสนอแนะ

1) สรางระบบจดการขอมลทงหมดโดยผดแลระบบเปนผจดการ 2) เพมเจาของหอพก 3) เนองจากเปนระบบคนหาหอพกบรเวณมหาวทยาลยบรพา สภาพแวดลอมหอพกและ

อนๆอาจจะไมตรงตามขอมลทไดเกบมาและราคาหอพกอาจมการเปลยนแปลงไดอยเสมอ จงควรมการสอบถามผดแลหอพกใหชดเจนกอนการเขาพกอาศยเพอไมใหขอมลคลาดเคลอนจากทระบบเปน

บรรณานกรม

[1] “HTML5” [ออนไลน]. เขาถงไดจาก : http://th.wikipedia.org/wiki/HTML5 สบคน 1 เมษายน 2556.

[2] “ท าความรจกและเรมพฒนาเวบไซตดวย HTML5” [ออนไลน]. เขาถงไดจาก :

61

http://www.microsoft.com/thailand/msdn/ie9_html5.aspx สบคน 1 เมษายน 2556.

[3] “HTML5 Semantic Markup” [ออนไลน]. เขาถงไดจาก : http://hassadee.com/2012/07/19/html5-semantic-markup-thai-language/

สบคน 1 เมษายน 2556 [4] “Learn HTML5 in 5 Minutes!” [ออนไลน]. เขาถงไดจาก : http://www.codeproject.com/Articles/268774/Learn-HTML5-in-5-Minutes สบคน 1 เมษายน 2556 [5] “JQuery Mobile Framework คออะไร” 2555. [ออนไลน]. เขาถงไดจาก : http://www.amplysoft.com/knowledge/JQuery%20Mobile%20Framework%20%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html สบคน 1 เมษายน 2556 [6] “jQuery Mobile คออะไร ?” [ออนไลน]. เขาถงไดจาก : http://weratad.blogspot.com/2012/09/jquery-mobile.html สบคน 1 เมษายน 2556