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.

IGT-Site, a portable, database

driven Web Site

tailored to the Requirementsof 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

IGT-Site, a portable DB driven Web Site 2

IGT-Site, a portable database driven Web Site

n

Motivation Aim Design User Interface Implementation Outlook Summary


New politics at ETH

Great effort since 1994, hard to update

Full text of PublicationsPeople

n

ETH internally

Expenditure for old Site

Offering more Content

Motivation


IGT-Site, a portable DB driven Web Site

n

Motivation

Aim

Design

User Interface

Implementation

Outlook

Summary


Up-to-Date (delegation!)Limited maintenance

For academic and engineering community

Content is important, not eye catching featuresConsistent look and feelStraightforward navigationInfo just some mouse clicks away

n

General

Content

Way of Presentation

Aim of IGT-Site

Guide for using the InternetSpecific links

Info about staffPublicationsProjects

Courses and LecturesScientific services and productsFurther infos

For company membersFor company members

Content

Way of Presentation

Aim: Index

IGT-Site, a portable DB driven Web Site 6n

Motivation

Aim

Design

User Interface

Implementation

Outlook

Summary


Titel

Aim: Index

Design


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 DBBrowser via ASP and ADO, Frontend in MS-Access


Access to the DB

Design: Index


Design of IGT-Site: Basics are dynamic data required, and if yes, how should they be

generated ?

should live data be manipulated ?

which clients should be supported?

expected traffic volume (scalability)

No client sided ActiveX controls and Java Applets!

Design: Basics





n

Basics


Why using a DB?

Design of IGT-Site


Basics


Why using a DB?

Access to the DB

Design: DB Connectivity


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




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


server-sided ASP scripts:


• 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

server-sided includes :

Design: DB Connectivity ASP




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


Cascading Style Sheets:


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

HTML 4.0 (= Dynamic HTML) :

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





n

Basics


Why using a DB?

Design of IGT-Site


Basics


Why using a DB?

Access to the DB

Design: Why a DB


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





n

Basics


Why using a DB?

Design of IGT-Site


Basics

Why using a DB?

Design: Access to DB


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

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)

For editing data: from a User Frontend:

(show details about ADO: )

Design: Access to DB Details


Motivation

Aim

Design

User Interface

Implementation

Outlook

Summary


Web Interface

DB Interface

User Interface

Web Interface

3 Frame Layout:

• header frame

• table of contents (TOC)

• topic or body frame

Implementatio

n &

Pro and Contra Frames:

see later !

n

User Interface: Web


User Interface

DB InterfaceAdmin Interface

User Interface: DB



n

Motivation

Aim

Design

User Interface

Implementation

Outlook

Summary

Implementation


DesignDeployment of the User FrontendSecurity Considerations

n

Web Implementation

Database

Setup

Implementation

Frame OrganizationTable of ContentsContext-sensitive Help

Setup of the NT Servers Setup of Internet Information Server (IIS)Adaptations for the Company

Implementation: Overview

Frame Organization

Header Framestatic file

Main Body Frame

TOC

Body

TOC Discussion Frames !

n

TOC frameBody Frame

Implementation: Frames



n

Web Implementation

Database

Setup

Implementation



Implementation: Overview

IGT-Site, a portable DB driven Web Site 26nnn

Design

Implementation of the DB

• Backend: relational data store• Frontend: forms to access the backend• Control of Functionality

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


Types of information

Design of the DB Backend

• Specific types: People, Publications, Projects, Courses, Services, Products

• General type: Infos

Field types• Internal: descriptions, abstracts, keywords, etc.• Links: resources (e.g. full papers)

ImplementationAny relational, SQL compliant database,

e.g. SQL-Server or MS-Access

Implementation: Design Backend


Excerpt of the DB BackendImplementation: DB excerpt


Design






Implementation: Design Frontend


1300 lines of code (MS Visual Basic) 2 variables > 40 forms, 40 defined queries

DB Frontend

Avoid dysfunctional links !Control of Functionality

• Internal Consistency: guaranteed by DB• Hardcodes Links: Web diagnostic software

(include "Show All" in TOC !)

MS-AccessImplementation: Frontend & Functionality


Design






Implementation: Security



Web Implementation

Database

Setup of IGT-Site

Implementation



Implementation: Setup


nn

n

Setup of the NT Servers

Setup of IGT-Site

• Domain Server: account "IGT" for Intranet• Web Server: account "AnonWWW"

shares IGT_Site, PersonalResources

Setup of Internet Information Server (IIS)

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



n

Motivation

Aim

Design

User Interface

Implementation

Outlook

Summary

Tolerant Search Engine

DB Frontend comfort

TOC through DHTML

Outlook


Summary of IGT-Site

n

Motivation: ETH, maintenance, content

Aim: General, content, form

Design: why a DB, connectivity, access

User Interface: Web and DB interface

Implementation: Frames, DB, setup

Outlook: Tolerant search, Frontend, DHTML

Summary


Thank you for your patience ...

n

End

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.

Documents

site access

db design

old site

site guide

n design of igt

db connectivity slide

db browser

index design slide