Dynamic Web Pages

1. Dynamic Web Pages

2. XAMPP • Available for PC, Mac, and Linux based servers • It is designed for use on a development machine – not as a production server. • It is easy to install and uninstall • On a PC it can be run from a USB memory stick without being installed. • Does not change the configuration of the computer • Can be used on multiple computers. You can use XAMPP here, on your home PC, or on a PC in the LRC. Just insert the USB memory stick and start XAMPP

3. Installing XAMPPLite • We are going to be using a small version (won’t take up so much space on your USB-drive) called XAMPPlite) • Double-click the installation icon • When prompted give the drive letter of your USB drive. • An xampplite folder will be created on your USB drive and the files copied over – this will take several minutes. • Navigate to this folder and double-click Xamppstart • Check everything is working by navigating to the address localhost in a web browser. This should produce the XAMPP start screen. Pick your language of choice and explore the options.

4. Other Hosting Options • If you can’t, or prefer not to, use XAMPP you can register for free or paid hosting that supports PHP/MySQL • One good free option is http://www.000webhost.com/

5. Web Programming • All our web pages so far have been “static” – They have been created by us - not a computer program • We create and save a web page • We upload it to the web server • People request and see our page

6. What is a Computer Program? • A list of instructions telling a computer what to do. • What might be the human equivalent? • Recipe – tells us how to cook something • Knitting pattern – tells us how to knit something. • Set of instructions from Ikea – tells us how to assemble flatpack furniture

7. What do Computer Programs do • Get information (keyboard, mouse, files, databases) • Manipulate information • Deliver information (screen, loudspeaker, files, databases)

8. Last week we looked at Javascript • Runs in the browser • Can only manipulate the screen • Programs can • Handle rollover buttons • Popup dialog boxes • Show, hide, move AP Divs • Etc • We are now going to move on to looking at programs that run in the server

9. Static Web Pages(Client/Server or two-tier computing) Web Server Web Browser • Browser requests page by making request using HTTP: • Server sends back page using HTTP – or an error message if it can’t • Browser reads XHTML/CSS and DTD and formats page for user. Every user seesan identical page.

10. Server Programming • Many web pages are not static but are assembled upon request • The Web Browser requests a page • The Web Server locates a template (containing the fixed parts of the page) and runs a program. • The program creates the rest of the XHTML making up the page. • The server sends the completed page to the browser • Viewing the page source in the browser does not show any programming instructions

11. Simple Dynamic Web Pages(Client/Server or two-tier computing) Web Server Web Browser • Browser requests page by making request using HTTP: • Server locate web page template, runs program to build changeable parts of page • Server sends completed page using HTTP – or an error message if it can’t • Browser reads XHTML and DTD and formats page for user. Each user mightsee an different page. XHTML code at browser indistinguishable fromstatic page.

12. Server Programming – Example 1 • Browser requests page • Server finds page and notes that it contains an instruction to insert the current date at the top of the page. • Server checks the date and writes XHTML statement to insert date on page • <h1>Thursday 5th March 2009 </h1> • Server sends finished page to browser

13. Exercise • What do the programs do in: • Google? • Facebook? • Ebay?

14. Answer • In many cases you complete a ‘form’ embedded in a web page and submit some data to the server • The server reads the data you send and uses this to: • Google – returns a list of information and hyperlinks about pages matching your search • Facebook – accepts your username and password to generate a personalised home page. • Ebay – searches its database of items on sale and returns you a list of matching items. • These are called dynamic pages

15. Form-driven Dynamic Web Pages(Client/Server or two-tier computing) Web Server Web Browser • Browser requests page • Server sends web page containing form • User completes form • Browser sends form data to server • Server passes data sent by user to program • Program uses user’s data to build custom web page • Server sends back page using HTTP – or an error message if it can’t • Browser reads XHTML and DTD and formats page for user. Each user mightsee an different page. XHTML code at browser indistinguishable fromstatic page.

16. Form-Driven Dynamic Web Pages(Example 1 - Google) Web Server Database Server Web Browser • Browser requests www.google.co.uk • Google Server sends Google home page • User completes Google form and clicks “Google Search” • Browser sends form data to Google web server • Google server passes user’s search request to program which searches Google’s huge database of millions of web pages • Program uses data from database to build custom web page • Server sends back page using HTTP – or an error message if it can’t • Browser reads XHTML and DTD and formats page for user. Each request willreturn a different page. XHTML code at browser indistinguishable fromstatic page.

17. Form-Driven Dynamic Web Pages(Example 2 - Facebook) Web Server Database Server Web Browser • Browser requests www.facebook.comk • Facebook Server sends Facebook home page • User completes Facebook login by entering their username and password • Browser sends form data to Facebook web server • Facebook server passes user’s ID and password to program which validates these and then searches Facebook’s database to retrieve member information • Program uses data from database to build custom web page • Server sends back page using HTTP – or an error message if it can’t • Browser reads XHTML and DTD and formats page for user. Each user willsee an different page. XHTML code at browser indistinguishable fromstatic page.

18. How we are going to do this • In the second half of this course we are going to learn PHP and MySQL. • PHP is an easy to learn programming language that can be placed inside an XHTML page in tags like this <?php … ?> • When the page is requested the server reads the PHP code, follows the instructions given and replaces the PHP code with dynamically written XHTML. • The server then sends the page to the browser

19. What’s the difference between Javascript and PHP • Both programming languages can have their instructions embedded in web pages. • PHP instructions are processed and replaced with XHTML by the server. PHP instructions cannot be seen by the browser as they have been replaced with XHTML before they are sent to the browser • Javascript instructions are ignored by the server and processed by the browser • You can have both Javascript and PHP in the same web page

20. Form-Driven Dynamic Web Pages(Javascript and PHP working together) Web Server Database Server Web Browser • Browser requests an “add my details to your mailing list” form from the server • Server sends page containing the form • User adds information to the form and clicks submit button • JavaScript (activated by submit button) validates data on form. If there are any problems Javascriptproduces an error message and leaves form on screen for user to correct • Browser sends successfully validated form data to web server • Server passes user’s data to program • Program adds user’s data to database • Server sends confirmation page using HTTP – or an error message if it can’t

21. What is MySQL • MySQL is a Database Management System (DBMS) • DBMSs are programs designed for the storage and retrieval of data. • You will use MySQL to store information (such as contact information) provided by users and to retrieved previously stored information in answer to their queries.

22. Are there other Server-based Programming languages? • Others you might come across are: • ASP (Microsoft – defunct) • ASP.Net (Microsoft) • Perl • Ruby • Cold Fusion We use PHP as it is open-source, runs on all servers and is the most popular

23. Are there other Databases • Others you might come across are: • SQL-Server (Microsoft) • Oracle • DB2 (IBM) • Cold Fusion We use MySQL as it is free, runs on all servers and is the most popular

24. This all sounds like hard work! • Don’t panic! The first thing we are going to learn how to insert small pieces of PHP ‘code’ (programming instructions) into web pages. • We will then build on that knowledge to create more complex programs. • When we are happy with that we’ll introduce the use of databases

25. Finding a Suitable Web server • Before we can start we need access to a web server that supports (knows about) PHP and MySQL. • There are many ready-to-use AMP (Apache, MySQL, PHP) servers available you can install on a PC or Mac • LAMP – Linux AMP • WAMP – Windows AMP • MAMP – Macintosh AMP

26. PHP Basics • PHP code is placed between the tags <?php … /> • You can use these tags as often as you want in a web page. • PHP files (i.e. webpages containing PHP code) should be saved with the suffix .php not .htm or .html • Save your work in the xampplite/htdocs folder on your USB drive

27. A First Program <html> <body> <?php echo ‘Hello World’ ; ?> </body> </html> • Type this into Notepad and save in the xampplite/htdocs folder on your USB drive as first.php • View the file by entering the address localhost/first.php into your web browser

28. First.php Explained - 1 • First.php is a webpage with some PHP code inside it. • The PHP code is placed within a PHP code block marked with <?php … ?> • echo is a PHP function (something PHP knows how to do). echo writes information into a webpage • The information that echo writes is the text between the single-quote characters • All PHP commands end with a semi-colon

29. First.php Explained - 2 • Localhost represents the IP address of your computer and makes the request to the web server at the same address as your browser – Apache running as part of XAMPP • Apache looks for web pages in a folder called htdocs - the reason we saved the file there • When Apache finds the file it knows (because it has a .php suffix) that it contains PHP code and processes this. The PHP code in this simple example just inserts the text Hello World! into the webpage • Apache removes the PHP code from the page and sends the finished page to the browser

30. Make the following changes and view the webpage after each • Change the echo statement to • echo ‘<h1>Hello World!</h1>’; • Insert this further echo statement inside the PHP code block • echo ‘<p> This is my first PHP program</p>’; • Add this below the PHP code block • <p> I don’t need PHP to do this </p> • What happens if you insert PHP commands outside of a PHP block? • ..And if you insert XHTML inside a PHP block?

31. Variables • Computer programs use Variables to store pieces of text & numbers – so called as the contents can change (vary) • Replace the first line of your PHP code with the following: • $message = ‘Hello World’; • echo $message;

32. PHP Variables - 1 • PHP variables can contain text, whole numbers, numbers with decimal places and other things • All variable names start with a dollar sign and are composed of letters and numbers • The first character in the name must not be a number - $you2 is OK, $2you won’t work. • Variable names are case sensitive - $Cost, $COST & $cost are different variables • Don’t try to add spaces or non-alphanumeric character to variable names

33. PHP Variables - 2 • $message = “Hello World”; stores the text in the variable $message - note text is in quotes (single or double) • $num1 = 2; stores the whole number 2 in a variable called $num1 • $cost = 17.99; stores the decimal number 17.99 in the variable $cost • Numbers are not in quotes!

34. Using Variables with echo • echo $message; • echo $cost; • echo ‘The price is ‘. $cost; • Dot operator above is used to join bits of text • echo “The price is $cost”; • Double-quoted strings evaluate the content of any variable before displaying • Both of these options would produce the same result

35. Why use Variables? • So far what we have done is assign content to a variable and then used echo to write it into a web page: <?php $message = ‘<p>Here is another message </p>’; echo $message; ?> This does the same as : <p>Here is another message</p> Why bother with Variables?

36. Variables • We have manually assigned the contents of all our variables so far (because we haven’t learned much yet!) • In a real program: • Some variables will be assigned by the user of the web page completing a form e.g. user types their name into a form, PHP puts this information into a variable called $username • Variables can be assigned using other external data – such as that coming from a database. • PHP will automatically assign some System Variables – these give us information about the environment (e.g. the type of browser asking for the page) • PHP programs can modify the content of variables (e.g by doing some maths)

37. Basic Arithmetic $Num1 = 2; $num2 = 4; $num3 = $num1 + $num2; (add) $num4 = $num1 - $num2; (subtract) $num5 = $num1 * $num2; (multiply) $num6 = $num1 / $num2; (divide) $num7 = $num1 * 0.175; (mix vars and numbers)