Creating a Simple Login Form using JSPs and Servlets in Eclipse - Part 1

Hi Guys,

Here, we are going to create a simple login form using jsps and servlets in eclipse.

Lets have a little introduction about these technical terms. 

JSP: Java Server Pages (JSP) is a technology to create dynamically generated web pages based on HTML, XML, or other document types.

Servlet: Servlets, are server side java programs. Servlets are mainly used as a controller to process or store data that was submitted from an HTML form and to provide dynamic content such as the results of a database query. They can be thought as Java Applets that run on servers.

Eclipse: It is an Integrated development environment (IDE) used to develop applications in Java and, by means of various plug-ins, other programming languages also and it is an open source. Here, we use this IDE to develop our login example source code.

                                   A user can enter his/her userId and password on this login form. If he/she is already registered earlier and his/her credentials are already stored in the backed database then the entered userId and password will be matched with the back end stored userId and password in the database. If they got matched successfully then a success page (welcome page) will be displayed otherwise an error page will be displayed. This is what we need to achieve.

For this tutorial, we use

    IDE:- Eclipse Java EE IDE Kepler Release

    JRE:- jre1.7.0_25 

    Web Server: apache-tomcat-7.0.42

    OS Platform: Windows 7 professional service pack 1

Step 1: Set up the Eclipse IDE.

    You can download the latest Eclipse IDE  from here. If you windows operating system is 32 bit you can download "Windows 32 Bit" or if it is 64 bit then you can download "Windows 64 Bit" version IDE. You can download the zip file (ex: eclipse-jee-kepler-R-win32-x86_64.zip) into your computer) and unzip it with any zip utility like winzip or 7zip. Open eclipse IDE by clicking on the eclipse.exe in the unzipped eclipse folder. It will prompt for "Select a workspace". You can give whatever path you may want to give here by browsing the path (ex: D:\GAP\GaneshTechBlog\workspace) or you can leave the default path as it is and click "OK". Eclipse IDE will be opened with the welcome page since its opened for the first time.

Now click on "Workbench" on the upper right corner, IDE will be opened with JAVA EE Perspective.

Step 2: Creating a Dynamic Web Project

    Now lets create a Dynamic Web Project in Eclipse. Select  "File --> New --> Dynamic Web Project".

    If you don't find "Dynamic Web Project" in the "New" list then select "Other --> Web --> Dynamic Web Project" and click "Next".

Then "New Dynamic Web Project" window will be opened like below and asking for project name. Give some name (ex: Login) in the "Project name:" text box.

Now, click on "New Runtime..." button and a "New Server Runtime Environment" window will be opened and select "Apache Tomcat v7.0" runtime environment under "Apache" and click "Next >". Specify the Tomcat installation directory by browsing the path to the folder where apache tomcat folder located in your system and you can leave the "JRE" for its default value as "Workbench default JRE" and then click finish.

Note: If you don't have "Apache Tomcat", You can download the zip file (ex: apache-tomcat-7.0.42.zip ) from here and unzip it at some location.

"New Server Runtime Environment" window will be closed now and leave the rest of the options to their defaults in "New Dynamic Web Project" window and click "Next >".

It goes to "Configure project for building a Java application." window then click "Next >" and then it goes to "Configure web module settings." window. Check the box for "Generate web.xml deployment descriptor" and click "Finish".

Now, "Login" Dynamic Web Project has been created and with the directory structure like below. Now we need to develop the source code to achieve our login task.

We need to have a web server to deploy our application into it in order to run our "Login" application. We already downloaded and configured "Apache Tomcat" server while creating the "Login" dynamic web project in eclipse and now we will create a server based on this configuration.

Select "Servers" view from below menu of eclipse. If the "Servers" view is not appearing in the below menu then select "Window" --> "Show View" --> "Servers". If there is no "Servers" option in "Show View" list then Select ""Window" --> "Show View" --> "Other...", then select "Servers" under "Server" from "Show View" window.

Now click on the link "No severs are available. Click this link to create a new server...".

Select "Tomcat v7.0 Server" for "Select the server type" and click on "Next >". Now, select "Login" under "Available:" section and click on "Add >" button so that "Login" project will be added to "Configured" section like below, then click "Finish".

Now, we will see the message "Tomcat v7.0 Server at localhost [Stopped, Republish]" under "Servers" view.

Step 3: Crating LoginForm page

    Now, lets create a login page with the help of a JSP which simply accepts the username and password as inputs from the user. Right click on "WebContenet" folder in the "Login" dynamic web project and select "New --> JSP File".

"New JSP File" window will be opened and give a file name (ex: LoginForm.jsp) in the "File name" text area.

And then click "Next >" and then click "Finish". "LoginForm.jsp" file is created now with some default source code and ready for get changed. Copy the below content and paste into "LoginForm.jsp" file.

<%@ 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">
<title>Login Form</title>
</head>
<body>
  <center>
        <form action=LoginServlet>
            <table border=1>
                <tr>
                    <th colspan="2">Login Form</th>
                </tr>
                <tr>
                    <td>Enter your UserId:</td>
                    <td><input type=text name=userId></td>
                </tr>
                <tr>
                    <td>Enter your Password:</td>
                    <td><input type=password name=pwd></td>
                </tr>
                <tr>
                    <td><input type=submit value=submit></td>
                    <td><input type=reset value=refresh></td>
                </tr>
            </table>
        </form>
    </center>  
</body>
</html>

"LoginForm.jsp" will be looking like below now.

Now, we can run the "LoginForm.jsp" by right clicking on the file and selecting "Run As" --> "Run on Server".

"Run On Server" window will be opened. Server State is "stopped" now.

Click on "Next >" and observe "Login" resource is in "Configured" section and now click "Finish". Server will be started now and "LoginForm.jsp" will be compiled, deployed on the server and executed. We will see now the login page at the url "http://localhost:8080/Login/LoginForm.jsp" in the eclipse window. You can copy this url and paste into browser address bar and see the login page.

Lets continue this in "Creating a Simple Login Form using JSPs and Servlets in Eclipse - Part 2".