Post on 19-Dec-2015
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
IGT-Site, a portable DB driven Web Site 3
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 4
IGT-Site, a portable DB driven Web Site
n
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
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 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
IGT-Site, a portable DB driven Web Site
Titel
Aim: Index
Design
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 DBBrowser via ASP and ADO, Frontend in MS-Access
Database Connectivity
Access to the DB
Design: Index
IGT-Site, a portable DB driven Web Site 8n
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
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 DBBrowser via ASP and ADO, Frontend in MS-Access
Basics
Database Connectivity
Why using a DB?
Access to the DB
Design: DB Connectivity
IGT-Site, a portable DB driven Web Site 10
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
IGT-Site, a portable DB driven Web Site 11n
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
IGT-Site, a portable DB driven Web Site 12n
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
server-sided includes :
Design: DB Connectivity ASP
IGT-Site, a portable DB driven Web Site 13n
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
IGT-Site, a portable DB driven Web Site 14n
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
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
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 DBBrowser via ASP and ADO, Frontend in MS-Access
Basics
Database Connectivity
Why using a DB?
Access to the DB
Design: Why a DB
IGT-Site, a portable DB driven Web Site 16n
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
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 DBBrowser via ASP and ADO, Frontend in MS-Access
Basics
Why using a DB?
Design: Access to DB
IGT-Site, a portable DB driven Web Site 18n
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
IGT-Site, a portable DB driven Web Site 19n
Motivation
Aim
Design
User Interface
Implementation
Outlook
Summary
IGT-Site, a portable DB driven Web Site
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
IGT-Site, a portable DB driven Web Site 21n
User Interface
DB InterfaceAdmin Interface
User Interface: DB
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
IGT-Site, a portable DB driven Web Site 23
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
IGT-Site, a portable DB driven Web Site 25
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
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
IGT-Site, a portable DB driven Web Site 27nnn
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
IGT-Site, a portable DB driven Web Site 29nnn
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 Frontend
IGT-Site, a portable DB driven Web Site 30nnn
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
IGT-Site, a portable DB driven Web Site 31nnn
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: Security
IGT-Site, a portable DB driven Web Site 32
DesignDeployment of the User FrontendSecurity Considerations
Web Implementation
Database
Setup of IGT-Site
Implementation
Frame OrganizationTable of ContentsContext-sensitive Help
Setup of the NT Servers Setup of Internet Information Server (IIS)Adaptations for the Company
Implementation: Setup
IGT-Site, a portable DB driven Web Site 33
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
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
IGT-Site, a portable DB driven Web Site 35
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