We've published a couple of articles on sliders in the past. We first had a tutorial on building a XML powered slider, then we released the source codes and demo for the xml slider and we finally released the latest revision as the xml slider plugin. Today we're going back to basics, as I am going to show you how to make a rather simple, lightweight slider in no time. Here's a demo of what we're building today.

HTML structure

This structure will retain and contain the actual thumbs which will be displayed as the slider's content. As you'll probably figure out, I am using the 960gs to keep the structural integrity as simple as possible.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="wrapper" class="container_12">
 
	<div id="featured-wrapper" class="grid_12 all-rounded">
		<div class="arrowleft">&nbsp;</div>
		<div id="featured-thumb" class="grid_12 alpha omega all-rounded">	
			<ul id="featured-thumb-list">
 
			</ul>	
		</div>
		<div class="arrowright">&nbsp;</div>
		<div class="clear">&nbsp;</div>
	</div>
</div>

The wrapper is used to hold the entire contents of the page in the center of it. featured-wrapper will hold the next, previous arrows as well as the featured-thumb div that wraps the thumbnail list. featured-thumb will have overflow set to hidden so that only a couple of thumbs are shown at a time. The unordered list will be shifting left to right when users click the arrows to reveal other caricatures. Before we get there, here's the code that is used to display the thumbs. The following piece of code will be repeated inside the unordered list depending on how many thumbs we want to display.

1
2
3
4
5
6

<li class="grid_2">
	<a href="#" class="all-rounded">
		<img src="thumb_featured.png" width="120" height="150" alt="caption title" class="all-rounded" />
		caption title
	</a>
</li>

Styling the slider with a sprinkle of css

1
2
3
4
5
6
7

#featured-wrapper { padding:0px; margin-top:35px; margin-bottom:35px; height:207px; }
#featured-wrapper .arrowleft { position:absolute; display:block; width:49px; height:61px; float:left; margin-left:-25px; margin-top:55px; z-index:100; background:url('arrow_left.png') no-repeat; }
#featured-wrapper .arrowright { position:relative; display:block; width:49px; height:61px; float:right; margin-right:-27px; margin-top:55px; z-index:100; background:url('arrow_right.png') no-repeat; }
#featured-thumb	{ position:absolute; background-color:#FFF; border:1px solid #CCC; text-align:center; z-index:50; padding:15px 0px; overflow:hidden; }
#featured-thumb-list { width:20000px; float:left; margin:0px; padding:0px; }
#featured-thumb-list li a { text-decoration:none; }
#featured-thumb-list li img { background-color:#F1F1F1; border:1px solid #CCC; margin-bottom:10px; }

I left out the code for the grid system. What this piece of css does is it sets the width and heigh of the div that wraps the slider controls and content, it positions the arrows and displays their background images (I used background images for the arrow design). It also sets the structure and overflow of the featured-thumb div that wraps the list of thumbnails. Finally, it applies some basic styles to the thumbnail placeholder and the links used for each thumbnail.

jQuery functionality

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

function featured_thumb(maxwidth)
{	// featured thumb functionality
	if((typeof maxwidth=='undefined')||(maxwidth==null)){maxwidth=900;}
	$('.arrowright').live('click',function(){
		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))<=-maxwidth)
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '-'+maxwidth
			  }, 500, function() {
			    // Animation complete.
			  });
		}
		else
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '-=160'
			  }, 500, function() {
			    // Animation complete.
			  });	
		}
	});
	$('.arrowleft').live('click',function(){
		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))>=0)
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '0'
			  }, 500, function() {
			    // Animation complete.
			  });
		}
		else
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '+=160'
			  }, 500, function() {
			    // Animation complete.
			  });	
		}
	});
	// end featured thumb functionality
}
 
jQuery(document).ready(function($)
{
	featured_thumb(850);
});

In the above javascript snippet we define a function which adds the required functionality to the slider. Its sole parameter is the maxwidth variable, which is the maximum width of the margin-left property which is modified to move the thumbnail inside the placeholder. So if the placeholder is 800 px in width and the maxwidth variable set to 850, the thumbs will move around in a 1650 box. There are two onclick events (lines 4 and 24) which basically trigger the same functionality that is applied in opposite directions (left and right). To move left, we add pixels to left margin. To move right, we subtract from the left margin.

Because the margin-left attribute is defined as X px;, where X is a number, we parse this value into a float (to allow negative values also), then we round the number (to prevent anything bad going on) and compare the value with 0 or maxwidth depending on the direction we're headed to. If we're going left and by clicking the left arrow the margin would become greater than 0, we have reached the end of the slider and we therefor stop the animation from sliding the content even further. If you try many repeated clicks you'll this code will even perform an effect similar to a bouncing effect. Similarly, if moving the content to the right, the margin is compared to negative maxwidth (<=-maxwidth). If we reach this threshold, once again we're at the end of the thumbnails box and the animation needs to be stopped to prevent moving the thumbnails further.

To conclude, I guess that in order to reduce the size of the code one can write an extra function for the onclick behavior and call it when needed instead of copy pasting it into each of the events and doing the minor customization I've done.

1. How can I keep Passenger Standalone up even after a server restart?
2. How do I run health checks on Passenger Standalone?
3. How do I automatically restart and spawn a rails app if it crashes under Passenger Standalone?

There are a number of fixes for the above issues, but there isn't a simple one to fix all in one. Or at least I haven't come across any of them. One fix for the first problem was placing a script in /etc/init so that passenger would start when the server is rebooted. This however didn't fix the other two issues as it would only start Passenger when the entire server would start, meaning Passenger wouldn't be started if for example the server ran out of memory, something crashed the rails apps etc.

The best fix I could think of was creating a script that checks whether Passenger standalone is running every minute and if it isn't, then start it. This fix would work for all scenarios: server reboot, application crash. Moreover, as the script would run as a cronjob every minute, it would also perform a health check on all running apps. Here's the code for the script.

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

#!/bin/bash
 
/usr/sbin/lsof -i :13007 > /home/{USER}/rails_apps/{APP1}test
 
if [ ! -s /home/{USER}/rails_apps/{APP1}test ];
  then
    # passenger down
    date
    . "/usr/local/rvm/scripts/rvm"
    rvm use 1.9.2
    cd /home/{USER}/rails_apps/{APP1}/
    passenger start -a 127.0.0.1 -p 13007 -d -e production --user {USER}
fi
 
/usr/sbin/lsof -i :13008 > /home/{USER}/rails_apps/{APP2}test
 
if [ ! -s /home/{USER}/rails_apps/{APP2}test ];
  then
    # passenger down
    date
    . "/usr/local/rvm/scripts/rvm"
    rvm use 1.9.2
    cd /home/{USER}/rails_apps/{APP2}/
    passenger start -a 127.0.0.1 -p 13008 -d -e production --user {USER}
fi

The above example is for a server running two apps on Passenger Standalone behind apache on ports 13007 and 13008. Replace {USER} , {APP1}, {APP2} with your own configuration. Once you've written your file, save it to /home/{USER}/rails_apps/health_check.sh and then add a cronjob to run it every minute, 5 minutes or whenever you want.

The code above checks whether there are any processes listening on the ports defined for each app. If there is a single process, the output will be written to a file which will have a file size greater than 0. If there are no processes listening on that port, the file size will be 0. The next step is to check the file size. If it is 0, our app is not running and we can start it. Simple as that. And it works for reboots, crashes, integrity and health checks and more.

If you're wondering what's with the date command, here's the answer. In my cronjob I've set the output of the command to /home/{USER}/rails_apps/health_check.log. If any app is started (meaning it was down for some reason) I will have the info and the timestamp in the log. I can then look throughout the apache / nginx / rails logs at that specific timestamp and identify the problem that caused the app to crash, if there were any bugs.

We've recently had to tackle a issue with transactional emails in Magento for a client of ours. Magento has a nice way you can configure transactional emails in admin and preview them before using them in production. However, every once in a while things start to go really wrong and the following error is well known throughout the Magento community:

If you look inside the code for items.phtml, on that specific line you'll find a for statement trying to loop through the items in an object that can be nil and it isn't tested for nil. I assume Magento's developers really considered that there can't be a single case when that object can be nil. Unfortunately it can and unfortunately it will throw nasty errors in the view.

Attempt 1: New Order Confirmation Template settings

The error may be triggered because you've missed to assign the (new) transactional email to the order in Magento's Admin section (Admin >> System >> Configuration >> Sales >> Sales Emails >> New Order Confirmation Template). If you get to Sales Emails tab in Magento's admin, you'll find a drop down for New Order Confirmation Template. Select the desired option then go to cache management and clear your cache. After you do these steps the previews should work just fine.

But what do you do if they don't work just fine?

Attempt 2: copy original files from frontend

It may be the case that the files required to process the preview got corrupted or messed up somehow. A fix for this issue would be to back up all the files that you have in your Magento installation {root}/app/design/adminhtml/default/default/template/email/order/ . Once you've backed them up copy the contents of /home/{user_account}/public_html/app/design/frontend/default/default/template/email/order to /home/{user_account}/public_html/app/design/adminhtml/default/default/template/email/order and things should resume their normal behaviour. Perhaps you should once again clear your cache.

Still not working?

Magento requires a lot of resources and some installations may be using Memcached. I even recommend you start using it if you don't. But when you're debugging Memcached may make you really unhappy if you forget about it. You should check if you're using Memcached or not, and if yes, you should log in to your server via ssh, then flush Memcached and voila, the transactional emails preview will work like a glove and the ugly "PHP Fatal error: Call to a member function getAllItems() on a non-object in …template/email/order/items.phtml on line 38 " error be gone.

In order to flush Memcached you should telnet to the service. Usually it's easily done by running telnet localhost 11211 and then flush_all. Once you do this you can quit telnet or just before that check your Memcached status using stats

This article is directed to those of you who use on a daily basis any FTP program to transfer files back and forth between computers, development and production environments and more. Doing it via FTP comes handy compared to file uploading plugin in CPanel or Plesk for example, but when it compares to rsync or unison, FTP seems so old and time consuming.

Not familiar with rsync or unison?

Rsync is an open source utility that provides fast incremental file transfer. You can easily use it to backup your disk, upload files onto a test server while coding them locally. There are some great things you can do with this tool:

1. Initiate synchronization between two folders (and their sub-structure). These folders could be a local folder of a webapp and its public server brother. It may very well be your root folder on your pc and the root folder of an external backup disk.
2. Start modifying files in any of the two folders, then sync the other one. This can help you easily write your code locally and deploying it on the server, or backing up vital data onto an external harddisk.
3. Restore files you've deleted or ill modified from the secondary folder (backup).

And the list doesn't stop there. The possibilities of rsync are great...up to a point. Rsync doesn't do bi-directional transfer unfortunately and this has become, to me at least, a major drawback. You'd jump to say that I've stated the exact opposite just above. Yes, you can move files both ways with rsync, but in the case you've modified some in folder1 and some files in folder2, you won't be able to sync and keep all modifications in place by using merging. You'll have to choose which modifications to let go (which is unlikely to be the case) or do the sync yourself. But then, what would be the point of using rsync as it doesn't do much good?

Fortunately, there's a better tool called Unison which does mainly the same things as rsync, but is capable of synchronizing data both ways. If you modified files in both folders, you'll keep all modifications as Unison will transfer from one point to another the most recent files. If the same file has been modified on both ends, Unison will detect the conflict and ask you how you want to proceed. Now this is a really great and powerful feature.

Now why would you drop FTP in favor of these two?

Imagine you've got a project that has more than 100 folders, more than 1000 files, and after a bugfix you've modified files in 10 directories. The average user that hasn't any system setup or repository would write down modified files, and then browse the hard drive and the FTP account and copy/paste each file one by one, or in lucky cases, multiple at a time.

Anyway, you'd have to be really lucky to do all files in one shot. With rsync or Unison, you'd do them all in one shot, without to much worries. Moreover, if you find yourself out of the office and need to do a quick and simple fix, you can even do it directly on the server and then sync it back to your local folder. Wouldn't this be great?

Check out some more information about rsync or Unison.

Last week I started building a live news blogging system using JSP. This is a follow up tutorial I've decided to do after seeing the success of the previous series, which described how to build the same web application using php as backend.

Adding news to the database

In today's part I am going to code the JSP files needed to add content to the database. The same functionality has already been developed using PHP in the third part of the original tutorial series located over here. The PHP version contained a function that was used to generate a select field into the add news form which would contain all available news categories. Differently, I've chosen not to include such a feature in a JSP function. Instead, I've added it directly into the HTML template. Not so fancy, but it works.

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

<form action="addnews.jsp" method="post" accept-charset="utf-8" id="form-overlay">
	<fieldset>
		<label for="title">Title : </label>
		<input type="text" name="title" value="" id="title" class="all-rounded"/>
		<label for="formcategory">Category :</label>
		<select name="formcategory" id="formcategory" length="1">
			<% 						
			st = new StringTokenizer(categories,"-");
			query = "SELECT name FROM Categories WHERE id>0 ORDER BY name ASC";
			rs = statement.executeQuery(query);
			count = 0;
				while (rs.next()) 
				{
					count++;
					String name = rs.getString("name");
					if(count==1) { %> <option selected="selected" value="<%=name%>"><%=name%></option> <% }
					else { %> <option value="<%=name%>"><%=name%></option> <% }
				}
			if(count==0) { %> <option value="none">none</option> <% }
			%>
		</select>
		<label for="body">Body text :</label>
		<textarea name="body" rows="8" cols="40" class="all-rounded"></textarea>
		<input type="submit" name="submit" value="Add news" id="submit" class="submit all-rounded" />
	</fieldset>
</form>

As you've seen in the previous part, the code on lines 8 to 10 is used to create a SQL query and run it. Lines 11/19 check if the SQL query returned an empty result. If yes, a default news category is created as the unique option; current case: none. If there's at least one category in the database, the code between line 12 and 17 gets the names of each category and adds each of them to the select field. The first category that's found is also pre-selected.

Processing the add news form

The form used to insert news in the database needs to be processed. The script is pretty straightforward, especially because I've already shown basic SQL queries in JSP just above ( or in the previous article in the series ). The first line of the script that processes the form is the usual line that imports all required libraries. All the following lines up to line 18 are used to create and instantiate the resources required to perform different operations on the mySQL database. Here's the full code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<%@ page import="java.sql.*" import="java.util.*" session="true" import="Javax.servlet.http.*" import="java.security.*" %>
 
<%
 
	String database = "lab8";
	String user = "root";
	String pass = "thebeastlocal";
	String table = "News";
 
	String connectionURL = "jdbc:mysql://localhost:3306/"+database+"?user="+user+";password="+pass;
	Connection connection = null;
	Statement statement = null;
	Statement update = null;
	ResultSet rs = null;
 
	Class.forName("com.mysql.jdbc.Driver").newInstance();
	connection = DriverManager.getConnection(connectionURL,user,pass);
	statement = connection.createStatement();
 
	if(session.getAttribute("loggedin")!=null)
	{
		String title = "";
		String formcategory = "";
		String body = "";
		int error = 0;
 
		if(request.getParameter("title")!=null) title = request.getParameter("title");
		else error = 1;
		if(request.getParameter("formcategory")!=null) formcategory = request.getParameter("formcategory");
		else error = 1;
		if(request.getParameter("body")!=null) body = request.getParameter("body");
		else error = 1;
 
		if(error==1)
		{
			response.sendRedirect("index.jsp?error=Please input information in all fields");
		}
		else
		{
			String username = (String) session.getAttribute("username");
			try
			{
				String query = "INSERT // INTO News(title,body,owner,publishing_date,publishing_time,category) VALUES('"+title+"','"+body+"','"+username+"',NOW(),NOW(),'"+formcategory+"')";
				// remove // between INSERT and INTO in above line
				statement.executeUpdate(query);				
			}
			catch (Exception e)
			{
				%><%=e%><%
			}
			response.sendRedirect("index.jsp?msg=News added to the system.");
		}
	}
	else response.sendRedirect("index.jsp?error=You must be logged in to access this feature.");
%>

Lines 20 and 54 in the above code check if the user trying to add a news to the database is logged in, as only logged in users are allowed to add items to the database. Lines 22 to 32 are used to initialize the variables which retain information users have inserted into the form fields on the previous page. On lines 34/36 errors are checked, and if any errors are found the users are redirected to the homepage of the web app and error messages are displayed. The code on line 40 gets the username of the person trying to add a news to the database as each news has an author and we need to know the info before inserting new items in the database. The try catch block between lines 41 and 50 is used to add the news to the database, or if any exceptions occur, catch and display them. If everything goes as planned the code on line 51 redirects users to the homepage and triggers a success message.

That's all it takes to nicely add information to a database using Java Server Pages. If you enjoyed the article, you can stay updated to new content via our RSS feed or by email.

About 5 months ago I started a series of tutorials which described the process of building a live news blogging system in php. When the series ended, I promised that another series will follow and will describe the process of building the same web app using JSP. This article is the first of its series, and contains the introductory part of what's needed in this tutorial series, as well as some basic JSP code.

First of all, please read the first part of the original series here as it describes and shows the source codes for the user interface of the web application, namely HTML5, CSS and some jQuery.

You should also check out the second part of the original tutorial here, as this part contains the database model and some more jQuery. There's also some bits of PHP, but those aren't mandatory for today's article.

login.jsp page

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<%@ page import="java.sql.*" import="java.util.*" session="true" import="Javax.servlet.http.*" import="java.security.*" %>
 
<%
 
	String database = "lab8";
	String user = "user here";
	String pass = "pass here";
	String table = "Users";
 
	String connectionURL = "jdbc:mysql://localhost:3306/"+database+"?user="+user+";password="+pass;
	Connection connection = null;
	Statement statement = null;
	Statement update = null;
	ResultSet rs = null;
 
	Class.forName("com.mysql.jdbc.Driver").newInstance();
	connection = DriverManager.getConnection(connectionURL,user,pass);
	statement = connection.createStatement();
 
	String username = "";
	String password = "";
	int error = 0;
	if(request.getParameter("username")!=null) username = request.getParameter("username");
	else error = 1;
	if(request.getParameter("password")!=null) password = request.getParameter("password");
	else error = 1;
	if(error==1)
	{
		response.sendRedirect("index.jsp?error=Please input username and password");
	}
	else
	{
			MessageDigest mdAlgorithm = MessageDigest.getInstance("MD5");
			mdAlgorithm.update(password.getBytes());
 
			byte[] digest = mdAlgorithm.digest();
			StringBuffer hexString = new StringBuffer();
 
			for (int i = 0; i < digest.length; i++) 
			{
			    password = Integer.toHexString(0xFF & digest[i]);
 
			    if (password.length() < 2) 
				{
			        password = "0" + password;
			    }
 
			    hexString.append(password);
			}
 
			password = hexString.toString();
			String query = "SELECT * FROM Users WHERE username='"+username+"' AND password='"+password+"'";
			rs = statement.executeQuery(query);
			if(rs.next())
			{
				session.setAttribute("loggedin","1");
				session.setAttribute("username",username);
 
				response.sendRedirect("index.jsp?msg=Logged in succesfully.");
			}
			else 
			{
				response.sendRedirect("index.jsp?error=Invalid login data.");
			}
	}
%>

The first line of the code above contains instructions to include different libraries that will be used throughout the entire jsp file. The following four lines of code are in fact the variables that will be used to store database connection settings. In the next set of lines we create the datatypes that we will use to create an sql connection, perform sql queries and handle the results returned by the queries. On lines 16 to 18 we instantiate the mysql driver and connect to the database.

The instructions between lines 20 and 30 test if the visitor has inputed his username and password information in the form that send him to the login page. If the user's hasn't filled in required information, the request is denied. Lines 33 to 50 are used to encrypt the password the user typed in the login form. Passwords in the database are encrypted to ensure that, even if third parties gain access to the database, the passwords aren't exposed.

The following two lines make an SQL query to check if the user credentials are valid. If they are, lines 56 to 59 are used to create required login sessions and redirect the user to the homepage, while the code on line 63 redirects the user to the homepage after an invalid login.

logout.jsp

The logout process is much more simple, and the following code snippet does the trick. This snippet also contains the imports found in the login.jsp file, one line of code that destroys the session and one that redirects the user to the homepage.

1
2
3
4
5
6

<%@ page import="java.sql.*" import="java.util.*" session="true" import="Javax.servlet.http.*" import="java.security.*" %>
 
<%
	session.removeAttribute("loggedin");
	response.sendRedirect("index.jsp?msg=Successfully logged out");
%>

While the php application also contained a functions.php file, this does not. Having that said, this is the end of the first part of the tutorial. You can stay updated to new content via our RSS feed or by email.

About a month ago the huge tutorial on building a live news blogging system was completed. Today I am releasing the source codes of the tutorial so that you can finally play with the web application however you like.

Demo

You can check out the demo part of the tutorial before you download the source code. Furthermore, a demo of the application is available over here.

Source code

The full source code of the tutorial is available for download over here.

If you liked this tutorial series, stay updated to new content via our RSS feed or by email, because a new series will start soon. This new series will be around coding the same webapp using JSP on Tomcat.

Finally, the last part of the tutorial you have all been waiting for. Until now I've covered everything that deals with databases and the CRUD functionalities the system has. However, I haven't tackled the primary view of the app, the homepage, which automatically updates news as they are added in the database without requiring anything from the end user. To bad I didn't finish the tutorial earlier; maybe some great online newspapers would have used it during yesterday's keynote address at WWDC.

HTML5 modifications, integration with php

In case you read all the previous parts of the tutorial, you know I used HTML5 to structure the layout of the app. While implementing some of the functionalities, small upgrades were required. I am going to start with the head of the document. There are two stylesheets added. One is for general styles, while the second one is used to style the datepicker used in the app and is the style that comes with jQuery's datepicker plugin. Having that said, you can see there's also the .js script for it and for jQuery as well. date.js is Jörn Zaefferer's and Brandon Aaron's date prototype extensions I've used in the app. The sprinkle.js file is where all the gizmoz performed by the app are stored.

1
2
3
4
5
6
7
8
9
10

<head>
	<title>Live News System</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="css/datepicker.css" type="text/css" media="screen" title="no title" charset="utf-8">
 
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/date.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/datepicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/sprinkle.js" type="text/javascript" charset="utf-8"></script>	
</head>

Moving on to the body of the site the first items contained in the body are hidden to public view. It's a small php script that includes the functions file and calls for the initiateLastID() function. This function is newly added, and its code is provided just below.

1
2
3
4
5
6
7
8
9

<body>
 
	<? include("includes/functions.php");
	   initiateLastID(); 
	?>
 
	<header class="top-rounded">
		Live News System <!-- The title of our app -->         
	</header>

1
2
3
4
5
6
7
8
9
10
11
12

function initiateLastID()
{
	if(!session_is_registered('lastID'))
	{ 
		// no previous call
		session_register('lastID');
		$query = "SELECT id FROM News WHERE id>0 ORDER BY id DESC LIMIT 1";
		$data = mysql_query($query) or die(mysql_error());
		$_SESSION['lastID'] = $data['id'];
		$lastID = $data['id'];
	}
}

What this function does is it creates a php session that contains the ID of the last news item added to the database. This session will be used to track new news added in the database while the user is on the homepage. This is a key variable in achieving a functionality similar to Twitter's new X items in search page.

Next, just after the details tag in the header of the page, the one which stores and displays information regarding selected filters, we add some more php code. The code is shown below and its purpose is to catch error and notification messages directly from the URL and display them nicely inside the webapp's UI.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?
$msg = $error = "";
$msg=$_REQUEST['msg'];
$error=$_REQUEST['error'];
if($msg!="")
{
	?>
	<article class="no-hover message display">
		<h1><?=$msg?></h1>
	</article>
	<?
}
if($error!="")
{
	?>
	<article class="no-hover error display">                      
		<h1><?=$error?></h1>
	</article>
	<?
}
list_news();
?>

list_news() is a bit complex, and will be presented in just a few minutes.

In the right sidebar we have the start date and end date input fields. We need to store the information within these fields as users could accidentally click the refresh button of the web browser and loose data in those input fields. We protect the information in the fields by storing it using php sessions. The modified code for the two inputs is the following one:

1
2
3
4
5
6

<fieldset>
	<label for="start_date">Start date: </label>
	<input type="text" name="start_date" value="<?=$_SESSION['start']?>" id="start_date" class="date-pick">
	<label for="end_date">End date: </label>
	<input type="text" name="end_date" value="<?=$_SESSION['end']?>" id="end_date" class="date-pick">
</fieldset>

Just below the two date inputs the categories of the webapp 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 function is shown below.

1
2
3
4

<ul><!-- This UL will hold our categories -->
	<li class="title">Browse by category</li>                     
	<? list_categories("") ?>
</ul>

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

function list_categories($mode)
{
	if(session_is_registered('categories')) $categories = $_SESSION['categories'];
 
	$rows = mysql_query("SELECT name FROM Categories WHERE id>0 ORDER BY name ASC") or die(mysql_error());
	if($mode=="")
	{
		if(mysql_num_rows($rows))
		{
			while($row = mysql_fetch_row($rows))
			{
				if(session_is_registered('categories')) 
					{
						if(sizeof($categories)>0)
						{
							if(array_key_exists($row[0],$categories)) echo "<li><a class=\"selected-aside\">".$row[0]."</a></li>";
								else echo "<li><a>".$row[0]."</a></li>";
						}
						else echo "<li><a>".$row[0]."</a></li>";
					}
				else echo "<li><a>".$row[0]."</a></li>";
			}
		}
		else echo "<li>no categories</li>";
	}
	else if($mode=="select-options")
	{
	// code in part three of the tutorial
	}
}

What the function does is find out which categories are already selected by the user, then display them as list items. If some of them are selected, the selected-aside class is appended to the li tag. Moreover, the $mode param used in this function determines if the function should return li tags or option tags.

The footer has also been updated and now tracks user login and displays information accordingly.

1
2
3

<footer>
	<? if(!session_is_registered('loggedin')) { ?><a rel="login" name="modal">Admin login</a> <? } else { ?>You are logged in. You can <A  href="#addnews" rel="addnews" name="modal">add news</a> or <a href="logout.php" target="_self">logout</a><? } ?>
</footer>

With this we've finished the HTML structure and content of the index page. Before moving on to the jQuery code which is used to add all the awesome functionalities let me remind you what the structure of an article is (referring to HTML article tag). Just below are presented two different structures, one used for showcasing news to end users while the second is used to display the news to admins that are logged in.

1
2
3
4
5

<article>	
	<h1>news title</h1>
	<details>Posted by <span>user</span> in <span class="cat">category</span> on <span>date</span> at <span>time</span>.</details>
	<p>content of news</p>
</article>

1
2
3
4
5
6

<article>
	<span class="controls"><a href="deletenews.php?id=ID" target="_self" class="delete"></a><a href="" name="modal" rel="editform" title="ID" target="_self" class="edit"></a></span>	
	<h1>news title</h1>
	<details>Posted by <span>user</span> in <span class="cat">category</span> on <span>date</span> at <span>time</span>.</details>
	<p>content of news</p>
</article>

As you can see the code used for admins contains an extra span with links to the edit and delete buttons for the news item.

list_news()

Based on the average complexity of the functions presented up to this point, this function that spans across 100 lines of code is huge. Check out the code, try to understand it. Explanations will follow just after it.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

function list_news()
{
	$categories_query = "";
	if(session_is_registered('categories'))
		{ // we have some registered categories, so our query will not select all news
			if(sizeof($_SESSION['categories'])>0)
			{
				$categorieskeys = array_keys($_SESSION['categories']);
				$count = 0;
				if(sizeof($categorieskeys)>0)
				{
					$categories_query = "AND (";
					while($categorieskeys[$count]!=null)
					{
						if($count>0) $categories_query = $categories_query." OR category = '".$categorieskeys[$count]."' ";
						else $categories_query = $categories_query." category = '".$categorieskeys[$count]."' ";
						$count++;
					}
					$categories_query = $categories_query . " ) ";				
				}
			}
		}
 
	$start = $_SESSION['start'];
	$end = $_SESSION['end'];	
 
	if($categories_query!='')
	{
		if((session_is_registered('start'))&&(session_is_registered('end'))&&(strlen($start)!=0)&&(strlen($end)!=0))
		{
			$query = "SELECT * FROM News WHERE id>0 ".$categories_query." AND  publishing_date >= '$start' AND publishing_date <='$end' ORDER BY publishing_date DESC, publishing_time DESC";
		}
		elseif (session_is_registered('start')&&(strlen($start)!=0))
		{
			$query = "SELECT * FROM News WHERE id>0 ".$categories_query." AND publishing_date >= '$start' ORDER BY publishing_date DESC, publishing_time DESC";
		}
		elseif (session_is_registered('end')&&(strlen($end)!=0))
		{
			$query = "SELECT * FROM News WHERE id>0 ".$categories_query." AND publishing_date <= '$end' ORDER BY publishing_date DESC, publishing_time DESC";
		}
		else $query = "SELECT * FROM News WHERE id>0 ".$categories_query." ORDER BY publishing_date DESC, publishing_time DESC";
	} 
	else 
	{
		if((session_is_registered('start'))&&(session_is_registered('end'))&&(strlen($start)!=0)&&(strlen($end)!=0))
		{
			$query = "SELECT * FROM News WHERE id>0 AND  publishing_date >= '$start' AND publishing_date <= '$end' ORDER BY publishing_date DESC, publishing_time DESC";
		}
		elseif (session_is_registered('start')&&(strlen($start)!=0))
		{
			$query = "SELECT * FROM News WHERE id>0 AND publishing_date >= '$start' ORDER BY publishing_date DESC, publishing_time DESC";
		}
		elseif (session_is_registered('end')&&(strlen($end)!=0))
		{
			$query = "SELECT * FROM News WHERE id>0 AND publishing_date <= '$end' ORDER BY publishing_date DESC, publishing_time DESC";
		}
		else $query = $query = "SELECT * FROM News WHERE id>0 ORDER BY publishing_date DESC, publishing_time DESC";
	}
 
	$newlastID = 0;
 
	$rows = mysql_query($query) or die(mysql_error());
	// row contains ID title body owner publishing_date publishing_time category
	if(mysql_num_rows($rows))
	{
		while($row = mysql_fetch_row($rows))
		{
			if($newlastID==0) 
			{
				$newlastID = $row[0];
				if(session_is_registered('lastID'))
				{ 
					$_SESSION['lastID'] = $newlastID;
					$lastID = $newlastID;
				}
				else
				{ 
					// no previous call
					session_register('lastID');
					$_SESSION['lastID'] = $lastID;
				}				
			}
			if(session_is_registered('loggedin')) $admincontrols = "<span class=\"controls\"><a href=\"deletenews.php?id=".$row[0]."\" target=\"_self\" class=\"delete\"></a><a href=\"\" name=\"modal\" rel=\"editform\" title=\"".$row[0]."\" target=\"_self\" class=\"edit\"></a></span>";
			echo "
				<article>
					".$admincontrols."
					<h1>".$row[1]."</h1>
					<details>Posted by <span>".$row[3]."</span> in <span class=\"cat\">".$row[6]."</span> on <span>".$row[4]."</span> at <span>".$row[5]."</span>.</details>
					<p>".$row[2]."</p>
				</article>
			";
		}
	}
	else echo "<article class=\"no-hover\"><h1>No news into the system</h1></article>";
}

The first section of the function starting on the third line and going up to line 22 checks if there are any categories selected. If at least one is selected the code builds a SQL statement which will be used in a SELECT / WHERE clause.

The code on lines 24 and 25 is used to check whether the start and end dates used for news filtering are enabled. If they are enabled they must to be used in the SELECT statement against the database.

First batch of SELECT statements, starting on line 27 up to 42. This batch is used if the users have selected any categories to filter the results. There are multiple statements because each one of them is used based on start and end date filters contents. The second batch, line 45 to 57, does the same thing as the above batch, but doesn't limit the results based on categories because in this case none of them is selected.

The code between lines 60 to 94 lists the results of the previous SQL queries. $newlastID variable is used to update the $lastID session described above. This is necessary because the ID of the last news added to the system changes as soon as applied filters change. The last news in one category doesn't have the same ID as the last news inside another category, or throughout the entire system. These checks and session updates are done between lines 68 and 82 and are done once per each query.

Finally, the code from line 83 to 90 is used to create the structure and content of each news item and display it.

Further more, there's another similar function as complex as this one. Its name is list_new_news() and the difference between this one and the one presented above is that it uses the lastID session in its SELECT statements, returning items which have an ID bigger than what lastID stores. This function is used to add to the DOM news items that were added to the system after the user has loaded the page.

Basically, this function is used to achieve the functionality of the Twitter new items feature available in Twitter's search page. However, simply coding it won't do any good. This function has to be combined with some ajax requests, which are coded in the sprinkle.js jQuery file.

sprinkle.js

Thank God I've shown parts of this file in the previous five parts of the tutorial. Otherwise, the task for today would have been explaining 400 or more lines of code. Fortunately, some of them are already known so I am going to stick to showing the newly added lines only.

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

function updateNews(){
	$.get('includes/check_new_items.php',function(newdata){
		if(newdata.length==3) 
		{
		$('#newdata').insertAfter('section > details');	
		// find out each new article, compute height, and set new heights for section and aside
		var sectionHeight = 75; // padding, margin, included elements
		$('section article').each(function(){
			sectionHeight = sectionHeight + $(this).height() + 10 + 25; // 10 comes from padding t b, 25 from margin top
		});
		asideHeight = 0;
		asideHeight = asideHeight + $('aside div').height();
		$('aside li').each(function(){
			asideHeight = asideHeight + $(this).height();
			if($(this).attr('class')=='title') asideHeight = asideHeight + 15;
		});
		if(asideHeight < sectionHeight) 
		{
		//	alert (sectionHeight);
			$('aside, section').animate({ height: sectionHeight },{queue:false}); // update height	
		}
		else
		{
		//	alert (asideHeight);
			$('aside, section').animate({ height: asideHeight },{queue:false}); // update height	
		}
		// done with column heights
		$('section article').fadeIn('slow');
		}
	});
}

The above function checks for new news added into the database. If new items are available, a message stating so is appended to the DOM. If the message box is clicked new news items are appended to the DOM and then faded in so that users can see them. This functions's corresponding php file is similar to the list_news() function. What is changed is the last part of the function which displays the news items, part that has been replaced with the code shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$newLastID = 0;
$nothere = 0;
$rows = mysql_query($query) or die(mysql_error());
// row contains ID title body owner publishing_date publishing_time category
if(mysql_num_rows($rows))
{
	while($row = mysql_fetch_row($rows))
	{
		if($newLastID==0)
		{
			$newLastID = $row[0];
		}
		if(($oldLastID<$newLastID)&&($nothere==0))
		{
			echo "new";
			$nothere = 1;
		}
	}
}

The following code is used to handle clicks performed on the categories listed in the sidebar. What the code does is it checks whether the clicked category is selected. If it is, the category is removed from the php categories session and its visual style changed. If the category is not selected it is appended to the php categories session and its visual appearance changed. The php file that's used to update the session is also shown 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
30
31
32
33
34
35
36
37
38
39
40
41
42

// change style for aside category selector and filters above content + ajax requests for updating selected categories
$("aside ul li a").click(function (){
	var classAttr = $(this).attr('class');
	if (classAttr != 'selected-aside')
	{
		// update style class for category just clicked
		$(this).attr('class','selected-aside');
		var category = $(this).text();
		$(this).append('<span>X</span>');
		 // check filter legend status and update it if required
		var classAttr = $('.categories').attr('class');
		if(classAttr == 'categories not-selected') $('.categories').attr('class','categories selected');
		// now we need to make an ajax call to add our category to our selected categories session
		var jdata = "function=add&category="+category; 
		$.ajax({
			type: "POST",
			url: "includes/categories_sessions.php",
 				data: jdata 
		});
	}
	else
	{
		// update style class for category just clicked
		$(this).attr('class','');
		var span = $(this).children();
		$(span).remove();
		var category = $(this).text();
		// now we need to make an ajax call to remove our category to our selected categories session
		var jdata = "function=remove&category="+category; 
		$.ajax({
			type: "POST",
			url: "includes/categories_sessions.php",
 				data: jdata 
		});
		// check if there is any category selected
		// if not, update filter legend class
		var anyCatSelected = $('.selected-aside').size();
		if(anyCatSelected==0) 
		{	
			$('.categories').attr('class','categories not-selected');
		}
	}// from else

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
33
34
35
36
37

<?
	session_start(); 
	$err = 0;
	if(isset($_REQUEST['function'])) $function = $_REQUEST['function'];
	else $err = 1;
	if(isset($_REQUEST['category'])) $category = $_REQUEST['category'];
	else $err = 1;
 
	if(!$err)
	{ 
		if($function == 'add')
		{ 
			if(session_is_registered('categories'))
			{ 
				$categories = $_SESSION['categories'];
				$categories[$category] = 1;
				$_SESSION['categories'] = $categories;
			}
			else
			{ 
				// no previous call
				session_register('categories');
				$categories = array();
				$categories[$category] = 1;
				$_SESSION['categories'] = $categories;
			}
 
		}
		elseif($function  == 'remove')
		{
			$categories = $_SESSION['categories'];
			unset($categories[$category]);
			$_SESSION['categories'] = $categories;
		}
	}
 
?>

However, we're not done yet with the functionality. If someone changes the categories which are selected the news must be updated and the following code does that:

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
33
34
35

// ajax requests to reload content and resize section + aside
$('section article').fadeOut('slow', function(){ 
		// completion of fading current content out
		//$('section').animate({ height: sectionHeight });  // reset height of section to original value
		if($('section article').length>0) $('section article').remove();
		var oldcontent = $('section').html();
		$.get('includes/load_news.php', function(newdata){
			$('section').html(oldcontent+newdata);
			// find out each new article, compute height, and set new heights for section and aside
			var sectionHeight = 50; // padding, margin, included elements
			$('section article').each(function(){
				sectionHeight = sectionHeight + $(this).height() + 10 + 25; // 10 comes from padding t b, 25 from margin top
			});
			asideHeight = 0;
			asideHeight = asideHeight + $('aside div').height();
			$('aside li').each(function(){
				asideHeight = asideHeight + $(this).height();
				if($(this).attr('class')=='title') asideHeight = asideHeight + 15;
			});
			if(asideHeight < sectionHeight) 
			{
			//	alert (sectionHeight);
				$('aside, section').animate({ height: sectionHeight },{queue:false}); // update height	
			}
			else
			{
			//	alert (asideHeight);
				$('aside, section').animate({ height: asideHeight },{queue:false}); // update height	
			}
			// done with column heights
			$('section article').fadeIn('slow');
			overlay();
		});
	});
});

Based on the request processed by the load_news.php file we'll probably have to change the content that's visible on the homepage. Therefore, current content is faded out, new content inserted and main content area and sidebar heights updated. Only after these processes are completed the new content is faded in and displayed in the page. The load_news.php file simply calls the load_news() function.

Same content reloading has to take place if users change the date range they want via the two datepickers located in the top of the right sidebar. The process is the same as the one described above in the case of categories being changed with a simple addition to the code. The new addition is the request processed by the datepicker.php file which does some session updating and nothing more. The differences are shown 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
30
31
32
33
34
35
36
37
38
39
40

$('#start_date').change(function(){
	// the start date of date picker has been changed
	// ajax call to handle it
	var startdate = $(this).val();
	if(startdate!=null)
	{
		var classAttr = $('.daterange').attr('class');
		if(classAttr == 'daterange not-selected') $('.daterange').attr('class','daterange selected');	
 
			var jdata = "function=start&date="+startdate; 
			$.ajax({
				type: "POST",
				url: "includes/datepicker.php",
				data: jdata 
			});
 
			// load_news.php request as presented above in the tutorial
	}
 
});
 
$('#end_date').change(function(){
	// the start date of date picker has been changed
	// ajax call to handle it
	var enddate = $(this).val();
	if(enddate!=null)
	{
		var classAttr = $('.daterange').attr('class');
		if(classAttr == 'daterange not-selected') $('.daterange').attr('class','daterange selected');	
 
			var jdata = "function=end&date="+enddate; 
			$.ajax({
				type: "POST",
				url: "includes/datepicker.php",
				data: jdata 
			});
 
			// load_news.php request as presented above in the tutorial
	}	
});

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<?
	session_start(); 
	$err = 0;
	if(isset($_REQUEST['function'])) $function = $_REQUEST['function'];
	else $err = 1;
	if(isset($_REQUEST['date'])) $date = $_REQUEST['date'];
	else $err = 1;
 
	if(!$err)
	{ 
		if($function == 'start')
		{ 
			if(session_is_registered('start'))
			{ 
				$start = $_SESSION['start'];
				$start = $date;
				$_SESSION['start'] = $start;
			}
			else
			{ 
				// no previous call
				session_register('start');
				$start = $_SESSION['start'];
				$start = $date;
				$_SESSION['start'] = $start;
			}
		}
		elseif($function  == 'end')
		{
			if(session_is_registered('end'))
			{ 
				$_SESSION['end'] = $date;
			}
			else
			{ 
				// no previous call
				session_register('end');
				$_SESSION['end'] = $date;
			}
		}
		elseif($function == 'clear')
		{
			$start = $_SESSION['start'];
			$start = "";
			$_SESSION['start'] = $start;
 
			$end = $_SESSION['end'];
			$end = "";
			$_SESSION['end'] = $end;
		}
	}	
?>

How do we actually handle new news items. During the first part of the series a hidden div was added to the page structure, which was supposed to be used on a later time. That time has come; let me remind you that small piece of HTML:

1
2
3

<article class="no-hover hidden" id="newdata">
	<h1>New articles in the system. Click here to view them</h1>  
</article>

The above div is hidden but it fades in on top of all the articles if ajax requests show that new items are available in the database and they correspond with user's filters. Checking is the task of the updateNews() function which uses the check_new_items.php file. If new items are available the #newdata div is added on top of the articles displayed in the page, just as described above when the updateNews() function was shown. Here's the code that handles the clicks performed on this div and that fades out current content and displays new news items:

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
33
34
35
36
37
38
39
40
41
42
43

$('#newdata').click(function(){
 
	$('#newdata').insertAfter('footer');	
	$('#newdata').removeAttr('style');
 
	// ajax requests to reload content and resize section + aside
		$('section article').fadeOut('slow', function(){ 
				// completion of fading current content out
				//$('section').animate({ height: sectionHeight });  // reset height of section to original value
				if($('section article').length>0) $('section article').remove();
				var oldcontent = $('section').html();
 
				$.get('includes/load_new_news.php', function(newdata){
					$('section').html(oldcontent+newdata);
 
					// find out each new article, compute height, and set new heights for section and aside
					var sectionHeight = 75; // padding, margin, included elements
					$('section article').each(function(){
						sectionHeight = sectionHeight + $(this).height() + 10 + 25; // 10 comes from padding t b, 25 from margin top
					});
					asideHeight = 0;
					asideHeight = asideHeight + $('aside div').height();
					$('aside li').each(function(){
						asideHeight = asideHeight + $(this).height();
						if($(this).attr('class')=='title') asideHeight = asideHeight + 15;
					});
 
					if(asideHeight < sectionHeight) 
					{
					//	alert (sectionHeight);
						$('aside, section').animate({ height: sectionHeight },{queue:false}); // update height	
					}
					else
					{
					//	alert (asideHeight);
						$('aside, section').animate({ height: asideHeight },{queue:false}); // update height	
					}
					// done with column heights
					$('section article').fadeIn('slow');
					overlay();
				});
			});
});

You'd think that this is all the code we need. Unfortunately, it isn't. Just placing the updateNews() function won't make wonders. We need to call this function on a set interval, 5 or 10 seconds for example. This way the users do not have to reload the page to check for new news as the app periodically checks that for them and displays a notification message if new items are added. The users only have to sit back and enjoy the feed. The code that creates the 10 second loop call of the function is shown below:

1

setInterval( "updateNews()", 10000 );

Conclusion

The webapp could be used to live blog different important events, such as WWDC, Oscars and so on. Moreover, due to the categories filters one could live blog different events simultaneously on the same app.

Source code and demo

As you know from the demo part of the tutorial a demo of the application is available over here. I am working on packing the source codes and they should be available to download, use and extend soon!

If you liked this tutorial series, stay updated to new content via our RSS feed or by email, because a new series will start soon. This new series will be around coding the same webapp using JSP on Tomcat.

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.

In the above screenshot you can check out what I'm trying to achieve. See those stars right under the name of the location? Well, that is done purely with CSS and two images. Let's see the HTML markup required.

1
2
3
4
5

<div class="restaurant-stars">
	<div class="restaurant-stars-rating" title="2.5">              
		&nbsp;
	</div>
</div>

You may ask why am I using two different DIVs instead of one. Let me explain. We need the gray stars that are used to display the maximum rating achievable. We also need orange stars to display the actual rating. The orange stars must lay on top of the gray ones.

To achieve this, the restaurant-stars div has a specific width. Mine is 76 pixels. Moreover, the background image of this div is an image containing all the 5 gray stars. Background image is set not to repeat. The restaurant-stars-rating div has a width that has to be between 0 and the restaurant-stars div's width, which is 76 pixels. The one I used in the example is 38 pixels. The background image of this second div is an image that contains 5 orange stars.

The trick is right here, in the length of the inner div. As its width is lower, the background image will not span all the way to cover up the outer div's background image, resulting in an awesome way to semantically display a star based rating value.

What's the CSS?

1
2

.restaurant-stars { display:block; width:76px; height:20px; background:url('images/rating_default.jpg') no-repeat; }
.restaurant-stars-rating { display:block; width:38px; height:20px; background:url('images/rating_stared.jpg') no-repeat; }

That's all that needs to be coded!

Enhancing it with a bit of jQuery

I don't think that such a feature should be used on a static website, so how do you tackle dynamic content that has different values for ratings? I am using this rating feature on a Google Maps infoWindow. I am using jQuery to dynamically change it based on data I get from a JSON object passed along from a Rails application. Here's the code:

1

   $('.restaurant-stars-rating').width(foundRestaurant.resrating*76/5);

As you can see I am simply computing the width value of my restaurant-stars-rating div as the product between the rating I have in the database with the outer div's width, divided by the maximum rating. Simple as that!

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