Building your own CMS
This entry was posted on February 15, 2008
Building your own content management system (CMS) can be both a very tricky and a very rewarding experience. I’m in the process of building one of my own, and whilst it’s going fairly well so far, there’s still a lot of work to be done.
So how do you get started with building you own CMS?
Well, the first thing you have to do is decide exactly what you want your CMS to do. What sort of content are you going to have? Is it going to be a basic blogging script? News updates? A list of your favourite bands? Reviews of the latest films? Before you can get started on your CMS, you need to know what the “C” will be.
Once the “C” is sorted, you can start planning the “MS”. How will you store your content? Will it be in a database, or will it be in a plain ol’ text file? What sort of database will it be? What language are you strongest with? Whilst PHP / MySQL is a very common pairing to use, it is not the only option and you might like to think about that.
I find it normally helps to abandon the computer and get out a pen and paper for the next part. Make a list of everything that you need to think about when it comes to your CMS. How will you structure your database? What types of information will you be storing? The stronger you can build the back end of your CMS, the easier the front end will be.
Once you’ve decided on the structure for your database, you can set about creating the ‘install’ script which will create the tables in the database for you, and allow you to concentrate on the rest of your CMS. The biggest part will be writing all the code to put all the features you’ve decided you’re going to include into practice.
After you’ve got the back end ‘down’ for your CMS, you can start working on the front end, which is the part your visitors will see. How do you want to pull the information from the database and display it? Which information are you going to display where? How are you going to format that information? Again, this will take a large chucnk of the time.
Now that you have the back end and the front end sorted, you may think that you are done. You’re not.
Security!
The biggest weakness that many content management systems have is their security. What will you have in place to stop people hacking into your admin panel? What will you have in place to stop people deleting all the content from your database? No one knows absolutely everything there is to know about security, but there are hundreds upon hundreds of articles about it on the Internet. A bit of googling will help you identify more things you need to worry about, because, yes, you should definitely be worried.
Spam!
If your CMS has the facility for visitors to leave comments / fill in a feedback form etc., you’re going to need to worry about spam. What steps will you take to ensure it’s a human filling in a form, and not a spambot? Some spam worries come hand in hand with security worries. What’s to stop spambots using your forms to send unsolicited email to hundreds of people? Even if you deal with the security issues, spam can still be incredibly annoying! What are you going to do to stop yourself from logging into your admin panel and seeing dozens of spam comments?
Security and spam are big things to worry about, but don’t let them intimidate you too much. There are steps that can be taken to overcome the most common problems. Do not also be intimidated by the thought of building your own CMS. It can be done, and it has been done.
There are tutorials out there that will guide you through each step of a CMS and provide you with large sections of code to use. However, it’s much more rewarding and will give you a much better understanding if you do all your code yourself. Otherwise, you won’t actually be building your own CMS, you will be recreating someone else’s.
Building your own CMS is a massive task, and I’ve only skimmed the surface with this blog entry. It’s not going to be easy, but equally, it’s not going to be impossible. Be strong, do lots of research, and have fun!
14 lovely people have commented
KISS me
This entry was posted on February 7, 2008
Oh how I love acronyms. First we had CRAP, and now we have KISS. I wish I was making these acronyms up, but I’m not. So what does KISS stand for?
Keep it simple, stupid.
The Internet is a fast-paced entity. People scour the Internet looking for the information and they don’t like waiting for it. Once we’ve decided we want something, we want it right now. We don’t like hunting around for things when we’re not even entirely sure where they are.
This is where the KISS principle comes into play. Web users are not unintelligent, but they can be considered to be ’stupid’ when it comes to certain things. Just because you understand the structure of your site, does not mean that anyone else will understand it.
Keep things simple, and cater for users’ expectations. There are certain conventions that we have come to expect on a website, and whilst throwing these conventions out the window can work in some cases, it will not work in the majority of cases.
Get rid of the clutter from your website. Think of it like a teenager’s bedroom. If there’s a pile of dirty washing, another pile of ironing that needs put away, a stack of DVD’s that was accidentally knocked over and not picked up, and posters all over the walls - how on Earth do you expect someone to find their calculator for their Maths homework?
Don’t get me wrong - I’m not suggesting you get rid of absolutely everything from your website. After all, without content, a website would not exist. I’m just suggesting you take a moment to step back and see how your website looks to other people. Will they be able to use it in the way you intend, or have you completely confused them?
And why is this post called “KISS me”? Well, I’m probably one of the more ’stupid’ Internet users. If I can’t immediately find what I’m looking for, I’ll sulk and go searching somewhere else until I find what I’m after. Can I have a KISS please?
11 lovely people have commented
A not-so-secret secret
This entry was posted on January 4, 2008
My new rainbow-coloured navigation has gone down very well with lots of lovely comments, even several people admitting to visiting Calm Banana just to play with the navigation. Hey, if it brings in visitors, why not? 
As a thank you for all the kind words, I’m going to show you how I built my navigation.
It starts with a basic unordered list.
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">extras</a></li>
<li><a href="#">domain</a></li>
<li><a href="#">links</a></li>
</ul>
To distinguish this unordered list from other unordered list I’m going to use on the site, I’ve wrapped it in a div tag with an id of “navigation”. Also, because each link is going to have a different background colour on the hover, I’m going to assign an id to each list-item.
<div id="navigation">
<ul>
<li id="home"><a href="#">home</a></li>
<li id="about"><a href="#">about</a></li>
<li id="extras"><a href="#">extras</a></li>
<li id="domain"><a href="#">domain</a></li>
<li id="links"><a href="#">links</a></li>
</ul>
</div>
And that’s it as far as structure and HTML is concerned. Nothing else is needed; well, apart from the urls for the links, but they’re not really relevant to this tutorial.
Now we just need to concentrate on the CSS needed to make the navigation more aesthetically pleasing.
#navigation {
margin:0 auto;
width:750px;
}
This centres the navigation and assigns it a width of 750 pixels, which is the width of my layout.
#navigation ul {
list-style-type:none;
padding-left:0;
}
This part removes bullets point, and resets the padding on the left of the unordered list to 0. Although I have the “global reset” (* {margin:0;padding:0;}) at the top of my stylesheet, I’ve had problems in the past with browsers still applying padding to the left of unordered lists. This deals with that.
For those of you not fully familiar with CSS, the “#navigation ul” means “every ul tag that is inside a containing element with an id of navigation”.
#navigation ul li {
display:inline;
}
This part changes the display of the list-items (inside a ul inside a containing element with an id of navigation) from “block” to “inline”, and has the effect of making the list-items appear next to each other as if they were a sentence.
Next we have the most complicated part - styling the actual links.
#navigation ul li a {
display:block;
float:left;
width:150px;
text-align:center;
height:2em;
line-height:2em;
color:#FFF;
background:#333;
text-decoration:none;
font-size:120%;
}
This intimidating piece of markup refers to all links inside list-items inside unordered lists inside containing elements with the id of navigation. Ids are (or at least should be if you do it properly) unique to each page. I only have one navigation.
display:block changes the display of the links from “inline” to “block”, which is the opposite of what we did earlier with the list-items. I did this because I want the links to be clickable in as large an area as possible. I don’t just want the text to be clickable.
If we didn’t have float:left, the links would display how a typical unordered list appears. In other words, they would be on top of each other. That’s not the intention at all, so we float them to the left and they pop back up onto one line again.
width:150px tells the browser that the links should all be 150 pixels wide. There are five links, and I want them evenly distributed. The full width of the navigation is 750 pixels, so 750 divided by five is 150.
text-align:center centres the text inside each link.
height:2em lets the browser know how tall each link should be, and line-height:2em makes sure the text inside the link is vertically-aligned to the middle.
color:#FFF and background:#333 sets the colour of the text to white and the background of each link to dark grey.
text-decoration:none gets rid of the awkward underline under each text. Underlines are good as they help distinguish the link from regular text, but with the navigation there is no regular text, and an underline is not needed to show the visitor that these are in fact clickable links.
font-size:120% makes the text in the links 120% bigger than the text in the surrounding element, which in this case is the body. It’s just there to make the links even more obvious.
That deals with most of the presentational aspects of the links, so now there’s only one more thing to sort out - what do we want to happen when a mouse hovers over a link?
We want rainbow colours!
If you’re familiar with CSS, you should be away of the :hover pseudo-selector. Do you also remember that we assigned a unique ID to each list-item? That allows us to do this:
#home a:hover {
background:#C91212;
}
With regards to each link inside a containing element with an id of home, when you hover over it, the background will change from #333 to #C91212. Because there is only one “home”, and there is only one link inside it, we know exactly what’s going to happen.
Here’s the CSS to change the hovers on the other links:
#about a:hover {
background:#ED7321;
}
#extras a:hover {
background:#F2C64E;
}
#domain a:hover {
background:#67BF24;
}
#links a:hover {
background:#3C73C7;
}
And that’s it. When I first put together this navigation, I’d neglected the “display:inline” for the #navigation ul li, which led to a very perculiar staircase effect in IE6 and IE7.
Any questions?
