Coding_the_Web_Javascript_PHP_and_MySQLx
Download
Report
Transcript Coding_the_Web_Javascript_PHP_and_MySQLx
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
Static
content
Dynamic content
from online
database
Dynamic content
from online
database
Dynamic
content
using
cookies
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
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 processing
name="submit" uniquely identifies the button
value="Submit" value specifies the text to display on the button
Form elements
• Text box:
• Text area:
• Button:
• Checkbox:
• Radio Button:
• List selection:
single line text box
multi line text area
clickable button to perform an action
multiple selection (on/off)
single selection (on/off)
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 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
<input
<input
<input
type="number" min="1" max="10">
type ="email">
type ="url">
type ="date">
<input type ="time">
Client side validation: HTML5
<input type="text" name="name" id="name" pattern="[A-Za-z-09]+\s[A-Za-z-'0-9]+" title="firstname lastname"/>
<input type="text" name="firstname" required />
Client side validation: HTML5
<input type="number" min="1" max="9" name="number"/>
<input type="time" name="time"
/>
<input type="date" name="date"/>
Client side validation: HTML5
<input type="url" name="url" />
<input type="email" name="email" />
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
<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
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;
<head>
B = document.form1.number2.value;
A = Number(A);
B = Number(B);
C = (A + B);
document.form1.answer.value = C ;
}
<body>
</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>
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 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?