This article describes how to set up a development environment for building ASP web applications with Adobe Dreamweaver CS5.
Setting up a development environment for Dreamweaver is a three-part process. First, you set up or get access to an ASP application server. Second, you define a Dreamweaver site. Third, you connect to your database. This article follows this three-step process.
To set up a local ASP development environment, you must first install Internet Information Services (IIS). When an ASP page is requested by a browser, IIS processes the dynamic code in the page before sending the output to the browser.
IIS runs only on Windows computers. If you want to develop ASP pages on a Mac, you cannot test your pages locally. You need to connect to a Windows server via a local network or the Internet.
The easiest way to install IIS is to use the Microsoft Web Platform Installer. This is a relatively small program (2MB) that searches for the latest versions of various development tools, and installs the ones you select.
Note: If you have already installed Apache on your computer to develop with PHP, you must stop the Apache server before installing IIS. By default Apache and IIS share the same port (80). Both servers cannot be run simultaneously unless you change the port for one of them.
- Visit the Web Platform Installer download page, and click Download. If you are using Internet Explorer, click Run to install the program. Alternatively, save the EXE file, and double-click it when it has completed downloading.
- Once the Web Platform Installer has been installed, it checks for the latest components, and then asks you to select the ones you want to install (see Figure 1).
Figure 1. The Web Platform Installer offers a wide selection of development tools.
- Select the Web Platform tab on the left. This displays four options: Web Server, Frameworks and Runtimes, Database, and Tools. The Web Platform Installer detects any components that are already installed on your computer.
Clicking the Customize link in each section shows you what is available. You can run the Web Platform Installer at any time to add new items.
- In the Web Server section, click the link to include the recommended products. If you are using Windows XP, this is all you need. Windows XP runs an older version of IIS (5.1), which includes ASP.
- For all other versions of Windows, click Customize, and select ASP (see Figure 2).
Figure 2. ASP is not automatically included in the latest version of IIS, so you need to select it yourself.
Note: If you plan to develop with both ASP and PHP on the same machine, you might want to consider installing PHP in IIS to avoid problems with both Apache and IIS wanting to use port 80. The Web Platform Installer will automatically download PHP and install it in IIS if you select the option for PHP in the Frameworks and Runtimes section. The disadvantage of this option is that you need to download and install the MySQL database and phpMyAdmin manually. For further details, see Setting up a PHP development environment for Dreamweaver.
- Click Install to download and install the necessary components.
- When the installation is complete, launch your browser, and type http://localhost/ in the address bar. In Windows 7, Vista, and other recent versions of Windows, you should see the IIS welcome page (see Figure 3).
Figure 3. The welcome page confirms that IIS7 is running.
Depending on your computer's security settings, you may need to enter the username and password for your Windows administrator account.
If Internet Explorer prompts you, disable Protected Mode for your local intranet.
In Windows XP, trying to access http://localhost/ in Internet Explorer usually displays an HTTP 500 Internal Server Error. Firefox displays "error '8002801c'." Surprising though it might sound, this actually confirms that IIS is running. Don't worry about it. Continue with the test in the following section.
ASP is a server-side technology, so all your web pages need to be in the IIS server document root for the dynamic code to be processed. The IIS document root is located at C:\inetpub\wwwroot. It's necessary for you to have the permission to create new files and folders inside the wwwroot folder. IIS also needs read and write permissions to display and update records in an Access database.
Changing permissions for the server document root
- Use Windows Explorer to locate wwwroot, and try to create a new folder called asp_test inside it. If permission is denied, you need to follow all these instructions. Otherwise, only the first few steps are necessary.
- Right-click the wwwroot folder, and select Properties from the context menu.
- Select the Security tab, and click Edit.
- In the Group Or User Names section at the top of the panel, select IIS_IUSRS, and select the Allow check box for the Write permission in the lower half of the panel (see Figure 4).
Figure 4. Select the Write permission for IIS.
- If you were able to create the asp_test folder before, click OK twice to close the Permissions and Properties panels. You can proceed immediately to the next section, Setting up the site definition.
- If you want all users to have permission to create files and folders in the server root, select Users from the Group Or User Names section in the top half of the Permissions panel, and select the Allow check box for the Write permission.
- If you want to be more selective with whom you allow to write to the server root, click the Add button to create a new entry for a single user or group of users.
- In the panel that opens, type the name of the user(s) in the following format: COMPUTER_NAME\Name. For example, my Windows 7 computer is called DAVID7, and my username is David, so I typed DAVID7\David.
- Click Check Names to make sure you have typed the name(s) correctly. If the name is valid, Windows underlines it (see Figure 5).
Figure 5. Create a separate user category for permissions.
- Click OK to close the panel, and then select the new user in the Permissions panel, and select the Allow check box for the Write permission.
- Close both the Permissions and Properties panels by clicking OK.
- Check that the permissions have been updated by creating a new folder in the server document root at C:\inetpub\wwwroot\asp_test.
Setting up the site definition
Once you have installed IIS and made sure you can write to the server document root, you're ready to start Dreamweaver and define your ASP site.
- Select Site > New Site.
- In the Site Setup dialog box (see Figure 6), type a name for the site in the Site Name text box, and click the Browse for Folder icon to the right of the Local Site Folder text box. Navigate to C:\inetpub\wwwroot\asp_test, and select it.
Figure 6. Set the site name and the local site folder in the Site Setup dialog box.
- This is all that's necessary to create an ASP site until you want to do some testing, but since you're going to test the site straight away, select Servers in the column on the left of the Site Setup dialog box.
- Click the plus (+) button at the bottom left of the dialog box to add a new server.
- In the dialog box that opens, make sure that the Basic button is selected, and select Local/Network from the Connect Using list.
- Give the server a name, such as Local Testing.
- Set the value of the Server Folder text box to the same as Local Site Folder–in this case, C:\inetpub\wwwroot\asp_test.
- The value of Web URL is what you would enter in the address bar of a browser to reach the server folder. In an ASP site, the URL to reach c:\inetpub\wwwroot is http://localhost/, so to use the asp_test folder, you need to type http://localhost/asp_test as the Web URL (see Figure 7).
Figure 7. Set the basic options for the testing server.
- Select the Advanced button at the top of the dialog box. This reveals the options for both a remote server and a testing server.
- Set the Server Model in the Testing Server section to ASP VBScript (see Figure 8).
Figure 8. Set the Server Model option to ASP VBScript.
- Click Save.
- This is a testing server, so make sure the Testing check box is selected. If necessary, deselect the Remote check box (see Figure 9).
Figure 9. Ensure that the Testing check box is selected.
- Click Save to save the changes you have made.
Testing the ASP site
Now that you have defined the site in Dreamweaver, you can test that everything works.
- Select File > New, and create a blank page, selecting ASP VBScript as the page type.
- Open Code view, and type the following code between the
<p>The time is now <%= Time %>.</p>
The code between the
<% %> tags displays the current time.
- Switch to Design view, and save the page as timetest.asp. The text inside the HTML
<p> tags is displayed as normal, but the ASP code is replaced by a gold shield (see Figure 10).
Figure 10. The dynamic code is represented in Design view by a gold shield.
- Click the Live View button. The gold shield should be replaced by the current time (see Figure 11).
Figure 11. The ASP code is processed by IIS and displayed in Live view.
Notice how the value in the Address text box now displays the Web URL rather than the physical location of the file.
The ASP site is now defined and working. The next step is to add the sample files to the test site in preparation for connecting to a database.
If you haven't already done so, download the sample files for this tutorial, unzip them, and copy them to C:\inetpub\wwwroot\asp_test. If you don't see the files in the Files panel (see Figure 12), click the Refresh icon at the top of the panel.
Figure 12. The sample files contain an Access database and an index page.
The sample files you copied in the previous section include a sample Microsoft Access database file called tutorial.mdb. This section describes how to create a connection to the sample database. You can use the same instructions for any Access database.
Access databases are suitable only for small-scale applications. For information on connecting to other database systems, see Database connections for ASP developers in Dreamweaver Help.
If you are running IIS on 64-bit Windows, you need to make some additional changes before you can connect to an Access database.
Enabling connection to an Access database on 64-bit Windows
The Microsoft Access Driver is not available in a 64-bit version, so you need to use the 32-bit driver.
- Launch the Internet Information Services Manager by selecting Start > Control Panel > Administrative Tools > Internet Information Services (IIS) Manager.
- In the Connections panel, select Application Pools, and select DefaultAppPool in the center panel.
- In the Actions panel on the right, click the Advanced Settings link.
- In the General section, set Enable 32-Bit Applications to True (see Figure 13), and click OK.
Figure 13. Enable 32-bit applications in the IIS Manager.
- In Windows Explorer, locate odbcad32.exe in C:\Windows\SysWOW64.
- Right-click the file, and select Send to > Desktop (create shortcut) from the context menu (see Figure 14).
Figure 14. Create a shortcut to the 32-bit ODBC Administrator.
This creates a shortcut on your Desktop to the 32-bit version of the Microsoft ODBC Administrator, which is where you define the data source name (DSN) for an Access database.
Create a DSN
The next step is to create a Windows DSN on the computer running IIS. A DSN is a type of shortcut you create in Windows to represent a connection string. Dreamweaver uses the DSN to create a connection to the database file on the server.
- Open the ODBC Administrator on a 32-bit system by selecting Start > Control Panel > Administrative Tools > Data Sources (ODBC). On a 64-bit system, use the Desktop shortcut you just created.
- Click the System DSN tab, and then click Add.
- Select the Microsoft Access Driver (see Figure 15), and then click Finish.
Figure 15. Select the Microsoft Access Driver.
Note: If you cannot find the Microsoft Access Driver, make sure you are using the 32-bit ODBC Administrator on a 64-bit system. If that's not the problem, download and install the Microsoft Data Access Components (MDAC) package from http://msdn2.microsoft.com/en-us/data/aa937730.aspx.
- In the Data Source Name text box, type dsnTutorial (no spaces).
- Click Select and then locate and select the tutorial.mdb database. The file should be in the following location: C:\inetpub\wwwroot\asp_test\data\tutorial.mdb.
- Click OK to accept your choices and close the dialog box.
Create a connection in Dreamweaver
The final step of the setup process is to create a connection to the database.
- Open index.asp in Dreamweaver, and then open the Databases panel (Window > Databases).
- Click the Plus (+) button on the panel and select Data Source Name (DSN).
- In the Data Source Name (DSN) dialog box, type connTutorial as the connection name.
- Select dsnTutorial from the Data Source Name (DSN) list. It should be automatically selected unless you have other DSNs on the same computer.
- If your server is on your local computer, select Using Local DSN. If your server is on a remote system, select Using DSN On Testing Server.
- Click Test to ensure the database connection works.
- If the connection fails, do the following:
- Double-check the DSN.
- Consult Troubleshooting database connections in Dreamweaver Help.
- Click OK.
- The new connection appears in the Databases panel. Expand the connTutorial branch, and then expand the Tables and Customers branches. One table should appear (see Figure 16).
Figure 16. The database table expanded in the Databases panel.
- Click Live View. The dynamic text objects in the page should be replaced by data from the database (see Figure 17).
Figure 17. Data from the database is displayed in Live view.
For help troubleshooting problems with ASP pages in IIS7, see Running Classic ASP Applications on IIS 7.0 and IIS 7.5.
Note: A common problem with Access databases is a locked data file. You can tell if the file is locked if there is an LDB file with the same name as the MDB file. Delete the LDB file to unlock the database. In this example, the file would be named tutorial.ldb.
Where to go from here
You are now ready to start using dynamic content on your sites.