The JSP CRUD operation App with Codes With Pankaj

7 min readAug 30, 2023

CRUD stands for Create, Read, Update and Delete operations using a database and these are the operations which is the core of many applications.

What are JSP CRUD operations?

Create, Read/Retrieve, Update, and Delete are the four steps in the JSP CRUD process. The four basic roles of persistence storage are as follows.

The JSP CRUD operation can be defined as user interface conventions that allow the view, search, and modify information through computer-based forms and reports. JSP CRUD is a data-driven framework that makes use of HTTP action verbs in a consistent manner. There are a few key verbs in HTTP.

  • POST: This method creates a new resource.
  • GET: Retrieves information from a resource.
  • PUT: Replaces/updates an existing resource with a new one.
  • DELETE: Removes a resource from the system.

MySQL is an open-source relational database management system that can operate on various platforms. It is easy to manage.

Download my sql
https://dev.mysql.com/downloads/installer/

Download jstl.jar and mysql-connector.jar

Download jstl1.2.jar file
Download mysql-connector.jar

Creating MySQL Database

show databases;

create database cwp;

use cwp;

create table register(
id int auto_increment primary key,
name varchar(100),
password varchar(100),
email varchar(100),
sex varchar(20),
country varchar(100)
);

drop table register;

select * from register;


select * from users;

Directory Structure in Eclipse

codeswithpankaj

add library

Create a package p4n.in

p4n.in

p4n.in/user.java

path = JSPCrud\src\main\java\p4n\in\User.java
package p4n.in;

public class User {
private int id;
private String name,password,email,sex,country;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getCountry() {
return country;
}
public void setCountry(String country) {
this.country = country;
}

}

p4n.in/UserDao.java

path = JSPCrud\src\main\java\p4n\in\UserDao.java
package p4n.in;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class UserDao {
public static Connection getConnection(){
Connection con=null;
try{
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/cwp","root","admin");
}catch(Exception e){System.out.println(e);}
return con;
}
public static int save(User u){
int status=0;
try{
Connection con=getConnection();
PreparedStatement ps=con.prepareStatement("insert into register(name,password,email,sex,country) values(?,?,?,?,?)");
ps.setString(1,u.getName());
ps.setString(2,u.getPassword());
ps.setString(3,u.getEmail());
ps.setString(4,u.getSex());
ps.setString(5,u.getCountry());
status=ps.executeUpdate();
}catch(Exception e){System.out.println(e);}
return status;
}
public static int update(User u){
int status=0;
try{
Connection con=getConnection();
PreparedStatement ps=con.prepareStatement("update register set name=?,password=?,email=?,sex=?,country=? where id=?");
ps.setString(1,u.getName());
ps.setString(2,u.getPassword());
ps.setString(3,u.getEmail());
ps.setString(4,u.getSex());
ps.setString(5,u.getCountry());
ps.setInt(6,u.getId());
status=ps.executeUpdate();
}catch(Exception e){System.out.println(e);}
return status;
}
public static int delete(User u){
int status=0;
try{
Connection con=getConnection();
PreparedStatement ps=con.prepareStatement("delete from register where id=?");
ps.setInt(1,u.getId());
status=ps.executeUpdate();
}catch(Exception e){System.out.println(e);}

return status;
}
public static List<User> getAllRecords(){
List<User> list=new ArrayList<User>();

try{
Connection con=getConnection();
PreparedStatement ps=con.prepareStatement("select * from register");
ResultSet rs=ps.executeQuery();
while(rs.next()){
User u=new User();
u.setId(rs.getInt("id"));
u.setName(rs.getString("name"));
u.setPassword(rs.getString("password"));
u.setEmail(rs.getString("email"));
u.setSex(rs.getString("sex"));
u.setCountry(rs.getString("country"));
list.add(u);
}
}catch(Exception e){System.out.println(e);}
return list;
}
public static User getRecordById(int id){
User u=null;
try{
Connection con=getConnection();
PreparedStatement ps=con.prepareStatement("select * from register where id=?");
ps.setInt(1,id);
ResultSet rs=ps.executeQuery();
while(rs.next()){
u=new User();
u.setId(rs.getInt("id"));
u.setName(rs.getString("name"));
u.setPassword(rs.getString("password"));
u.setEmail(rs.getString("email"));
u.setSex(rs.getString("sex"));
u.setCountry(rs.getString("country"));
}
}catch(Exception e){System.out.println(e);}
return u;
}
}

now create file

  1. header.html
path = JSPCrud\src\main\webapp\header.html
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<title>Codes With Pankaj</title>


<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="https://www.codeswithpankaj.com/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<img src="img/1.png" height="70" width="70"> &nbsp
<span class="fs-4">Codes With Pankaj - @p4n.in </span>

</a>

<ul class="nav nav-pills">
<li class="nav-item"><a href="adduserform.jsp" class="nav-link active m-1 mt-3" aria-current="page">Add User</a></li>
<li class="nav-item"><a href="viewusers.jsp" class="nav-link active m-1 mt-3">View Users</a></li>
<li class="nav-item"><a href="viewusers.jsp" class="nav-link active m-1 mt-3">View all Users</a></li>

</ul>
</header>
<p> - JSP CRUD operations</p>
</div>

2. userform.html

path = JSPCrud\src\main\webapp\userform.jsp

<div class="container mt-5">
<form action="adduser.jsp" method="post">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="mb-3">
<label class="form-label">Sex:</label>
<div class="form-check">
<input type="radio" class="form-check-input" id="male" name="sex" value="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="female" name="sex" value="female">
<label class="form-check-label" for="female">Female</label>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label">Country:</label>
<select class="form-select" id="country" name="country">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Burma">Burma</option>
<option value="Australia">Australia</option>
<option value="Canada">Canada</option>
<option value="Brazil">Brazil</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="Mexico">Mexico</option>
<option value="South Africa">South Africa</option>
<option value="Other">Other</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Add User</button>
</form>
</div>

3. index.jsp

path = JSPCrud\src\main\webapp\index.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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<title>Codes With Pankaj</title>
</head>
<body>
<jsp:include page="Header.html" />
</body>
</html>

4. adduser.jsp

path = JSPCrud\src\main\webapp\adduser.jsp
<%@page import="p4n.in.UserDao"%>
<jsp:useBean id="u" class="p4n.in.User"></jsp:useBean>
<jsp:setProperty property="*" name="u"/>

<%
int i=UserDao.save(u);
if(i>0){
response.sendRedirect("adduser-success.jsp");
}else{
response.sendRedirect("adduser-error.jsp");
}
%>

5. adduser-error.jsp

path = JSPCrud\src\main\webapp\adduser-error.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add User Success</title>
</head>
<body>


<jsp:include page="Header.html"></jsp:include>

<div class="px-4 py-5 my-5">
<div class="col-lg-6 mx-auto">
<h4 class="display-5 fw-bold text-body-emphasis">Add New User</h4>
<div class="alert alert-danger" role="alert">
Sorry, an error occured!
</div>
<jsp:include page="userform.html"></jsp:include>
</div>
</div>

</body>
</html>

6. adduserform.jsp

path = JSPCrud\src\main\webapp\adduserform.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add User Form</title>
</head>
<body>
<jsp:include page="Header.html"></jsp:include>
<div class="px-4 py-5 my-5">
<div class="col-lg-6 mx-auto">
<h4 class="display-5 fw-bold text-body-emphasis">Add New User</h4>

<jsp:include page="userform.html"></jsp:include>
</div>
</div>
</body>
</html>

7. adduser-success.jsp

path = JSPCrud\src\main\webapp\adduser-success.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add User Success</title>
</head>
<body>


<jsp:include page="Header.html"></jsp:include>

<div class="px-4 py-5 my-5">
<div class="col-lg-6 mx-auto">
<h4 class="display-5 fw-bold text-body-emphasis">Add New User</h4>
<div class="alert alert-success" role="alert">
Record successfully saved!
</div>
<jsp:include page="userform.html"></jsp:include>
</div>
</div>
</body>
</html>

8. deleteuser.jsp

path = JSPCrud\src\main\webapp\deleteuser.jsp
<%@page import="p4n.in.UserDao"%>
<jsp:useBean id="u" class="p4n.in.User"></jsp:useBean>
<jsp:setProperty property="*" name="u"/>

<%
UserDao.delete(u);
response.sendRedirect("viewusers.jsp");
%>

9. editform.jsp

path = JSPCrud\src\main\webapp\editform.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Form</title>
</head>
<body>
<%@page import="p4n.in.UserDao,p4n.in.User"%>

<%
String id=request.getParameter("id");
User u=UserDao.getRecordById(Integer.parseInt(id));
%>
<jsp:include page="Header.html"></jsp:include>
<div class="col-lg-6 mx-auto">
<h4 class="display-5 fw-bold text-body-emphasis">Edit User</h4>
<form action="edituser.jsp" method="post">
<input type="hidden" name="id" value="<%=u.getId() %>"/>
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name" name="name" value="<%= u.getName()%>">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" class="form-control" id="password" name="password" value="<%= u.getPassword()%>">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="<%= u.getEmail()%>">
</div>
<div class="mb-3">
<label class="form-label">Sex:</label>
<div class="form-check">
<input type="radio" class="form-check-input" id="male" name="sex" value="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="female" name="sex" value="female">
<label class="form-check-label" for="female">Female</label>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label">Country:</label>
<select class="form-select" id="country" name="country">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Burma">Burma</option>
<option value="Australia">Australia</option>
<option value="Canada">Canada</option>
<option value="Brazil">Brazil</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="Mexico">Mexico</option>
<option value="South Africa">South Africa</option>
<option value="Other">Other</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Edit User</button>
</form>
</div>
</body>
</html>

10. edituser.jsp

path = JSPCrud\src\main\webapp\edituser.jsp
<%@page import="p4n.in.UserDao"%>
<jsp:useBean id="u" class="p4n.in.User"></jsp:useBean>
<jsp:setProperty property="*" name="u"/>

<%
int i=UserDao.update(u);
response.sendRedirect("viewusers.jsp");
%>

11. viewusers.jsp

path = JSPCrud\src\main\webapp\viewuser.jsp
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>View Users</title>
</head>
<body>

<%@page import="p4n.in.UserDao,p4n.in.*,java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<jsp:include page="Header.html"></jsp:include>

<div class="px-4 py-5 my-5">
<div class="col-lg-6 mx-auto">
<h4 class="display-5 fw-bold text-body-emphasis">All Users</h4>


<%
List<User> list=UserDao.getAllRecords();
request.setAttribute("list",list);
%>

<table class="table table-bordered border-dark table-striped">
<tr><th>Id</th><th>Name</th><th>Password</th><th>Email</th><th>Sex</th><th>Country</th><th>Edit</th><th>Delete</th></tr>
<c:forEach items="${list}" var="u">
<tr><td>${u.getId()}</td><td>${u.getName()}</td><td>${u.getPassword()}</td><td>${u.getEmail()}</td><td>${u.getSex()}</td><td>${u.getCountry()}</td>
<td><a class="btn btn-success" href="editform.jsp?id=${u.getId()}">Edit</a>
</td><td><a class="btn btn-danger" href="deleteuser.jsp?id=${u.getId()}">Delete</a>
</td></tr>
</c:forEach>
</table>
</div>
</div>

</body>
</html>

Download all codes

Add user page
View User
Edit user

No responses yet

Write a response