1000 Chapter 23 INTRODUCTION TO WEB PROGRAMMING

Tip I need to begin with some basic concepts, such as the components of the Web and the evolution from static Web pages to Web applications. If you’re already familiar with HTML or the Web, bear with us and pick up the discussion when we get to material that’s new to you. If you have a good command of HTML and ASP, you can skip ahead to the section “Building a Web Application.”

An HTML Primer

Hypertext Markup Language (HTML) is the language used to prepare most documents for online publication. HTML documents are also called Web pages; a page is what you see in your browser at any time. Each Web site, whether on the Internet or on an intranet, is composed of multiple related pages on a particular server, and you can switch among pages by following hyperlinks. The collection of public HTML pages out there makes up the World Wide Web.

A Web page is basically a text file that contains the text to be displayed and references to other elements such as images, sounds, and of course, other documents. You can create HTML pages with a text editor such as Notepad or with a “what you see is what you get” (WYSIWYG) application such as Microsoft FrontPage. In either case, the result is a plain text file that computers can easily exchange. The browser displays this text file on the client computer by interpreting part of the text as instructions and presenting the rest as content.

Web pages are stored on computers that act as servers: they provide a page to any computer that requests it. Each server computer has an address, or Uniform Resource Locator (URL), that is something like the following:

http://www.example.com

The first portion, http, is the protocol used in accessing the server, and www.example.com is the name of the server on the Internet. All computers on the Internet have a unique, four-octet numeric address, such as 193.22.103.18. This numeric address is known as the Internet Protocol (IP) address, which is more difficult for us humans to remember than names. The server looks up the mnemonic names in tables and translates them into IP addresses.

To post an HTML document on a computer so that users can access and display it with their browsers, the computer that hosts the document must run a special application called the Web server. The Web server acknowledges requests made by other computers—the client computers—and supplies the requested document. The browser, which is the application running on the client computer, gets the document and displays it on the screen.

HTML Code Elements

The simplest component of the Web is HTML, which is a basic language for formatting documents that are displayed in a Web browser. The primary task of the browser is to render documents according to the HTML instructions they contain and display them on the monitor.

HTML is made up of text-formatting tags that are placed in a pair of angle brackets; they usually appear in pairs. The first, or opening, tag turns on a formatting feature, and the matching closing tag turns it off. To format a few words in bold, for example, enclose them with the <B> and </B> tags, as shown here:

Some <B>words</B> in the sentence are formatted in <B>bold</B>.

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

AN HTML PRIMER 1001

Of course, not all tags are as simple. The <TABLE> tag, for example, which is used to format tables, requires additional tags, like the <TR> tag, which delimits a new row in the table, and the <TD> tag, which delimits a new cell in a row.

Tags are also assisted by attributes, which are keywords with special meanings within a specific tag. The <A> or “anchor” tag, which is used to insert a hyperlink in the document, recognizes the HREF attribute. The syntax of a hyperlink to Microsoft’s home page on the Web would be something like:

This <A HREF=”http://www.microsoft.com”>link</A> leads to Microsoft’s home page.

The text between the <A> and </A> tags is marked as a hyperlink (displayed in a different color and underlined). The HREF attribute in the <A> tag tells the browser which URL, or address, to jump to when a user clicks this hyperlink. (For more on attributes, see the section “Attributes” later in this chapter.)

HTML Syntax and XHTML

HTML 4, the last version of the language, was released in 1997. In January 2000, the World Wide Web Consortium (W3C) released XHTML 1 (for Extensible HTML). This standard is a reformulation of HTML to comply with XML syntax rules; it uses almost the same set of tags, but with several restrictions:

HTML 4 code was not case-sensitive; for example, you could enter the opening table tag as <table> or <TABLE>. Lowercase items will work with old or new browsers; but uppercase ones won’t work with future versions, because XML (and therefore XHTML) won’t read them. Note: In this book, I use uppercase for HTML tags, only so that they stand out. The projects on the CD use lowercase for tags.

In HTML 4, attribute values only needed to be quoted in certain circumstances. In XHTML, all attribute values must be in quotation marks.

In HTML 4, some tags didn’t need to be closed; you could enter a <P> paragraph tag, type some text, and start the next paragraph with another <P>, without ever using a closing </P> tag. Browsers just figured it out; they’d “know” that when the new paragraph began, that meant the old one had to end:

<P>This is a paragraph. <P>This is a new paragraph.

In XHTML, every element must be closed. This means that any element that includes content must have paired opening and closing tags.

<p>This is a paragraph.</p> <p>This is a new paragraph.</p>

There are other differences, but these are the important ones during this transition phase from HTML to XHTML. You can learn more about XHTML from books such as Mastering XHTML by Tittel et al. (Sybex, 2001) or from the W3C Web site:

http://www.w3.org/MarkUp/

In addition to the formatting commands (HTML is basically a document-formatting language), HTML can handle a few controls, which are known as HTML controls. These controls include text boxes, radio buttons, check boxes, buttons (specifically, a Submit and a Reset button), and a few

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

1002 Chapter 23 INTRODUCTION TO WEB PROGRAMMING

more simple controls. The user can enter data or make selections on these controls and submit them to the server by clicking the Submit button. The Submit button may have any caption, but its function is to submit the data on the various controls on the page to the server by appending them to the server’s URL. The server reads these values, processes them, and prepares a new page, which is downloaded to the client. You’ll find out more about the HTML controls and how they’re submitted to the server later in this chapter.

You’re more than familiar with this interaction model, and it’s no different with ASP.NET. No matter what you do on the server side, it’s the client’s capabilities that determine the structure of the application running on the server. ASP.NET uses this model to interact with the browser. It does a fine job of hiding most of the mundane details and gives you the illusion that you’re writing code for a client that can execute VB applications. But in reality, ASP accepts the values submitted by the client and creates a new HTML file to download to the client.

As a VB programmer, you’ll have no problem picking up the syntax of HTML. It’s a very simple language, and you can pick up the basics as you go along. The visual tools of VB.NET allow you to create HTML documents with point-and-click operations, so a thorough knowledge of HTML is not really required for developing Web applications. However, you need to understand how clients interact with Web servers.

Server-Client Interaction

A Web site consisting of HTML pages is interactive only in the sense that it allows the user to jump from page to page through hyperlinks. The client requests documents from the server, and the server supplies them. In this simple interaction model, which dominates the Web today, Web pages reside on the disks of the servers waiting to be requested by a client. Obviously, updating the information entails editing the HTML documents; no wonder most sites can’t provide up-to-date information. The disadvantage of this model is that the client can’t engage in a conversation with the server so

that information can flow in both directions. The development of gateway interfaces such as the Common Gateway Interface (CGI) has enabled Web authors to add dynamic content to the Web. The client can send specific requests to the server (e.g., “show me the invoices issued last month” or “show me the customers in North America”). The server doesn’t return a static page (a page that exists on the disk and can be called by its name). Instead, it executes a script, or application, that extracts “live” data from a database, formats the data as an HTML document, and sends the document to the client. The client sees up-to-date, accurate information.

The disadvantage of gateway programs is that they are difficult to implement and maintain. To simplify CGI programming, Microsoft introduced several technologies, the most recent and

popular being Active Server Pages (ASP). An Active Server Page is a program (or script), usually written in VBScript, which interacts with the client. ASP scripts can also interact with other components on the server. The clients can’t access a database directly, for example, but an ASP script can. By

passing the proper parameters to the ASP script, an HTML page can request data from the database. The latest version of ASP, ASP.NET, is a greatly improved version of ASP and allows you to write scripts that run on the server in VB.NET. The first advantage of using VB.NET on the server is that the application running on the server is compiled and runs much faster that a script written in VBScript. Actually, you can use any language that runs in the environment of Visual Studio to write an ASP application—you can write Web applications in COBOL, if you wish. There are many more advantages, such as exploiting the features of the IDE.

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

AN HTML PRIMER 1003

ASP was limited to the HTML controls. ASP.NET uses a new family of controls, the Web controls. The Web controls exist on the server, and you can program against them, just as you program Windows controls. Your code resides on the server and manipulates Web controls. When it’s time to send a response to the client, ASP.NET translates the Web controls into HTML controls and HTML code, and sends to the client a page that can be rendered by the browser. As you will realize after reading this and the following chapter, ASP.NET abstracts much of the mundane tasks of client/server interaction and makes the process look like programming a Windows application.

I should clarify this point for the benefit of readers who are already familiar with ASP. If you’re new to Web programming, please bear with me. Before you reach the end of this chapter, everything will make perfect sense. With ASP, the browser submits the contents of the controls on the current page to the server when a special button is clicked, the Submit button. This button may be named anything: Go, Show Results, Place Order, whatever. The HTML code of the page uses a Submit button to send the data on the current page to the server (or post the page back to the server, as this process is known).

The ASP script on the server knows the names of the controls on the page and must extract their values from the QueryString property of the Request object. If the page being submitted contains two Text controls, named ProdID and Quantity, it must use the following statements to extract the values on these two controls:

ProductID = Request.QueryString(“ProdID”)

Quantity = Request.QueryString(“Quantity”)

Then, it must process them (retrieve the price of the specified product from a database, multiply it by the quantity ordered, and apply some discount) and create a page to send to the client. The page is created by sending HTML code to the client through the Write method of the Response object:

Response.Write “Thank you for ordering”

Response.Write “Your total is “ & price * Quantity

where price is a variable that holds the product’s price (I’m not showing the code that retrieves this value from the database).

With ASP.NET, you can use the TextBox Web control, which is very similar to the

Windows TextBox control. Let’s say that the names of the two TextBoxes are ProdID and Quantity, and that the form also contains a Label control. To program the application, you double-click the Submit button and insert the following statements in its Click event handler:

Label1.Text = “Thank you for ordering” & vbCrLf

Label1.Text = Label1.Text & “Your total is “ & price * Quantity.Text

This is VB.NET code, which will be compiled and executed on the server. You don’t have to use the Request object to retrieve the values of the TextBox controls, and you don’t have to use the Response object to create a new page. The results of the processing are placed on a Label control on the current form, which is then sent to the client. Obviously, ASP.NET parses the data submitted by the client through the QueryString object and makes them available to your code as control properties.

In short, ASP.NET is a vastly improved version of ASP, abstracting many of the tasks in client/server interaction. It makes the whole process look like a Windows application to the developer, but behind the scenes it generates the HTML that will produce the desired page on the client. This page contains straight HTML code.

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com