Web International Awards

Stationery design showcase (#2)

Bogdan Pop — Wed, 01 Sep 2010 07:20:50 +0000

Last year we had the first post that rounded up some incredible stationeries. Today I'm going to present new interesting stationeries. Moreover, I am announcing the launch of a new WebRaptor website: Stationery Wall. Stationery Wall is, you guessed it, an online stationeries design showcase you can browse for inspiration. Although we're just launching it, Stationery Wall already contains more than 50 designs. Out of those, 5 are showcased just below. Go ahead and visit Stationery Wall and you might win a month of free advertising if you join the September contest! Details over Stationery Wall.

Stationery showcase

H2R stationery design

Ecocentric stationery design

Pretty Green stationery design

Nest stationery design

Talent stationery design

Building a live news blogging system in JSP [II]

Bogdan Pop — Wed, 25 Aug 2010 10:00:21 +0000

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.


	
		Title : 
		
		Category :
		
		Body text :

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:

<%@ 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.

Building a live news blogging system in JSP

Bogdan Pop — Wed, 18 Aug 2010 04:24:20 +0000

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

<%@ 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.

<%@ 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.

Build a POI map using jQuery & Google Maps v3

Bogdan Pop — Wed, 11 Aug 2010 15:26:51 +0000

This is the incipient work from a bigger project that I worked on which uses Google Maps. I decided to share it with you as it can be used in a variety of ways and places. You can use it to locate around a map your company's offices, stores, museums or any other interest points you need to present to your website's visitors.

The tutorial is fairly simple as it doesn't include advanced programming or CSS rules. Having that said, here's a screenshot of the final product.

As you can see the application, if I can call it that way, has a sidebar that contains a list of POIs (Point of Interest), a diagnosis header that displays information about what's going on and a map. Let's code the HTML structure:


	
		
	
	
		Trying to determine your location...Please allow browser to share location if prompted
	
	 
	
		Our offices locations
		
			Estadio Santiago Bernabeu
			Stadio Olimpico - Rome

The role of the home-wrapper div is to hold the contents of the page centered in the browser window. The home-messages div is the one that holds the diagnosis messages in place, the home-sidebar div holds the POIs list while map-wrapper and map serve as a map placeholder.

As you can see, the li items inside the unordered list located in the sidebar contain all information that's provided for each point of interest. No external files or database queries are used. The information is contained within a rel attribute of the anchor tag that's inserted in each li item.

The above HTML code is to be placed inside the body of the page, while the following into the header, as it contains links to CSS files and javascript pointers.

The CSS file isn't complicated at all.

*		{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
body		{ font-family:Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif; font-size:62.5%; }
.clear 	{ display:block; clear:both; }
 
#logo	{ display:block; width:245px; height:40px; line-height:40px; float:left; text-align:center; }
#home-wrapper	{ display:block; width:930px; margin:0px auto; padding:25px 10px; font-size:12px; }
#home-messages	{ display:block; width:645px; height:40px; line-height:40px; float:right; padding:0 10px; margin:0 0 25px 10px; background-color:#FFFFCC; border:1px solid #EEEEBB; }
#home-sidebar		{ display:block; width:243px; height:400px; float:left; padding:0 0 20px 0; margin:0 10px 25px 0; background-color:#FFFFCC; border:1px solid #EEEEBB; }
#map-wrapper		{ display:block; width:645px; height:400px; float:right; padding:10px; background-color:#FFFFCC; border:1px solid #EEEEBB; }
#map			{ display:block; width:645px; height:400px; padding:0px; }	
#infowin-overlay	{ display:block; width:400px; height:80px; }
#infowin-overlay strong	{ display:block; float:left; clear:left; font-weight:bold; width:100px; }
 
h1	{ font-size:15px; padding:10px 0; text-align:center; background:#EEEEBB; color:#339933; }
ul 	{ list-style:none; }
li a	{ display:block; padding:5px 10px; color:#999; }

What's new in the CSS file is the infowin-overlay identifier used, which is nowhere to be found in our HTML file. That's due to the fact that it is the identifier of the overlay window that is displayed once a visitor clicks a POIs marker on the map. The overlay is added to the DOM by the javascript code that follows, which contains all that's required for the tutorial to be complete and working at warp speed.

var map; // global var to store the google map
var centerCoord = new google.maps.LatLng(46.782101,23.643855); // tulghesului street, Cluj-Napoca
var centerCoord = new google.maps.LatLng(40.453577,-3.68763); // Estadio Santiago Bernabeu, Madrid
var browserDetectedLocation = null;
 
// global variables used throughout the js functionality
var markersArray = [];
var infoWindow = new google.maps.InfoWindow({});
 
 
function setLocation()
{
	// try to get user location via W3C standard Geolocation in browsers or via Google Gears
	if(navigator.geolocation) 
	{
	    navigator.geolocation.getCurrentPosition(function(position) 
		{
			blueIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
			browserDetectedLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
			map.setCenter(browserDetectedLocation);
			var marker = new google.maps.Marker({
			      position: browserDetectedLocation, 
			      map: map, 
			      title: 'You are here',
			 	  icon: blueIcon
			});
			$('#home-messages').text("Location detected. Please wait...");
	    }, function() {
	     // error getting location, though supported
			$('#home-messages').text("Your location cannot be detected.");
	    });
	} else if (google.gears) 
	// if location not found using W3C standard try with Google Gears if browser supports it
	{
	    var geo = google.gears.factory.create('beta.geolocation');
	    geo.getCurrentPosition(function(position) 
		{
			blueIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
			browserDetectedLocation = new google.maps.LatLng(position.latitude,position.longitude);
			map.setCenter(browserDetectedLocation);
			var marker = new google.maps.Marker({
			      position: browserDetectedLocation, 
			      map: map, 
			      title: 'You are here',
				  icon: blueIcon
			});
 
			$('#home-messages').text("Location detected. Please wait...");
	    }, function() {
			// error getting location, though supported
			$('#home-messages').text("Your location cannot be found.");
	    });
	} 
	else	
	{
		// Browser doesn't support Geolocation
		$('#home-messages').text("Your location cannot be found.");
	}	
}
 
function InitMap(options, mapIdentifier, defaultLocation, detectLocation)
{ // function to initialize map
	var settings = // json variable for default settings
	{
		zoom: 15,
		center: defaultLocation,
		mapTypeId: google.maps.MapTypeId.SATELLITE
	};
	if (options!=null) settings = options; // if no options provided, start the map with default settings
	map = new google.maps.Map(document.getElementById(mapIdentifier), settings);
 
	map.setCenter(defaultLocation);
	if(detectLocation==true) setLocation(); // try to get user location via W3C standard Geolocation in browsers or via Google Gears
	else
	{
		$('#home-messages').text("Click an office on the left to view its location.");
	}
 
	return map;
}
 
function handle_clicks()
{
	$('#home-sidebar ul li a').live('click',function(){
		clearOverlays();
		var coordString = $(this).attr('rel');
		var coordTitle = $(this).text();
		var coordArray = coordString.split(',');
		var update2Location = new google.maps.LatLng(coordArray[0],coordArray[1]);
		map.setCenter(update2Location);
		addMarker(update2Location,coordTitle,coordArray[2]);
 
  		$('#home-messages').text("Viewing: "+coordTitle);
	});
}
 
function addMarker(m_position,m_title,m_infowindow) {
	marker = new google.maps.Marker({
	  	position: m_position,
	  	map: map,
		title: m_title
	});
	markersArray.push(marker);
  	var mark = markersArray.pop();
	google.maps.event.addListener(mark, 'click', function() {
		infoWindow.open(map,mark);
		var stringContent = m_infowindow;
		infoWindow.setContent("\"infowin-overlay\""+stringContent+"
");
 
		overlayHeight = $('#infowin-overlay').height();
		overlayWidth = $('#infowin-overlay').width();
		$('#infowin-overlay').parent().css('height',overlayHeight);
		$('#infowin-overlay').parent().css('width',overlayWidth);
	});
 
	markersArray.push(mark);
}
 
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}
/* end of functions */
 
$(document).ready(function(){
 
	if($('#map').get(0))
	{ // only initialize the map if map is located inside the page
		map = InitMap(null,'map', centerCoord, true); // initialize the map on default location
		handle_clicks(); // click events handling by jQuery	
	}
 
});

I've added comments to the most important lines of jQuery above. The setLocation() function tries to detect user location and center the map around his location. The InitMap() function is used to get the entire thing rolling, and takes a couple of arguments that allows you to set the default location displayed when the map loads, as well as to enable or disable user location tracking.

The handle_clicks() function is used to track clicks on the items contained in the sidebar list and move the map around on top of the clicked point of interest. addMarker() is used to add a marker to the map, marker which represents the location of a POI and which users can click to have a detailed overlay displayed. Finally, clear_overlays() clears existing overlays to avoid duplicated content.

Demo

I've prepared a demo of the tutorial over here.

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

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

Bogdan Pop — Tue, 13 Jul 2010 08:00:47 +0000

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.

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

Bogdan Pop — Tue, 08 Jun 2010 13:51:29 +0000

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.


	Live News System

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.


 
	 include("includes/functions.php");
	   initiateLastID(); 
	?>
 
	
		Live News System

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.


$msg = $error = "";
$msg=$_REQUEST['msg'];
$error=$_REQUEST['error'];
if($msg!="")
{
	?>
	
		$msg?>
	
	
}
if($error!="")
{
	?>
	                      
		$error?>
	
	
}
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:


	Start date: 
	
	End date:

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.


	Browse by category

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 "\"selected-aside\">".$row[0]."
";
								else echo "".$row[0]."
";
						}
						else echo "".$row[0]."
";
					}
				else echo "".$row[0]."
";
			}
		}
		else echo "no categories
";
	}
	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


	Admin login You are logged in. You can add news or logout

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.

	
	news title
	Posted by user in category on date at time.
	content of news


		
	news title
	Posted by user in category on date at time.
	content of news

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.

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 = "\"controls\">\"deletenews.php?id=".$row[0]."\" target=\"_self\" class=\"delete\">\"\" name=\"modal\" rel=\"editform\" title=\"".$row[0]."\" target=\"_self\" class=\"edit\">";
			echo "
				
					".$admincontrols."
					".$row[1]."
					Posted by ".$row[3]." in \"cat\">".$row[6]." on ".$row[4]." at ".$row[5].".
					".$row[2]."
				
			";
		}
	}
	else echo "\"no-hover\">No news into the system
";
}

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.

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:

$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:

// 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('X');
		 // 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


	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:

// 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:

$('#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
	}	
});


	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


	New articles in the system. Click here to view them

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:

$('#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!

Keep it simple

Bogdan Pop — Tue, 01 Jun 2010 08:00:33 +0000

Whether you're developing a webapp, a website, some native software or a simple installer, keep it simple and straightforward. We barely have time for anything these days, and effective solutions that help us doing what we need to do fast, without error will win over pretty much anything else.

This concept applies to web forms, navigation, software options, and more. The faster the users get things done, the more satisfied they will feel, they'll use your solution even more and refer others to it. This post will be best suited in a thoughts / tumblr blog, but I figured it may get in here as well.

Inspiration

This post was inspired from the recent Windows encounters I've had. Remember the post on web forms usability published just a while ago? Well, while installing the Microsoft Office Suite downloaded after using that faulty web form, I got a new installation wizard out of the blue, which I didn't ask for.

For some reason, I was asked to install Business contact Manager for Outlook Express 2007. I have no idea what that is, but I assume what it's used for. Bottom line is I don't need it. On top of that is the really bad installer.

Let's assume someone wants to actually install it. The installer starts and shows one component that can be installed. The one I want. Why would you not simply let me get through with the process and require me to select the component to be installed. After all, moments ago I double clicked to install it? Why confirm that again?

What's even worse is that I cannot click the Next button until I select the unique component. Moreover, there isn't a "finish" installation button. It's a "Next" step button. I don't want to waste any more steps with this issue. Just let me get on with it.

To conclude, whatever you're doing, try to keep it simple and straightforward for your users. Don't frustrate them with never ending jibberish chat.

Key usability in web forms

Bogdan Pop — Tue, 25 May 2010 13:00:38 +0000

Two of the most popular articles published here deal with web forms. The first one is around the theoretical aspects of web forms while the second one resides along the practical issues, coding and validating web forms. This article blends some concepts from both articles and showcases a key error that mustn't be in your web forms.

The issues with required fields

The issue with required fields is that there shouldn't be any required fields on a web form. Don't place asterisks to label required fields. Nobody follows that pattern, though most users expect a field to be required if it has one asterisk appended to its label. If you have a web form that requires user's email, password, first and last names, don't put asterisks or any other messages. Just put the inputs in the form and the user will fill them.

Moreover, if you have those fields, don't place an asterisk only next to email and password and expect users to input their names as well. That will never happen! Following this pattern, after the user hits the submit button, don't display an error message telling them that the name fields are required as well, if you didn't point that out in the first place. This is usually something that will make visitors leave your website and never use your form, which was the primary goal for them upon arriving at that page.

That is total failure! Your mistake, not your user's!

Time to guess who has web forms with such flaws. It's Microsoft! The same company that has .exe executable download managers which users need to run to download any of their software. Mac users need to run them as well to download their operating system, for example, if they wish to switch to Windows, or use it virtually. But that's another story.

The moral

From time to time, I unfortunately need to use Microsoft Office and other Windows native software. Not my option though. While trying to download a trial version of the Office suite, I was asked to sign up on Microsoft's website. The form asked for my email, my desired password, first and last names, and my country. The first two we're marked as mandatory fields, while the rest weren't. The country field was a preselected select field, which I had nothing else to do but update.

After pressing the submit button, I wasn't taken to a download page. Instead, I was shown a couple of errors I've done. I haven't inputted any information in my name fields. But I didn't know I needed to. Thank god for Microsoft that the bid I was working on required specific documents (.docs) and I really needed to proceed, otherwise that would have been the end of my journey on their website.

Conclusion

Try to strip down the fields of your web forms. Not the required ones, but all fields. Don't ask for unnecessary information. Ask only mandatory information, and don't label it as mandatory. If your form is simple and short, users would be delighted to input what you're asking for.

Best of the best!

Bogdan Pop — Tue, 18 May 2010 11:02:53 +0000

We've hit a really busy, rough couple of weeks at our company. Therefor, the final post of our blogging system tutorial will be published only next week as opposed to this one. However, this week we're going to remind you of our best articles which generated loads of traffic.

Make your own jQuery slider using XML

An awesome tutorial on how to build a custom jQuery slider that stores data in external XML files, which had a great follow up plugin: Awesome Slider

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

This is a great tutorial series that tackles many technologies and programming methodologies such as HTML5, CSS, PHP, MYSQL, jQuery, AJAX and more!

Impressive web forms. From coding to validation!

Ever wondered how to design, code, and validate beautiful web forms? This article is a must read!

Forms. Can't live with them. Can't live without them.

If the article just above tackled the practical part of web forms, this one tackles theoretical stuff and you should really read it because it contains a lot of tips, tricks, pros and cons on different web form styling patterns and more. Such a great article even Caroline Jarrett, author of the great book "Forms that work: Designing web forms for usability", got her own tips in the comments section.

And there's more

The above articles are not everything we've got. Just check out our other articles, or stay updated to new content via our RSS feed or by email.

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

Bogdan Pop — Tue, 11 May 2010 08:00:51 +0000

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


	
		
 
			Title : 
			
			Category :
			
 
			Body text :

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.


	
		
			Title : 
			
			Category :
			
			Body text :

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:

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.


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.