The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Create a blog from scratch with PHP and Subversion

You don't need fancy software to create a blog with a powerful undo feature

Tyler Anderson (tyleranderson5@yahoo.com), Freelance writer and developer, Backstop Media

Tyler Anderson has graduated with a degree in computer science in 2004 and a Master of Science degree in computer engineering in December, 2005, both from Brigham Young University. Tyler is currently a freelance writer and developer for Backstop Media.

Summary: PHP is a great Web programming language to use when creating dynamic Web sites, such as blogs. This tutorial explains how to build a blog from scratch, while storing data using flat files. The Web site will be backed up on a remote system using Subversion, protecting data in the event of a Web-site crash. Subversion is growing in popularity, and it is a great candidate to back up the Web site. With Subversion, it's also possible to roll back the Web site to earlier versions of the blog if your server crashes, or if you just didn't like last week's rambling.

Date: 14 Feb 2006
Level: Intermediate
PDF: A4 and Letter (442 KB | 33 pages)Get Adobe® Reader®

Activity: 19532 views
Comments:

Designing the blog architecture

If this is your first blog application from scratch, it should be a great experience because you're going to be able to tailor it to your own needs using a great language, PHP. Now you'll start defining the main blog page where visitors to your blog will be directed to in order to view your blog entries.

Index page

This is the first page that visitors to your blog will see. You're going to create a simple greeting, but feel free to customize it to your own wishes. Define the index.php file, as shown in Listing 3.

Listing 3. Defining the index.php file

                    
<?php
include('includes/functions.php');
define('DIRECTORY_LISTING', "blogs");

$title="Welcome to ".BLOG_NAME;
include('header-sidebar.php'); 

print("<p>Welcome to ".BLOG_NAME."!<br>".
      "Take a look at my latest postings on the left.");

include('footer.php');
?>

Notice that the constant, DIRECTORY_LISTING, defines where the blog entries will be kept. Later, you'll develop code to traverse this directory looking for blog entries. Next, you define the $title variable that will be used in the header-sidebar.php file to display the title. A simple greeting is also displayed, followed by the footer.

You'll have to wait for a preview because it doesn't look as pretty without the title, header, side panel, and footer files defined, which you'll add next.

The header

This file is combined with the side panel and is used to display a simple title for the blog using a simple grid/table format. Begin to define the header-sidepanel.php file, as shown in Listing 4.

Listing 4. Defining the header-sidepanel.php file

                    
<?php

print('
<html>
<title>'.$title.'</title>
<body>
<table width="650px" align="center" valign="top">
<tr><td colspan="2">
');

displayTopBar();

print('
</td></tr>
<tr><td colspan="2">
<center><h1>'.$title.'</h1></center></td></tr>');
...

The $title variable is available from the index.php file that include()'d this file. The displayTopBar() function takes care of the displaying of the Home link at the top of the blog that will always allow a visitor to return to the main welcome page of your blog. Define the displayTopBar() function, as shown in Listing 5.

Listing 5. Displaying the top panel

                    
function displayTopBar(){
    if(!isset($_GET['blog'])){
        print("Home");
    }
    else{
        print("<a href='index.php'>Home</a>");
    }
}

Thus, if a blog has been selected for viewing, a link to take them back to your main welcome page will appear; otherwise, only the text Home will be displayed, without a link. This helps to not confuse visitors that first come to the page. If they clicked on Home and were taken to the same page, it would be a poor and confusing design flaw.

Let's move on to the side panel and footer, complete with a preview.

Side panel

The side panel will contain links for all the visitors to your blog to view your interesting ramblings, ravings, or other discussions you might write in your blog. Finish designing the header-sidepanel.php file, as shown in Listing 6.

Listing 6. Completing the header-sidepanel.php file

                    
...
<tr><td colspan="2">
<center><h1>'.$title.'</h1></center></td></tr>');

print('<tr><td height="100%">
<table width="150px" align="left" border="2px" height="100%">
<tr><td valign="top">
<table width="150px">
  <tr>
    <td><b>My Web Logs</b></td>
  </tr>
  <tr>
    <td>');

listBlogs();

print('
    </td>
  </tr>
</table>
');

// add new side panel items here, using the above "My Web Logs"
// item as a template.

print('
</td></tr></table>
</td><td valign="top" width="100%">
');
?>

New code is noted in bold. The side panel starts off with the two <table> tags. Here, you only have one category listed in the side panel. If you wanted to add another one, you would add it as noted in the two commented lines (lines starting with //). The side panel is completed with the closing of the last </table> tag. Then it opens the main content section up with the last <td ... > tag.

Next, you'll finish up the HTML with the footer.php file.

The footer

This file completes the welcome page for your blog. Define the footer.php file, as shown in Listing 7.

Listing 7. Defining the footer.php file

                    
</td></tr>
<tr><td align="center" colspan="2">
<font size="2px"><br>
<center>Copyright 2005, <?php print(BLOG_NAME) ?></center>
</font>
</td></tr></table>
</body></html>

This file also references the BLOG_NAME constant in its display of a simple copyright notice. Surely you don't want someone stealing your blog content and displaying it elsewhere on the Web without giving you credit or linking back to your site.

You can now preview the page, as shown in Figure 1.

Figure 1. The main welcome page