Introduction to JavaServer Pages (JSP)

In our previous post we saw a Java Servlet in action. Servlets make it easy for us to access parameters, cookies, and other resources on the server. But at the moment of generating a response (HTML), it can become tedious quickly.

JavaServer Pages (JSP) is the solution for this problem. A JSP page allows us to embed Java code in a HTML document. This is a concept used in other technologies, such as Active Server Pages (ASP) and PHP.

A JSP page is in reality a servlet. When the JSP page is requested for the first time, a JSP compiler parses the page and generates a servlet to process the request. Any posterior call is processed by the servlet.

In this post we’ll create the same web page from the previous post, but this time we’ll use a JSP page instead of a servlet.

Open the project we created in the previous post, or create a new project in NetBeans. If you choose to create a project, you’ll need the two classes from the business layer in the previous project.

The first class is ServletSample.Business.Product.

package ServletSample.Business;

public class Product {
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    public void setId(int id) { = id;

    public String getName() {
        return name;
    public void setName(String name) { = name;

    public float getPrice() {
        return price;
    public void setPrice(float price) {
        this.price = price;

    public Product(){ = -1; = "";
        this.price = 0f;

    public Product(int id, String name, float price) { = id; = name;
        this.price = price;


The second class is ServletSample.Business.ProductService.

package ServletSample.Business;

import java.util.List;
import java.util.ArrayList;

public class ProductService {

    public List<Product> getProducts(){
        List<Product> products = new ArrayList<Product>();
        products.add(new Product(1,"HP Laptop",799f));
        products.add(new Product(2,"IBM Desktop",599f));
        products.add(new Product(3,"Cannon Printer",159f));
        return products;

    public Product getProduct(int id) {
        Product product = null;
            case 1:
                product = new Product(1,"HP Laptop",799f);
            case 2:
                product = new Product(2,"IBM Desktop",599f);
            case 3:
                product = new Product(3,"Cannon Printer",159f);
        return product;

Now let’s create a new JSP page. Right-click on the project -> New -> JSP.


Name the new file product. Click on Finish.

Change the content of the new page to the following.

<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%@ page import="ServletSample.Business.Product" %>
<%@ page import="ServletSample.Business.ProductService" %>
<%@ page import="java.text.DecimalFormat" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Sample</title>
        ProductService service = new ProductService();
        String value = request.getParameter("id");

        if (value != null) {
            int id = Integer.parseInt(value);
            Product product = service.getProduct(id);

        <h1>Product Details</h1>
        <div>ID: <%= product.getId()%></div>
        <div>Name: <%= product.getName()%></div>
        <div>Price: $ <%= new DecimalFormat("#0.00").format(product.getPrice()) %></div>
        <div><a href="product.jsp">Go Back</a></div>

        <% } else { %>

        <h1>Product List</h1>

            <% for (Product product : service.getProducts()) {%>

                <td><%= product.getName()%></td>
                <td><a href="product.jsp?id=<%= product.getId()%>">Details...</a></td>
            <% }


At first glance, the page looks like an HTML page, but with the help of some directives, we are able to mix in Java code.

First, we use the directive <%@ page %> to set the contentType attribute of the page and to import a few Java classes.

With the <% %> directive we are able to execute any Java code. We declare variables, read a parameter, define an if-else block and a for loop.

Finally, the <%= %> directive is able to evaluate an expression and output the result directly to the HTML response. Please note that it’s not necessary to use the semicolon (;) with this directive.

Go ahead and run the project. Enter product.jsp at the end of the URL.

Product List

Each link is a link to the JSP page itself with the corresponding parameter to the product. Click on one of the links.

Product Details

The product details are shown. Click on the link to go back to the product list.

Please leave your comments.

Get Free Updates
Related Posts