1. IGT-Site, a portable, database driven Web Site tailored to the Requirements of a University by P. Fritz Dr. sc. techn. Division of Geotechnical Engineering (http://www.igt.ethz.ch/) Swiss Federal Institute of Technology, Zürich n

2. IGT-Site, a portable DB driven Web Site 2 IGT-Site, a portable database driven Web Site n b Motivation Motivation b Aim Aim b Design Design b User Interface User Interface b Implementation Implementation b Outlook Outlook b Summary Summary

3. IGT-Site, a portable DB driven Web Site 3 New politics at ETH Great effort since 1994, hard to update Full text of Publications People n ETH internally Expenditure for old Site Offering more Content Motivation

4. IGT-Site, a portable DB driven Web Site 4 n Motivation Aim Design User Interface Implementation Outlook Summary

5. IGT-Site, a portable DB driven Web Site 5 Up-to-Date (delegation!) Limited maintenance For academic and engineering community Content is important, not eye catching features Consistent look and feel Straightforward navigation Info just some mouse clicks away n General Content Way of Presentation Aim of IGT-Site Guide for using the Internet Specific links Info about staff Publications Projects Courses and Lectures Scientific services and products Further infos For company members Content Way of Presentation Aim: Index

6. IGT-Site, a portable DB driven Web Site 6 n Motivation Aim Design User Interface Implementation Outlook Summary IGT-Site, a portable DB driven Web Site Titel Aim: Index Design

7. IGT-Site, a portable DB driven Web Site 7 Dynamic or live data, DB, browsers, scalability Client or server control, CSS, ASP Update, user level, consistency of data and look & feel n Basics Database Connectivity Why using a DB? Design of IGT-Site Access to the DB Browser via ASP and ADO, Frontend in MS-Access Database Connectivity Access to the DB Design: Index

8. IGT-Site, a portable DB driven Web Site 8 n Design of IGT-Site: Basics l are dynamic data required, and if yes, how should they be generated ? l should live data be manipulated ? l which clients should be supported? l expected traffic volume (scalability) * No client sided ActiveX controls and Java Applets! Design: Basics

9. IGT-Site, a portable DB driven Web Site 9 Dynamic or live data, DB, browsers, scalability Client or server control, CSS, ASP Update, user level, consistency of data and look & feel n Basics Database Connectivity Why using a DB? Design of IGT-Site Access to the DB Browser via ASP and ADO, Frontend in MS-Access Basics Database Connectivity Why using a DB? Access to the DB Design: DB Connectivity

10. IGT-Site, a portable DB driven Web Site 10 l Two fundamentally different strategies: Design of IGT-Site: Database Connectivity 1. browser-sided plug-ins (2-tier architecture) 2. server-sided control (3-tier architecture) more Info ? Design: DB Connectivity 2/3 tier

11. IGT-Site, a portable DB driven Web Site 11 n l Two fundamentally different strategies: Design of IGT-Site: Database Connectivity 1. browser-sided plug-ins (2-tier architecture) 2. server-sided control (3-tier architecture) Windows Distributed Internet Application Architecture (DNA): server-sided ASP scripts and server-sided includes, database interrogation by the Structured Query Language (SQL) client-sided Java scripts, Cascading Style Sheets, HTML 4.0, Design: DB Connectivity DNA

12. IGT-Site, a portable DB driven Web Site 12 n l server-sided ASP scripts: Design of IGT-Site: Database Connectivity combines the ease of HTML with familiar tools like Visual Basic Scripting and ActiveX Server Components ASP also supports any scripting language (e.g. Visual Basic Scripting Edition and MS Jscript) server-sided processing, standard HTML output browser just sees output, not code includes ActiveX Server Components (e.g. the ActiveX Data Object (ADO)) adds text, graphic, or application info to HTML get info about a file or display a CGI variable l server-sided includes : Design: DB Connectivity ASP

13. IGT-Site, a portable DB driven Web Site 13 n l Two fundamentally different strategies: Design of IGT-Site: Database Connectivity 1. browser-sided plug-ins 2. server-sided control Windows Distributed Internet Application Architecture (DNA): server-sided ASP scripts and server-sided includes, database interrogation by the Structured Query Language (SQL) client-sided Java scripts, HTML 4.0, Cascading Style Sheets Design: DB Connectivity SQL,Scripts

14. IGT-Site, a portable DB driven Web Site 14 n 3 Cascading Style Sheets: Design of IGT-Site: Database Connectivity describe how documents are presented (e.g. fonts, spacing, and aural cues). Separation of the presentation style from the content of documents. Document Object Model Cascading Style Sheets l HTML 4.0 (= Dynamic HTML) : 3 Document Object Model (DOM): – access to all page elements (ID’s) – instant page update (scripts) – full event model (e.g. OnMouseOver) – changing the text on the page (e.g. with InnerText) Design: DB Connectivity HTML 4

15. IGT-Site, a portable DB driven Web Site 15 Dynamic or live data, DB, browsers, scalability Client or server control, CSS, ASP Update, user level, consistency of data and look & feel n Basics Database Connectivity Why using a DB? Design of IGT-Site Access to the DB Browser via ASP and ADO, Frontend in MS-Access Basics Database Connectivity Why using a DB? Access to the DB Design: Why a DB

16. IGT-Site, a portable DB driven Web Site 16 n Reasons to avoid hardcoding all information in HTML-pages: Design of IGT-Site: Why using a DB? Easier to keep data up to date. much easier to delegate responsibility to interested individuals (knowledge level !). Information may be organized and structured in sophisticated way, thereby avoiding duplication and redundancy. Look and feel of the entire Web site becomes very consistent Design: Why a DB Details

17. IGT-Site, a portable DB driven Web Site 17 Dynamic or live data, DB, browsers, scalability Client or server control, CSS, ASP Update, user level, consistency of data and look & feel n Basics Database Connectivity Why using a DB? Design of IGT-Site Access to the DB Browser via ASP and ADO, Frontend in MS-Access Basics Why using a DB? Design: Access to DB

18. IGT-Site, a portable DB driven Web Site 18 n Design of IGT-Site: Access to the DB via ASP and ADO: SQL query is packed in a server object, dispatched and parsed and executed by the Web server l For displaying data from the browser: Easy to use forms in MS-Access. (Access, in contrast to HTML, provides support for forms, e.g. relational forms) l For editing data: from a User Frontend: (show details about ADO: ) Design: Access to DB Details

19. IGT-Site, a portable DB driven Web Site 19 n Motivation Aim Design User Interface Implementation Outlook Summary IGT-Site, a portable DB driven Web Site Web Interface DB Interface User Interface

20. Web Interface 3 Frame Layout: header frame table of contents (TOC) topic or body frame Implementation & Pro and Contra Frames:  see later ! n User Interface: Web

21. IGT-Site, a portable DB driven Web Site 21 n User Interface DB Interface Admin Interface User Interface: DB

22. IGT-Site, a portable DB driven Web Site 22 IGT-Site, a portable DB driven Web Site n Motivation Aim Design User Interface Implementation Outlook Summary Implementation

23. IGT-Site, a portable DB driven Web Site 23 Design Deployment of the User Frontend Security Considerations n Web Implementation Database Setup Implementation Frame Organization Table of Contents Context-sensitive Help Setup of the NT Servers Setup of Internet Information Server (IIS) Adaptations for the Company Implementation: Overview

24. Frame Organization Header Frame static file Main Body Frame TOC Body TOC  Discussion Frames ! n TOC frame Body Frame Implementation: Frames

25. IGT-Site, a portable DB driven Web Site 25 Design Deployment of the User Frontend Security Considerations n Web Implementation Database Setup Implementation Frame Organization Table of Contents Context-sensitive Help Setup of the NT Servers Setup of Internet Information Server (IIS) Adaptations for the Company Implementation: Overview

26. IGT-Site, a portable DB driven Web Site 26 n n n l Design Implementation of the DB Backend: relational data store Frontend: forms to access the backend Control of Functionality l Security Dispositive Backend:design protected, data editable by Frontend only Frontend:design protected, data input by forms only Deployment of User Frontend Quality Control of Content Implementation: Design

27. IGT-Site, a portable DB driven Web Site 27 n n n l Types of information Design of the DB Backend Specific types: People, Publications, Projects, Courses, Services, Products General type: Infos l Field types Internal:descriptions, abstracts, keywords, etc. Links:resources (e.g. full papers) l Implementation Any relational, SQL compliant database, e.g. SQL-Server or MS-Access Implementation: Design Backend

28. IGT-Site, a portable DB driven Web Site 28 n Excerpt of the DB Backend Implementation: DB excerpt

29. IGT-Site, a portable DB driven Web Site 29 n n n l Design Implementation of the DB Backend: relational data store Frontend: forms to access the backend Control of Functionality l Security Dispositive Backend:design protected, data editable by Frontend only Frontend:design protected, data input by forms only Deployment of User Frontend Quality Control of Content Implementation: Design Frontend

30. IGT-Site, a portable DB driven Web Site 30 n n n l 1300 lines of code (MS Visual Basic) l 2 variables l > 40 forms, 40 defined queries DB Frontend l Avoid dysfunctional links ! Control of Functionality Internal Consistency: guaranteed by DB Hardcodes Links: Web diagnostic software (include "Show All" in TOC !) MS-Access Implementation: Frontend & Functionality

31. IGT-Site, a portable DB driven Web Site 31 n n n l Design Implementation of the DB Backend: relational data store Frontend: forms to access the backend Control of Functionality l Security Dispositive Backend:design protected, data editable by Frontend only Frontend:design protected, data input by forms only Deployment of User Frontend Quality Control of Content Implementation: Security

32. IGT-Site, a portable DB driven Web Site 32 Design Deployment of the User Frontend Security Considerations Web Implementation Database Setup of IGT-Site Implementation Frame Organization Table of Contents Context-sensitive Help Setup of the NT Servers Setup of Internet Information Server (IIS) Adaptations for the Company Implementation: Setup

33. IGT-Site, a portable DB driven Web Site 33 n n n l Setup of the NT Servers Setup of IGT-Site Domain Server: account "IGT" for Intranet Web Server: account "AnonWWW" shares IGT_Site, PersonalResources l Setup of Internet Information Server (IIS) l Adaptations for the Company Execute set of (WinBatch-) batch files: copy directory tree and set permissions create account "AnonWWW" and shares setup Site and virtual directories Company acronym (variable In JavaScript) Username/pw for Backend, Frontend, Web access Implementation: Setup Details

34. IGT-Site, a portable DB driven Web Site 34 IGT-Site, a portable DB driven Web Site n Motivation Aim Design User Interface Implementation Outlook Summary Tolerant Search Engine DB Frontend comfort TOC through DHTML Outlook

35. IGT-Site, a portable DB driven Web Site 35 Summary of IGT-Site n l Motivation: ETH, maintenance, content Motivation l Aim: General, content, form Aim l Design: why a DB, connectivity, access Design l User Interface: Web and DB interface User Interface l Implementation: Frames, DB, setup Implementation l Outlook: Tolerant search, Frontend, DHTML Outlook Summary

36. IGT-Site, a portable DB driven Web Site 36 Thank you for your patience... n End