SFDV2001 – Web Development Lecture 6: Data Driven Design
Server What is a server A machine that “serves“ files How to get a file you connect to the computer send it a message saying what file you want it sends that file to your machine Must have A program that listens for requests and sends files when asked.  This is what makes it a server. Two main ones Apache (67%), MS IIS (21%)  11/09/07 (SFDV2001:24)Data Driven Design
Client Definition A machine that makes requests of a server and then displays the results. Program that are web clients are IE, Mozilla, Netscape, Safari You request a file a get message is sent and the page is returned Special case http://www.otago.ac.nz is interpreted as www.otago.ac.nz/index.html 11/09/07 (SFDV2001:24)Data Driven Design
11/09/07 (SFDV2001:24)Data Driven Design Download cycle Problem not customized to the individual,  manual updating of information no memory of previous visits Client Server get index.html <html><head><title>Index</title><body> This is a test page</body></head>
Dynamic content We can have changing content Latest news stories Games Latest product information Two type Server-side Client-side 11/09/07 (SFDV2001:24)Data Driven Design
Server-side 11/09/07 (SFDV2001:24)Data Driven Design Types ASP, PHP, CGI, SSI you will see <name>.php e.g. cosc360.otago.ac.nz/index.php Cycle client request server processes request and gathers information returns contructed page that is HTML client displays recieved page
Server-side 11/09/07 (SFDV2001:24)Data Driven Design Advantages Up-to-date information easier to maintain and update client machines just see HTML removes redundant information storage Disadvantages Server has to do more work opens up security issues people may not be able to get the same page later
Client-side 11/09/07 (SFDV2001:24)Data Driven Design Types Javascript, Java, imagemaps content sent to your machine and it calculates what to do. Advantages Users machines does work instead of server Disadvantages Sending more data everybody can see how your site works Dependent on the client browser support
Data driven design Static html and CSS is not good enough. We have lots of data and the web should be just one way of viewing that data. Need to be  Dynamic User centred Accessing single data source Maintainable Current There must be a better way! 11/09/07 (SFDV2001:24)Data Driven Design
LAMP L inux,  A pache,  M ySQL,  P HP/Perl/Python Linux  Operating system Apache  Web server MySQL  Database PHP Programming language These create a free dynamic content web server Underlying concepts similar between all database programs Dynamic content the key 11/09/07 (SFDV2001:24)Data Driven Design
Database Database One or more Data file. Data file File containing rows of data. Principles Information should occur only once in an organisation Postal address – Library, department, registry, OUSA, clubs and socs, careers advisory service, ... Accessing information should be fast Fast ways to search 30,000 records. 11/09/07 (SFDV2001:24)Data Driven Design
Example Database Student records database. StudentID, Fname, Sname, DOB, Addr StudentID, PaperCode, Fees, Mark PaperCode, Name, Desc, Year, Department 11/09/07 (SFDV2001:24)Data Driven Design StudentID Fname Sname DOB 933333 Simon Smith 18/12/80 7456324 Jane Jones 10/01/83 8756432 Ann Archer 31/03/84 . . . . . StudentID PaperCode   Fees 933333 COMP112_S1_04 Enrld 933333 ENGL127_S2_04 Unproc 7456324 COMP102_S1_04 Enrld 8756432 COMP102_S1_04 Enrld 8756432 COMP112_S1_04 Enrld 8756432 ENGL127_S2_04 Unpro . . . PaperCode Name Year COMP102_S1_04 Infoma.. 2004 COMP112_S1_04 Comput.. 2004 ENGL127_S2_04 Comput.. 2004 . . . . . Enroll Student Papers
Example Database Your name and address is stored in  one  place.  You are referred to by your  StudentID  everywhere else.  Your enrolment in your course is a row in a datafile. 9334567 COMP112_S2_2005 Enrolled ??? The University has a massive database with many links Lecturers, courses, labs, lecture theatres, examinations, departments, divisions Alumnia Database National Student Number, graduates surveys 11/09/07 (SFDV2001:24)Data Driven Design
Query To extract information you query the database. Query:  I want a list of the names of people enrolled in the course. Process:  Find all the people enrolled in the course and then match their ID numbers to the IDs in the Student file.  Extract all the names for students with matching IDs. MYSQL: SELECT s.name FROM enrollments e, student s  WHERE e.papercode LIKE 'COMP112_S2_2005%'  AND s.id = e.StudentID; 11/09/07 (SFDV2001:24)Data Driven Design
Views of Data Businesses store information in databases Views of data Managers like to look at reports. Sales staff want to know what is in stock and the current price. Clients want to know about products and descriptions. Accountants want stock and sale information. etc....... These are all accessing the same data Wouldn't it be nice to have the web site accessing the same information. 11/09/07 (SFDV2001:24)Data Driven Design
Customisation Case study – Blackboard & PIMS. Login to personal information. Access information about courses. Discussion boards with updatable content. Need more than just HTML to do all that. Server needs to extract information from a database Present it in an acceptable form. 11/09/07 (SFDV2001:24)Data Driven Design
Discussion Board Many people accessing and adding content. Need to have web based access so users can Add content. View new messages. Select a thread. Reply to messages. Has to be dynamic, rather than static. Weblog – blogs also need these properties. Wiki – lots of visitor content alteration. 11/09/07 (SFDV2001:24)Data Driven Design
MySQL MySQL Free implementation of SQL (Structured Query Language). Database management software. Allows full database control and programming. Very common in conjunction with PhP as they are both free and run on Linux and play nicely with Apache. Relational Database Complex once you are designing them for optimal use 11/09/07 (SFDV2001:24)Data Driven Design
ASP, PHP & JSP A ctive  S erver  P age. (MS) ‏ P HP  H ypertext  P reprocessor. (IBM) ‏ J ava S erver  P ages (Sun) ‏ These systems allow Dynamic content. Full programming language support. Access to database information MSaccess.  MySQL. Oracle etc. Easier to maintain as many tasks are automated. 11/09/07 (SFDV2001:24)Data Driven Design
11/09/07 (SFDV2001:24)Data Driven Design
Dynamic Navigation You can use PHP or ASP to add content. Using the GET part of the URL. www.games.ac.nz/index.php?show=research will include the file in directory “inc/” called “research.php” 11/09/07 (SFDV2001:24)Data Driven Design <div id=&quot;bodybox&quot;> <?  $content =  &quot;inc/intro.php&quot; ; if (isset($_GET[&quot;show&quot;])) { $content =  &quot;inc/&quot; .$ _GET[&quot;show&quot;]. &quot;.php&quot; ; } include($content); $modTime = filemtime($content); ?> </div> content = “inc/research.php” content = “inc/intro.php”
Interactive Content Using a database and ASP or PHP User is a row in the database Id stored in a cookie or with login Messages, comments, interests,.... Trademe, Database and interactivity User added content Wiki's, blogs, forums, YouTube, MySpace,.... Cannot have just static content anymore. All of these have some form of data driven content. 11/09/07 (SFDV2001:24)Data Driven Design
AJAX and Ruby Asynchronous Javascript and XML.  Just a term for a way of doing stuff. Interactive components in web pages. Makes a webpage appear more like an application. Google mail and Google Earth. .Net and Ruby on Rails  Same basic concept. Set up all the common tasks so they are created with a single button press or line of code. “ on Rails” is a framework for developing rapid prototypes of websites. Data driven sites are easy to make with these tools. 11/09/07 (SFDV2001:24)Data Driven Design
Server Side Processing There is a lot to learn about programming. Good programmers can develop for any of these web technologies. The more processing you do the more complex the problems. Eventually you need to be running the server so that you have access to everything 11/09/07 (SFDV2001:24)Data Driven Design

Lecture 6 Data Driven Design

  • 1.
    SFDV2001 – WebDevelopment Lecture 6: Data Driven Design
  • 2.
    Server What isa server A machine that “serves“ files How to get a file you connect to the computer send it a message saying what file you want it sends that file to your machine Must have A program that listens for requests and sends files when asked. This is what makes it a server. Two main ones Apache (67%), MS IIS (21%) 11/09/07 (SFDV2001:24)Data Driven Design
  • 3.
    Client Definition Amachine that makes requests of a server and then displays the results. Program that are web clients are IE, Mozilla, Netscape, Safari You request a file a get message is sent and the page is returned Special case http://www.otago.ac.nz is interpreted as www.otago.ac.nz/index.html 11/09/07 (SFDV2001:24)Data Driven Design
  • 4.
    11/09/07 (SFDV2001:24)Data DrivenDesign Download cycle Problem not customized to the individual, manual updating of information no memory of previous visits Client Server get index.html <html><head><title>Index</title><body> This is a test page</body></head>
  • 5.
    Dynamic content Wecan have changing content Latest news stories Games Latest product information Two type Server-side Client-side 11/09/07 (SFDV2001:24)Data Driven Design
  • 6.
    Server-side 11/09/07 (SFDV2001:24)DataDriven Design Types ASP, PHP, CGI, SSI you will see <name>.php e.g. cosc360.otago.ac.nz/index.php Cycle client request server processes request and gathers information returns contructed page that is HTML client displays recieved page
  • 7.
    Server-side 11/09/07 (SFDV2001:24)DataDriven Design Advantages Up-to-date information easier to maintain and update client machines just see HTML removes redundant information storage Disadvantages Server has to do more work opens up security issues people may not be able to get the same page later
  • 8.
    Client-side 11/09/07 (SFDV2001:24)DataDriven Design Types Javascript, Java, imagemaps content sent to your machine and it calculates what to do. Advantages Users machines does work instead of server Disadvantages Sending more data everybody can see how your site works Dependent on the client browser support
  • 9.
    Data driven designStatic html and CSS is not good enough. We have lots of data and the web should be just one way of viewing that data. Need to be Dynamic User centred Accessing single data source Maintainable Current There must be a better way! 11/09/07 (SFDV2001:24)Data Driven Design
  • 10.
    LAMP L inux, A pache, M ySQL, P HP/Perl/Python Linux Operating system Apache Web server MySQL Database PHP Programming language These create a free dynamic content web server Underlying concepts similar between all database programs Dynamic content the key 11/09/07 (SFDV2001:24)Data Driven Design
  • 11.
    Database Database Oneor more Data file. Data file File containing rows of data. Principles Information should occur only once in an organisation Postal address – Library, department, registry, OUSA, clubs and socs, careers advisory service, ... Accessing information should be fast Fast ways to search 30,000 records. 11/09/07 (SFDV2001:24)Data Driven Design
  • 12.
    Example Database Studentrecords database. StudentID, Fname, Sname, DOB, Addr StudentID, PaperCode, Fees, Mark PaperCode, Name, Desc, Year, Department 11/09/07 (SFDV2001:24)Data Driven Design StudentID Fname Sname DOB 933333 Simon Smith 18/12/80 7456324 Jane Jones 10/01/83 8756432 Ann Archer 31/03/84 . . . . . StudentID PaperCode Fees 933333 COMP112_S1_04 Enrld 933333 ENGL127_S2_04 Unproc 7456324 COMP102_S1_04 Enrld 8756432 COMP102_S1_04 Enrld 8756432 COMP112_S1_04 Enrld 8756432 ENGL127_S2_04 Unpro . . . PaperCode Name Year COMP102_S1_04 Infoma.. 2004 COMP112_S1_04 Comput.. 2004 ENGL127_S2_04 Comput.. 2004 . . . . . Enroll Student Papers
  • 13.
    Example Database Yourname and address is stored in one place. You are referred to by your StudentID everywhere else. Your enrolment in your course is a row in a datafile. 9334567 COMP112_S2_2005 Enrolled ??? The University has a massive database with many links Lecturers, courses, labs, lecture theatres, examinations, departments, divisions Alumnia Database National Student Number, graduates surveys 11/09/07 (SFDV2001:24)Data Driven Design
  • 14.
    Query To extractinformation you query the database. Query: I want a list of the names of people enrolled in the course. Process: Find all the people enrolled in the course and then match their ID numbers to the IDs in the Student file. Extract all the names for students with matching IDs. MYSQL: SELECT s.name FROM enrollments e, student s WHERE e.papercode LIKE 'COMP112_S2_2005%' AND s.id = e.StudentID; 11/09/07 (SFDV2001:24)Data Driven Design
  • 15.
    Views of DataBusinesses store information in databases Views of data Managers like to look at reports. Sales staff want to know what is in stock and the current price. Clients want to know about products and descriptions. Accountants want stock and sale information. etc....... These are all accessing the same data Wouldn't it be nice to have the web site accessing the same information. 11/09/07 (SFDV2001:24)Data Driven Design
  • 16.
    Customisation Case study– Blackboard & PIMS. Login to personal information. Access information about courses. Discussion boards with updatable content. Need more than just HTML to do all that. Server needs to extract information from a database Present it in an acceptable form. 11/09/07 (SFDV2001:24)Data Driven Design
  • 17.
    Discussion Board Manypeople accessing and adding content. Need to have web based access so users can Add content. View new messages. Select a thread. Reply to messages. Has to be dynamic, rather than static. Weblog – blogs also need these properties. Wiki – lots of visitor content alteration. 11/09/07 (SFDV2001:24)Data Driven Design
  • 18.
    MySQL MySQL Freeimplementation of SQL (Structured Query Language). Database management software. Allows full database control and programming. Very common in conjunction with PhP as they are both free and run on Linux and play nicely with Apache. Relational Database Complex once you are designing them for optimal use 11/09/07 (SFDV2001:24)Data Driven Design
  • 19.
    ASP, PHP &JSP A ctive S erver P age. (MS) ‏ P HP H ypertext P reprocessor. (IBM) ‏ J ava S erver P ages (Sun) ‏ These systems allow Dynamic content. Full programming language support. Access to database information MSaccess. MySQL. Oracle etc. Easier to maintain as many tasks are automated. 11/09/07 (SFDV2001:24)Data Driven Design
  • 20.
  • 21.
    Dynamic Navigation Youcan use PHP or ASP to add content. Using the GET part of the URL. www.games.ac.nz/index.php?show=research will include the file in directory “inc/” called “research.php” 11/09/07 (SFDV2001:24)Data Driven Design <div id=&quot;bodybox&quot;> <? $content = &quot;inc/intro.php&quot; ; if (isset($_GET[&quot;show&quot;])) { $content = &quot;inc/&quot; .$ _GET[&quot;show&quot;]. &quot;.php&quot; ; } include($content); $modTime = filemtime($content); ?> </div> content = “inc/research.php” content = “inc/intro.php”
  • 22.
    Interactive Content Usinga database and ASP or PHP User is a row in the database Id stored in a cookie or with login Messages, comments, interests,.... Trademe, Database and interactivity User added content Wiki's, blogs, forums, YouTube, MySpace,.... Cannot have just static content anymore. All of these have some form of data driven content. 11/09/07 (SFDV2001:24)Data Driven Design
  • 23.
    AJAX and RubyAsynchronous Javascript and XML. Just a term for a way of doing stuff. Interactive components in web pages. Makes a webpage appear more like an application. Google mail and Google Earth. .Net and Ruby on Rails Same basic concept. Set up all the common tasks so they are created with a single button press or line of code. “ on Rails” is a framework for developing rapid prototypes of websites. Data driven sites are easy to make with these tools. 11/09/07 (SFDV2001:24)Data Driven Design
  • 24.
    Server Side ProcessingThere is a lot to learn about programming. Good programmers can develop for any of these web technologies. The more processing you do the more complex the problems. Eventually you need to be running the server so that you have access to everything 11/09/07 (SFDV2001:24)Data Driven Design

Editor's Notes

  • #14 [Update with local examples]