Home TechnologyHTML Registration and Log in using Java and MySql

Registration and Log in using Java and MySql

by Snehashis Mukherjee
Registration and Log in using Java and MySql

Hi readers how are you all? Registration and login is the most common thing in an application or websites or even in our real lives. Today in this article I’m going to explain how you can create Registration and Login by using MySql Database and Java.

Here you need following Softwares or tools to complete this project :

  1. An IDE: Here I’m using Eclipse
  2. Server: Apache Tomcat 8.5
  3. Database : phpMyAdmin

These all are my preferences you can use whatever alternative you are comfortable with.

Here the following languages /technology  used to complete the project :

  1. Java: Java is one of the most popular programming languages which is used to the backend of an application or website.
  2. Servlet: is a technology based on java language which is used to communicate with the frontend and backend of an application or website.
  3. HTML: is a Front end technology that is used to build the frontend or the user interface of an application of a website.
  4. Bootstrap: is a CSS framework that is used to apply style on the HTML so that a user can interact with the application easily. Here we use predefined classes to apply style on top of HTML.
  5. SQL: is a language that is used to communicate with Databases. To perform any task on the database we need to write a query using SQL.

Creating The project

Follow the below steps –>

1 : Open Eclipse -> click on file -> click on New -> Choose Dynamic Web project.

Project

2: Give the Project name -> choose runtime if you already created or else click on new Runtime -> select Tomcat version -> Choose the Installation directory -> click on Finish.

3: Click on next -> next -> Tick on Generate web.xml deployment Descriptor.

4: Click on the finish.

Also read How to create Calculator using HTML

MySql DB connection in java

First Open phpMyAdmin create a database called geeksteps, then copy the following code and run on the database.

Database geelsteps
CREATE TABLE `geeksteps`.`reg` ( `Name` VARCHAR(30) NOT NULL , `phone` REAL NULL , `email` VARCHAR(30) NOT NULL , `password` VARCHAR(20) NOT NULL ) ENGINE = InnoDB;

Creating HTML file

After creating the project you can see your project on the left panel. Click on the project to expand. Right-click on the WebContent folder, select new and create an HTML file and save it as Register.html After creating HTML file copy the following code in the file and save.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome to Geeksteps
</title>
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity
="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin
="anonymous">
 
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity
="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin
="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity
="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin
="anonymous">
 
 
</head>
<body>
 
<div class="container " style="width:30%; margin-top:15%">
<img alt="GeekSteps" src="22222.png" class ="mx-auto d-block" style = "margin-bottom:20px">
<button type="button" class="btn btn-outline-success btn-lg btn-block" data-toggle="modal" data-target="#register">Register</button>
<button type="button" class="btn btn-outline-primary btn-lg btn-block" data-toggle="modal" data-target="#login">Login</button>
</div>
 
 <form action ="Register" method="post">
  <!-- The Modal -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Fill The Details to Register</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
      
         <div class="form-group">
     <label for="name">Name :</label>
     <input type="text" class="form-control" name="regname"  placeholder="Enter Name">
   </div>
   
   <div class="form-group">
     <label for="phone">Phone :</label>
     <input type="number" class="form-control" name="regphone"  placeholder="Enter Contact Number">
   </div>
   
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" name="regemail"  placeholder="Enter email">
   </div>
   
   <div class="form-group">
     <label for="pass">Password</label>
     <input type="password" class="form-control" name="regpass" placeholder="Enter Password">
   </div>
   
    <div class="form-group">
     <label for="confirmpass">Confirm Password</label>
     <input type="password" class="form-control" name="regconpass" placeholder="Password">
   </div>
 
 
  
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
         <button type="submit" class="btn btn-primary">Register</button>
       </div>
      
          </div>
    </div>
  </div>
</div>
</form>
 
<!-- login -->
 
<form action="Login">
<div class="modal fade" id="login" tabindex="-1" role="dialog" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
      
        <ul class="nav nav-pills " id="pills-tab" role="tablist" style="font-size:12px ; color: black">
 
  <li class="nav-item" style="padding-left: 18px;">
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="phonepass"  >
  
   <div class="form-group">
     <label for="phone">Email/Phone :</label>
     <input type="number" class="form-control" name="logphn"  placeholder="Enter Contact Number">
   </div>
   
   
    <div class="form-group">
     <label for="confirmpass"> Password</label>
     <input type="password" class="form-control" name="logpass" placeholder="Password">
   </div>
  
   </div>
   
  </div>
</div>
 <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
         <button type="submit" class="btn btn-primary">Login</button>
       </div>
          </div>
    </div>
  </div>
 
</form>
 
</body>
</html>

Creating Servlet for Registration.

Before creating a Servlet you need to create a package that will store all your servlet classes. To create a package go to the Java Resources folder which is present inside your project folder. There you will find an src folder, just right click on src and select a new then select package. Give a package name and click on the finish.

After creating a package right-click on the package and select new and then choose Servlet. Give the name as Register and click on save. After that delete all the codes from the file and copy the below code and paste into the Register Servlet.

package com.geeksteps.reglogin; //change it with your package name.
 
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import javax.servlet.GenericServlet;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
 
 
 
 
@WebServlet("/Register")
public class Register extends GenericServlet {
 
 String url = "jdbc:mysql://localhost:3306?user=root&password=";
 private static final long serialVersionUID = 1L;
  
    
 
 
 @Override
 public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
 
 
 String name= req.getParameter("regname");
 String phone = req.getParameter("regphone");
 String email = req.getParameter("regemail");
 String pass = req.getParameter("regpass");
 String conpass = req.getParameter("regconpass");
 
 
 System.out.println(name+phone);
 
 try {
 Class.forName("com.mysql.jdbc.Driver");
 Connection connection = DriverManager.getConnection(url);
 
 String query="insert into geeksteps.register values(?,?,?,?)";
 PrintWriter printWriter = res.getWriter();
 printWriter.println("Registration Successful");
 PreparedStatement statement = connection.prepareStatement(query);
 statement.setString(1, name);
 statement.setString(2, phone);
 statement.setString(3, email);
 statement.setString(4, pass);
 
 
 if(pass.equals(conpass))
 {
 statement.executeUpdate();
 System.out.println("Registration Successful");
 }
 else {
 System.err.println("Registration UnSuccesful");
 }
 
 } catch (Exception e) {
 e.printStackTrace();
 }
 }
}
 

After pasting the code replace the first line of the package name with your package name and save it.

Creating a servlet for login.

Repeat the same procedure to create the Login servlet that I explained above. After creating copy the below code and paste into the Login.java

package com.geeksteps.reglogin;//replace this line with your package
 
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
 
import javax.servlet.GenericServlet;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
 
@WebServlet("/Login")
public class Login extends GenericServlet {
 private static final long serialVersionUID = 1L;
 
 String url = "jdbc:mysql://localhost:3306?user=root&password=";
 public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
 String query="select name from geeksteps.register where (phone=? or email=?) and password=?";
 String phone = req.getParameter("logphn");
 String pass = req.getParameter("logpass");
 
 PrintWriter printWriter = res.getWriter();
 
 try {
 Class.forName("com.mysql.jdbc.Driver");
 Connection connection = DriverManager.getConnection(url);
 
 
 
 PreparedStatement statement = connection.prepareStatement(query);
 statement.setString(1, phone);
 statement.setString(2, phone);
 statement.setString(3, pass);
 
 ResultSet resultSet = statement.executeQuery();
 
 if(resultSet.next()) {
 String name = resultSet.getString("name");
 System.out.println(name);
 
 printWriter.println("Welcome "+name);
 }
 else {
 System.out.println("Login Unsuccessful");
 
 printWriter.println("Login Unsuccessful");
 }
 
 
 } catch (Exception e) {
 e.printStackTrace();
 }
 }
 
}

After performing all the steps run the Register.html file on the server. Once your program runs you can register or login whatever you want to perform.

Check This Video for output:

Conclusion

I hope you have read the full article and you have successfully created your login and registration system using Java. If you have any problem then feel free to comment down your doubts. If you found this article useful then please share this article.
See you in the next article.

Happy Coding 😉

Related Posts

2 comments

Ankit Kumar December 24, 2019 - 1:33 PM

Great article, and clear code. But I don’t have experience with JAVA, but I can understand your code.

Reply

Leave a Comment