Chapter 14. Building a Dynamic Web Site: Getting Started

In This Chapter

  • Defining a dynamic Web site

  • Going over the basic terminology

  • Choosing the dynamic development technology

  • Setting up your computer for dynamic Web pages

  • Creating a data connection

The most sophisticated Web sites on the Internet, such as Amazon.com or CNN.com, were created using complex programming and databases. Combining a database that records information about users with the capability to generate pages automatically is what enables Amazon to greet you by name when you return to its site, track your orders, and even make recommendations based on your previous purchases.

Static Web sites, which you can build using the instructions in the rest of this book, work well for many Web sites (including my own at www.JCWarner.com). But for anyone creating a really large, content-heavy site, such as a magazine or a newspaper Web site or large e-commerce sites where you need to track inventory and want users to be able to search through products, dynamic Web sites are a better choice.

Before you even start down this path, let me warn you of two things. First, creating a dynamic Web site is far, far more complex than creating the kinds of static page Web sites described in the earlier chapters of this book. Second, the most sophisticated sites on the Web, such as Amazon and CNN, use highly customized systems that require teams of very experienced programmers to create.

That said, Dreamweaver does include dynamic development features that you can use to create database-driven Web sites more easily than if you had to write all the code manually. In this chapter and Chapter 15, you find an introduction to these features and instructions for creating a basic, database-driven site.

A description of the more advanced Dreamweaver database features is beyond the scope of this book. If you want to use Dreamweaver's most advanced database features, find more information in Dreamweaver CS4 All-in-One Desk Reference For Dummies, by Sue Jenkins, Michele E. Davis, and Jon A. Phillips; or Dreamweaver CS4 Bible, by Joseph Lowery (Wiley Publishing, Inc.).

This chapter begins by introducing you to what people mean when they talk about dynamic Web sites and databases, and it explores the many ways in which, through a dynamic Web site, you can display and edit information contained in a database. You also discover what you need to have in place to create a dynamic Web site. In Chapter 15, you find step-by-step directions for creating various dynamic features for a simple real-world Web site.

Understanding the Dynamic Web Site

A dynamic Web site is connected to a data source, such as a database, which can deliver data to each Web site visitor based on his or her requests. Because data is delivered dynamically, it's possible to provide different content to each visitor on a Web site in response to actions or information gathered from a visitor.

A simple example of a dynamic Web site feature is a search engine:

  1. You type what you want to find into a search field.

  2. When you submit your request, that information is passed to a database.

  3. The database then returns a list of instant results with information that's relevant (ideally, anyway!) to your search request. Thus information entered by a visitor results in a unique, dynamically-generated Web page with the results of the search.

Note

The easiest way to add a simple search engine to a Web site (even a static-page site) is Google's free search engine, which lets you add advanced search features using Google's technology for free. Visit www.google.com/coop/cse for details.

Checking out dynamic site advantages

A dynamic Web site has many advantages beyond the ability to create a site-wide search. Suppose that you have a Web site where you sell 657 kinds of candy. Here's how a static versus a dynamic site might work:

  • On a static Web site, you'd have to create 657 pages, one for each candy product. If you ever wanted to change the way those pages look, you'd have to change all 657 pages.

  • With a dynamic Web site, you create just one page with the design for your candy products and then you add special code that dynamically pulls product name, image, description, and any other pertinent information from a database and displays it in that one page design each time a visitor requests one of the 657 kinds of candy.

When you compare the two, dynamic Web sites clearly offer advantages to site owners who have a lot of data, such as items for sale, to display in a consistent format:

  • A dynamic site saves lots of time because you don't have to create all those individual pages.

  • Dynamic Web sites also enable you to make changes and updates with less effort.

  • Dynamic sites enable you to display the same product information in different combinations in different page designs. So, for example, you could create one page that displayed only the name and photo of each kind of candy and then another page that displayed all the product information, including a detailed description, pricing information, and so on.

  • Dynamic sites enable you to automatically create links between pages with related information so that visitors can drill down to find the details they want. When you set up your dynamic site, you can create features that automatically set the links from the first page with many kinds of candy listed to the second, and when a visitor clicks the name of a type of candy, a page with all the details of that candy is generated dynamically and returned to the visitor.

    You can also use AJAX to link dynamic content, such as an XML file, to a Web page and display data dynamically. Either way, you store all your product information in a data source, such as a database or XML file, and then you use special code in the Web page to communicate with the data source, collect each product's information, and create a page on-the-fly as visitors request products (or any other kind of content).

Seeing a dynamic site in action

To better understand how dynamic sites work, here's an example of a dynamic Web site in action:

  1. Point your browser to www.poweryoga.com.

  2. On the home page, hover your mouse over the About Yoga menu item and click Library of Articles.

    On the Library of Articles page, you can see the headline and first paragraph of each of a series of articles about Yoga (see Figure 14-1).

    The Library of Articles page is generated dynamically by pulling just this first part of each story out of the database and displaying them in a specified order on this page.

  3. Click a headline and the browser displays a page that shows you the entire article, drawn from the same database.

    When you view pages like this, keep in mind that there's really only one page design for all the articles linked from the library page. When you click a headline on the Library of Articles page, as shown in Figure 14-1, the system pulls the article from the database, inserts it into the page, and displays it in the Web browser.

    The PowerYoga.com Library of Articles page.

    Figure 14-1. The PowerYoga.com Library of Articles page.

  4. Click the Back to Articles menu button or click the Back button in your browser to return to the Library of Articles page.

  5. Click another headline, and the system pulls that article and displays it in the same article page.

    Not only does this mean you only need one page for all the articles, it also means you only need one copy of each article. So, for example, if you find a typo in the headline on the Library of Articles page and you correct it in the database, the headline is corrected automatically on the Library of Articles page, as well as on the page that displays the entire article because it's the same headline, entered once in the database, and displayed as many times as it's requested on different pages of your site.

Creating Dynamic Sites: Key Concepts

One of the first things you need to understand about creating dynamic Web sites is that you need one program to create the data source (usually a database or an XML file) and then you need another program (or programming language, such as PHP or ASP.NET) to connect the data source to your Web pages. In the two sections that follow, you find a list of some of the most common database programs you might use, such as Access and MySQL, as well as a description of the five technologies Dreamweaver supports for creating dynamic sites: PHP, JSP, ASP, ASP.NET, and ColdFusion.

Understanding databases

First, you need to understand what a database is and how tables are structured. A database is a collection of information compiled in one or more tables. Each table has multiple records (or rows) organized in fields (or columns).

If this is all new to you, an analogy may help you appreciate how tables and columns work. Picture a mail-order catalog, such as the one used by the home furnishing store Pottery Barn. From the smallest element (the fields) to the largest element (the database), here's how the elements in this catalog fit into the parlance of a database:

  • Consider that each product has an item number, a price, and a color. Think of each of those elements of a product as a field.

  • Each product is a record in the database. A record in a database consists of one complete set of all fields.

  • Taking it a step further, within the catalog, the various products are organized in categories, usually because they have something in common, such as all the fuzzy things that are designed for the floor might be in a rugs category whereas all the things with legs might go best in the furniture category (you get the idea). Think of each of the categories (furniture, rugs, and so on) as a table — a grouping of records from a database that have something in common.

  • Think of the catalog itself as the database, which contains a collection of information about various products.

Okay, so that's a very simple description of a database, but it's important that you understand the way databases are structured because how a database is set up and how information is organized within tables and rows affects how you can organize that content on a Web page.

Note

When I refer to a table in a database, I'm not talking about the same kind of table discussed in Chapter 7. HTML tables are used to format information, much as you'd use a spreadsheet program, such as Excel. Database tables aren't used for formatting; they're used for grouping and organizing content. Just to make things even more confusing, one of the few legitimate uses of HTML tables these days is for formatting the contents of a database when it's displayed on a Web page.

Databases can be created with a variety of different programs, including Microsoft Access, FileMaker Pro, SQL Server, MySQL, FoxPro, and Oracle. On the simpler side, Access is commonly used to create small databases (files with a .mdb extension) like the contact database featured in Chapter 15. Access is also commonly used to communicate with bigger databases, such as Microsoft SQL Server. At the other extreme, a site like Amazon.com, which has millions of products stored in a database, would probably use an Oracle database or an SQL Server.

To keep things simple in this introduction to dynamic sites, I created the database example used in Chapter 15 in Microsoft Access, but the basic concepts and the features in Dreamweaver are similar no matter which database application you use.

Choosing a dynamic development technology

After you have the data source covered (database or XML files), find a way for the Web site and the data source to communicate. That's where server technologies, such as PHP, come in.

Dreamweaver supports five server technologies (described in detail in the following sections):

  • Active Server Pages (ASP)

  • ASP.NET

  • JavaServer Pages (JSP)

  • ColdFusion

  • PHP (which stands for PHP Hypertext Preprocessor — a recursive acronym, for you wordsmiths)

The examples in this book use ASP mostly because it's one of the simpler options to set up on your computer and it provides an easy place to start, but in essence, all five offer similar functionality. After you see how Dreamweaver works with ASP, you'll have a pretty good introduction to how Dreamweaver works with the other four options as well:

  • They all provide the capability to generate HTML dynamically.

  • They all can be used to connect your Web site to a database or other data source.

  • With server-side code, they all can display information from a database and create HTML based on certain criteria, such as the actions or data entered by a visitor to your site.

I don't recommend any one technology over another. They all offer similar functionality with slight variations in speed and efficiency. One consideration that is important — make sure that your Web host supports whatever technology you choose. Not all Web servers are set up to handle all these technologies. The following descriptions are designed to help you make a more informed decision about which option best serves your needs.

ASP

  • Extension: .asp

Although ASP has been replaced by ASP.NET, it's still used by many active sites on the Web. ASP is a server technology built into the Windows 2003 Server, Windows 2000, Windows XP Professional, and Windows Vista at no additional cost. ASP can also be used with Microsoft IIS (Internet Information Services) or Personal Web Server, which is useful for building and testing on your local hard drive. ASP isn't a standalone programming language because much of the code you write for ASP pages is in VBScript or JScript (Microsoft's version of JavaScript). You can check out www.4guysfromrolla.com to find out more about ASP in what more closely resembles plain English.

For the examples in this book, I chose ASP, mostly because it's much easier to set up than any of the other technologies. After you see how the basics work with ASP, you can graduate to other options, such as PHP or ASP.NET. Consider the examples in this chapter and Chapter 15 as an introduction to dynamic site design. I don't want to throw you into the deep end (at least, not yet).

Warning: Even with ASP, which is a relatively simple option, the example steps in this chapter and Chapter 15 get a lot more technical than the earlier chapters in this book.

ASP.NET

  • Extension: .aspx

ASP.NET is Microsoft's replacement for ASP. ASP.NET isn't just a revision of ASP 3.0; it's a complete redesign of the language. Microsoft has done more than add new tags. The language is similar to traditional programming languages, such as C++, where code is compiled. This arrangement suggests that applications written in ASP.NET can run faster because Web servers work more efficiently with less coding overhead. However, ASP.NET isn't as verbose as ASP 3.0, so it's much harder for novice programmers to read. ASP.NET is a Microsoft technology, and you can find more information at msdn.microsoft.com/asp.net and www.asp.net.

ColdFusion

  • Extension: .cfm

ColdFusion, owned by Adobe, uses its own server and scripting language. ColdFusion is probably the easiest language to figure out how to use because it includes custom tags that also enable you to separate dynamic code from HTML, which makes it similar to JSP. Also like JSP, it's ultimately based on Java. But the many tags included in ColdFusion make it much easier and faster to use than technologies like Java or PHP. ColdFusion also includes built-in XML processing. You can read more about ColdFusion at www.adobe.com/products/coldfusion.

JavaServer Pages (JSP)

  • Extension: .jsp

JSP is from Sun Microsystems. Because its dynamic code is based on Java, you can run JSP pages on non-Microsoft Web servers. You can use JSP on Allaire JRun Server and IBM WebSphere. With JSP, you can create and keep the dynamic code separate from the HTML pages, or you can embed the JSP code into the page. Unless you're a hardcore programmer, however, this language isn't for you. JSP is horribly complex. You can find out more about JSP at java.sun.com/products/jsp.

PHP

  • Extension: .php

PHP is an open source technology so it's free, which has helped make it one of the most popular options for creating dynamic Web sites. PHP is often used with databases created with MySQL and many commercial Web hosting services provide MySQL and PHP support as part of their standard Web hosting services. PHP is native to UNIX-based servers. However, you can download Windows binaries from www.php.net to run Apache (a server software typically used with PHP) from any version of Windows as well as IIS (Internet Information Services) on NT, Windows 2000, Windows XP Professional, and Windows 2003 Server. You can even configure PHP to run on Personal Web Server (although doing so is tricky). The PHP scripting language is based on C, Perl, and Java. You can get more functionality with PHP right out of the box than you can with ASP. For example, virtually every ASP add-on that's on sale at www.serverobjects.com comes built-in or is available for free from www.php.net.

Note

If you're working with PHP and MySQL, here's a great way to get a testing server set up on your local computer. The Webserver on a Stick (WOS) is available for free from www.chsoftware.net/en/useware/wos/wos.htm. According to the site: you can use this service to run a Web server based on Apache, MySQL and PHP from an USB Stick. Other writable media (your hard drive, flash drives, and so on) also work. You need to be running Windows.

Setting Up Your Computer to Serve Dynamic Web Pages

When you're creating dynamic sites, you can't just preview your dynamic pages the way you can preview the pages from static Web sites. Remember a static Web site is made up of individual pages, each of which must be altered and uploaded separately to a Web server, and each of which can be viewed separately in a Web browser. When you create a static site, you can easily preview your pages directly from your local hard drive. When your content is dynamic, previewing your pages isn't that simple because you need a Web server to process the page and create it dynamically before it can be displayed in a Web browser. Thus, you need to have Web server software on your local computer to view dynamic pages.

Fortunately, a number of servers can be installed for free and can be used to mimic the functions of the kind of Web server that will host your site when it's published online.

Note

Web server is commonly used to describe both a piece of computer hardware on which a Web site is stored (usually a high-powered computer) and the software on that computer that provides the server functionality. To test your dynamic pages in Dreamweaver, you need Web server and application server software (although in some cases you can get both in one). If you can run Dreamweaver CS4, your personal computer should be more than powerful enough to act as a Web server.

In the sections that follow, I show you how to set up a simple Web server on a Windows computer and how to make a few other adjustments to your system so that you can preview your pages on your local computer.

To set up a Web server, you need server software. A Web server responds to requests from a Web browser by serving up Web pages based on those requests. You also need to set up an application server, which helps the Web server process specially marked Web pages. When the browser requests one of these pages, the Web server hands off the page to the application server, which processes the page before sending it to the browser. One of the advantages of working with ASP is that the IIS server, which I use in the examples in this chapter and the next, can handle both functions.

Tip

Don't skip these next two sections because you can't complete the example tasks that follow if you haven't first set up a local Web server and set the proper permissions on your local computer.

Setting up a local Web server

When you use ASP, you have a choice of Web server options. Both Microsoft IIS and Personal Web Server (PWS) work for testing your ASP pages and both can serve as a Web server and an application server. PWS runs with Windows XP and Windows Vista; you can install either from your Windows CD. If you have Windows 2000 Server, Windows XP Professional, or Windows Vista (Business, Enterprise, and Ultimate editions), IIS is part of the package. If you can't find your CD, you can download IIS or PWS for free from the Microsoft Web site.

Warning

IIS doesn't work on Windows XP or Vista Home editions. You must upgrade to use these advanced features.

If you're running an edition of Vista or Windows XP that supports IIS, all you have to do is make sure it's enabled by following these steps:

  • 1. Click the Start menu and choose Control Panel.

  • 2a. Vista: Choose Programs to open the Programs and Features dialog box, and then choose Turn Windows Features On or Off from the left side of the dialog box.

    If you're prompted with a dialog box that states Windows Needs Your Permission to Continue, click Continue.

  • 2b. XP: Click the Add or Remove Programs option in the Control Panel and then click the Add/Remove Windows Components button on the left side of the Add or Remove Programs window.

    On XP, the Windows Components Wizard dialog box opens. On Vista, the Windows Features dialog box opens.

  • 3a. XP and Vista: Scroll down in the Windows Features dialog box until you find the Internet Information Services option (as shown on Vista in Figure 14-2) and select the check box.

    In the boxes under IIS, make sure that ASP and ASP.NET are checked.

  • 3b. XP: Scroll down in the Windows Components dialog box until you find the Internet Information Services option and select the check box.

  • 4a. Vista: Click OK.

  • 4b. XP: Click Next.

  • A dialog box appears explaining that configuring the components can take several minutes. The dialog box closes automatically when the components are configured

    You can use Internet Information Services in Windows to test your dynamic Web pages on your local hard drive.

    Figure 14-2. You can use Internet Information Services in Windows to test your dynamic Web pages on your local hard drive.

    Warning

    If you didn't install these components when you first installed your operating system, you may be prompted to insert your original Windows software disk (or the setup disk that came with your computer) so that these components can be added.

  • 5. Click to close the Programs and Features folder on Vista or the Add or Remove Programs window on XP.

  • 6. To test to make sure that the IIS server is functioning properly, open a Web browser, such as Firefox, and enter the URL http://localhost.

    If you're using Vista, the localhost page appears in the browser, as shown in Figure 14-3. Click a link in the language of your choice for more information about IIS.

    If you're using XP, a message appears in red in the Web browser stating, Your Web Service Is Now Running. This page also provides additional information about IIS.

Tip

If you don't have your Windows CD, you can download IIS from the Microsoft Web site and install it separately.

You can test your local server by entering http://localhost into a Web browser.

Figure 14-3. You can test your local server by entering http://localhost into a Web browser.

Setting up permission

The next challenge to getting your computer set up to build and test your database-driven site locally has to do with the way Windows handles permissions on a computer. Most Windows operating systems have security features that limit how computer users can access certain features or folders on your hard drive. If you're using a Windows operating system, your hard drive probably uses Microsoft's security-conscious New Technology File System (NTFS) format. For the database examples in the following chapters to work, make some changes to the permission settings on your computer.

You also want to copy or move your database and any other files you have ready for your Web site into a special wwwroot folder on your operating system. The Inetpub and wwwroot folders are created automatically when you install IIS. Changing permissions on these folders and copying your files into them before you set up your site is a relatively simple, and very important step, covered in the exercise that follows.

Note

It's important that you store the database and the other files for your Web site in the wwwroot folder because this is what IIS considers the root level of your local Web server. You need your site in the wwwroot folder for your pages to preview properly in a Web browser on your hard drive. However, by default, Windows protects this folder, so before you can work on your site in this folder, you have to change the security settings.

Note

Another important step in creating a database-driven site is, not surprisingly, that you have to create a database. How you create a database is way beyond the scope of this book. For the purposes of the following exercises and the ones in the following chapter, I created a simple contact database with Microsoft Access. If you don't yet have a database file and just want to follow along, you can download this database file (contacts.mdb) from my Web site at www.digitalfamily.com/dwd.

I created this file in Microsoft Access because it's an easy database program to use and one that many readers are likely to already have, but you don't need Access to use this file with Dreamweaver. You can't edit any of the contact names or other data in the database file without Access or a similar program, but you can use this file to follow along with the exercises in this chapter and Chapter 15 as you try Dreamweaver's database features.

Follow these steps to copy your files into the wwwroot folder and set up permissions in Windows:

  1. Choose Start

    Setting up permission
    Computer.

    The My Computer folder opens with a list of your hard drives.

  2. Double-click the C: drive, double-click the Inetpub folder, and then right-click the wwwroot folder and choose File

    Setting up permission
    Properties.

    The Properties dialog box appears.

  3. Click the Security tab and then click the Edit button.

    The wwwroot Properties dialog box appears, as shown in Figure 14-4.

  4. Click the Edit button under the Group or User Names list.

    The Permissions for wwwroot dialog box opens, as shown in Figure 14-5.

  5. Select Users (COMPUTERUsers) from the Group or User Names list.

  6. In the Permission for Users box, select the Full Control Allow check box, as shown in Figure 14-5.

    A check mark appears automatically in each of the check boxes in the dialog box.

  7. Click Apply, click OK, and click OK again to close these dialog boxes.

  8. Create, copy, or move a folder into the wwwroot folder to serve as your main local root Web site folder.

Before you can set up a data-base driven site in Windows using IIS, change the permission settings in the wwwroot folder properties dialog box under the Security tab.

Figure 14-4. Before you can set up a data-base driven site in Windows using IIS, change the permission settings in the wwwroot folder properties dialog box under the Security tab.

Set permission to Full Control to enable access to the wwwroot folder.

Figure 14-5. Set permission to Full Control to enable access to the wwwroot folder.

As shown in Figure 14-6, I copied the myContacts folder into the wwwroot folder. The myContacts folder contains the contacts.mdb database file and an images folder. You can call your main site root folder anything you like, but it's best not to use spaces or special characters, and the files for your site need to be stored in this wwwroot folder for the local Web server to be able to display your dynamic pages on your hard drive.

You need to store all the files for your Web site, including the database file, in your wwwroot folder.

Figure 14-6. You need to store all the files for your Web site, including the database file, in your wwwroot folder.

Creating a Data Connection in Dreamweaver

Creating the data connection in Dreamweaver takes a few quick steps. Start by setting up your site's local information and remote site information and then establish a connection between the site and the data source.

In this example, I assume that you've completed the steps in the previous two sections, that you're running IIS on the same computer as Dreamweaver, that you've stored your data source in the wwwroot folder, and that you've changed permissions so that you can write to that folder on Windows. All these steps are crucial to your ability to set up a local connection, which I cover in this section.

To set up a dynamic site in Dreamweaver, follow these steps:

  1. Choose Site

    Creating a Data Connection in Dreamweaver

    The Site Definition dialog box appears.

  2. Click the Advanced tab.

    The Advanced window appears. If you prefer, you can use the Basic Wizard that steps you through the setup process, but I find it faster and easier to view all the options at once on the Advanced tab.

  3. In the Category box on the left, make sure that the Local Info category is selected.

  4. In the Site Name text box, type a name for your site.

    You can call your site whatever you like; this name is used only to help you keep track of your sites in Dreamweaver. Many people work on more than one Web site, and the name you enter here is the name you'll choose from the drop-down list in the Files panel or the Manage Sites dialog box. In the example shown in Figure 14-7, I named the new site myContacts.

  5. Creating a Data Connection in Dreamweaver

    If you haven't copied the database and any other files you'll be using in your site into the wwwroot folder yet, exit the Site Definition dialog box, copy the files into the wwwroot folder, and start these steps over from the beginning.

  6. Specify the Default Images Folder by entering the location or using the Browse icon (which looks like a file folder) to locate it.

    This works just like the previous step, you simply want to browse to the images folder and select it so that Dreamweaver can identify the location. You can create a new folder for your images when you select it, but again, this folder must be located within the wwwroot folder.

  7. For Links Relative To, choose Site root, as you see in Figure 14-7.

    This setting controls how the path is set in links. When you're working with dynamic content, Site Root is the best option.

    When working with dynamic content, set Links Relative To to Site Root.

    Figure 14-7. When working with dynamic content, set Links Relative To to Site Root.

  8. In the HTTP Address text box, type the URL of your local Web server.

    On most computers, if you're using IIS, the local URL for the Web server is http://localhost followed by the name of your root site folder. In this example, you'd enter http://localhost/myContacts, as shown in Figure 14-7.

  9. Select the Enable Cache option.

    Dreamweaver creates a local cache of your site to quickly reference the location of files in your site. The local cache speeds up many site management features of the program and takes only a few seconds to create.

  10. Click the Testing Server category on the left side of the dialog box, as shown in Figure 14-8.

    The Testing Server options are opened in the Site Definition dialog box.

  11. From the Server Model drop-down list, choose the server technology you're using for your site.

    In this example, I'm using ASP JavaScript, as shown in Figure 14-8. You'll find a complete list of the technologies supported by Dreamweaver in this drop-down list.

  12. From the Access drop-down list, choose Local/Network.

    Again, I'm assuming that you're testing and developing your site on your local drive or on a local area network.

  13. Click the Browse button (which looks like a folder) and then locate and select the wwwroot folder.

    If you're using a different server technology, such as ColdFusion, the root folder may be in a different location.

  14. Enter the URL for the local Web server in the URL Prefix field.

    As shown in Figure 14-8, in this example, the URL is the same as the URL entered into the Local Info settings, http://localhost/myContacts/.

  15. Click OK to close the Site Definition dialog box and save your settings.

    If the folder you selected as your local site folder already contains files or folders, they're automatically cached and all the files and folders in your site are displayed in the Files panel.

Specify the server model and other settings in the Testing Server category.

Figure 14-8. Specify the server model and other settings in the Testing Server category.

To establish a connection to a data source in Dreamweaver, make sure you've completed all the steps in the previous three sections and then follow these steps:

  1. Choose File

    Specify the server model and other settings in the Testing Server category.
    New.

    The New Document dialog box opens, as shown in Figure 14-9.

    The New Document dialog box makes it easy to create files for the server technologies supported by Dreamweaver.

    Figure 14-9. The New Document dialog box makes it easy to create files for the server technologies supported by Dreamweaver.

  2. Choose the Blank Page icon from the left.

  3. In the Page Type list, click ASP JavaScript.

    If you're working with a different server technology, such as ColdFusion, make sure you choose the corresponding page type.

  4. Under Layout, choose a layout option.

    For this example, I choose the CSS Layout 1 Column Fixed, Centered, Header, and Footer.

  5. Click Create to automatically create a new page and close the New Document dialog box.

  6. Choose File

    The New Document dialog box makes it easy to create files for the server technologies supported by Dreamweaver.
    Save, name the file, and save it in your root folder.

    Because this will be the main page of my ASP site, I named the file index.asp.

  7. With your new page open, choose Window

    The New Document dialog box makes it easy to create files for the server technologies supported by Dreamweaver.
    Databases to open the Databases panel, as shown in Figure 14-10.

    Tip

    If the Databases panel is already open in the workspace, you can simply double-click to open the panel and then click the Databases tab.

  8. Click the plus sign (+) at the top of the Databases panel and select Custom Connection String from the list, as shown in Figure 14-10.

    The Custom Connection String dialog box opens (see Figure 14-11).

    The Custom Connection String settings are available from the Databases panel.

    Figure 14-10. The Custom Connection String settings are available from the Databases panel.

  9. Enter the name for the new connection.

    In this example, I entered myContacts. You can call the connection anything you like, but it's best not to use spaces or special characters in the name.

  10. Type the connection string (see Figure 14-11).

    This part gets a little tricky depending on which technology you're using. If you're using ColdFusion, you can use the Browser button and simply locate the database file in your local root folder. ASP.NET has a similar feature, but with some of the technology options, such as ASP, which I'm using in this example, you need to type in the string manually based on the data source you're using and the location of your root folder.

    For this example, I'm using the Microsoft Access driver installed on my computer and an MS Access database at c:InetpubwwwrootmyContactscontacts.mdb with the appropriate permissions set in Windows. With this as the case, I typed the following into the box exactly as you see it here (make sure to include the space between Data and Source, the quote marks, and the semicolon at the end):

    "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:InetpubwwwrootmyContactscontacts.mdb;"

    If you're using another database option, alter this string accordingly.

  11. Click the Test button.

    A pop-up message appears, letting you know that the connection was made successfully, and your database is now listed in the Databases panel. If the connection isn't successful, review the string carefully for typos.

    When Dreamweaver creates the connect, it also creates a Connections folder, which is displayed in the Files panel. The Connections folder contains an ASP file with the connection information for the database. Again, if you're using another technology, this file has a different name and extension. Dreamweaver automatically references this file on any page you create that uses this database connection, saving you from inserting it every time.

    The Custom Connection String dialog box.

    Figure 14-11. The Custom Connection String dialog box.

Note

The ASP files in the Connections folder store necessary information that makes your page work correctly with the database. Make sure that you upload this folder when you upload your site files to the server. Also note that if your Web server is configured differently than your hard drive, you may need to adjust this connection string to work properly on your Web server. Check with your system administrator or hosting service about where database files need to be stored and how connection strings need to be set up on your server.

Tip

If your connection fails, check your Custom Connection String again and check the URL prefix for the application server. You can also check the Dreamweaver Help Index for other troubleshooting tips.

Now you're ready to build a dynamic Web site. In Chapters 15, you can start putting these great Dreamweaver features to use by adding content from this database to a Web page.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset