1 / 36

IGT-Site, a portable, database driven Web Site

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.

sundari-chirag
Télécharger la présentation

IGT-Site, a portable, database driven Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

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

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

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

  5. Aim: Index Aim of IGT-Site General Up-to-Date (delegation!)Limited maintenance Content Content For academic and engineering community For company members For company members Info about staffPublicationsProjectsCourses and LecturesScientific services and productsFurther infos Way of Presentation Way of Presentation Guide for using the InternetSpecific links Content is important, not eye catching featuresConsistent look and feelStraightforward navigationInfo just some mouse clicks away IGT-Site, a portable DB driven Web Site n

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

  7. Design: Index Design of IGT-Site Basics Dynamic or live data, DB, browsers, scalability Database Connectivity 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 Access to the DB Browser via ASP and ADO, Frontend in MS-Access IGT-Site, a portable DB driven Web Site n

  8. Design: Basics Design of IGT-Site: 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 n

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

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

  11. Design: DB Connectivity DNA Design of IGT-Site:Database Connectivity • 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 n

  12. Design: DB Connectivity ASP Design of IGT-Site:Database Connectivity • 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 n

  13. Design: DB Connectivity SQL,Scripts Design of IGT-Site:Database Connectivity • 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 n

  14. Design: DB Connectivity HTML 4 Design of IGT-Site:Database Connectivity • 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 n

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

  16. Design: Why a DB Details Design of IGT-Site:Why using a DB? 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 n

  17. Design: Access to DB Design of IGT-Site Basics Basics Dynamic or live data, DB, browsers, scalability Database Connectivity Client or server control, CSS, ASP Why using a DB? 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 n

  18. Design: Access to DB Details Design of IGT-Site:Access 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 n

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

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

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

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

  23. Implementation: Overview Implementation Web Implementation Frame OrganizationTable of ContentsContext-sensitive Help Database DesignDeployment of the User FrontendSecurity 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 n

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

  25. Implementation: Overview Implementation Web Implementation Frame OrganizationTable of ContentsContext-sensitive Help Database DesignDeployment of the User FrontendSecurity 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 n

  26. Implementation: Design Implementation of the DB • 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 n n n

  27. Implementation: Design Backend Design of the DB Backend • Types of information • Specific types: People, Publications, Projects, Courses, Services, Products • General type: Infos • Field types • Internal: descriptions, abstracts, keywords, etc. • Links: 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 n n n

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

  29. Implementation: Design Frontend Implementation of the DB • 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 n n n

  30. Implementation: Frontend & Functionality DB Frontend 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 n n n

  31. Implementation: Security Implementation of the DB • 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 n n n

  32. Implementation: Setup Implementation Web Implementation Frame OrganizationTable of ContentsContext-sensitive Help Database DesignDeployment of the User FrontendSecurity 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

  33. Implementation: Setup Details Setup of IGT-Site • Setup of the NT Servers • 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 n IGT-Site, a portable DB driven Web Site n

  34. Outlook IGT-Site, a portable DB driven Web Site 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 n

  35. Summary Summary of IGT-Site • 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 IGT-Site, a portable DB driven Web Site n

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

More Related