Objectives
- Become familiar with the AJAX and JSON technologies
- Use a combination of HTML5, CSS, Bootstrap, jQuery, AngularJS and PHP
- Get hands-on experience in Google Cloud App Engine or Amazon Web Services
- Get hands-on experience on how to use Bootstrap to enhance the user experience
- Provide an interface to perform congress search using Sunlight Congress APIs
Background
AJAX and JSON
Ajax (short for Asynchronous JavaScript and XML) is a mechanism which enables the communication between the client and the server without the need for a post-back or a complete page refresh. It can also be defined as a method of exchanging data with a server, and updating some parts of a web page without reloading the entire page.
In this exercise, you have to use the AJAX component provided in JQuery.
JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main application is in AJAX web application programming, where it serves as an alternative to the use of the XML format for data exchange between client and server.
Bootstrap
Bootstrap is a free collection of tools for creating responsive websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. To learn more details about Bootstrap please refer to the lecture material on Responsive Web Design (RWD).
Sunlight Congress API
The Sunlight Congress API is a live JSON API for the people and work of Congress, provided by the Sunlight Foundation. With the API you can:
- Look up members of Congress by location or by zip code.
- Obtain the official Twitter, YouTube, and Facebook accounts.
- Look up the daily work of Congress: bills, amendments, nominations.
Get the live activity of Congress: past and future votes, floor activity, heari ngs.
In order to make requests to Sunlight Congress API, you need to get an API key:- Click on “Get a key!”
- Fill the sign up form
- You will get a confirm email. Click on the link in the email.
Then login at the Sunlight Foundation website and go to your “Profile Settings”. You will see your API key string right above you name.
For information about the Sunlight Congress API, please go to: https://sunlightlabs.github.io/congress/
Amazon Web Services (AWS)
AWS is Amazon’s implementation of cloud computing. AWS includes Amazon Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in the AWS cloud. You can simply upload your application, and Elastic Beanstalk automatically handles the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS 7.5 for .NET, and Apache Tomcat for Java.
The Amazon Web Services homepage is available at: http://aws.amazon.com/
Google App Engine (GAE)
Google App Engine applications are easy to create, easy to maintain, and easy to scale as your traffic and data storage needs change. With App Engine, there are no servers to maintain. You simply upload your application and it’s ready to go. App Engine applications automatically scale based on incoming traffic. Load balancing, micro services, authorization, SQL and noSQL databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, and security scanning are all supported natively and are highly customizable.
To learn more about GAE support for PHP visit the page: https://cloud.google.com/appengine/docs/php/
Description
Similar to request 6, in this exercise you will create a webpage that allows users to search for congress information using the Sunlight Congress API.
The difference being, in this request you will create a PHP script to return a JSON formatted data stream to the front-end. The client parses the JSON data and renders it in a nicer-looking, responsive UI (using Bootstrap).
A user first opens a page as shown below in Figure 1. The page includes a navigation bar at the left and the legislators’ information table at the right.
Once the user opens this page, all of the legislators’ information data is loaded using the AJAX component in JQuery. The AJAX-JQuery code calls your PHP script. The webpage must then use JavaScript to extract data from the JSON response and display the results on the same webpage. Description of how to display the results is given in the Hints section.
Page Header
At the top of the webpage, there is a page header which contains a stack icon at left and an image link in the center.
Navigation Bar
The navigation bar should contain 4 items (Legislators, Bills, Committees and Favorites), each item starts with an icon, followed by the text.
When the user clicks on an item in this navigation bar, the corresponding content should be loaded. For example, when the user clicks on Legislators, the legislators’ information table should be loaded to the content part.
FAQ’s
Q1. Which server should I use, where would server be hosted?
You can use either host it in Google App Engine or Amazon Web Services. While grading we just need to see the data.
Q2. Can I use any other way to store data?
You are allowed only to use browsers local storage. No other way of storing data like cookies, session storage is allowed.
Q3. How long should the local storage be persistent?
The local storage data should be persistent until the browser is closed. Even if the page is refreshed, the local storage data should not be deleted.
Q4. Is it required to use Bootstrap Carousel?
Yes. It is mandatory to use bootstrap carousel.
Q5. Facing issues with Cross Origin Request?
There are several ways to avoid cross origin issues. You can use CORS. If you like to use $.ajax() you can use datatype: jsonp with callback function appended with the URL.Q6. If there is a scroll issue in iPhone or iPad? Use the following style to the parent or body tag -webkit-overflow-scrolling: touch;