Introduction
这是一个Lab作业代写，需要做5个Web页面。内容比较基础，不过涵盖了HTML, PHP, CSS, JavaScript以及MySQL的使用。
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).
