The client is happy with your work and would now like you to continue developing the
programming aspects of the website using javascript. client side and PHP server side.
You will need to copy all existing a2 web page files. over to your a3 directory and change the
file extensions from .html to .php.
In addition to the existing modified pages, the following pages must be created:
booking.php - the page that follows on from accomodation.php and allows the
customer to review their booking, enter their personal details and complete their
order.
receipt.php - a receipt page that acts as a booking confirmation page and should be
styled to look as though it is to be printed on A4 letterhead and not styled as another
web page.
tools.php - a script. that is included in all PHP files that contain PHP functions,
modules, variables etc.
The following spreadsheets must be placed inside your a3 folder, not in a subdirectory, and
named exactly as below:
mailing.txt - a tab delimited spreadsheet for those wishing to subscribe.
bookings.txt - a tab delimited spreadsheet for bookings made.
Data must be appended to the spreadsheets (ie use the a mode when writing to these files).
To get you started, make a copy of these empty spreadsheets that have the heading row
correctly set up. Both are available from the assignments directory in WP Public.
mailing.txt bookings.txt
Set file permissions of each spreadsheet file in coreteaching to 606 (PHP requires read and
write access).
Conversion, Modules and SESSION
All webpages must be converted to .php and reusable portions of code common to all pages
(ie modules) must be written using functions that print strings created with the heredoc
notation.
The "current link" in the nav area (ie an area that can be modulised) can be styled using PHP.
Please look at the instructions here for more details:
https://titan.csit.rmit.edu.au/~e54061/secure/current-link.php.
The SESSION object must be available on every page, look up the session_start() function
for more details.
A debug module must be included at the bottom of every page that outputs the contents of
$_POST and $_SESSION in a details area, so that students and tutors can look at the inner
workings of the website. This will assist with debugging, assistance and eventually marking
later on.
The code below will get you started, make sure that you style. the elements inside debug so
that it is readable:
=Debug Show/Hide
$_SESSION contains:
$_POST contains:
Put the above functions and code inside tools.php so that all pages have access to the code.
You will also need this style. in your stylesheet to stop it from appearing on a printing page
(eg receipt.php).
@media print {
aside#debug {
display: none;
}
}
Contact Page Functionality
The contact page fields must be checked, styled and have error messages placed near the field
using a combination of javascript, HTML5 patterns and CSS pseudo states. The requirements
for the field contents are as follows:
Email input field needs to be type=email
Name can only contain alphabetic characters along with the space ' - . punctuation
characters.
Phone number must be an Australian mobile (see tutorial sheet for a regex solution).
A new checkbox must be created called rememberme. When selected, the user details must
be inserted into localStorage and when deselected, these details (and only these details) must
be removed from localStorage.
When a customer returns to the page, if details exist in localStorage, the details must be
recalled and inserted into their respective fields in the form. The rememberme checkbox
must be pre-selected and the mailing checkbox must also be set to the same state (checked or
unchecked) as it was before.
When a customer submits the form, the same validation checks must be made serverside to
make sure any users with javascript. disabled or any dishonest users (eg hackers) cannot insert
faulty data into the server's data store (ie the spreadsheet).
If there are any issues with the data, the customer is returned to the contact page with
appropriate error messages placed near the fields requiring attention. If there are no problems
and the customer wishes to be on the mailing list, they are to be appended to the tab delimited
spreadsheet mailing.txt.
All customers should be redirected back to index.php on their successful completion of the
contact page process.
Optional Task: Success Message
You may wish to display a "success" message in index.php to alert the user that their
message has been received. This can be done by setting a variable in the SESSION near the
end of the contact page data processing:
Contact page processing code example:
// Your contact page data processing code here
// Set the message status
$_SESSION['cp-message'] = "Your message has been received.";
if ($wantsMail == true)
$_SESSION['cp-message'] .= " You are now on our mailing list.";
$_SESSION['cp-message'] .= "";
Home page display code example:
if (isset($_SESSION['cp-message'])) {
echo $_SESSION['cp-message'];
unset($_SESSION['cp-message']); // Reset the message status
}
Accommodation Page Functionality
In assignment 2 you were asked to wrap each site information inside a paired
element and create a hidden aid field in the form. In assignment 3, you are asked to make this
interactive and create "radio button" like functionality for the selection of the aid field
according to this sequence of rules:
Initially, no site buttons are selected and the aid field value is blank.
Clicking a site button will set the hidden field aid's value to the associated site code.
We can now refer to this site button as being the selected site button.
Re-clicking the selected site button will unset the site button and the hidden aid field
value (ie set the value to "").
We can now refer to this site button as being an unselected site button.
If a site button is selected and a customer clicks on a different unselected site button,
the clicked site button will become the selected site button and the previous site
button will become a deselected site button.
A selected site button must be styled in such a way that it is obvious that it is selected
and different from the style. of an unselected site button.
Final check: If a customer can select more than one site or cannot deselect a site, you still
have work to do!
Once this functionality is complete, a customer can select a number of adults (between 1 and
10) and children (between 0 and 10) and the price must be calculated and displayed to 2
decimal places. Note that in many cases, a number of adults and children are included in the
price initially, and that there is no discount for just one adult making a booking.
Once a booking is made, the form. must submit to a processing script. that can be stand alone
or part of booking.php.
Booking Page Functionality
The booking made in accomodation.php should be added to the SESSION, in a structured
"object" like format. A suitable example is as follows:
$_SESSION['booking'] => array (
aid => the site code,
date => the date of the booking,
days => number of days,
adults => number of adults,
children => number of children,
customer => array (
name => customer name,
email => customer email,
phone => customer mobile,
address => customer address (now an optional task)
)
)
This page should show all of the booking information and have it laid out in an organised
manner, with attention to alignment and proximity.
The price should be recalculated server side and displayed to 2 decimal places. Make sure that
you do not rely on the price calculated using javascript. in accomodation.php.
As part of this page, the same fields found in contact.php (name, email, phone and address)
should be present. They should load any "remember me" data from localStorage as per the
contact page, but the two check boxes rememberme and mailing are not to be placed in this
page.
All client side and server side validation checks should be performed in the same as done in
contact.php, all client side and server side errors should be shown in the same way as done in
contact.php.
If the customer wishes, they can delete their booking and be returned to accomodation.php
and rebook.
If the customer is happy with their booking, they can complete the purchase and be taken to
receipt.php. As part of the data processing in this step, the customer's booking is appended to
the tab delimited spreadsheet bookings.txt.
Receipt Page
The page should have a letterhead and contact information of the business and be formatted to
look like an A4 page. To check this, please press print and have a look at the page preview.
This page should display all of the customer details and booking details and all information
should be neatly aligned and placed with a good sense of proximity.
Please Note:
This page should be styled in a way that is very different to all of the pages in your website.
This is the final page in the purchasing process and is where the assignment work ends.