SFDV2001 – Web Development Lecture 6: Data Driven Design
Server <ul><li>What is a server </li></ul><ul><ul><li>A machine that “serves“ files </li></ul></ul><ul><li>How to get a fi...
Client <ul><li>Definition </li></ul><ul><ul><li>A machine that makes requests of a server and then displays the results. <...
11/09/07 (SFDV2001:24)Data Driven Design Download cycle <ul><li>Problem </li></ul><ul><ul><li>not customized to the indivi...
Dynamic content <ul><li>We can have changing content </li></ul><ul><li>Latest news stories </li></ul><ul><li>Games </li></...
Server-side 11/09/07 (SFDV2001:24)Data Driven Design <ul><li>Types </li></ul><ul><ul><li>ASP, PHP, CGI, SSI </li></ul></ul...
Server-side 11/09/07 (SFDV2001:24)Data Driven Design <ul><li>Advantages </li></ul><ul><ul><li>Up-to-date information </li>...
Client-side 11/09/07 (SFDV2001:24)Data Driven Design <ul><li>Types </li></ul><ul><ul><li>Javascript, Java, imagemaps </li>...
Data driven design <ul><li>Static html and CSS is not good enough. </li></ul><ul><ul><li>We have lots of data and the web ...
LAMP <ul><li>L inux,  A pache,  M ySQL,  P HP/Perl/Python </li></ul><ul><ul><li>Linux  Operating system </li></ul></ul><ul...
Database <ul><li>Database </li></ul><ul><ul><li>One or more Data file. </li></ul></ul><ul><li>Data file </li></ul><ul><ul>...
Example Database <ul><li>Student records database. </li></ul><ul><ul><li>StudentID, Fname, Sname, DOB, Addr </li></ul></ul...
Example Database <ul><li>Your name and address is stored in  one  place.  </li></ul><ul><ul><li>You are referred to by you...
Query <ul><li>To extract information you query the database. </li></ul><ul><li>Query:  </li></ul><ul><ul><li>I want a list...
Views of Data <ul><li>Businesses store information in databases </li></ul><ul><li>Views of data </li></ul><ul><ul><li>Mana...
Customisation <ul><li>Case study – Blackboard & PIMS. </li></ul><ul><ul><li>Login to personal information. </li></ul></ul>...
Discussion Board <ul><li>Many people accessing and adding content. </li></ul><ul><li>Need to have web based access so user...
MySQL <ul><li>MySQL </li></ul><ul><ul><li>Free implementation of SQL (Structured Query Language). </li></ul></ul><ul><ul><...
ASP, PHP & JSP <ul><li>A ctive  S erver  P age. (MS) ‏ </li></ul><ul><li>P HP  H ypertext  P reprocessor. (IBM) ‏ </li></u...
11/09/07 (SFDV2001:24)Data Driven Design
Dynamic Navigation <ul><li>You can use PHP or ASP to add content. </li></ul><ul><li>Using the GET part of the URL. </li></...
Interactive Content <ul><li>Using a database and ASP or PHP </li></ul><ul><ul><li>User is a row in the database </li></ul>...
AJAX and Ruby <ul><li>Asynchronous Javascript and XML.  </li></ul><ul><ul><li>Just a term for a way of doing stuff. </li><...
Server Side Processing <ul><li>There is a lot to learn about programming. </li></ul><ul><li>Good programmers can develop f...
Upcoming SlideShare
Loading in...5
×

Lecture 6 Data Driven Design

1,071

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,071
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • [Update with local examples]
  • Lecture 6 Data Driven Design

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×