PHP - Making a basic blog
From Global Programming Syntax
In this tutorial you will learn the basics to creating a blog and how the required code works. So first is first, lets observe the complete result.
<head><title>My Blog</title>
<script type="text/javascript">
function preview() {
var data=document.getElementById('data').value;
data=data.replace(/</g,"<").replace(/>/g,">");
document.getElementById('previewbox').innerHTML=data;
}
</script></head>
<body bgcolor="#D0D0FF">
<div style="width:500px;">
<?php
$separator ='-------------------------------------------------------------'.
'---------+++++++++++----------============________________---------------------------';
$separator_replacement='-------------------------------------------------------------'.
'-------+++++++++++++----------============_______________---------------------------';
$color=array('#CCCCCC','#DDDDDD');
$data=explode($separator,file_get_contents('data.txt'));
for ($row=1,$id=0;isset($data[$row]);$row++,$id++) {
if ($id==2) { $id=0; }
echo '<div style="width:500px;background-color:'.$color[$id].';">'.$data[$row].'</div>';
}
if ($id==2) { $id=0; }
if (isset($_POST) && !empty($_POST)) {
$post=str_replace($separator,$separator_replacement,htmlentities($_POST['data']));
if ($post!==$data[($row-1)]) {
echo '<div style="width:500px;background-color:'.$color[$id].';">'.$post.'</div>';
$id++;
if ($id==2) { $id=0; }
if (strlen($post)>4) {
file_put_contents('data.txt',$separator.$post,FILE_APPEND);
}
}
}
?><form method="POST" style="margin:0px;padding:0px;">
<div style=" width:500px;background-color:<?php echo $color[$id]; ?>;">
<input type="submit" value="Submit" name="submit"><input type="button" value="Preview" onclick="javascript:preview();"><br>
<textarea name="data" id="data" style="width:500px;height:141px;"></textarea></div>
<div id="previewbox" style="width:500px;"></div>
</form>
</div>
</body>
Also to run this code you simply place that code in a php file and in the same directory/folder create a blank file called "data.txt" (without the quotes)
Contents |
Understanding the code
So now that you have the code, I shall go through it section by section. First off there is the html header as follows:
Part 1
<head><title>My Blog</title>
<script type="text/javascript">
function preview() {
var data=document.getElementById('data').value;
data=data.replace(/</g,"<").replace(/>/g,">");
document.getElementById('previewbox').innerHTML=data;
}
</script></head>
On the first line of this header as everybody should know is the title of the page. So whatever goes between <title> and </title> will appear in the title bar of the browser. Also this same title section will determine what the text in the search engine link will be. Then there is line two to six. In these lines is a JavaScript function which will be used to preview the post later. This piece of JavaScript doesn't need to be in the head but it is neater if the JavaScript code is kept in the head instead of the body. So next is the last line of the above snippet. It basically closes the head and ends the script.
Part 2
<body bgcolor="#D0D0FF">
<div style="width:500px;">
The first line of the above snippet basically opens the body of the html document then gives it a background color. And as most experienced people would know, most html colors have their own color codes although some browsers will accept words as colors. Then on the second line of the above snippet is the opening of a div tag which is there to group all of the items together so things don't display crazy. This is done by setting a boundary with a width of 500 pixels. Alternatively tables can be used but is just as easy to use div fields.
Part 3
<?php
$separator ='-------------------------------------------------------------'.
'---------+++++++++++----------============________________---------------------------';
$separator_replacement='-------------------------------------------------------------'.
'-------+++++++++++++----------============_______________---------------------------';
On the first line of the above snippet is the opening tag for php. Then below that is a variable which is used to separate posts in the text file. Then the $separator_replacement variable is what to replace the occurrences of the $separator variable in the posted text.
Part 4
$color=array('#CCCCCC','#DDDDDD');
$data=explode($separator,file_get_contents('data.txt'));
for ($row=1,$id=0;isset($data[$row]);$row++,$id++) {
if ($id==2) { $id=0; }
echo '<div style="width:500px;background-color:'.$color[$id].';">'.$data[$row].'</div>';
}
The above snippet the array $color is basically the two colors used when displaying the posts. So for each post listed, the script will alternate between those two colors during the loop. Then two lines below that is where php retrieves the posts that have already been made then splits the data where it finds the separator.
Below that is a for loop going through the posts and displaying each one. So the way the for loop statement line works is before the loop it sets $row to 1 and $id to 0. Then at the end of each loop including the last loop the script adds 1 to $row and $id. And the loop will continue to process while $data[$row] is set. Then the line below that is the if statement. This tells php that if id is 2 then make id 0 again. This is because there are only two colors in the $color array. And below that is the display of the post. And below the is the closing of the loop.
Part 5
if ($id==2) { $id=0; }
if (isset($_POST) && !empty($_POST)) {
$post=str_replace($separator,$separator_replacement,htmlentities($_POST['data']));
if ($post!==$data[($row-1)]) {
echo '<div style="width:500px;background-color:'.$color[$id].';">'.$post.'</div>';
$id++;
if ($id==2) { $id=0; }
if (strlen($post)>4) {
file_put_contents('data.txt',$separator.$post,FILE_APPEND);
}
}
}
?>
The above snippet is what actually submits the post the code and displays the most recent post. It is a bit hacky this piece of code because a hacker may think they have posted a string shorter than 5 characters long and it will display after they have posted but it is not submitted into the text file meaning nobody else will view that string smaller than 5 characters long. So in a way it is designed with spam protection. So now that this important section has had it's briefing lets see what it does.
The first line of this snippet is basically a continuation of the for loop in the previous code snippet because the variable $id will be used again so their for it needs to be validated again. Then comes the if statement to check if the user has even posted. At the same time this if statement will filter any empty comments. Then the next line is the retrieval of the comments into a variable called $post. Below that is an if statement checking that the variable $post does not match the previous comment because this could cause double posting when the page is refreshed. If it doesn't match then it will display the comment. That will keep those spammers happy seeing their post displayed. Then below that is the color id being increased. Then there is another if statement inside the previous if statement and this is the real validation the spammers don't see and it checks that there are more than 4 characters in the post. If that passes then the post is submitted to the text file and appends to the end. And as you would imagine, the rest of the code in the snippet after that is just the closing of the previous if statements then the closing of the php code.
Part 6
<form method="POST" style="margin:0px;padding:0px;">
<div style=" width:500px;background-color:<?php echo $color[$id]; ?>;">
<input type="submit" value="Submit" name="submit"><input type="button" value="Preview" onclick="javascript:preview();"><br>
<textarea name="data" id="data" style="width:500px;height:141px;"></textarea></div>
<div id="previewbox" style="width:500px;"></div>
</form>
</div>
</body>
In the above code snippet is the form that allows the user to submit their post. The first line of that snippet is the standard form opening tag with some css to make sure there are no boundaries around the form. On the second line is the opening of a div tag to give the form a background color and a fixed width. Then below that is two buttons. The first button is the submit button then the second button is the preview button which uses the javascript code near the beginning. On the following line is the textarea field which allows the user to type in some text and on the right side of that is the closing of the div tag. Below the textarea line is another div tag which is used for the post preview. This div tag will be given data when the preview button is clicked. And last of all, the bottom three lines are the closing of the remaining tags.
