Web International Awards

payday loan

20

APR 2010 3

Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [part III]

Just in case you're a first time visitor, you can check out the demo of this tutorial and perhaps you should read the first and the second part of the series (which are required to fully understand what we're doing here).

What we've already done

During the first two parts of the tutorial we've coded the layout, styled it, added some basic functionalities with some bits of jQuery (we created an overlay window which we're going to use today). We finished the second part with the login and logout funtionalities which means we still haven't created means to add, edit or delete news. Today we will tackle adding news to our system.

Adding news to the database

As described in our html code during the first article, we've seen that our webform that tackles adding new items to our database contains 3 fields: title, category and body. Title is an empty input field, category is a select field populated with all the categories our webapp has while body is an empty textarea.

Categories may change over time, therefor they are selected upon page loading and added as options to the category select tag we described just above. Basically, our select looks like this:

1
2
3
<select name="formcategory" id="formcategory" size="1">                
    <? list_categories("select-options") ?>
</select>

list_categories() is a simple php function we need to add to our functions.php file which we started in the second article. It's code is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function list_categories($mode)
{
 
	$rows = mysql_query("SELECT name FROM Categories WHERE id>0 ORDER BY name ASC") or die(mysql_error());
 
	if($mode=="select-options")
	{
		$count = 0;
		if(mysql_num_rows($rows))
		{
			while($row = mysql_fetch_row($rows))
			{
				if($count==0) { echo "<option selected=\"selected\" value=\"".$row[0]."\">".$row[0]."</option>"; $count++; }
				else echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
			}
		}
		else echo "<option value=\"none\">none</option>";
	}
}

The reason why that $mode parameter is present is because this function will also be used to list categories in the edit news webform and more. The above code selects all categories within our database and creates option tags from them, with the first option being selected.

Processing our form

The add news form is provided via an overlay. However, the script that processes it is not requested via ajax. The action of the form points directly to the file described just below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?
session_start();
include("includes/functions.php");
if(session_is_registered('logged in key'))
{
	$er = 0;
	if (!isset($_POST['title'])) $er='1';
		else $title = $_POST['title'];
	if (!isset($_POST['formcategory'])) $er='1';
		else $formcategory = $_POST['formcategory'];
	if (!isset($_POST['body'])) $er='1';
		else $body = $_POST['body'];
	if($er==1)
	{
		header("location: index.php?error=Please input username and password");
	}
	else
	{
		$title = strip_all($title);
		$formcategory = strip_all($formcategory);
		$body = strip_all($body);
		$username = $_SESSION['username'];
		$query = "INSERT %20 INTO %20 News %20 VALUES ( '".$title."', '".$body."', '".$username."', NOW( ) , NOW( ) , '".$formcategory."' )";
		@mysql_query($query) or die(mysql_query());
		header("location: index.php?msg=News added to the system.");
	}
}
else header("location: index.php?error=You must be logged in to access this feature.");
?>

addnews.php explained

  • Line 3: We include the file that contains the functions we use throughout the webapp
  • Lines 4 & 28: We check if the user is logged in. If the user is logged in, he can access the page, otherwise he's redirected to the index page and an error message is displayed
  • Lines 6 to 12: We get the input data from the add news form submitted by the user while checking for errors and unauthorized usage
  • Line 13: If we found data or form submission errors, redirect user to homepage and display error message
  • Lines 19 to 25: We strip all input data to remove any unaccepted characters. We then find out the username of the author, insert the news into the database and redirect the user to the homepage while displaying a success message
  • Line 23: For some reason WordPress had some issues with me posting the full SQL query. Please remove the %20 from your source when building the app.

What about strip_all(string) ?

strip_all(string) function is used to strip input sent to the database for minimum protection against injection attacks. This function is also included in the functions.php file.

1
2
3
4
5
6
7
8
function strip_all($string)                                            
{
	$string = htmlentities($string);
	$string = strip_tags($string);
	$string = stripslashes($string);
	$string = addslashes($string);
	return $string;
}

That's it!

To wrap up today's post, we've just finished our script that ads new items to our news database. The next part of this tutorial will tackle deleting news items. You can stay updated to new content via our RSS feed or by email.

Further reading

Published on Tuesday, April 20th, 2010 at 11:47 pm in tutorials.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. part V says: May 11th, 2010 at 10:04 am

    […] form is the code inside the select tag. I've started coding that function and presented it in the third part of the […]

  2. tutorial end says: June 8th, 2010 at 3:51 pm

    […] are listed. This is achieved by using a php function: list_categories() which was presented in the third part of the tutorial. However, during that part the function returned option values for select tags. The updated […]

  3. mwasamani says: July 27th, 2012 at 1:49 pm

    following it up, its a very good development and a nice design.Best for those who love computers n such stuff.
    thank you n be blessed.





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.