And so we’ve arrived at the last in this set of tutorials; if you’ve been following along, by now you should have a user system as well as a basic CMS. At the moment we have a very strong base for our CMS but there are still a few things that we need to talk about. Firstly style. I like to think of myself as a stylish kind of guy 😉 and I like to keep my work stylish to, so now were are going to implement some CSS to make our CMS at least moderately aesthetically pleasing. We are going to keep it simple and if you would like to change it feel free to do so, this is just a suggestion; in fact if you are intending on integrating this CMS into your own site, why not give it the same look?
Now before we get to the CSS you will need to copy the tiny bit of code below between your <head> and </head> tags of every page that you want styled.
<link href="style.css" rel="stylesheet" media="screen"/>
That’s the code for linking the CSS to the page. Right then let’s just get this CSS out of the way. So go ahead and create a new file called style.css and paste in the following code.
* {
margin: 0px;
padding: 0px;
}
/*---Login Page---*/
#login {
width:500px;
height:250px;
background-color:#fff;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
display: block;
top:50%;
left:50%;
margin-left:-250px;
margin-top: -125px;
position: absolute;
}
input.textbox, input.edit {
width:450px;
margin:5px 24px 0px 24px;
border:1px solid #cfcfcf;
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:35px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #7f7f7f;
padding:5px;
font-size: 20px;
}
input.submit, input.editbutton, #submit {
width:460px;
height:45px;
cursor:pointer;
font-family:Calibri, Arial, Helvetica, sans-serif;
font-size:19px;
color:#FFF;
background-color:#bfbfbf;
border:#cfcfcf;
border-style:solid;
border-width:1px;
padding:3px 4px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
margin:5px 24px 0;
}
input.submit:hover, input.editbutton:hover, #submit:hover {
background-color:#cfcfcf;
}
label {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#9f9f9f;
padding:5px 24px 0;
}
/*---Index Page---*/
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color:#777;
padding:5px;
}
ul.pagelist1 {
background-color: #cfcfcf;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:10px;
width:680px;
}
li.pageoption {
background-color: #afafaf;
width:640px;
padding:10px;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
display: block;
margin:10px;
}
li.pageoption:hover {
background-color: #efefef;
}
a.pagelink {
font-family:Calibri, Arial, Helvetica, sans-serif;
color:#000;
text-decoration: none;
}
span.floatright {
float: right;
}
/*---Edit Page---*/
textarea.edit {
width:450px;
margin:5px 24px 0px 24px;
border:1px solid #cfcfcf;
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:200px;
font-family: Calibri, Arial, Helvetica, sans-serif;
color: #000;
padding:5px;
font-size: 20px;
}
input.edit {
width:450px;
margin:5px 24px 0px 24px;
border:1px solid #cfcfcf;
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:35px;
font-family: Calibri, Arial, Helvetica, sans-serif;
color: #000;
padding:5px;
font-size: 20px;
}
/*---Add New Page, Page---*/
#title {
width:450px;
margin:5px 24px 0px 24px;
border:1px solid #cfcfcf;
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:35px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #7f7f7f;
padding:5px;
font-size: 20px;
}
#url {
width:170px;
margin:5px 0px 0px 0px;
border:1px solid #cfcfcf;
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:35px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #7f7f7f;
padding:5px;
font-size: 20px;
}
.infomsg {
display:block;
background-color:#fff9d7;
border-width:1px;
border-color:#e2c822;
border-style:solid;
width:445px;
color:#000;
font-family:Calibri, Arial, Helvetica, sans-serif;
font-size:16px;
text-align:center;
margin:10px 0px 10px 20px;
padding:10px;
}
/*---Signup Page---*/
#signupform input {
width:450px;
margin:5px 24px 0px 24px;
border:1px solid #cfcfcf;
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:35px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #7f7f7f;
padding:5px;
font-size: 20px;
}
Now that is quite a lot of code indeed. But really all it does is make our site more workable. Next I would like to talk about extending the functionality of this CMS. I am going to be using real world examples that I recently used on a client’s site, so they should be relevant.
So let’s take a step back and look at what we have done. We have created a CMS that allows users to signup and login. From the index page they can create new pages and edit existing pages. The changes that they make in a friendly noob-based environment as I like to call it, will be reflected on the live site. That’s quite impressive. Visit any one of the site’s pages and you are viewing dynamically generated content. This approach is excellent for us web designers, and the only people that love it more than we do, are the clients. Think about it, if you had a site that was supposed to display the latest technology news and you had to go through your web designer first, it would take some time, therefore making your site out of date quickly. Clients love the idea that they can easily edit and update the information on their site without needing to know anything technical. But wait! Before you go pitching to a client with the CMS above there are a few things you should know. If I bought a website with the CMS above I wouldn’t be happy. Why not? Well because there are some things missing. Firstly think about the navigation in the backend. There is none! Moreover how do I add images and links? Remember I know nothing about code. To overcome such difficulties that you will inevitably face I recommend you work on their solutions.
When the client came to me and asked for a myriad of features I had a number of problems to sort out. Many of the problems I faced were solved using solutions listed in this series of tutorials. But instead of providing you with the exact solutions to some of them, I urge you to try to figure them out for yourself. Let’s look at the image and link adding feature for example. Realistically it can be tackled head on very easily. What would we need? Well, we want the URL of the page to be linked to, and what the user wants to display as the link text. Then all we have to do is generate a bit of HTML with that information in it. Go ahead and try and combat the problem. You will need a form and a tip – I used some really simple Javascript to generate the HTML. Once the code is generated the user need only paste it into the editing field of the page.
Now let’s discuss an advanced security feature. You could use this for a client who was particularly wary of being hacked. Look at the code below.
$ip=$_SERVER['REMOTE_ADDR'];
if(!filter_var($ip, FILTER_VALIDATE_IP))
{
throw new InvalidArgumentException("IP is not valid");
}
$response = file_get_contents('http://www.netip.de/search?query='.$ip);
if (empty($response))
{
throw new InvalidArgumentException("Error contacting Geo-IP-Server");
}
$patterns=array();
$patterns["domain"] = '#Domain: (.*?) #i';
$patterns["country"] = '#Country: (.*?) #i';
$patterns["town"] = '#City: (.*?) $pattern)
{
$ipInfo[$key] = preg_match($pattern,$response,$value) && !empty($value[1]) ? $value[1] : 'not found';
}
The code above gets the user’s IP address and then uses a free service to retrieve some information. With that information you could compare the country the user is in to the country they usually login from, and if it differs ask them to provide some more information like an extra security code. Clients will be impressed by this sort of stuff, especially if you can make it work well and make it slick.
Lastly I want to talk about user details. This is a really simple subject area, but it is important. If your user signs up and accidentally spells their name wrong then they won’t be able to change it, and that really isn’t great. If you think about it to implement a profile editing page would be easy. I’ll take you through the theory. You would create a new page and add a form not dissimilar to that of the form used to signup. You would then populate the form with $_SESSION variables, leaving the user free to edit them. When the submit button is clicked the database is updated and everything is great!
The things listed above may seem simple, but adding polish to a site’s CMS is a good idea and a requirement if you are working on one for a client. In the end my client’s CMS turned into a very powerful one, it looks lovely with a load of fancy icons and animations. I was able to work with the client and help them to achieve their goals because at the end of the day the CMS that I built – much like the one above – was extensible and flexible.
I hope you have enjoyed this series, I have worked hard to iron out any kinks in the code, but if you find one leave a comment below – I’ll be most grateful. The same goes for any issues you have with the tutorial. If you have any questions at all, feel free to ask away below.
Now that’s over, time for a coffee me thinks!
Comments
3 responses to “Building a CMS Part 3”
Hi, this I have been trying to get to work on localhost with wamp but it seems that the pages are made, but then, when I try to edit something it comes up with the error for mysql_fetch_array on line 3 of edit.php.
As I am writing this I have solved the issue, just under:
{code]<?php session_start(); $currentPage = $_GET['page'];[/code]
place:
[code] include('connect.php');[/code]
beore:
[code] $result = mysql_query("SELECT * FROM content WHERE page = '$currentPage'");[/code]
and then the query is processed accordingly.
Great little sript though, the only thing is that there is no user restriction, it doesn't make me sinup for an account or anything, I have the [+] Add New Page link and that's that, will see if there are any other issues that I can work out to see why this is happening.
Thanks for the script and tutorial, great help in getting started with a custom CMS, too many complicated ones out there, even the ones that "claim" to be easy!
Thanks again!
Thanks again!
Hi,
Lovely little tutorial, although some bits aren’t working for me.
I get these errors after I add a new page:
Notice: Use of undefined constant url – assumed ‘url’ in C:\xampp\htdocs\cms\addpage.php on line 12
Notice: Use of undefined constant title – assumed ‘title’ in C:\xampp\htdocs\cms\addpage.php on line 31
Notice: Undefined index: firstname in C:\xampp\htdocs\cms\addpage.php on line 31
Notice: Undefined index: lastname in C:\xampp\htdocs\cms\addpage.php on line 31
And also at this point if i click on edit page i get this error:
Notice: Undefined index: status in C:\xampp\htdocs\cms\edit.php on line 17
On the new page i get these errors:
Notice: Use of undefined constant title – assumed ‘title’ in C:\xampp\htdocs\cms\hi.php on line 15
Notice: Use of undefined constant text – assumed ‘text’ in C:\xampp\htdocs\cms\hi.php on line 16
Im not too bad with PHP code, but can’t work out why these errors are happening
Any ideas?
Thanks
Hmm, sounds like you’ve not defined any variables – maybe you forgot to include a file?