Introduction to WebBased Systems HTML XML and Java

Introduction to Web-Based Systems HTML, XML, and Java. Script

2 Outline • • Client/Server Systems HTML XML Java. Script © UW Business School, University of Washington 2004

3 Client/Server Model Presentation Logic Business Logic DBMS Based on the distribution of the three components, N-tier client/server models have been developed © UW Business School, University of Washington 2004

4 Two-Tier Client/Server Architecture © UW Business School, University of Washington 2004

5 Three-Tier Client/Server Architecture Presentation PC/Workstation Application Server NT/Unix Database Server © UW Business School, University of Washington 2004

6 Client-Server Characteristics • Strong emphasis on bringing userfriendliness – Familiar applications and interface to the user • Applications are distributed – Different software component on different machines • Data are usually centralized – Usually on a relational database platform © UW Business School, University of Washington 2004

7 Client-Server Challenges • Advantages – Scalability – Flexibility – User interface • Challenges – Heterogeneous system components • Many platforms, versions • Quality: difficult to predict – Vendor independence • Any choice will limit future options © UW Business School, University of Washington 2004

8 Web-Based System Architecture SOURCE: INTERSHOP © UW Business School, University of Washington 2004

9 Traditional vs. Web-based Clint/Server Model • User interface – Traditional: platform dependent – Web-based: universal • Server – Traditional: server has to communicate with different programs on different platforms – Web-based: only need to generate HTML files © UW Business School, University of Washington 2004

10 Edit Your HTML File • PC – using Notepad – If you have Pront. Page, use HTML editor • UNIX – Use Pico or vi © UW Business School, University of Washington 2004

11 HTML • A type of SGML (standard generalized markup language) • HTML uses paired tags to markup different elements of a page • Tags are not case sensitive © UW Business School, University of Washington 2004

12 A Simple HTML File <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H 1>HTML is Easy To Learn</H 1> Welcome to the world of HTML. This is the first paragraph. <P> And this is the second paragraph. </body> </html> http: //faculty. washington. edu/mfan/ebiz 509/class 3_example 1. html © UW Business School, University of Washington 2004

13 Paragraphs in HTML ¨ Carriage return in an HTML file is not interpreted – Use to change line – Use <p> to start a new paragraph ¨ Any number of white-spaces are compressed into a single one © UW Business School, University of Washington 2004

14 Lists Unnumbered Lists: <UL> <LI> apples <LI> bananas <LI> grapefruit </UL> Numbered Lists: <OL> <LI> oranges <LI> peaches <LI> grapes </OL> © UW Business School, University of Washington 2004

15 Inline Image Syntax: <IMG SRC=Image. Name aligh=top height=50 width=40> Attributes: SRC="image_url" ALIGN="bottom", "middle", "top" – ALIGN tells the browser how to align the image with the neighboring text. HEIGHT="n", WIDTH="n" – HEIGHT and WIDTH specify the display height and width (in pixels) for the image. © UW Business School, University of Washington 2004

16 Hyperlinks ¨ The most important capability of HTML ¨ Both text and image can serve as anchors for the link <a HREF=“http: //www. washington. edu”>University of Washington</a> <a HREF=“http: //www. washington. edu”> <IMG SRC=“uw. gif”></a> © UW Business School, University of Washington 2004

17 Control the Font Text <FONT SIZE= +2>resize the text</FONT> text Text <FONT SIZE= -2>resize the text</FONT> text <FONT SIZE=2>define the font size</FONT> <FONT size=2 face=“arial” color=“red”>define the fond face</FONT> <FONT FACE="arial, helvetica">browser will try arial first, then elvetica of arial is not present</FONT> <B>Bold</B> <I>Italic</I> <center>center</center> line break © UW Business School, University of Washington 2004

18 Table Basic tags <TABLE> defines a table in HTML</TABLE> <CAPTION>the title of the table</CAPTION> <TR>a row within a table</TR> <TH>a table header cell</TH> <TD>a table data cell with the text aligned left and centered vertically</TD> Attributes BORDER - appearing in the TABLE tag ALIGN - can appear in CAPTION, TR, TH, or TD - values: left, center, and right, e. g. align=center. VALIGN - can appear inside a TR, TH, or TD - values: top, middle, bottom. WIDTH=<value_or_percent> © UW Business School, University of Washington 2004

A Table Template <TABLE border=1>  <CAPTION><b> Table Name </b> </CAPTION> <TR>  <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR>  <TR>  <TD> first row, first cell contents </TD> <TD> first row, last cell contents </TD> </TR>  <TR>  <TD> last row, first cell contents </TD> <TD> last row, last cell contents </TD> </TR>  </TABLE> http: //faculty. washington. edu/mfan/ebiz 509/class 3_example 2. html © UW Business School, University of Washington 2004 19

20 XML • e. Xtensible Markup Language • Derived from SGML – Standard Generalized Markup Language • HTML is also a special SGML © UW Business School, University of Washington 2004

21 What’s Wrong with HTML • Presentation-oriented publishing • Lack of structure • HTML does not allow you to define your own tags • Functions of XML – Enable structured data interchange – Distributed processing © UW Business School, University of Washington 2004

22 An Example <? xml version=“ 1. 0”? > <book> <title>XML</title> <author> <First. Name>Sean</First. Name> <Last. Name>Mc. Grath</Last. Name> </author> <Key. Word>XML, Internet</Key. Word> </book> http: //faculty. washington. edu/mfan/ebiz 509/class 3_example 3. xml © UW Business School, University of Washington 2004

23 Java. Script • Scripting language • Java. Script has nothing to do with Java. • Java. Script runs on the web browser - client-side. © UW Business School, University of Washington 2004

24 Java. Script: What It Can and Cannot Do • Control document appearance and content – Generate documents from scratch • Control the browser – Window object has methods to pop up dialog boxes & get inputs – Create & open new windows – Control over which Web pages are displayed • Interact with document content – Form verification © UW Business School, University of Washington 2004

25 Objects • Java. Script is object-oriented • Two basic objects – window: browser windows – document: HTML documents • Objects have properties – object_name. property_name – e. g. image. width, image. height • Methods • Even handlers © UW Business School, University of Washington 2004

26 Java. Script Example 1 <HTML> <HEAD> <TITLE>Example 4</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Java. Script"> document. write("Hello World!") </SCRIPT> </BODY> </HTML> http: //faculty. washington. edu/mfan/ebiz 509/class 3_example 4. html © UW Business School, University of Washington 2004

27 Java. Script Example 2: Open a New Window <HTML> <HEAD> <TITLE>Example 5</TITLE> <SCRIPT language="Java. Script"> function new_window() { win 2 = window. open("ex 1. html", "resizable=yes, height=60, width=60"); } </SCRIPT> <BODY> <a href="#" On. Click="new_window(); ">Open a new window</a>. </BODY> </HTML> http: //faculty. washington. edu/mfan/ebiz 509/class 3_example 5. html © UW Business School, University of Washington 2004

28 Java. Script Example 3: Alert Window <HTML> <HEAD> <TITLE>Example 6</TITLE> <SCRIPT language="Java. Script"> function say. Hi() { win 2 = window. alert("Hi there"); } </SCRIPT> <BODY on. Load="say. Hi(); "> An alert window will show up when you load this page. </BODY> </HTML> http: //faculty. washington. edu/mfan/ebiz 509/class 3_example 6. html © UW Business School, University of Washington 2004

29 Additional Resources for Java. Script • http: //www. webteacher. com/javascript/ © UW Business School, University of Washington 2004