The JSP Files (part 1): Purple Pigs In A Fruitbasket

Get to grips with Java Server Pages with this introductory tutorial and find out how to use one of the more powerful server-side languages around. This first part explains the history and basics of JSP documents, and also illustrates variables, includes and the String object.

Ever since Sun Microsystems (aka “the dot in dot-com”) came up with Java, the geeks have been screaming themselves hoarse about the wonders of this technology. Terms like “platform-independent code” and “write once, run anywhere” have been given so much airplay that even novice Java developers are aware of them, and the language is also popular with talk-show pundits and Internet consultants, who tout it as the solution to almost all problems of cross-platform compatibility.

Now, we’re big fans of Java – we’ve used it in the past, and will do so again in the future – but this series of tutorials isn’t about Java. It’s actually about an offshoot of Java, the innocuously-named Java Server Pages, or JSP, which attempts to offer Web developers a compelling alternative to traditional server-side scripting languages like Perl, PHP and ASP.

How? First, a little history…

During the early days of the Web, it was the sheer amount of (free!) content that encouraged people to use it. Using the easy-to-learn HTML language, any one and their deaf grandma could set up a Web page and reach out to other like-minded souls online. As the infrastructure improved, content was no longer restricted to text; you could now view pictures or watch videos on the Web. And as more and more people began adding interactivity to their Web sites, a bunch of programming languages were born in order to meet increasingly complex requirements.

The best-known of these is, of course, Perl, although PHP and ASP are also popular favourites. The problem with these languages, however, is that every request to the Web server for a Web page generates a new process on the server, leading to performance problems as visitor traffic increases.

Java offers a solution to this problem, by using so-called “servlets” to create interactive Web sites (a Java servlet is like a Java applet, except that it runs on the Web server, not the client Web browser – and if you’re confused now, wait till we get to scriptlets). Java also makes it possible for brick-and-mortar companies to interface their legacy systems with the new technologies available on the Web, and rapidly develop and link back-office automation systems together via the Internet.

However, servlets have a problem of their own – a simple interface or logic modification could often result in far-reaching changes to the servlet. And so, JSP was developed to separate application logic from the interface, so that changes to one would not affect the other. Working closely with developers like The Apache Group, JSP uses a tag-based approach (similar to PHP and ASP) which allows designers to make changes to the user interface without affecting application logic.

If you’re wondering about scalability, JSP supports component-based architectures using JavaBeans or Enterprise JavaBeans; this allows a developer to create reusable code modules and thereby speed up development time. And since this is Java, you can seamlessly connect Web applications to legacy systems, thereby reducing the costs of moving a real-world business into cyberspace. Say it with us – platform independence rocks!{mospagebreak title=Studying The Foundations} JSP is based on a multi-tier architecture, which can best be explained by comparing it to the architecture seen on non-JSP sites (read: PHP- or ASP-driven sites). In the typical Apache/PHP/mySQL architecture, you have a Web server and a database server at one level, with a scripting language like PHP taking care of the communication between the two to churn out dynamic content. While this kind of architecture is fine for sites that attract a middling amount of traffic, it begins to display its warts when traffic increases and the load on the database and Web servers goes up.

The JSP architecture, on the other hand, involves more than one level, immediately making it more scalable and maintainable.

In case you’re wondering what the long words mean, scalable implies that you can easily increase, or “scale up”, your systems as traffic increases, while maintainable implies that it is possible to simply modify one part of the system – changing over from one database to another, for example – without affecting other areas.

In the context of JSP, a multi-tier architecture involves the Web server for static HTML content, the application server for JavaBeans and servlets, and the database server for database connectivity. Additionally, you can combine JSP with JavaBeans and Java servlets to create complex Web applications which build upon previously-released and tested code modules, thereby simplifying code maintenance and increasing reusability.

It is important to note here that JSP code is not read line-by-line, as with PHP; it is first converted into a servlet (a bytecode version of the program) and then invoked by a servlet engine (such as Tomcat) to perform the required actions. Once the servlet is executed, the results are sent back to the client. Since the servlet engine has to compile the servlet the first time around, displaying a JSP page can take a little while the first time you access it; however, the next time around, response time will be dramatically reduced, since the servlet will have already been compiled and therefore ready for immediate use.{mospagebreak title=Java In A Teacup} In order to begin working on JSP, you need to get yourself copies of Sun’s Java Development Kit, Apache’s httpd Web server and mod_jserv module, and the Tomcat servlet engine, and configure them so that they’re all working together. This tutorial assumes that you’ve got a JSP development environment set up – in case you don’t, take a look at “Slapping Together A JSP Development Environment” at , a tutorial which will guide you through the process.

With that out of the way, let’s get down to the nitty-gritty of actually creating a JSP page. Open up a new file in your favourite text editor and type in the following lines of code:

<html> <head> </head> <body> <% // asking for it! out.println(“Waiter, can I have a cup of Java, please?”); %> </body> </html>

Save this file with the extension .jsp – for example, “coffee.jsp” – in an appropriate location and then view it by pointing your browser to it – for example, http://localhost/jsp/coffee.jsp . You should see something like this:

<html> <head> </head> <body> Waiter, can I have a cup of Java, please? </body> </html> </font>
And that, grasshopper, is your first scriptlet!

In JSP-lingo, a “scriptlet” is a block of code executed by the JSP engine when the user requests a JSP page. All scriptlets are enclosed within <%…%> tags (similar to ASP and PHP code), like this:

<% … JSP code … out.println(“Waiter, can I have a cup of Java, please?”); … JSP code … %>
Every JSP statement ends in a semi-colon – this convention is identical to that used in Perl, and omitting the semi-colon is one of the most common mistakes newbies make. Just as an example, here’s what happens when you omit the semi-colon from the example above:

Error: 500 Location: /jsp/coffee.jsp Internal Servlet Error: org.apache.jasper.JasperException: Unable to compile class: Invalid type expression. out.println(“Waiter, can I have a cup of Java, please?”) ^ : Invalid declaration. out.write(“rnrnrn”); ^ 2 errors at org.apache.jasper.compiler.Compiler.compile(, Compiled Code) at org.apache.jasper.servlet.JspServlet.doLoadJSP( at org.apache.jasper.servlet.JasperLoader12.loadJSP( at org.apache.jasper.servlet.JspServlet.loadJSP( at org.apache.jasper.servlet.JspServlet$JspServletWrapper.loadIfNecessary(JspSe at org.apache.jasper.servlet.JspServlet$JspServletWrapper.service(JspServlet.ja va:164) at org.apache.jasper.servlet.JspServlet.serviceJspFile( at org.apache.jasper.servlet.JspServlet.service(, Compiled Code) at javax.servlet.http.HttpServlet.service( at org.apache.tomcat.core.ServletWrapper.doService( at org.apache.tomcat.core.Handler.service( at org.apache.tomcat.core.ServletWrapper.service( at org.apache.tomcat.core.ContextManager.internalService( 7) at org.apache.tomcat.core.ContextManager.service( at org.apache.tomcat.service.connector.Ajp12ConnectionHandler.processConnection ( at org.apache.tomcat.service.TcpWorkerThread.runIt(, Compiled Code) at org.apache.tomcat.util.ThreadPool$, Compiled Code) at, Compiled Code)

It’s also possible to add comments to your JSP code, as in the example above. JSP supports both single-line and multi-line comment blocks – take a look:

<% // this is a single-line comment /* and this is a multi-line comment */ %>

Like PHP and Perl, white space is ignored in JSP.

Finally, the statement which actually prints output to the browser – as you’ll see, this is done using the “out” object. Since JSP is based on Java, and Java is an object-oriented language, most of your JSP statements will include object references such as this one.{mospagebreak title=Enter John Doe} Variables are the bread and butter of every programming language…and JSP has them too. A variable can be thought of as a programming construct used to store both numeric and non-numeric data; this data can then be used in different places in your JSP scriptlets.

JSP supports a number of different variable types: integers, floating point numbers, strings and arrays. Unlike PHP, which can automagically determine variable type based on the data it holds, JSP requires you to explicitly define the type of each variable before using it.

Every variable has a name – in JSP, a variable name is preceded by a keyword indicating the variable type, and must begin with a letter, optionally followed by more letters and numbers. Variable names are case-sensitive, and reserved keywords cannot be used as variable names.

For example, “popeye”, “one_two_three” and “bigPirateShip” are all valid variable names, while “byte” and “123″ are invalid variable names.

The following example demonstrates how variables can be used in a JSP document.

<html> <head> </head> <body> <%! // define variables here String name = “John Doe”; %> <% // code comes here out.println(“My name is ” + name ); %> </body> </html>

As you can see, we’ve first defined a variable named “name”, set things up so that it will hold string, or character, data, and assigned a value (“John Doe”) to it. This value is then used by the println() function to display a message in the HTML page.

My name is John Doe

If you’re sharp-eyed, you’ll have noticed a slight difference between the two JSP blocks in the example above – the first looks like this

<%! … %>

while the second looks like this

<% … %>

The first block, within which the variables are defined, is referred to as the “declaration block”; variables declared within this block are available globally, to each and every scriptlet within that JSP document.

You can also define a variable without assigning a value to it, or assign a value to it at a later stage – for example, the following code snippets are equivalent.

<% String name; name = “John Doe”; %> <% String name = “John Doe”; %>
{mospagebreak title=Putting Two And Two Together} Just as you can create a variable to hold strings, you can create variables of other types too:

int – used to store integers

char – used to store a single character in Unicode format

float and long – used to store floating-point numbers

boolean – used to store “true” and “false” values (note that unlike languages like C and PHP, JSP does not recognize 1 => true and 0 => false)

Let’s take a simple example that adds two numbers and displays the result.

<html> <head> </head> <body> <%! int alpha = 45; int beta = 34; int Sum; %> <% // add the two numbers Sum = alpha + beta; // display the result out.println(“The sum of ” + alpha + ” and ” + beta + ” is ” + Sum); %> </body> </html>

And the output is:

The sum of 45 and 34 is 79

In this case, we’ve simply defined two variables as integer values, assigned values to them, and added them up to obtain the sum.

In a similar vein, the next example demonstrates adding strings together:

<html> <head> </head> <body> <%! // define the variables String apples = “The lion “; String oranges = “roars in anger”; String fruitBasket; %> <% // print the first two strings out.println(“<b>The first string is</b>: ” + apples + “<br>”); out.println(“<b>The second string is</b>: ” + oranges + “<br>”); // concatentate the strings fruitBasket = apples + oranges; // display out.println(“<b>And the combination is</b>: ” + fruitBasket + “<br>Who says you can’t add apples and oranges?!”); %> </body> </html>

And the output is:

The first string is: The lion The second string is: roars in anger And the combination is: The lion roars in anger Who says you can’t add apples and oranges?!

In this case, the + operator is used to concatenate two strings together, which is then displayed via println().{mospagebreak title=Basket Case} The String object comes with a bunch of useful methods, which can come in handy when performing string manipulation.

The first of these is the length() method, used to obtain the (you guessed it!) length of a specific string. Let’s modify the example you just saw to demonstrate how this works:

<html> <head> </head> <body> <%! // define the variables String apples = “Purple pigs “; String oranges = “riding orange pumpkins”; String fruitBasket; %> <% // print the first two strings out.println(“<b>The first string is</b>: ” + apples + “<br>”); out.println(“<b>The second string is</b>: ” + oranges + “<br>”); // concatentate the strings fruitBasket = apples + oranges; // display out.println(“<b>And the combination is</b>: ” + fruitBasket + “(” + fruitBasket.length() + ” characters)<br>Who says you can’t add apples and oranges?!”); %> </body> </html>

And the output is:

The first string is: Purple pigs The second string is: riding orange pumpkins And the combination is: Purple pigs riding orange pumpkins(34 characters) Who says you can’t add apples and oranges?!

You can extract a specific character from the string with the charAt() method, which accepts an offset as parameter. For example, the following code snippet would return the character “o”:

<% String name = “Bozo The Clown”; out.println(name.charAt(3)); %>

Note that the offset 0 indicates the first character, since Java, like many of its counterparts, uses zero-based indexing.

You can also extract a segment of a string with the substring() method, which allows you to specify the start and end points of the string segment to be extracted. Take a look at this sentence and see if you can spot the hidden message within it:

<%! String me = “I am a highly-skilled and hardworking developer!”; %>

No? How about now?

<%! String me = “I am a highly-skilled and hardworking developer!”; String message; %> <% message = me.substring(0,2) + me.substring(15,22) + me.substring(26,27) + me.substring(45,48); out.println(message); %>

And here’s the output:

I killed her!
{mospagebreak title=Alphabet Soup For The Soul} If you’ve used C before, you’re probably already familiar with the “include” directive that appears near the beginning of every C program. JSP supports an equivalent include() function, which does much the same thing. Take a look at this simple example:

<html> <head> <title> Thought For The Day</title> </head> <body> Thought For The Day: <br> <%@ include file=”thought.html” %> </body> </html>


Ever wonder if illiterate people get the full effect of alphabet soup?

In this case, JSP will automatically read the contents of the file “thoughts.html”, and display a composite page which looks like this:

<html> <head> <title> Thought For The Day</title> </head> <body> Thought For The Day: <br> Ever wonder if illiterate people get the full effect of alphabet soup? </body> </html>

A very useful and practical application of the include() function is to use it to include a standard footer or copyright notice across all the pages of a Web site, like this:

<html> <head> </head> <body> …your HTML page… <br> <%@ include file=”footer.html” %> </body> </html>

where “footer.html” contains

<font size=-1 face=Arial>This material copyright Melonfire, 2001. All rights reserved.</font>

Now, this footer will appear on each and every page that contains the include() statement above – and, if you need to change the message, you only need to edit the single file named “footer.html”!

And that’s about it for this week. We’ve shown you the basic building blocks of JSP, and next time, we’ll be using those fundamental concepts to demonstrate JSP’s control structures. Don’t miss it!

Google+ Comments

Google+ Comments