pittsburgh conference meal planner mockup

Conference Meal Planner

CpSc 427 Final Project


Wireframe Mockup 1

Contents Wireframe Mockup .................................................................................................................................................2

Design Decisions ......................................................................................................................................................4

Software Instructions ..............................................................................................................................................6

Customer Specifications .........................................................................................................................................8

Interface Issues .......................................................................................................................................................11

Literature Review ..................................................................................................................................................13

Literature Review Documents List .....................................................................................................................17

HTML Source Code ...............................................................................................................................................19

PHP Source Code ...................................................................................................................................................25

Python Scripts ........................................................................................................................................................33

Sienna Sulla Piazza ............................................................................................................................................34

Seviche .................................................................................................................................................................36

Nola on the Square ............................................................................................................................................38

Meat & Potatoes .................................................................................................................................................40

Grit & Grace .......................................................................................................................................................42

The Capital Grille ..............................................................................................................................................44

Student Contributions ...........................................................................................................................................46


Wireframe Mockup 2

Wireframe Mockup


Wireframe Mockup 3

This is the original mockup of our website. This is for both the web based web site and the mobile website. Both were intended to look as similar as possible. Through testing, we have learned that the original site intended for the desktop version also worked just as well for the mobile version.


Design Decisions 4

Design Decisions


Design Decisions 5

This document is intended to describe the design decisions made and their rationale for the Conference Meal Planner. Starting from the top, I wanted to create a somewhat large block header that clearly states the name of the project, and the organization/location it is supposed to be affiliated with. As far as color choices go, I tried to model them after the University of Pittsburghs colors, as we are supposed to be representing Pittsburgh with this project (especially for conference attendees who may have never been here before) and the first thing I think of when I think Pittsburgh colors is the Universitys navy and tannish-gold colors (or black and gold in reference to our sports teams, but in this case I feel the Universitys colors were more aesthetically pleasing for use in this web design). Directly underneath this header I wanted to showcase the intent of this project (the restaurants) in a neatly organized and clean looking manner, so naturally I gravitated towards placing them into a table. The table itself is stylized using CSS to add to the aesthetic factor and tie it into the color theme of the webpage. It was also important that the table had built in functionality that made sense and tied it into the rest of the project, which is why I implemented a background color changing function that highlights the specific restaurant the user is looking at. This helps give it a sense of locational/recognizable familiarity and ties it into the interactive SVG map below. Because the SVG map was such an important aspect of this project, I wanted to make sure it was large and detailed enough to be a good/accurate depiction of Pittsburgh, while at the same time not being too large as to obstruct the users view of the table above. Originally the location markers on the map were fully interactable, but this began to create problems near the completion of the project as the markers would constantly move from their intended place between different computers/viewing resolutions. Once I got it looking perfect on one computer, I would switch to another (from my laptop to the computer lab at school, for instance) and the markers would be in the wrong spot. In order to resolve this I ended up embedding them directly into the map file (which itself is over 2000+ lines of code, and that is why it is linked to instead of simply built into the page) so that they would always be in the correct position no matter what. While this did solve the aforementioned problem, I was now faced with the challenge of restoring the original functionality of the map. Thus, the map legend was born (placed on the left side). When hovered over, the legend activates the highlight function for the table, and when clicked on, a new window opens with directions to the respective restaurant. It was important to include the directions feature for people who have never been to Pittsburgh before and/or for people who have never been to that specific place before. The restaurants themselves were carefully selected after a long session perusing websites like Yelp and Urbanspoon, and of course Google Maps. I wanted to search for the highest/most positively rated restaurants in Pittsburgh in order to offer up the best possible culinary representation of our city. I also tried to come up with a diverse palette of restaurants, making sure to create an offering that represented many different types of cuisine. At the same time, I needed to make sure that they were within an acceptable walking distance from the Fairmont Hotel, and so the list was narrowed down to the final six you see presented on the webpage.


Software Instructions 6

Software Instructions


Software Instructions 7

To use the map, simply hover over the legend (either the marker or the text itself) to highlight the corresponding table element. Each location marker on the map is color coordinated with its respective marker in the map legend.

To obtain directions to a specific restaurant, simply click on either the circular marker or the text element itself and a window will open to a preconfigured Google Maps page with walking directions to the restaurant.

To browse the menu for a specific restaurant, simply click on the View Website link included in each table cell. They have been preconfigured to directly link to the restaurants menu where possible, if not the link will open the home page where the menu can be found from there.

The hours displayed for each restaurant in the table are completely automated and updated dynamically depending on the day, and require no action from the user.

When the scripts are implemented to the webpage, it will grab the users information about their names and phone numbers necessary to make a reservation, and automatically behind the scenes get the online reservation upon select.


Customer Specifications 8

Customer Specifications



What exactly will be accomplished? o Need to study the surrounding area around Fairmont to find possible venues. o Restaurant data needs to be gathered and organized/analyzed.

Note needs to be taken of how they handle reservations, if they accept email or not, only phone calls, etc.

Fast food should be noted but not prioritized o Basic interface of webpage needs to be mapped/figured out, preliminary design

choices need be made (colors, spacing, organization, etc.). Nothing here will be set in stone and may be changed later, but just to get a working template initialized for testing/work.

o Interactive SVG map needs to be created and implemented into design o Restaurant data needs to be linked to interactive map, some type of output area

needs to be created to test connectivity, function, etc. o Directions/walking distance map data needs to be gathered and implemented into

the interactive map (maybe from Google maps?) This data also needs to be added to the output in some way

o We need to decide on how we are going to script/automate all the processes of the planner, such as data retrieval and output to the page, emailing the restaurants, etc.

o Any form elements/actions need to be decided upon, how they will work and interact with the planner, what purposes they serve/how they will work behind the scenes so to speak, and how they will fit aesthetically into the design

o Any required/necessary server side or client side processes need to be decided upon (what function, to what end?, etc.), organized, and implemented into the design.

o Finishing touches/refinement of the design will probably be close to one of the last things we do, after we have made sure that every aspect is working as intended, and we feel we are mostly complete with the project. This is where we will work to make sure the project aesthetically pleasing, and insure that the design is intuitive and understandable.

o Documentation of everything done, and by who needs to be maintained and submitted at the end.

What is the time frame for completion of each step of the project?

o Interface template - Mid to End of March o Scripts and such - Mid to End of April o Interactive SVG map - Mid to End of April o Documentation - End of April o Polished Interface/Webpage - End of April o Complete Project - Due Date

How will authentication be handled?

o Authentication for users will be dealt by giving a username and password followed by an email address to send the user form the conference a confirmation email signifying that they are recognized in the system and once they make their order for reservation they will receive another confirmation email sending back the details of their reservation went through.

When will testing begin?



o ASAP

By what date will you know if training materials are needed? o I do not think we have any need for training materials. This should not be a

complicated application, not to the point of it requiring training prior to use. o This program may actually need some training on the side of the restaurants since

they will need to somehow respond with how many available reservations are left, approving reservations that they will receive, etc.

What are your needs for graphics? When will those be done?

o I am not sure what kind of graphics we will need, if we do decide we want some. If we do decide to add graphics it will probably be done by one of us, in Photoshop/Illustrator? I dont foresee it taking very long if so, they would be done quickly.

o For Graphics we will have to implement SVG and also an interactive map for the customers.

Are there copyright or citations issues? How will those be handled?

o We may have to look into asking permission to use some of the images of the venues (inside and/or outside)

o Make sure interactive SVG map does not infringe on Google Maps in anyway, must be different enough

o Citations? TBD

How will data analysis, be it statistical or real-time, be handled? o As attendees of the conference request reservations, emails will be sent to the

restaurants alerting them of the requested reservations asking if the restaurant can accommodate the requested amount.

Who will do all these things? What will be done on the server-side, in what language(s), by

what date, and by whom? o See document Conference Meal Planner Schedule

Is there any interests from the food vendors in working together with us in terms of an online

booking API or something of the sorts? o After the program has been finished, it would not be difficult to adjust the program in

such a way to accommodate individual restaurants as opposed to working for several restaurants at one time.

Could we interface with any food vendors existing websites to show menus on the fly via

scraping their website? o We might be able to if their website has a plain text form of the menu. If there are

PDF versions, we may be able to devise an OCR system that can grab the text from the menus, although this could become extremely messy.


Interface Issues 11

Interface Issues


Interface Issues 12

PC vs. mobile interface issues- making sure the website looks the same (or not? maybe a separate mobile version if needed), making sure all elements of the webpage are working correctly such as forms, inputs/selections, dynamically generated content/output between PC and mobile.

Cross platform/browser potential issues- making sure the website looks right and functions correctly between different browsers and operating systems, for the same reasons as detailed in the first bullet point.

Design issues- referring to the actual design and layout of the webpage. Making sure to use web safe colors to ensure a consistent look between browsers (if thats what we are going for), making sure that the layout is not rendered drastically different between browsers (different spacing, elements not loading/rendering correctly, etc.), and testing between browsers/OSs to correct any other unforeseen circumstances that may cause unwanted aesthetic differences.

Audience issues- basically making sure that the structure and functionality of the webpage is intuitive and easy to understand, especially because this is the first time something like this is being implemented for a conference. At the same time we want to make sure the interface is aesthetically pleasing and not overly-complicated, i.e. easy to figure out and use.

Language to be coded in - Since this is the graphical web, and I know Dailey and everyone in attendance is very big on SVG, would he want the front end of it to be coded in SVG? He already said he is fine with PHP for the server side and backend stuff, as would most clients be i presume since they would not see any PHP.

Usability Issues - Some restaurants dont take reservations. Some restaurants are not technology friendly and only do in person reservations (very few in this day in age)*, some restaurants only take reservations through phone call(most restaurants we will target I think are more in this boat)* if that is the case we have a couple of options on what to do: We could a.) Figure out a way to send an automated phone call (least plausible) b.) Talk to the restaurants and fill them in on that specific weekend and send an automated email (more plausible)* c.) Have them use the app for that weekend and possibly for future use.

Accessibility issues - This plays off the last one, because we might have to use different options for different restaurants. We don't want the participants going to the conference thinking they are limited to only the restaurants who take reservations over email, we want to at least give them all the options and just emphasize that not all have reservations or someway accommodate those places in the app. We will not find this out until we figure out the details with each individual restaurants and talk to them and see what they offer, or are willing to accommodate.


Literature Review 13

Literature Review



Completing a meal planner would have its own challenges through the types of languages that would be used, options to be allowed, and various other things. Some of the problems could be mitigated by looking at similar pieces of software that were created. Some pieces of literature will allow insight to other ideas and thoughts that we may not have come up with on our own. Automating a system may make it seem like it would never need to be touched again, but The reason people are still around working is because they need to be a knowledge worker engaging in adaptive problem solving.[Vicente] Though having someone work on a project maintaining it after it has been implemented may not be a full time thing, checking on it occasionally would be enforced. Challenges in creating a project of this scope with relatively no experience in a task may had scope creep come up on us at the end. Different teams have approached problems with their interface design in different ways; the major one that has affected our group was the ability to give enough time towards aspects of the program to make sure all of the functionality was working properly.

Once a piece of software has been created, maintenance will be required for the product because of other technologies advancing such as web browsers and mobile devices. If maintenance isnt happening the software will have a chance at not working or having security holes in the future. The Conference Meal Planner would have to be constantly updated over time to be sure that restaurants that update their system are still correct and work as intended in the software. Some businesses may also stop serving customers by going out of business, making it important to keep the program updated for the audience. Otherwise the misinformation may cause customer complaints and problems making it harder to regain the audience after a headache such like that, they may search the market to find one that has more support even if it means a more poor performance.

A good interface allows a user to use a page effectively and efficiently without hassle. Creating an interface forces the developer to think in terms more logical than what works for them, they must think what works for the intended user. The user interface is an important part of a computer, being a graphic interface or command line, they allow a user to interact with the computer. The user interface is the part of a computer and its software that people can see, hear, touch, talk to, or otherwise understand or direct.[Galitz] Benefits and features of an interface can sway the opinion of people toward your product, while one with less benefits and features may have less popularity and support. A good design allows for training costs to be lower, Support line costs are lowered, employee satisfaction is increased, and the customers benefit from the improved service they receive.[Galitz] The critical part is satisfying the customer, if a problem could be resolved without having the customer call for help, that allows for more focus on critical issues instead of mundane ones.

In creating the program/webpage, one idea that we had to optimize the user experience was to have them enter in their own information so that it transitions from the main site, to the reservation site. The main thing is that the user wouldnt have to enter their information twice, the user would enter their information on both sites. Users shouldn't have to enter the same information more than once. After all, computers are pretty good at remembering data. The only reason users have to repeat themselves is because programmers get lazy and don't transfer the answers from one part of the app to another.[Nielsen], this explains the reasoning behind our decision because if a computer can do that functionality on its own, just use it and then the audience would become more pleased.

An area that was focused on with our design was the idea to make sure that the user had the ability to see where they wanted to go live, by selecting the restaurant, and then being able to get directions to there. The ability to overlay a google map api onto the bottom of the webpage would seem to be a lazy excuse to have it there although that functionality has been proved to work in that application fine. The idea we had was to get an SVG map so that the user would be able to zoom without the fear of pixelization and to try and expose more SVG out to others proving



its usefulness in different areas of web based graphics. Having SVG on the website allows us to prevent scripting attacks due to the lack of scripting that can be involved with SVG, some graphics are able to be animated through the language itself. This allows us to prevent Cross-Site Scripting somewhat. XCC occurs when an attacker is capable of injecting a script, often Javascript, into the output of a web application in such a way that it is executed in the client browser. This ordinarily happens by locating a means of breaking out of a data context in HTML into a scripting context - usually by injecting new HTML, Javascript strings or CSS markup.[Brady] This is an issue that is hard to bypass because for a meal scheduling program there needs to be some automatization in the program to make a better end user experience overall. The meal planner is using python, HTML, Javascript, SVG, SQL, and php, meaning that there are exploits that can be found but should be covered up through bug testing and having previous experience with that matter.

Developing a web application for mobile has its own challenges compared to a normal page. The mobile version would have to be able to work in various operating systems and the different versions of them, it would have to be optimized so that they do not encounter problems with the SVG map or python scripting, and it would also not have a website that is minimized making text unable to be read. Sometimes this means having to code in a different language to accommodate the user. Developing a mobile version on such a short notice is a difficult task due to the amount of bugs it may hold compared to the normal site, such as the map being disproportionate or the page simply not being formatted correctly for a mobile device.

Creating a meal planner was a difficult task incorporating all the ideas that were in the group into feasible tasks was tough. Developing a plan of action and giving the appropriate amount of time to figure out the solutions to any problems that happened while creating the meal planner is difficult. Looking into the different ways to research the project by eliminating basic user interface problems allows for less problems to be fixed near completion. Executing a multi-step plan without someone having previous experience in the matter allows for more of a learning experience such as finding simple bugs or other problems that would streamline the process much more.



Bibliography Vicente, Kim. "Ecological Interface Design: Progress and Challenges." Ecological Interface Design:

Progress and Challenges. Web. 1 May 2015. .

Galitz, Wilbert. "The Essential Guide to User Interface Design." Google Books. Web. 1 May 2015.

Nielsen, Jakob. "Nielsen Norman Group." Top 10 Application-Design Mistakes. Web. 1 May 2015.

.. Brady, Padriac. "Cross-Site Scripting (XSS)." Cross-Site Scripting (XSS) Survive The Deep

End: PHP Security. Web. 3 May 2015. .


Literature Review Documents List 17

Literature Review Documents List


Literature Review Documents List 18

Ecological Interface Design: Progress and Challenges Vencente, Kim. "Ecological Interface Design: Progress and Challenges." Ecological Interface Design: Progress and Challenges. Web. 4 May 2015. . The Essential Guide to User Interface Design Galitz, Wilbert. "The Essential Guide to User Interface Design." Google Books. Web. 1 May 2015. . User Interface Issues "User Interface Issues." User Interface Issues. Web. 1 May 2015. . Top 10 Application design mistakes Nielsen, Jakob. "Nielsen Norman Group." Top 10 Application-Design Mistakes. Web. 1 May 2015. . Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps Banga, Cameron, and Josh Weinhold. "Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps." Web. 1 May 2015. . Understanding Mobile Human-Computer Interaction Love, Steve. "Understanding Mobile Human Computer Interaction." KLN PASS User Login. Web. 1 May 2015. . XCC Attacks Brady, Padriac. "Cross-Site Scripting (XSS)." Cross-Site Scripting (XSS) Survive The Deep End: PHP Security. Web. 4 May 2015. .


HTML Source Code 19

HTML Source Code


HTML Source Code 20

1. 2. 3. 4. 427 final 5. 6. #h { 7. background-color:#000033; 8. color:papayawhip; 9. text-align:center; 10. text-shadow:2px 2px #000000; 11. padding:5px; 12. font-family:Arial; 13. font-size:30px; 14. } 15. #h2 { 16. background-color:#000033; 17. color:papayawhip; 18. text-align:center; 19. padding:20px; 20. font-family:Arial; 21. } 22. #t { 23. width:100%; 24. text-align:center; 25. padding:5px; 26. border:1px solid black; 27. } 28. p { 29. text-transform:uppercase; 30. font-family:Arial; 31. font-size:15px; 32. font-weight:bold; 33. } 34. svg { 35. margin-left:auto; 36. margin-right:auto; 37. display:block; 38. } 39. 40. 41. function highlight(x) { 42. var bgc=document.getElementById(x); 43. bgc.style.backgroundColor="salmon"; 44. //alert(x); 45. } 46. function changeback(x) { 47. var bgc=document.getElementById(x); 48. bgc.style.backgroundColor="papayawhip"; 49. } 50. function changeback2(x) { 51. var bgc=document.getElementById(x); 52. bgc.style.backgroundColor="white"; 53. } 54. function directions(x) { 55. var bgc=document.getElementById(x); 56. if (bgc==r1){ 57. window.open("http://goo.gl/RSm8eV"); 58. } 59. else if (bgc==r2){ 60. window.open("http://goo.gl/TNdVXf"); 61. }


HTML Source Code 21

62. else if (bgc==r3){ 63. window.open("http://goo.gl/sJSc21"); 64. } 65. else if (bgc==r4){ 66. window.open("http://goo.gl/JjKt5B"); 67. } 68. else if (bgc==r5){ 69. window.open("http://goo.gl/Kvmrel"); 70. } 71. else if(bgc==r6){ 72. window.open("http://goo.gl/Fyvbxa"); 73. } 74. } 75. 76. 77. 78. //****************Change the hours of the Restaurants depending on the day**************** 79. 80. var d = new Date() //Date 81. var dday = d.getDate() //Day 82. 83. 84. //Capital Grille 85. 86. 87. //Nola on the square 88. 89. 90. //Seviche 91. 92. 93. //Grit and Grace 94. 95. 96. //Meat & Potatoes 97. 98. 99. 100. 101. 102. Conference Meal Planner 103. Fairmont Pittsburgh 104. 510 Market St. 105. (412) 773-8800September 23-26, 2015 106. 107. 108. 109. Top rated local restaurants: 110. 111. 112. Sienna Sulla Piazza22 Market Square

(412) 281-6363Cuisine: ItalianView WebsiteOnline Reservation Limit: 4Hours: hey

113. 114. 115. 116. var ss_times = document.getElementById("lblSiennaSulla"); 117. if(day == 23 || day == 24){


HTML Source Code 22

118. ss_times.innerHTML="11:00am - 10:00pm" 119. } else if(day == 25){ 120. ss_times.innerHTML="11:00am - 11:00pm" 121. }else { 122. ss_times.innerHTML="12:00pm - 11:00pm" 123. } 124. 125. 126. 127. The Capital Grille301 Fifth Avenue(412) 338-

9100Cuisine: Steakhouse/AmericanView WebsiteOnline Reservation Limit: 12Hours: hey

128. 129. 130. 131. var cg_times = document.getElementById("lblCapGrille"); 132. if(day == 23 || day == 24){ 133. cg_times.innerHTML="11:00am - 10:00pm" 134. } else if(day == 25){ 135. cg_times.innerHTML="11:00am - 11:00pm" 136. }else { 137. cg_times.innerHTML="5:00pm - 11:00pm" 138. } 139. 140. 141. 142. NOLA on the Square24 Market Square(412) 471-9100Cuisine: Cajun/CreoleView WebsiteOnline Reservation Limit: 4Hours: hey

143. 144. 145. 146. var nola_times = document.getElementById("lblNola"); 147. if(day == 23 || day == 24){ 148. nola_times.innerHTML="11:00am - 11:00pm" 149. } else if(day == 25){ 150. nola_times.innerHTML="11:00am - 11:00pm" 151. }else { 152. nola_times.innerHTML="11:00am - 11:00pm" 153. } 154. 155. 156. 157. 158. 159. 160. 161. Seviche930 Penn Avenue(412) 697-

3120Cuisine: Latin American/CubanView WebsiteOnline Reservation Limit: 6Hours: hey

162. 163. 164. 165. var seviche_times = document.getElementById("lblSeviche"); 166. if(day == 23 || day == 24){ 167. seviche_times.innerHTML="5:00pm - 12:00am" 168. } else if(day == 25){


HTML Source Code 23

169. seviche_times.innerHTML="5:00pm - 12:00am" 170. }else { 171. seviche_times.innerHTML="5:00pm - 12:00am" 172. } 173. 174. 175. 176. Grit & Grace535 Liberty Avenue(

412) 281-4748Cuisine: Asian/InternationalView WebsiteOnline Reservation Limit: 6Hours: hey

177. 178. 179. 180. var gg_times = document.getElementById("lblGG"); 181. if(day == 23 || day == 24){ 182. gg_times.innerHTML="11:30am - 11:00pm" 183. } else if(day == 25){ 184. gg_times.innerHTML="11:30am - 12:00am" 185. }else { 186. gg_times.innerHTML="4:00pm - 12:00am" 187. } 188. 189. 190. 191. 192. Meat & Potatoes649 Penn Avenue(412) 325-

7007Cuisine: GastropubView WebsiteOnline Reservation Limit: 6Hours(Lunch): hey(Dinner)0

193. 194. 195. 196. 197. //LUNCH 198. var mp_times = document.getElementById("lblMPlunch"); 199. if(day == 23 || day == 24){ 200. mp_times.innerHTML="11:30am - 2:00pm " 201. } else if(day == 25){ 202. mp_times.innerHTML="11:30am - 2:00pm " 203. }else { 204. mp_times.innerHTML="10:30am - 2:00pm " 205. } 206. 207. //DINNER 208. var mp_din_times = document.getElementById("lblMPdinner"); 209. if(day == 23 || day == 24){ 210. mp_din_times.innerHTML="5:00pm - 11:00pm " 211. } else if(day == 25){ 212. mp_din_times.innerHTML="5:00pm - 12:00am " 213. }else { 214. mp_din_times.innerHTML="5:00pm - 12:00am " 215. } 216. 217. 218. 219. 220. 221. 222.


HTML Source Code 24

223. 224. 225. 226. Fairmont

227. Sienna Sulla Piazza

228. The Capital Grille

229. Nola on the Square

230. Seviche

231. Grit & Grace

232. Meat & Potatoes

233. 234. 235. 236. 237. 238. 239. 240. 241.


PHP Source Code 25

PHP Source Code


PHP Source Code 26

1. 2. 27. 28. 29. 30. 427 final 31. 32. #h { 33. background-color:#000033; 34. color:papayawhip; 35. text-align:center; 36. text-shadow:2px 2px #000000; 37. padding:5px; 38. font-family:Arial; 39. font-size:30px; 40. } 41. #h2 { 42. background-color:#000033; 43. color:papayawhip; 44. text-align:center; 45. padding:15px; 46. font-family:Arial; 47. } 48. #t { 49. width:100%; 50. text-align:center; 51. padding:5px; 52. border:1px solid black; 53. } 54. p { 55. text-transform:uppercase; 56. font-family:Arial; 57. font-size:15px; 58. font-weight:bold; 59. } 60. svg { 61. margin-left:auto;


PHP Source Code 27

62. margin-right:auto; 63. display:block; 64. } 65. 66. 67. function highlight(x) { 68. var bgc=document.getElementById(x); 69. bgc.style.backgroundColor="salmon"; 70. //alert(x); 71. } 72. function changeback(x) { 73. var bgc=document.getElementById(x); 74. bgc.style.backgroundColor="papayawhip"; 75. } 76. function changeback2(x) { 77. var bgc=document.getElementById(x); 78. bgc.style.backgroundColor="white"; 79. } 80. function directions(x) { 81. var bgc=document.getElementById(x); 82. if (bgc==r1){ 83. window.open("http://goo.gl/RSm8eV"); 84. } 85. else if (bgc==r2){ 86. window.open("http://goo.gl/TNdVXf"); 87. } 88. else if (bgc==r3){ 89. window.open("http://goo.gl/sJSc21"); 90. } 91. else if (bgc==r4){ 92. window.open("http://goo.gl/JjKt5B"); 93. } 94. else if (bgc==r5){ 95. window.open("http://goo.gl/Kvmrel"); 96. } 97. else if(bgc==r6){ 98. window.open("http://goo.gl/Fyvbxa"); 99. } 100. } 101. 102. 103. 104. //****************Change the hours of the Restaurants depending on the day*************

*** 105. 106. var d = new Date() //Date 107. var day = d.getDate() //Day 108. 109. 110. //Capital Grille 111. 112. 113. //Nola on the square 114. 115. 116. //Seviche 117. 118. 119. //Grit and Grace 120. 121.


PHP Source Code 28

122. //Meat & Potatoes 123. 124. 125. 126. 127. 128. Conference Meal Planner 129. Fairmont Pittsburgh 130. 510 Market St. 131. (412) 773-8800September 23-26, 2015 132. 133. 134. 135. Top rated local restaurants: 136. 137. 138. Sienna Sulla Piazza22 Market Square

(412) 281-6363Cuisine: ItalianView WebsiteOnline Reservation Limit: 4Number of Reservations: Hours: hey

139. 140. 141. 142. var ss_times = document.getElementById("lblSiennaSulla"); 143. if(day == 23 || day == 24){ 144. ss_times.innerHTML="11:00am - 10:00pm" 145. } else if(day == 25){ 146. ss_times.innerHTML="11:00am - 11:00pm" 147. }else { 148. ss_times.innerHTML="12:00pm - 11:00pm" 149. } 150. //kyle code start 151. function formcreateSienna(){ 152. var r=document.getElementById("btn_SiennaSulla") 153. r.style.visibility= 'hidden'; 154. ss_times.innerHTML+="" 155. ss_times.innerHTML+="Number of Reservations: " 156. ss_times.innerHTML+="1234" 157. ss_times.innerHTML+="Time: " 158. ss_times.innerHTML+="Name: " 159. ss_times.innerHTML+="Phone: " 160. ss_times.innerHTML+="" 161. ss_times.innerHTML+="" 162. } 163. //kyle code end 164. 165. 166. 167. The Capital Grille301 Fifth Avenue(412) 338-

9100Cuisine: Steakhouse/AmericanView WebsiteOnline Reservation Limit: 12Number of Reservations: Hours: hey

168. 169. 170. 171. var cg_times = document.getElementById("lblCapGrille");


PHP Source Code 29

172. if(day == 23 || day == 24){ 173. cg_times.innerHTML="11:00am - 10:00pm" 174. } else if(day == 25){ 175. cg_times.innerHTML="11:00am - 11:00pm" 176. }else { 177. cg_times.innerHTML="5:00pm - 11:00pm" 178. } 179. //kyle code start 180. function formcreateCap(){ 181. var r=document.getElementById("btn_CapGrille") 182. r.style.visibility= 'hidden'; 183. cg_times.innerHTML+="" 184. cg_times.innerHTML+="Number of Reservations: " 185. cg_times.innerHTML+="123456789101112"

186. cg_times.innerHTML+="Time: " 187. cg_times.innerHTML+="Name: " 188. cg_times.innerHTML+="Phone: " 189. cg_times.innerHTML+="" 190. cg_times.innerHTML+="" 191. } 192. //kyle code end 193. 194. 195. 196. NOLA on the Square24 Market Square(412) 471-9100Cuisine: Cajun/CreoleView WebsiteOnline Reservation Limit: 4Number of Reservations: Hours: hey

197. 198. 199. 200. var nola_times = document.getElementById("lblNola"); 201. if(day == 23 || day == 24){ 202. nola_times.innerHTML="11:00am - 11:00pm" 203. } else if(day == 25){ 204. nola_times.innerHTML="11:00am - 11:00pm" 205. }else { 206. nola_times.innerHTML="11:00am - 11:00pm" 207. } 208. //kyle code start 209. function formcreateNola(){ 210. var r=document.getElementById("btn_Nola") 211. r.style.visibility= 'hidden'; 212. nola_times.innerHTML+="" 213. nola_times.innerHTML+="Number of Reservations: " 214. nola_times.innerHTML+="1234" 215. nola_times.innerHTML+="Time: " 216. nola_times.innerHTML+="Name: " 217. nola_times.innerHTML+="Phone: " 218. nola_times.innerHTML+="" 219. nola_times.innerHTML+="" 220. } 221. //kyle code end 222.


PHP Source Code 30

223. 224. 225. 226. 227. 228. 229. Seviche930 Penn Avenue(412) 697-

3120Cuisine: Latin American/CubanView WebsiteOnline Reservation Limit: 6Number of Reservations: Hours: hey

230. 231. 232. 233. var seviche_times = document.getElementById("lblSeviche"); 234. if(day == 23 || day == 24){ 235. seviche_times.innerHTML="5:00pm - 12:00am" 236. } else if(day == 25){ 237. seviche_times.innerHTML="5:00pm - 12:00am" 238. }else { 239. seviche_times.innerHTML="5:00pm - 12:00am" 240. } 241. //kyle code start 242. function formcreateSeviche(){ 243. var r=document.getElementById("btn_Seviche") 244. r.style.visibility= 'hidden'; 245. seviche_times.innerHTML+="" 246. seviche_times.innerHTML+="Number of Reservations: " 247. seviche_times.innerHTML+="123456"

248. seviche_times.innerHTML+="Time: " 249. seviche_times.innerHTML+="Name: " 250. seviche_times.innerHTML+="Phone: " 251. seviche_times.innerHTML+="" 252. seviche_times.innerHTML+="" 253. } 254. //kyle code end 255. 256. 257. 258. Grit & Grace535 Liberty Avenue(

412) 281-4748Cuisine: Asian/InternationalView WebsiteOnline Reservation Limit: 6Number of Reservations: Hours: hey

259. 260. 261. 262. var gg_times = document.getElementById("lblGG"); 263. if(day == 23 || day == 24){ 264. gg_times.innerHTML="11:30am - 11:00pm" 265. } else if(day == 25){ 266. gg_times.innerHTML="11:30am - 12:00am" 267. }else { 268. gg_times.innerHTML="4:00pm - 12:00am" 269. } 270. //kyle code start 271. function formcreateGG(){ 272. var r=document.getElementById("btn_GritGrace")


PHP Source Code 31

273. r.style.visibility= 'hidden'; 274. gg_times.innerHTML+="" 275. gg_times.innerHTML+="Number of Reservations: " 276. gg_times.innerHTML+="123456"

277. gg_times.innerHTML+="Time: " 278. gg_times.innerHTML+="Name: " 279. gg_times.innerHTML+="Phone: " 280. gg_times.innerHTML+="" 281. gg_times.innerHTML+="" 282. } 283. //kyle code end 284. 285. 286. 287. 288. Meat & Potatoes649 Penn Avenue(412) 325-

7007Cuisine: GastropubView WebsiteOnline Reservation Limit: 6Number of Reservations: Hours(Lunch): hey(Dinner)0

289. 290. 291. 292. 293. //LUNCH 294. var mp_times = document.getElementById("lblMPlunch"); 295. if(day == 23 || day == 24){ 296. mp_times.innerHTML="11:30am - 2:00pm " 297. } else if(day == 25){ 298. mp_times.innerHTML="11:30am - 2:00pm " 299. }else { 300. mp_times.innerHTML="10:30am - 2:00pm " 301. } 302. 303. //DINNER 304. var mp_din_times = document.getElementById("lblMPdinner"); 305. if(day == 23 || day == 24){ 306. mp_din_times.innerHTML="5:00pm - 11:00pm " 307. } else if(day == 25){ 308. mp_din_times.innerHTML="5:00pm - 12:00am " 309. }else { 310. mp_din_times.innerHTML="5:00pm - 12:00am " 311. } 312. //kyle code start 313. function formcreateMP(){ 314. var r=document.getElementById("btn_MandP") 315. r.style.visibility= 'hidden'; 316. mp_din_times.innerHTML+="" 317. mp_din_times.innerHTML+="Number of Reservations: " 318. mp_din_times.innerHTML+="1

23456"

319. mp_din_times.innerHTML+="Time: " 320. mp_din_times.innerHTML+="Name: " 321. mp_din_times.innerHTML+="Phone: " 322. mp_din_times.innerHTML+="" 323. mp_din_times.innerHTML+="" 324. } 325. //kyle code end


PHP Source Code 32

326. 327. 328. 329. 330. 331. 332. 333. 334. 335. Fairmont

336. Sienna Sulla Piazza

337. The Capital Grille

338. Nola on the Square

339. Seviche

340. Grit & Grace

341. Meat & Potatoes

342. 343. 344. 345. 346. 347. 348. 349. 350. 351.


Python Scripts 33

Python Scripts


Python Scripts 34

Sienna Sulla Piazza

1. # -*- coding: utf-8 -*- 2. from selenium import webdriver 3. from selenium.webdriver.common.by import By 4. from selenium.webdriver.common.keys import Keys 5. from selenium.webdriver.support.ui import Select 6. from selenium.common.exceptions import NoSuchElementException 7. from selenium.common.exceptions import NoAlertPresentException 8. import unittest, time, re 9. 10. class Sienna(unittest.TestCase): 11. def setUp(self): 12. self.driver = webdriver.Firefox() 13. self.driver.implicitly_wait(30) 14. self.base_url = "http://www.opentable.com/" 15. self.verificationErrors = [] 16. self.accept_next_alert = True 17. 18. def test_the_capital_grille(self): 19. driver = self.driver 20. driver.get(self.base_url + "sienna-pittsburgh?DateTime=2015-05-

01 14%3A00&Covers=4&OnlyOffers=false&RestaurantIDs=69259&MetroId=62") 21. Select(driver.find_element_by_name("Select_1")).select_by_visible_text("4 people") 22. driver.find_element_by_name("datepicker").click() 23. time.sleep(2) 24. Select(driver.find_element_by_name("Select_0")).select_by_visible_text("9:00 PM") 25. 26. #driver.find_element_by_id("autocompleteWithPlaces").send_keys("The Capital Grille -

Pittsburgh") --> Search Bar 27. 28. driver.find_element_by_css_selector("input.button.dtp-picker-button").click() 29. driver.find_element_by_xpath("(//a[contains(text(),'9:00 PM')])[2]").click() 30. time.sleep(5) 31. driver.find_element_by_id("firstName").clear() 32. driver.find_element_by_id("firstName").send_keys("first") 33. driver.find_element_by_id("lastName").clear() 34. driver.find_element_by_id("lastName").send_keys("Last") 35. time.sleep(2) 36. driver.find_element_by_id("phoneNumber").clear() 37. driver.find_element_by_id("phoneNumber").send_keys("4127779999") 38. driver.find_element_by_id("email").clear() 39. driver.find_element_by_id("email").send_keys("email") 40. driver.find_element_by_id("completeReservation").click() 41. #driver.find_element_by_xpath("/html/body/div[1]/section/div[2]/div/div[2]/div[2]/div/

div[1]/div/span/div/ul/li[3]/a").click() 42. #driver.find_element_by_css_selector("li.locu-tab.").click() 43. #driver.find_element_by_xpath("/html/body/div[1]/section/div[2]/div/div[2]/div[2]/div/

div[1]/div/span/div/ul/li[3]/a").click() 44. 45. def is_element_present(self, how, what): 46. try: self.driver.find_element(by=how, value=what) 47. except NoSuchElementException, e: return False 48. return True 49. 50. def is_alert_present(self): 51. try: self.driver.switch_to_alert() 52. except NoAlertPresentException, e: return False 53. return True 54.


Python Scripts 35

55. def close_alert_and_get_its_text(self): 56. try: 57. alert = self.driver.switch_to_alert() 58. alert_text = alert.text 59. if self.accept_next_alert: 60. alert.accept() 61. else: 62. alert.dismiss() 63. return alert_text 64. finally: self.accept_next_alert = True 65. 66. def tearDown(self): 67. self.driver.quit() 68. self.assertEqual([], self.verificationErrors) 69. 70. if __name__ == "__main__": 71. unittest.main()


Python Scripts 36

Seviche

1. # -*- coding: utf-8 -*- 2. from selenium import webdriver 3. from selenium.webdriver.common.by import By 4. from selenium.webdriver.common.keys import Keys 5. from selenium.webdriver.support.ui import Select 6. from selenium.common.exceptions import NoSuchElementException 7. from selenium.common.exceptions import NoAlertPresentException 8. import unittest, time, re 9. 10. class Seviche(unittest.TestCase): 11. def setUp(self): 12. self.driver = webdriver.Firefox() 13. self.driver.implicitly_wait(30) 14. self.base_url = "http://rez.opentable.com/" 15. self.verificationErrors = [] 16. self.accept_next_alert = True 17. 18. def test_seviche(self): 19. driver = self.driver 20. driver.get(self.base_url + "reservation/start/1636?source=selfhost&widget_type=multida

y&day=20140905&seating_time=1020&commit=Go") 21. time.sleep(10) 22. Select(driver.find_element_by_id("size")).select_by_visible_text("3 people") 23. Select(driver.find_element_by_id("seating_time")).select_by_visible_text("7:30 pm") 24. driver.find_element_by_name("commit").click() 25. driver.find_element_by_name("commit").click() 26. driver.find_element_by_id("user_first_name").clear() 27. driver.find_element_by_id("user_first_name").send_keys("First") 28. driver.find_element_by_id("user_last_name").clear() 29. driver.find_element_by_id("user_last_name").send_keys("Last") 30. driver.find_element_by_id("user_phone").clear() 31. driver.find_element_by_id("user_phone").send_keys("412-999-9999") 32. driver.find_element_by_id("user_email").clear() 33. driver.find_element_by_id("user_email").send_keys("Email") 34. driver.find_element_by_name("commit").click() 35. driver.find_element_by_id("user_email").clear() 36. driver.find_element_by_id("user_email").send_keys("[email protected]") 37. #driver.find_element_by_name("commit").click() 38. #driver.find_element_by_name("commit").click() 39. 40. def is_element_present(self, how, what): 41. try: self.driver.find_element(by=how, value=what) 42. except NoSuchElementException, e: return False 43. return True 44. 45. def is_alert_present(self): 46. try: self.driver.switch_to_alert() 47. except NoAlertPresentException, e: return False 48. return True 49. 50. def close_alert_and_get_its_text(self): 51. try: 52. alert = self.driver.switch_to_alert() 53. alert_text = alert.text 54. if self.accept_next_alert: 55. alert.accept() 56. else: 57. alert.dismiss()


Python Scripts 37

58. return alert_text 59. finally: self.accept_next_alert = True 60. 61. def tearDown(self): 62. self.driver.quit() 63. self.assertEqual([], self.verificationErrors) 64. 65. if __name__ == "__main__": 66. unittest.main()


Python Scripts 38

Nola on the Square

1. # -*- coding: utf-8 -*- 2. from selenium import webdriver 3. from selenium.webdriver.common.by import By 4. from selenium.webdriver.common.keys import Keys 5. from selenium.webdriver.support.ui import Select 6. from selenium.common.exceptions import NoSuchElementException 7. from selenium.common.exceptions import NoAlertPresentException 8. import unittest, time, re 9. 10. class Nola(unittest.TestCase): 11. def setUp(self): 12. self.driver = webdriver.Firefox() 13. self.driver.implicitly_wait(30) 14. self.base_url = "http://www.opentable.com/" 15. self.verificationErrors = [] 16. self.accept_next_alert = True 17. 18. def test_the_capital_grille(self): 19. driver = self.driver 20. driver.get(self.base_url + "nola-on-the-square?DateTime=2015-05-

01%2014%3A00&Covers=4&OnlyOffers=false&RestaurantIDs=59623&MetroId=62") 21. Select(driver.find_element_by_name("Select_1")).select_by_visible_text("4 people") 22. driver.find_element_by_name("datepicker").click() 23. Select(driver.find_element_by_name("Select_0")).select_by_visible_text("9:30 PM") 24. 25. #driver.find_element_by_id("autocompleteWithPlaces").send_keys("The Capital Grille -

Pittsburgh") --> Search Bar 26. 27. driver.find_element_by_css_selector("input.button.dtp-picker-button").click() 28. driver.find_element_by_xpath("(//a[contains(text(),'9:30 PM')])[2]").click() 29. time.sleep(5) 30. driver.find_element_by_id("firstName").clear() 31. driver.find_element_by_id("firstName").send_keys("first") 32. driver.find_element_by_id("lastName").clear() 33. driver.find_element_by_id("lastName").send_keys("Last") 34. driver.find_element_by_id("phoneNumber").clear() 35. driver.find_element_by_id("phoneNumber").send_keys("4127779999") 36. driver.find_element_by_id("email").clear() 37. driver.find_element_by_id("email").send_keys("email") 38. driver.find_element_by_id("completeReservation").click() 39. #driver.find_element_by_xpath("/html/body/div[1]/section/div[2]/div/div[2]/div[2]/div/


div[1]/div/span/div/ul/li[3]/a").click() 42. 43. def is_element_present(self, how, what): 44. try: self.driver.find_element(by=how, value=what) 45. except NoSuchElementException, e: return False 46. return True 47. 48. def is_alert_present(self): 49. try: self.driver.switch_to_alert() 50. except NoAlertPresentException, e: return False 51. return True 52. 53. def close_alert_and_get_its_text(self): 54. try:


Python Scripts 39

55. alert = self.driver.switch_to_alert() 56. alert_text = alert.text 57. if self.accept_next_alert: 58. alert.accept() 59. else: 60. alert.dismiss() 61. return alert_text 62. finally: self.accept_next_alert = True 63. 64. def tearDown(self): 65. self.driver.quit() 66. self.assertEqual([], self.verificationErrors) 67. 68. if __name__ == "__main__": 69. unittest.main()


Python Scripts 40

Meat & Potatoes

1. # -*- coding: utf-8 -*- 2. from selenium import webdriver 3. from selenium.webdriver.common.by import By 4. from selenium.webdriver.common.keys import Keys 5. from selenium.webdriver.support.ui import Select 6. from selenium.common.exceptions import NoSuchElementException 7. from selenium.common.exceptions import NoAlertPresentException 8. import unittest, time, re 9. 10. class MandP(unittest.TestCase): 11. def setUp(self): 12. self.driver = webdriver.Firefox() 13. self.driver.implicitly_wait(30) 14. self.base_url = "http://www.opentable.com/" 15. self.verificationErrors = [] 16. self.accept_next_alert = True 17. 18. def test_the_capital_grille(self): 19. driver = self.driver 20. driver.get(self.base_url + "meat-and-potatoes?DateTime=2015-05-






Python Scripts 41



Python Scripts 42

Grit & Grace

1. # -*- coding: utf-8 -*- 2. from selenium import webdriver 3. from selenium.webdriver.common.by import By 4. from selenium.webdriver.common.keys import Keys 5. from selenium.webdriver.support.ui import Select 6. from selenium.common.exceptions import NoSuchElementException 7. from selenium.common.exceptions import NoAlertPresentException 8. import unittest, time, re 9. 10. class GandG(unittest.TestCase): 11. def setUp(self): 12. self.driver = webdriver.Firefox() 13. self.driver.implicitly_wait(30) 14. self.base_url = "http://www.opentable.com/" 15. self.verificationErrors = [] 16. self.accept_next_alert = True 17. 18. def test_the_capital_grille(self): 19. driver = self.driver 20. driver.get(self.base_url + "grit-and-grace?DateTime=2015-05-






Python Scripts 43



Python Scripts 44

The Capital Grille

1. # -*- coding: utf-8 -*- 2. from selenium import webdriver 3. from selenium.webdriver.common.by import By 4. from selenium.webdriver.common.keys import Keys 5. from selenium.webdriver.support.ui import Select 6. from selenium.common.exceptions import NoSuchElementException 7. from selenium.common.exceptions import NoAlertPresentException 8. import unittest, time, re 9. 10. class TheCapitalGrille(unittest.TestCase): 11. def setUp(self): 12. self.driver = webdriver.Firefox() 13. self.driver.implicitly_wait(30) 14. self.base_url = "http://www.opentable.com/" 15. self.verificationErrors = [] 16. self.accept_next_alert = True 17. 18. def test_the_capital_grille(self): 19. driver = self.driver 20. driver.get(self.base_url + "the-capital-grille-pittsburgh?DateTime=2015-05-

20%2013%3A30&Covers=5&OnlyOffers=false&RestaurantIDs=14047&MetroId=62#") 21. Select(driver.find_element_by_name("Select_1")).select_by_visible_text("5 people") 22. driver.find_element_by_name("datepicker").click() 23. time.sleep(2) 24. Select(driver.find_element_by_name("Select_0")).select_by_visible_text("8:30 PM") 25. 26. #driver.find_element_by_id("autocompleteWithPlaces").send_keys("The Capital Grille -

Pittsburgh") --> Search Bar 27. 28. driver.find_element_by_css_selector("input.button.dtp-picker-button").click() 29. driver.find_element_by_xpath("(//a[contains(text(),'8:30 PM')])[2]").click() 30. time.sleep(5) 31. driver.find_element_by_id("firstName").clear() 32. driver.find_element_by_id("firstName").send_keys("first") 33. time.sleep(2) 34. driver.find_element_by_id("lastName").clear() 35. driver.find_element_by_id("lastName").send_keys("Last") 36. driver.find_element_by_id("phoneNumber").clear() 37. driver.find_element_by_id("phoneNumber").send_keys("4127779999") 38. time.sleep(2) 39. driver.find_element_by_id("email").clear() 40. driver.find_element_by_id("email").send_keys("email") 41. driver.find_element_by_id("completeReservation").click() 42. time.sleep(2) 43. #driver.find_element_by_xpath("/html/body/div[1]/section/div[2]/div/div[2]/div[2]/div/


div[1]/div/span/div/ul/li[3]/a").click() 46. 47. def is_element_present(self, how, what): 48. try: self.driver.find_element(by=how, value=what) 49. except NoSuchElementException, e: return False 50. return True 51. 52. def is_alert_present(self): 53. try: self.driver.switch_to_alert() 54. except NoAlertPresentException, e: return False


Python Scripts 45

55. return True 56. 57. def close_alert_and_get_its_text(self): 58. try: 59. alert = self.driver.switch_to_alert() 60. alert_text = alert.text 61. if self.accept_next_alert: 62. alert.accept() 63. else: 64. alert.dismiss() 65. return alert_text 66. finally: self.accept_next_alert = True 67. 68. def tearDown(self): 69. self.driver.quit() 70. self.assertEqual([], self.verificationErrors) 71. 72. if __name__ == "__main__": 73. unittest.main()


Student Contributions 46

Student Contributions


Student Contributions 47

Interface Design o Jacob

Mobile Interface Design o Sean

Interactive SVG Map o Jacob, Anthony

Mock Ups and WireFrames o Sean

Restaurant Data Gathering and Analysis o Jacob, Dave

Interface Issues Documentation o Jacob, Dave

Customer Specifications Documentation o Jacob, Dave, Sean

Design Decisions Documentation o Jacob

Software Instructions Documentation o Jacob, Dave

Literature Review and Bibliography o Anthony

Javascript Functionality o Jacob, Dave, Kyle

Python Scripting Functionality o Dave

HTML o Jacob, Dave, Kyle

mySQL back end o Kyle

mySQL database management o Kyle

PHP Functionality o Kyle

Final Report Assembly and Formatting o Sean

_________________________________ _________________________________ Dave Kyle _________________________________ _________________________________ Jacob Anthony _________________________________ Sean

Wireframe MockupDesign DecisionsSoftware InstructionsCustomer SpecificationsInterface IssuesLiterature ReviewLiterature Review Documents ListHTML Source CodePHP Source CodePython ScriptsSienna Sulla PiazzaSevicheNola on the SquareMeat & PotatoesGrit & GraceThe Capital Grille

Student Contributions