The Cutting Edge Tech Blog


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

Creating a basic blog using php and mysql Part 1

Introduction

In this tutorial I will be showing you how to create a very basic blogging site. This tutorial will be covering:

– Setting up a database and then connecting to it with php

– Setting up your dynamic page to display your blog entries

– Setting up a html form to create new blog entries

These will be covered in detail with all the coding explained and detailed instructions, this tutorial also includes all the source files I’ve created in the process of making this tutorial, these are available to download under the creative commons act (See http://creativecommons.org/licenses/by/2.0/uk/ for licensing agreement).

This tutorial requires some basic understanding of php, html and databases. Some web design software which can edit php e.g. Dreamweaver. You will also need some online hosting space, with a database system enabled on it such as mysql. If you don’t have an online host then you can get a free host, for this tutorial I’m hosting the working demo off xtreemhost’s free hosting package. You can view a working demo at www.theblog.xtreemhost.com and the source files are available at www.mediafire.com/file/twotewqn1lg/source.zip. The chances are it won’t be as good as WordPress but by making your own blog it gives a huge amount more freedom without having to know a huge amount of code.

When following this tutorial it may look dauntingly long but most of its code, so remember the red text is code and the black text is instructions.

Creating the database

The first thing you will need to do is to create a mysql database, you can call your database what ever you want but I normally go for something short and relevant, you’ll need to note this down for later when we create the connect file.

Once you’ve created your database you’ll need to create a table, for this tutorial were using a mysql database so you won’t even need to create the table. The fields we will be creating are:

– Id

– Date

– Title

– Content

– Author

Of course you can add more if you want more be these are the ones we will be covering in this tutorial and the sql code below just needs to be run in your sql editor and your table is ready to go.

CREATE TABLE IF NOT EXISTS `entries` (
`id` int(11) NOT NULL auto_increment,
`date` date NOT NULL default '0000-00-00',
`title` text collate utf8_bin NOT NULL,
`contents` text collate utf8_bin NOT NULL,
`author` text collate utf8_bin NOT NULL,
PRIMARY KEY  (`id`)
)

The table is called entries you can call it what you want by changing the bit in the first line that says `entries`, but for this tutorial all the code is written to work with the table being called entries.

Id – The Id number is an automatically generated number that is different for every record and is our primary key (the value that is used to identify each record so is never the same). It’s set to int(11) this just means that its an initial or number.

Date – The date is just the date and is written in the database in the form of YYYY-MM-DD, the date is automatically generated when you submit the entry. It’s set to date (self explanatory)

Title – The title is simply the title of your blog entry, this is set to text so can have any value.

Contents – The contents is the article it’s self, again this is set to text so can have any value

Author – Your name so people know who has written article and again this is set to text.

NOT NULL – The NOT NULL bit just means the value can’t be nothing.

Setting up your root directory

– An organized site is a happy site, so you’ll probably want to keep your site nice and tidy. For this basic blog there isn’t very many files but it’s still good practice to keep your site organized.

– Open up your root directory either through your hosting control panel or through an ftp client such as filezilla.

– Create two new directories/folders, one called images and the other called scripts.

– These are the only two you will need for this tutorial but you can have more and will need more if you start expanding this basic blogging site.

Connecting to the database

The next step is to get our blog to connect to the database, so we need to tell it where it is and what it’s called. To make this easy were going to create a separate file that we just import into any pages we want to use this data in. We do this so we can easily change the connection information and it will be changed across all the pages in our site.

– So we need to open a new php file so open up your web design software, I’m using Dreamweaver CS3 but you can use any web design software/Code editor you want. And create a new php document.

– Delete everything in the document and copy and paste the red code below.

<?php
$db_host = "URL of your database "; //your host Database address
$db_username = "Your database username"; //your account username
$db_pass = "your database password"; //your account password
$db_name = "your database name"; //your database name
@mysql_connect("$db_host","$db_username","$db_pass") or die ("could not connect to mysql");
@mysql_select_db("$db_name") or die ("no database");
?>

– You’ll need to replace all the details with ones relevant to your database, all of these should be available on your hosting control panel, if there not there you’ll need to request them from your web host. The db_host is normally localhost.

– Save it as connect.php, then upload it to your hosting space into the directory/folder called scripts and open the file up in your web browser, if nothing happens it’s working, well that’s the theory anyway.

Creating the header

We now covered all of the database stuff and can move on to the cosmetics of your site, if you want people to keep visiting your site it’s got to look the part.

– You’ll probably want to have a header on your site so we’ll again create this in a separate document. It is done this way so no matter how many pages you make you will only have to change one thing to change the header on every page.

– Start off by creating another new php document, then delete everything in it and paste the html code below into it.

<br />
<div align="left">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="Your website URL goes here ">
<img src="Your header image URL goes here" align="left"/>
</a>
</td>
<td width="20">
</td>
</tr>
</table>
</div>

– In the source files there’s a folder called images and in that folder are two images. For now all you need is the one called “the-blog-banner.png”. Of course you can use any image you want but I’ll be using this image to create our header. Then replace the bit that says your image URL goes here with the directory of your header image, e.g. images/the-blog-banner.png.

– Then save this file as header.php and upload it into the root directory of your site, and upload your header image into the images folder.

– You will then need to test it.

Conclusion

What we’ve achieved in this part of the tutorial:

– We have created a database

– We’ve created a table within our database

– we’ve connected to our database using php.

– we’ve organized our root directory

– we’ve created a header

View Part two. Click here
Thanks for reading

Advertisements

20 Comments so far
Leave a comment

fantastic tutorial

Comment by vaidehi

Hi,

Ive just added a blog to my webiste using this and I just want to say thankyou for a fantastic tutorial! Many many thanks

Comment by Nick Davidson




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: