Java web application development tutorial. We will see how to design the home page in JSP or HTML. Let’s continue the project development in Java.

As you know till now, We have already developed a basic project in Java using Maven and Added header and footer in the index.jsp. It will be our home page Let’s modify some code and create a beautiful Home page for your project.

How to add slider in Java project

Code to Add slider

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/JavaWebApp/image/Slide 1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/JavaWebApp/image/Slide 1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/JavaWebApp/image/Slide 1.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Now Let’s add header and footer  

Include header and footer in home page(Include JSP Page)

To include one JSP page into another JSP page is really simple. JSP have “include” attribute to include any HTML or JSP page.

Syntax:

<%@ include file="jsp/header.jsp"%>

Complete code of index.jsp

<%@ include file="jsp/header.jsp"%>
<br>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/JavaWebApp/image/Slide 1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/JavaWebApp/image/Slide 1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/JavaWebApp/image/Slide 1.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<br>
<%@ include file="jsp/footer.jsp"%>

Output:

Now the home page is ready with header and footer we can add more content according to the requirement. I hope this is enough to understand the concept to link all the pages individually.

In the upcoming tutorial will see how to design the login and registration page using JSP, servlet, and MySQL.