(b) Client-side i. Update the page title and heading Modify tma02_admin.php to update the main page title and heading. (2 marks) Mike wants this development version to be clearly identified so he knows who is working on it. To clearly identify the page, change the existing text so that it shows your OUCU, followed by a dash and the text 'Erehwon Guest House'. For example, the student Zennata Quillington has an OUCU zxy999 so the heading will read: zxy999 - Erehwon Guest House and the title (shown in your web browser title or tab bar) will read: zxy999 - Erehwon Guest House Examine the code carefully and make the minimum number of changes necessary. iii. Add booking reference' field to the data entry form Modify tma02_dataform.php to provide a labelled text field to accept a string of 10 characters in the data entry form. (5 marks) Mike wants to also capture the booking reference in the form. Add a label with the text 'Booking Reference' and a corresponding text input field and feedback element to the data entry form. Note that the input field should have a size limit of 10 characters and must be completed with 10 characters by the user. Mike does not want to capture information other than from customers, so every entry will have a booking reference. When the limit is reached it should stop accepting characters, but no message should be produced. Your new form field should have a suitable and meaningful name attribute and use the same name as its id. The field value should be empty when the page loads. If you examine the supplied code carefully and observe how the current labels, fields and feedback are implemented, these will give you a good framework from which you can create the additional label, field and feedback element. iv. Client-side validation Modify tma02_admin.js to provide client-side validation of the 'Booking Reference field using JavaScript. (7 marks) Mike wants the client-side to check for mistyped booking references and report them rather than submitting them to the server. He has decided that JavaScript client-side validation is needed to achieve that. All booking references start with a group of three letters, followed by a hyphen and then a six- digit number You need to extend the existing JavaScript validation so that the booking reference' field is constrained as described. To do that, you will need to add additional code to the function validate() to recognise and check the new field, and modify the function validateForm() so the form cannot be submitted without a valid booking reference. Note: achieving this validation by other means will not gain any marks. 2 3 K?php // TT284 CRUD APP (TMA02) // Version 2.0 - June 2021 - Stephen Rice DO // Allow debugging error_reporting (E_ALL); ini_set('display errors', 1); // Define a constant to permit each file we "require" to execute // For security, required PHP files should "die" if SAFE_TO_RUN is not defined define('SAFE_TO_RUN', true); // TODO: Change these values to configure the application $database_table = "tt284_guests"; // name of database table to read/write app_title = TT 284 Block 2 - CRUD App (TMA02)'; css file = "tma02 admin.css"; // name of CSS file to load $js_file = "tma02_admin.js"; // name of JavaScript file to load 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 20 // Setup flags and other variables used in the application $url = $_SERVER['PHP_SELF"]; // URL of this page for forms to POST to $columns [1; // list of names of columns in database table $task = ''; // task to carry out in response to form submission $id = ''; // ID of row in table being viewed/edited (if any) // Search criteria used by search form and data table $search = ""; // value to search for $sort = 'id'; // column to sort by $order = 'ASC'; // order to sort by // Data shown on data entry form $data = []; // key/value data from form submission or row in database table Svalid = true; // whether data in $data is known to be valid $feedback = []; // key/value feedback about invalid data // Define e and x functions require 'helpers.php'; // Output head of page require 'tma02_head.php'; L?>

H Show/Hide: Script execution reports

Executing: connect.php and credentials.php

0 0 h N o o o o o o o o o o o o on PP D E E A D On N O 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 F

Connected to database:

In a real application, we should also authenticate the user before we authorise viewing or changing data!

74 75 76 77 78 79 Och 80 81 El

 $task ==  and $id L

== 82 83