Grafik Kaos » Blog Archive » Creating An Advanced CMS

Creating An Advanced CMS - Part 1

Posted: Sunday 7th September 2008

In this tutorial, we will be looking at creating an advanced CMS system using Dreamweaver CS3 and ADDT. There are loads of CMS solutions available on the internet, but I have found it pretty interesting and challenging to say the least when building my own. To make things a lot easier as well, I will use the current system that I have on my website as a basis for this tutorial.

What do we hope to achieve with this CMS?

We want to be able to add categories for each article
We want to be able to add articles as well as edit or delete them
We want visitors to the blog to be able to comment
We want to be able to approve comments manually (reducing spam)

The CMS file structure

First of all, let's plan the CMS system. Make sure you have configured your Dreamweaver site and that you also have a working database. connection. If you are looking to install your first PHP server, then I suggest you follow my tutorial here. The image below is the a typical structure that I use on all my websites. It allows me to locate files pretty easily hence making work go a lot faster.

I have provided a zipped file containing the site structure here. You can download it and unpack the ZIP file to your site root. Now that we have created the files required for the CMS application, we now need to get onto the database. For this tutorial, we will be using four tables.

Planning the database

The diagram below shows the database structure that is will be used. An SQL file containing this structure can be found in the ZIP file that you downloaded earlier.

This is a breakdown of the columns used in this database.

blog_categories table:

id_top - the primary key for the categories (i.e. topics) table. No two categories will have the same id
title_top - the title of the blog category
description_top - the description of the blog category
image_top - image attached to the category
seoname_top - search engine friendly name for the category

blog_posts table:

id_art - the primary key for the articles. No two articles will have the same id
author_art - the id of the article author.
idtop_art - the id of the article category. Serves as a foreign key to the blog_categories table.
title_art - the title of the article
content_art - the content of the article is stored here
date_art - the date the article was created
status_art - determines whether the article is live or not.
modified_art - the date the article was modified or changed
comment_status_art - the commenting status for the article. This allows you to determine whether the article is open for everyone to comment on, registered members to comment on or closed.
name_art - search engine friendly title for the article
read_count_art - the number of times the article has been read

blog_comments table:

id_com - the primary key for the comments. No two comments will have the same id
idart_com - the foreign key to the article id
text_com - comment posted for the article
date_com - the date the comment was posted
poster_name - the comment poster's name
poster_email - the comment poster's email address
poster_url - the comment poster's web address
poster_ip - the comment poster's ip address

users table:

id_usr - the primary key for the user. No two users will have the same id.
name_usr - the user's username
email_usr - the user's email address
password_usr - the user's password for logging
registrationdate_usr - the date the user registered on the site
active_usr - the state of the user's account; 1 for active or 0 for inactive
level_usr - determine the user's current level on the site; admin or member
FirstName_usr - the user's first name
Lastname_usr - the user's last name
displayName_usr - the user's display name on the comments

To login into the admin section of the site, use the following details:

username: admin
password: password

Open the main index.php page and create a new connection named gktut_CONN_CMS and configure it to connect to your newly created database:

Configuring the Login Settings

We now need to create a login page for the CMS. We first have to configure the login settings, and the apply the Login Form Wizard on the login page in the site root. To do this, start off by clicking on the Control Panel button the Developer Toolbox bar.

This will bring up the Control Panel interface. From here, click on the Login Settings button.

This will bring up the Option tab.

To start off, we will encrypt the password stored in our database. So make sure that the Enccrypt password is checked. Since we will also be getting users to register on the site, thus having different login levels, make sure that Username, password and access level is selected. We will leave the Auto login validity at its default value which is currently 30 days. Click on the Database tab.

To configure this dialog box options, follow the next steps:

In the Connection drop-down menu, select the database connection used for your site (gktut_CONN_CMS).
In the Table drop-down menu, select the database table that stores user details (users).
In the Primary key drop-down menu, select the field that stores the primary key for the selected table (id_usr).
In the Username drop-down menu, select the table field that stores the user names (username_usr). In the Password drop-down menu, select the table field that stores the user passwords (password_usr).
In the E-mail drop-down menu, select the table field that stores the user's e-mail address (email_usr).
In the Active drop-down menu, select the field that stores the activation state for the user (active_usr).
In the Level drop-down menu, select the table field that stores the user level (level_usr). Please bear in mind that this is not numeric.
In the Random Key drop-down menu, select the table field that stores the randomly generated key used when activating the account (VerificationKey).
When done with the database settings, move on to the Session tab.

Here we will add what extra session values we want stored. Click on the (+) and from the dialog box that appears, select FirstName_usr, LastName_usr and displayName_usr. Click on the OK button to close the dialog box. The new session riables will be created as shown in the image above. Click on the User Levels tab to continue configuring the login settings.

To configure this user interface, follow the next steps:

In the login page text-box enter the page that allows the user to login (login.php).
In the Default redirect on success text-box enter the page that will be opened if the login operation succeeded (index.php).
In the Default redirect on fail text-box enter the page to be opened when a user tries to access a page for which he/she does not have the needed credentials (login.php).
In the User levels grid, set the user access levels as shown in the image above.
Click OK when you are done configuring the dialog box.

Creating the Login page

To create the login page, open the login.php file. From the Develop Toolbox bar, click on the Login Wizard button.

This will start the Login Wizard.

The database setting are automatically configure for you. Click on the Next button to move to step 2.

Click on the Remember me checkbox to enable automatic login and on the Forgot password checkbox to allow ADDT to create forgot password page which will allow users to request their password in case they forget it. Click on Finish to close the Login Wizard and to generate the form. The image below shows the generated user login form.

Creating the user registration form

Seeing as our blog will be given users the option to register, we need to create a registration form. Create a new file called register.php as save it at the site root.

From the Developer Toolbox toolbar, click on the User Registration Wizard.

This will launch the user Registration Wizard.

In Step 1, the database details are automatically selected and set up. So nothing needs to be done here. Click on the Next button to move to Step 2.

In Step 2, all the fields except for id_usr will be listed here. Name_usr, email_usr and password_usr will be setup properly for you, (i.e name_usr and email_usr will be assigned text fields and password_usr will be assigned a password field). Set the Display as value for the registrationdate_usr as Text and then set the Default value to {NOW_DT}. Do the same for active_usr but set the Default value to 0. Delete all the other fields listed as they will not be needed. Click on the Next button to move to Step 3.

In Step 3 make sure that all the value are required for validation. Click on the Next button to move to Step 4.

In Step 4, click on Send welcome email and Use account activation so that upon registration, a new user will received an email welcoming him to the CMS and another email prompting him to activate his account. Click on the Finish button to generate the Registration form show below.

Finally, we don't really want to display the Registration date and account status on the registration form, so select the two rows holding the information and delete them. The final registration form should look like the image below.