Introduction
Hello and welcome to the Full Blog System tutorial. In this tutorial we will be creating a full blog system with an advanced installation and an admin panel. Each blog will also be able to be commented on. We will also be using a bit of OOP for the database stuff.
Ready?
Edit
The comments section on page 3 has been editted, there was a small error thanks to
stingerblue for reporting it.
Installation
This is a pretty long set of code, I'll say how the installation works then give you the code, read through it since it has comments throughout it. Here's the general breakdown for the installation
- Get database information
- Check mysql connection and database selection
- Create a db.php file with the needed information
- Create the three tables we need (blog, comments and admin) - cheeky use of redirection used to make it look good.
- Ask for the admin information
- Insert admin information into the admin table and also make a dummy blog for successfull installation
- Rename the install file (for security reasons)
- Delete the file (If delete doesn't work then the file has been renamed for security)
- Check to see if the file still exists
- If it does, say you've attempted to delete but failed, and say to delete it themselves.
- If it doesn't exist, say it's been deleted automatically.
- Go to admin login.
Here is the code, this includes a style sheet too just so it's got some look.
<html>
<head>
<title>Install Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #1f1f1f;
font-family: tahoma;
font-size: 10px;
color: #D6D6D6;
text-align: center;
}
.container{
width: 500px;
margin: 0 auto;
text-align: left;
border: solid 2px #575757;
padding: 3px;
background: #3C3C3C;
margin-top: 10px;
}
a{
letter-spacing: 1px;
text-decoration: none;
color: #BBBBBB;
}
a:hover{
text-decoration: underline;
color: #D6D6D6;
}
</style>
</head>
<body>
<div class="container">
<?
// First start by getting all the information needed
$x = $_GET['x'];
include('class.php');
$DB = new mysql();
switch($x){ //Switch the x
default: //If no X, show the default
/* Default page of installer
// This page explains the installer
// and shows a form for getting the
// database information.
*/
echo 'Hello, this installer will set-up everything you need to get this blog application running.<br /><br />
In order for this application to work, you first need to set-up your mysql database,<br />
please enter in the information for your database below.<br /><br />
<form method="post" action="install.php?x=1">
<b>Database Host</b><br />
The host of your database, this is usually localhost.<br />
<input type="text" size="30" name="db_host" value="localhost"><br />
<b>Database Name</b><br />
This is the name of the database you would like to store the tables in.<br />
<input type="text" size="30" name="db_name"><br />
<b>Database User</b><br />
This is the username of your database.<br />
<input type="text" size="30" name="db_user"><br />
<b>Database Password</b><br />
This is the password of your database.<br />
<input type="password" size="30" name="db_pass"><br />
<b>SQL Prefix</b><br />
By default, this is ds_. If you already have this blog installed, then you should change it.<br />
<input type="text" size="30" name="db_prefix" value="ds_"><br />
<input type="submit" value="Continue" name="adddb">
</form>';
break; //Stop default
case'1': //if x is 1 (?x=1)
if($_POST['adddb']){ //If the form from before has been posted
//Get all the posted information into variables, using a function to make it safe.
$db_host = $_POST['db_host'];
$db_name = $_POST['db_name'];
$db_user = $_POST['db_user'];
$db_pass = $_POST['db_pass'];
$db_prefix = $_POST['db_prefix'];
//We then check to see if any of them are empty
if($db_host==NULL|$db_name==NULL|$db_user==NULL|$db_pass==NULL|$db_prefix==NULL){
//If so we show an error.
exit('An error has occured, not all fields were filled in. '.$db_host.$db_name.$db_user.$db_pass.$db_prefix.'<br />
<a href="install.php">Go back</a>.');
}
//If all is ok, we continue, first off by checking to see if we can connect to mysql.
mysql_connect($db_host,$db_user,$db_pass) or die('There was an error connecting to the database, please make sure you have your details correct.<br />
<a href="install.php">Go back</a>.');
//Then we see if we can select to the database
mysql_select_db($db_name) or die('There was an error selecting the database, please make sure your details are correct.<br />
<a href="install.php">Go back</a>.');
//If we get this far, then all is ok. We now write a new php file holding the information.
//First we open up db.php, the "a" opens it up for write only, and if it's not created, we create it.
$open = fopen('db.php', 'a');
//Then we get what we want to put into the file into one variable
$sqldata = '<?
$dbhost = '.$db_host.';
$dbuser = '.$db_user.';
$dbpass = '.$db_pass.';
$dbname = '.$db_name.';
$dbpre = '.$db_prefix.';
?>';
//Then we can write it to the file
fwrite($open, $sqldata);
//Then we can close the file
fclose($open);
//And show a confirmation
echo'Successfully connected to mysql and database.<br />
Configuration file has been made.<br />
<a href="install.php?x=2">Go to next step</a>');
}else{ //If the form hasn't been submitted, we show an error
echo 'A form has not been submitted, please try again.<br />
<a href="install.php">Go back</a>';
}
break; //Stop case 1
case'2': //if ?x=2
include('db.php');
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
$sqlblog = 'CREATE TABLE `'.$dbpre.'blog` (
`id` INT(11) NOT NULL auto_increment PRIMARY KEY,
`heading` VARCHAR(100) NOT NULL,
`postdate` VARCHAR(200) NOT NULL,
`blog` TEXT NOT NULL,
`poster` VARCHAR(30) NOT NULL
);';
//We then query the SQL
$DB->Query($sqlblog);
//If successfully, we direct them to the next step.
echo'<meta http-equiv="Refresh" content="3; URL=install.php?x=3"/>Blog table added...';
$DB->Close();
break;
case'3':
include('db.php');
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
//In this part, we're creating the second table.
$sqlcomments = 'CREATE TABLE `'.$dbpre.'comments` (
`id` INT(11) NOT NULL auto_increment PRIMARY KEY,
`big` INT(11) NOT NULL,
`poster` VARCHAR(50) NOT NULL,
`postdate` VARCHAR(200) NOT NULL,
`comment` TEXT NOT NULL
);';
$DB->Query($sqlcomments);
echo'<meta http-equiv="Refresh" content="3; URL=install.php?x=4"/>Blog table added...<br />
Comments table added...';
$DB->Close();
break;
case'4':
include('db.php');
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
//In this part, we're creating the third table.
$sqladmin = 'CREATE TABLE `'.$dbpre.'admin` (
`id` INT(11) NOT NULL auto_increment PRIMARY KEY,
`username` VARCHAR(50) NOT NULL,
`password` VARCHAR(40) NOT NULL
);';
$DB->Query($sqladmin);
echo'<meta http-equiv="Refresh" content="3; URL=install.php?x=5"/>Blog table added...<br />
Comments table added...<br />
Admin table added.';
$DB->Close();
break;
case'5':
//Now we can ask for the admin information
echo'Almost complete, to finish off, please enter what you would like as your admin user and pass.<br /><br />
<form method="post" action="install.php?x=6">
<b>Username</b><br />
<input type="text" size="30" name="ad_username"><br />
<b>Password</b><br />
<input type="password" size="30" name="ad_password"><br />
<input type="submit" name="admin" value="Continue">
</form>';
break;
case'6':
include('db.php');
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
//First we get the information into variables as well as making it safe to insert into the database.
$user = $_POST['ad_username'];
$pass = $_POST['ad_password'];
$user = mysql_real_escape_string($user);
$pass = mysql_real_escape_string($pass);
$pass = md5($pass); //We encrypt the password, md5 returns it into a 32 hash character.
///Now we check to see if they are both filled in.
if($user==NULL|$pass==NULL){
exit('An error has occurred<br />
Not all fields were filled in.<br />
<a href="install.php?x=5">Go back</a>.');
}
//Then insert it into the admin table
$addadmin = "INSERT INTO `".$dbpre."admin` (`username`, `password`) VALUES('".$user."','".$pass."')";
$DB->Query($addadmin);
$heading = 'Welcome';
$postdate = date('l jS F - g:iA');
$message = 'This is an automatic blog post upon installation to confirm that your installation was successfull. You can delete this blog in the admin panel.';
$insert = "INSERT INTO `".$dbpre."blog` (`heading`, `postdate`, `blog`, `poster`)";
$values = "VALUES('".$heading."','".$postdate."','".$message."','".$user."')";
$DB->Query($insert.$values);
echo'Admin information has been added.<br />
<a href="install.php?x=7">Continue</a>.';
$DB->Close();
break;
case'7':
//Now the installation is complete, we can get rid of the installer so no one can wipe away the database.
rename($_SERVER['SCRIPT_FILENAME'], $_SERVER['SCRIPT_FILENAME'].'.lock'); //Rename the file
unlink($_SERVER['SCRIPT_FILENAME'].'.lock'); //Delete the file
echo 'Installation is complete.<br /><br />';
if (file_exists($_SERVER['SCRIPT_FILENAME'].'.lock')){ //If deleting didn't work say so
echo 'This installer has attempted to delete itself but failed, for security reasons it has been renamed to install.php.lock, please delete it immediately.';
}else{
echo 'Installer has automatically been deleted from the server.';
}
echo '<br /><br /><a href="admin.php">Go to admin panel</a>.';
break;
}
?>
</div>
</body>
</html>
Yea, 227 lines there. It took me 4 lessons at my college to create, and error free the code (I had some unexplainable, confusing set-backs on this)
Showing the blog
Well that's our installation page, we've got our database information, our tables, etc. So here's the line up for the files
- index.php
- blog.php
- css.css
- install.php (Deleted automatically with installation)
- db.php (Created automatically with installation)
- class.php
- admin.php
We'll start with showing the main blog page first. This is the index.php and will show the latest 5 blogs. Here's the code, read through since it has comments.
<html>
<head>
<title>Blog Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="container">
<div id="left">
<?
/************************/
/* Below we include the */
/* files we will need */
/************************/
include("db.php"); //Get database information
include("class.php"); //Get the class and functions
//************************
// Now we get set up the
// SQL that we will be
// needing into variables
//************************
$getblog = "SELECT * FROM `".$dbpre."blog` ORDER BY `id` DESC";
$threeblog = "SELECT * FROM `".$dbpre."blog` ORDER BY `id` DESC LIMIT 5";
//***************
// Set up a new
// class for db
// and connect
//***************
$DB = new mysql();
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
//***********************************************
// We now query our first SQL, this is to find
// how many rows we have in our blog entries,
// if we have no rows then we say there are
// no blogs posted, otherwise we say how many
//************************************************
$gblog = $DB->Query($getblog);
$num = $DB->GetNum($gblog);
if($num == 0){
echo '<strong>There are no blog posts added yet.</strong>';
}else{
echo 'There are ".$num." blogs posted';
}
//************************************************
// We query our second SQL, this is to get the
// three latest blogs posted from the database.
//
// We then use a while loop to get through each
// three putting out the information.
//************************************************
$query = $DB->Query($threeblog);
while($bs = $DB->Fetch($query)){
extract($bs);
$blog = nl2br($blog);
//************************************************
// Below we're going to query the third SQL, this
// is to find out how many comments this certain
// blog has recieved.
//************************************************
$comments = "SELECT * FROM `".$dbpre."comments` WHERE `big` = '".$id."'";
$queryc = $DB->Query($comments);
$cnum = $DB->GetNum($queryc);
echo '<div class="heading"><strong>'.$heading.'</strong></div>
<div class="postdate">Posted on '.$postdate.' by '.$poster.'</div>
'.$blog.'
<div class="comments"><a href="blog.php?id='.$id.'">'.$cnum.' Comments</a></div>';
}
?>
</div>
<div id="right">
<div class="heading">Posted Blogs</div>
<?php
//************************************************
// Now we use the fetch function again to get
// all the blogs that have been posted.
//************************************************
while($ab = $DB->Fetch($gblog)){
extract($ab);
echo '<div><a href="blog.php?id='.$id.'">'.$heading.'</a></div>';
}
//************************************************
// Now we've finished with this page so we can
// close mysql, our class can do this for us.
//************************************************
$DB->Close();
?>
</div>
</body>
</html>
Here's the line up for this page
- Get the 5 latest blogs
- How many blogs are showing?
- Show the blog
- Get number of comments and show
- Get id and heading of all blogs
- Show each one with a link to blog.php
Comments
As seen, we link to a blog.php with a get method, ?id=$id - This will let users comment on this blog once clicked on. For this, we get the id number, select the blog we need, show it, then show the comments, then on the right hand side, we let visitors comment.
<html>
<head>
<title>Blog Application - Comment</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="container">
<div id="left">
<div class="heading"><strong>Comments</strong></div>
<a href="index.php">Go Back</a><br />
<?
include("db.php");
include("class.php");
$blogid = is_numeric($_GET['id']);
//************************
// Now we get set up the
// SQL that we will be
// needing into variables
//************************
$getblog = "SELECT * FROM `".$dbpre."blog` WHERE `id` = '".$blogid."'";
$getcoms = "SELECT * FROM `".$dbpre."comments` WHERE `big` = '".$blogid."' ORDER BY `id` DESC";
//***************
// Set up a new
// class for db
// and connect
//***************
$DB = new mysql();
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
//***********************************************
// First execute our second SQL, this gets the
// comments that the blog we're viewing has.
// Then we store the number of rows we have
// into a variable.
//***********************************************
$comq = $DB->Query($getcoms);
$cnum = $DB->GetNum($comq);
//***********************************************
// Then execute our first SQL, this gets the
// blog information we need then we can show it
//***********************************************
$blogq = $DB->Query($getblog);
$theblog = $DB->Fetch($blogq);
extract($theblog);
$blog = nl2br($blog);
echo '<div class="heading"><strong>'.$heading.'</strong></div>
<div class="postdate">Posted on '.$postdate.' by '.$poster.'</div>
'.$blog.'<div class="comments">'.$cnum.' Comments</div>';
//***********************************************
// Use another fetch function to get and show
// all the comments associatted with this blog.
//***********************************************
while($comments = $DB->Fetch($comq)){
$comment = htmlentity($comment);
$comment = nl2br($comment);
extract($comments);
echo '<div class="heading">'.$poster.'</div>
<div class="postdate">Posted on '.$postdate.'</div>
".$comment);
}
?>
</div>
<div id="right">
<div class="heading">Create Comment</div>
<div>Leave a comment on this blog.</div>
<div>Name</div>
<form method="post">
<div><input type="text" name="poster" size="23"></div>
<div>Comment</div>
<div><textarea cols="18" rows="7" name="comment"></textarea></div>
<div><input type="submit" name="submit" value="Post"></div>
<?
//***********************************************
// The HTML above shows the add comment form,
// Below we check to see if the form has been
// submitted, if so, then we add it to the
// table
//***********************************************
if($_POST['submit']){
$acposter = mysql_real_escape_string($_POST['poster']);
$acomment = mysql_real_escape_string(htmlspecialchars($_POST['comment']));
$acpostdate = date('l jS F - g:iA');
$addcom = "INSERT INTO `".$dbpre."comments` (big, poster, postdate, comment) VALUES ('".$blogid."','".$acposter."','".$acpostdate."','".$acomment."')";
$DB->Query($addcom);
echo '<div>Comment Added</div>
<div><a href="blog.php?id='.$blogid.'">Continue</a></div>';
}
$DB->Close();
?>
</body>
</html><html>
<head>
[h1]The Two Pages
[/h2]
We're missing something on these pages, well, two things actually, the CSS and the class.php. They are both included into every page so we need them. Let's create them.
This is my CSS code, it's nothing huge, simple.
body{
background: #1f1f1f;
margin: 5px;
font-family: tahoma;
font-size: 10px;
color: #D6D6D6;
}
#left{
display: inline;
width: 500px;
border: solid 2px #575757;
float: left;
margin-top: 0px;
padding: 3px;
background: #3C3C3C;
}
#right{
display: inline;
width: 170px;
margin-left: 5px;
border: solid 2px #575757;
margin-top: 0px;
float: left;
padding: 3px;
background: #3C3C3C;
}
#container{
width: 700px;
margin: 0px;
}
#stop{
clear: both;
}
.comments{
text-align: right;
}
.heading{
font-weight: bold;
font-size: 17px;
letter-spacing: 2px;
}
.postdate{
font-size: 9px;
letter-spacing: 1px;
}
a{
letter-spacing: 1px;
text-decoration: none;
color: #BBBBBB;
}
a:hover{
text-decoration: underline;
color: #D6D6D6;
}
and class.php... Basically we have a class called mysql, which we make a new one on every page. The functions then allow us to connect to mysql, close it, make a query, get number of rows and also, fetch information.
<?
class mysql {
function Connect($dbhost, $dbuser, $dbpass, $dbname){
$connection = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname, $connection);
}
function Close(){
mysql_close($this->connection);
}
function Query($sql){
$query = mysql_query($sql) or die(mysql_error());
return $query;
}
function GetNum($query){
$num = mysql_num_rows($query);
return $num;
}
function Fetch($query){
$array = mysql_fetch_array($query);
return $array;
}
}
?>
Admin?
Yea bet you're wandering about that, when to the admin page? Well, right now! This is the second biggest page that will be made, every bit of admin action is done on one single file.
First off, we check to see if the admin is logged in or not, if they are, we can show the admin panel which uses a switch function (with the url of ?x=page), if not, then we show the log in form.
<?
ob_start();
include('db.php');
include('class.php');
$DB = new mysql();
$connection = $DB->Connect($dbhost, $dbuser, $dbpass, $dbname);
//Check to see if the admin is logged in or not.
$sql = "SELECT * from `".$dbpre."admin` WHERE `id`=".$_COOKIE[id];
$logged = $DB->Query($sql);
$logged = $DB->Fetch($logged);
?>
<html>
<head>
<title>Admin Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<?
if($logged['username']){ //If they are logged in
$username = $logged['username'];
echo '<div class="heading">Welcome '.$username.'</div> <a href="admin.php?x=logout">Log Out</a><br /><br />';
switch($_GET['x']){
default:
echo 'You are at the administration panel. Here you can add, edit and delete blogs, as well as delete comments.<br /><br />';
echo '<strong><a href="admin.php?x=add">Add Blog</a></strong><br /><br />';
echo '<strong>Your Blogs</strong>';
$sql = "SELECT `id`, `heading` FROM `".$dbpre."blog` ORDER BY `id` DESC";
$select = $DB->Query($sql);
while($r = $DB->Fetch($select)){
extract($r);
echo '<br />'.$heading.' - <a href="admin.php?x=edit&id='.$id.'">Edit</a> | <a href="admin.php?x=del2&id='.$id.'">Delete</a> | <a href="admin.php?x=vcom&id='.$id.'">View Comments</a>");
}
break;
case'add':
if(!$_POST['submit']){
echo 'Fill in the form below to add a blog.<br /><br />
<strong>Heading</strong><br />
<form method="post">
<input type="text" name="heading" size="30"><br />
<strong>Blog</strong><br />
<textarea name="blog" cols="50" rows="10"></textarea><br />
<input type="submit" name="submit" value="Add Blog">
</form>';
}else{
if($blog = $_POST['blog']){
$heading = $_POST['heading'];
$postdate = date('l jS F - g:iA');
$sql = "INSERT INTO `".$dbpre."blog` (`heading`, `postdate`, `blog`, `poster`) VALUES ('$heading','$postdate','$blog','$username')";
$DB->Query($sql);
echo 'Blog has been added. <a href="admin.php">Continue</a>.';
}else{
echo 'Missing field, please try again.';
}
}
break;
case'del':
$id = $_GET['id'];
$del1 = "DELETE FROM `".$dbpre."blog` WHERE `id` = '$id'";
$del2 = "DELETE FROM `".$dbpre."comments` WHERE `bid` = '$id'";
$DB->Query($del1);
$DB->Query($del2);
echo 'Blog has been deleted. <a href="admin.php">Continue</a>.';
break;
case'del2':
$id = $_GET['id'];
echo 'Are you sure you want to delete this blog?<br />
<a href="admin.php?x=del&id=$id">Yes</a> | <a href="admin.php">no</a>';
break;
case'edit':
$id = $_GET['id'];
if(!$_POST['submit']){
$sql = "SELECT * FROM `".$dbpre."blog` WHERE `id` = '$id'";
$fetch = $DB->Query($sql);
$fetch = $DB->Fetch($fetch);
extract($fetch);
echo '<form method="post">
<strong>Heading</strong><br />
<input type="text" name="heading" value="".$heading.""><br />
<strong>Post Date</strong><br />
<input type="text" name="postdate" value="".$postdate.""><br />
<strong>Blog</strong><br />
<textarea name="blog" cols="50" rows="10">".$blog."</textarea><br />
<input type="submit" name="submit" value="Edit Blog">
</form>';
}else{
$heading = $_POST['heading'];
$postdate = $_POST['postdate'];
$blog = $_POST['blog'];
$sql = "UPDATE `".$dbpre."blog` SET `heading` = '$heading', `postdate` = '$postdate', `blog` = '$blog' WHERE `id` = '$id'";
$DB->Query($sql);
echo 'Blog has been editted. <a href="admin.php">Continue</a>.';
}
break;
case'vcom':
$id = $_GET['id'];
$sql = "SELECT * FROM `".$dbpre."comments` WHERE `big` = '$id'";
$select = $DB->Query($sql);
while($r = $DB->Fetch($select)){
extract($r);
echo '<div class="heading">'.$poster.'</div>
<div class="postdate">Posted on '.$postdate.'</div>
'.$comment.'<br />
<a href="admin.php?x=delc&id='.$id.'">Delete Comment</a><br />';
}
break;
case'logout':
break;
case'delc':
$id = $_GET['id'];
$sql = "DELETE FROM `".$dbpre."comments` WHERE `id` = '$id'";
$DB->Query($sql);
echo 'Comment has been deleted. <a href="admin.php">Continue</a>';
break;
}
}else{ //Otherwise
if (!$_POST[login]){ //If the form hasn't been submitted
echo '<form method="POST">
Username: <input type="text" value="Username" size="15" maxlength="25" name="username">
Password: <input type="password" value="Password" size="15" maxlength="25" name="password">
<input type="submit" name="login" value="Login">
</form>';
}else{
//The form has been submitted
$username= mysql_real_escape_string($_POST['username']);
$password = md5(mysql_real_escape_string($_POST['password']));
//We select from the admin table, and check to see if the detailed entered are correct
$infosql = "SELECT * FROM `".$dbpre."admin` WHERE `username` = '$username'";
$info = $DB->Query($infosql);
$data = $DB->Fetch($info);
if($password != $data[password]){ //If the passwords don't match
echo "Incorrect username or password!";
}else{
//The password was right
$loginsql = "SELECT * FROM `".$dbpre."admin` WHERE `username` = '".$username."'";
$query = $DB->Query($loginsql); //Query the above sql
$user = $DB->Fetch($query); //Fetch the rows
setcookie("id", $user[id],time()+(60*60*24*5), "/", "");
setcookie("pass", $user[password],time()+(60*60*24*5), "/", "");
echo '<meta http-equiv="Refresh" content="0; URL=admin.php"/>Successfully logged in as <strong>'.$username.'</strong>.';
}
}
}
//We've finishing with mysql, it can close.
$DB->Close();
?>
</body>
</html>
Information
This blog system was made for my Applications Software Development lesson at college so it has been tested right through and it works.
For a preview on the blog, click the link below.
Click this link
You can
click here to go to the admin panel.
For the admin panel, use the username dotSilver and the password boom22
