The brief

On the CD
Tutorial files:
Build an online survey
using Dreamweaver
Survey.php, register.
php. thankyou.php,
loginfailed.php & more!

Tutorial objective
Create a simple survey application
using the MX Kollection extensions

Time required
Let's see how the MX Kollection extensions can make PHP
One hour development with Dreamweaver simpler, by creating an online survey
Skill level
DREAMWEAVER COMES BUNDLED with a number of Dreamweaver for the PHP, ASP VB and ColdFusion Server
01 Create a database 02 The users table 03 The surveys table
Our questions and the responses made by the users need We are going to ask users to log in to complete the This table needs to hold the basic information about
to be stored in a MySQL database. Launch the MySQL survey, so we need to store the data for the users in a table. the surveys: a Primary Key (named surveyed), which we
commandline and log into your database server. Type: This table should contain the fields userID (which is the will use to link the surveys and the questions, the name
CREATE DATABASE dbSurveys; USE dbSurveyts; to create a primary key), username, userEmail and userPassword to of the survey and some introductory text to display,
database and switch to it. store the basic user details. explaining to the user what the survey is all about.

04 The questions 05 The answers 06 Add a survey

The next table needs to hold all of the questions. There Finally, we create a table to store the answers that people We need some surveys to work with, so insert into
might be many surveys of questions here and we know type in. This table stores the userID (so we know who tblSurveys a survey, then enter three or four questions
which questions belong to which survey because the answered the question) the questionID (so we know using that surveyID into tblQuestions. The complete SQL
surveyID field of the relevant survey is inserted. The fields which question they were answering) and the text that script that I have used is available on your cover CD,
for this table are questionID, surveyID, and questionText. they entered into the form. complete with question data.
10 Connect to the database 11 Registering users 12 Define the database settings
Before you can work with your database Dreamweaver Create a new PHP page and save it as register.php. In the Databases tab, select your database connection
needs to create a connection to it. In the Databases Panel Open the Server Behaviors Panel and select MX ‘conn’ then choose the table tblUsers that contains your
click the + and select MySQL Connection. Complete your Kollection>User Login>User Registration Wizard. In the user information. The Primary Key is userID then set the
database connection information, click Test to check that Wizard that opens click Change Login Settings. In the user name to be userEmail, and password userPassword.
the connections works, then click OK. dialog that opens, the tab Options can be left as default. Click the tab Session - this can be left as default.

13 Mind your levels 14 Configure the form fields 15 Validation rules

We don’t have any user levels set up, but here you'll see the Close the Change Login Settings dialog and click Next. The next step of the wizard allows you to set the form
default settings for redirect pages after the user has You can now define the fields that display on the validation rules. We want to ensure that users complete
attempted to log in. The login page will be index.php. After registration form. Label is what will display on the page all fields of the registration form so select each field and
a successful login the user will go to home.php, and a next to the form field, so edit these to look nicer than the check the ‘required’ checkbox. For the email address you
failed login will send them to loginfailed.php. default that the wizard has created for you. can specify that it is in the correct format.
Technique
Edit the
default CSS
The user registration and login wizards
insert forms on your pages, but you
can edit these to suit your site’s design

19 The page home.php 20 Restricting access

Create and save a new page as home.php. This will be Select to restrict access based on username and
the page the user goes to after logging in. We need password then save the page. If you now open your
to only allow logged-in users to this page, so in the browser and go to the page register.php through your
Server Behaviors Panel select MX Kollection>User server, create an account and log in, you should be taken
Login>Restrict Access to Page. to the page home.php.
1: Editable elements
Select the element in Design View and then
look at the style drop-down in the Inspector.
The name of the CSS applied to this element
will be displayed there so that you can find
it in the CSS files attached by the Extension.

21 Listing the surveys 22 Display the survey list

Create a Recordset on the home.php page via Bindings To create a list of surveys on home.php, drag the 2: Locate the CSS
Panel>Create Recordset. Name this 'rsSurveys' and select surveyName field from the Bindings Panel to the
document. Make this text into an unordered list item. To Open the CSS Panel. A number of
everything from tblSurveys. Click OK to create the stylesheets have been added. If you click
Recordset. It should appear in the Bindings Panel ready to display all of the surveys select Repeat Region from the Current at the top it will show you the CSS
use to display the surveys on home.php. list in Server Behaviors and set it to show all records. for the selected element in Design View,
saving you from trawling CSS to find it.

3: Edit the CSS

You can then edit the CSS in the bottom
In detail
Creating your database in MySQL
How to create the tables that are required for the
project in MySQL by using the MySQL commandline
TO CREATE THE tables for the tutorial using
the MySQL commandline you first need
to create the database and switch to it as
explained in the steps:
CREATE DATABASE dbSurveys;
USE dbSurveys;
You then create the relevant tables by entering SQL
25 Display survey information
statements. The user table is created with this SQL: At the top of survey.php, drag the surveyName and
CREATE TABLE tblUsers ( surveyIntro fields from rsSurveys onto the page. Then
userID INT NOT NULL AUTO_INCREMENT PRIMARY KEY, insert a form into the page. Insert an ordered list and
drag onto the list item the questionText field from
userName VARCHAR(100), rsQuestions. After doing this insert a textarea form field.
userEmail VARCHAR(255),
userPassword VARCHAR(50));
We then need the table that contains the survey details: To create a new table you need to use a CREATE SQL statement and
CREATE TABLE tblSurveys ( specify each field and its datatype
surveyID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
surveyName VARCHAR(255),
surveyIntro TEXT);
The questions table links to the surveys using surveyID:
CREATE TABLE tblQuestions (
questionID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
surveyID INT,
questionText TEXT);
Finally, we need the table in which we store the
answers users input - tblAnswers. This needs to contain the
userID of the person answering, the questioned of the
question they are answering and then the text that they
have input as the answer to the question.
CREATE TABLE tblAnswers (
26 Display all questions
You can also enter data directly into the tables that you have created by Select the textarea and in the Inspector give it a name of
answerID INT NOT NULL AUTO_INCREMENT PRIMARY KEY, using an INSERT SQL statement 'question' then add this after the text ‘question’:
userID INT,
questionID INT, questionAnswer TEXT); <?php echo $row_rsQuestions[‘questionID’]; ?>
Select the entire list item and apply a repeat region
which selects all records from rsQuestions, and save.
Error message
■ The code inserted includes error
messages that display if the user
does not complete the form

Server selection
■ With MX Kollection the Server
Behaviors are available from the
Server Behaviors Panel

Wizard registration
■ The registration form was inserted
by the MX Kollection Wizard, which
adds HTML and server-side code

Filing system
■ MX Kollection inserts a large
number of files into your site files
that must be uploaded
If you're having problems with Dreamweaver, don’t despair. Steve Jenkins is
here to resolve your design and development dilemmas
Quick linking an option it will take you straight to the
Q Instead of adding a host of links to a
page I want to use a drop-down menu to
HTML page or web address inserted into
Value. To format the text you will need to
accommodate the links and save space. I attach a stylesheet to the page and then
also want the text that appears in the drop- select a style from Class. Alternatively, you
down list to be the same style as the rest can create a single style just for the menu.
of the page. How do I get the form list to Select the menu, go to CSS Styles in the
redirect to a chosen page or website? CSS panel and click New CSS Rule. Set
Selector Type to Class, add a name and
When using a form list you will need to add Define in: This document only and press

A some code for the menu to jump to an

address stated in the Value column. There is an
OK. Select the Font, Size, Style, etc, then
press Apply and OK to format the text.
alternative, and one that works just as well and
is easier to initiate. Calling code
Q
Giving your styles an obvious name, rather than Dreamweaver's
Instead of choosing List/Menu from When creating basic HTML pages in default, will help you stay organised when working with a website
the Form menu, carry on down and select Dreamweaver I still style my text the old-
Jump Menu. To add list items, type the text fashioned way: I select the text and then and add the New name. To rename all the
in the Text box and add the web address format it via the Properties window. I notice style tags simply select the appropriate
or page location in 'When selected, go that this creates a whole host of styles in the tag from the Rename style: list and enter
to URL:'. If adding HTML pages on the Style list, all with the name style followed by the name. Once you have renamed all the
local machine, use the Browse button to a number. I would like to give the styles a styles it would be a good idea to create
locate them. To add further items simply more appropriate name, so is there an easy a stylesheet. This will save you time and
click Add Item (+) and enter details. When way to do that? hassle in the future and give your pages
consistency. To create a stylesheet, first go
to the Code view of the page and head
To add dynamic elements to a page you first to the top of the page. Here you will see
need to create a site definition all the styles related to the page. Copy
everything between the <style> tags,
you have finished adding items, name Renaming the Dreamweaver created create a new Basic page using the CSS
the menu and press OK. When you press
OK, Dreamweaver will insert the list with
the necessary code into the page. Now
A styles is a reasonably painless affair. Open
the HTML page you want to style and
select the style you want to rename. Open
Category and paste in the code (delete
any unwanted styles). Now save the page
and give the CSS file an appropriate name.
when you preview the page and select the Style list again and select Rename To put the CSS into action go to the HTML
Expert advice page you want to style and select Attach
Style Sheet from CSS Styles in the CSS
panel. Browse to the location of the file
■ Instant JavaScript and add to the page. The Style list in the
JavaScript is ideal for adding interactive Properties window will now bear all the
elements. However, hand-coding can be time- styles you need.
consuming, and even more difficult if you are
unfamiliar with the language. Dreamweaver Dream layout
offers a little help in the shape of the Snippets
window. Go to Window>Snippets. This will
Q I use Dreamweaver, and rarely use anything but
the Design View. The thing is, I do
display a list of folders including JavaScript, not particularly like the setup of the work area
so click ‘+’ to see the categories on offer. as I do not have enough space to see what I am
It’s easy to manipulate your working area so that you can see what
Open a folder to reveal the available snippets designing. Can I customise the workspace to you’re designing; just head to the Workspace Layout option
of JavaScript. Select a snippet and the code suit my needs?
appears in the window. To add the code to a Layout, which offers three options: Coder,
page, go to Code View, place the cursor in the The workspace in Dreamweaver has a Designer and Dual Screen. Coder places
appropriate position and press Insert.
A number of viewing options. Design View
is the most popular, but it can become
the panels to the left of the screen;
Designer has the panels on the right and
overcrowded, leading to confusion. Before the Properties window open; Dual Screen
you think of rearranging your workspace has the workspace at 100% with a number
try the Zoom option, which resides in the of floating windows. This is the ideal
bottom right corner. The Fit All and Fit option - you can choose which windows
Width commands are especially useful to close and then head back to Workspace
as they can give you an instant view of Layout>Save Current and give the
the whole page you are working on. To workspace a name. This will then appear
actually move the components of the in the Workspace Layout menu. To remove
workspace involves a trip to the Window a layout from the menu select Manage,
menu. Here you will find Workspace select the layout and click Remove. ■

Technique: Get connected to MySQL

I have been using Dreamweaver to create sites ever since I delved into To add dynamic elements to a page you first need to create a site

Q the world of web design. However, I have only ever used the program to definition using the PHPMySQL server technology. This will also
create and design static sites, and now I’d like to start adding dynamic
elements. I know a database is needed, so I contacted my web hosting
company who told me how to set up a database with my account which
A include your FTP details so you can preview the updates you make
uses MySQL and PHP. How do I add the information to a page? to the page. Then you will have to create a new page using the PHP
extension and set the connection to your database server.