Spring MVC - Basic Example using JSTL

JSP Standard Tag Library (JSTL) is a collection of custom tags that simplifies JSP development by eliminating the need for Java code inside JSP pages. It provides tags for iteration, conditional processing, formatting, URL handling, and XML manipulation.

• Reduces Java code inside JSP pages.
• Makes JSP pages cleaner and easier to maintain.
• Improves readability and reusability of views.

In Spring MVC applications, JSTL is commonly used to display collections, process conditions, and format data directly inside JSP pages.

Common JSTL Core Tags

Following are the core tags that is used commonly in Spring Mvc Applications.

To use JSTL tags in a JSP page, add the following directive:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Step-by-Step Implementation of JSTL in Spring MVC

Basically, we are going to develop a simple form like the below image and we are going to display the data that are entered by the user on the next page. 

Step 1: Create a Maven Project

• Open STS IDE.
• Click File - New - Maven Project.
• Select Create a simple project (Select archetype ) and click Next.

Then Enter the following details:

• Group Id: com.gfg
• Artifact Id: SpringMVCMultipleViewPage
• Packaging: war

Click Finish.

Step 2: Add Required Dependencies

Add the following maven dependencies and plugin to your pom.xml file.

<project xmlns="https://maven.apache.org/POM/4.0.0"
    xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.geeksforgeeks</groupId>
    <artifactId>simple-calculator</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>simple-calculator Maven Webapp</name>
    <url>http://maven.apache.org</url>
  
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>
      
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.18</version>
        </dependency>
      
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
  
    <build>
        <finalName>simple-calculator</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.6</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Below is the final project structure of the Spring MVC project in the below image. 

Step 3: Configure Spring MVC

Create a Spring configuration class to enable component scanning and configure the View Resolver.

package com.geeksforgeeks.calculator.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@EnableWebMvc
@Configuration
@ComponentScan(basePackages = "com.geeksforgeeks.calculator.controllers")
public class CalculatorAppConfig {

    @Bean
    public InternalResourceViewResolver viewResolver() {

        InternalResourceViewResolver resolver =
                new InternalResourceViewResolver();

        resolver.setPrefix("/WEB-INF/view/");
        resolver.setSuffix(".jsp");

        return resolver;
    }
}

Step 4: Configure Dispatcher Servlet

Create an initializer class to register Spring MVC configuration and DispatcherServlet..

package com.geeksforgeeks.calculator.config;

import org.springframework.web.servlet.support
.AbstractAnnotationConfigDispatcherServletInitializer;

public class CalculatorAppInitializer
extends AbstractAnnotationConfigDispatcherServletInitializer {

    @Override
    protected Class<?>[] getRootConfigClasses() {
        return null;
    }

    @Override
    protected Class<?>[] getServletConfigClasses() {
        return new Class[] { CalculatorAppConfig.class };
    }

    @Override
    protected String[] getServletMappings() {
        return new String[] { "/geeksforgeeks.org/*" };
    }
}

Step 5: Create DTO Class

This class stores user information entered through the form.

package com.geeksforgeeks.calculator.dto;

public class JSTLDemoDto {

    private String name;
    private String[] skills;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String[] getSkills() {
        return skills;
    }

    public void setSkills(String[] skills) {
        this.skills = skills;
    }
}

Step 6: Create Controller Class

The controller receives requests and forwards them to appropriate JSP pages.

package com.geeksforgeeks.calculator.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import com.geeksforgeeks.calculator.dto.JSTLDemoDto;

@Controller
public class JSTLController {

    @RequestMapping("/jstl")
    public String showRegistrationPage(
            @ModelAttribute("jstldemo")
            JSTLDemoDto dto) {

        return "jstl-demo";
    }

    @RequestMapping("/display-data")
    public String displayData(
            @ModelAttribute("jstldemo")
            JSTLDemoDto dto) {

        return "display-data";
    }
}

Step 7: Create Input Page

This page collects user information and selected skills through Spring form tags.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
</head>
<body>

    <h1 align="center">JSTL Basic Example</h1>

    <form:form action="display-data" method="get" modelAttribute="jstldemo">

        <div align="center">

            <!-- A Simple Input Field -->
            <label>Name : </label>
            <form:input path="name" />

            <br />
            
            <!-- CheckBox Field -->
            <label>Skills : </label>
            Java : <form:checkbox path="skills" value="java"/>
            Python : <form:checkbox path="skills" value="python"/>
            C++ : <form:checkbox path="skills" value="cpp"/>
            DSA : <form:checkbox path="skills" value="dsa"/>
            Spring : <form:checkbox path="skills" value="spring"/>
            
            <br />
            
            <!-- Button Field -->
            <input type="submit" value="Display Data">
    
        </div>
    
    </form:form>
</body>
</html>

Similarly, create another view named "display-data" to display the data. So below is the code for the display-data.jsp file. 

Step 8: Create display-data.jsp

JSTL iterates through each element of the array and displays the actual skill names.

<%@ taglib uri="http://www.oracle.com/technetwork/java/index.html" prefix="c"%>
<html>
<head>
</head>
<body>

    <h1 align="center">JSTL Basic Example</h1>
    
    <h2>The details entered by the user are :</h2>
        Name:         ${jstldemo.name}     <br/>
        Skills:     ${jstldemo.skills} 

</body>
</html>

Step 9: Run the Application

• Right-click the project.
• Select Run As - Run on Server.
• Choose Apache Tomcat Server.
• Click Finish.

After that use the following URL to run your controller.

http://localhost:8080/simple-calculator/geeksforgeeks.org/jstl

Output:

And now click on the Display Data button to display the data that are entered by the user. 

To display the actual values stored inside the array, we need to iterate through the collection. JSTL provides the <c:forEach> tag, which makes iteration simple and readable.

Step 1: Add JSTL Dependency

Add the following dependency to the pom.xml file:

<!-- https://mvnrepository.com/artifact/jstl/jstl -->
<dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

Step 2: Import JSTL Tag Library

Add the JSTL Core tag library in display-data.jsp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Step 3: Iterate Through the Array

Use the <c:forEach> tag to display each skill individually:

<c:forEach var="skill" items="${jstldemo.skills}">

${skill}<br>

</c:forEach>

Below is the complete code for the display-data.jsp file. 

File: Updated display-data.jsp

<%@ taglib uri="http://www.oracle.com/technetwork/java/index.html" prefix="c"%>
<html>
<head>
</head>
<body>

    <h1 align="center">JSTL Basic Example</h1>
    
    <h2>The details entered by the user are :</h2>
        Name:         ${jstldemo.name}     <br/>
        Skills:      
        
            <c:forEach var="skill" items="${jstldemo.skills}">
                ${skill}
            </c:forEach>     

</body>
</html>

Yes, this time we got the content. So this one is the basic real-world use case of JSTL in the Spring MVC application.