higher computing science coding the web: html, javascript, php and mysql

Higher Computing Science

Coding the Web: HTML, JavaScript, PHP and MySQL

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

Static and Dynamic web contentDynamic web pages change each time they are loaded into a browser, but may contain static elementsDynamic 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

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: CookiesCookies 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 advertsCookies let you customise how web pages appear in your browserCookies are used to target adverts using your web history and data from adverts on pages you have visited

https://www.youtube.com/watch?v=coWuhy3CjVE

https://www.youtube.com/watch?v=coWuhy3CjVE

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

<html> <head> <title>Basic form</title> </head> <body>

<form name="commentForm" method="" action="" > <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" id="Submit" value="Submit" /> </form>

</body>

</html>

The form element <form name="commentForm" method="POST" action="sendmail.php"> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" id="Submit" value="Submit"/> </form>

The <form> 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)

<form name="commentForm" method="POST" action="sendmail.php"> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="enter comment here"/> <input type="submit" name="submit" value="Submit" /> </form>

The <input> 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)

<form name="commentForm" method="POST" action="sendmail.php"> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" value="Submit" /> </form>

The <input> element (button):type="submit" creates a button that sends the forms contents for processingname="submit" uniquely identifies the buttonvalue="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 contentsrequired means that the field cannot be empty

<input type="text" name="username" maxlength="40" pattern="^[A-Za-z0-9]+$" required />

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.

<input type="number" min="1" max="10"> <input type ="email"><input type ="url"> <input type ="date"> <input type ="time">

Client-side scripting: JavaScriptCan 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 <the value of the text box named "number1" in the form named "form1" in the current document>

You can see some JavaScript examples here: http://www.codecademy.com/courses/web-beginner-en-8l45k/1/1

http://www.codecademy.com/courses/web-beginner-en-8l45k/1/1



JavaScript: Popup box<html> <head> <title> Simple popup box </title> <script language="JavaScript"> alert("Your message here"); </script> </head> <body> Main page content here………. </body></html>

JavaScript: simple addition<SCRIPT language = JavaScript>

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 ;

}

</SCRIPT>

<form name= form1>

Number one:<input type="text" name="number1" value="">

Number two:<input type="text" name="number2" value="">

Answer: <input type="text" name="answer" value= "">

<input type=Button name="Add" value="Add" onClick = add() >

</form>

<head>

<body>

JavaScript: Rollover images<head>

<SCRIPT LANGUAGE = "Javascript">

function swap(){document.images[0].SRC='square.gif'}

function swap2(){document.images[0].SRC='circle.gif'}

</SCRIPT>

</head>

<body>

<h1> Is it a square or is it a circle? </h1>

<p>

<IMG SRC='circle.gif' onMouseOver="swap()" onMouseOut="swap2()">

</p>

</body>

Client-side validation: JavaScript

A simple input validation script:

function checknumber(){

var numbertocheck = usernumber.value;

while (numbertocheck < 1 || 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 <head> 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.

<head><script type="text/javascript" src="script.js"></script></head>

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 ?>

• PHP variable names are prefixed with a $ symbol.

• Every statement must end with a semicolon ";"

• Comments start with //

Client: Sending data to the server

<html><head><title>Posting Page</title></head> <body><form action="welcome.php" method="post">

First Name: <input type="text" name="firstname" /><br />Last Name: <input type="text" name="lastname" /><br /><input type="submit" value="Submit" />

</form> </body></html>

Server: Receiving data from the client<html><head><title>Receiving page with greeting</title></head> <body><?php

$firstname = $_POST['firstname'];$lastname = $_POST['lastname'];echo( "Welcome to my Website, $firstname $lastname!" );

?> </body></html>

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

<html><head> <title>Requesting Document</title></head>

<body><form name="form1" method="POST" action="findRecord.php"> Forename:<input name="firstname" type="text"> <input type="submit" = "button" value="Find Record"></form></body></html>

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 "<h2>no records found </h2>"; }

?>

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 Q6• 2015 Q 16f• Specimen Paper Q2• Information Systems 2013 Q25e

2015 Q6Innes 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-sidescripting.

Recommended items, Name

2015 Q 16fCustomers 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 Q2Before 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 Q25eIn 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 QuestionsWhy 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?

higher computing science coding the web: html, javascript, php and mysql

Documents