|
Web Development Overview |
|
| Web Toolkit Tutorial Home | Table of Contents | Application Overview |
|
In this tutorial, you are going to create a small data-driven web site utilizing
industry-standard methodologies which are implemented in Smalltalk. These methodologies
are collectively supported by the VisualWorks Web Toolkit. You will be
starting totally from scratch and although there are a myriad of WYSIWYG (What You See
Is What You Get) HTML editors on the market, a simple text editor is all you will need
for this tutorial.
|
||||||||||||||||
|
This lesson introduces you to current web development paradigms. It will define terms and
identify where the Web Toolkit fits in with these methodologies.
|
||||||||||||||||
|
Figure 1. The Browser/Webserver relationship Above is an over-simplified diagram of how the Internet works. Someone at a machine connected to the Internet runs a web browser program (Internet Explorer, Netscape Navigator, Mozilla, Opera, just to name a few) and makes a request for a document (or file) which is found at a certain location (called a URL– Uniform Resource Locator) using the HTTP protocol (Hyper Text Transfer Protocol). The browser sends the request out to the Internet where another machine connected to the Internet, called a web server, awaits such a request. The web server attempts to find the requested document (or file) at the location specified and if found, returns it back to the requesting client. This is called a response. Start getting used to the terms request and response because, in the Web Toolkit, these terms are actually intrinsic objects of both the ASP and J2EE models and you will use various methods of the request and response objects in the web application. 
Figure 2. The Browser/Webserver relationship in more detail All web servers can do this – retrieve a “static” HTML document (file). It is the easiest thing you can ask a web server to do since it virtually has to do nothing except fetch the file from the operating system, add some HTTP stuff around it and send it back to the requestor. In the box below is an example of a static HTML document (file). Below the box is a picture of how the file (document) is displayed in the web browser. As you can see, a web document is comprised of words (Welcome, Click, friendly, etc.) and characters surrounded by the angle brackets (<h2>, <br>, <font>, etc.). The text strings surrounded by angle brackets are called “tags” and they are instructions to the browser as to how to render or display something. These tags are collectively called HTML (Hyper Text Markup Language). 
Figure 3. Sample HTML file and how it's displayed in a Browser This example (above) shows a web browser program (in this case Mozilla) making a request for a document called hello.htm which is found at a certain location (localhost:8008/sandbox) using the Hyper Text Transfer Protocol (http://). The server retrieves the document and sends it back to Mozilla which displays the contents of the document according to the “tags” found within the document. To find out more about HTML and the “tags” found within HTML documents, it is suggested that you view the HTML primer. |
||||||||||||||||
|
Proceed to the HTML primer.
|
||||||||||||||||
|
However, the more useful web sites, such as Amazon.com, do more than just return
static HTML pages.
Figure 4. Amazon.com's Home page (at one time) The content changes depending on many factors and in order for a web server to do that, it must possess the ability to dynamically create an HTML document based upon some sort of intelligence (I.e. logic processing instructions) from a repository of data. 
Figure 5. The web server side in more detail This type of request makes the web server work a little harder – retrieve an HTML document (file) that has code (or server-side instructions) within it. The web server must now parse the file, separating text from code, in order to generate an HTML document “on the fly”. Different web servers, on different platforms, do this in many different ways. Below is an example of an HTML document that contains code or instructions. The code portion of the file is surrounded by the "percent" tags. 
Figure 6. A web page that has Smalltalk code in it This example shows a web browser program (Mozilla) making a request for a document called hello.ssp which is found at a certain location (localhost:8008/sandbox) using the Hyper Text Transfer Protocol (http://). The server will parse this document (actually read it line by line) in order to separate text from code. The “code tags” are the angle brackets with the percent sign (<% and %>). The web server will start sending back a data stream (all text and tags - everything that is not code) until it finds a code tag. It will then stop sending out the data stream and start executing the code within the code tags (<% and %>). If the code instructs the web server to “display something” (i.e. generate output), it gets added to the data stream and will be sent out once it has finished executing the code within the “percent” tags. In this case, the code tells the web server to output today’s date. However, the code is Smalltalk code and only a web server that understands Smalltalk can process this page correctly. At the top of Figure 6 is the actual contents of the file hello.ssp (which the web server refers to as a “Smalltalk Server Page”). The SSP extension tells the web server (in our case VisualWave) to not just send this file back to the requestor but to open it and scan for “code tags”. Code tags are the percent signs with the angle brackets. The first code tag (<%) tells the web server to stop streaming text and start parsing, interpreting and processing the code until the closing code tag (%>) is found. Typically the code between the tags outputs additional HTML. This concept is known as “scripting.” At the bottom of Figure 6 is how the file (document) is displayed in the web browser. As you can see, the web server processed the code "Date today" and generated the appropriate output content. |
||||||||||||||||
|
Web DevelopmentA web server needs “code” (a language) to access data stores and to perform logic processing in order to create HTML documents “on the fly”. This is referred to as Web Development.Accessing data stores is not really a problem for web servers. Popular databases such as Oracle, MS SQL Server, Sybase, Informix, mySQL, PostGreSQL, et. Al. are all easily accessed from multiple platforms and multiple languages. The question is, “Which web server (or language) is the best?” Below is a list of some popular (mainstream) vendors who deliver web server products:
If you have some experience and/or background in developing web pages using the J2EE or ASP model, then learning how to use the Web Toolkit will be quite familiar to you. If you don't, that's OK too because as you start developing the sample application, you will be learning various coding techniques from both the J2EE and ASP development models. |
||||||||||||||||
|
|
Summary
|
| Web Toolkit Tutorial Home | Table of Contents | Application Overview |