Lab Exercises: HTML, PHP, CSS and JavaScript
The aim of these exercises is for you to build some simple web pages and to make sure you know how to use our systems for web development. The following tasks should be done in a plain text editor and saved as .html, .php, .css, or .js files where appropriate. You should then copy these files to DEVWEB. If you use Linux or Unix, go to the DEVWEB directory then to the 2015 directory (if you do not have a 2015 directory you will have to create one). If you put a file called ex.html in that directory you can view it in your web browser from any internet connected computer.
If you use Windows on any of the Departmental machines you will find the DEVWEB folder mapped to your Q: drive.
These exercises are worth up to 10% of the overall mark for CS 952 Database and Web Systems Development.
Submission
Please note that some of the later questions ask you to build on your solutions to earlier questions. You should therefore make sure that you save your solution to each question in separate files and that you do not overwrite your earlier solutions. For example, the solution file for question one could be named q1.html, the solution files for question 2 could be named q2.html (this will be a modified version of q1.html) and q2.php, the solution files for question 3 could be named q3.html (this will be a modified version of q1.html or q2.html) and q3.php (this will be a modified version of q2.php). The files that you create for each question should be placed in a directory or folder which you should zip and upload via Myplace.
This is an individual exercise: any copying of code (except from the lecture notes or the W3Schools website) may result in disciplinary measures. No late submissions will be accepted without medical certification, this should be provided at the earliest opportunity.
References
http://www.w3schools.com/ has online tutorials for HTML, CSS, PHP and JavaScript. The tutorial on PHP includes sections on form handling and validation as well as MySQL. The tutorial on JavaScript also includes sections on form validation.
Q1 HTML Simple form example
Using the following script showallparameters.php as your server action (and using the POST method), code the following form using HTML forms and check the correct data is sent to the server:
The job categories are “Marketing”, “Human Resources” and “Technical Support”. Don’t worry about the right alignment of the textual labels, but after you have a simple form working you should embed it in a table so that the form entry elements are nicely aligned. Also, if you wish, add some JavaScript error correction to check that something is entered in Name, Telephone, E-mail, Gender and Days Available (this is tricky).
You may wish to use http://validator.w3.org/ with advanced options to make sure that your file conforms with W3 open standards.
Q2: PHP
Write a decent handler for the form in Q1 which shows the data nicely formatted back to the user.
Add code to this PHP script to send a fixed email to you whenever the form is submitted. See http://uk3.php.net/function.mail for mail manual and Google for examples.
Change this code so that the email contains the same information echoed back to the user.
Q3: MySQL
Design a single table database to store the values from the form in Q1.
Create this database in phpMyAdmin on devweb2015 then update your PHP from Q2 to save into the database rather than emailing you.
Test your submissions using your form and phpMyAdmin to view the submissions.
Q4: PHP Error Checking
Add code to the PHP in Q1..3 to check:
- The name is completed
- The telephone number is complete
- The e-mail is complete (you could try using regular expressions)
- One of Male or Female is selected
- At least one day is selected [tricky]
- Add PHP so that if the name field is all capitals, it is changed to Title Case before storing.
Q5: CSS
Write HTML for the left-hand image on the last page.
Add CSS styling to make the page look like the right-hand image with minimal changes to the HTML (you only need add class and id statements) (NB: the band at top bottom is dark blue, rest of page has light blue background)
Create a CSS box in the middle of the page with maximum width 700 pixels and a nice water like image outside this box.
Add a horizontal navigation menu at the top of the page with sections for “accommodation”, “local information”, and “weather”.
Q6: Extensions
Recode the checks in Q4 in JavaScript. [Why would you do this?]
- Add two date fields to your form from Q1 for “Application Date” and “Job Start Date” then
- Add JavaScript to check the fields are date formatted
- Add JavaScript to check that the job start date is after the application date
- Add JavaScript to copy the value of the application date to the start date if it changes, and the user hasn’t yet entered a start date
If you wish you may find a public domain Calendar function in JavaScript and include this in your code to show a little calendar for the start date.
Add an administrator interface for your database in Q3 that allows the user to view all submissions and delete rows – use phpMyAdmin to create the SQL for deletion and then copy that into PHP.
Finally add a new script (PHP page) that shows a specific row of the table nicely formatted for printing as a job application and link this into the table view (i.e. have a “print me” button link).