How to include one JSP from another JSP? In this JSP tutorial, we will understand How to include one JSP from another JSP or include header and footer in JSP.
Include Directive is used to include any page into JSP it can be an HTML page or JSP page. let’s see some JSP examples to Jsp page redirection and cover the following topics.
- How to include Header and Footer into the JSP page.
- Call one JSP page to another JSP page on a button click.
- How to include JSP files into JSP dynamically.
Include Directive in JSP
Include Directive in JSP is used to display the data of the page to another page. Let’s try to understand this concept by a real-time example.
For example, I need to develop a web application using JSP. and there are 20 pages in my application so on every page I need some common thing like header, footer, and sidebar. So I have two choices I can create a header and footer for every page. but it’s not a good programming practice. Now I have two follow another option which is the include directive. now I can create one header file and one footer file and Include this file on every page by using the include directive.
Syntax for Include Directive:
<%@include file="myJSP.jsp"%>
Example of Include Directive in JSP
header.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <h1>HEADER</h1> </body> </html>
footer.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>FOOTER</h1>
</body>
</html>
home.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <%@ include file="header.jsp"%> </head> <body> <h3>Welcome to Codebun.com</h3> </body> <%@ include file="footer.jsp"%> </html>
Taglib Directive in JSP
taglib directive in JSP is used to create the custom tag on the JSP page. We’ll discuss taglib in the custom tag upcoming tutorial.
Syntax of the taglib directive in JSP:
<%@taglib uri ="taglibURI" prefix="tag prefix"%>
Include Header and footer into JSP page
In this example, we will learn how can we include header and footer into the JSP page with the help of the include directive.
Step 1: Create a Dynamic Web Project in Eclipse.
Step 2: Add the following lines of code into the header.jsp file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title>Insert title here</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">Codebun</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link active">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active">Careers</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Step 3: Now, create a footer as shown below
<!-- Footer -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3 bg-info ">© 2021:
<a href="">Codebun Technology Solution Pvt. Ltd.</a>
</div>
<!-- Copyright -->
<!-- Footer -->
</body>
</html>
Step 4: Now, create a home page called index.jsp where we will include both the JSP file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div style="border: 1px black; height: 200px; width: 400px; margin-left: 35%; margin-bottom: 10%; margin-top: 10%">
<h1>This is Home Page</h1>
<p>--> here, we include the header and footer using include page directive.</p>
</div>
<%@include file="footer.jsp" %>
</body>
</html>
Step 5: At last, Run the application on the Server and see the following output
Thus, in this way, we can include Header and Footer inside a JSP page.
Call one JSP to another JSP on a button click
In this example, we will create a button and after clicking on the button it will redirect us to another JSP page
Step 1: Create a Dynamic Web Project in Eclipse.
Step 2: Add the following lines of code into the jsppageone.jsp file. Here, the action in the form tag is set to another JSP page.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body style="background: linear-gradient(50deg,#4CA1AF,#C4E0E5)">
<form action="jsppagetwo.jsp">
<button type="submit">Call Second Page</button>
</form>
</body>
</html>
Step 3: Now, create another JSP file which will be called after button click.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body style="background: linear-gradient(50deg,#834d9b,#d04ed6)">
<h1>Hello, Welcome to this Page</h1>
</body>
</html>
Step 4: At last, Run the application on the Server and see the following output
How to include JSP file in JSP dynamically
In this example, we will include one JSP page inside another JSP page using <jsp: include>.
Step 1: Create a Dynamic Web Project in Eclipse.
Step 2: Add the following lines of code into the firstjsppage.jsp file.
<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1 align="center"> Welcome to Codebun</h1>
<hr>
<h1 align="center">Today's Date</h1>
<h3 align="center">
<%
Date date = new Date();
%>
<%=date.toGMTString() %>
</h3>
<hr>
</body>
</html>
Step 3: Now, create another JSP file where we will include the above file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<jsp:include page="firstjsppage.jsp"/>
<h1 align="center">Home Page</h1>
<hr>
</body>
</html>
Step 4: At last, Run the application on the Server and see the following output
Thus, in this way, we include one JSP page to another JSP page with the help of the include directive.
