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