Login and Registration using JSP, Servlet, and MySQL
Registration and Login tutorial using JSP & servlet—(Part 1) In today's post, we will learn how to build a complete login and registration system using JSP ...
Almamun
Registration and Login tutorial using JSP & servlet—(Part 1)
In today's post, we will learn how to build a complete login and registration system using JSP & Servlet. In this post, we will design our Registration Page, and then we will code for the backend or server side. So no more intro, let's start our work.
You can watch the video tutorial for this post on my YouTube Channel.
https://youtu.be/Kg2bPGew7Ps
Registration using JSP, Servlet, and MySQL
Prerequisite of the project
NetBeans IDE.Apache Tomcat 8.5MySQL WorkbenchMySQL Connector Java 8.0Basic Knowledge of Java Class, and Servlet.Image for our project.
Step 1: Project Setup on NetBeans
This is the basic setup of our project. That will help us to better understand what we are doing.
Open your NetBeans IDE and create a new project.Expand your project, right-click on the Web Pages folder and create a new folder name css and img folder.Again right-click on the Web Pages folder to create two JSP page names, index.jsp and register.jsp.If NetBeans doesn't create a web.xml file, then right-click on the WEB-INF page>New>Other>web.xml to create a new web.xml file.Create a style.css file in the CSS folder as we created our web.xml file.Paste all of our required photos to the img folder.Now create a package for our Web Project. Right-click on the Sources Packages folder New> Java Package> package name and click finish.Right-click Libraries folder>Add JAR/Folder then select the mysql-connector-java-8.0.18.jar file
Step 2: Create a registration page
In this part, we will design our Registration form in the registration.jsp page, then copies the below code and paste it.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register Account</title>
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="regbox box">
<img class="avatar" src="img/collaboration.png">
<h1>Register Account</h1>
<form action="RegisterServlet" method="post">
<p>Username</p>
<input type="text" placeholder="Username" name="name" required>
<p>Useremail</p>
<input type="text" placeholder="Useremail" name="email" required>
<p>Password</p>
<input type="password" placeholder="Password" name="password"
required> <input type="submit" value="Register"> <a
href="index.jsp">Already have Account?</a>
</form>
</div>
</div>
</body>
</html>
Step 3: CSS style for the registration and login page
In this step, we will CSS code for our form. Open the style.css file from the css folder. Then copies the CSS Code from below and paste it into your style.css file.
body {
background-image: url(../img/green-curry-background.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: "Arimo", sans-serif;
margin: 0;
padding: 0;
height: 100%;
box-sizing: border-box;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
}
/***********************************************
Account Registartiona and Login
***********************************************/
.box,
.regbox {
width: 320px;
height: 420px;
background: #2f3542;
margin: 0;
padding: 30px;
top: 55%;
left: 50%;
color: #fff;
border-radius: 15px;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.avatar {
margin: 0;
padding: 0;
width: 150px;
height: 150px;
top: -22%;
position: absolute;
left: calc(50% - 75px);
border-radius: 50%;
}
.box h1 {
margin: 0;
padding: 30px;
text-align: center;
font-size: 30px;
}
.box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.box input {
width: 100%;
margin-bottom: 15px;
border-radius: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: none;
background: transparent;
border-bottom: 1px solid #fff;
outline: none;
height: 35px;
color: #fff;
font-size: 15px;
}
.box input[type="submit"] {
display: block;
border: none;
outline: none;
height: 35px;
background: #eccc68;
color: #000;
font-size: 20px;
border-radius: 20px;
}
.box input[type="submit"]:hover {
border: none;
outline: none;
height: 35px;
background: #ff6348;
color: #fff;
font-size: 20px;
border-radius: 20px;
cursor: pointer;
transition: 0.3s ease-out;
}
.box a {
text-decoration: none;
color: #fff;
font-size: 16px;
line-height: 20px;
}
.box a:hover {
color: #eccc68;
}
.regbox .avatar {
margin: 0;
padding: 0;
width: 150px;
height: 150px;
top: -19%;
position: absolute;
left: calc(50% - 75px);
border-radius: 50%;
}
.regbox h1 {
margin-top: 30px;
padding: 20px 0;
text-align: center;
font-size: 30px;
}
.regbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.regbox input {
width: 100%;
margin-bottom: 15px;
border-radius: 5px;
}
.regbox input[type="text"],
.regbox input[type="password"] {
border: none;
background: transparent;
border-bottom: 1px solid #fff;
outline: none;
height: 35px;
color: #fff;
font-size: 15px;
}
.regbox input[type="submit"] {
display: block;
border: none;
outline: none;
height: 35px;
background: #eccc68;
color: #000;
font-size: 20px;
border-radius: 20px;
}
.regbox input[type="submit"]:hover {
border: none;
outline: none;
height: 35px;
background: #ff6348;
color: #fff;
font-size: 20px;
border-radius: 20px;
cursor: pointer;
transition: 0.3s ease-out;
}
.regbox a {
text-decoration: none;
color: #fff;
font-size: 16px;
line-height: 20px;
}
.regbox a:hover {
color: #eccc68;
}
Step 4: Create MySQL database to store data
Now we will create a database to store our user data. So open your MySQL Workbench application and create a new database and give the name jsp_project .
— then create a user table with 4 columns which are (id primary key autoincrement, name, email unique, password)
Follow the picture
Creating tables in MySQL Workbench
Step 5: Write server-side business logic
1. Create a User Model java class. Expand your Source Packages folder by right-clicking your package>new>java class> name it User. Now click finish. Then copies the below code and paste it into your User.java file.
*don't forget to change your package name.
package newpackage;
public class User {
int id;
String name;
String email;
String password;
public User() {
}
public User(int id, String name, String email, String password) {
this.id = id;
this.name = name;
this.email = email;
this.password = password;
}
public User(String name, String email, String password) {
this.name = name;
this.email = email;
this.password = password;
}
public User(String email, String password) {
this.email = email;
this.password = password;
}
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 getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
2. Create a connection class that will be used to connect with our MySQL database.
*don't forget to change this part (test","root","almamun@123") with your database name, username, and password.
ConnectionPro.java
package newpackage;
import java.sql.*;
public class ConnectionPro {
private static Connection con;
public static Connection getConnection(){
try{
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","almamun@123");
}catch(Exception e){
e.printStackTrace();
}
return con;
}
}
3. Now we will create a query class that will help us to handle the database. I mean insert data to the database, and find user data from the database. I name it UserDatabase.
*don't forget to change your package name.
UserDatabase.java
package newpackage;
import java.sql.*;
public class UserDatabase {
Connection con ;
public UserDatabase(Connection con) {
this.con = con;
}
//for register user
public boolean saveUser(User user){
boolean set = false;
try{
//Insert register data to database
String query = "insert into user(name,email,password) values(?,?,?)";
PreparedStatement pt = this.con.prepareStatement(query);
pt.setString(1, user.getName());
pt.setString(2, user.getEmail());
pt.setString(3, user.getPassword());
pt.executeUpdate();
set = true;
}catch(Exception e){
e.printStackTrace();
}
return set;
}
}
4. Create a servlet, name is RegisterServlet. We mention it in our register.jsp page form action.
On the servlet, creation time, don't forget to deploy it in web.xml file. Copies the below code and paste it into the section.
String name = request.getParameter("name");
String email = request.getParameter("email");
String password = request.getParameter("password");
//make user object
User userModel = new User(name, email, password);
//create a database model
UserDatabase regUser = new UserDatabase(ConnectionPro.getConnection());
if (regUser.saveUser(userModel)) {
response.sendRedirect("index.jsp");
} else {
String errorMessage = "User Available";
HttpSession regSession = request.getSession();
regSession.setAttribute("RegError", errorMessage);
response.sendRedirect("register.jsp");
}
I hope you follow the steps properly. And it's working correctly. If you learned from here, please like the post, share the post and comment on the post if you have any questions.
Comments
Sign in to join the conversation