Technology For Web Apps "Tradiebook" Website

300582: TECHNOLOGIES FOR WEB APPLICATIONS TWA Major Project Assignment Due by 11:59pm on Friday 4th June 2021 Assessment Weight: 30% A. Requirements a) ALL instructions given in this document MUST be followed in order to be eligible for full marks for the Web Application Assignment. This document has six (6) pages. b) This assignment is NOT a group assignment; collusion, plagiarism, cheating of any kind is not acceptable. As part of your submission you MUST certify that all work submitted is your own. If you cannot honestly certify that the work is your own then do not submit the assignment. Breaches of the Misconduct Rule will be dealt with according to the university policy (see the learning guide for more information). c) All assignment submissions will be checked for academic misconduct by the use of the MOSS program from Stanford University. Details on MOSS can be obtained from the MOSS web site http://theory.stanford.edu/~aiken/moss/ d) Design the web pages with ease of navigation and operation, attractiveness and accessibility in mind. Images other than those provided in the assignment zip file (if any) may also be used in the assignment. e) All assignment source files are to be compressed into an archive and uploaded to the Major Project (30%) submission folder on vUWS prior to the due date and time. You may create subfolders within this folder if you wish. f) All styling and page layout must be achieved using CSS. The use of Bootstrap or other frameworks is not permitted. g) All client-side validation must be achieved using JavaScript. The use of JQuery or other client-side validation scripts is not permitted. For the problem definition described in section B you must a. include your authorship details at the top of each file in coded comments; b. reference all sources that you used for inspiration of your solution as per Section C of this document; c. ensure that your web application renders correctly in Chrome and runs correctly from the XAMPP 7.4.8 or 7.4.9 apache web server. B. Web Application Assignment Details B(i) - Background information and description Online tradie quote service has become quite essential during the COVID-19 lockdown. In this assignment you will create a web-based application for online tradie job request similar to HiPages named TradieBook. The TradieBook web application will allow • Residents to search for tradies by their names • Residents can log in the TradieBook • Logged-in residents can select a tradie and enter the details of the required service to create a service request • Logged-in residents can send a complete service request to a tradie • Logged-in residents can browse all the service requests they have made • Tradies can log in the TradieBook • Logged-in tradies can browse the details of the assigned service requests sent by residents This is a very simplified web application and leaves out aspects that would be required in a tradie job request. Read the Functional Requirements section (section B(ii) of this document) to determine what is specifically required for TradieBook. The MySQL database that supports the functionality of TradieBook is named TraBook. The TradBook database is described in section B(iii) of this document. You will need to design and create the PHP web pages for this assignment. B(ii) – Functional Requirements The TradieBook web application must a) be coded using HTML 5, CSS, JavaScript, and PHP as necessary. Note: all files described below must be PHP files to achieve the server-side functionality. b) provide easy-to-use navigation for the user as described in the following page descriptions. c) provide the following page content and functionality for each page as described. Search Page (search.php) Page purpose/description: This page is a search page for residents to find tradie services. The search page can be used by resident members only. Page content: The page will have the following content: 1. Navigation to the other pages of TradieBook as appropriate including a Log Out link (if the resident member is logged in) or a Log In link (if the resident member is not logged in). 2. Resident’s username (if the resident is logged in) 3. An HTML form (the search form) which contains • a text box to enter the tradie name for the search (mandatory field) • a text box to enter the post code of the resident (mandatory field) • a submit button As indicated above the search text boxes are mandatory. That is, a search may be performed only if a search keywords have been entered. 4. A ‘search results’ section that lists tradie names and their business suburbs. The returned tradie names can be partially matching the keywords from ‘tradie name’ text box. Page functionality: The Search page will 1. validate that a search keyword has been entered in the search form (using client-side JavaScript). Do not allow the form to submit unless both search keywords have been entered. Only 4-digit numbers are accepted in the ‘post code’ text box. 2. use postback for the search form, 3. sanitise the submitted keyword(s) to avoid possible sql injection then search the TraBook database for records that contain the keyword(s) entered in the search form. The search should check for matches with tradie names and post codes. The search may find zero, one or many matches depending upon the search term(s) entered. The output from the search depends on the number of matches found: a. One or more records found: generate a summary list of matching records with tradie names and their corresponding suburbs underneath the search form. The resident will be able to choose the match they want to view more detail about from this list (see point 4 below) by clicking on the match. The summary list should be displayed in groups showing: • the names of the tradies that have partially matched with the search keyword by tradie name • the suburbs of the tradie • the type of service provided by the tradie b. Zero records found: display an appropriate message underneath the search form instead of a list of results 4. enable the user to choose a tradie match from the search results. The names of the tradie in the search results list are to be a hypertext link. When clicked, the hypertext link loads the Tradie Details page (tradiedetails.php) which displays more specific details for the chosen match. Description of the Tradie Details page are given below. General Page Notes: The design of this page is open to your creativity, but it must appropriately display all required information in a clearly readable, well organised, and usable format. You need to use relevant PHP functions to prevent SQL injections and XSS. Tradie Details Page (tradiedetails.php) Page purpose/description: The purpose of this page is to display details of the chosen tradie to the resident. The page also allows a post request to be submitted and updated in the TradBook database for a new service request. Page content and functionality: The page will: 1. include navigation to the other pages of TradieBook as appropriate including a Log Out link (if the resident is logged in) or a Log In link (if the resident is not logged in). 2. display the resident username (if the resident is logged in) 3. display the name of the tradie, suburb 4. If the service request is made by a logged-in resident, use a postback form which contains • a selection list for 3 general tradie services: “plumber”, “concreter”, and “tiler” (mandatory and only single is allowed because tradies are licensed for their own particular trade). The values of these services come from the database so you need to write SQL query to retrieve the values no hard coded. • a date picker for the service date (mandatory) • a submit button The form data will need to be validated that all input devices have a value on the server side before being inserted into the database. Note: the date picker is not a supported input type on Safari so you need to use Chrome or Firefox to test the form The service request will be added to the service request table for that resident once the postback form is successfully validated and processed. The page will redirect to RequestList page for that resident. The service request will be added to the ServiceRequest table for that resident when the postback form is successfully validated and processed. 5. If the service request is made by a non-logged-in resident after point 3, display a message to remind the resident to the Log in link (from point 1) so resident’s credential can be authenticated before he/she can make a service request. Once the service request is added to TradBook database, a confirmation message should be displayed and the page will redirect to Search page. General Page Notes: The design of this page is open to your creativity, but it must appropriately display all required information in a clearly readable, well organised and usable format. Request list Page (requestlist.php) Page purpose/description: This page is only accessible to logged-in members (residents and tradies from the database). Request lists are collections of service requests made by logged-in residents. Logged-in residents can only view the requests made by themselves and cannot access any other resident member’s request list(s). Logged-in tradies can only view the list of service requests assigned to them. Page content and functionality: The page will: 1. include navigation to the other pages of TradieBook as appropriate including a Log Out link, 2. display the member’s username, 3. if the page is accessed by a resident member, it should display a list of all service requests that were made by himself (include service type, tradie name and service date). If the page is accessed by a tradie member, it should display a list of all service requests submitted to the tradie member (include service type, resident name, contact number and service date). General Page Notes: The design of this page is open to your creativity, but it must appropriately display all required information in a clearly readable, well organised and usable format. Login Page (login.php) Page purpose/description: The purpose of this page is to provide a login facility for members (residents and tradies) of TradieBook. Some of the functionality described in previous pages is only available to users after they have logged in Page content and functionality: The page will: 1. include a postback login form which contains • a text box to capture the member username • a password box to capture the member password • a submit/log in button When the form is submitted by the user the page will need to authenticate the member credentials (username and password) as supplied by the member in the login form against the records in the membership table of the TradBook database. The passwords from the membership table are encrypted with sha256 algorithm. You need to hash the password form field from the login form to compare with the encrypted password in the membership table. Suppose your password form field is named as “password”, you can retrieve the value by $pword = $dbConn->escape_string($_POST[“password”]); $hpass = hash(“sha256”,$pword); The $hpass is the hashed (with sha256 algorithm) password and you can use it as a part of WHERE clause in the SQL statement for credential matching. The page will allow or deny access to the subsequent pages of TradieBook depending on the result of authentication as follows: a. Successful login attempt: Successful authentication should automatically redirect the resident member to the Search page and redirect the tradie member to the Request List page b. Failed login attempt: Unsuccessful authentication should automatically redirect to the login page so that the user may try to login again. An appropriate error message must be displayed to the user if the login attempt fails. The message display must be implemented using appropriate PHP server-side code; it is not to be a JavaScript alert (or any other browser side component). The message should be displayed in an appropriate location on the login page in a suitable colour. Member Login Credentials: The passwords that are stored in the membership table of the TradBook database are encrypted using the sha256 algorithm (the passwords are not salted). A list of member usernames and plain text passwords can be found in the MemberLoginCredentials document. The first 10 members are resident members and bottom 5 are tradie members in TradBook. The level value for resident members is ‘R’ and level value for tradie members is ‘T’. Note: You need to present the use of PHP functions to prevent SQL injections and XSS. Log Out Page (logout.php) The purpose of this page is to log the resident members off the web application and automatically redirect them to the Search page and redirect the tradie members to the Login page. The Log Out page must not display anything to the user. The page should remove all session variables and end the session (if sessions were used). This page can be accessed from any of the pages as detailed above. B(iii) – Database Description To connect to the TraBook database use the following in your php script $dbConn = new mysqli("localhost", "root", "", "TradBook"); if($dbConn->connect_error) { die("Failed to connect to database " . $dbConn->connect_error); } Notes • The tables within the TradBook database have already been populated with some data. Use the supplied allTables.php script to view the data (make sure you use the connection information as indicated above). • Tables in the TradBook database are described in the TradBook Data Dictionary document. • A list of members’ usernames and plain passwords can be found in the MemberLoginCredentials document. • Membership table in TradBook database has a level attribute to differentiate between resident members and tradie members. Resident members are assigned by level 1 while tradie members are assigned by level 2. C. Referencing Referencing must follow the guidelines given in Section 2.5.2 of the TWA Learning Guide. D. Submission Instructions To submit your Assignment, you must do the following by the due date and time specified on page 1 of this document. 1. Compress all the resource files (HTML, CSS, Javascript, PHP) with the signed academic integrity form in an archive and upload it in the Major Project (30%) submission folder on the vUWS. 2. All of the submitted files should be tested and validated on your own XAMPP 7.4.8. or 7.4.9 apache and MySQL server before the submission. E. Marking Criteria and Standards The marking criteria and standards for the Web Application Assignment are published in Section 2.5.2 of the Learning guide and will be used to assess your assignment submission according to the specific weightings identified in the table below. Code functionality/correctness 60% Web Page Design 25% Form Design 10% Code Readability 5%