WEB 115

Dreamweaver CMS

Tutorial

Dreamweaver CMS
Objective
By the end of this project, students will understand:
1. How to use Dreamweaver to write a simple Content Management System
2. Understand the CRUD work flow for a CMS
With the advent of server-side scripting languages and database, websites are now dynamic applications
rather than static pages. We can use Dreamweaver to connect to a database and create a site that responds
to the users input.

Definitions
CMS: (Content Management System) A website application that stores its webpages in a database and
responds to user requests.
CRUD: Create, Read, Update, Delete. In a CMS, these are the pages you should create for every table.
Dynamic: Pages that user PHP to respond to user input.
Recordset: Information pulled from a database using and SQL SELECT statement and stored in an array in
PHP.
Server Behavior: Dreamweavers name for its pre-built PHP functions

Concepts
Content Management Systems
CMSs are widely replacing static HTML pages, especially for larger sites. In a CMS all the information that
goes on the site is stored in a database. This includes the HTML content of each page as well as all the users
and their login information. One of the great things about this is that we can use an HTML form and some
PHP to update and add to the database. So instead of making a new .html file every time you need to add to
the site, you just fill out a form.
This can make a website much easier for a client to maintain. Instead of the web designer adding pages at
every request, the owners of the site can log in and make whatever adjustments they like. Adding this kind
of functionality is painstaking and much more involved than simply adding static HTML page.

Recordset
Whenever you need to display information from a database on a page, you need to ask the database for that
information. Dreamweaver has a server behavior called Insert Recordset that builds the appropriate SQL
SELECT statement for you. This behavior then holds the data and allows you to place it on the page where
you want.
Working SELECT statements can return 3 possibilities:
1. Nothing: the statement searched for information but found nothing in the database that matched.
Dreamweaver has a server behavior called Show Region If Recordset Is Empty. This is a simple
If/Then statement that will display an area if this condition is met.
2. 1 Row: usually this will be when you search by a primary key and you get a single record back. This
record may include many fields, but only one row from the database.
1of47

WEB 115

Dreamweaver CMS

Tutorial

3. Multiple Rows. If the database finds many different rows of information (List all the users, list all
pages with a keyword), then youll need to use the Repeat Region server behavior. This will
display the information on the page in the first returned row, and then loop through the remaining
rows
Dreamweaver has a server behavior called Show Region If Recordset is Not Empty that can be used if the
recordset returns anything, either 1 or multiple rows.

CRUD
Create, Read, Update and Delete. These are not only
the 4 things that a database can do, they are the four
commands that you need to let your users perform.
For example, if you have a table for blog entries, the
CMS must have a page that allows the user to read
what they wrote. Users should also be able to edit and
delete existing articles. Usually this will be a page that
lists all the titles and two links for each; edit and delete
which are both separate pages that have those
functions. Another form is necessary to add new blogs
to the page. Usually the flow will look like this:
Read: This page will list all the articles the user has
created. This requires an SQL SELECT statement that
selects multiple items from the database. Then a loop
prints out each record.
Create or Add: Clicking the Add New Article button will
link to a page that only inserts the form data to the
database. There is no reason to add any kind of SELECT
statement to an add page.
Edit: In order to edit a recordset, the edit page must
receive the primary key of the item to be edited
through either the $_POST or $_GET. In most cases it
will be $_GET. The edit page then uses a SELECT
statement to fill in the form information. Remember that an SQL UPDATE statement will put a blank into a
field if nothing is submitted. This means that the edit form must come filled out with all the users previous
information.
Delete: Because of the way that Dreamweaver writes the Delete Record function, it will happen as soon as
the page is loaded and the user will immediately be sent back to the Read page. So instead, the first Delete
page will ask the user if they are sure. If they click Delete then they will go to the Delete Processor page and
then back to the Read Page. If they click Cancel, they will go back to the Read page without running the
Delete Processor.

Security
Obviously, you dont want anyone to be able to edit information on your site. You need to have a login
system that will keep track of what your users do. Logins are usually implemented by asking for a
username/password combination. If that combination is found, then the user is logged in. What actually
happens is the server creates a session variable that holds the users username. Since that session can only
come from a successful login, all the backend pages which require the user be logged in, can simply check to
see if the session exists. If it does, then nothing happens. If the session does not exist, the page can run a
redirect command and send the user to the login page.
2of47

WEB 115

Dreamweaver CMS

Tutorial

Tutorials
Tutorial 1 Create Your Database: We will create a simple database that holds two tables, one for
storing our web pages and one for storing our users.
1. Go to http://localhost/phpmyadmin.
2. Under Create New Database type CMS_XYZ where XYZ are your initials. This will keep your database
unique from other databases that may be uploaded to the same database server. Click Create.

3. The first table well create will hold our webpages. Create a new table called articles with 6 fields. Click
Go.

4. Here are the fields and their settings:

Field

Type

Lengt
h
4
250
40
140

Index

A.I.

articles_key
INT
PRIMARY
Check
articles_title
VARCHAR
articles_author
VARCHAR
articles_keywords
VARCHAR
articles_content
TEXT
articles_datecreate
TIMESTAM
d
P
5. Here is a screenshot of the fields filled out. When you are finished Click Save (clicking Go will simply add
another blank field).

3of47

WEB 115

Dreamweaver CMS

Tutorial

6. Click on the CMS_XYZ link in the left column. Create a new table with a name of users and 6 fields. Click
Go.

7. The settings for the users fields are:

Field
user_username

Type
VARCHAR

Lengt
h
40

Index

A.I.

PRIMAR
Y

user_password
VARCHAR
20
user_firstname
VARCHAR
20
user_lastname
VARCHAR
20
user_email
VARCHAR
60
user_information
TEXT
8. When you have input all of the field information, click Save.
9. Now that we have the tables and fields set up, we need to put some information in them. Click on the
users table link in the left column. Then click the Insert tab across the top. This page will let us add two
records at once so well add two users to our database, one will be your login and the other will be a
guest.

4of47

WEB 115

Dreamweaver CMS

Tutorial

10.

Feel free to use your own credentials instead of jsmith. The information you need to add for the
users:
User_
User_
User_
User_
User_
User_
username
password
firstname
lastname
email
information
Jsmith
12345
John
Smith
jsmith@website.com
Hello world
Guest
12345
Guest
Guest
guest@website.com
Guest
11.
Click Go when you are finished entering in the data.
12.
Now well add some articles. Go to the articles table and click the Insert tab. The contents of the
articles dont matter as well be adding and deleing them later.
13.
Our database needs at least 10 articles. Find a news website and just copy some articles. Do not
add anything to the articles_key field; the database will automatically add a new number for each item.
You will also leave the articles_datecreated alone; again the database will add the correct date and time
each record is added.

14.
15.

Click Go after adding each article.

Now that the database is built and stores some test information, we need to tell Dreamweaver to
connect to the database. In your CMS site in Dreamweaver, open index.php. Open the Database panel.
Click the + button, then MySQL Connection.

5of47

WEB 115

Dreamweaver CMS

Tutorial

16.

In the MySQL Connection window, youll need to provide several pieces of information. First you
must give the connection a name. This is simple a variable name for the connection object. Typically,
this is given a prefix of conn_ so we know its a database connection object. When using XAMPP, the
default MySQL Sever is localhost, the username is root and there is no password.

17.

TROUBLESHOOTING: If you receive an error like this one, then you have entered in incorrect
information. You may not have the MySQL server spelled correctly, you may have the username or
password spelled incorrectly, or you may not have the database and Apache running. Double check all
of these and use the Test button to make sure they are correct.

18.

Click Select. If the previous information was correct, you can now see a list of the databases in
MySQL. We need to select the database we just created. If you Click CMS_XYZ and click OK to close the
Select Database dialogue window. Then click OK to close the MySQL Connection Window.

6of47

WEB 115

Dreamweaver CMS

19.

Tutorial

Your Database Panel should have an entry called conn_CMS. If you click the + beside it, you will
see three sub options; Stored procedures, Tables and Views. If you open Tables, youll see articles and
users which are the two tables we created. If you open either of those you will see the fields that make
up each table.

7of47

WEB 115

Dreamweaver CMS

Tutorial

20.

Click the refresh button in the Files Panel. You should now see a new folder called Connections.
Inside is a file called conn_CMS.php. This file stores all the necessary database connection information.
All pages that interact with the database will include this file.
21.
NOTE: you only need to connect to the database once when creating a site. Now that the
connection information is stored in the conn_CMS.php file, it will always be a part of your site.
22.
Before you go much further you may want to update the Home link in the template. Right now it
points to index.html and well be using index.php.

Tutorial 2 Backing Up: Now that the site is setup, well back up everything.
1. First, well backup the database. Since well be making changes to the database later, well implement a
versioning number system. Well save this version of the database as 1.0. Go to
http://localhost/phpmyadmin and click on the Export tab (this should be done from the PHPMyAdmin
homepage and not while you are clicked inside your CMS database).
2. On the Export page, select your database under Export.

8of47

WEB 115

Dreamweaver CMS

Tutorial

3. Scroll down to the section marked Save As File and make sure this checkbox is checked. Change the File
Name Template to CMS1.0. Click Go.

4. You will be prompted to save a file called CMS1.0.sql, Save this file to your _work folder.
5. Next well backup the site in Dreamweaver. Go to Site>Manage Sites. Click on CMS and click Export.

6. Save CMS.ste in your site folder. Click Save, then Done.

9of47

WEB 115

Dreamweaver CMS

Tutorial

7. As an additional backup, you may want to make a .zip file of the entire site at this point. This is a good
start for any PHP site you may make in the future.

Tutorial 3 Adding a Master List of articles: The first dynamic part of our site will be a homepage
that lists the 5 latest article headlines, each of which links to a page that displays the full article.
1. Whenever you need to display information on a page that is stored in your database, you must create a
recordset. A recordset is an SQL SELECT statement that pulls some information from the database. Open
index.php and in the Bindings panel, click +, then Recordset (Query). So you know, this takes you to the
same dialogue box as opening the Server Behaviors panel, clicking +, then Recordset.

2. The Recordset Dialogue window will help you build your SQL statement without having to know SQL.
The window will be filled with default information. Well change most of it.

10of47

WEB 115

Dreamweaver CMS

Tutorial

3. Change the Name: to rsArticles. Leave the Connection: and Table: alone. Under Columns: click the
Selected: Option. Hold down the CTRL button to select multiple entries under the Columns: menu area.
Select articles_key and articles_title. We do not need to change Filter (we want to get ALL the articles in
the database). Change Sort: from None, to articles_datecreated and Descending. This will make it so
that the most recently added articles will be at the top of the recordset.

4. When your Recordset window looks like this, click Test. You should get a window like this. Click OK.

11of47

WEB 115

Dreamweaver CMS

Tutorial

5. Click OK to close and save the Recordset window. In the Bindings Panel, you should see an entry called
rsArticles. Click on the + sign to expand it. Youll see articles_key and articles_title listed.

6. Back in the design view of your index.php page, Add the word Welcome and make it an H1. Hit return
12of47

WEB 115

Dreamweaver CMS

Tutorial

a few times so you have some space under it. Click and drag articles_title from the Bindings panel to a
space under Welcome.

7. Save and preview your page (F12). Youll see that the newest entry in the database shows up on the
page. This should be the last item that you inserted using PHPMyAdmin.

8. How do we show all the articles in the recordset? We add a Repeating Region. Go back to Dreamweaver
and click on {rsArticles.articles_title}. Make sure that you have selected the <p> tag the surrounds this
dynamic text.

9. Open the Server Behaviors panel. Click + and then Repeat Region.

10.

In the Repeat Region dialogue window, change 10 to 5. This will show only 5 records at a time.
Click OK.

13of47

WEB 115

Dreamweaver CMS

Tutorial

11.

You should see a small box is now surrounding {rsArticles.articles_title}. Save and preview the
page. Youll see the latest 5 entries are now displayed.

12.

Next, well add a Recordset navigation so that we can see the next 5 articles. Click in a line after
the Repeat region. Open the Insert Panel and change the view to Data. Click the down arrow beside
Recordset Paging and choose Recordset Navigation Bar.

13.

In the Recordset Navigation Bar dialogue window, make sure the Recordset: is set to rsArticle (it
should be the only option) and Display Using: is set to Images. Click OK.

14of47

WEB 115

Dreamweaver CMS

Tutorial

14.

This navigation bar allows the user to jump through the recordset 5 items at a time (because thats
how many we set to display). Save and preview the page and try clicking on the new arrow links.

15.

If you come back to Dreamweaver and hit the refresh button the in the Files Panel, youll see that
four new images have been added to your site. Select these images and move them to the /images
folder where they belong. Click Update when prompted.

16.

There is one more improvement we can add. A Recordset Navigation Status will display which
numbers of articles youre looking at and the total number of articles. First, we need a cell to put them
in. CTRL+Click on the single left arrow cell.
15of47

WEB 115

17.

Dreamweaver CMS

Tutorial

Click the Split button and split it into 2 columns.

18.

Since the table is so small, click ALT+F6 to view Expanded Tables Mode. You should remember that
this viewing mode artificially expands your tables so that they are easier to manipulate. Your design will
return to normal when you hit ALT-F6 again.
19.
Click inside the newly created cell. In the Insert Panel, click the down arrow beside Display Record
Count and select Recordset Navigation Status.

20.

In the Recordset Navigation Status dialogue window, make sure Recordset: is set to rsArticles (it
should be the only option) and click OK.
16of47

WEB 115

Dreamweaver CMS

Tutorial

21.

Save and preview your work. To make the Recordset Navigation Status look a little better, you can
delete the word Records

Tutorial 4 Adding the Detail Page : On most webpages that display lists of articles like this, you
can click on a title and go to another page that displays the entire article. We will turn the titles into links
that go to a display page. These links will send the primary key (articles_key) to the display page. The display
page will then be able to use the id to grab the correct article from the database.
1. First create a new page from the Template. Click File>New. Select Page from Template, CMS and
Template. Click Create.

2. Save this page as article.php.

17of47

WEB 115

Dreamweaver CMS

Tutorial

3. Click back into index.php. Select {rsArticles.articles_title} and click the Browse for File button in the
Properties Panel.

4. In the Select File dialogue, click ONCE on article.php to select it. Then click the Parameters button.

18of47

WEB 115

Dreamweaver CMS

Tutorial

5. In the Parameters dialogue window, click in the area just under Name. Type id.

6. Click in the area under Value and click the Dynamic Data Button.

19of47

WEB 115

Dreamweaver CMS

Tutorial

7. This allows you to choose a Binding as the value. In the Dynamic Data window, click on articles_key.

8. Click OK to close the Dynamic Data window. Notice that some PHP code has been added to the Value in
the Parameters window. Click OK to close the Parameters window. Click OK to close the Select File
window.

9. Save index.php and test out this functionality. As you rollover each link, look at the address in the status
bar. You should see, at the end of the URL, ?id= and a different number for each link.

10.

Now we can add a recordset to article.php that will capture the value of the id and use that
number to find the article its supposed to display. Open article.php and add a new Recordset: Bindings
Panel > + > Recordset (Query).
11.
In the Recordset dialogue window, set the Name: to rsArticle. Make sure the Connection: is
conn_CMS, Table: is articles, and Columns: is All. Under Filter: Set it to articles_key = URL Parameter id.
The last option will be articles_key by default. Erase it and type id in its place. Since we are searching
for an item by its primary key, we should only find one item from the articles table. This means we dont
have to worry about Sort: because you cant sort a single item. Click OK.

20of47

WEB 115

Dreamweaver CMS

Tutorial

12.

In the Bindings Panel, click the + beside rsArticle and youll see each item from the database. Drag
each item onto the page and add some formatting. Drag articles_title to the page and make it an H1.
Click the cursor to the right of {rsArticle.articles_title} and press Shift+Enter to put in a single line break.
Type by, a space and drag articles_author from the Bindings panel. Click to the right of
{rsArticle.articles_author} and type a space, by and another space. This time insert
articles_datecreated. Lastly, hit Shift+Enter a few times after {rsArticle.articles_datecreated} and drop in
articles_content. When you are finished it should look like this:

13.

Switch to Code View. Scroll to lines 56 and 57. Erase the word Site from the <title> tags. Drag
articles_title from the Bindings panel and drop it where the word Site was. Drag articles_keywords to
the value of content in the tag <meta name="Keywords" content="">:

21of47

WEB 115

Dreamweaver CMS

Tutorial

14.

Save the page but do not preview it. This page will not display anything at all if you preview it
directly. Remember the recordset is looking for id= in the URL. The only links that will give this page ids
is index.php. To properly view this page, you have to preview index.php first, then click on a link. Go
back to index.php and try all the article links.

Tutorial 5 Login and Logout: Logins are accomplished by checking a username and password against
the database. If they match, then we create a Session variable that tells all subsequent pages that the user is
logged in. If there is not a match, we send them back to the login page to try again.
1. Create a new page (File>New>Page From Template) and save it as login.php.
2. In the Design View of login.php, add the word Login as an H1 and change the page title to Login.
3. For a login to work, well have to add a standard login form that asks for a username and password.
Unfortunately there is no wizard for doing this in Dreamweaver; it must be done manually. In the Insert
Panel, switch to the Forms view. Add a form, two text fields and a button. When prompted, set the id of
the first text field to username and the label to Username. For the second text field set its id to
password and its label to Password. The password text field should be changed to a password field:

4. When you are finished, the form should look like this:

5. Before we add the login behavior, we need to create a page to go to if the login is successful. Create a
new page from the template and save it as My_Home.php. My is a common prefix for login-protected
pages.
6. Adding the login functionality is quite simple. First, make sure login.php is saved. In login.php, in the
Server Behaviors Panel, click + > User Authentication > Log In User.

22of47

WEB 115

Dreamweaver CMS

Tutorial

7. In the Log In User dialogue window, the first three fields should be the same as below:
Get Input From Form: form1 (if you change the id of your form, this will be different)
Username: username (this is the id of the username text field)
Password: password (this is the id of the password text field)

23of47

WEB 115

Dreamweaver CMS

Tutorial

The rest of the settings will be similar to previous server behaviors:

Validate Using Connection: conn_CMS (this is the only option)
Table: users (change this from articles)
Username Column: users_username (this should automatically populate)
Password Column: users_password (this should automatically populate)
If Login Succeeds, Go To: click the Browse button and select My_Home.php.
If Login Fails, Go To: click the Browse button and select login.php (this is a courtesy to the user so they
can try again).
Restrict Access Based On: should be set to Username and Password. Click OK.
8. Save and preview this page. Test it out with an incorrect username and password. Clicking login should
simply take you right back to login.php. Then try it with the correct login from the users table. This time
it should take you to My_Home.php.
9. My_Home.php is not protected. The point of adding a login to a website is to allow only logged in users
access to certain pages. Open My_Home.php and in the Server Behaviors panel click + > User
Authentication > Restrict Access to Page.
10.
In the Restrict Access dialogue window, set Restrict Based On: to Username and Password.
(Access levels will be covered in a later tutorial). Click Browse and set If Access Denied, Go To: to
login.php. Click OK.

24of47

WEB 115

Dreamweaver CMS

Tutorial

11.

To test this behavior, close your web browser to clear out your login session. Preview
My_Home.php directly. Because you are not logged in, you should be immediately taken to login.php
instead of seeing the page. Test out the login functionality once again to make sure My_Home.php is
letting you in once logged in.
12.
MY_Home.php is going to serve as the hub for all the commands that users are allowed to
perform. First add the word Welcome as an H1. Well dynamically add the users full name in a later
step. Under that, add Edit Profile, Logout and Add Article followed by a horizontal rule
(Insert>HTML>Horzontal Rule). Save the page.

13.

Create logout.php from a blank PHP file (Not a blank page from the template). The logout is a
processor page that simply destroys the login session as soon as its loaded, and then send the user on
to another page. To add the logout functionality to this page, open the Server Behaviors panel, click + >
User Authentication > Logout User.
14.
In the Lot Out User dialogue window, change the Lot Out When: to Page Loads. This means all
you have to do is visit login.php to be logged out. This also means we dont need to add the complicated
server behavior to all the restricted page; we just need a simple link to this page to log out users. When
our users logout, we should send them back to the home page. Click Browse and select index.php. Click
OK.

25of47

WEB 115

Dreamweaver CMS

Tutorial

15.

To test this out, preview login.php. Login with the correct credentials and click the Logout link.
Then manually type the address for My_Home.php. Since you are logged out, it should kick you back to
login.php.
16.
Lastly well make My_Home.php a little friendlier. Well dynamically print out the users full name
after Welcome. To do this well first need to grab the users first and last name from the database.
Create a new recordset from the Bindings Panel by clicking + > Recordset(Query). Name the recordset
rsUser. Change the Table: to users. Under Columns click Selected and click user_firstname, then
CTRL+Click on users_lastname to select both.

17.

Filter: for this is a bit tricky and requires knowing how Dreamweaver saves your login. When you
logged in, Dreamweaver wrote some PHP code that creates a Session variable that stores the username
you logged in with. Each page with the Restrict Access behavior looks for that Session variable and lets
you view the page if it finds it, or redirects you to the login if it cant find it. The name of the Session
variable is always MM_Username. So this page should be able to grab the username from the Session
variable and go to the database and find the corresponding users information. Under Filter, set
users_username = Session Variable. In the last field you will have to manually type in MM_Username.
Be aware that the capitalization is very important; mm_username WILL NOT WORK. Click OK.
18.
In the Binidings panel, you can drag users_firstname and users_lastname to the position just after
the word Welcome. Make sure you have a space between the two dynamic words so the names dont
run together.
26of47

WEB 115

Dreamweaver CMS

Tutorial

19.

Save the page and preview it. You may need to log in again, but when you get to My_Home.php,
you should see the first and last names from the database.

Tutorial 6 User Registration and Editing a Profile: explanation

1. Create a new page (File>New>Page From Template) and save it as register.php.
2. Open login.php and add a link from here to register.php.

3. Open register.php. Add the word Register as the title and as an H1.
4. Well use the Record Insertion Form Wizard to create a form that the user can fill out to register. In
register.php In the Insert Panel, switch to the Data View. Scroll down to Insert Record: Record Insertion
Form. Click the down arrow to get two new options. Select Record Insertion Form Wizard. This will build
the form and create the necessary PHP and SQL to insert the users information into the database. The
Insert Record option requires that you already have the form built.

27of47

WEB 115

Dreamweaver CMS

Tutorial

5. In the Record Insertion Form dialogue window, change the Table to users. Click the Browse button and
set After Inserting, Go To; to login.php.
Under Form Fields click on users_information and click the minus (-) button to remove it. Since the users
are just creating their profiles, we dont need to collect their information just yet. Lastly, click on
users_password in the Form Fields: area and change its Display As: to Password Field. Click OK.

28of47

WEB 115

Dreamweaver CMS

Tutorial

6. In Design View of register.php, youll see that to the left of each form element, the name of the
database column has been added as text. This could be a security problem since this could give users a
view into your database, and its not very useful to anyone filling out the form. Edit the text so its
friendlier. Change the button from Insert Record to Register User.

7. Save and test out the page. If you test this enough times youll run into a problem. If you input the same
username twice for two separate registrations, you will see this SQL error:

This means that the user guest is already in the database. Since users_username is the primary key for
the users table, the database wont let you have duplicates. Dreamweaver has a solution for this. In
register.php open the Server Behaviors panel and click + > User Authentication > Check New User Name.
8. In the Check New User Name dialogue window, Username Field: should be set to users_username.
Under If Already Exists, Go To: click Browse and select register.php. Click OK.

29of47

WEB 115

Dreamweaver CMS

Tutorial

9. Test out the registration now, but try to register a user thats already in the database. Now you should
be taken back to the Registration to try again.
The unfortunate part about this sequence is that the registration form is wiped clean if the user
tries a duplicate registration. However, when you are taken back to register.php, look at the URL. Youll
see that a variable has been tacked on. It should say ?requsername= and then the username the user
tried to type in. We can use this to help the user a little bit. In register.php, open the Bindings panel.
Click + > URL Variable. In the URL Variable dialogue window in the Name: field type requsername. Clik
OK.

10.

11.

We can add the URL variable as the default value to the username field by dragging requsername
from the Binidings and dropping it on top of the username field.

Alternatively, you can click on the username field in the form, and click the Bind To Dynamic Source
Button in the Properites panel and select requsername from the Dynamic Data window.

12.

Now if you try to register with a duplicate username, youll be taken back to register, but at least
youll see the username you previously entered. It would be much nicer if you could display a message.
Add this if/then statement to the line just have the <h1> in your code for register.php:
<?php if (isset($_GET[requsername]))
{echo <div class=\error\>That username already exists</div>;}?>
30of47

WEB 115

Dreamweaver CMS

Tutorial

13.
14.

This will output a div with a class of error. Feel free to create a .error class using CSS.
Next we need to create a page that allows the user to edit their profile. Create a new page
(File>New>Page From Template) and save it as My_ProfileEdit.php. Put Edit Profile as the H1 and the
title. Since this is a page you must be logged in to see, add the Restrict Access behavior as in step 14 in
Tutorial 5.
15.
Create the link from My_Home to My_ProfileEdit.php:

16.

In My_ProfileEdit.php, well use the Record Update Form Wizard to create the edit form for the
user in much the same way we did for the registration page. The only difference is that to do an edit,
PHP first needs to have a record to edit. Anytime you want to edit you must create a recordset that gets
one item from the datebase. Well find the currently logged in user by their session variable, just like we
did on My_Home.php. In fact, we can cheat: go to My_Home.php, and in the Bindings panel, right click
on rsUser and click Copy.

17.

Go to My_ProfileEdit.php and in the whitespace of the Bindings panel, right-click and select Paste.

18.

This recordset only selects the first and last names based on the session, but we actually need to
collect everything. Double click on rsUsers in My_ProfileEdit.php. Rename the recordset rsEditUser and
select All under Columns:.

31of47

WEB 115

Dreamweaver CMS

Tutorial

19.

When you click OK, Dreamweaver will warn you that it will use Find and Replace to change the
name of the recordset in the code. Click OK.

20.

In the Find and Replace window, everything should already be set up for you. Click Replace All.

21.

Now we can add the Record Update Form Wizard. In the Insert panel, switch to Data view, and
32of47

WEB 115

Dreamweaver CMS

Tutorial

click the down arrow next to Update Record: Record Update Form Wizard and choose the option for
Record Update Form Wizard.

22.

The Record Update Form dialogue window is similar to the Record Insertion Form except you have
areas to tell the wizard what table to update and what information should be in the fields when the
page loads. In the top half, change the Table To Update: to users. Set After Updateing, Go To: to
My_Home.php. In the lower half of the screen in the Form Fields: area, click users_username and click
the minus (-) button. We do not want users to change their username. Click on user_information and
change its Display As: to Text area. Click OK.

23.

In the form, click on the password field and change its type from Single Line to Password in the
Properties Panel.

33of47

WEB 115

Dreamweaver CMS

Tutorial

24.

As with the registration page, you should clean up the names to the left of each form element.
Update the Button to say Save Profile instead of Update Record.

25.

Save the page and try it out. You should be able to change the password, names and email of the
user as well as add information in the text area.

Tutorial 7 My_Home.php and CRUD: The users can register and manage their own profile. Now
well create the CRUD for a user to manage their articles.
1. Create a new page (File>New>Page From Template) and save it as My_ArticleAdd.php. Give it a title
and an H1 of Add an Article. Back in My_Home.php, link the word Add New Article to
My_ArticleAdd.php.
2. Before you add the Insert Form, we need to add the Restrict Access behavior. This is the same as all
the other times youve done this. Open the Server Behaviors panel. Click + > User Authentication >
Restrict Access to Page. In the Restrict Access to Page dialogue window set Restrict Base On: to
Username and Password. Under the field for If Access Denied, Go To: Click browse and set it to
login.php. Click OK.
3. Before we add the Insert Record behavior, we will need to have a way of collecting the username of
the current user as the author of the article. We will do this with a hidden field which will collect their
username, print it as the value and submit it to the Insert Record behavior. To do this, we must set up
MM_Username as a Binding:
4. Open the Bindings Panel and Click + > Session Variable.

5. In the Session Variable window, type MM_Username. Again, capitalization is VERY important.

34of47

WEB 115

Dreamweaver CMS

Tutorial

6. In My_ArticleAdd.ph, well add the same Record Insertion Form Wizard that we used to create the
registration form. First, add a couple of extra paragraphs after the title so you have room to put in the
necessary forms. In the Insert Panel, switch to Data view. Find the Insert Record: Record Insertion
Form Wizard button. Click the down arrow beside it and select Record Insertion Form Wizard.

7. In the Record Insertion Form dialogue window, set After Inserting, Go To: to My_Home.php. Delete
articles_key and articles_datecreated from the Form Fields:. Click on articles_author and set its
Display As: to Hidden Field.

8. Click the Dynamic Data button at the end of the Default Value (still with articles_author selected). In
the Dynamic Data window, click the + button next to Session and select MM_Username. Click OK.

35of47

WEB 115

Dreamweaver CMS

Tutorial

9. Before you click OK, make sure you also click on articles_content and set its Display As: to Text area.
Click OK.

10. For a final clean up on this page, change the text in the left column to more friendly names. Rename
the button from Insert Record to Save Article. Save this page and preview it (you will have to be
logged in and click on the Add Article link in My_Home.php.)

11. The other two functions will be to edit or delete existing articles. To do this a user must be able to
select an article first. Well accomplish that by creating a simple list of the titles of the articles and
putting an edit link and a delete link beside each title. Open My_Home.php and add a new recordset
that gets all the articles by the current user.
Name: rsArticles
Connection: conn_CMS
Table: articles
Columns: Selected, articles_key and articles_title
Filter: articles_author = Session Variable MM_Username
Sort: articles_datecreated Descending
36of47

WEB 115

Dreamweaver CMS

Tutorial

Click OK.

12. Under the horizontal rule, add an H3 that says Articles.

13. Under Articles, add a new table that has 1 row, 3 columns, 100% wide with 0 border, 6 cellpadding
and 0 cellspacing. Click OK.

14. In the first cell on the left, insert articles_title from the Bindings Panel. Type the words Edit and Delete
37of47

WEB 115

Dreamweaver CMS

Tutorial

in the other two cells:

15. Well add the repeating region but we have to select the <tr> tag. Click anywhere inside the table and
click <tr> in Tag Selector:

16. To turn this row into a Repeating Region, click the + in the Server Behaviors panel and click Repeat
Region.

17. In the Repeat Region dialogue box, change the Recordset: from rsUsers to rsArticles. Under Show: ,
click on All Records. We could just show the top 10, but when you are performing administrative
tasks you want the users to see as much of the database as possible. We wont be creating a very
large selection of articles, so well just show the admins everything. Click OK.

18. Before we make the Edit and Delete links active, we must create the pages they will link to. Create
two now pages from the Tempate and save them as My_ArticleEdit.php and My_ArticleDelete.php.
Apply the Restrict Access To Page behavior to both pages. Save them.
19. Back in My_Home.php, highlight the word Edit in the Repeating Region of the table and click the
Browse For File button in the Properties Panel.

20. In the Select File dialogue window, click on the file My_ArticleEdit.php.
38of47

WEB 115

Dreamweaver CMS

Tutorial

21. At the bottom of the Select File dialogue window, click the Parameters button.
22. In the Parameters window, under Name: type id. This will be the name of the URL variable created.

23. Click under Value to the right of id. In this area click the Dynamic Data button (the lightning bolt icon).
Make sure you are clicking the rightmost Dynamic Data button and not the left one.

39of47

WEB 115

Dreamweaver CMS

Tutorial

24. In the Dynamic Data window, click the + to open the rsArticles recordset and select articles_key.
Click OK.

25. The Parameters window should look like this:

26. Click OK to close the Parameters window, then OK again to close the Select File window.
27. If you test this page, you should see that it lists all the different articles that are linked to the logged in
user. Rollover each instance of the Edit link and look at the Status bar; notice that each link ends in
?id= and then the corresponding primary key number of the article. That number is how
My_ArticleEdit.php will know which page you want to edit.
40of47

WEB 115

Dreamweaver CMS

Tutorial

28. Repeat this process for the Delete link, instead linking it to My_ArticleDelete.php. (Repeat steps 19
through 27)
29. We should add some headings to My_ArticleEdit.php to make it more friendly. Open that page and
type Edit in the Title area and as an H1 in the top of the Content editable region. We are going to add
a recordset that will help us add the title after both instances:

30. Add a new Recordset from the Server Behaviors panel. The settings are:
Name: rsArticleEdit
Connection: conn_CMS
Table: articles
Columns: All
Filter: articles_key = URL Parameter id
Sort: None.

41of47

WEB 115

Dreamweaver CMS

Tutorial

31. Click OK to save this recordset. Now you can drag articles_title from the Binding panel to the right of
the word Edit:

32. To add this to the <title> tag go to Code view, scroll to line 56 (if it is not there it should be close by).
Drag articles_title from the Bindings directly into your code:

33. Save this page and repeat this process for My_ArticleDelete.php. Instead of the word Edit in the
<title> and <h1> tags, use Delete. When creating the recordset, give it a name of rsArticleDelete.

34. Save the pages and test them out (the edit and delete functions do not yet work.)

Tutorial 8 Editing and Deleting: Well now get the edit and delete pages to work. Remember that
editing and deleting require a recordset filtered by a primary key. This selects the record to be edited or
deleted. We set that up for both of these pages in the last tutorial.
1. Open My_ArticleEdit.php. Click after the <h1> and hit enter to drop down a line. In the Data view of
the Insert panel, click the down arrow to the left of the Update Record: Record Update Form
Wizard and choose Record Update Form Wizard.
42of47

WEB 115

Dreamweaver CMS

Tutorial

2. In the Record Update Form window, leave the first five setting alone. They should be correct by
default. Change:
After Updating, Go To: My_Home.php
Under Form Fields:, select articles_key, articles_datecreated and articles_author and delete them
by clicking the minus (-) button. Lastly, click articles_content in the From Fields: section and change
its Display As: to Text area. Click Ok.

3. Change the labels of the form elements so they are more readable and the value of the button as
well:

43of47

WEB 115

Dreamweaver CMS

Tutorial

4. You may be wondering why we didnt create a hidden field to store the users username. This is

5.
6.

7.
8.

because the username was recorded when the article was created, so it is already a part of the
record. We dont want to change the username and overwriting it would be useless, so we simply
dont do anything to it and it will stay as it was when the record was created.
Save and test the page. Remember if you try to preview this page directly, the edit fields will be
blank. You must click on an edit link from My_Home.php to get the URL parameter id otherwise
the edit page has no idea which record its supposed to edit.
The Delete page will be unlike the Add or Edit pages weve created. The Delete Recordset behavior
will immediately delete the selected recordset as soon as the delete page is loaded and then
redirect the user back to My_Home.php. This could be very bad; if the user didnt mean to click
delete, we should give them a page that asks them if they are sure. We will turn
My_ArticleDelete.php in a page with two forms. One is a cancel form that simply sends the user
back to their homepage. The other form will submit to a processor page that will perform the
delete command.
Create a new blank PHP page and save it as My_ArticleDelete2.php. This page should not be
created from the template. It needs to be just a plain, blank PHP page.
Back in My_ArticleDelete.php, Add two forms and give each one a button. The top button should
say Delete and the bottom button should say cancel. When you are finished it should look like this:

9. Click inside the first form and select form#form1 in the tag selector.

10. Click in the Properties Panel, to the right of the Action: field is a Browse for File button. Click that
and browse for My_ArticleDelete.php.

11. Link the action of the second form back to My_Home.php. This cancel button will simply take the
user back to the admin page and not perform any functions.
12. The Delete button will send the user to My_ArticleDelete2.php but in order for the Delete
Recordset behavior to work, we need to send the primary key of the article. Right now that primary
key is in the URL when you arrive at My_AricleDelete.php, but its not sent to MyArticle2.php. We
will accomplish this by taking the value of the URL variable id and saving it to a hidden form variable
in the Delete form (the first one). The processor page will read the form variable.
13. In the Bindings panel, click + > URL Variable. Type id and click OK.

44of47

WEB 115

Dreamweaver CMS

Tutorial

14. Open the Form view of the Insert Panel and add a Hidden Field to the first form.

15. Click on the hidden form to select it. Change its name from hiddenField to id:

16. Now that the hidden field is there, drag the URL id from the Bindings panel and drop it on top of the
hidden field, represented by the yellow shield. When you do this, the Value: of the hidden field will
become <?php echo $_GET['id']; ?>:

17. Now if you click the Delete button, a form will be sent with whatever number was sent to this page
via the URL variable id=.

18. Open My_ArticleDelete2.php. Add the Restrict Access to Page Server Behavior. Redirect the users
back to login.php. This will prevent anyone from creating a form on another site and submitting it
to your site to attempt to delete one of your articles.
19. To add the delete functionality, in the Server Behaviors panel click + > Delete Record.
20. In the Delete Record Panel set the following values:
First Check If Variable Is Defined: Form Variable, id
Connection: conn_CMS
Table: articles
Primary Key Column: articles_key, Numeric: checked
Primary Key Value: Form Variable, id
After Deleting, Go To: My_Home.php

45of47

WEB 115

Dreamweaver CMS

Tutorial

21. Click OK. Switch to Code View. Scroll to the bottom of the code. The HTML code will never be run
because the PHP code will redirect the page back to My_Home.php before the HTML can be sent to
the client. Delete the HTML code.

22. File > Save All and Test this functionality. Remember you must preview My_Home.php and click a
delete link.

Homework
Tiny MCE: The text areas for My_ArticleAdd.php and My_ArticleEdit.php will accept HTML code, but users
would have to know HTML to type it in. Tiny MCE is a JavaScript that you can add to any page to turn your
46of47

WEB 115

Dreamweaver CMS

Tutorial

text areas into text editors. They have buttons to bold, italicize, change colors, add classes, paragraphs, lists
and much more. Go to http://tinymce.moxiecode.com and go to the Try It page to see what it does. When
you are satisfied, download the code. It should be a ZIP file. Extract the file and take a look at the code in the
example files.
The last assignment is to get Tiny MCE working on My_ArticleAdd.php and My_ArticleEdit.php. Use any of
the documentation or help on the moxiecode.com site to help you. The example files in the download
should be especially helpful.

ThisworkbySeanMaherislicensedunderaCreativeCommons
AttributionNonCommercialShareAlike4.0InternationalLicense.

47of47