Team Webstars & Tonight’s Agenda:Team Webstars & Tonight’s Agenda:
Steve Terpe – Steve Terpe – IntroductionIntroductionParris Khachi – Parris Khachi – In-depth DesignIn-depth DesignCorey Richey – Corey Richey – Front-EndFront-EndEric Neto – Eric Neto – Sample Exec: Profile PageSample Exec: Profile Page
Shivang Shah –Shivang Shah –Yelp & Google API’sYelp & Google API’sKifle Awedew – Kifle Awedew – Wrap-Up & Q/AWrap-Up & Q/A
Favorites.com: Restaurant Rating meets Social NetworkingFavorites.com: Restaurant Rating meets Social Networking
Design Review:Design Review:
Major Functionalities:
•Users create & maintain a personal profile with Favorites.com.
•User can add a review to their personal feed
•User can comment on other users’ reviews
•User can Like or Dislike other users’ reviews
•Users will be able to view reviews from other reviewing websites, currently
synchronizing only with YELP.
Hi-Level Architecture/Major ModulesHi-Level Architecture/Major Modules
Java Source:
Default Package•hibernate.cfg.xml•hibernate.reveng.xml
Controllers•CommentsController.java •RestaurantCategoriesController.java •RestaurantsController.java •ReviewsController.java •UsersController.java
Models•Comment.hbm.xml•Comment.java•HibernateUtil.java•Restaurant.hbm.xml•Restaurant.java•RestaurantCategory.hbm.xml•RestaurantCategory.java•Review.hbm.xml•Review.java•User.hbm.xml•User.java•UserConnection.hbm.xml•UserConnection.java
JSP’s:
assets•fileupload/ •images/
layouts•defaultFooter.jsp•defaultHeader.jsp
restaurants•create.jsp •search.jsp •view.jsp
users•create.jsp •login.jsp •stylesheet.css •view.jsp
Model View Controller Implementation
MySQL Database EER Diagram
ArchitectureArchitectureGetting Data to JSPs Make a request to a controller The controller requests and/or sends data to model Model queries the database, and returns to the controller Controller passes data base to the JSP if necessary
Posting Data from JSPs JSP uses itself as form action JSP checks to see if data is submitted and then sends data to
controller Controller sanitizes then sends to Model if necessary
Model validates If validation passes then data will be save on the database If validation fails then reasons are given and passed to the controller
Controller passes information back to JSPs JSPs decide whether to redisplay the form or display a success
message
6 Steps for creating an html page6 Steps for creating an html page
1.) Create a Photoshop layout of your design
2.) Identify static and dynamic portions of your Photoshop design
a.) Static – what images belongs in the background
b.) Dynamic – what parts need to be text, links, pics that will change.
3.) Draw a Diagram of your html/css layout
4.) Slice static images from Photoshop document
5.) Write html/css for page container, header and footer and insert background images
6.) Write html/css for middle portion keeping scalability in mind.
Profile page
A Profile page is generated for each Registered User.
Located at /Favorites/users/view.jsp?userID=<ID>
Can be seen by anyone. Can post reviews if you’re the owner of the
profile. Can write comments, Like, or Dislike any review
on the page regardless of whether you follow the poster.
The JSP creates a User Model for the given page, and sets the id of the model to the user id of whom the page represents.
The model fills in the rest of the fields by looking in the database, and grabbing all data from the row associated with that id.
The JSP can now pull all user information from that model with getters.
Profile page – User info
JSP calls Java class to collect array of all Review IDs by this user.
Iterates through Review IDs, creating one model at a time.
After a Review has been written on the page, model is overwritten with next Review.
Profile page – Review List
When posting a review, the restaurant you’re reviewing must exist in the system.
Either select your restaurant from a list, or Add a new location.
Duplicate restaurants can be easily handled.
Profile page – Adding a Review
Yelp Implementation
Advantages of using Yelp Developer’s API
o Getting yelp reviews for a specific restaurant.
o Extract every important information about a specific restaurant and corresponding reviews such as address, categories, average user rating, individual user rating, actual review URL,
restaurant URL, etc.
Limitations of Yelp API
o Can pull only 3 latest (or specific) reviews per restaurant.
o Can pull only excerpt instead of full reviews.
Yelp Implementation (Cont.)
How does the API work?
o Construct a yelp specific request URL.• http://api.yelp.com/business_review_search?callback=?
&term=Applebees&location=94536&radius=5&ywsid=oYV-smMU2InVKIlOh0KH8A
o URL returns a JSON object with required data using REST webservices.
o Explaining JSON object structure.• http://www.yelp.com/developers/documentation/search_api
o Parsing JSON object using jquery (or dojo). AJAX frameworko Extract required information from JSON and display them.
Google Map Implementation
An added enhancement for restaurant profile page. Able to view the current restaurant location on google maps using googlemaps ajax APIs. Plot recommended restaurants around the current restaurant viewed within a specific radius.
Google Map Implementation(Cont.)
How does the API work? Using pre-defined googlemaps functions to show the actual
map. Plot the exact location (lat long) of the restaurant being viewed.
This feature is called Google geocoding.
Reverse Geocoding: If lat longs are not available for a specific restaurant (mostly probably
that’s the case), google reverse geocoding technique is used. The correct address of the restaurant is provided to googlemaps API,
which determines and returns the lat long of the location and that lat long can be used to plot the restaurant on maps.
Same technique can be used for plotting recommended restaurants around the restaurant being viewed currently.
Wrap Up
The User Interface Designing Pages Join Now Page
Member Login Page
Search Page
Add a restaurant Page
New Reviews Page
Q/AQ/A