Struts 2 Login Application

Developing Struts 2 Login Application
In this section we are going to develop login application based on Struts 2 Framework. Our current login application does not validate the user against the database. Instead login name and password are validated against the hardcode values (User: Admin and Password: Admin) in the actions class.

Working of the application

Login page is displayed to take the input.
User enters user name and password and then clicks on the "Login" button.
User validation is done in action class and if user enters Admin/Admin in the user name/password fields, then success pages is displayed. Otherwise the error message is displayed on the screen.

Steps to develope the application

Here are simple and easy steps to develop Login page in the using Struts 2 framework.

Develop Login Form
The GUI of the application consists of login form (login.jsp) and success message page (loginsuccess.jsp).
The login.jsp is used to display the login page to the user. In our application it is saved in "webapps\struts2tutorial\pages\" folder. Here is the code of login.jsp file:

<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>Struts 2 Login Application!</title>

<link href="<s:url value="/css/main.css"/>" rel="stylesheet" type="text/css"/>

</head>
<body>
<s:form action="doLogin" method="POST">
<tr>
<td colspan="2">
Login
</td>

</tr>

<tr>
 <td colspan="2">
 <s:actionerror />
 <s:fielderror />
 </td>
</tr>

<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
<s:submit value="Login" align="center"/>

</s:form>

</body>

</html>

The code :
<s:actionerror />
<s:fielderror />
displays action errors and field validation errors.

The code <s:form action="doLogin" method="POST"> generates the html form for the application.

The code :
<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
generates Login Name and Password fields.

The submit button is generated through <s:submit value="Login" align="center"/> code.

When application is executed it generates the following html code:

<html>
<head>
<title>Struts 2 Login Application!</title>

<link href="/struts2tutorial/css/main.css" rel="stylesheet"
type="text/css"/>

</head>
<body>
<form id="doLogin" name="doLogin" onsubmit="return true;" 
action="/struts2tutorial/roseindia/doLogin.action" method="POST">
<table class="wwFormTable">

<tr>
<td colspan="2">
Login
</td>

</tr>

<tr>
<td class="tdLabel"><label for="doLogin_username" class="label">
Login name:</label>
</td>
<td><input type="text" name="username" value="" id="doLogin_username"/>
</td>
</tr>

<tr>
<td class="tdLabel"><label for="doLogin_password" class="label">
Password:</label></td>
<td><input type="password" name="password" id="doLogin_password"/>
</td>
</tr>

<tr>
<td colspan="2"><div align="center"><input type="submit" 
id="doLogin_0" value="Login"/>
</div></td>
</tr>
</table></form>
</body>

</html>

On viewing the above generated html code you will find that Struts 2 automatically generates form, html table, label for the html elements. This is the another great feature of Struts as compared to Struts 1.x.

The loginsuccess.jsp page displays the Login Success message when user is authenticated successfully. Here is the code of loginsuccess.jsp file:

<html>

<head>

<title>Login Success</title>

</head>

<body>

Login Successful

</body>

</html>

Developing Action Class
Now let's develop the action class to handle the login request. In Struts 2 it is not necessary to implement the Action interface, any POJO object with execute signature can be used in Struts 2. The Struts 2 framework provides a base ActionSupport class to implement commonly used interfaces. In our action class (Login.java) we have implemented ActionSupport interface. Our "Login.java" is saved in the "webapps\struts2tutorial\WEB-INF\src\java\net\roseindia" directoy. Here is the code of Login.java action class:

package net.roseindia;
import com.opensymphony.xwork2.ActionSupport;
import java.util.Date;

/**
* Validate a user login. 
*/
public class Login extends ActionSupport {

 public String execute() throws Exception {
 System.out.println("Validating login");
 if(!getUsername().equals("Admin") || !getPassword().equals("Admin")){
 addActionError("Invalid user name or password! Please try again!");
 return ERROR;
 }else{
 return SUCCESS;
 }
 }

 // ---- Username property ----

 /**
* Field to store User username.
* 
*/
 private String username = null;

 /**
* Provide User username.
*
* @return Returns the User username.
*/
 public String getUsername() {
 return username;
 }

 /**
* Store new User username
*
* @param value The username to set.
*/
 public void setUsername(String value) {
 username = value;
 }

 // ---- Username property ----

 /**
* Field to store User password.
* 
*/
 private String password = null;

 /**
* Provide User password.
*
* @return Returns the User password.
*/
 public String getPassword() {
 return password;
 }

 /**
* Store new User password
*
* @param value The password to set.
*/
 public void setPassword(String value) {
 password = value;
 }

}

Configuring action mapping (in struts.xml)
Now we will create action mapping in the struts.xml file. Here is the code to be added in the struts.xml:

<action name="showLogin">
<result>/pages/login.jsp</result>
</action>

<action name="doLogin" class="net.roseindia.Login">
<result name="input">/pages/login.jsp</result>
<result name="error">/pages/login.jsp</result>
<result>/pages/loginsuccess.jsp</result>
</action>

In the above mapping the action "showLogin" is used to display the login page and "doLogin" validates the user using action class (Login.java).

CSS file (main.css)
This css file is used to enhance the presentation of the login form. The main.css is saved into "\webapps\struts2tutorial\css" directory.
Here is the code of main.css:

@CHARSET "UTF-8";

body {
font: 12px verdana, arial, helvetica, sans-serif;
background-color:#FFFFFF;
}

table.wwFormTable {
font: 12px verdana, arial, helvetica, sans-serif;
border-width: 1px;
border-color: #030;
border-style: solid;
color: #242;
background-color: #ada;
width: 30%;
margin-left:35%;
margin-right:35%;
margin-top:15%;
}

table.wwFormTable th {
}

table.wwFormTable tr td {
background-color: #dfd;
margin: 5px;
padding: 5px;
}

.tdLabel {
/*
border-width: 1px;
border-color: #afa;
border-style: solid;
*/
font-weight: bold;
align: top;
}

.label {
}

.errorMessage {
color: red;
font-size: 0.8em;
}

#headerDiv {
border-style: solid;
border-width: 1px 1px 0px;
border-color: black;
padding: 5px;
background-color: #7a7;
/* height: 22px; */
height: 1.8em;
/* margin-bottom: 12px; */
}

#buttonBar {
border-width: 0px 1px 1px;
border-style: solid;
border-color: black;
color: white;
margin-bottom: 12px;
background-color: #7a7;
height: 1.6em;
padding: 5px;
}

#appName {
color: white;
font-size: 1.8em;
}

#pageTitle {
font-size: 1.4em;
color: #dfd;
clear: none;
}

#appName, #pageTitle {
float: right;
}

#menuContainer {
float: left;
}

#brandingContainer {
float: right:
text-align: right;
}

In the next section we will learn how to add validation to the login application.

Struts 2 Login Application

Struts 2 Login Application

Struts 2 Login Application

Tutorials