1. Dynamic Web Pages

2. Web Programming  All our web pages so far have been static pages. 1. We create a web page 2. We upload it to the web server 3. People request and see our page

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

4. Server Programming  Many web pages are not static  They are built on request The Web Browser requests a page The Web Browser requests a page The Web Server locates the page template (containing the fixed parts of the page) and runs a program. The Web Server locates the page 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 program creates the rest of the XHTML making up the page. The server sends the completed page to the browser The server sends the completed page to the browser Viewing the page source in the browser does not show any programming instructions Viewing the page source in the browser does not show any programming instructions

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

6. 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 to insert date on page Thursday 11 th February 2009 Thursday 11 th February 2009  Server sends finished page to browser

7. Exercise  What happens when you use: Google? Google? Facebook? Facebook? Ebay? Ebay?

8. 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 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. 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. Ebay – searches its database of items on sale and returns you a list of matching items.  These are called dynamic pages

9. Form-driven Dynamic Web Pages (Client/Server or two-tier computing) Web Browser Web Server 1)Browser requests page 2)Server sends web page containing form 3)User completes form 4)Browser sends form data to server 5)Server passes data sent by user to program 6)Program uses user’s data to build custom web page 7)Server sends back page using HTTP – or an error message if it can’t 8)Browser reads XHTML and DTD and formats page for user. Each user might see an different page. XHTML code at browser indistinguishable from static page.

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

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

12. 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 embedded in an XHTML page in tags like this  PHP is an easy to learn programming language that can be embedded in an XHTML page in tags like this  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

13. 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 gone before they are sent by the server  Javascript instructions are ignored by the server and processed by the browser  You can have both Javascript and PHP in the same web page

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

15. What is MySQL  MySQL is a database  Databases programs are 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.

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

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

18. This all sounds like hard work!  Don’t panic! The first thing we are going to learn how to code forms in XHTML and how to add pieces of pre-written Javascript to web pages. This will give you a feel for what is involved.  We will then spend some time getting acquainted with PHP.  When we are happy with that we’ll introduce the use of a database.