Chapter 28. Building a Basic ASP.NET Site

CONTENTS

graphics/01icon01.gif

 

  •  Setting Up a Workstation for ASP.NET
  •  Setting Up an ASP.NET Site in Dreamweaver
  •  Displaying Dynamic Data Using ASP.NET
  •  Summary

ASP.NET is a new web language that fits into Microsoft's .NET framework. Built on the ASP language, it defines a new way of interacting on the web. It enhances the client/server relationship, making it possible to simply build more powerful web applications. With great features such as web services, you can easily pull onto your page a wide range of functionality, from stock quotes to the position of the planets to an English-to-Pig Latin conversion feature, with just a few lines of code.

This chapter covers how to set up your computer to create ASP.NET pages. As with all of these dynamic chapters so far, you need to have programs installed for this to work correctly.

Setting Up a Workstation for ASP.NET

Before you can make .NET pages, your computer must meet the following basic requirements.

  • Because .NET is a Microsoft product, it works only with the IIS server on Windows. The framework will be installed to its own directory, but you will still use the web root of IIS to serve your pages.

  • If you don't have it already, you will need the Microsoft Data Access Components 2.6 or above installed. (Latest version as of this writing is 2.7; available at www.microsoft.com/mdac.) MDAC is a collection of files that enables ASP.NET to work together with your server and datasources. These include components for ODBC, OLE DB, and ADO technologies.

  • You need to install the .NET Framework or have access to a machine that has it installed. This is the program that actually runs the .NET part of the code. It is available as a download from Microsoft. Be warned: It is 131MB! (http://www.microsoft.com/net/)

When you install the .NET Framework, the installer indicates whether you are missing needed components, such as IIS or MDAC components.

The .NET Framework install is quite painless. There is really nothing to configure after you install it. You don't even need to restart! After you have the .NET Framework installed, and you have IIS running, you are ready to build pages. (If you have installed the Apache server on your machine, make sure that it is turned off for this chapter. You generally want only one server running at a time.)

Setting Up an ASP.NET Site in Dreamweaver

First you need to set up a local site for using ASP.NET. This section covers the steps required to set up a Dreamweaver site in preparation for creating .NET pages.

This discussion explains how to set up a DataSet, which is .NET-ese for a Recordset, and then how to use this DataSet to display the live data.

Setting Up a Local Site

A DSN is a data source name. It basically is a setting made on your computer that points to the database and specifies a driver to use to communicate with that database. This way, Dreamweaver can simply use the DSN name to reference the database. The DSN will then use the database specified within itself. With this setup, you can establish a DSN on your local machine to build and test the site. When you are ready to upload your site to the server, you simply have to have a DSN on the server with the same name that points to your database on the server. Then everything will work as planned. If you are using an ISP, setting up a DSN on the server is usually a simple request. Most good ISPs have a webform for requesting a DSN.

To create a DSN, follow these steps:

  1. Go to the Control Panel (Start > Settings > Control Panel (these instructions differ between operating systems). Open the Administrative Tools and then open Data Sources (ODBC).

    You should see something like what appears in Figure 28.1.

    Figure 28.1. The ODBC Data Source Administrator.

    graphics/28fig01.gif

  2. Go to the System DSN tab. Unless you have a good reason, stick with System DSNs.

  3. Click the Add button. You will be presented with a list of available database drivers. For the Access database included with the book, choose Microsoft Access Driver (*.mdb). Click the Finish button.

  4. In the dialog box that opens, you'll find the Data Source Name field. This is the name of the connection and is the name that you will be choosing when selecting a DSN in Dreamweaver. Be sure to name it well. For our purposes, a name like antiques will work fine. For a description, you can say something like This is the Antiques database for the Inside Dreamweaver book.

  5. In the Database section, press the Select button. This is where you actually specify the database.

  6. In the next dialog box, browse to the antiques.mdb database that you copied to your hard drive. The database will show up in the window on the left when you are in a folder that contains an Access database.

  7. Click OK when you are done. Click OK again to close the next dialog and then once more to close the Database Administrator. You have successfully created a new DSN. Now this database will be available for use in Dreamweaver.

Note

graphics/01icon07.gif

For real web applications, it is not a good idea to put the database in the web root. Those who go looking can find it and download it. It's a good idea to put it outside the web root. Most ISPs specify a specific folder for databases. For ease of database management, I create a folder like c:\databases and put all my databases in there. This way, I always know where they are, and it is easier to create connections.

Exercise 28.1 Setting Up the Antiques Barn Site

Now you need to create a new site for your .NET pages. In this exercise, you set up a .NET site for Antiques Barn.

Create a new local root folder in your hard drive. Copy the chapter_28 folder from the CD into this folder. If you haven't already, copy the antiques.mdb database from the databases/Access folder on the CD and place it in your local root folder.

If you do not have one already, create a DSN to the Antiques database. (See Chapter 26, "Introduction to Dynamic Dreamweaver," for more information on DSNs.)

  1. Go to Site > New Site.

  2. Under Local Info, name the new site ASP.NET.

  3. For local root folder, browse to the chapter_28 folder you copied earlier.

  4. Go to Remote Info.

  5. For Access, choose Local/Network.

  6. For remote folder, browse to the root of your web server. For IIS it is c:\inetpub\wwwroot\.

  7. Go to the Application Server page.

  8. For Server Model, choose ASP.NET VB.

  9. For Access, choose Local/Remote. Choose the server root (same folder as in step 6) for the remote folder if it is not chosen already.

  10. For URL Prefix, type http://localhost unless you have customized your server configuration.

  11. Click OK, and Dreamweaver will build the site.

Your ASP.NET site should now be properly configured.

Setting Up a DataSet

As with all dynamic sites, you need to establish a connection to the database and create a Recordset for the page. The same is true for .NET pages, only here they are referred to as DataSets.

Because of the specifics of the .NET language, DataSet setup requires a slightly different process than other Recordsets require.

To set up a DataSet, follow these steps:

  1. Open a new page. Go to File > New Live Data Page > ASP.NET VB.

  2. Go to the Bindings panel.

  3. Click the plus (+) button and choose DataSet (Query)

  4. Click the Define button next to the Connection field. Click New and OLE DB Connection to create your new connection.

  5. In the OLE DB Connection window, choose the Build button.

  6. Go to the Provider tab. Choose the Microsoft Jet 4.0 OLE DB Provider. Click the Next button.

  7. For field number 1, browse to the antiques.mdb database that you have copied to the hard drive. Click the Test Connection button. It should give you a success message. Click the OK button to close the dialog box.

  8. Name the connection con_Antiques in the Name field. Click OK to complete the connection.

  9. In the Tables field, select a table and then click OK to close the Dataset dialog box.

Exercise 28.2 Creating a DataSet for ASP.NET

In this exercise, you will make a DataSet from the Antiques database so that you can create the catalog page. The process differs slightly from other server models. This is due to the specifics of the .NET language.

  1. In the ASP.NET site created earlier, create a new page. Choose File > New > Live Data Page > ASP.NET VB. Save the page.

  2. Open the Application panel set and go to Databases. If you have set up your site correctly, the Antiques database should be listed. If it is, you can browse through the database to see the structure and data. If not, complete the unchecked requirements.

  3. Click on the plus (+) button and choose OLE DB Connection.

  4. In the OLE DB Connection dialog box, enter Antiques as the name for the database connection. Then click the Build button. The Data Link Properties dialog box will open to the Connection tab (see Figure 28.2). This dialog box enables you to establish a DSN connection for the page. The Use Data Source Name radio button should be checked. If the dialog box doesn't look like Figure 28.2, switch to the Provider tab and choose Microsoft OLE DB Provider for ODBC Data Sources. Switch back to the Connection tab and all should be well.

    Figure 28.2. The Data Link Properties dialog box.

    graphics/28fig02.gif

  5. Click the drop-down menu arrow on the Use Data Source Name field to view a list of all the DSNs on your machine. The Antiques DSN that you created earlier should be on that list. Choose it and click the Test button to test the connection. If it works, click OK to close the dialog box. If not, repeat the previous steps to set up the connection.

  6. Click OK to close the OLE DB Connection dialog box.

    You have now created a database connection. Now you will make the actual DataSet.

  7. Go to the Bindings tab in the Application Building panel. Click the plus (+) button and choose DataSet (Query).

  8. In the DataSet dialog box (see Figure 28.3), enter Catalog in the Name field.

    Figure 28.3. The DataSet dialog box.

    graphics/28fig03.gif

  9. For Connection, click the drop-down arrow and choose Antiques, the connection you just made. The Table field will now list the tables of the Antiques database.

  10. Choose stockitems from the Table field. The rest of the settings are okay as defaults, so click OK.

The DataSet is created. Click the small plus (+) button next to the Dataset name in the Bindings panel to show a list of all the data fields (columns) You should see id, itemname, description, price, category and imagefile.

Displaying Dynamic Data Using ASP.NET

Now that you have a DataSet made, you can use it to create ASP.NET objects. An easy first step is to create a DataGrid, which is a table that ASP.NET creates from the DataSet. This is equivalent to a dynamic table in other server models.

To create a DataGrid, use the DataSet you just created and follow these steps:

  1. Go to the Server Behavior tab. Click the plus (+) button and choose DataGrid.

  2. In the DataGrid dialog box, choose the Catalog DataSet that you just created for the DataSet field.

  3. Choose the All Records radio button. Click OK.

Before you can preview live data, some files need to be transferred to the server. This can be done from the Bindings panel. There is a note under the steps to deploy these files. Click on that, and the dialog box that appears will prompt you to copy the files to the server. Make sure it is pointing to the web root for this site definition (in this case c:\inetpub\wwwroot) and then click the Deploy button. This can also be accessed through the Site Menu at the top of the page (not in the Site panel). Click Site > Deploy Supporting Files. This action will copy over files that are required for live data to work.

In the Design window, you will see a table (grid) that represents the rows and columns of your data. To see the actual table, click the Live Data button or Preview in Browser.

The .NET Framework makes creating these kinds of common dynamic features quite easy. Now you can make ASP.NET work within your catalog pages.

Exercise 28.3 Creating a Catalog Page in ASP.NET

In this exercise, you use the .NET data to create the Catalog page for the Antiques site. You will use Dreamweaver behaviors to organize this into a properly formatted table.

  1. In the ASP.NET site that you created earlier, open the catalog.aspx file. You will add the database information to create the catalog into this file.

  2. Create a DataSet identical to the one created earlier. You want to use the Antiques database (Access) and create a DataSet for the stockitems table. Choose All columns. Click OK to finish the DataSet.

    Now, the live data is going to go in the middle cells of the table.

  3. Put your cursor in the leftmost cell. Click the Insert Image button on the Common tab of the Insert bar.

  4. At the top of the dialog box, you have the option to Select File Name From. Choose Data Sources.

  5. From the DataSet, choose ImageFileName and click OK.

  6. Put your cursor in the rightmost cell.

  7. Go to the Bindings panel. Click and drag the ItemName record to the rightmost cell (see Figure 28.4).

    Figure 28.4. Drag the record to the table.

    graphics/28fig04.gif

  8. Click in the cell to deselect the record. Press Enter to go to the next line.

  9. Drag and drop the Description record to the rightmost cell. Click in the cell to deselect and press Enter.

  10. Enter $ at the start of the line. Click and drag the price record next to the dollar sign.

  11. Click on the Live Data button.

    You should see one record. But where is the image? It's not showing. This is because the database has only the image name, not the image path. If the images were in the same folder as the ASPX page, it would show properly. However, you have stored the images in a subfolder. You need to tweak the code to reflect the proper path. To do this, click off the Live Data button and highlight the image field.

  12. Go to View > Code and Design to show the code and design.

    The highlighted image field code should look like this:

    <img src="<%# antiques.FieldValue("ImageFileName", Container) %>"  width="92" height="36">

    You might recognize the standard image tag. You need to add images/ to the front of the name in the src field.

    This code goes between the opening quotation mark (") of the src field and the first left-angle bracket (<).

    Your final code should look like this:

    <img src="images/<%# antiques.FieldValue("ImageFileName",  Container) %>" width="92" height="36">
  13. Now save the file and preview using the Live Data button. You should see the image in the table.

    At this stage, only one record will show: a rather thin catalog. You must apply a behavior so that all the records show. This is a server behavior called a Repeating Region. As its name hints, this will loop through the selected code, inserting all the records of the database, or as many as you choose.

  14. Make sure that your cursor is in the row containing the datafields. In the tag selector in the lower-left corner of Dreamweaver, select the <tr> tag.

  15. With this row selected, go to the Server Behaviors panel. Click the plus (+) button. Choose Repeat Region.

  16. In the Repeat Region dialog box, choose the All Records radio button (see Figure 28.5). Click OK.

    Figure 28.5. The Repeat Region dialog box.

    graphics/28fig05.gif

    The table row should now be bounded by a gray box that specifies an Item Template, which is .NET for a repeat region.

  17. Click the Live Data button to see your table with the real information.

Adding Records to the Database

Using dynamic data, it is easy to create large, complex pages quickly. All you have to do is add another record to the database and your page will automatically reflect that.

Exercise 28.4 Inserting a New Record into the Database

In this exercise, you use a regular HTML form to insert a new customer record into the database and then send it to a Thank You page.

  1. Open the register.aspx file from the .NET site.

  2. Create a new DataSet for this page. Click the plus (+) button in the Data Bindings tab. Choose DataSet.

  3. You have yet to create a connection for this page. Click the Define button. Choose New and then OLE DB Connection.

  4. Click the Build button of the OLE DB Connection dialog box.

  5. In field number 1, click the drop-down arrow and choose the Antiques DSN you created earlier. Click OK.

  6. Click OK and then click Done to return to the DataSet dialog box.

  7. For Connection, choose the connection you just made. For Table, choose customers. Click OK.

  8. Now you are ready to apply the insert code. Highlight the Submit button on the Register form. You apply the server behavior to the button.

  9. In the Server Behaviors tab, click the plus (+) button. Go to Insert Record. The Insert Record dialog box displays (see Figure 28.6). Dreamweaver makes it easy with easy-to-use dialog boxes such as this.

    Figure 28.6. The Insert Record dialog box.

    graphics/28fig06.gif

  10. For Connection, choose the connection you just created. For Insert Into Table, choose MailingListTable.

  11. In the Column field, click the FirstName line. The Value drop-down lists the fields of the form. Click the Value drop-down list and choose frame.

  12. Click the LastName line in the Columns field. For Value, choose lname.

  13. Repeat the steps for the email value.

  14. For On Success, Go To, browse to the thankyou.html page. Click OK. That's it.

  15. Now that you are going to link to the thankyou.html page, you need to make sure it is available on the server. Highlight thankyou.html in the Site panel and click the Upload button to copy it to the server. Now that server behavior will be able to find it after it inserts the record!

  16. Preview in Browser and fill in the form and submit it. It should navigate to the Thank You page.

  17. To check that the record was added, open the database and check the table. Better yet, use your newfound skills to create a DataGrid of the mailing list table and check for the new record there.

Summary

ASP.NET is an initiative from Microsoft that works quite differently than other server models. Some of the vocabulary is a bit different than with other languages, and .NET can do a lot more than is shown here. There are many .NET-specific sites that will detail the specific new ideas of .NET. With practice, you can learn just how much .NET and Dreamweaver MX can do to quickly build web applications with little to no hand coding.

CONTENTS


Inside Dreamweaver MX
Inside Dreamweaver MX (Inside (New Riders))
ISBN: 073571181X
EAN: 2147483647
Year: 2005
Pages: 49

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net