Web International Awards

payday loan

27

APR 2010 2

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

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, the second and the third part of the series (which are required to fully understand what we're doing here).

What we've already done

During the first three parts of the tutorial we've coded the layout, styled it, added some basic functionalities with some bits of jQuery, we added login and logout funtionalities and an add news method. Today we will tackle deleting news from our system.

Deleting news from the database

If we want to delete news from the database, we need controls to point to methods that handle the task. During the first part of the tutorial we coded the structure of the article. Now, we will add one extra line to it.

1
2
3
4
5
6
<article>
	<span class="controls"><a href="deletenews.php?id=114" target="_self" class="delete"></a><a href="" name="modal" rel="editform" title="114" target="_self" class="edit"></a></span>
	<h1>Back to tutorial</h1>
	<details>Posted by <span>news</span> in <span class="cat">Economics</span> on <span>2010-04-12</span> at <span>07:34:13</span>.</details>
	<p><a href="http://www.webia.info/articles/tutorials/building-a-live-news-blogging-system-in-php-spiced-with-html5-css3-and-jquery-part-i/">start of tutorial</a></p>
</article>

The only line we've added is line 2. This line contains two links. One to a delete method we will implement today, and one link that will be handled by the overlay, just like the login form we coded during the second part of the tutorial. The controls span we added is styled via CSS. We've seen that also in the first article. What needs to be reminded is that the span is hidden by default via display:none;. I only want to show these controls when admins hover an article, and I am doing that with the following CSS code.

1
2
article span.controls	{ display:none; width:32px; height:64px; }
article:hover span.controls { display:block; float:right; clear:right; }

As you can see, when admins hover an article, the controls pop in the right margin of the article. You could also use a jQuery technique as described in this article on Improving UIs by hiding unused elements.

deletenews.php file

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
<?
session_start();
include("includes/functions.php");
if(session_is_registered('logged in key'))
{
	$er = 0;
	if (!isset($_REQUEST['id'])) $er='1';
		else $id = $_REQUEST['id'];
	if($er==1)
	{
		header("location: index.php?error=Please input username and password");
	}
	else
	{
		if(is_numeric($id))
		{
			@mysql_query("DEL FROM News WHERE id='$id';") or die(mysql_query());
			header("location: index.php?msg=News deleted from the system.");	
		}
		else
		{
			header("location: index.php?error=Hacking attempt.");
		}
	}
}
else header("location: index.php?error=You must be logged in to access this feature.");
?>

Please change DEL on line 17 with DELETE. Somehow I cannot save the article because wordpress thinks is a injection attack. Haven't found a solution to the problem yet.

Back to our topic, the code above checks if admin is logged in and displays a message otherwise (lines 4 and 26), then checks for form submission errors (lines 6 to 12). We then check to see if the ID of the news to be deleted is indeed numeric and display a message if the ID is not numeric (lines 15 and 22). This simple test will ensure we have no inject attacks against our database.

Finally, lines 17 and 18 handle the deletion of the news from our database, and redirect the user to the homepage of our app while displaying a success message.

You can stay updated to new content via our RSS feed or by email.

Further reading

Published on Tuesday, April 27th, 2010 at 11:38 am 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. Qaysar says: February 1st, 2011 at 4:17 pm

    Do you have the source code for this brilliant tutorial?

    Thank you

  2. Bogdan Pop says: February 2nd, 2011 at 11:51 am

    Hi Qaysar,

    Yes, the entire source code is available for download in the last part of the tutorial.

    In case you don’t want to go through all the rest of the tutorial, you can download the source codes directly from here.

    Cheers!





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.