Higher Computing Science Coding the Web: HTML, JavaScript, PHP and MySQL

Static and Dynamic web content Static pages will look the same each time they are loaded into a browser Static web pages contain text, images and links. Static web pages do not change unless edited by the author Cache servers which store the contents of static pages locally can dramatically improve loading speeds Most web pages nowadays will have some dynamic content

Static and Dynamic web content Dynamic web pages change each time they are loaded into a browser, but may contain static elements Dynamic web pages can change depending on: information entered by the user data from the client machine data from online databases data from other online sources

Static and Dynamic content: a typical web page Dynamic content using cookies Static content Dynamic content from online database

Scripting Dynamic content needs to be controlled by code. Client side scripting runs on code on the user's machine, usually integrated with the browser. Server side scripting runs on code running on the remote machine providing the web content

Client-side scripting Uses a programming language (eg. JavaScript, Vbscript, Python) to present an interactive web page to the user Uses the advanced features of HTML5 All processing is done by the user's machine so reducing the demand on the web server Improves page response time as no data needs to be sent back to the server

Client-side scripting: Cookies Cookies are small text files stored locally by your browser. Cookies store details of the pages you have visited and the content loaded by third party adverts Cookies let you customise how web pages appear in your browser Cookies are used to target adverts using your web history and data from adverts on pages you have visited

Client-side scripting: Cookies

Form validation using HTML5 HTML5 can be used to check the input from a user before data is sent to the server Data from the user will be entered on a form on a web page When the submit button is clicked the browser will check the data entered against the conditions set by the form

Basic structure of an HTML form Basic form Enter your comment here

The form element Enter your comment here The element name is a unique identifier for the form method will be how the data is transmitted to the processing script action will be the URL of the processing script on the server

The input element (text box) Enter your comment here The element: (text) type="text" specifies that the browser should display a single line text input box name="comment" means that when the form is submitted the contents of this input will be referred to as comment value="" Value specifies a value to place in the text box when the form is created

The input element: (submit button) Enter your comment here The element (button): type="submit" creates a button that sends the forms contents for processing name="submit" uniquely identifies the button value="Submit" value specifies the text to display on the button

Form elements Text box: single line text box Text area: multi line text area Button:clickable button to perform an action Checkbox:multiple selection (on/off) Radio Button: single selection (on/off) List selection: dropdown list (text)

Form Field Verification Not the same thing as validation!

Client side validation: HTML5 maxlength can limit the number of characters The pattern attribute is a method of declaring rules to match string contents required means that the field cannot be empty Input patterns can be used to validate specific input formats such as telephone numbers, credit card numbers, IP addresses etc.

Client side validation: HTML5 Results may be browser dependent Older browser versions may not support these types, so JavaScript may be the only way to achieve the same effect.

Client side validation: HTML5

Client side validation: HTML5

Client side validation: HTML5

Client-side scripting: JavaScript Can be used to: Create an interactive web page including:  Popups  Menus  Image galleries  Mouse rollover effects Validate input on forms Customise page content based on the time of day, browser version, user location and cookies

Client-side scripting: JavaScript The user requests a web page from the server. The server finds the page and any associated scripts if they are in a separate file, and sends them to the user. The page is displayed on the browser with any scripts running during or after display. All server side scripts can be viewed by the user

JavaScript syntax Statements are separated by semicolons JavaScript is case sensitive Code blocks such as functions are grouped inside curly brackets { } Objects can be accessed using the. syntax Eg. A = document.form1.number1.value; SET A TO You can see some JavaScript examples here:

JavaScript: Popup box Simple popup box alert("Your message here"); Main page content here……….

JavaScript: simple addition function add() { A = document.form1.number1.value; B = document.form1.number2.value; A = Number(A); B = Number(B); C = (A + B); document.form1.answer.value = C ; } Number one: Number two: Answer:

JavaScript: Rollover images function swap(){document.images[0].SRC='square.gif'} function swap2(){document.images[0].SRC='circle.gif'} Is it a square or is it a circle?

Client-side validation: JavaScript A simple input validation script: function checknumber(){ var numbertocheck = usernumber.value; while (numbertocheck 100){ alert("sorry that number is out of range, please re-enter"); document.getElementById('usernumber').value = null; document = initDocument; }

Client-side validation: JavaScript Although JavaScript can be embedded inline on a web page, or in the section of a web page, like CSS formatting it is best to implement it as an external file. This means that its code can be used by more than one page.

Server-side scripting The user sends data from a web page to the server (usually via a form). The data is processed by the server script specified on the web page The server script creates an HTML web page which is returned to the user. This page may contain data requested form a database or the response from a database query The server side scripts are invisible to the user. Server side scripting languages include PHP, Perl and ASP

PHP essentials PHP code is always enclosed inside this tag: PHP variable names are prefixed with a $ symbol. Every statement must end with a semicolon ";" Comments start with //

Client: Sending data to the server Posting Page First Name: Last Name:

Server: Receiving data from the client Receiving page with greeting <?php $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; echo( "Welcome to my Website, $firstname $lastname!" ); ?>

Server: add client data to MySQL database <?php $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; //connect to mysql server and open database $mysqli = new mysqli("server","username","password","database"); //SQL code to add data to database $sql ="INSERT INTO table1(forename,surname) VALUES('$forename','$surname')"; $result = $mysqli->query($sql); ?>

Client: requesting data from MySQL database Requesting Document Forename:

Server: returning data from MySQL database <?php // getvalues for variables from form $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; //connect to mysql server and open database $mysqli = new mysqli( "server","username","password", "database"); // select record using variable values $sql = "SELECT * FROM test1 WHERE firstname = '$firstname' AND lastname = '$lastname' "; $result = $mysqli->query($sql); //while there is data to retrieve while ( $db_field = mysql_fetch_assoc($result) ) { print "Firstname". $db_field['firstname']; print "Lastname". $db_field['lastname'] ; } //If no data if ($db_field['firstname'] == NULL){ print " no records found "; } ?>

Applications of server-side scripting Interaction with Remote databases  Banking  Ecommerce  Search engines Content managed websites  Company websites  Blogs  Social Media (Facebook, Twitter etc.)

Past paper questions 2015 Q Q 16f Specimen Paper Q2 Information Systems 2013 Q25e

2015 Q6 Innes regularly uses a shopping website called Better Shop. Scripting is used to generate parts of the website. (a) State one part of the website that is generated using client-side scripting. Date, Time, Script attached to item for sale (b) State one part of the website that is generated using server-side scripting. Recommended items, Name

2015 Q 16f Customers can purchase tickets via a website. Explain how the use of a database driven website would allow the safari park to display a message if there were only a small number of tickets left on a certain day. A server side SQL query could be used to calculate how many tickets are available from the booking database. The query would generate a response which would be returned to the client.

Specimen Paper Q2 Before a customer can register with the website, they must complete a CAPTCHA code to verify that the user is human. Validation of this code entered requires a script. Explain why this script would require server-side processing, rather than client-side processing. If client side validation was used the business would have no control over the data validated and processed using client-side script. Server side validation reduces the potential of spamming the web server, as the server-side script receives the CAPTCHA code input and validates it against the correct response.

2013 Q25e In order to subscribe to a website, users have to complete an on-screen form. Describe two advantages of using client-side scripting for validating the form. Client-side scripting pre-validates form giving a faster response to the user. Client-side scripting frees up server to carry out other tasks.

Additional Questions Why is server-side scripting more secure than client side scripting? Many content managed websites use PHP scripting and a MySQL database to allow administrators to edit the web pages. Why would client-side scripting not work for this task?