In one sense, Web programming is not an integral part of Visual Basic .NET. However, Visual Studio .NET includes provisions for Web programming as part of its IDE. Because you can use Visual Basic .NET code as part of a Web page, I've included this chapter as an extension of Visual Basic .NET programming. However, before we launch into Web programming, you need to understand the basics of how Web pages are written and displayed on a Web browser.
HTML and Static Web Pages
When you visit a Web page on the Internet, you're looking at a display that was built as a Hypertext Markup Language (HTML) script. A static Web page is one where the HTML script never changes. Static Web pages always appear the same, regardless of who visits the page, how the viewer arrived at that page, or whether the viewer has visited that page before. There is no interaction between the user and the Web page. The user simply stares at the page.
An example of a static Web page script that uses HTML is shown in Listing 26.1.
Listing 26.1 A Static Web Page
<html> <title>Sample Static Page</title> <body> <h1>This is a static web page</h1> <br> Pretty exciting stuff, huh? </body> </html>
Even though you might never have seen an HTML page before, it will take you about five seconds to figure out how HTML works. An HTML file consists of directives called tags. Most HTML tags occur in pairs, using the following syntax:
< Tag_Name_start > TagExpressions </ Tag_Name_Stop >
For example, in Listing 26.1, the line
<title>Sample Static Page</title>
begins with a title tag, followed by the text that is to appear in the title, followed by the ending tag that turns off the title tag. Notice how the ending tag is the same as the starting tag, except for the forward slash. This sample HTML line, therefore, causes Sample Static Page to appear in the title bar of the browser.
The body tag in Listing 26.1 is used to mark the beginning of the HTML body for the Web page. The h1 tag is used to display text using a relatively large font. The br , or break, tag is simply a line break and causes the next line of text to appear on a new line. Notice how all the tags except the break tag appear in pairs. (If you think about it, a break tag doesn't need an ending tag because it doesn't need to be turned off at some subsequent point.) Figure 26.1 shows how our static HTML Web page looks using Internet Explorer 6.0.
Figure 26.1. A sample static Web page.
You can compare what you see in Figure 26.1 with the HTML script in Listing 26.1 and figure out what each HTML tag does. This all seems pretty simple, but let's dig a little deeper to see how we got from Listing 26.1 to Figure 26.1.
How Web Pages Work
The process of writing a static Web page and having it displayed on a Web browser isn't that difficult. The first step is to write the HTML script for the Web page. As a general rule, static Web pages are pretty simple and can be written with any text editor. In fact, the Web page shown in Figure 26.1 was written with Notepad, a simple text editor that's distributed with Windows. The HTML page is then saved on the Web server.
The Web server often is a computer that's dedicated to doing nothing else but serving Web pages. What's interesting is that a Web server does not have to be a separate computer. In fact, I'll show you how you can configure your own computer to behave like a Web server later in this chapter. Creating a pseudo Web server on your own computer is a convenient way to test your Web pages without using the Internet.
The second step in displaying a Web page occurs when a user sends a request for the Web page from his Web browser. A Web browser is a program that is designed to display Web pages. Microsoft's Internet Explorer and Netscape Navigator are two popular Web browsers, but there are many more. The request for the Web page is sent to the Web server by the browser. If you look closely at Figure 26.1, you can see that I requested a page named Static.htm stored at a Web server address of localhost/ASPXHome. The http that you see at the start of the address means that we're using the Hypertext Transfer Protocol (HTTP) for exchanging information. Collectively, the line
says that we will use the Hypertext Transfer Protocol to communicate with the Web server. The line forms what is known as a Uniform Resource Locator, or URL. It is the URL that tells the browser where to find the Web server.
In the third step, the Web server looks for the requested HTML file (for example, Static.htm ) that was requested by the browser. Assuming that the Web server finds the page, the fourth step sends the HTML page back to the browser. The final step occurs when the browser interprets the HTML sent from the Web server and displays it to the user. This process can be illustrated as shown in Figure 26.2.
Figure 26.2. How a Web page is displayed.
Before you can perform these steps yourself, we must see whether your system has things set up properly to process Web pages. If you have a server in your house, you probably have your system configured to process Web pages. However, most people have just a single computer at home and do not have access to their own server. In the next section, I'll show you how to configure your system to look like a Web server. This will enable you to experiment with Web pages without actually having a separate server. (Of course, you could go out and buy another computer and configure it to be a dedicated Web server if you choose.)
Configuring Your Own Web Server
If you followed the installation instructions in Chapter 1, "Getting Started with Visual Studio .NET," you already have much of the work done for creating your own Web server. The first thing you must do is create a directory where you would like your HTML and other Web files to reside. Use Microsoft's Explorer to create a directory similar to that shown in Figure 26.3. Notice that we've created the new directory off the inetpub\ wwwroot \ directory. The inetpub\wwwroot\ directory is the default Web directory for our work. You can place your test files in the MyASPXFiles (or any other) directory off the root directory.
Figure 26.3. Creating a new directory for your Web files.
In the next step, you'll need to use the Internet Information Services (IIS) program that's distributed with Windows. On most systems, you can find IIS using the following Windows directory path :
Although you can use other programs to open IIS, such as the Microsoft Management Console, I just made a shortcut on the desktop to the IIS.MSC program. If you don't want to use a shortcut, type the pathname to IIS into the Open box using the Start, Run menu sequence. After the program begins execution, right-click on the Default Web Site entry in the IIS information tree. Your screen should look similar to the one shown in Figure 26.4. (It's unlikely that your computer is named jack . Your screen will tell you the reference name that Windows uses for your computer.)
Figure 26.4. Using Internet Information Services to create a virtual directory.
For security reasons, it isn't a good idea to use your physical file directory as a Web site location. Instead, you should create a virtual directory name for the physical directory name you created earlier (that is, the directory name you created in Figure 26.3). Figure 26.4 shows how you begin the process of creating a virtual directory once you have IIS running.
After initiating the New, Virtual Directory sequence, you're greeted with the Virtual Directory Creation Wizard dialog box. This is shown in Figure 26.5. Click Next to begin the process of creating a virtual directory.
Figure 26.5. The Virtual Directory Creation Wizard dialog box.
The program then asks you to enter the name that you want to use as the virtual directory name. The virtual directory name becomes the name that users will use when requesting a Web page from your Web site. I elected to use ASPXHome for the virtual directory name in this example. This is shown in Figure 26.6.
Figure 26.6. The Virtual Directory Creation Wizard dialog box.
After you've entered the virtual directory name you want to use, click the Next button.
The wizard now asks you to enter the physical directory where the Web site files will reside. This is the pathname that you entered for Figure 26.3. Because we selected C:\inetpub\wwwroot\MyASPXFiles , that becomes the physical directory entered in Figure 26.7. After you've entered the proper directory name, click the Next button.
Figure 26.7. The physical directory name for the Web site.
The program now shows you the default access permissions that are to be associated with your virtual directory. For now, just accept the default settings shown in Figure 26.8.
Figure 26.8. The Web site access permissions.
Now click the Next button. The program will display a message telling you that you've completed the creation of your virtual directory. Click the Finish button to dismiss the dialog box. You'll now see your virtual directory listed under the default Web site directory.
If you right-click on your new virtual directory, you can review its properties by selecting the Properties option. The properties for my virtual directory are shown in Figure 26.9.
Figure 26.9. The physical directory name for the Web site.
Figure 26.9 shows the physical path ( C:\inetpub\wwwroot\MyASPXFiles ) for my virtual directory ( ASPXHome ) plus the access permissions. Notice that only the Read permission is checked. If you check the Script Source access box, you would allow users to view the source code for your programs. If the Write box were checked, users would be able to not only view the source, but change it as well. Because neither of these options is a very good idea, we leave both of these boxes unchecked (which is the default). Because you went to all the trouble of creating a virtual directory for security reasons, leave the Directory Browsing option unchecked to prevent users from browsing through your physical directories.
Finally, leave the Execute Permissions set to Scripts only. This enables users to execute Web pages that contain scripts as well as static pages. However, it will not allow them to execute any other program files that might be located in the directory. Because we didn't change any of the defaults on this page, just click the Cancel button to dismiss the dialog box.
If you copy the program presented in Listing 26.1 to your physical directory, you should be able to run that program using the virtual directory you just created. For example, I named the file in Listing 26.1 Static.htm and copied it to my C:\inetpub\wwwroot\MyASPXFiles physical directory. I then started Internet Explorer and typed in my computer and virtual directory names followed by the HTML filename. Therefore, typing in
produces the display you saw earlier in Figure 26.1.
Although our static Web page works, that's about all it does. Watching paint dry and our static Web page are equally entertaining. Clearly, there has to be a more exciting way to interact with the Web. Fortunately, there is.