The Cutting Edge Tech Blog


Creating a basic blog using php and mysql Part 2 by FSherratt

Creating a basic blog using php and mysql Part 2

View part 1 here

Creating the index.php

The index page is the homepage for your blog, for this tutorial the index page will display your blog entries. Why is it called index not home or entries? It’s called index because when we stick it in the root directory the index.php bit won’t appear in the URL so out URL will only be http://www.yourdomain.com for example. This keeps the URL tidy, because a tidy URL is a happy URL. This page is where we start to use php to its full potential. We are only going to have one page to display all our blog entries, how are you going to do that I hear you asking, well I will explain below.

So start off by opening a new php document, but this time don’t delete anything. Then press enter at the top of the document a few times and we can start to add our php. The first line of code tells the computer we our now writing in php. So copy and paste the bit of code below to the top of the php document.

<?php

The line of code below connects our document to the connect file we made in part 1. We can then use the data from our database in our dynamic page. paste the red code below into the document below the <?php bit.

include_once"scripts/connect.php";

This bit gets the id number from the URL and makes it a php variable. this means that ?id=1 would make the php variable $id = 1 simples. The final line below the bit that say } else { tells the computer if there’s no id number in the URL move on to the next function relating to this query.

if ($_GET['id']) {
$id = $_GET['id'];
} else {

The next piece of code tells the computer what to do if there’s no ID number in the URL. What where going to do is tell the computer order the entries in our database in descending order so oldest last and then select the ID from the latest article and use that as Id.

$sql1 = mysql_query("SELECT * FROM entries ORDER BY id DESC LIMIT 0,1 ");
while($row1 = mysql_fetch_array($sql1)){
$id = $row1["id"];
}
}

The next bit of code is very important, as it will stop people from hacking into our database and steeling our precious data.

$id = mysql_real_escape_string($id);
$id = eregi_replace("`", "", $id

The next line of code connects to the table, in our database and then selects all the data that we want to display in our entries. To do this we tell the php to SELECT the data (*) From the table entries Where the id number equals the $id variable we collected from our URL.  The line after tells the computer to not process anymore of the php until it has finished with that bit of code, hence the while bit. So it’s telling it to fetch the data from the row which is equal $sql variable we assigned in the line above.

$sql = mysql_query("SELECT * FROM entries WHERE id='$id'");
while($row = mysql_fetch_array($sql)){

The next chunk of code turns the data we have just collected into php variable that we can then display. The only one that is slightly different is the date, as we don’t want the date to be displayed as 2009-09-13 as that looks a bit unprofessional. So to get it to display as August 13, 09 we make it turn the 0000-00-00 data into a written date.

$title = $row["title"];
$contents = $row["contents"];
$author = $row["author"];
$date = $row["date"];
$date = strftime("%b %d, %y", strtotime($date));
}

The next three lines of code again connect to our entries database and fetch the id of the latest Entry. We’ll use this for the controls at the bottom so we can skip straight to the most recent entry. We also use this so we can make the controls change at the bottom. For this tutorial we are assuming that your not going to be deleting articles so the oldest post will have an id number of 1.

$sql1 = mysql_query("SELECT * FROM entries ORDER BY id DESC LIMIT 0,1 ");
while($row1 = mysql_fetch_array($sql1)){
$id2 = $row1["id"];
}

The next two lines of code are for the next post and previous post controls. They add or subtract 1 from the id number value. We then use the php variables in the controls hyperlinks.

$up_1 = $id+1;
$down_1 = $id-1;

The next bits of code are more if functions. The one below is what controls will be displayed if there is only one entry. So obviously we don’t want any controls, which is why we have left the php variables with no values. In-between the two apostrophes (‘) there would normally be some text or in this case some html links. This means that when we set of the html and put the php print codes in nothing will appear at the bottom.

if ($id2==1) {
$Left_move1 = '';
$Left_move2 = '';
$right_Move1 = '';
$right_Move2 = '';

The next bit of code is an else if function so if the if query above is not true then its checks whether the following query is true or not. This finds out if you are on the oldest post so it can display the correct controls.

} else if ($id==1){

The next bit is similar to the code above except the left_move1 and left_move2 variables have the html code for links in them.

$Left_move1 = '<a href="http://www.theblog.xtreemhost.com/?id=' . $id2 .' "> Latest Article</a>';
$Left_move2 ='<a href="http://www.theblog.xtreemhost.com/?id=' . $up_1 . ' ">Next Article</a>';
$right_Move1 = '';
>$right_Move2 = '';

The next bit of code is almost identical to the one above but it checks to see whether your are on the latest article. We collected this variable earlier.

} else if ($id==$id2){

Again we only produce the controls we want to show for this outcome.

$right_Move1 =' <a href="http://www.theblog.xtreemhost.com/?id=' . $down_1 . '">Previous Article </a>';
$right_Move2 ='<a href="http://www.theblog.xtreemhost.com/?id=1">Oldest Article </a>';
$Left_move1 = '';
$Left_move2 = '';

The next line tells the computer if none of the queries above are met then it should display all the controls.

} else {

As every article you display that doesn’t meet a query above should need all the controls. Of course you can have more controls and you can experiment around with the controls and have a go at writing your own if functions as that’s the best way of learning a new code.

$Left_move1 = '<a href="http://www.theblog.xtreemhost.com/?id=' . $id2 . '"> Latest Article</a>';
$Left_move2 ='<a href="http://www.theblog.xtreemhost.com/?id=' . $up_1 . '"> Next Article</a>';<
$right_Move1 =' <a href="http://www.theblog.xtreemhost.com/?id=' . $down_1 . '">Previous Article</a>';
$right_Move2 ='&lt;a href="http://www.theblog.xtreemhost.com/?id=1">Oldest Article </a>';
}
?>

Now we will need to start printing the data where we need it. The variable we will need is the title data. Were going to use the print function to make the title of the page be whatever the title of the article is.

The next step Is to start displaying all the data we’ve collected. The line of code makes the title of the article display as the title of the page (the bit that displays at the top of your browser).

<title>
<?php
print"$title";
?>
</title>

We now need to start setting out the layout for our page, so lets start with header. Start by opening the body of the html page (the <body> bit) then open up a div and set it to align to the centre of the page. Then open up a new php code bit and tell it to include once the “header.php” file that we created in the first part of this tutorial. You can also do this for the footer if you have one, just insert the include once code at the bottom of the body but with the URL for the footer file.

<body>
<div align="center">
<?php
include_once"header.php";
?>

You will also need to place the rest of the php variable in where you need them.

You’ll also want to be able to place all the over data you’ve dragged out of the database. so there are three bits of code below. All you need to do is put them wherever you want your data to be shown.

<?php print"$date"; ?>
<?php print"$contents"; ?>
<?php print"$author"; ?>

The last bit you’ll need to know to set out your page using tables to keep everything neat and tidy. There’s a very basic table below for the controls just paste this code where ever you want the controls to be.

<table>
<tr>
<td width="160" align="left>
<?php print"$Left_move1"; ?>
<br />
<br />
</td>
<td width="160" align="right">
<?php print"$Left_move2"; ?>
<br />
<br />
</td>
<td width="10" align="right">
<br />
<br />
</td>
<td width="160" align="left">
<?php print"$right_Move1"; ?>
<br />
<br />
</td>
<td width="160" align="right">
<?php print"$right_Move2"; ?>
<br />
<br />
</td>
</tr>
</table>

You now have a blog but no way of entering your data easily, so in part 3 we will look at how to make an HTML form and then submit it to the entries database.

What we have achieved in this tutorial:

– We have created a dynamic page to display our blog entries.

– We have fetched data from our table using a variable we have collected from the URL

– We have generated controls depending on an if query

– And we have kept the page tidy using tables.

– We’ve displayed external files

View part 3
Thanks for reading
You can view a working example at
www.theblog.xtreemhost.com
You can download the source files here

Advertisements

9 Comments so far
Leave a comment

The bad thing about this tutorial, is that it uses old techniques :(

Comment by Connor Gurney




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: