Top Banner
Making Access Accessible Using Dreamweaver in Crime Analysis Jim Mallard, Gainesville (FL) Police Department
56

Making Access Accessible: Using Dreamweaver In Crime Analysis

Jan 01, 2017

Download

Documents

dinhkhuong
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Using Dreamweaver in Crime Analysis

Jim Mallard, Gainesville (FL) Police Department

Page 2: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible: Using Dreamweaver MX 2004 in Crime Analysis

Jim Mallard, Gainesville (Florida) Police Department

Presented at the 2005 International Association of Crime Analysts’ Annual Training Conference in Arlington, Virginia September 21-24, 2005.

Manual Revision Date: 9/19/2005

Page 3: Making Access Accessible: Using Dreamweaver In Crime Analysis

CONTENTS

Preface ....................................................................................................... i

Chapter 1: Getting Started With Dreamweaver MX 2004.................. 1

Chapter 2: Web Server Configuration and Site Definition….…...…… 10

Web Server Configuration................................................................. 10

Defining a site................................................................................... 12

Chapter 3: Connecting to an Access Database………….………..…….. 20

Chapter 4: Creating a Recordset………….………….…………….…….. 26

Chapter 5: Creating a Dynamic Web Page………….…………….…….. 31

Binding dynamic data....................................................................... 34

Chapter 6: Enhancing Your Web Page………….………………..….….. 39

Navigation Bar………....................................................................... 42

Chapter 7: Review & Resources………….………...……………..….….. 44

Glossary ………………………………..………….………………..….….. I

Appendix A: Common Errors & Solutions..…….……………..….….. III Appendix B: Tips & Tricks…………..…………..………………..….….. VI

Page 4: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page i

PREFACE Welcome to Dreamweaver

Dreamweaver MX 2004 is a professional web design software program which allows you to develop robust web applications in an easy-to-use environment. It is similar to Microsoft FrontPage and Adobe GoLive in that all three programs can be used to create static web pages. Its primary distinction – and the reason you are reading this manual – is that Dreamweaver can also help you build web pages that interact with databases.

Dreamweaver is used in many ways and for many purposes. Just about any organization that has a website or intranet can benefit from the power of Dreamweaver. Sometimes the need is just to create a “front-end” or user interface for an existing database. Other times, the need is to develop a new database and a web-based data entry/data manipulation system. Here are just a few examples of Dreamweaver in action:

• A corporate intranet that allows employees to “clock in” and “clock out” through their browser

• An online store that has a “shopping cart” system for buying, shipping and tracking products

• A dating service website that allows clients to create and maintain personal profiles

• A media website that allows correspondents in the field to log in and add new stories

Dreamweaver has many applications in Law Enforcement, however many are outside the purview of the analyst. Although our primary emphasis will be on the application of Dreamweaver in Crime Analysis, here are some other LE examples:

• A police department website that allows the public to report certain non-critical incidents such as bicycle thefts or gas drive-offs without tag information

• An intranet that allows the Personnel unit to post new recruits’ photos but change no other information in any other part of the site

• Investigators in the field adding gang information to a database via a wireless connection

• A web-based front end to an RMS or crime analysis database

• A chat program that allows officers using laptops to communicate with one another

• A SWAT form that allows prospective members to apply online

• CompStat charts and graphs based on live data, accessed through the browser

Page 5: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page ii

As Crime Analysts, we work with large amounts of data on a regular basis. Depending on your agency, other personnel may or may not have access to this data. Dreamweaver is one way you can make it accessible in a way that requires little maintenance on your part. While there will always be that one Sergeant or Lieutenant who insists that you print up a report for him or her (and maybe even deliver it with a fresh cup of coffee), most folks will readily embrace the web-based approach. Developing web applications for crime analysis is a continuum; on the most basic end you create simple pages to display information. There is no user interaction at this level (i.e. the user cannot enter variables such as offense type or a date range) but the information is being disseminated nonetheless. About halfway along, you are creating pages with forms that allow users to filter the data. This may be a date range, an offense type, a district or beat, or a combination of these. This type of page has more utility for the user but also requires more knowledge to create. At the far end of the continuum are the advanced applications. These sites would have many or all of the following:

• Forms for collecting multiple criteria for querying

• Sorting features to sort the results a variety of ways

• Export features to send the results to another program (like Excel)

• Formatting code to format the page for printing

• Smart query code that searches multiple fields at the same time

• Validation code to evaluate user entries and determine if they are the appropriate data type (i.e. preventing users from typing the letter “A” in a date field)

This manual will help you get started but it is not meant to be a comprehensive guide to Dreamweaver. It is up to you to identify your own needs and pursue the training and education necessary to achieve your goals. There is a wealth of assistance online regarding Dreamweaver and I encourage you to use it. Whether you are just learning enough to do a simple page or you want to develop a complex site, this manual will help you get started!

Page 6: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 1

CHAPTER 1 Getting Started With Dreamweaver MX 2004

1. Installing Dreamweaver

The 30-day free trial version of Dreamweaver MX 2004 is located on the resource CD in a directory called DreamweaverMX2004-Trial. This directory also includes four user guides (in Adobe Acrobat™ PDF format) and an installer for a program called HomeSite. HomeSite is an editor that is designed for advanced users who prefer to work in a code-only environment.

Figure 1: Contents of the DreamweaverMX2004-Trial Directory

If you have purchased the full version of Dreamweaver, you will see the splash screen in Figure 2. If you are installing the trial from the resource CD, you will need to browse to the DreamweaverMX2004-Trial directory and double-click the file called Dreamweaver MX 2004 Installer to initiate the installation process.

Page 7: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 2

Figure 2: Splash screen for the full version

The Dreamweaver installer will begin the installation process. It is strongly recommended that you accept all default selections during the installation process.

Figure 3: The Dreamweaver Installer

Review the End User License Agreement (EULA) and determine the installation location on your PC.

Page 8: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 3

Figure 4: The Dreamweaver EULA

Figure 5: Determine the installation folder

The default location is recommended, although you can change the location if necessary.

Page 9: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 4

Figure 6: Choosing file type associations

Unless you deselect one or more boxes in Figure 6, Dreamweaver will be the default program used to open the file types above. It is recommended that you leave all boxes checked (default) but you must leave the Active Server Pages (ASP) box checked so that Dreamweaver will be the default editor to open the pages you create.

Figure 7: Final confirmation before installation

Page 10: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 5

Figure 8: The installation process

Figure 9: Installation is complete

The Dreamweaver installation is complete! When you click Finish, the installer will open the installation directory. You will see another program called the Extension Manager. Extensions and the Extension Manager will be discussed later in this manual.

Page 11: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 6

2. The Dreamweaver Workspace

To launch Dreamweaver, go to Start Programs Macromedia Macromedia Dreamweaver MX 2004. The first time you start Dreamweaver you will see the dialog box pictured in Figure 10. Choose the Designer mode. You can change this setting later by going to Edit Preferences in Dreamweaver. Please note, however, that all screenshots in this manual are based on the Designer layout.

Figure 10: Selecting your workspace layout

Once you select the Designer workspace, Dreamweaver will open and you will see the start page shown in Figure 11.

Figure 11: The Dreamweaver start page

Page 12: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 7

The Dreamweaver workspace is organized into two main areas: the document window and the panel groups. By default, the Insert panel appears above the document window and the other panel groups appear on the right side of the program. Dreamweaver has a “floating” layout; panels can be moved, grouped and reorganized to suit your individual needs.

Figure 12: The Dreamweaver workspace

We will routinely use a few areas of the Dreamweaver interface. If you have Dreamweaver open, take a moment to locate these areas in the Dreamweaver workspace, as we will access them often.

Page 13: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 8

a. Insert Panel Group

The Insert panel group contains two panels that we will use regularly. The Common panel is used to add hyperlinks, tables, photos, etc. The Forms panel is used to create forms to collect input from users.

b. Application Panel Group

The Application panel group is perhaps the most important panel group we will use. It is where all the tools for database interactivity are located. Here we will create a database connection, gather our records into a recordset and bind them to our web page. We will also enhance our pages using the Server Behaviors panel. The Components panel will not be used.

c. Files Panel Group

The Files panel on the Files panel group is a management area. All files and folders in the site are accessible in the files panel. You can also upload files via FTP from the Files panel, view a visual site map, delete files, and rename files. We will leave the Files panel expanded because Dreamweaver has a nifty feature to help you link files together that we’ll explore later.

3. Setting up Dreamweaver

Dreamweaver is now installed and ready to use. Based on experience, I have found a few settings modifications that will enhance your ability to use Dreamweaver effectively. This section is optional but you are encouraged to alter these settings.

a. Split View

At the top of the document window, you will see the buttons shown in Figure 13 below. Code, Split and Design affect the way you view documents. I recommend you use split view, which allows you to see both the design as well as the underlying code. The best way to learn how the code works is to watch Dreamweaver write it for you.

Figure 13: Code, Split and Design views

Page 14: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 9

b. Show Insert Panel as Tabs

This version of Dreamweaver has the insert panel set to function as a menu by default.

Figure 14: The insert panel shown as a menu

We will convert the menu to tabs because it is easier to see all the panels. Click the “Common” button above the document window and choose “Show As Tabs”. You can change it back by right-clicking on “Insert” and choosing “Show As Menu”.

Figure 15: The insert panel shown as tabs

c. Invisible Elements

There are a number of “invisible elements” that we will be using to develop dynamic web pages. A full list of these elements can be found by Choosing Edit Preferences from the Dreamweaver menu and then selecting the invisible elements area from the left pane.

Figure 16: Configuring invisible elements

Configure your Dreamweaver installation to mirror the settings above. For now, confirm the “Show dynamic text as:” setting equals {Recordset.Field}. We will change this setting later.

Page 15: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 10

CHAPTER 2 Web Server Configuration and Site Definition

1. Web Server Configuration You may need assistance from your IT staff to complete this section

Dreamweaver is now installed and some basic workspace changes have been made. We have explored the Dreamweaver workspace and are almost ready to begin creating pages. However, before we can author our first page we have two tasks to complete. First, we need to configure the web server to accept and serve our new application. Second, we need to define a site in Dreamweaver.

a. Web Server & Virtual Directory Configuration

In order to serve dynamic pages based on the ASP VBScript server model, you will need access to a Windows-based web server that is capable of serving ASP pages. If the web server has IIS installed, the ASP component should work by default. You will need to create (or have created for you) a virtual directory on the web server to store your pages. Here is a summary of what needs to be done:

• You need a virtual directory to be created on a web server running IIS that has enabled support for ASP. If you don’t know what this means, don’t worry because your IT staff will! Server operating systems might include Windows NT, Windows 2000 Pro, Windows XP Pro, Windows Server 2000, or Windows Server 2003. Windows NT, 2000 Pro and XP Pro are not recommended because IIS is more limited in those operating systems (but can be used if absolutely necessary). Your virtual directory will need Read, Run and Write permissions.

• Your virtual directory will have an alias – you should tell your IT staff what to use for the alias and document the alias name in case you need help with the virtual directory in the future. Deleted sentence. The alias should be one word and should be relevant to your application. For example, if your application accesses Calls For Service information, you might have a site alias called “CFS”. If it contains records information, it might be called “RMS”. You will need a separate virtual directory & alias for each site you develop.

You SHOULD NEVER EVER EVER create a site within a site. Be sure to tell your IT staff that you require separate virtual directories for each site because they may recommend that you just create a subdirectory for subsequent sites. It seems reasonable from their perspective but this practice will cause many serious problems in Dreamweaver!

Page 16: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 11

• You (and whomever else is developing the application) will need to have adequate permissions set on the virtual directory. You need to have Read, Write and Modify permissions because you will be saving pages, deleting pages and creating subdirectories in your web server folder. Ideally you should have full permission to the virtual directory but your IT department may not grant you that level of access.

• When your virtual directory has been created, you need to know the physical path to the directory. Examples might include:

\\OurServer\CFS \\AnytownPD\CrimeAnalysis\RMS \\Webserver\CAU\CFS

• You need to know the URL you will use to browse to the pages. Your IT staff or whoever creates the virtual directory can tell you this information. URL examples (matching those above) might include:

http://OurServer/CFS http://AnytownPD/CrimeAnalysis/RMS http://Webserver/CAU/CFS

b. Testing Your Virtual Directory

To determine whether or not your virtual directory is configured for dynamic web pages, copy the file called Test.asp (located on the Resource CD in the Sample Files directory) into the virtual directory and browse to it from your web browser. The URL might be something like http://OurServer/CFS/Test.asp or http://AnytownPD/CrimeAnalysis/RMS/Test.asp. You should see the following message: “Your web server is configured correctly... you can now create a dynamic web application!” If you do not see this message, you need to reexamine your virtual directory configuration.

Before you continue, there is a setting in Internet Explorer that you need to change which will help you troubleshoot any errors you may encounter. In Internet Explorer, go to Tools Internet Options Advanced. Uncheck the box by “Show Friendly HTTP Error Messages” and click OK. Friendly messages will always show “Page Cannot Be Displayed” regardless of the actual error. This setting change will show you the exact error if you should encounter a problem.

Page 17: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 12

2. Defining a Site in Dreamweaver

Once your virtual directory is up and running, you’ll need to define a site in Dreamweaver. A “site” refers to the location where your files are stored (both locally and remotely), but it is much more than that. When you set up your site, you are telling Dreamweaver some important things about how you want to work with your web application. In general, Dreamweaver needs to know the following about your application:

• Where will your local files be stored?

o These are your “working” files, usually stored on your own computer (but they can also reside on a network drive). Only the web application developers should access this copy of the files; these are the “originals”.

• Where will the remote files be stored?

o These are simply copies of your local files which visitors to your site will access through their web browser.

• Are you using a server model to create dynamic pages? If so, which model?

o We will be using the ASP VBScript server model (more on that later).

• How will you connect to and upload your files (i.e. publish your site)?

o Common choices are File Transfer Protocol (FTP) or Local/Network.

To set up a site, go to Sites Manage Sites. This will bring up the site management dialog box seen in Figure 17. Choose New Site.

Figure 17: Site management dialog box

Page 18: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 13

Dreamweaver has two options for creating a site. Beginners can use the Basic wizard process. Experienced users can use the “Advanced” tab. Both collect the same information, just with different prompts. For now, we will use the wizard. Once you are comfortable creating sites you can explore the advanced option but it ultimately makes no difference which you use.

The following screenshots take you step-by-step through the process of creating a site using the site definition wizard. Please keep these two things in mind regarding sites in Dreamweaver:

1. Name your site something that relates to the application you are developing. For example, if you are developing an application to access Calls For Service data, you might call your site “CFS”. If you are creating an application that uses your crime analysis database, you might call the Dreamweaver site “Crime Analysis”. This convention will help you identify which sites hold which pages. For simplicity and consistency, you may choose to use the same name for your Dreamweaver site as you chose for your virtual directory alias.

2. VERY IMPORTANT! Sites should not – under any circumstances – be contained within one another! For example, if you have a site located a C:\My Site and you are creating a new site, DO NOT create a subdirectory within C:\My Site to house your second site. Something like C:\My Site\My New Site will cause you much grief when trying to link pages because Dreamweaver cannot discern between a subdirectory in a site and a site within a site. Just create a new directory such as C:\My New Site and you will be fine.

Figure 18: Site definition step 1 (Naming your new site)

Page 19: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 14

Figure 19: Site definition step 2 (Choose the ASP VBScript server model)

Page 20: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 15

Figure 20: Site definition step 3: Determine location for local files

The dialog box in Figure 20 requires two pieces of information. The first question asks you to determine your working environment.

1. Select the first option if your computer is the same computer that will be hosting your site. You must have IIS installed on your PC to use this option. In this scenario, you have no “remote” site; the local and remote sites are located on your PC (although they may still be in two different places on your computer).

2. Select the second option (recommended) if you will be working with files on your PC or on a network drive, then uploading or saving them later to be hosted on a web server. This is the scenario that is referenced throughout this manual. Don’t forget to coordinate with your IT staff to have a virtual directory created on the remote (i.e. web) server.

3. Choosing the third option means there is only one set of files, and that they reside on the web host. Although you can use this option, it is not recommended. Once your application is in service and people are using it, they will experience problems if you are trying to edit the same pages that they are trying to access.

Page 21: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 16

Figure 21: Site definition step 4: Determine location for remote files

Most likely, you will choose Local/Network. If your web server is not on your local network, however, you may need to choose the FTP option. If that is the case, you will additionally need an FTP username and password to log in and upload files. If your IT staff will not allow you FTP access to the web server, you should select option #2 on the previous page then select “I’ll set this up later” when asked how you will connect to the server. You won’t ever set this up “later” because you wouldn’t have direct access to the testing (web) server. In this case you’d probably be sending the files to your IT personnel to put on the web server for you. This is a very inefficient way of developing a web application, but could be done if necessary.

Page 22: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 17

Figure 22: Site definition step 5: What is the URL to access the remote files?

Please review the Web Server Configuration section above, specifically #5, for URL information. One example entry here might be something like http://AnytownPD/CrimeAnalysis/RMS.

Page 23: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 18

Figure 23: Site definition step 6: Option for multi-developer environments

Figure 23 describes a feature of Dreamweaver called “check in/check out”. In an environment where multiple people may be working on the same site and potentially on the same file, Dreamweaver allows you to “check out” a file for editing. This locks the file and prevents someone else from opening and overwriting your changes and vice versa. When you are done editing, “check in” the file so others can make changes. This will most likely not apply to you and you can just choose “No” here.

Page 24: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 19

Figure 24: Site definition step 7: Review settings for accuracy

The last screen in the site definition wizard simply presents you with all the information you have entered thus far and allows you to go back and make changes before finishing the wizard. It’s a good idea to review this information at this time, but you can change it later if something is incorrect.

Once you have created your site definition, you can export those settings as a file (with the extension .ste). This is very handy if you change computers or ever need to set up your site again (and you will!) Over time you will forget the settings and it will take a while to remember, trust me! Just go to Site Manage Sites. Select the site you want to export and click the “Export” button. Browse to where you want to save the definition file (I recommend saving it in your site for easy access) then click “Save”. To import a previously exported site definition, simply repeat these steps but choose “Import” rather than “Export”. This feature is a real time-saver.

Page 25: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 20

CHAPTER 3 Connecting to an Access Database

Dreamweaver provides two methods for connecting to a database. You can connect using a DSN (Data Source Name) or by creating an OLE DB connection string. I strongly recommend that you do not use a DSN for several reasons.

First, a DSN has to be created on the computer you are using to create pages and on the server that is serving the pages. There is an option to use the server’s DSN for development, but I’ve never seen this feature work correctly. DSN usage creates a maintenance problem over time as computers are replaced and settings are forgotten. A year after you launch your application, you may not remember the exact DSN settings you used. Or, you decide to start editing your application from a different computer. You must re-create that DSN on the computer.

The other reason I do not recommend using a DSN is performance-based. OLE DB connection strings interact with databases more efficiently than DSNs and that is especially noticeable when working with large datasets as we do in crime analysis. For these reasons, the only connection method that will be covered in this manual is the connection string.

1. Connection Strings

A connection string is simply a line of text that tells a program like Dreamweaver how to connect to a database. Connection strings are not unique to Dreamweaver; they are used by many programs to connect to databases. The connection string provides Dreamweaver with basic information such as the type of driver to use, the physical location of the database, and (optionally) the database username and password if it is password-protected.

a. Basic Connection String

“Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Gangs\GangDatabase.mdb”

The connection string above is the most basic version. It should be used when:

• You are connecting to an Access database that does not have a password and…

• You know the location of the database and wish to use a hard-coded path.

Page 26: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 21

b. Connection String for Password-Protected Databases

“Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Gangs\GangDatabase.mdb;Jet OLEDB:Database Password=GangAnalyst;”

The connection string above adds support for password-protected databases. Please note that this will be entered into Dreamweaver in one long line, not separate lines. There should be one space between “Data” and “Source”, as well as “Database” and “Password”. It should be used when:

• You are connecting to an Access database that is password-protected and…

• You know the location of the database and wish to use a hard-coded path.

c. Connection String for Password-Protected Databases and a Relative Path

“Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " & Server.MapPath("/Gangs/GangDatabase.mdb") & ";Jet OLEDB:Database Password=GangAnalyst;”

The connection string above is somewhat different. It also supports password-protected databases just like the previous example but it introduces our first example of ASP code. Server.MapPath is used when you want to connect to a database without hard-coding the actual path into the connection string. Server.MapPath will look for the file you specify in the directory you specify, but the file can be anywhere in the directory (including in a subfolder). If you are planning to put your database on the Internet, you should use this connection string. You should also put your website files in a subdirectory and put the database one level above that. The reason for doing so is to prevent users from navigating directly to your database and downloading it. If it is in a directory one level above your files, the web browser cannot get there because it isn’t technically “part” of the website.

The correct structure for Internet applications:

My Website Folder

Database

Website Files (.htm and .asp)

Images

Miscellaneous

Do not set up your Internet application like this:

My Website Folder

Website Files (.htm and .asp)

Database

Images

Miscellaneous

Page 27: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 22

d. Connection String for Databases and a Relative Path

An example of the connection string above but without the password is:

“Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " & Server.MapPath("/Gangs/GangDatabase.mdb") & "

You can read more about connection strings by visiting the DMX Zone at:

http://dmxzone.com/showDetail.asp?TypeId=2&NewsId=3652&LinkFile=page3.htm

2. Creating a Connection String in Dreamweaver

To create a connection string you must have a document open. To begin a new document, start Dreamweaver and click on “ASP VBScript” under “Create New” on the Start Page (shown below), or go to File New Dynamic Page ASP VBScript and click “Create”. If you have previously created files you can also open one of them; you just need to have open a file that is in the site where you want to create a new connection.

Figure 25: The start page appears when you open Dreamweaver unless you have disabled it. To re-enable the start page, go to Edit Preferences General and check "Show Start Page" at the top

Once you have an open page you can access the Application panel group on the right side of the Dreamweaver workspace.

Page 28: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 23

Figure 26: The Application panel group & Database panel (or tab)

Click on the Database tab then click the “+” sign and choose “Custom Connection String” as shown above. You should see the connection string dialog box in Figure 27:

Figure 27: The Connection String dialog box

Enter a name for your connection. I recommend using “Conn” as a prefix or suffix and the rest should relate to the database. For example, if you’re connecting to a gang database, consider naming your string something like “GangDBConn”. If it’s an FI Card database, maybe “FIConn”. I strongly recommend that you use prefixes and suffixes copiously. Use them in field names, recordset names (more on that later), form field names, and connection strings. The best reason for doing so is to avoid ever using a reserved word. I once helped someone troubleshoot their database. The person could not retrieve information at all. When I looked at the fields, I noticed the “Description” field was called “DESC”. Well, “DESC” is a reserved word in Access; it is used to sort a query in DESCending order. If they had used a field name prefix such as GangDesc, it never would have been a problem. Moral: Always use prefixes or suffixes. Ok, off the soapbox and back to connection strings.

Page 29: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 24

After you have named your connection, enter one of the connection strings listed above into the connection string box. Make sure you change the default path to the correct path for your database location. Leave “Using driver on this machine” checked and press “Test”. If all goes well, you should see the dialog box in Figure 28.

Figure 28: You did it!

When you close the connection string dialog box, you’ll see your new connection listed in the Database panel. You can expand and collapse the database contents by clicking on the “+” and “-” signs, respectively. The example below shows a connection to the Crimes.mdb file in the Gotham Data folder on the resource CD. The connection string for this connection is: "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\ResourceCD\Gotham Data\Crimes.mdb"

Figure 29: Database panel with a connection string called “CrimesConn"

Let’s examine this more closely. This tree view should be a familiar interface. First we have the connection (CrimesConn). Next are the tables (MO, PERSONS, and VEHICLE). If you expand on a table, guess what you’ll see? Yep, the fields in that table. In the next “branch” of the tree, you see “Views”. This is consistent with SQL Server but not Access – it’s referring to queries. For our purposes, consider queries and views synonymous.

Page 30: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 25

What about Stored Procedures? If you opened Access and examined the structure there, you’d see that both “2001 Gotham Crimes Query” and “Get all” appear as query objects in Access. The difference – and the reason they are separated out here – is that “2001 Gotham Crimes Query” is a query without parameters and “Get all” requires parameters. A couple of notes about connection strings. You can have multiple connection strings in each site, and you will need a different connection string for each database used in that site. Sometimes you may want to have 2 connection strings for the same database – one for use with the local files on your computer and the other for use with the remote files on the server (see tip below). Finally, when you create a connection string, you will see that Dreamweaver has added a folder into your site called “Connections”. Inside that is an ASP file for each connection that you’ve made. You must upload this folder to your remote site for everything to work properly.

If you are using the local/remote setup (where you work on local copies then upload them to your server) AND you are using a copy of the database on your PC, create two different connection strings. Call one CrimeConn and the other CrimeConnRemote. Why two strings? Because the path to the database file on your server will be different that the path to the database on your computer. What you want is two copies of the same connection string file, but with different paths. When you upload your site, just delete the remote version of CrimeConn because it uses the path for your PC and rename the remote copy of CrimeConnRemote to be CrimeConn. Since CrimeConnRemote has the correct path for the database location on the server, and since all the files in your site are looking for a connection string called CrimeConn, everything will work. If you do this, you have to remember that you have two files called CrimeConn but they have different paths. It sounds a little confusing but it eliminates connection problems caused by having the wrong path. If you don’t do this, the files will only work on the local OR the remote, but not both.

Page 31: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 26

CHAPTER 4 Creating a Recordset

In this chapter, we will begin to build our first dynamic web page, AllCrimes.asp

1. Creating a Recordset Now that we have successfully connected to a database, we can begin to gather data to put on a web page! When you build and execute a query in Access, the result is a subset of data from your database table(s). Dreamweaver does the same thing and it calls that subset of data a recordset. Building queries in Access is analogous to building recordsets in Dreamweaver. Dreamweaver provides a simple interface to create a recordset. To access the recordset dialog box, go to the application panel group and click on the Bindings tab (called bindings because we will “bind” the data to the web page).

Figure 30: The bindings tab. Choose “Recordset” to create a recordset

Page 32: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 27

You are now presented with the Recordset dialog box shown in Figure 31. If you have experience building Access queries, the fields in this dialog box should be familiar to you. We will be building a query to extract everything from the MO table in the Crimes database.

Figure 31: The default (blank) Recordset dialog box

• Name: This is the name of your recordset. Remember my soapbox about using some type

of prefix or suffix? I strongly recommend you use one here, too. I use “rs”, as in rsAllCrimes, rsBurglaries, rsWhiteMales, etc. You will find that table field and form names run together when you’re looking at the code; it is helpful to be able to look at something and know what it represents. In this example, “rs” means recordset. By default, Dreamweaver will call your recordset Recordset1, 2, 3, etc. Call your recordset rsAllCrimes.

• Connection: Choose which connection you will use for this recordset. If you only have one, the choice is pretty simple. Remember that you have different connections for different data sources – this is why it’s important to name your connection strings in a meaningful way. Choose CrimesConn.

• Table: Select a table from the data source, just like adding a table to a Query in Access. Select the MO table.

• Columns: All is the same as * in Access; this choice will return all fields from the selected table. Selected allows you to return one or more fields. You can hold down the Control (ctrl) key to make multiple selections. Leave the default (All) selected.

• Filter: Which field do you want to use to filter your data? This is the WHERE part of the query. Leave the default (None) for this exercise.

Page 33: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 28

• Logical Operator: Choose the appropriate operator for your query. Leave the default (blank) for this exercise.

• Filter Source: Most of these choices will not make sense right now but they will soon enough. This field is basically asking you where it should look for the criteria that you are using to filter the selected field. Leave the default (URL Parameter) for this exercise (should be grayed out).

• Criteria: This is the empty box. The information you enter in this box depends on what you chose in the filter source. Leave the default (blank) for this exercise.

• Sort: Here you can choose a field to order your results and decide whether to sort ASCending (A to Z) or DESCending (Z to A). Leave the default (None) for this exercise.

To review, in this exercise we are creating a very basic recordset with no filtering or sorting; we are extracting all the fields from all the records in the MO table of the Crimes database. Figure 32 shows what the completed recordset dialog box should look like in Dreamweaver:

Figure 32: The completed recordset dialog box

At this point we could click “Test” to preview our data. This is a quick way to double-check your recordset to make sure it is returning the anticipated results.

Page 34: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 29

Figure 33: The rsAllCrimes recordset in the bindings panel

Once you have created the recordset and tested it, click OK. Save your file as AllCrimes.asp by going to File Save As or by right-clicking on the page tab (Untitled-1) and choosing “Save As”. You should see the rsAllCrimes recordset in the Bindings panel (The recordset name (rsAllCrimes) is at the top, followed by all the fields used in the recordset. Please note that some fields were removed from for the sake of creating a screenshot; your recordset should contain all fields from the MO table. You will also see three additional fields at the bottom that are not present in the MO table: first record index, last record index, and total records. Dreamweaver will add these three fields to every recordset; we will use them later to enhance our dynamic web page.

Page 35: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 30

To access the recordset dialog box after you’ve clicked OK, just double-click the recordset name in the bindings panel (You should see the recordset dialog box as shown in Figure 32. 2. The Advanced Recordset Dialog Box The “Advanced” button on the Recordset dialog box affords you greater flexibility in creating SQL queries. You can copy and paste your own query into the “SQL” field. You can also add parameters in the “Variables” section. As in other areas of the Dreamweaver interface, a “+” means “add” and a “-” means “remove” or “delete”.

Figure 34: The Advanced Recordset dialog box

The Advanced view shows you the underlying SQL and it show you what (if any) variables are used in the query. Because we have a very basic query with no filtering or sorting, the resulting SQL query is very basic. Note: The Dreamweaver “Advanced” view is similar to the SQL view in Access.

Page 36: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 31

CHAPTER 5 Creating a Dynamic Web Page

1. Creating a Table We’re now ready to build our web page! The first thing we need is some sort of framework to hold our dynamic data. Advanced web applications use CSS for positioning elements on a page, but we’re going to keep it simple and use a good old-fashioned table!

Adding tables in Dreamweaver is similar to adding tables in Microsoft Word.

Figure 35: Inserting a table from the common tab

Select the Common tab and click on the table icon (Figure 35). You should see the Table dialog box in Figure 36:

Figure 36: The Table dialog box

Page 37: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 32

Configure your table to match the settings as shown in Figure 36. Briefly, the choices are:

• Rows: Enter the number of rows you’d like to add. For dynamic data, we will almost always add just two rows, regardless of how much data we’re displaying. The reason for this will become apparent in later chapters. Enter “2”.

• Columns: Enter the number of columns you’d like to add. Each field should usually occupy its own column, but keep in mind the potential for extremely wide pages. The MO table has 51 fields, and your tables may be similar. It is not practical to create a 51-column table because the viewable area of a web page simply isn’t large enough to display all of this data. Although web pages can scroll horizontally to accommodate pages that are excessively wide, a 51-column page would be so wide that reading the data would be exceedingly difficult. As a compromise, we will enter “12” here. We will create a details page later that will display all fields. For the time being, we will choose 12 of the most important fields for the AllCrimes page.

• Table Width: This can be expressed as a fixed width (in pixels) or as a percentage of the browser window. You can play around with this to see what works best for you, just remember that a percentage-based table will expand or contract to fill the browser window. A table with a specified width in pixels will always be the same width, however, it may appear smaller on monitors that have a higher resolution. For this exercise, set the table width to be 95%.

• Border Thickness: If you’d like a border around your table, enter a number here for the width (in pixels). For this exercise, enter “1” just so we can see the outline of the table.

• Cell Padding & Spacing: Padding is the number of pixels between the text in a cell and the cell wall; spacing is the number of pixels between cells in a table. These are also settings that you can adjust to suit your taste, but enter a “2” for padding and a “0” for spacing.

• Header: You can highlight the appropriate choice if you are using a header. We will be using a header, but we will not select a header row. The reason I prefer not to use this feature is because Dreamweaver will center the text in the header row but not in the data row (row #2). If we were to choose “Top” here we’d either have to go back later and set the top row to be aligned left or set row #2 to be centered. Choosing “None” here will make both rows align left.

• Accessibility: This feature is designed to assist the blind who use screen readers (utilities that read web pages). If you are designing an intranet site and your agency does not use screen readers because you do not have any blind employees, you can leave these blank. Otherwise you should enter a caption and summary for the screen reader.

When you click OK, you will see your new table inserted into your page. Save your page by going to File Save or by clicking Ctrl + S.

Page 38: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 33

2. Adding Column Headers Before we add data to the page, we should enter some text into the first row. This text will be the column headers and will describe the data in the columns below. Yes, I realize there is only one column below, but we’ll address that soon enough! Scanning the recordset fields in the bindings panel, let’s decide which 12 fields we want to display. We could use the field names exactly as they appear in the table, but we want to conserve horizontal space and we don’t need the underscores and superfluous text. To enter text in the table, position your cursor into a cell and begin typing. You can also tab to the next cell. Here are the fields we’ll use and the text we’ll enter into the columns (in parentheses):

• IR_Number (IR#) • Crime (Crime) • Location_Type (Loc Type) • Point_of_Entry_1 (POE) • Method_of_Entry_1 (MOE) • Property_Taken_1 (Prop Taken) • First_Date (Date FROM) • Last_Date (Date TO) • Address_of_Crime (Address) • Address_Name (Loc Name) • Beat (Beat) • RD (RD)

Once you have entered the headers above, be sure to save your page.

Figure 37: Partial table with column headers

Page 39: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 34

3. Binding Dynamic Data to the Page Dreamweaver provides several methods to get the dynamic data from the bindings panel onto the web page. We will use the drag and drop method, but I’ll explain two other methods as well.

1. Drag-n-Drop: To use this method just grab a field from the bindings panel and drop it onto the page. We will be dropping the fields into row #2. Position the fields under the appropriate columns.

2. Inserting: Position your cursor in the cell where you want to add data. Select the field to add in the bindings panel, then click “Insert” at the bottom of the bindings panel.

3. Inserting, method #2: Position your cursor in the cell where you want to add data. Go to the Insert menu, Application Objects Dynamic Data Dynamic Text. Select the field you want to add and click “OK”.

If you try each of these, you will see that the drag-n-drop method is by far the quickest! Drop each of the 12 fields into their respective table cells. Your page should look like Figure 38:

Figure 38: Table with dynamic data

You will notice that each dynamic element placeholder has the recordset name followed by the field name. This is very useful when you first begin to use Dreamweaver because it allows you to more easily relate the data on the page with the fields in your recordset. The downside to this view is that it makes your page much wider than necessary in Dreamweaver. Your page will not likely be this wide when you test it; the browser page width is only affected by the width of the data actually represented by the placeholder – it is not likely that the data in all your fields will be wider than the recordset.fieldname placeholder. 4. Upload Your Files Using Dreamweaver’s PUT Command At this point we can save and test our page for the first time. How you test your page depends on how your site is configured. Refer back to Figure 20 for assistance. If your site is configured using options #1 or #2 (page ?), you will need to use the Dreamweaver “Put” command. If your site is configured using option #3, you only have one set of files so you can just save the page and browse to it through your browser.

PUTting your files is the Dreamweaver terminology for uploading your file(s) to your remote site. Bear in mind your remote site can be anything from another folder on your own computer (provided you have IIS installed and the “other” folder is a virtual directory), to a server located on the other side of the globe! To PUT your files, locate the Files Panel on the right side of the page (you may need to hide other panels using the right-facing arrows shown in Figure 39.

Figure 39: Use the panel arrows to show/hide panels

Page 40: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 35

The Files panel shows a list of all files and folders in your site. You can right click on one or more files (using the control key for multiple files or folders). You can also right click on the “Site” to reveal the context menu shown in Figure 40:

Figure 40: The Files panel and context menu

When you right click on the Site and choose “Put”, you’ll see the dialog box in Figure 43. Click OK to put the entire site.

Figure 41: PUTting the entire site

Page 41: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 36

Figure 42: The status dialog box

You will see the status dialog box in Figure 42 while your files are being uploaded. This process may take a few moments, depending on the quality of your connection to the remote server and the total size of the files you are uploading. You should always put the entire site when you are ready to test your first page. This will ensure that all dependent files such as the connection string file have been uploaded and are ready to use. After you’ve made changes to individual pages, you can right click on the file and choose “Put”. When you right click on one or more files (using control key for multiple files), you’ll see a slightly different PUT dialog box in Figure 43:

Figure 43: Include dependent files dialog box

As a general rule, you should choose “No”. The “dependent files” referenced in this dialog box include files such as the connection string. As long as you have previously uploaded your entire site, you need only to upload pages that you have changed. In our exercise, we uploaded the entire local site because none of these files previously existed on our remote server. As we make changes to selected files, we’ll just right click on the selected file(s) and “put” them. We will not include dependent files because we won’t be changing the dependent files. This is not such a big deal in our exercise because we are dealing with just a few small files. Choosing to upload dependent files on larger sites can cause frustration because it takes much longer to upload files and their dependents. Just remember to choose “No” here unless you have changed the dependent file(s). If you are uncertain, go ahead and put them all. Either way, DO NOT check the box to “Don’t show me this again”. I have never figured out how to bring back this dialog once the checkbox has been checked!

Page 42: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 37

Now that the entire site has been put, you can browse to the AllCrimes.asp page in your web browser. Review Chapter 2 for information about your website URL. You will need to type something that starts with “http://”. It may be something like “http://AnytownPD/CrimeAnalysis/RMS/AllCrimes.asp” or “http://CrimeAnalysis/AllCrimes.asp”. If you are using IIS on your own PC, the site’s URL prefix will be “http://localhost/”. If your site is in a virtual directory with an alias called “Crimes”, your URL would be “http://localhost/Crimes/AllCrimes.asp”. You may need assistance from your IT staff to determine the proper address. If you have tested your virtual directory as outlined in Chapter 2, you already know the URL; you simply need to replace “test.asp” with “AllCrimes.asp” to view your page. 5. Testing Your Dynamic Web Page You should now be able to preview your page. If you receive an error such as the one shown in Figure 44, simply close Dreamweaver and refresh your browser. You can now reopen Dreamweaver and it should work fine. This is an annoying byproduct of using MS Access; Dreamweaver connects to the database while developing pages and locks out the web server. It works fine if you browse to the page first and then open Dreamweaver.

Figure 44: "File in Use" error

If you only see a “Page Cannot Be Displayed” error and no additional descriptive text, please review the Internet Explorer setting change covered in Chapter 2, “Testing Your Virtual Directory”.

If all goes well, you should see something like Figure 45. You might notice that the cells for “Beat” and “RD” are missing (i.e. there are no borders around the cells). We will fix that in the next section. You should also only see one record displayed; this is normal and will be covered in Chapter 6.

Figure 45: The AllCrimes.asp page as seen in the web browser

Page 43: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 38

6. Adding Non-Breaking Spaces You may encounter a situation similar to Figure 45 where the cells in your table appear broken. By default, Dreamweaver adds “non-breaking spaces” to cells when you insert a table into your page. The problem, however, is that Dreamweaver removes them once you bind data to the cell. This is based on the (false) assumption by Dreamweaver that the cell will always contain data. The reality is that you will encounter fields that do not have data. When this happens, there is nothing to hold the cell together and it “breaks”. The solution is to add non-breaking spaces into the dynamic row of data. It’s a bit of a pin to have to do this manually, but you should do this for all dynamic cells in your page. To insert a non-breaking space, simply select a dynamic placeholder, and then press your right arrow key. Press shift+control+spacebar to insert the non-breaking space. If you are in split view and can see the code, you’ll see that Dreamweaver adds   to the cell. This is the HTML code for a non-breaking space. Repeat this for each dynamic placeholder. You’ll need to repeat this for each additional dynamic element you add to the page, or if you delete and re-add dynamic elements. 7. Formatting your page The Properties Inspector contains the tools you will need to format your page. These tools should be familiar to you as they generally look and work just like the ones in Microsoft Office. You can change the font, font color, bold and italicize your text. The only feature that looks different is the color picker shown in Figure 46. By default, Dreamweaver uses hexadecimal codes (i.e. #FFFFFF) for identifying colors. If you are not familiar with hexadecimal codes, just ignore the code and pick the color using the eyedropper cursor. Alternatively, you can click on the “globe” icon at the top right to use the familiar Windows System color picker. You can also click the right-facing arrow for more coloring options.

Figure 46: The Dreamweaver color picker

Page 44: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 39

CHAPTER 6 Enhancing Your Web Page

Congratulations! You have built and tested your first dynamic web page! The next step is to add some functionality, which will make your page more usable. 1. Repeat Region Server Behavior You may have noticed when testing your page that only one record is displayed. Although we have bound the dynamic data to the web page, we have not yet told Dreamweaver to display all of the records. You might think it is implicit that if you bind the data to the page, you MUST mean to show all of the data - that is not always the case. To show all of the records in the recordset, you must first select the row of data that you want to repeat, and there are several methods. You can highlight all cells in the row, or go to the left-most cell and hover your cursor on the left side of the cell until it changes to a right-facing arrow (see Figure 47), then click to select the entire row.

Figure 47: Selecting a row

Page 45: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 40

Once the row is highlighted, you need to apply a Server Behavior (or SB for short) called “Repeat Region”. Server Behaviors are pre-packaged blocks of code that Dreamweaver inserts into your page. The behavior tells the server what needs to be done (hence the name “Server” behavior). To insert a Repeat Region Server Behavior (with the row still selected), go to the Application panel group and select the Server Behaviors tab. Click the “+” sign and choose “Repeat Region” as shown in Figure 48.

Figure 48: Accessing the Repeat Region Server Behavior

Page 46: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 41

The Repeat Region dialog box shown in Figure 49 prompts you for 3 pieces of information: • Which recordset are you repeating? • How many records do you want to display?

o If not all records, then how many at a time? For this example, we will leave the default settings. Because we only have one recordset on the page, the default recordset choice is rsAllCrimes. The default setting for “show” is 10 records at a time. Click OK to add the server behavior.

Figure 49: The Repeat Region dialog box

You will now see a small gray box just to the upper left of the first repeated cell as in Figure 50. This element is invisible when the page is viewed in a web browser; Dreamweaver provides it for the design process only.

Figure 50: A Repeat Region on the page

Page 47: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 42

If you save your page and preview it, you should see something similar to Figure 51.

Figure 51: A repeat region (10 records at a time) applied to a page

We could have chosen to display all records rather than 10 at a time by choosing “All records” from the dialog box in Figure 49, however this is not always practical. Imagine if your table had 50,000 records…setting this option to “All records” would write all 50,000 records to one web page! In additional to its overwhelming appearance, the page would take an excessive amount of time to load. A better approach is to throttle the amount of data you send to each page, and this setting depends a lot of your particular need. You may find 10 is too few or 100 too many. To change the number, simply go to the “Bindings” tab and double click the Repeat Region. You can change the setting and click OK. You can also double click the recordset in the Bindings panel to make changes to the recordset criteria. 2. Recordset Navigation Bar Now that we have data repeating on the page, a new question emerges: If we have 500 records in our recordset and we’re only showing 10 at a time, how do we page through all of the records? The answer is an application object called a Recordset Navigation Bar. The navigation bar object is a block of code that adds links to your page. These can be images or text (as shown in Figure 52) and they are pretty straightforward. They move your recordset by n records (whatever number you chose in the Repeat Region dialog box) each time you click a link. For example, if you choose to display 10 records at a time, when you click the “Next” link you will see the next 10 records. If you click last, you’ll see the last 10 records in the recordset.

Figure 52: A (text) Navigation Bar added to a page

Page 48: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 43

To insert a recordset navigation bar, place your cursor where you want to put the bar (usually at the very bottom or top of the page), then go to Insert Application Objects Recordset Paging Recordset Navigation Bar (see Figure 53).

Figure 53: Accessing the recordset navigation bar feature

This will bring up the navigation bar dialog box shown in Figure 54. Select the appropriate recordset (rsAllCrimes in our case) and choose “Text” or “Images”. For now, we will use text. Remember if you use the image option that Dreamweaver will automatically copy the necessary images to your local site but you will need to upload them to your remote site so they are accessible to others. After clicking OK, you will see the new object on your page as in Figure 52.

Figure 54: The Recordset Navigation Bar dialog box

Page 49: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page 44

CHAPTER 7 Review and Resources

1. Review This manual has covered some of the fundamental concepts for installing, configuring, and using Dreamweaver in crime analysis. Not all aspects of the program have been covered, but the information presented here is a good start. You should now be able to create simple web pages that display database information. Please visit the IACA website at http://www.iaca.net for future updates to this manual and other Dreamweaver articles. These will be posted in the Articles section, which can be accessed by clicking on “Resources”, then “Articles” from the IACA home page. 2. Additional Resources

• Macromedia Exchange – Many free or low cost extensions – www.macromedia.com Downloads Exchange

• DMX Zone – A wealth of information and lots of good extensions – www.dmxzone.com

• Massimo Foti – www.massimocorner.com

• Dreamweaver Fever – www.dreamweaverfever.com

• InterAKT – Some good extensions – www.interaktonline.com

• 4 Guys From Rolla – A very good resource for ASP/VBScript help – www.4GuysFromRolla.com

• WebAssist – Good solid extensions – www.webassist.com

• Experts Exchange – A fee based site ($9.95/mo) where you can ask questions and get good answers. This

site is not restricted to Dreamweaver. I highly recommend subscribing! – www.experts-exchange.com

Page 50: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page I

GLOSSARY of Terms

Application Server Software which processes code in web pages. In the case of ASP, this is a single file called ASP.dll which is installed by default with IIS. ASP Active Server Pages. A scripting language developed by Microsoft for creating dynamic web pages. ASP code embedded in a web page is interpreted and processed by the application server. Client-Side Code Code that is processed by the user’s computer (the “client”). Javascript is an example of client-side code. Connection String A connection string is a set of instructions that define how to connect to a database. A connection string includes the driver to be used, the location of the database, and the username and password, (if required). When you create a connection string in Dreamweaver, it will create a folder called “Connections” and put your connection string file in there. You must upload the Connections folder so that others can use your web application. See Chapter 3.1 for more information about connection strings. Dynamic Page A web page that has partly or entirely undetermined content at the time it is requested by the user’s web browser. The application server processes code within the page to produce the content. An example would be a page with an extension of .asp, .jsp, .aspx, or .php. Form A form is a container for collecting input from a user. Forms contain form fields (which include text boxes, checkboxes, radio buttons, text areas, and file fields) where user input is entered. The form is then submitted for processing. To collect input from a user, you must first add a form to your page and then add a form field to the form. The type of form field used will vary depending on the type of data collected. IIS Internet Information Services. A snap-in for Microsoft Windows which allows you to serve web pages. It includes built-in support for ASP.

Page 51: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page II

Include File An include file is literally a file within a file. For example, when you create a recordset, Dreamweaver will automatically add the database connection to the page as an include file. The syntax is <!--#include file="Connections/CrimesConn.asp" -->. Wherever you see an include file, remember that the entire contents of that file will be “included” in that location on your page. It’s analogous to copying and pasting the code from the include file into your web page. The advantage of using include files is that your code becomes modular; you can build a page one time and “include” it into many pages. This reduces the amount of code you have to write and if you need to make a change you only have to change it in one place. Some examples of common include files uses include headers, footers, disclaimers, and navigation menus. Your include file can have any code you want, just remember to remove the HTML tags from the include file (<html> and </html>) because that will cause errors. Also, your include file can have any extension. I prefer to use .asp for include files, even if there is no dynamic content on the page. Recordset A subset of data extracted from one or more tables. A query is used to extract a recordset from a database. Server Behavior Also called “SB” for short. A block or blocks of code, inserted by Dreamweaver, which instructs the server to perform a specific function. For example, the “Insert Record” server behavior code tells the server to insert data from a form into a database. The “Repeat Region” SB tells the server to iterate through n records from a recordset (n is user-defined, see Chapter 6.1). Server-Side Code Code that is processed by the server. ASP is server-side code. Site In Dreamweaver, this refers to the location where your files are stored. There is usually a local site and a remote site, although they can be one in the same. Static Page A web page that has all content determined at the time it is requested by the user’s web browser. There is no server-side code on the page. An example would be a page with an extension of .html or .htm. VBScript Visual Basic Script, the “little brother” of Visual Basic. VBScript (or VBS) is a non-compiled scripting language. Web Server This can refer to either (a) the hardware (computer) where your remote files physically reside, or (b) the software (such as IIS) that allows you to serve web pages. Web Application A website that contains pages with partly or entirely undetermined content (i.e. “dynamic pages).

Page 52: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page III

Appendix A Common Errors & Solutions

Name redefined This error occurs when there are multiple instances of a connection string or recordset on a page. For example, the following will cause this error: <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!--#include file="Connections/CrimesConn.asp" --> <!--#include file="Connections/CrimesConn.asp" --> <% Some other code…. %> The error is that the include file code line appears twice. This can occur when changing an Insert, Update, or Delete Server Behavior on the page. It can also happen when you change a recordset. Example Error Type: Microsoft VBScript compilation (0x800A0411) Name redefined /Connections/CrimesConn.asp, line 2, column 4 Dim MM_CrimesConn_STRING ---^ Solution Delete one occurrence of the code. In the case of a duplicate connection string, The string should appear only once and should always be at the top of the page, just below <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> In the case of a duplicate recordset, you must examine the page and remove several blocks of code. For example, if you have a duplicate recordset called rsCrimes, you would remove one instance of the following: <% Dim rsCrimes Dim rsCrimes_numRows Set rsCrimes = Server.CreateObject("ADODB.Recordset") rsCrimes.ActiveConnection = MM_IACAConn_STRING rsCrimes.Source = "SELECT * FROM Crimes" rsCrimes.CursorType = 0 rsCrimes.CursorLocation = 2 rsCrimes.LockType = 1 rsCrimes.Open() rsCrimes_numRows = 0 %> And also this block located at the bottom of the page:

Page 53: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page IV

<% rsCrimes.Close() Set rsCrimes = Nothing %> Ultimately you must examine the page and remove one instance of anything you see twice. You can also comment out lines of code by using a single quote ‘ to test the page before removing the code. ---------------------------------------------------------------------------------------------------------------------------- Arguments are of the wrong type, are out of acceptable range, or are in conflict with one another. This error generally occurs when you add a new recordset to a page, or add a recordset to a page that did not previously have a recordset. Dreamweaver puts the recordset code ABOVE the connection string, so the page is trying to retrieve records BEFORE the connection to the database has been established. Example Error Type: ADODB.Recordset (0x800A0BB9) Arguments are of the wrong type, are out of acceptable range, or are in conflict with one another. (ThePageName).asp, line 7 Solution Move the connection string: <!--#include file="Connections/IACAConn.asp" --> To the top of the page, just below <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> ---------------------------------------------------------------------------------------------------------------------------- Object required: '' This error generally occurs when you have renamed a recordset and the old recordset is referencing a field that doesn’t exist in the new recordset. For example, you have a piece of data on your page called {IRNumber} but {IRNumber} doesn’t exist in the recordset. It also occurs when you are referencing a field or recordset that doesn’t exist on the page. This can happen when you copy recordsets from one page to another. Example Error Type: Microsoft VBScript runtime (0x800A01A8) Object required: '' Solution Go to the line noted in the error and confirm that the fields on that line exist in your recordset. ----------------------------------------------------------------------------------------------------------------------------

Page 54: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page V

Could not use "; file already in use This occurs when you have an Access database on your local PC and you are trying to develop and test at the same time. When you open Dreamweaver and start developing pages, it will lock the database so when you try to preview the page you might see this error. Example Error Type: Microsoft JET Database Engine (0x80004005) Could not use "; file already in use Solution Close Dreamweaver. Refresh your dynamic page. Reopen Dreamweaver. You should only have to do this once and then it should work fine. ---------------------------------------------------------------------------------------------------------------------------- Either BOF or EOF is True, or the current record has been deleted. Requested operation requires a current record. BOF is “Beginning of File”; EOF is “End of File” – This just means that the program has iterated through the recordset and did not find the data you are trying to extract. This error usually occurs when your page is attempting to display data from an empty field or empty recordset. Example Error Type: ADODB.Field (0x800A0BCD) Either BOF or EOF is True, or the current record has been deleted. Requested operation requires a current record. /Filename.asp, line x Solutions Add some text onto your page like, “Sorry, this record not found” and apply a “Show Region If Recordset is Empty” server behavior to the text. Alternatively, if your data is in a table, highlight the table row containing dynamic data and apply a “Show Region If Recordset is Not Empty” server behavior (i.e. the recordset contains something). You can apply this behavior to individual fields as well as a whole row of data. Finally, you should also examine the database to determine why the data is not present. ----------------------------------------------------------------------------------------------------------------------------

Page 55: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page VI

Appendix B Tips & Tricks

Copy recordset from one page to another You can copy a recordset from one page to another. To do so, simply select the recordset you want to copy and press Ctrl + C (for copy). Go to the destination page, click in the white area of the Bindings panel and click Ctrl +V (for paste). You can also access the copy & paste functions by right clicking on the recordset and in the white space. If a recordset with the same name already exists on the destination page, Dreamweaver will automatically call the copied recordset “Recordset1” You can rename it by double clicking on it and giving it a new name. Double click to fix Sometimes you will see a red exclamation mark in the Server Behaviors panel (“!”). This is not always an error – if you change Dreamweaver’s code, it will add the exclamation mark because it cannot read the customized code. If you see the exclamation mark but have not changed the code, simply double click the element and then click ok. Many times this will fix whatever was causing the problem. Find and Replace – Powerful and Dangerous Dreamweaver gives you many options when using Find and Replace. You can do find and replace operations on a single file, all open files, a selected folder, or the current local site (all files in the site). Once you execute a find and replace operation, it cannot be undone. If you are doing so on a file that is not currently open, Dreamweaver will make the change and save the file automatically. If you are ever uncertain about a find and replace operation, make a backup copy of your site before making the change. Finally, Dreamweaver always uses the last setting for each new find and replace option. Make SURE that the target (i.e. current file, selected folder, etc) is CORRECT before executing the operation. You may want to make a site wide change this time but the next time you only want to effect the current file. If you do not change the target from “Entire local Site” to “Current File”, you will apply that change to all files in the site. The find and replace feature of Dreamweaver is powerful, but use it with caution. Concatenating Dynamic Fields in Dreamweaver Concatenating is not necessary because you can just position the elements together. However, it is good to know how to concatenate when the necessity arises. In the Crimes database, our address is in one field called Address_of_Crime, but what if it was in four fields? How would you concatenate them into one field? You would first drag and drop each element onto the page into a single cell. Then go into the code (if you’re using split view, it should be visible at the top of your page). Select the first element on the page so that its corresponding code is highlighted. The code might look something like this:

Page 56: Making Access Accessible: Using Dreamweaver In Crime Analysis

Making Access Accessible Page VII

<%=(rsAllCrimes.Fields.Item("Address_StNum").Value)%><%=(rsAllCrimes.Fields.Item("Address_StDir").Value)%><%=(rsAllCrimes.Fields.Item("Address_StName").Value)%><%=(rsAllCrimes.Fields.Item("Address_StType").Value)%> Delete the following code between each element: %><%= And replace with the following: & “ “ & Leave the beginning of the first element ( <%= )and the end of the last element ( %> ) alone. You should make 3 replacements (in this example) and end up with the following code: <%=(rsAllCrimes.Fields.Item("Address_StNum").Value) & “ “ & (rsAllCrimes.Fields.Item("Address_StDir").Value) & “ “ & (rsAllCrimes.Fields.Item("Address_StName").Value) & “ “ & (rsAllCrimes.Fields.Item("Address_StType").Value)%> Because you have changed Dreamweaver’s code, you will only the first element on the page, but if you look in the code you will see all of them. When you save and preview the page, you will see each address part separated by a space. Using & “ “ & will allow you to concatenate any string of values. Using the Tag Selector There are several ways to select items on a page, but the best way is by using the Tag Selector. The Tag Selector appears at the bottom of your page and looks like this:

The more HTML code that you have on your page, the more tags you will see here. If you have nested elements, you will see multiple tags (one for each element). The tags you see also depend on where your cursor is positioned. You can select an element on the page by selecting its corresponding tag. The tags are hierarchical from left to right. In the example above you have the body tag (<body>) which contains everything. Then there is a table (<table>) within the body, a table row (<tr>) within the table and a data cell (<td>) within the row. Clicking on the tag will highlight the selection on the page. This is the best way to select items, especially when applying server behaviors.