Blog Design Solutions (2006)
.pdf
B L O G D E S I G N S O L U T I O N S
Save this code in your cms folder in a file called nav.inc. To include the file in your pages, add this line after the opening <body> tag in index.php and addpost.php:
<?php include("nav.inc") ?>
Tart it up
Finally, I’m sure you’ll agree that your CMS is looking a little ugly at the moment. What it needs is a little style. Try applying the following stylesheet, or feel free to build your own:
BODY {
background: white; color: #333;
font-family: "lucida grande", verdana, tahoma, sans-serif; font-size: 62.5%;
}
H1 {
font-weight: normal; font-size: 1.8em; margin-left:10em;
}
P, UL, OL { font-size: 1.2em; margin-left: 15em;
}
UL, OL { padding-left: 2em;
}
#nav {
float: left; width: 8em; margin: 3em 0 0 0; padding:1em 2em; background: #ddd;
border: 1px solid #ccc;
}
.message { color: red;
}
Save this stylesheet in your cms folder as cms.css and import the styles into your pages by adding a style element into the head of index.php and addpost.php:
<style type="text/css"> @import url(cms.css); </style>
296
W R I T E Y O U R O W N B L O G E N G I N E
The resulting index page should look like Figure 7-11.
Figure 7-11. Your CMS index page with includes and styles in place
Building the blog
Now that you have the administration site up and running, it’s time to move on to the fun bit: it’s time to build the blog itself. In this section you will learn how to build a homepage showing your post recent posts, how to create an individual page for each post, how to enable comments, how to create an archive of posts, and how to add searching capability to your blog. Figure 7-12 shows a schematic diagram of how your blog will tie together.
Home Page
7
Blog |
Blog Post |
Search |
|
with |
|||
Archive |
Results |
||
Comments |
|||
|
|
Monthly
Archive
Figure 7-12. Site map of your blog
297
B L O G D E S I G N S O L U T I O N S
Creating the homepage
For your homepage, I will show you how to display your most recent five posts, provide shortcut links to those posts, and add a search box. With some supporting text, imagery, and styling, your final homepage will look something like Figure 7-13.
Figure 7-13. Your blog homepage as it will look
298
W R I T E Y O U R O W N B L O G E N G I N E
Your starting point will be to create this page as an HTML skeleton without any PHP code. Then you’ll add PHP to gradually make the page dynamic. Save this HTML in the root of your blog directory as index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Samuel's Blog</title> |
|
|
<style type="text/css"> |
|
|
@import url(blog.css); |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="header"> |
|
|
<h1>Samuel's Blog</h1> |
|
|
</div> |
|
|
<!-- this is the main part of the page --> |
7 |
|
<div id="maincontent"> |
||
|
||
<div id="posts"> |
|
|
<!-- the five most recent posts will go here --> |
|
|
</div> |
|
|
<div id="sidebar"> |
|
|
<div id="about"> |
|
|
<h3>About this</h3> |
|
|
<p>This is a diary by Samuel Pepys.</p> |
|
|
</div> |
|
|
<form action="search.php" method="get"> |
|
|
<h3 id="search">Search</h3> |
|
|
<p> |
|
|
<input type="text" name="q" value="" /> |
|
|
<input type="submit" value="Search" /> |
|
|
</p> |
|
|
</form> |
|
|
<h3 id="viewarchive"><a href="archive.php">View the Archive</a></h3> |
|
|
<div id="recent"> |
|
|
<h3>Recent posts</h3> |
|
|
<!-- a list of recent post titles will go here --> |
|
|
</div> |
|
|
</div> |
|
299
B L O G D E S I G N S O L U T I O N S
<!-- sidebar ends -->
</div>
<!-- maincontent ends -->
<div id="footer">
<p>A blog by Samuel Pepys.</p> </div>
</body>
</html>
The stylesheet used for the layout and presentation of this page should be saved in the root of your blog directory as blog.css:
/* Layout */
BODY { margin: 0; padding: 0;
}
#maincontent, #header, #footer { width:714px;
margin: 0 auto;
}
#header { height: 142px;
}
#footer {
padding: 10px 0 3em 0;
}
#maincontent { height: 1%; overflow: auto; padding-bottom: 3em;
}
#posts { width: 479px; float: left;
}
#sidebar { margin-left: 505px; padding-right: 25px;
300
}
H1 A {
display: block; width: 385px; height: 140px; text-indent: -1000em; margin: 0;
}
/* Typography */
BODY {
font-family: Georgia, Palatino, serif; font-size: 62.5%;
}
HTML>BODY { font-size: 10px;
}
H1, H2, H3 { margin: 0;
}
H2 {
font-size: 1.7em; font-weight:normal; line-height:1em; padding-top: 1em;
}
H2 A { text-decoration:none;
}
#posts H3 { font-weight:normal; line-height:1em; font-size: 1.4em; margin-top: 1em;
}
H4 { font-weight:normal; font-style:italic; line-height:1em; font-size: 1.2em;
}
W R I T E Y O U R O W N B L O G E N G I N E
7
301
B L O G D E S I G N S O L U T I O N S
.post, DL, #posts UL, #comments P, #results P { font-size: 1.2em;
line-height:1.5em;
}
#comments DD P { font-size: 1em; padding-left: 0;
}
DD { margin-left: 0;
}
#posts H2, #posts H3, #posts H4, #posts H4, .post, DL, #posts UL, #comments P, #results P {
padding-left: 61px;
}
.post P { margin-top:0;
}
HTML>BODY .post P { margin-bottom: 0;
}
.post P+P { text-indent: 1.5em;
}
.post { padding-bottom:1em;
}
#sidebar { font-size: 1.1em;
line-height: 1.3636em;
}
#sidebar P, #sidebar UL { margin-left: 16px; padding-left: 0;
}
#sidebar LI {
list-style: disc url(/images/ornament_bt.gif); margin-left: 16px;
margin-bottom: 0.682em;
}
302
W R I T E Y O U R O W N B L O G E N G I N E
#sidebar H3 {
margin:1.3636em 0 0.682em 10px; text-indent: -1000em; overflow: hidden;
}
#sidebar #viewarchive { text-indent: 0;
}
#viewarchive A { display:block; text-indent: -1000em;
}
#footer { text-indent: 61px; font-size: 1.1em;
} |
|
/* Backgrounds and colours */ |
7 |
|
|
BODY { |
|
background: #583C1D repeat fixed url(/images/map_bg.jpg) center; |
|
color: #f4f8e4; |
|
} |
|
A { |
|
color:#6E4720; |
|
} |
|
H2 A { |
|
color: #000; |
|
} |
|
.post { |
|
background: no-repeat left 3px url(/images/ornament.gif); |
|
} |
|
#header { |
|
background: #340301 no-repeat url(/images/header.jpg); |
|
color: #fff; |
|
} |
|
#footer { |
|
background: no-repeat url(/images/footer.jpg); |
|
} |
|
303
B L O G D E S I G N S O L U T I O N S
#maincontent {
background: #f4f8e4 repeat-y fixed url(/images/content_bg.jpg) center 98px;
color: #000;
}
#about H3 {
background: no-repeat url(/images/h_about.gif); width: 141px;
height: 19px;
}
#search {
background: no-repeat url(/images/h_search.gif); width: 57px;
height: 16px;
}
#recent H3 {
background: no-repeat url(/images/h_recent.gif); width: 135px;
height: 20px;
}
#viewarchive {
background: no-repeat url(/images/h_viewarchive.gif); width: 128px;
height: 15px;
}
#addcomment H3 {
background: no-repeat url(/images/h_addcomment.gif); width: 122px;
height: 16px;
}
/* Forms */ INPUT, TEXTAREA {
border-width: 1px;
}
INPUT[type=text], TEXTAREA { width: 158px;
}
INPUT, TEXTAREA { font-size:1em;
}
304
W R I T E Y O U R O W N B L O G E N G I N E
The stylesheet and all the accompanying background images are available for download from the book website at www.friendsofed.com/. I won’t explain the stylesheet in this chapter because the previous chapters cover many of the techniques involved. The images should be saved to a new directory called images in your blog directory. All the screenshots from now assume that you have the stylesheet and images in place in your blog directory, so if you are online I suggest you download them now.
Pulling in the posts
You have already been introduced to all the code required to show your recent posts on one page. This was covered when you created the index page for your CMS, so I won’t explain much here; instead, you can just insert it straight into your blog homepage: add this code before the DOCTYPE in the index.php file you just created:
<?php
//Open connection to database include("db_connect.php");
//Select 5 most recent posts
$sql = "SELECT post_id, title, post, DATE_FORMAT(postdate, '%e %b %Y at %H:%i') AS dateattime FROM posts
ORDER BY postdate DESC LIMIT 5";
$result = mysql_query($sql); 7 $myposts = mysql_fetch_array($result);
?>
As before, this code starts by opening a connection to the database. Then this SELECT statement is used to query the database:
SELECT post_id, title, post, DATE_FORMAT(postdate, '%e %b %Y at %H:%i') AS dateattime FROM posts
ORDER BY postdate DESC LIMIT 5
It is almost the same as before; the only addition is to select the post field and the LIMIT 5 so that only the five most recent blogs are pulled from the database.
Now you need to display the posts in your page. Replace the comment <!-- the five most recent posts will go here --> with this code:
<?php if($myposts) {
do {
$post_id = $myposts["post_id"]; $title = $myposts["title"]; $post = format($myposts["post"]);
$dateattime = $myposts["dateattime"];
echo "<h2 id='post$post_id'><a href='post.php?post_id=$post_id' rel='bookmark'>
$title</a></h2>\n";
echo "<h4>Posted on $dateattime</h4>\n"; echo "<div class='post'>$post</div>";
305