Web International Awards

payday loan

11

MAY 2010 2

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

Tutorial app preview

About a month ago I started a series of tutorials on building a live blogging system in php. In case you missed it, you should definitely start with the first part of the series, or at least check out the demo.

Until now I've covered building the database, login functionalities for administrators, adding and deleting news from the database. Today I'll cover editing existing news.

The edit form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="editform hidden">
	<form action="editnews.php" method="post" accept-charset="utf-8" id="form-overlay" class="insertcontent">
		<fieldset>
 
			<label for="edittitle">Title : </label>
			<input type="text" name="edittitle" value="" id="edittitle" class="edittitle all-rounded" />
			<label for="editformcategory">Category :</label>
			<select name="editformcategory" id="editformcategory" size="1" class="editcategory">
				<option selected="selected" value="Economics">Economics</option><option value="Education">Education</option><option value="Health">Health</option><option value="IT">IT</option><option value="Politics">Politics</option><option value="Weather">Weather</option>					</select>
 
			<label for="editbody">Body text :</label>
			<textarea name="editbody" rows="8" cols="40" class="editbody all-rounded"></textarea>
			<input type="hidden" name="editid" value="" id="editid" class="editid hidden" />
			<input type="submit" name="submit" value="Edit news" id="submit" class="submit all-rounded" />
		</fieldset>
	</form>
</div>

I coded the edit form in the first article. However, this form needs be loaded with the proper content. If it shows up empty it isn't an edit form anymore. That's done by editing the html code and inserting some php snippets as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="editform hidden">
	<form action="editnews.php" method="post" accept-charset="utf-8" id="form-overlay" class="insertcontent">
		<fieldset>
			<label for="edittitle">Title : </label>
			<input type="text" name="edittitle" value="" id="edittitle" class="edittitle all-rounded" />
			<label for="editformcategory">Category :</label>
			<select name="editformcategory" id="editformcategory" size="1" class="editcategory">
				<? list_categories("select-options") ?>
			</select>
			<label for="editbody">Body text :</label>
			<textarea name="editbody" rows="8" cols="40" class="editbody all-rounded"></textarea>
			<input type="hidden" name="editid" value="" id="editid" class="editid hidden" />
			<input type="submit" name="submit" value="Edit news" id="submit" class="submit all-rounded" />
		</fieldset>
	</form>
</div>

The only part that's changed from the raw html form is the code inside the select tag. I've started coding that function and presented it in the third part of the tutorial.

However, only with the php code above, I've fixed only the category issue. The rest of the form elements are still empty. Populating them with valid data is done via jQuery. Data is read directly from the DOM and appended accordingly into the form. I've started the overlay function in the second part of the series, and now I am altering that function to add the required functionalities. Just after the 11th line (var rel = $(this).attr('rel');) in the overlay's function code we add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if(rel=='editform')
{
	var id = $(this).attr('title');
 
	var article = $(this).parent().parent();			
	var details = article.children('details');
	var category = details.children('span.cat').html();
	var body = article.children('p').html();
	var title = article.children('h1').text();
}
 
var modal_content = $('.'+rel).html();
$('#overlay-content div').html(modal_content);
 
$('input.editid').val(id);
$('input.edittitle').val(title);
$('textarea.editbody').text(body);

By adding the above code, when someone clicks the edit link of a news item, an overlay pops out displaying the contents of the news which are loaded from the DOM itself (directly from the article tags). Users can then edit the content and save it.

editnews.php

We need to somehow process the edit request and we do that with a script similar to the addnews.php file I talked about in part three of the series.

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
30
31
32
<?
session_start();
include("includes/functions.php");
if(session_is_registered('logged in key'))
{
	$er = 0;
	if (!isset($_POST['edittitle'])) $er='1';
		else $title = $_POST['edittitle'];
	if (!isset($_POST['editformcategory'])) $er='1';
		else $formcategory = $_POST['editformcategory'];
	if (!isset($_POST['editbody'])) $er='1';
		else $body = $_POST['editbody'];
	if (!isset($_POST['editid'])) $er='1';
		else $id = $_POST['editid'];
	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 = "UPDATE News SET `body` = '$body', `title` = '$title', `category` = '$formcategory' WHERE `id`='$id';";
		echo $query;
		@mysql_query($query) or die(mysql_query());
		header("location: index.php?msg=News edited successfully");
	}
}
else header("location: index.php?error=You must be logged in to access this feature.");
?>

The above code first checks for administrator status, then form data input errors. If everything is in order the news is edited and changes saved to the database.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Published on Tuesday, May 11th, 2010 at 10:00 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. Leotrin says: May 11th, 2010 at 11:11 pm

    Hello! Thanks for the tutorial, it’s very useful!

    I’m new with php and if you can publish the example to download here it’s going to help me a lot!
    I’m waiting for answer.

  2. Bogdan Pop says: May 13th, 2010 at 3:21 pm

    Hi Leotrin,

    tutorial source code download will be available when the entire series will be complete, which means in a couple of weeks.





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.