Transcript IGT-WebSite.pps

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
IGT-Site, a portable
database driven Web Site







Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
IGT-Site, a portable DB driven Web Site
2
n
Motivation
ETH internally
New politics at ETH
Expenditure for old Site
Great effort since 1994, hard to update
Offering more Content
Full text of Publications
People
IGT-Site, a portable DB driven Web Site
3
n
IGT-Site, a portable DB driven Web Site
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
IGT-Site, a portable DB driven Web Site
4
n
Aim: Index
Aim of IGT-Site
General
Up-to-Date (delegation!)
Limited maintenance
Content
Way
For academic and engineering community
For company
members
Info
about staff
Publications
of Presentation
Guide for using the Internet
Projects
Content is important,
Specific links
not eye catching features
Consistent look and feel
Courses
and Lectures
Straightforward
navigation
Scientific
services
and products
Info just some
mouse clicks
away
Further infos
IGT-Site, a portable DB driven Web Site
5
n
Titel
Aim: Index
IGT-Site, a portable DB driven Web Site
Design
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
IGT-Site, a portable DB driven Web Site
6
n
Design of IGT-Site
Design: Index
Basics
Dynamic or live data, DB, browsers, scalability
Database Connectivity
Client or server control, CSS, ASP
Why using a DB?
Update, user level, consistency of data and look & feel
Access to the DB
Browser via ASP and ADO, Frontend in MS-Access
IGT-Site, a portable DB driven Web Site
7
n
Design of IGT-Site:
Design: Basics
Basics

are dynamic data required, and if yes,
how should they be generated ?

should live data be manipulated ?
expected traffic volume (scalability)
which clients should be supported?



No client sided ActiveX controls and
Java Applets!
IGT-Site, a portable DB driven Web Site
8
n
Design of IGT-Site
Design: DB Connectivity
Basics
Dynamic or live data, DB, browsers, scalability
Database Connectivity
Client or server control, CSS, ASP
Why using a DB?
Update, user level, consistency of data and look & feel
Access to the DB
Browser via ASP and ADO, Frontend in MS-Access
IGT-Site, a portable DB driven Web Site
9
n
Design of IGT-Site:

Database Connectivity
Design: DB Connectivity 2/3 tier
Two fundamentally different strategies:
1. browser-sided plug-ins (2-tier architecture)
2. server-sided control (3-tier architecture)
IGT-Site, a portable DB driven Web Site
10
Design of IGT-Site:

Database Connectivity
Design: DB Connectivity DNA
Two fundamentally different strategies:
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,
IGT-Site, a portable DB driven Web Site
11
n
Design of IGT-Site:

Database Connectivity
Design: DB Connectivity ASP
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))

server-sided includes :
• adds text, graphic, or application info to HTML
• get info about a file or display a CGI variable
IGT-Site, a portable DB driven Web Site
12
n
Design of IGT-Site:

Database Connectivity
Design: DB Connectivity SQL,Scripts
Two fundamentally different strategies:
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
IGT-Site, a portable DB driven Web Site
13
n
Design of IGT-Site:
Database Connectivity
Design: DB Connectivity HTML 4

HTML 4.0 (= Dynamic HTML) :
• Document Object Model
• Cascading Style Sheets

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)

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.
IGT-Site, a portable DB driven Web Site
14
n
Design of IGT-Site
Design: W hy a DB
Basics
Dynamic or live data, DB, browsers, scalability
Database Connectivity
Client or server control, CSS, ASP
Why using a DB?
Update, user level, consistency of data and look & feel
Access to the DB
Browser via ASP and ADO, Frontend in MS-Access
IGT-Site, a portable DB driven Web Site
15
n
Design of IGT-Site:
Why using a DB?
Design: W hy a DB Details
Reasons to avoid hardcoding all information in HTML-pages:
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
IGT-Site, a portable DB driven Web Site
16
n
Design of IGT-Site
Design: Access to DB
Basics
Dynamic or live data, DB, browsers, scalability
Database Connectivity
Client or server control, CSS, ASP
Why using a DB?
Update, user level, consistency of data and look & feel
Access to the DB
Browser via ASP and ADO, Frontend in MS-Access
IGT-Site, a portable DB driven Web Site
17
n
Design of IGT-Site: Access
Design: Access to DB Details

to the DB
For displaying data from the browser:
• via ASP and ADO:
SQL query is packed in a server object, dispatched and
parsed and executed by the Web server
(show details about ADO:

)
For editing data: from a User Frontend:
• Easy to use forms in MS-Access.
(Access, in contrast to HTML, provides support for forms, e.g.
relational forms)
IGT-Site, a portable DB driven Web Site
18
n
IGT-Site, a portable DB driven Web Site
User Interface
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
IGT-Site, a portable DB driven Web Site
Web Interface
DB Interface
19
n
Web Interface
User Interface: W eb
3 Frame Layout:
• header frame
• table of contents
(TOC)
• topic or body frame
n
DB Interface
User Interface
User Interface: DB
Admin Interface
IGT-Site, a portable DB driven Web Site
21
n
IGT-Site, a portable DB driven Web Site
Implementation
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
22
IGT-Site, a portable DB driven Web Site
n
Implementation
Implementation: Overview
Web Implementation
Frame Organization
Table of Contents
Context-sensitive Help
Database
Design
Deployment of the User Frontend
Security Considerations
Setup
Setup of the NT Servers
Setup of Internet Information Server (IIS)
Adaptations for the Company
IGT-Site, a portable DB driven Web Site
23
n
Frame Organization
Implementation: Frames
Header Frame
static file
Main Body Frame
TOC frame
Body Frame
TOC
Body
TOC
 Discussion Frames !
n
Implementation
Implementation: Overview
Web Implementation
Frame Organization
Table of Contents
Context-sensitive Help
Database
Design
Deployment of the User Frontend
Security Considerations
Setup
Setup of the NT Servers
Setup of Internet Information Server (IIS)
Adaptations for the Company
IGT-Site, a portable DB driven Web Site
25
n
Implementation of the DB
Implementation: Design

Design
• 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
IGT-Site, a portable DB driven Web Site
26
n
Design of the DB Backend
Implementation: Design Backend

Types of information
• Specific types: People, Publications, Projects, Courses,
Services, Products
• General type: Infos

Field types
• Internal:
• Links:

descriptions, abstracts, keywords, etc.
resources (e.g. full papers)
Implementation
Any relational, SQL compliant database,
e.g. SQL-Server or MS-Access
IGT-Site, a portable DB driven Web Site
27
n
Excerpt of the DB Backend
Implementation: DB excerpt
IGT-Site, a portable DB driven Web Site
28
n
Implementation of the DB
Implementation: Design Frontend

Design
• 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
IGT-Site, a portable DB driven Web Site
29
n
DB Frontend



Implementation: Frontend & Functionality
MS-Access
1300 lines of code (MS Visual Basic)
2 variables
> 40 forms, 40 defined queries
Control of Functionality

Avoid dysfunctional links !
• Internal Consistency: guaranteed by DB
• Hardcodes Links:
Web diagnostic software
(include "Show All" in TOC !)
IGT-Site, a portable DB driven Web Site
30
n
Implementation of the DB
Implementation: Security

Design
• 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
IGT-Site, a portable DB driven Web Site
31
n
Implementation
Implementation: Setup
Web Implementation
Frame Organization
Table of Contents
Context-sensitive Help
Database
Design
Deployment of the User Frontend
Security Considerations
Setup of IGT-Site
Setup of the NT Servers
Setup of Internet Information Server (IIS)
Adaptations for the Company
IGT-Site, a portable DB driven Web Site
32
Setup of IGT-Site
Setup of the NT Servers
Implementation: Setup Details

• Domain Server: account "IGT" for Intranet
• Web Server: account "AnonWWW"
shares IGT_Site, PersonalResources

Setup of Internet Information Server (IIS)
Execute set of (WinBatch-) batch files:
• copy directory tree and set permissions
• create account "AnonWWW" and shares
• setup Site and virtual directories

Adaptations for the Company
Company acronym (variable In JavaScript)
Username/pw for Backend, Frontend, Web access
n
IGT-Site, a portable DB driven Web Site
33
n
IGT-Site, a portable DB driven Web Site
Outlook
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
Tolerant Search Engine
DB Frontend comfort
TOC through DHTML
IGT-Site, a portable DB driven Web Site
34
n
Summary of IGT-Site
Summary






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
35
IGT-Site, a portable DB driven Web Site
n
Thank you for your patience ...
End
IGT-Site, a portable DB driven Web Site
36
n