Blog module(s) [under construction]
The next thing we will do is a simple database driven blog module. For the sake of simplicity we will only use textual information, plus one optional image. Every blog article has the following fields:
-
Writer id
-
Timestamp of creation
-
Timestamp of last modification
-
Title
-
Ingress (the main ideas in short, optional, can be used in a tooltip, for instance)
-
The article text
-
'Visible' flag
We need a couple of other tables as well
CREATE TABLE cms_blog (
id int(11) NOT NULL,
tstamp timestamp NOT NULL default CURRENT_TIMESTAMP,
tstamp_modified timestamp NOT NULL default '0000-00-00 00:00:00',
title varchar(255) default NULL,
ingress text NOT NULL,
image_id int(11) default NULL,
content mediumtext,
writer_id int(11) NOT NULL default '0',
PRIMARY KEY (id),
KEY by_timestamp (tstamp),
KEY writer_id (writer_id),
KEY image_id (image_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
There are actually two modules we will create. One will be in the right sidebar and provide links. These links, respectively will show the full article in the main workarea. We just have to decide whether we will show the article the old-fashioned way or using asynchronous Javascript.. At this point we will use the simple method and at some point make it more snappy.
The site news templates
As we have two modules we will also need two templates. Let's start with the sidebar one. Here we simply iterate through the array of articles creating a link for each. Inside the link structure we will a insert an element that we cleverly use as a tooltip. See the CSS to see how.it is accomplished.
The second template is for showing the full article in the main display area. See how we use the the built-in Smarty modifier nl2br that replaces newlines with a <br /> tag
As for the main template we will add the list module to the sidebar using declaration
{cmsmodule name="site_news_list" maxitems="5"}
and to be able to show a single news item we will make this change to the main template:
TODO ADD CODE FROM HERE ON...
Additions to the style sheet
Add the following lines to the CSS (if not there yet) and change the colors if you wish. This is where we will make the tooltip visible.
/* newsitem in the sidebar. css used for tooltips - see the span code*/
a.newsitem { text-decoration:none; color:008; position:relative; z-index:24;}
a.newsitem.hover{ z-index:25; }
a.newsitem span { display:none}
a.newsitem:hover span {
display:block;
position:absolute;
top:2em; left:2em; width:20em;
border:1px solid #60490E;
background-color:#F0BF3F;
color:#60490E;
}
/* news article definition(s) */
#news_ingress { font-weight:bold;}
Code for the modules
Now that we have written the templates we know what to fetch to them. The list module is very simple, as one would expect:
Save this file as modules/site_news/site_news_list_module.php
The module that fetches one single article to the main display area is just as simple:
As we do not have an administration end yet we have to add a couple of dummy articles using a database tool of some sort. PhpMyAdmin is a good choice and assuming you are a web developer you should know it.
Funny enough, we have a news system that truly works. It is not the flashiest but does its job. We still have something on our todo list – an Ajax way of getting an article but we will have the pleasure of adding the code a bit later.
Limiting the output length
Let's do one more trick. We have a problem left and that is something we must do something about. A user may write a very long title that takes a lot of space in the list. Why not make it a bit shorter. Instead of
"SkoopCMS gets Gold Medal at the Open Source Knights' annual meeting in Inverness"
We could have
"SkoopCMS get Gold Medal at..."
We could modify our module and write an intelligent cutter there but why bother? To achieve this we can use the Smarty built-in truncate modifier:
{$article.title|truncate:30}
The parameter is the maximum number of characters allowed and the default behaviour is to have Smarty search for the nearest word boundary. Please have a look at the truncate parameters in the Smarty documentation
All right! Now it is time to write a better menu module!