1 Comments   Sunday, 7th September 2008

Creating An Advanced CMS - Part 1

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.

structure.png

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.

db_structure.png

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:

connection_create.png

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.

login_settings_buttons.png

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

login_settings_button.png

This will bring up the Option tab.

login_setting_options.png

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.

login_settings_database.png

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.

login_settings_session.png

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.

login_settings_levels.png

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.

login_wizard_button.png

This will start the Login Wizard.

lwizrd_step1.png

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

lwizrd_step2.png

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.

user_login_form.png

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.

uregister_wizard_button.png

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.

ureg_wizrd_step2.png

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.

ureg_wizrd_step3.png

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

ureg_wizrd_step4.png

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.

generated_ureg_form.png

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.

final_ureg_form.png

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.

 
Filed In: ADDT (Kollection) Tutorials & Tips
Share |


« Previous Article Next Article »



Other Posts You Might Like


blog comments powered by Disqus

Archives

 
 

Latest Tweets

Recent Comments

Powered by Disqus

 


About Me

My name is Emmanuel Okorie. I am by profession a web designer who is trying to expand his expertise into other areas of media such as Digital Video, Photography and General Design.

You can read a bit more about me by visiting the About Me page.

 

 
[ Login ]