Figure 1: The Inverness Jumpstart
There have been 5 parts in the series on creating a simple blog:
The first five parts focused on creating basic functionality to get a basic blog up and running using simple Dreamweaver design tools. This part will show how to incorporate the functionality into a more complex design -- specifically, the latest CMX Jumpstart -- Inverness. 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. In the course of merging the dynamic blog into the design, you'll learn the following about merging content with design in general -- how to recognize repeating items in the HTML design template and make them dynamic, and how to separate parts of an existing design into a module, or include file.
I'll assume for this tutorial that you have the Inverness Jumpstart set up in Dreamweaver as a site, and have implemented the simple blog as shown in the first 5 parts of this series. This tutorial will not show every step-by-step action to give you a complete blog, but it will give you the tools you need to create one based on the previous 5 parts of the series and the new Inverness Jumpstart. Database scripts are also included for SQL Server and MySQL to create the blog database that incorporates the database created in part 1 with all the changes added in the next 4 parts. An Access database is also included.
Because this blog is dynamic, pages saved with the Inverness design will need to use one of Dreamweaver's supported server models. Save the main index page as index.php, index.cfm, index.asp, index.jsp, or index.aspx, depending on your server model. The Inverness Jumpstart is shown below:
Figure 1: The Inverness Jumpstart
The areas that we will be concerned with are the main blog area, the recent posts sidebar, and the blogroll sidebar. We'll also add a categories sidebar matching the design of the recent posts and blogroll modules. Each one of these areas will be set up with a standard Dreamweaver repeat region and recordset, just as we did in the previous parts of the series. However now we will have to conform to the pre-existing design. This is simply a matter of finding the repeating pattern, removing the repeated elements, then substituting a dynamic piece of code in its place.
The recent posts sidebar is set up with a simple list with a heading, like this:
<h4>Recent Posts</h4>
<ul id="nav-recentposts">
<li><a href="#">A Rant</a></li>
<li><a href="#">A Rave</a></li>
<li><a href="#">A Musing</a></li>
<li><a href="#">A Blog Post</a></li>
<li><a href="#">A Blog Post</a></li>
</ul>
If the design is built with clean code, as this one is, you'll find it much easier to merge dynamic code with the HTML. In this case, first I'll remove the repeating items:
<h4>Recent Posts</h4>
<ul id="nav-recentposts">
<li><a href="#">A Rant</a></li>
</ul>
The link text and href location will be dynamic:
<h4>Recent Posts</h4>
<ul id="nav-recentposts">
<li><a href="[href data]">[text data]</a></li>
</ul>
The repeat region will go around the <li> tags, as shown in the following pseudo-code:
<h4>Recent Posts</h4>
<ul id="nav-recentposts">
<START REPEAT REGION>
<li><a href="[href data]">[text data]</a></li>
</END REPEAT REGION>
</ul>
The first thing I like to do with a design like this is to remove all the sections that I will create as modules. Create a folder called "modules" at your site root and create the following blank files: recentposts.php, blogroll.php, and categories.php (or .cfm, .asp, .jsp, or .aspx, depending on your server model. I'll use .php in all my examples, but nothing shown will be PHP-specific.) The files should be devoid of any code -- completely blank files that will be used for includes.
When working with include files in Dreamweaver, be aware that for some server models in like ASP, JSP, and ASP.NET, Dreamweaver assumes the lowest common denominator -- the program will insert extraneous page directives that will need to be manually removed, such as the <%@ Page Language="VB" declaration on ASP.NET pages. Typically your page can only function with one page directive, so it should not be included in include files.
Next, pull out the recent posts code shown previously and put it into the recentposts file, put the blogroll code into the blogroll file, and also paste the blogroll code into the categories file -- we'll use the code as base for the design of the categories module. Finally, in place of the code that was in the main Inverness page, put the following 3 server-side includes. The following works for PHP:
<?php include("modules/recentposts.php");?>
<?php include("modules/blogroll.php");?>
<?php include("modules/categories.php");?>
If you are using another server language, one of these statements will work:
<cfinclude template="modules/recentposts.cfm">
<cfinclude template="modules/blogroll.cfm">
<cfinclude template="modules/categories.cfm">
<!--#include file="modules/recentposts.asp" -->
<!--#include file="modules/blogroll.asp" -->
<!--#include file="modules/categories.asp" -->
<jsp:include page="modules/recentposts.jsp" />
<jsp:include page="modules/blogroll.jsp" />
<jsp:include page="modules/categories.jsp" />
You can save and browse the Inverness index page to make sure it still works and the design hasn't broken, but it should be fine and ready for making the sidebar dynamic.
Open the recent posts module. In this file, as in the other modules, we'll add the recordset and dynamic code so that the module will be completely self-sufficient and not dependent on any code on the main page. This way it could be used on other pages in your site. First, we need a recordset to drive the recent post list. Create a new recordset by going to Bindings and open the Recordset dialog box. Paste the following query into the query box on the advanced section of the recordset dialog box. The following is for SQL Server or Access:
SELECT TOP 5 blog_item_id, blog_item_title
FROM blog_items
ORDER BY blog_item_datetime DESC
The following query will work for MySQL:
SELECT blog_item_id, blog_item_title
FROM blog_items
ORDER BY blog_item_datetime DESC
LIMIT 5
Save the query as rsRecent. Next, replace the two placeholders in the list [href data] and [text data] with the following -- the [href data] should contain your index page name, along with a querystring variable of id and the dynamic field for blog_item_id. Generally, the easiest way to do this is to open the file in code view, open the bindings panel, and drag the blog_item_id field to your page and drop it on the placeholder. You can then type in the page name in front of it, along with the querystring. Do the same for the [href text] placeholder. Finally, select with your cursor the entire <li> code block and everything between it and apply a repeat region to it, showing all records. Your code should look something like this, shown here for PHP code. Other server models will have similar code blocks and will be shown for the other modules:
<h4>Recent Posts</h4>
<ul id="nav-recentposts">
<?php do { ?>
<li><a href="testindex.php?id=<?php echo $row_rsRecent['blog_item_id']; ?>"><?php echo
$row_rsRecent['blog_item_title']; ?></a></li>
<?php } while ($row_rsRecent = mysql_fetch_assoc($rsRecent)); ?></ul>
Dreamweaver is a little funky when it comes to recordsets and connections within include files. ColdFusion users should have no problems -- data sources are coded directly in the recordset/query code. Other server models like PHP and ASP might have some problems managing connection files. Usually, the easiest way to manage includes with recordsets is to add the recordset directly to the include, make sure it works by viewing it in a browser, then manually change the include path to match what it would be on the main page -- in other words, remove one of the directory references: ../../Connections/cmxblog.php becomes ../Connections/cmxblog.php. Alternatively, use a site-relative include, like <!--#include virtual="/Connections/cmxblog.asp" -->. Dreamweaver recordsets will cease to function when testing the include file this point, but should work in the main index file. We'll assume it doesn't need any changes after the initial test. It is beyond the scope of the article to get into all the intricacies of managing Dreamweaver connection files.
At this point, you should browse the index page and make sure everything works before proceeding.
We'll do the same thing for the blogroll and categories includes. Open the blogroll include and add a recordset to the module using this SQL:
SELECT blog_linkid, blog_linktext, blog_linkhreff
FROM blog_blogroll ORDER BY blog_linktext
Just like the recent posts module, you'll remove the repeating items, leave one in place, add placeholders for the dynamic data:
<h4>Blog Roll</h4>
<ul id="nav-blogroll">
<li><a href="[link href] ">[link text]</a></li>
</ul>
Then, replace the placeholders with dynamic data from the Bindings panel and add a repeat region around the entire <li> block. The resulting code, shown this time for ColdFusion, will look something like this:
<h4>Blog Roll</h4>
<ul id="nav-blogroll">
<cfoutput query="rsBlogroll">
<li><a href="#rsBlogroll.blog_linkhref#">#rsBlogroll.blog_linktext#</a></li>
</cfoutput>
</ul>
Browse the page, make sure it works, adjust the connection if necessary for use in your index page, then test the index page. If everything is working, we'll move on to the categories sidebar.
Note: When adding repeat regions for ASP and JSP users, be aware you will have to manually change the variable names in your repeat regions if you intend on using include files -- the standard repeat region uses variables like "Repeat1_numRows" however if you use more than one on a page you'll have to change the second to "Repeat2" and the third to "Repeat3", etc. This is a limitation of using include files in Dreamweaver. ColdFusion and PHP do not have this limitation.
The Inverness design did not have a categories sidebar, but we'll borrow the code from the blogroll sidebar module and link to the category page that was created in a previous installment (which you can also apply the Inverness Jumpstart to). If you copied the code as previously described, you can open the file and change it to the following:
<h4>Categories</h4>
<ul id="nav-categories">
<li><a href="category.php?cat=[data]">[link text]</a></li>
</ul>
First, make the file dynamic just as in the previous two examples. Add a recordset called rsCategories to the page that uses this SQL:
SELECT category_id, category_desc FROM blog_categories
ORDER BY category_id
Then, drag the dynamic fields from the Bindings panel to code view and replace the placeholders. Add the repeat region once again, and your resulting code should look something like this, shown here for ASP:
<h4>Categories</h4>
<ul id="nav-categories">
<%
While ((Repeat3__numRows <> 0) AND (NOT rsCategories.EOF))
%><li><a href="category.asp?cat=<%=(rsCategories.Fields.Item("category_id").Value)%>">
<%=(rsCategories.Fields.Item("category_name").Value)%></a></li><%
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
rsCategories.MoveNext()
Wend
%>
</ul>
Here is the same thing shown for ASP.NET VB
<h4>Categories</h4>
<ul id="nav-categories">
<ASP:Repeater runat="server" DataSource='<%# rsCategories.DefaultView %>'>
<ItemTemplate>
<li><a href="category.asp?cat=<%# rsCategories.FieldValue("category_id",
Container) %>"><%# rsCategories.FieldValue("category_name", Container) %></a></li></ItemTemplate>
</ASP:Repeater>
I had to create a new ID for the <ul> tag, so we'll have to manually change the CSS file to include it in the definitions. Modify the two CSS files that came with Inverness -- every instance where you see #nav-blogroll you'll have to duplicate the definition for #nav-categories. For example, in this line:
#nav-recentposts, #nav-blogroll, #nav-recentposts li, #nav-blogroll li {
margin: 0;
}
I would change it like this:
#nav-recentposts, #nav-blogroll, #nav-categories, #nav-recentposts li, #nav-blogroll li , #nav-categories li {
margin: 0;
}
The main blog will not be using an include, since it is the main part of the page, however it could be one if you so desire. The main blog consists of the following code, repeated over for each post:
<div class="wrapper-post">
<h3>[Title]</h3>
<div>
[Post]
<ul class="postoptions">
<li class="readmore"><a href="index.php?id=[data]">Read more</a></li>
<li class="tocomment"><a href="comment.php?id=[data]">Comments</a></li>
</ul>
</div>
</div>
We'll do the same thing for this section that we did for the modules. Place this query in a recordset called rsDisplayBlog. The following is for Access or SQL Server:
SELECT TOP 5 blog_item_id,
SUBSTRING(blog_item, 1, 250) + '...' as blog_item,
blog_item_datetime,
blog_item_title
FROM blog_items
ORDER BY blog_item_datetime DESC
The following query will work in MYSQL:
SELECT blog_item_id,
LEFT(blog_item, 250) + '...' as blog_item,
blog_item_datetime,
blog_item_title
FROM blog_items
ORDER BY blog_item_datetime DESC
LIMIT 5
Drag the blog_item to the page and replace the [Post] placeholder. Drag the blog_item_title into the title slot, and the blog_item_id into the [data] placeholder on each link. Next, apply a repeat region around the entire <div>.
Using a SUBSTRING or LEFT function on the text will cause problems if you store HTML tags in your blog entries. If you store HTML, you should create a function to handle stripping html in these blog item summaries.
The completed blog, now being fed by dynamic data, looks like this:
This article has shown how you can merge a dynamic blog such as the one created in the previous 5 parts of this series with one of the Community MX Jumpstarts -- in this case, the new Inverness Jumpstart. It has attempted to show, using simple Dreamweaver built-in functionality, that a blog can be built easily without any other third party software or much hand-coding.