Assignment 3: PHP
Objectives:
Practice developing code in PHP
Practice form validation using JavaScript and PHP
Submission Instruction
Put all resources used by your assignment in a folder named a3_XXXX#### where XXXX#### is your Laurier's user_name (e.g., a3_mrudafshani). Zip the folder. Submit the a3_XXXX####.zip file through MyLearningSpace under the appropriate dropbox (named Assignment 3). Your a3_XXXX### folder should have the same structure following structure:
the js folder must include assign3.js. The css folder must include assign3.css and assign1.css.
Include a readme.txt file in the zip file. The readme file should have the following format. Replace the urls with the URLs to your assignment.
Name: ID:
Email:
Assignment_ID: CP476A2
Homework statement: I claim that the enclosed submission is my individual work.
URL1:
https://hopper.wlu.ca/~mrudafshani/Assignment3/pageTwo.html
URL2:
https://hopper.wlu.ca/~mrudafshani/Assignment3/register.php
In addition to uploading to submitting to the dropbox, make your pages available on hopper. When you are uploading your files to MLS, write the URLs to your
pages in the comment section of the form that is used for submitting your assignment.
Non-Functional Requirements
You must create one JavaScript file (assign3.js) as well as the CSS file (assign3.css) explained below.
Put all the CSS styling you are adding for this assignment to assign3.css file. You don’t need to use assign2.css, but you still need to have assign1.css.
For question 2, you may need to make some changes to the form in pageTwo.html file
in order to make it work dynamically with changes due to php.
Functional Requirements:
Question 1. Continue working on the pgeTwo.html file developed in previous assignments. In Assignment 2, when the user clicks “Sign me up!” button, the input elements of the form that are not filled or selected will be highlighted with a "red" color. In this assignment, you are going to validate the value entered by the user, as well. In assignment 2, we only checked the elements in the form to see if they are blank or not. In this assignment, we are going to extend our validation to check the followings for different input fields
Only letters and white-space allowed for first name
The email must have a valid format
The two passwords must be identical and each must be between 6 and 18 characters long
The agreement to terms and conditions must be checked.
The phone number must be in correct format (3 digits - 3 digits - 4 digits)
The event handler registered for the submit event must use regular expression to test the validity of input. It’s enough to check the validity for the input elements mentioned above ( first name, last name, email, two passwords, checkbox for agreeing to the terms and phone number). Note: you still need to notify the user if the fields are blank. The difference is that you can limit this requirement to the input elements mentioned above.
If there is an error you should list the errors at the end of the page (the red box before the submit button) and suggest user how to fix them.
Question 2. Add the same validation checks as question 1, but this time in PHP. Copy pageTwo.html to a file named register.php. If there is any validation error, they should be listed in a red box similar to the javascript version. It is show in the following image for this question. If there is no error, the user is presented with a thank-you message and a list of all the information entered by the user as shown below.
Hints:
Make sure the form method is set to post
Make the action attribute of the form to refer to the same file (register.php). You can either set the value of the action attribute to be equal to the name of the php or you can set it as:
action="<?php echo $_SERVER["PHP_SELF"]; ?>"
In this way, you don’t have to change it if the name of file changes
An example of php validation that is helpful is available at
Remember that to open a local PHP page, you must have the browser request the page from a server. Recommended server setup is XAMPP, and if you are using that the php file must be placed in the htdocs folder of the server. The request in the browser will be localhost/some-path/register.php
Hints:
You may need to add/remove a class to an element in JavaScript. To do so you can use classList property and its methods. An example was provided in the class. Here is the link to the classList property and its methods:
To insert or remove a DOM node or property use the methods and properties available for a DOM Node such as parentNode, appendChild(), etc. Examples were provided in class.