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

So, don't ask if I am human and expect an answer other than yes or no. SDUIHA or jgV54D is not a valid answer if you asked me if I were human. Imagine you asked a Japanese what was their name and they replied Sushi. Now that wouldn't be a great start, would it? So to wrap things up, never ask anyone if they're human and expect gibberish in return. One bad example from Hongkiat is just below.

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.

In the first revision of this tutorial, you've asked a couple of times if it is possible to display multple POIs at the same time on the map. The answer is yes, you can!

clearOverlays() gone

The clearOverlays() function was used to actually erase all markers on the map (all POIs on the map) when you clicked any link in the sidebar. In order to display multiple POIs on the map, this function must not be used. Therefor, in the revised version of the POI map the function was discarded as well as its unique call in the handle_clicks() function.

addMarker() updated

The original version of the function didn't check before appending a marker to the markersArray if there's already a marker with the same coordinates. That wasn't necessary because such a case wasn't possible because the clearOverlays() function assured there are no markers in the array when the addMarker() function was called. However, discarding the clearOverlays() function results in duplicated markers in the array each time someone clicks multiple times on the same link in the sidebar. To prevent that, we must check before adding a new marker to the array if it doesn't already exist. We do that within the addMarker() function:

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

function addMarker(m_position,m_title,m_infowindow) {
	var mark;
 
	if (markersArray.length!=0) 
	{
		duplicate = false;
		var markcopy;
		var markersCopy = [];
		while(markcopy=markersArray.pop())
		{
			if((markcopy.position.lat()==m_position.lat())&&(markcopy.position.lng()==m_position.lng())) duplicate = true;
			markersCopy.push(markcopy);
		}
		markersArray = markersCopy;
		if(duplicate==false)
		{
			marker = new google.maps.Marker({
			  	position: m_position,
			  	map: map,
				title: m_title
			});
			markersArray.push(marker);
			mark = markersArray.pop();
			google.maps.event.addListener(mark, 'click', function() {
				infoWindow.open(map,mark);
				var stringContent = m_infowindow;
				infoWindow.setContent("<div id=\"infowin-overlay\""+stringContent+"</div>");
 
				overlayHeight = $('#infowin-overlay').height();
				overlayWidth = $('#infowin-overlay').width();
				$('#infowin-overlay').parent().css('height',overlayHeight);
				$('#infowin-overlay').parent().css('width',overlayWidth);
			});
			markersArray.push(mark);
		}
	}
	else
	{
		marker = new google.maps.Marker({
		  	position: m_position,
		  	map: map,
			title: m_title
		});
		markersArray.push(marker);
		mark = markersArray.pop();
		google.maps.event.addListener(mark, 'click', function() {
			infoWindow.open(map,mark);
			var stringContent = m_infowindow;
			infoWindow.setContent("<div id=\"infowin-overlay\""+stringContent+"</div>");
 
			overlayHeight = $('#infowin-overlay').height();
			overlayWidth = $('#infowin-overlay').width();
			$('#infowin-overlay').parent().css('height',overlayHeight);
			$('#infowin-overlay').parent().css('width',overlayWidth);
		});
		markersArray.push(mark);
	}
}

In the above script we do the following: we first check if there's any markers in the array (line 4), and if the array is empty, we create a new marker, add it to the array and add a listener to it (lines 39 to 56). The listener is required because we need a trigger that will display the overlay window when a marker is clicked.

If the array is not empty, we check if the current marker to be added is already in the array. That's done with the while loop between lines 9 and 13. As you can see, the duplicate variable is initialized to false. If there's a marker in the array with the same coordinates as the marker we're trying to add, the value is changed to true. If duplicate variable remains false after the while loop is completed, we can safely add the marker to the array as described in the previous paragraph.

Because the required changes were minor, I decided not to update the entire tutorial, but to simply release the new source codes and show you the new function that does the trick. Therefor, you can view a new demo of the POI map script over here and download the full source code over here.

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

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.

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:

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

<div id="home-wrapper">
	<div id="logo">
		<a href="http://www.webraptor.eu" target="_self"><img src="logo.jpg" width="245" height="40" alt="WebRaptor" /></a>
	</div>
	<div id="home-messages">
		Trying to determine your location...Please allow browser to share location if prompted
	</div>
	<span class="clear">&nbsp;</span>
	<div id="home-sidebar">
		<h1>Our offices locations</h1>
		<ul>
			<li><a href="#" rel="40.453577,-3.68763, 
			<strong>Venue: </strong>Estadio Santiago Bernabeu<br />
			<strong>Address: </strong>Avenida de Concha Espina; No 1; 28036; Madrid<br />
			<strong>Phone: </strong>+34 (91) 398 4300<br />
			<strong>Fax: </strong>+34 (91) 344 0695<br />
			<strong>Email: </strong><a href='mailto:realmadrid@club.realmadrid.com'>realmadrid@club.realmadrid.com</a><br />
			" target="_self">Estadio Santiago Bernabeu</a></li>
			<li><a href="#" rel="41.934115,12.45575, 
			<strong>Venue: </strong>Stadio Olimpico<br />
			<strong>Address: </strong><br />
			<strong>Phone: </strong><br />
			<strong>Fax: </strong><br />
			<strong>Email: </strong><a href='mailto:'></a><br />
			" target="_self">Stadio Olimpico - Rome</a></li>
		</ul>
	</div>
 
	<div id="map-wrapper">
		<div id="map">
 
		</div>	
	</div>
</div>

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.

1
2
3
4
5
6
7

<link rel="stylesheet" href="css.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi?key={APIKEY}"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");	  
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/OfficeLocation.js" type="text/javascript" charset="utf-8"></script>

The CSS file isn't complicated at all.

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

*		{ 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.

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

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("<div id=\"infowin-overlay\""+stringContent+"</div>");
 
		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.

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.