1 / 46

TT284-12B Block 2 Tutorial

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

braima
Download Presentation

TT284-12B Block 2 Tutorial

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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]

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

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

  6. 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); ?>

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

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

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

  10. 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...)

  11. 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]

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

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

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

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

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

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

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

  19. 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!

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

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

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

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

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

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

  26. 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!

  27. 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!

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

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

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

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

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

  33. 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!

  34. 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; ?>

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

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

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

  38. 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!

  39. 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!

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

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

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

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

  44. 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!!!

  45. 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?)

  46. 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!

More Related