slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
TT284-12B Block 2 Tutorial PowerPoint Presentation
Download Presentation
TT284-12B Block 2 Tutorial

Loading in 2 Seconds...

play fullscreen
1 / 46

TT284-12B Block 2 Tutorial - PowerPoint PPT Presentation


  • 476 Views
  • Uploaded on

TT284-12B Block 2 Tutorial. This tutorial WILL BE RECORDED. Your attendance will be taken as agreement to this. Then put a cross on one of the symbols to show how you are feeling about TMA02. The tutorial will begin at 19:00. Agenda. What we learned in block 1

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'TT284-12B Block 2 Tutorial' - braima


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

TT284-12B Block 2 Tutorial

This tutorial WILL BE RECORDED. Your attendance will be taken as agreement to this.

Then put a cross on one of the symbols to show how you are feeling about TMA02...

The tutorial will begin at 19:00....

slide2

Agenda

  • What we learned in block 1
  • PHP - Why we need it & how it works
  • Javascript - Why we need it & how it works
  • PHP or Javascript? How to decide
  • [Time permitting] Regular Expressions
  • Summary & why it matters
  • Questions
slide3

What Have We Learned?

  • About clients and servers
  • How to create a web page using HTML

<body>

<h1 id="title">This is a Heading</h1>

<p>There is a <span class="ninja">Ninja Warrior</span> somewhere in this paragraph.</p>

<form><button type="submit" name="button1">Aaargh!</button>

etc....

  • How to format the page using CSS

#title {

font: bold 20pt Helvetica,sans-serif;

}

.ninja {

color: black;

visibility: hidden;

}

  • And some of the issues around accessibility

[D]

slide4

So That's it Then?

We can all go off and earn our fortune$$$ as web developers....?

Not so fast there - recall TMA01....

  • Getting the pages consistent...
  • Keeping them consistent if things change...
  • Dull, dull, dull!
    • It is the same all the time!
    • Where is the action?

HTML / CSS is OK (sort of) for simple, fixed, "Static" web pages

slide5

PHP - Some History

In 1995 Rasmus Lerdorf (Univ. of Toronto) started work on a small set of tools to help him maintain web pages...

They were called "Personal Home Page" Tools - PHP

  • Allowed access control (who sees what)
  • Include common HTML code across pages
  • Remembering stuff across pages

By 1998 others involved in creating version 3

- Now called "PHP Hypertext Processor"

  • Programming language features (loops, variables, if)
  • Connections to databases
  • Widespread support & use

PHP helps you create & manage HTML webpages

- with changeable content and data management

slide6

PHP - Some Examples

Remember how fiddly it was to get the two OU Running Club pages consistent?

header stuff...

<?php include 'header.inc'; ?>

[insert page content here]

<?php include 'footer.inc'; ?>

page content...

footer stuff...

Are we really expecting the OURC to type those results into HTML tables time, after time?

MySQL Database

<?php

$query = 'select * from racedata where date like "9/5/10"';

$result = mysql_query($query);

etc....

?>

And we can do calculations....

<?php

echo 'Total of times ' . array_sum($racedata);

?>

slide7

PHP - How it Works

Client

HTTP1.0 GET tt284.open.ac.uk/myfile.php

Browser

A program running on the client device requests a resource from a server....

  • The server here is tt284.open.ac.uk
  • The resource is something called "myfile.php"
  • You will sometimes hear the "browser" referred to as a "User Agent"
slide8

PHP - How it Works

Server

Filesx.htm y.phpz.jpg.....

Client

HTTP1.0 GET tt284.open.ac.uk/myfile.php

Browser

Web Server

The Web Server selects a resource (i.e. a file) to returnIf the file is a PHP file, the server will process it first....

  • Usually the server decides that a file is a PHP file by looking at the file extension

Let's take a look deeper inside the server...

slide9

PHP - How it Works

Server

Filesx.htm y.phpz.jpg.....

Include Files,Databases,etc.

PHPProcessor

PHP File

Web Server

HTML File

The Web Server passes the PHP file to a PHP processor

  • This reads and executes the PHP "program"
  • It "passes on" any plain HTML code unchanged
  • It can use other resources as well
  • It returns a "new" HTML file back to the web server

The Web Server then sends that HTML back to the client

slide10

PHP Operation

  • The client NEVER sees the PHP program code
  • The client may not even KNOW that PHP was used
    • Web servers can "map" a resource (URL) to any file
    • E.g. karlwilcox.com/about-me"maps" to a PHP page but you cannot tell this from the URL
  • The PHP program executes ENTIRELY on the server
  • The client just sees some HTML

Something to think about....

What will the client see if there is an error inyour PHP program? (More on this later...)

slide11

PHP - Example Code

Professor Smith has set an assignment due at midnight on the 9th May. He wants to post a model answer after midnight, but does not want to have to stay awake to do it!

The Professor could create a PHP file containing this...

[Usual HTML headers omitted to save space]

<h1>Professor Smith - May Assignment</h1>

<?php $today = getdate(); if ( $today['mon'] <= 5 and $today['mday'] <= 9 ): ?>

<p>Please hand in your assignment by midnight on 9th May</p>

<?php else: ?>

<p>Thank you for handing in your assignments. The answer is 42.</p>

<?php endif; ?>

[Usual HTML footers omitted to save space]

slide12

PHP Quiz

Student Jones thinks he can cheat by moving the date forward on his PC and accessing the web page.

Will he be able to see the answer?

Vote Now!

YES, he will see the answer

NO, he will NOT see the answer

A student would never seek unfair advantage - how could you suggest such a thing?

slide13

PHP Interactivity

PHP also gives us the ability to change things in response to information sent to us by the user agent

http 1.0 GET tt284.open.ac.uk/myfile.php?name=Smith%20J&race=5km

slide14

PHP Interactivity

PHP also gives us the ability to change things in response to information sent to us by the user agent

http 1.0 GET tt284.open.ac.uk/myfile.php?name=Smith%20J&race=5km

Recall - this is the server address

slide15

PHP Interactivity

PHP also gives us the ability to change things in response to information sent to us by the user agent

http 1.0 GET tt284.open.ac.uk/myfile.php?name=Smith%20J&race=5km

Recall - this is the server address

This is the resource name

slide16

PHP Interactivity

PHP also gives us the ability to change things in response to information sent to us by the user agent

http 1.0 GET tt284.open.ac.uk/myfile.php?name=Smith%20J&race=5km

Recall - this is the server address

This is the resource name

This is additional information, passed on to the resource

slide17

PHP Interactivity

PHP also gives us the ability to change things in response to information sent to us by the user agent

http 1.0 GET tt284.open.ac.uk/myfile.php?name=Smith%20J&race=5km

Recall - this is the server address

This is the resource name

This is additional information, passed on to the resource

In this case, the resource is a PHP file, so it is run through the PHP processor. This will automatically create global variables containing this information

<?php

$runnerName = $_GET['name'];

$runnerRace = $_GET['race'];

  • $raceResults = getResults($runnerRace);
  • $raceTime = $raceResults[$runnerName];
  • Echo “$runnerName finished $runnerRace in $raceTime minutes”

etc....

?>

slide18

PHP Interactivity

PHP also gives us the ability to create new data, based on information passed to it

http 1.0 POST ttphp.open.ac.uk/myfile.php?name=Smith%20J&race=5km

Server

address

The HTTP request changes to POST

Resource

name

Additional information, passed

on to the resource

The POST request indicates that the data is intended for storing somewhere. As before, PHP creates a global variable, in this case called $_POST

<?php

$runnerName = $_POST['name'];

$runnerRace = $_POST['race'];

echo"Hello $runnerName, You are about to entered for the $runnerRace race;";

$query = "INSERT INTO $runnerRace VALUES $runnerName;";

$result = mysql_query($query);

etc....

?>

slide19

PHP - The Key Points

  • Operates entirely on the server
  • Can access files, databases, other programs on the server
  • Has a rich set of libraries to expand functionality
  • Can receive data from the client
  • Can also be used as a general purpose language

For example:

We can access data from an HTML form, passed to us in the $_POST variable

And we can put data into a database such as MySQL

This is TMA02 Part 2!

slide20

PHP Problems

So, this is great! We can write proper programs, work with databases and other files, get data from the client, create variable content - what's wrong with that?

  • Everything must go the web server
  • Increased network traffic
  • Increased server processing
  • Decreased response time
  • Not a great user experience...
slide21

User Interaction - Javascript

Scripting languages were introduced by the browser developers to allow some immediate interaction with the end user, without needing any communication back to the server

Examples: Cascading menus

Variable content

slide22

Javascript - How it Works

First, we need to understand how the browser works:It reads an HTML file provided by the server, builds an "in memory" tree of elements and renders this for display

Display

"Tree" of Elements

<html>

<head>

etc...

</head>

<body>

<h1>Stuff</h1>

<p>more stuff...</p>

</body>

HTML

Browser Program

slide23

Javascript - How it Works

Javascript is mixed in with the HTML, or a Javascript file is "included" through a <script> element

The browser passes the Javascript to an "engine" to execute

Display

"Tree" of Elements

<html>

<head>

etc...

</head>

<body>

<h1>Stuff</h1>

<script type=.....>

document.write...

</script>

</body>

HTML

Scripting "Engine"

Browser Program

javascript

slide24

Javascript - How it Works

The scripting engine can READ and MODIFY the tree of elements.And REACT to events generated by the USER

Display

"Tree" of Elements

<html>

<head>

etc...

</head>

<body>

<h1>Stuff</h1>

<script type=.....>

document.write...

</script>

</body>

User

HTML

events

Scripting "Engine"

Browser Program

javascript

slide25

Javascript: Example Code

<body>

<h1 id="title">This is a Heading</h1>

<p>There is a

<span id="ninja" visibility="hidden" onmouseover="document.getElementById('ninja').visibility='visible';">Ninja Warrior</span> somewhere in this paragraph.</p>

<form><button type="submit" name="button1">Aaargh!</button>

<script type="javascript">window.onload=alert("Watch out for Ninjas!");</script>

[etc...]

If we load this page into a browser, once the page is loaded an alert box will pop up.

If the mouse cursor moves over the space containing the words "Ninja Warrior" they will appear.

slide26

Javascript: The Key Points

  • Javascript is included with the HTML file
  • It is executed ENTIRELY on the client
  • Javascript can read and modify the displayed HTML
  • It reacts to "events", there is a rich set of these
  • But NOT general purpose - no file access / IO etc.

For example:

We can attach some Javascript code to the event of the user pressing a button

We can read what the user has entered into form fields

We can validate this and provide feedback by modifying

the HTML - This is TMA02 Part 1!

slide27

Javascript & PHP Syntax

Both Javascript and PHP are programming languages

They are sufficiently similar to be confusing

And sufficiently different to be annoying

You may try to use Javascript functions & language elements in PHP and vice versa -

Do not worry, this is a sign of your growing maturity as a web developer!

slide28

Javascript & PHP Together

Javascript and PHP can be used together to build complex, dynamic, interactive web based applications

PHP

Form

MySQL

TMA02 is a simple,but realistic example

HTML

JS

HTML

Advanced Topic:

It would be even more useful if Javascript and PHP could just exchange data, rather than re-loading a whole page.

A technology called AJAX allows this - but that's another story...

slide29

Javascript & PHP Summary

PHP is a server side, functionally rich, general purpose programming language that helps manage and create and process web page content

Javascript is a client side, event driven scripting language that adds dynamism and interactivity to the web page

They are different, but complementary, and each has its own strengths and weaknesses

Let's consider some scenarios...

slide30

Some Scenarios

Put a tick in the PHP / JS columns to show which you might use...

slide31

There Are NO Fixed Answers!

In most cases there are several possible solutions

The solution you chose will depend on context and probably involve several factors

ProcessingPower

DataLocation

TimingNeeds

Skillset

NetworkCosts

Reliability

Standards

slide32

The Sorting Scenario

The final example, sorting is especially interesting as there are (at least!) three different places the sort could be done:

  • On the client, using Javascript to read the HTML table data, sort it and re-build the table
  • On the server, where the PHP holds a copy of the data, re-sorts on request from the client and sends back a new page
  • On the server, where the PHP generates an entirely new set of data, getting the database to do the sorting

Each of these has its own issues, the one chosen depends on the context you are working in.

slide33

PHP - The Crucial Bits

You have been given references to a LOT of PHP material, and PHP is a big, rich language. Based on my experience of PHP development (not the TMA!), these are the most important bits that you need to understand:

  • Associative Arrays - $array['colour1'] = 'blue';
  • foreach ( $array as $key->$value )
  • How to use the "Super Globals" ($_POST etc.)
  • How to find the library function you need in the PHP manual
    • These include great example code
    • Beware - function naming is NOT consistent!
slide34

PHP Programming Style

You should also be aware that there are two "styles" of PHP programming:

The page is mostly HTML, and PHP code is used to insert small items, or to select large chunks of HTML

Or the page is all PHP, and echo is used to write the HTML

<?php

[stuff omitted]

echo "<table style=\"results\">\n";

foreach ( $results as $result ) {

echo "<tr>\n";

echo "<td>$result[0]</td>";

echo "<td>$result[1]</td>";

echo "</tr>\n";

}

echo "</table>\n";

[more stuff]

?>

<h1>Professor Smith - May Assignment</h1>

<?php $today = getdate(); if ( $today['mon'] <= 5 and $today['mday'] <= 9 ): ?>

<p>Please hand in your assignment by midnight on 9th May</p>

<?php else: ?>

<p>Thank you for handing in your assignments. The answer is 42.</p>

<?php endif; ?>

slide35

Debugging PHP

Server

Filesx.htm y.phpz.jpg.....

Include Files,Databases,etc.

PHPProcessor

PHP File

Web Server

Log file

Error Message

PHP Debugging can be tricky:

- Message shows where error happened, not where bug is

- Message 100% accurate, 0% useful "Headers already sent"

- May not have access to error log file (e.g. the tt284 server)

Possible Approaches:

- Incremental development

- Lots of debug statements like echo print_r($var) etc.

- Local development environment e.g. Zend Server

slide36

Javascript - The Crucial Bits

You have been given a 36 page document on Javascript. Based on my experience of Javascript development (not the TMA!), these are the most important bits that you need to understand:

  • The use of classes and ids, and the functions that find them - getElementById() and friends
  • How to read and set element attributes
  • How to add and remove elements from the DOM element tree
    • document.write is OK for simple stuff, but limited
    • createElement & appendChild more flexible
  • Javascript functions use "camelCase" names
slide37

HTML & Javascript Style

How you construct your HTML can help a lot when you add interactivity and dynamic changes using Javascript

  • Use DIVs and SPANs to structure your HTML into logical sections
  • Use empty, named DIVs as placeholders for new content - <div id="extendedMenu"></div>
  • Use ID attribute for things which should be unique (only one per page)
  • Use CLASS attribute for things which look or act the same way, or are part of the same logical group
  • Good structure helps both Javascript and CSS
slide38

Debugging Javascript

Display

"Tree" of Elements

<html>

<head>

etc...

</head>

<body>

<h1>Stuff</h1>

<script type=.....>

document.write...

</script>

</body>

User

Developer Tools

HTML

events

Scripting "Engine"

Browser Program

javascript

Javascript executes locally - developer tools (e.g. Firebug) give complete access to almost everything - events, DOM tree, breakpoints, variables, timings....Much easier to debug - but does need knowledge!

slide39

Regular Expressions

Regular expressions are used extensively in both PHP and Javascript, as well as text editors, programming tools, database queries and many other places

A regular expression ( "regex" ) allows us to pick out particular parts of a text string

- So that we know that it is there

- Or that is not there

- Or that it matches a particular pattern

- Or so we can replace it with something else

Most tools & languages use a common set of conventions - but with enough variation to be annoying...

O'Reilly "Regular Expressions Cookbook" has 510 pages!

slide40

Regex - Structure

  • Anchors: are used to specify the position of the pattern in relation to a line of text.
    • ^ is the beginning of the line
    • $ is the end of the line
  • Character Sets: match one or more characters in a single position.
    • The simplest set is a list of plain characters
    • [0-9A-F] will match any hexadecimal character
  • Modifiers: specify how many times the previous character set is repeated
    • * match zero or more
    • ? match zero or one
    • + match one or more
  • {3} match 3 times exactly
  • {3,6} match between 3 and 6 times
slide41

Regex - Shortcuts and Flags

  • Shortcuts within patterns
    • . any single character
    • \s any whitespace character
    • \w any word character
    • \< beginning of a word
    • \> end of a word
    • ^ beginning of the line
    • $ end of the line
  • Flags (outside the end of the pattern)
    • i make the match case insensitive
    • m multi-line match
    • g global - find all matches
slide42

Quiz - Regex matches

Given the string:

"Roads, where we're going we don't need roads!"

Link the Regexs with the matching results

/roads/

/?re/

/wh?e/

/[whed]{3}/

/[Rr]oads/

ere 're

Roads roads

roads

whe eed

whe we we

slide43

Summary

In block 1 we learnt about HTML and CSS

PHP runs on the server and helps manage and create HTML content and data

Javascript runs on the client and adds dynamism and interaction to web pages

Javascript and PHP can work together to build rich, interactive web applications

What gets done where (the system design) depends on many factors, there is not always a "right" answer

slide44

Why It Matters

All engineering involves compromise -

There is no "right" answer, just a continuum of more or less good ones

Designing web based systems is like any other engineering discipline and the above applies

At higher education levels you need to provide a reasonable justification your decisions, not give the (one and only) "right" answer

In real world systems engineering the issues are very similar to those in small scale web design

You are not just learning to design and build websites -you are learning real world, transferable skills!!!

slide45

Important Dates

Please note the forthcoming dates for TT284

  • TMA02 Submission Date 23rdMay
  • (On time submissions returned by 7thJune)
  • Limited tutor availability 30th May to 3rd June
          • (Please use national forums if no response)
          • Next tutorial 18thJune
          • (Coverage of Block 3, TMA03 + suggestions?)
slide46

Final Reminder

IMPORTANT!

Be sure to check the News section on the TT284 website regularly....

....and check the TMA 02 Forum for clarifications and updates BEFORE you submit your TMA!