THIS IS QUESTION FOR WEB APP REQUIRE KNOWLEDGE OF PHP AND JAVA SCRIPTING

PHP QUESTION

Q1a,

Add booking reference field to the data entry form

Modify data_form.php to provide a labelled text field to accept a string of 9 characters in the data entry form.

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 9 characters and must be completed with 9 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.

SOURCE OF CODE FOR data_form.php REQUIRE ADJUST:

// For security, required PHP files should "die" if SAFE_TO_RUN is not defined if (!defined('SAFE_TO_RUN')) { // Prevent direct execution - show a warning instead die(basename(__FILE__) . ' cannot be executed directly!'); } ?>

Executing:

Generating a HTML form to match the columns in the database table

Show/Hide: Data entry form

First name: " onchange="validate(event.target)" />

Last name: " onchange="validate(event.target)" />

Email: " onchange="validate(event.target)" />

Submit: ">cancel

Completed generating a HTML form to match the columns in the database table

Java scripting question

Q1b,

Modify admin.js to provide client-side validation of the Booking Reference field using JavaScript.

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 five-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.

Add a comment to your validation code explaining the meaning of each part of your booking reference validation expression.

SOURCE CODE FOR admin.js REQUIRE TO CHANGE:

function validate(inputElement) { console.log("validate() called for inputElement:", inputElement);

if (!inputElement) { // This error may be caused by calling document.getElementById() // but there is no HTML element with the id attribute value you provide console.error("validate() called with no input element"); return false; }

var feedbackElement = document.getElementById("feedback_" + inputElement.id); if (!feedbackElement) { // This error may be caused by adding an input with e.g. id="boop" // but no matching feedback element with e.g. id="feedback_boop" console.error( "validate() called but there is no element to provide feedback for this input" ); return false; }

var pattern; // regular expression to match input against var feedback; // feedback about input if it is invalid

// TODO: Change these patterns/feedback according to the inputs you expect

if (inputElement.id == "firstname") { // ^$ = anchors, [a-zA-Z0-9 ] = letters/digits/spaces, * = 0 or more characters pattern = /^[a-zA-Z0-9 ]*$/; feedback = "Only letters, numbers and spaces are permitted"; }

if (inputElement.id == "lastname") { // ^$ = anchors, [a-zA-Z0-9 ] = letters/digits/spaces, * = 0 or more characters pattern = /^[a-zA-Z0-9 ]*$/; feedback = "Only letters, numbers and spaces are permitted"; }

if (inputElement.id == "email") { // ^$ = anchors, .+ = 1+ of any character, \@ = one @ symbol pattern = /^.+\@.+$/; feedback = "Only valid email addresses are permitted"; }

// Check that this is an input element we know how to validate if (!pattern) { // This error may be caused by adding an input with e.g. id="boop" // but no matching line above if (inputElement.id == "boop")... console.warn("validate() called but input id is not recognised"); return false; }

// Read the input value from the input element var value = inputElement.value; // Start by assuming the input is valid var valid = true;

// Test the input value against the regular expression pattern if (pattern.test(value)) { feedback = "Valid"; // Set the class attribute value of the feedback element to change its colour feedbackElement.className = "valid"; } else { // Set the class attribute value of the feedback element to change its colour feedbackElement.className = "invalid"; // The value is invalid valid = false; }

// Show the feedback message on the page feedbackElement.innerText = "Client feedback: " + feedback; if (value != "") { // If there is a value, show this too feedbackElement.innerText += ": " + value; }

return valid; }

function validateForm() { // Start by assuming the form is valid var valid = true;

// Validate each known input // TODO: Change these checks according to the inputs you expect valid = valid && validate(document.getElementById("firstname")); valid = valid && validate(document.getElementById("lastname")); valid = valid && validate(document.getElementById("email"));

// Feedback if form cannot be submitted if (!valid) { alert("Client message: Form data is invalid - please check and try again!"); }

return valid; }