Task: The purpose of this assignment is to illustrate the use of PHP as a server side programming language that processes form submission data as well as the XMLHttpRequest object available via Javascript that allows asynchronous requests.
Problem Statement: You will have to write a webpage that captures address information via a form element that when submitted, displays the submitted data in JSON format without a page refresh (please see the wireframe below). The data submitted will be sent via the XMLHttpRequest object to a PHP script that when the called, returns and updates the lower portion of your webpage with your submitted form elements in a JSON formatted string.
Functionality: The form should validate any null (blank) entries except for Address Line 2 and not allow submission of the form data until all entries have been filled in (a simple JavaScript alert works for this to tell the end user that they left something out). Once all required entries are in place, your Javascript code needs to use the XMLHttpRequest object to send the data to your PHP file (an example will be provided to make sure your environment has been set up correctly and that you will need to modify). The PHP file should then echo the data back in JSON format which is then displayed on the lower portion of your webpage.
Wireframe:
Grading Criteria:
1. Your submitted HTML and CSS files pass their respective HTML and CSS validator checks - 10 points.
2. Your Javascript code which validates the form entries – 25 points.
3. Your Javascript code which uses the XMLHttpRequest to submitted the form data to the PHP script – 10 points
4. The modified PHP script that echos back the form data in JSON format– 20 points.
5. Your Javascript code is in a separate file – 5 points.
6. Correct submission format – 5 points.
Submission Instructions:
Your submission should be packaged in a tarball or zip file. When opened, it must create a directory titled ‘<UMN internet ID’ containing all of your files. UMN internet id should be your x.500 id. You will lose AT LEAST 5 points if you do not do this correctly. Include all the files we require to run your Web Pages in your the following files in your submission including pictures and external JavaScript files. Your submission should include at least:
• The HTML file containing your code. • A CSS stylesheet containing your code • A JavaScript file containing your code • Your modified PHP file to create the JSON response • A README file: the file should include your student ID, name, and x500 ID, and anything else you want
