Creating a Simple Blog Part 1

One of the frequent questions in the forums is "How do I create a blog?". There are many commercial blog systems out there, and many full-featured blog providers, like Blogger, but you can also create a simple blog using the standard tools of Dreamweaver. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. This will be a multi-part series. Part 1 will focus on creating a database for the blog, creating an online admin form so that you can add items to the blog, and displaying the blog items.

This series of articles will assume that you know how to work with Dreamweaver to create a data-driven site. For example, you should know how to create databases and connections within your chosen server model.

A blog is nothing more than a simple content management system. The content is stored as items, and is displayed by descending date in the blog. Also, most blogs allow comments to be posted on individual blog items. With that in mind, you can create a simple blog with two simple database tables:

blog_items
blog_comments

The blog_items table will store the actual items, along with the date, and title of the blog item. The blog_comments table will store any comments related to a specific blog item. The actual table definitions are as follows:

blog_items

blog_comments

The following script will create the database for you in SQL Server .

CREATE DATABASE cmx_blog
GO
use cmx_blog
GO

CREATE TABLE blog_items (
blog_item_id int IDENTITY (1, 1) NOT NULL ,
blog_item text NULL ,
blog_item_date datetime NULL ,
blog_item_title varchar (255) NULL
)
GO

CREATE TABLE blog_comments (
comment_id int IDENTITY (1, 1) NOT NULL ,
comment_text varchar (2000) NULL ,
blog_item_id int NULL ,
comment_date datetime NULL ,
comment_email varchar (128) NULL ,
comment_name varchar (128) NULL ,
comment_title varchar (255) NULL
)
GO

The following script can be used to create the database for MySQL:

CREATE DATABASE cmx_blog;

USE cmx_blog;

CREATE TABLE blog_items (
blog_item_id int PRIMARY KEY AUTO_INCREMENT NOT NULL ,
blog_item text NULL ,
blog_item_datetime datetime NULL ,
blog_item_title varchar (255) NULL
);

CREATE TABLE blog_comments (
comment_id int PRIMARY KEY AUTO_INCREMENT NOT NULL ,
comment_text text NULL ,
blog_item_id INT NULL ,
comment_datetime datetime NULL ,
comment_email varchar (128) NULL ,
comment_name varchar (128) NULL ,
comment_title varchar (255) NULL
);

With the database in place, you will need to set up a database connection in Dreamweaver. Name the connection connCMXBlog and test to make sure it works. The next step is to begin building the site.

The site will consist of the following files, which you can create as blank files in a site if you want to follow along with the tutorial. You can create a new site and place the files at your root, or you can place them in a subdirectory off another site. For example, I have them in a folder named blog in my site. I've listed them as .php files here, but you can use whichever server language you prefer:

-root
    -admin
        insert.php  Insert items into the blog
        update.php  Update existing blog items
        index.php  List the blog items
        login.php  Log in to the administration section
    index.php  Main blog page, showing recent items
    comment.php  Comment insertion form for users to comment on blog items
    viewcomment.php  All comments for a specific item are listed
    archive.php  When a user clicks a link to a specific blog item, he will see this page

The first thing to do is to create the administration section, so that you can add some blog items to the blog. For this article, I'll assume you can create your own login page and also password-protect the other files in your admin folder. For information on how to create a login page, check the following Community MX articles:

Dissecting the Login User Server Behavior at http://www.communitymx.com/abstract.cfm?cid=E24E7
User Authentication in Macromedia Dreamweaver MX 2004 at http://www.communitymx.com/abstract.cfm?cid=E5577

Creating a Blog Item Insert Page

The insert page will be built using an Application Object: Record Insertion Form Wizard. To use this wizard, click Insert > Application Objects > Insert > Record Insertion Form Wizard. There is also a button on the Application insert bar that performs the same function. That brings up the interface shown in Figure 1 (the interface may vary slightly in different server models) .

Figure 1: Record Insertion Form Wizard

You should set it up using the following parameters:

• Data Source: your CMXBlog database
• Username: Your database username
• Password: Your database password
• Table: blog_items
• After inserting, go to: index.php (index.php will be a blank file at this point. The next section will create this page)
• Form Fields: Use the minus button to remove the blog_item_id field, and set the following fields in this order (use the up/down arrow keys to change the order):

*depending on your database/server model, you may want to use Text instead of Date. Also, the format of the date entered may be different for various server model/database configurations (i.e. 03/03/2004, 2004/03/03, 2004-03-03). Part 3 of this series will show how insert the current date/time automatically with a little hand-coding.

With that in place, click OK and you have your blog item insert page. You can dress it up with titles, CSS, etc, but the page is functional at this point. The completed page is shown in Figure 2.

Figure 2: Completed Insert page for the Blog

With the insert page in place, we can now create the display page.

Displaying the Blog Items

The blog display will use two basic Dreamweaver server behaviors: Recordset and Repeat Region. Start by opening the index page in the admin folder of the site. Add a recordset to the page. named rsDisplayBlog. Add this SQL to the Advanced recordset dialog box, using your connCMXBlog connection:

SELECT blog_item_id,
blog_item,
blog_item_datetime,
blog_item_title
FROM blog_items
ORDER BY blog_item_datetime DESC

After adding the recordset to the page, give your page a title and a heading (like "My Blog") and then drag these recordset fields from the Bindings panel to the page one by one: blog_item_title, blog_item_datetime, blog_item. You can make blog_title an <h2> tag and blog_datetime an <h3> tag. You can also add an <hr> tag beneath the blog item. Your page should look like Figure 3 at this point.

Figure 3:The blog display page

With that in place, drag your cursor over the dynamic items and the <hr> tag, effectively selecting the entire blog item. Next, apply a Repeat Region to the area, showing all records, by clicking the plus sign (+) in the Server Behaviors panel and clicking Repeat Region (or by choosing it from the Application item in the Insert bar or Insert menu). If you browse the page now, you will see any items that you inserted previously, ordered by descending date.

Next, create an exact duplicate of the index page in your main site. The index page in the admin section will be built upon in Part 2 to include links to update or delete entries, whereas the index page in the main site will be built upon to include the view comment and add comment features.

Conclusion

Blogs are simple content management systems that can be put together easily using some built-in Dreamweaver functionality. The next part of the series will add to the administration section, and also show how to add the comment feature to the blog items, allowing visitors to view/write comments on a particular blog item. Part 3 will move away from the automated features of Dreamweaver and show some of the more advanced aspects of blogs, such as creating an RSS feed.