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.
This concludes Part 1 of this tutorial. In Part 2, we will look at trying to add categories, articles to our blog as well as managing them.
Home
