Web Application Assignment

Due: Sunday 11:59pm 7th of February 2021 – Assessment Weight: 30%


Note:

  Include comments for your student ID, Name, and Practical Class Time at the top of each source file created.

  All instructions given in this document must be followed in order to be eligible for full marks for the Web Application Assignment

  This assignment is not a group assignment; collusion, plagiarism, cheating of any kind is not acceptable. Submitting your work to your TWA site signifies that the work uploaded is yours. If you cannot honestly certify that the work is your own then do not upload it to your TWA site. Breaches of the Misconduct Rule will be dealt with according to the university policy (see the learning guide for more information)

  All files must be uploaded to your TWA web site before due date.

  After files are uploaded to your TWA site, all work must be submitted via the submission script.

Failure to upload to your TWA site and use the submission script may result in a fail non-submit or a significant loss of marks.

  Ensure all HTML written is valid. Use http://validator.w3.org to confirm before submission


Assignment Overview:

For this assignment, you are going to be build a basic airline booking system. To do this, you are given a list of files that you will need to create. These will be a mix of HTML, CSS, Javascript and PHP files. Within some of your PHP files, you will be required to connect to and execute SQL statements on a database. This database will be given to you and will be associated only with your TWA site.

Every concept or skill within this assignment has been demonstrated in lecture or has been part of a practical class exercise. You will be combining all these concepts and skills to build your basic eCommerce site.


Design and Styling

Within lectures and your practical classes you have been given the styling and design that needs to be met either via CSS or via a figure. For this major web assignment though, you must design and style your own site. You can adopt what has been given in you Practical Class exercises or you can start from scratch. Either way, you must design and style your site so it is professional looking. Your chosen design and styling will be assessed.


Javascript and PHP Validation

All forms or where a user can provide input needs to be validated with both Javascript and PHP. HTML validation will not be accepted as a valid form of validation.


Web Application Assignment Database

You have been provided with your own copy of the database called cooper_flights on your TWA site. To access this database, you have to use a username and password.

The following is a generic representation of the connection information to be used when connecting to your eshop database (you do this with PHP code):

Database Name: cooper_flights###

Username: twa###

Password: twa###XX

Server: localhost

Where ### is your twa site number, and XX refers to the first two characters of your TWA site password.

For example, if your TWA site is twa999, and your password is abcd7890, then the following would be your connection information:

Database Name: cooper_flights

Username: twa999

Password: twa999ab

Server: localhost

Using this information, you will use similar code to that below to connect to your database:

$connection = new mysqli('localhost', 'twa999', 'twa999ab', 'cooper_flights999');

if($connection->connect_error) {

// Echo out if it failed to connect to the database

echo $connection->connect_error;

}

Once connected to your database, you will have access to the cooper_flights database and all its data. Figure 1 presents the Entity Relationship Diagram and the schema of your database.

If wanting, within the assignment files the Schema has also been provided – cooper_flights.sql


The cooper_flights Database Data Dictionary:

 Customer Table
 Column
 Description
 Type
 Yes
 id
 This is an auto incrementing number to uniquely identify a table row. You do not insert this number into the database it is determined automatically
 INT
 Yes
 email
 This is the email address of the user. It will be used as their login
 VARCHAR(100)
 Yes
 password
 This is an encrypted password. The encryption used is sha256.
 VARCHAR(255)
 Yes
 fname
 This is the first name of the user
 VARCHAR(45)
 Yes
 lname
 This is the last name of the user
 VARCHAR(45)
 Yes
 address
 This is the home street of the user, e.g. 4 Silly Street
 VARCHAR(100)
 Yes
 suburb
 This is the home suburb of the user, e.g. Parramatta
 VARCHAR(75)
 Yes
 state
 This is the home state of the user, e.g. NSW
 VARCHAR(3)
 Yes
 postcode
 This is the home post code of the user, e.g. 2000
 INT
 Yes
 phone
 This is a phone number
 varchar(20)
 Yes
 admin
 This is a binary value to state if the user is an admin or not. 0 being general user, 1 being admin
 TINYINT
 No (Default 0)

 Booking Table
 Column
 Description
 Type
 Required
 id
 This is an auto incrementing number to uniquely identify a table row. You do not insert this number into the database it is determined automatically
 INT
 Yes
 flight_id
 This is a foreign key to the flight table for the flight booked
 INT
 Yes
 customer_id
 This is a foreign key to the customer who made the booking.
 INT
 Yes
 checkedin
 This is a binary value to state if the user has checked in or not. 0 if they’re not checked in, 1 if they are
 TINYINT
 No (Default 0)
 checkin_datetime
 This is the date and time the customer checked in for their booking
 DATETIME
 No
 booking_datetime
 This is the date time the customer made the booking
 DATETIME
 Yes
 baggage

 The weight of the checked in baggage

 TINYINT
 No (Default 0)


 Flight Table
 Column
 Description
 Type
 Required
 id
 This is an auto incrementing number to uniquely identify a table row. You do not insert this number into the database it is determined automatically
 Integer
 Yes
 flight_number
 This is the number representing the flight
 VARCHAR(15)
 Yes
 from_airport
 This is the airport the flight departs from
 VARCHAR(100)
 Yes
 to_airport
 This is the airport the flight arrives at
 VARCHAR(100)
 Yes
 status
 This is the status of the flight. There are four stages: staged, open, departed, and cancelled
 VARCHAR(10)
 Yes
 flight_datetime
 This is the date and time the flight departs
 DATETIME
 Yes
 plane
 This is a foreign key representing the plane being used for the flight
 INT
 Yes
 distance_km
 This is the flight distance in kilometres
 INT
 Yes


 Plane Table
 Column
 Description
 Type
 Required
 id
 This is an auto incrementing number to uniquely identify a table row. You do not insert this number into the database it is determined automatically
 INT
 Yes
 name
 The name of the plane
 VARCHAR(45)
 Yes
 seating
 The number of seats on the plane
 INT
 Yes
 last_serviced
 The date the plane was last serviced
 DATE
 Yes
 max_baggage_weight
 This max weight the plane is able to carry for passenger baggage
 INT
 Yes


Use of Javascript and CSS Libraries

IMPORTANT: You are not to use any libraries for your solution. Using a library, jQuery, Bootstrap etc will lead to a significant loss of marks.


Although there many CSS and JS libraries available for free on the web, you are not to use them for this assignment. You are to use your own CSS styles and javascript functions to create your page design and your client side functionality.


Required Functionality and Files

Hint: Write your HTML, CSS first before you do any Javascript or PHP programming. This way you can get your pages designed the way you want and then add the programming logic. This approach will make development considerably easier. Plus, if you fail to implement the Javascript or PHP you can still get marks for the HTML and CSS used to construct the page.


Navigation

The site must have a main navigation bar. Placement of this navigation bar is up to you. Every page should have thi navigation bar. Pages which fail to have a navigation bar will lose marks. The navigation bar should display the followin links:

●  Home – links to index.php

  My Profile – links to profile.php

○  This should only be present if the user is logged in

●  New Booking – links to newbooking.php

  This should only be present if the user is logged in

  Bookings – links to bookings.php

  This should only be present if the user is logged in

  Register – links to register.php

  If the user is logged in this link should not be shown

  Login – links to login.php

○  If the user is logged in this link should change to ‘Logout’ (logout.php)

  Flights – links to flights.php

  This is only available to logged in users who are admin

⚠ Warning: Be aware of what pages require the user to be logged in. If an anonymous user tries to access these pages they are to be redirected to login.php


Style and Design – styles.css

The styles.css file is your master CSS stylesheet for your site. Although you are allowed embedded and inline styles, a focus on external styles should be maintained. For maximum marks, your style and design should be responsive. This means it can be viewed both on a mobile screen and a desktop. Use the device preview available in Google Chrome under Developer Tools.


Javascript – actions.js

This file is to hold all your javascript required for your pages; all your form validations or actions javascript
will perform.


Home page index.php

Hint: The listing of flights on this page can be reused across many pages with slight changes. It is advised to solve this first before attempting other pages so you can reuse your code.

This file is the home page to your site. It is to list all flights for the next month. In this listing each flight should present:

  Flight Number

  Depart date and time

  Status

○  Status has an icon associated with each status.

  Refer to the image names: staged.svg, open.svg, departed.svg, and cancelled.svg

  Departure Airport

  Destination Airport

  The Plane

  Flight Distance

Be mindful when presenting these listings as your site needs to be mobile responsive. This means a table may not be the best for presenting this information. Figure 2 presents a sample listing of flights for inspiration. You are not required to create figure 2, it is only presented for inspiration.



My Profile – profile.php

This page presents the currently logged in users’ details within a form (except their user id, if they are admin and their password). If the details have changed the user can update details and click submit to perform a postback to save the modified details to the database.

This page requires the following validations before the postback can occur:

  Basic form validation so all fields are required

  The email address is a valid email address form

●  Post code must be 4 digits

  State must be 3 characters or less (Hint: use a drop down)


New Booking Page – newbooking.php

This page allows the user to select a flight to book. You can present the flights as a list (from home page), with an additional link to book. However, the link should only be present if there is room to book a seat. This is because each plane has a seating capacity. To ensure a plane is not over booked you will need to compare the number of bookings for each flight and compare it against the number of seats on a plane. If the seating capacity has been reached you are to present ‘Full’ and remove the book flight link, otherwise you can present the number of seats left and a link to open a book flight form. This form can be on the same page or a separate page. For instance, newbooking-form.php.

The booking form requires the following fields:

●  The flight number prepopulated from the previous selection from flights

  A read only amount of a standard fee - $455.00

  Credit card number

  Credit card name

  Credit card expiry

Although the form has credit card fields they are not stored and are only for presentation. However, before submission to complete the booking, the fields are required.

Once submitted, a booking must be inserted into the database with the booking date and time being the date and time the form was submitted. The flight_id and the customer_id must also be inserted based on the flight selected and the currently logged in user.


Bookings Page – bookings.php

This page must present all the bookings the customer has made. Each booking should have the following:

  Flight Number

  Flight Status

  Destination Airport

  Date booked

●  Flight departure date and time

●  Checked in status.

  This should display the number of days before the customer can check in. However, if the flight is within 48 hours a link allowing the customer to check in (checkin.php) needs to be presented. Once checked in a checked in notice should be displayed.


Checkin – checkin.php

⚠ Warning: Be aware of what pages require the user to be logged in. If an anonymous user tries to access this page they are to be redirected to login.php. Also, they cannot reach this page unless the flight selected is to depart within 48 hours.


Based on the flight selected on the bookings page that is eligible for checkin this page is to present a form with:

  Flight Number

○  Presented as text not an input element

  Allowable baggage weight

  Presented as text not an input element. The allowable weight is determined by the max baggage weight of the plane for the flight divided by the planes seating. For instance, the Embraer Phenom 100 has a seating of 4, and a max baggage of 100kg. 100/4 = 25kg allowable baggage weight per customer.

  The customers baggage weight

  This weight is checked against the allowable baggage weight otherwise a notice is presented and the customer cannot checkin.

Once the form is submitted the booking for this flight is updated to checked-in, and the date and time the form was submitted is the date and time the customer checked in. Once updated the customer is then redirected to the bookings page again.


User Registration – register.php

This is the user registration page.

To process this form, you are to use a postback to submit the data back to register.php. Once the form is valid, a new user is saved to the database. They are then automatically logged in with a session where they are then redirected to the home page (index.php).

Be aware, the id field is not to be entered in by the user. The database automatically populates this field.

Although it won’t be the case for production environments, the admin field is required to be present in your registration form. This will allow you to either create a customer or an admin user that will also be able to administrate flights.

When processing the password field, it must be hashed (encrypted). The encryption algorithm to be used is sha256. The following code outlines how to use the hash function to perform this encryption algorithm:

$password = "234jkldd";

$hashedPassword = hash('sha256', $password);

// $hashedPassword now contains:

// a5d95f8ebc8d8d592cfe772d33d8833909f526233d9ae12c32ada2bbea6a0bba

This form needs to be validated before submitting. The required validations are:

  All fields are required

●  First name and last name must start with a capital letter

  The email address must be a valid email address

  Post code must be 4 digits only

  State must be 3 alphabet characters or less

  Password must be 8 characters long and must include at least 1 number [0-9]


User Login – login.php

This page will hold a login form containing a username (the user’s email) and a password field. Both ‘customer’ and ‘admin’ users can login through this login form. Remember, when checking if a user’s password is valid you will have to encrypt it before you can check if the password is correct. This encryption is the same process found in register.php.

A postback must be used to login the user. If all credentials are valid, a user session is created and then the user is redirected to the home page (index.php). If the credential are invalid, the user is presented with an error informing them the username and password entered is incorrect. Remember to store the admin field in your session, as this will be used throughout the site and in the navigation bar to determine if an ‘admin’ is shown the Flights link (flights.php).


Logoff – logoff.php

This page is not a presentation page. When a user navigates to this page their user session is destroyed. Once destroyed, the user is then redirected to the home page (index.php)


Flights – flights.php

⚠ Warning: Be aware of what pages require the user to be logged in. This page is only for those users who have admin status. All other users are to be redirected to login.php.


This page is to list all flights for the current month. For each flight there should be an option allowing admin to cancel a flight that has not departed or is open for check in yet.


Submission Instructions

All files are required to be on your TWA site under the /assignment1 directory and the submission script must be run before the submission due date.

If you cannot honestly certify that the work is your own then do not submit. Breaches of the Misconduct Rule will be dealt with according to the university policy (see the learning guide for more information).

################################## IMPORTANT #########################################

You must use the submission script to submit your work. Failure to do this could result in a Fail Non-Submit or a significant loss of marks.

https://twasum.cdms.westernsydney.edu.au/submit/submit.asp

Once you have submitted you will receive a submission receipt. Keep a copy of this as proof of submission.

########################################################################## ############


Submission Checklist

As a guide, here is the list of files needed to be on your TWA site and vUWS before the submission due date are:

  styles.css

  actions.js

  index.php

  profile.php

  newbooking.php

  bookings.php

  checkin.php

  register.php

  login.php

  logoff.php

  flights.php

  staged.svg

  open.svg

  departed.svg

  cancelled.svg