Figure 1: The Application bar
Dreamweaver contains many built-in tools to aid in quickly building dynamic sites. One such tool is the Record Insertion Form Wizard. Using this tool, I'll show how to set up a simple user registration form on a web site. The registration form will allow a user to register for a site (free site or membership site), and include a way for the user to agree to a user agreement and also opt-in/opt-out of a newsletter. The tutorial will apply equally to PHP, ASP, ColdFusion, and JSP using built in tools. This is the first part in a series. Part 2 will show validation and the user agreement, and Part 3 will show how to pass registration details to Paypal or other payment processor for a paid membership-type of site.
The first step in building your registration page is to set up a database table to hold user details. At this point, you have to decide the following:
Using these basic guidelines, our sample database table will contain the following fields, with required fields marked by an asterisk:
The table will be called Members. The database fields are prefaced with Member to avoid potential conflicts with your database system. For example, is Username a reserved word in your system? If you aren't sure, it's better to pick something more likely to be unique, and the word "Member" indicates that the given field is in the Members table. This is useful in the future in joins with other tables, but that will not be required for this simple tutorial. The MemberID field will be the primary key and will be filled in automatically by the database using an autonumber or auto increment field.
The following SQL statements can be run in your database administrative interface. If you are using MySQL, there are many interfaces available, but you should work with one that allows execution of SQL statements, like MySQL Control Center.
CREATE TABLE `members` (
`MemberID` int(11) NOT NULL auto_increment,
`MemberUsername` varchar(20) NOT NULL default '',
`MemberPassword` varchar(20) NOT NULL default '',
`MemberEmail` varchar(128) NOT NULL default '',
`MemberFirstName` varchar(128) default NULL,
`MemberLastName` varchar(128) default NULL,
`MemberAddress` varchar(128) default NULL,
`MemberAddress2` varchar(128) default NULL,
`MemberCity` varchar(128) default NULL,
`MemberState` varchar(64) default NULL,
`MemberPostalCode` varchar(10) default NULL,
`MemberEmailPermission` tinyint(1) default NULL,
`MemberWhereDidYouHear` varchar(128) default NULL,
PRIMARY KEY (`MemberID`)
);
CREATE TABLE Members (
MemberID int IDENTITY (1, 1) NOT NULL,
MemberUsername varchar (20) NOT NULL,
MemberPassword varchar (20) NOT NULL,
MemberEmail varchar (128) NOT NULL,
MemberFirstName varchar (128) NULL,
MemberLastName varchar (128) NULL,
MemberAddress varchar (128) NULL,
MemberAddress2 varchar (128) NULL,
MemberCity varchar (128) NULL,
MemberState varchar (64) NULL,
MemberPostalCode varchar (10) NULL,
MemberEmailPermission bit NULL,
MemberWhereDidYouHear varchar (128) NULL
)
If you have another database, you can create the table manually using the information in the CREATE statement.
After creating the table, you will need to set up a database connection using the Databases tab. This is covered extensively in the Dreamweaver help section under Using Dreamweaver > Preparing to Build Dynamic Sites.
Open a blank page in Dreamweaver and save it. I've called mine signup.php, but you can call it anything. I find it a good practice to save the page before applying any dynamic content to it so that Dreamweaver knows where to put the file references needed for connections, css, scripts, images, and other items. Dreamweaver "can" figure this out upon saving, but it is easier to do it from the beginning.
Next, open the Insert bar to the Application tab. The Record Insertion Form Wizard is one of several wizards that come with Dreamweaver:
Figure 1: The Application bar
Tip: You can also access the wizard from the Insert menu -- Insert > Application Objects > Insert Record > Record Insertion Form Wizard.
The wizard will create the form and all dynamic code for the page. The wizard dialog box looks like this:
Figure 2: The Record Insertion Form Wizard
The different parts of the interface are explained below:
Connection. The connection to your database that you have set up previously
Table. The table to insert into, in this case Members
After inserting, go to. This is the page that your user will be redirected to after a successful insert. We'll use a page called thankyou.php, which should contain some sort of thank you message to the user.
Form Fields. This is a multi-step process. First, remove the MemberID field from the list by clicking the minus sign. This is always required when the primary key is generated by the database. Next, choose each field in turn and give the label a user-friendly label. The only field that needs to change from a TextField to something else is the MemberEmailPermission field -- this should be set to use a checkbox. The other values in the wizard for Form Fields can use the default values.
Tip: For added database security you can name your form fields something different from the database fields so that a potential hacker has no information about your database (for example, name the MemberFirstName field to FirstName) Remember, no spaces or other weird characters are allowed in a form field name.
With everything filled in, you can click OK. The form with all necessary server-side code will be added to the page.
Save the page and click F12 to preview the page in a browser. If everything was done correctly, you should be able to enter things into the fields and have them inserted into the database.
Recall that several of the fields were required -- right now there is no mechanism to prevent errors. Part 2 of the series will show how to add client-side JavaScript validation of form fields.
User membership or signup forms are a staple of the web, and one can be created easily in Dreamweaver using built-in tools. The next part in the series will show some simple validation to make sure your users enter the required information, and will also show how to validate the database for duplicate username and email address entries using another built-in Dreamweaver tool. Additionally, a membership agreement will be presented that a user has to agree to before proceeding.