Open in app

Sign in

Write

Sign in

Advanced Java Servlet & JSP

omprakash
14 min readMay 13, 2024

--

Servlet

JSP stands for Java Servlet Pages and is used for creating the web pages with dynamic content and JSP tags to retrieve the data from the database. So developers can use Java code in HTML files, XML

Servlet is a simple Java program that runs on a server and is capable of handling requests and generating dynamic responses. Let’s say we are using Chrome on the client side and we are requesting the server by using any particular website once the request reaches the server then it will check in the database and send the response and the server we are talking about is a Java Program that is Servlet.

Servlet in Java

Now you need to install a web server and servlet, we have many web servers including Tomcat, Jetty, Nginx, WildFly, Httpd, and WebLogic Server. But here we will use Tomcat because it’s an open-source web server and servlet container that provides a reliable platform for hosting Java-based web applications.

After installation, we will create a Dynamic web project in Eclipse, now right click on a project and go to build path then libraries and class then add an external jar. open src then webapp right-click on it and create a new jsp file that is index.jsp and write a bunch of code given below right-click on the project and run on a server.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My JSP</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<h1>Welcome to JSP Home page</h1>

</body>
</html>

Now create a servlet, go to Java Resources (inside the project) then src/main/java → create a package called Servlet, and inside the servlet package create a LoginServlet.java

// For Jakarta EE (starting from version 9)
import jakarta.servlet.http.HttpServlet;

// For Java EE (up to version 8)
import javax.servlet.http.HttpServlet;

Make sure to choose the appropriate import based on the version of the servlet API you are targeting.

Now after this, we need to create a link So that whenever the end user clicks on the link they should redirected to the particular page they requested to a server, For this we have two methods we can write in LoginServlet.java like

package Servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// here i have created a link 
@WebServlet(urlPatterns = "login", name="LoginServlet")

public class LoginServlet extends HttpServlet{

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  System.out.println("Login servlet created");
  PrintWriter writer = resp.getWriter();
  writer.println("<h1>I am servlet </h1>");
 }

}

Or we could have also written it separately in web.xml, We need to create a user-defined servlet using the servlet interface using the GenericServlet class.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>Learn JSP</display-name>
  
   <servlet>
 <servlet-name>Login</servlet-name>
  <servlet-class>Servlet.LoginServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  <servlet-name>Login</servlet-name>
  <url-pattern>/login</url-pattern>
  </servlet-mapping>
 
 
  
  
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
</web-app>

and if you get any error like this because I am using a different version of the Tomcat server, So we should have to follow according to the version and it is compactable to so for this version we should have to follow web.xml method.

Just remove that link code you have written in LoginServlet.java and follow the creating link on web.xml, now restart the server once again

Create a Servlet using HttpServlet

To support the GET and POST methods in our server, we should extend the HttpServlet class. Extending the HttpServlet allows for protocol-specific functionalities in a servlet. Extend the HTTP Server and overwrite the doGet and doPost methods according to the request type (GET or POST).

Implementing a Servlet using HttpServlet Servlet can output a response to the console or browser. Creating a servlet requires defining a fully qualified class name and a servlet mapping. Creating a servlet using HttpServlet and implementing methods like DO GET and DO POST.

package RegisterServlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegisterFormServlet extends HttpServlet{

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  String name = req.getParameter("user_name");
  String email = req.getParameter("user_email");
  String password = req.getParameter("user_password");
  String course = req.getParameter("user_course");
  
  resp.setContentType("text/html");
  
  PrintWriter out = resp.getWriter();
  out.print("<h1>Name: "+name+"</h1>");
  out.print("<h1>Email: "+email+"</h1");
  out.print("<br>");
  out.print("<h1>Password: "+password+"</h1>");
  out.print("<h1>Course: "+course+"</h1>");
  
 }
 
}

Submit Form to Servlet How to fetch data of form using servlet — Servlet & JSP

Folder structure of this particular form project

// in side Java Resources
// src/main/java -> RegisterServlet (package)
// RegisterFormServlet.java
package RegisterServlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegisterFormServlet extends HttpServlet{

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  String name = req.getParameter("user_name");
  String email = req.getParameter("user_email");
  String password = req.getParameter("user_password");
  String course = req.getParameter("user_course");
  
  resp.setContentType("text/html");
  
  PrintWriter out = resp.getWriter();
  out.print("<h1>Name: "+name+"</h1>");
  out.print("<h1>Email: "+email+"</h1");
  out.print("<br>");
  out.print("<h1>Password: "+password+"</h1>");
  out.print("<h1>Course: "+course+"</h1>");
  
  out.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\">");
  out.println("<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js\"></script>");
       
  
 }
 
}
// web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>Form_Submit_App_JSP</display-name>
  
  
  <servlet>
 <servlet-name>App</servlet-name>
  <servlet-class>RegisterServlet.RegisterFormServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  <servlet-name>App</servlet-name>
  <url-pattern>/register</url-pattern>
  </servlet-mapping>
  
  
  
  
  
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
</web-app>

Contact.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
    .contact-section {
        padding: 50px 0;
    }
    .contact-info {
        margin-bottom: 30px;
    }
    .contact-info p {
        margin-bottom: 10px;
    }
    .contact-form {
        max-width: 600px;
    }
    .dark-mode {
        background-color: #000 !important;
        color: #fff !important;
    }
</style>

<script>
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
}
</script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="form.jsp">Form</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="registration.jsp">Registration</a>
      </li>
      <li class="nav-item">
        <button class="btn btn-primary" onclick="toggleDarkMode()">Toggle Mode</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5 contact-section">
    <div class="row">
        <div class="col-md-6">
            <div class="contact-info">
                <h2>Contact Information</h2>
                <p><strong>Address:</strong> 524 Main Street Ongole, Prakasam, Andhra Pradesh</p>
                <p><strong>Phone:</strong> +91 9392744920</p>
                <p><strong>Email:</strong> om524@gmail.com</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="contact-form">
                <h2>Contact Form</h2>
                <form action="#" method="post">
                    <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message:</label>
                        <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.dark-mode {
        background-color: #000 !important;
        color: #fff !important;
    }
</style>

<script>
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
}
</script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.jsp">Contact</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Form</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="registration.jsp">Registration</a>
      </li>
      <li class="nav-item">
        <button class="btn btn-primary" onclick="toggleDarkMode()">Toggle Mode</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5">
    <h1>Form</h1>
    <p>Form content goes here...</p>
    
<div class="container p-5">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card">
                <div class="card-body">
                    <h1 class="text-center">Registration Form</h1>
                    <form method="post" action="register">
                        <div class="form-group">
                            <label>Enter Name: </label>
                            <input type="text" name="user_name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Enter Email: </label>
                            <input type="email" name="user_email" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Enter Password: </label>
                            <input type="password" name="user_password" class="form-control">
                        </div>
                        
                        <div class="form-group">
                            <label>Select Course: </label>
                            <select class="form-control" name="user_course">
                                <option value="Select">Select</option>
                                <option value="B.Tech">B.Tech</option>
                                <option value="M.Tech">M.Tech</option>
                                <option value="MCA">MCA</option>
                                <option value="BCA">BCA</option>
                            </select>
                        </div>
                        
                        <button class="btn btn-primary">Register</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
    
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
    body {
        background-color: #fff; 
        color: #000;
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #333;
        color: white;
        text-align: center;
    }
    .dark-mode {
        background-color: #000 !important;
        color: #fff !important;
    }
</style>
<script>
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.jsp">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="form.jsp">Form</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="registration.jsp">Registration</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="btn btn-primary" onclick="toggleDarkMode()">Toggle Mode</button>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="login.jsp">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="signup.jsp">Signup</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5">
    <h1>Welcome to My Website!</h1>
    <p>This is the home page of my website.</p>
</div>

<div class="footer">
    <p>Om Prakash &copy; 2024</p>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.dark-mode {
        background-color: #000 !important;
        color: #fff !important;
    }
</style>

<script>
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
}
</script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.jsp">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="form.jsp">Form</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="registration.jsp">Registration</a>
      </li>
      <li class="nav-item">
        <button class="btn btn-primary" onclick="toggleDarkMode()">Toggle Mode</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5">
    <h1>Login</h1>
    <form action="login" method="post">
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

registration.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registration</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.dark-mode {
        background-color: #000 !important;
        color: #fff !important;
    }
</style>

<script>
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
}
</script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.jsp">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="form.jsp">Form</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Registration</a>
      </li>
      <li class="nav-item">
        <button class="btn btn-primary" onclick="toggleDarkMode()">Toggle Mode</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5">
    <h1>Registration</h1>
    <p>This is my Registration form ...</p>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

signup.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Signup</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.dark-mode {
        background-color: #000 !important;
        color: #fff !important;
    }
</style>

<script>
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
}
</script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.jsp">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="form.jsp">Form</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="registration.jsp">Registration</a>
      </li>
      <li class="nav-item">
        <button class="btn btn-primary" onclick="toggleDarkMode()">Toggle Mode</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5">
    <h1>Signup</h1>
    <form action="signup" method="post">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>
        <button type="submit" class="btn btn-primary">Signup</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

well, it’s not fully responsive we will further make it more. The output of the above program looks like this

RequestDispatcher in web.xml

The welcome file is for creating a home page according to a particular request.

Understanding Welcome File List and Request Dispatcher in web applications.

  • Welcome File List is used to specify the default page for a web application. Request Dispatcher is used to control the flow of requests and responses between the client and the server.
  • Request Dispatcher can forward a request to another resource or include the response of another resource in the current response, helping in server-side processing.

Using Welcome File List and Request Dispatcher to manage server requests

  • We use Welcome File List to specify the default page for the server
  • Request Dispatcher interface helps to forward requests to other resources like HTML, Servlet, JSP

RequestDispatcher in Servlet — Forward and Include

  • RequestDispatcher forwards requests to another resource, like Servlet or JSP.
https://static.javatpoint.com/images/forward.JPG
  • RequestDispatcher can also include the output of another resource within the current response.
https://static.javatpoint.com/images/include.JPG

Session Tracking in Servlet and State Management in Servlet

Session tracking in servlet what is session tracking in servlet how do we do it and what are the techniques we have to use to track the session why do we do this session
session tracking is a way to maintain state, state means data that we can maintain data on the server through session tracking session tracking is a technique that helps the server to maintain data means it can remember for some time we call it state management a lot of times so we call it state management so why we do session tracking and This is also called State Management
So what do we do in our HTTP protocol Whenever we send a request to a client server on the web This protocol is followed This protocol is used This protocol is a stateless protocol Now what is this stateless protocol? Let’s understand this Because this is a stateless protocol, we need to manage the state That’s why we use session tracking to manage the state If you understand the meaning of stateless You will understand why it is necessary to manage the state and why we need to do session tracking To understand this, let’s take an example Suppose there is a server here This is your server which you have created with the help of Java You have deployed the Java website here There are several servlets written here And there is a client here which will open your website Will open your web application Whenever it needs a page of the server, it will send a request to your server Suppose this request is 1 And what your server will do is accept that request And basically this request will be sent to your server

Basically, this request will be forwarded to your serverlet And this request will be processed by the serverlet And this will generate a dynamic response And this response will be given You will see here the html page Now, because the html page is here, but you are using the browser So the browser knows how to read the html page very well So the browser will read it and explain it You will see here the content, image, etc. But if you want another page, then you will have to send a request again to the server You must have read client-server architecture Which means you have to send R2, request 2 But now when you send request 2, then you will get the stateless request You sent the first request The server thought that this is a new request, so I should give the home page Now when you send the second request The server is stateless The HTTP protocol is stateless What the server will do It will treat each request as a new request New request That means the request you have sent will also be treated as a new request The server will not be able to know That the person who was sending the request now Is the same person who was sending the first request Is the same person who was sending the first request
The server will not be able to find out that the person who was sending the request is the same person who was sending the request for the first time and is sending the request for the second time. What will it do? It will consider the second request as a new request. So it will treat it as a new user. It will do all the work that should be done with the new user. That means the data that came in the first request, it cannot remember anything. And if it does not remember the second request, then it will treat it as a new request. This is called the problem of state management. The problem of state management. And to manage this problem, what do you have to do? What you have to do is when a request comes, Like suppose you sent the first request and you logged in, If you log in, This means that when you send a request for the second time, it will already know that ABC has logged in. So it will show you the content of ABC without logging in again. But if we talk about stateless, So stateless means that if you log in to the first request, Then when you send the second request, then this login will be removed. It will not be able to remember which person sent the first request and which one is sending now. It will treat it as a new request. So stateless means that this server will not be able to remember you. That the data that came in the first request, the same person is sending the request in the second request.
the same person is sending the request in the other request server will treat every request as a new request if the state is managed then we can create a login logout if a person logs in then we can keep some data like a user id or we can keep name or email and we will keep it for some time till the person logs in at the same time if he sends another request because he is already logged in so we will show his name directly that you are logged in, don’t log in again if he logs in then what we will do if he sends a third request in the bar then we will show his login page otherwise we won’t show so stateless protocol means that user stateless protocol means that server treats every request as a new request now whether any client is sending.

Jsp
Java
Advanced Java Programming
Advanced Java Course
Advanced Java Concepts

--

--

omprakash
omprakash

Written by omprakash

21 Followers
35 Following

Aspiring web developer with a strong foundation in computer science and a passion for creating userfriendly and visually appealing websites.

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams