JavaScript+HW

=Homework #5= =JavaScript Homework=

The objective of this homework is to provide an opportunity to become familiar with the JavaScript scripting language and JSON to communicate with a RESTful web service.
 * Objective**

If you’re not comfortable using JavaScript, jQuery, or JSON, please refer to the following:
 * JavaScript []
 * HTML DOM []
 * jQuery []
 * JSON []

Your assignment is to implement an address book web application for managing contacts. This assignment consists of two components.
 * Use the provided RESTful web service (described below) to model, store, and access contacts with JavaScript or a JavaScript library such as jQuery.
 * Design and implement an interface for managing contacts that supports creating, viewing, updating, and deleting contacts.

Both of these components have requirements that must be satisfied.

Create a web application consisting of one or more pages. On these pages, create interfaces for viewing, creating, updating, and deleting contacts. Contact information must include first name, last name, email address, phone number, postal address, and notes about the contact. Interfaces should require a minimum of first name, last name, and email address before allowing contacts to be created (i.e., before sending an HTTP request to the server to create a contact).
 * Functional Requirements**

Design an interface that presents a clear conceptual model of the system. The interface should be predictable. Use consistent terminology in the interface. Provide feedback about invalid input, required input that is missing, and provide feedback about how to correct the invalid or missing input.
 * Usability Requirements**

Consider Shneiderman’s eight rules when designing your interface: []


 * Deliverables**
 * Choose a unique application identifier (app_id ) and place it in a row in the table below, along with your name, alphabetized by last name. Make sure that your identifier is not being used by another student. Do this before starting development of your application. For example, you could use your UMD directory ID. Or use a random number or other unguessable string which will provide a bit of security by obscurity.
 * Create a web application as described above, hosted on a server of your choice (e.g., TerpConnect at []).
 * Put a link to your web application in the table below, next to your name and application identifier.


 * Example of Functional Requirements**

One of the technical challenges of this assignment is to use the provided RESTful web service (described below). This involves creating HTTP requests, encoding, and parsing JSON using JavaScript or a JavaScript library such as jQuery. Example implementations of these requirements are provided in the following web application. You may use these as templates for your own implementations, but keep in mind that you will need to add additional fields to store each contact's postal address and notes about the contact. Please keep in mind that this example is intended to provide examples of functional requirements only—you will need to additionally consider usability requirements and user interface design guidelines.
 * Web application []
 * HTML file []
 * JavaScript file []


 * **Last Name** || **First Name** || **Application ID (app_id )** || **Website URL** ||
 * Abu-Ghaida || Ghassan || ghassan || [|Ghassan's] ||
 * Anderson || Felix || felix || Contacts ||
 * Asare || Patrick || pasare || [|My Contacts] ||
 * Azadi || Payam || azadi || Azadi Contacts ||
 * Aziz || Aisya || aisya || [|My Contacts] ||
 * Banaszak || Steven || sbanasza || [|SGB Contacts] ||
 * Boldyga || Zach || zboldyga || [|Contact Manager] ||
 * Britto || Brandon || bbritto1 || [|Submission] ||
 * Carmel || Chris || ccarmel || [|Contacts] ||
 * Choi || Daniel || dchoi || Daniel's ||
 * Ficco || Lauren || lmficco || [|Contacts] ||
 * Gorski || Jennifer || jgorski || Contacts ||
 * Kamili || Mir || mkamili || Contacts ||
 * King || Ian || iking || [|Contacts Manager] ||
 * Liu || Ailun || aliu1225 || [|Address Book] ||
 * Lovett || Taylor || tlovett1 || [|Contacts] ||
 * Ma || Yifu || myf || [|Submission] ||
 * Majedi || Amir || amajedi || Amir's ||
 * Midgley-Biggs || Michael || mmidgley || [|Contacts] ||
 * Monga || Rahul || rmonga || [|Submission] ||
 * Monkainfon || Mustapha || mmonk || [|Contats] ||
 * Norris || Eric || desu || Contacts ||
 * Orlove || Matt || matt || [|Contacts] ||
 * Palma || Andrew || palma ||  ||
 * Paulo || Myco || mpaulo || [|Myco] ||
 * Piyasirisilp || Siwatm || spiyasir || [|Siwatm's] ||
 * Soleimani || Aida || asoleim1 || [| Contacts] ||
 * Sivaraman || Janahan || theJanahanMan || [|Janahan's Contacts] ||
 * Sonthichartkul || Dan || dsonthic || [|JavaScript HW] ||
 * Stewart || Mark || mstewar3 || [|My Contacts] ||
 * Tran || Tammy || tnt || tnt Contacts ||
 * Van || Kevin || kevinvan || Contacts ||
 * Litvak || Aleksandr || alitvak || [|Contacts] ||
 * Woo || Kevin || spongebob || [|Contacts] ||
 * Yu || William || wzyu || [|Contacts] ||


 * RESTful Web Service Documentation**

The RESTful web service supports reading and writing pairs to tuples. Pairs consist of a key and a value. Your web applications will use this web service to read and write contacts into tuples and pairs are associated with the application. When reading and writing tuples and pairs, you must specify the unique application identifier that you have chosen.

Tuples and pairs are sent and received using HTTP requests in the following JSON format:

{ > "app_id": "", > "tuples": [ >> { >>> "tuple_id": "", >>> "pairs": [ >>>> { "key": " ", "value": " " }, >>>> { "key": " ", "value": " " } >>> ] >> } > ] }

Any number of pairs can be added to the pairs array, separated by a comma. In the above example, two pairs are in the pairs array. All pairs in the array are associated with the specified, which uniquely identifies a tuple.

Tuples can be used to model any object that can be represented by a list of pairs. In this homework, you will use the tuples to model contacts in an address book web application. For example, each tuple can be used to represent one contact, and each of a tuple’s pairs can be used to model properties of contacts, such as first name, last name, and email address.

For example, the corresponding JSON for this representation, for an application with an equal to “mgubbels” could be as follows:

{ > "app_id": "mgubbels", > "tuples": [ >> { >>> "tuple_id": "1", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "John" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Lennon" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "john@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "2", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Paul" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "McCartney" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "paul@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "3", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "George" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Harrison" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "george@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "4", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Pete" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Best" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "pete@thebeatles.com" >>>> } >>> ] >> } > ] }


 * Creating a Tuple**

To create a new tuple, send an HTTP request using the POST method to

[]

with a JSON-encoded tuple in the body of the POST request. When creating a new tuple do not include a in the JSON sent in an HTTP request. A unique will be generated by the server and associated with each of the tuple’s pairs that have been submitted. The of an application must be specified. Any number of pairs can be specified when creating a tuple.

For example, to create a tuple to model a contact named Ringo Starr with an email address ringo@thebeatles.com, submit a HTTP POST request to the above address with the following body:

{ > "app_id": "mgubbels", > "tuples": [ >> { >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Ringo" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Starr" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "ringo@thebeatles.com" >>>> } >>> ] >> } > ] }

The server will create a tuple containing three pairs. The tuple models a contact and the pairs represent the first name, last name, and email address of the contact. After creating tuples, the server sends a response containing a JSON encoding of all tuples that were successfully stored, including the assigned. (Hint: This JSON can be parsed and used to add new contacts to a local representation of contacts.)

For example, a response to the request submitted in the previous example would be the following:

{ > "app_id": "mgubbels", > "tuples": [ >> { >>> "tuple_id": "5", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Ringo" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Starr" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "ringo@thebeatles.com" >>>> } >>> ] >> } > ] }

Note that this response contains the that has been assigned to the created tuple. The of a tuple must be specified to update or delete it.


 * Updating a Tuple**

Once a tuple has been created and stored (successfully), it can be modified. Updating a tuple is very similar to creating a tuple. The only difference between creating and updating a tuple is that when updating a tuple, the of the tuple to update must be specified in the JSON-encoded array of tuples. The indicates the tuple that will be updated. (Warning: If a is not specified, a new tuple will be created.)

Specifically, to update an existing tuple, send an HTTP request using the POST method to

[]

with a JSON encoded list of tuples, including their values in the body of the POST request.

The values can accessed in two ways; they can be accessed by (1) requesting all of the tuples associated with a particular, and (2) from the response data received after creating a tuple (discussed above).


 * Getting Tuples**

To get all tuples (encoded as JSON), send an HTTP request using the GET method to

[]

replacing //APP_ID// with your chosen.

For example, to get all tuples for the application with equal to mgubbels, submit a HTTP GET request to the following address:

[]

The server will send a response with a status code of 200 and a JSON encoding of all tuples with your chosen.

For example, a response to the request submitted above might be the following:

{ > "app_id": "mgubbels", > "tuples": [ >> { >>> "tuple_id": "1", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "John" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Lennon" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "john@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "2", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Paul" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "McCartney" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "paul@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "3", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "George" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Harrison" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "george@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "4", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Pete" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Best" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "pete@thebeatles.com" >>>> } >>> ] >> }, >> { >>> "tuple_id": "5", >>> "pairs": [ >>>> { >>>>> "key": "first_name", >>>>> "value": "Ringo" >>>> }, >>>> { >>>>> "key": "last_name", >>>>> "value": "Starr" >>>> }, >>>> { >>>>> "key": "email", >>>>> "value": "ringo@thebeatles.com" >>>> } >>> ] >> } > ] }


 * Deleting Tuples and Pairs**

To delete an existing tuple, send an HTTP request using the DELETE method to

[]

replacing //APP_ID// with your chosen and //TUPLE_ID// with the  of the tuple to delete.

For example, to delete the tuple with equal to 4 for the application with  equal to mgubbels, submit a HTTP DELETE request to the following address:

[]

The server will delete the tuple and all pairs in that tuple. The server will send a status code of 200 upon successful deletion.

Alternatively, specific pairs in a tuple can be deleted without deleting a tuple and all of its pairs. To delete an existing pair, submit a HTTP DELETE request to the following address:

[]

replacing //APP_ID// with your chosen, //TUPLE_ID// with the of the tuple containing the pair to delete, and //KEY_ID// with the.

To delete all tuples for an application send an HTTP request using the DELETE method to

[]

replacing //APP_ID// with your chosen of the tuples to delete.