Developing JSP files

This login and registration application uses JSP for presentation layer. Our application has 10 JSP pages.

Developing JSP files

Developing JSP Files

    

This login and registration application uses JSP for presentation layer. Our application has 10 JSP pages.

  1. login.jsp
  2. success.jsp
  3. useraccount.jsp
  4. newaccountsuccess.jsp
  5. userUpdateSuccess.jsp
  6. forgotpassword.jsp
  7. successpwdsend.jsp
  8. changepassword.jsp
  9. changepasswordsuccess.jsp
  10. logout.jsp

  Now, we will look into all the above files one by one: 1. login.jsp

login.jsp renders the login page for the application. User can enter to the application and can access other resources and information after successfully logged in to the application.

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Login Page</title> 
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view>
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="Login" style="background-color: #ebf3fd;">
<h:form id="LoginForm">
<h:outputText value="#{LoginForm.text}" />
<h:panelGrid id="lpg" columns="2" >
<h:outputText value="User Id"/> 
<h:inputText id="username" value="#{LoginForm.userName}" styleClass="inputbox"/>
<h:outputText value=""/>
<h:message for="username" styleClass="errors"/>


<h:outputText value="Password"/> 
<h:inputSecret id="password" value="#{LoginForm.password}" styleClass="inputbox"/>
<h:outputText value=""/>
<h:message for="password" styleClass="errors"/>


<h:outputText value=""/>
<h:commandButton value="Login" action="#{LoginForm.validUser}" styleClass="submitButton"/>
</h:panelGrid>
</h:form>

<h:form>
<h:panelGrid id="bottompg" columns="1" >
<h:outputText value="New User?" style="font-family:arial, verdana;font-size:10px;"/>
<h:commandLink value="Register Here" action="useraccount" style="font-family:arial, verdana;font-size:12px;"/>
<h:outputText value=""/>
<h:commandLink value="Forgot Password?" action="forgotpassword" style="font-family:arial, verdana;font-size:12px;"/>
</h:panelGrid>
</h:form>

</rich:panel>
</h:panelGrid>
</center>
</f:view> 
</body>
</html>

This page generates the web page as below:

User enters its user id and password. If it is not valid then it shows the message indicating either user name or password is incorrect.



If the user enters correct information and is valid user then "success.jsp" is the next page for the user.

2. success.jsp

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Login Successful</title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body> 
<f:view> 
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="Login Successful" style="background-color: #ebf3fd;">
<center>
<h:outputText value="Welcome " style="font-size:15px;font-weight:bold"/>
<h:outputText value="#{sessionScope.username}" style="font-size:15px;font-weight:bold"/>
</center> 

<h:form>
<rich:spacer height="30"/><br>

<h:commandLink value="Edit User Profile" action="#{userForm.editProfile}" style="font-family:arial, verdana;font-size:12px;"/><br><br>

<h:commandLink value="Change Password" action="changePassword" style="font-family:arial, verdana;font-size:12px;"/><br><br>

<rich:spacer height="10"/>
<h:commandLink value="Logout" action="#{LoginForm.logout}" style="font-family:arial, verdana;font-size:12px;"/>
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view>
</body>
</html>

If user is valid then the next page that appears to the user is as below. This page welcomes the user with the user id and provides links to edit its profile information, change password and logout.

If user clicks on "Edit User Profile" link then "useraccount.jsp" page is rendered with the user information filled in the appropriate place on the page.

3. useraccount.jsp

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<f:view>
<head>
<title>User Registration/Information</title>
<style type="text/css">
.errors
{
color:red;
font-size:12px;
}
</style>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>


<center>
<h:form id="UserForm">
<h:panelGrid width="580px" columns="2" border="0">
<rich:panel header="User Information" style="background-color: #ebf3fd;">

<h:inputHidden value="#{userForm.id}" id="id"/>
<h:inputHidden id="hiddenUserName" value="#{userForm.userName}"/>

<h:outputText value="*" style="color:#ff0000;"/>are Mandatory. 

<h:panelGrid id="upg" columns="2" border="0" cellspacing="0" cellpadding="0">

<h:panelGroup> 
<h:outputText value="First Name" /> 
<h:outputText value="*" style="color:#ff0000;"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputText id="firstName" value="#{userForm.firstName}" styleClass="inputbox"/>
<h:message for="firstName" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup> 
<h:outputText value="Last Name" /> 
<h:outputText value="*" style="color:#ff0000;"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputText id="lastName" value="#{userForm.lastName}" styleClass="inputbox"/>
<h:message for="lastName" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup>
<h:outputText value="User Name"/> 
<h:outputText value="*" style="color:#ff0000"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputText id="userName" size="50" disabled="#{userForm.isUserNameDisabled}" value="#{userForm.userName}" styleClass="inputbox"/>
<h:message for="userName" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup id="pwd">
<h:outputText value="Password" /> 
<h:outputText value="*" style="color:#ff0000"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputSecret id="password" value="#{userForm.password}" redisplay="true" styleClass="inputbox"/>
<h:message for="password" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup>
<h:outputText value="Confirm Password" /> 
<h:outputText value="*" style="color:#ff0000"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputSecret id="confirmPassword" value="#{userForm.confirmPassword}" redisplay="true" styleClass="inputbox"/>
<h:message for="confirmPassword" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup>
<h:outputText value="E-Mail"/> 
<h:outputText value="*" style="color:#ff0000"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputText id="email" size="50" value="#{userForm.email}" styleClass="inputbox"/>
<h:message for="email" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup style="text-valign:top;display:block;height:100%;">
<h:outputText value="Address" /> 
<h:outputText value="*" style="color:#ff0000"/> 
</h:panelGroup>
<h:panelGroup>
<h:inputTextarea id="address" rows="8" cols="100" value="#{userForm.address}" styleClass="inputbox"></h:inputTextarea>
<h:message for="address" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup>
<h:outputText value="Country" />
<h:outputText value="*" style="color:#ff0000;"/>
</h:panelGroup>
<h:panelGroup>
<h:inputText id="country" size="50" value="#{userForm.select}" styleClass="inputbox"/>
<h:message for="country" styleClass="errors"/> 
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup>
<h:outputText value="State" />
<h:outputText value="*" style="color:#ff0000;"/>
</h:panelGroup> 
<h:panelGroup>
<h:inputText id="state" size="50" value="#{userForm.state}" styleClass="inputbox"/>
<h:message for="state" styleClass="errors"/> 
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

<h:panelGroup> 
<h:outputText value="Contact Number" />
<h:outputText value="*" style="color:#ff0000"/> 
</h:panelGroup> 
<h:panelGroup> 
<h:inputText id="contactNumber" size="50" value="#{userForm.contactNumber}" styleClass="inputbox"/>
<h:message for="contactNumber" styleClass="errors"/>
</h:panelGroup>
<h:outputText value=""/><rich:spacer height="15"/>


<h:panelGroup> 
<h:outputText value="" />
</h:panelGroup> 
<h:panelGroup> 
<h:commandButton value="#{userForm.buttonName}" action="#{userForm.saveUser}" styleClass="submitButton"/>
</h:panelGroup>
<h:outputText value=""/><h:outputText value=""/>

</h:panelGrid>
</rich:panel>
</h:panelGrid>
</h:form> 
</f:view>
</center>
</body>

</html>

This page can be reached by two ways either from the link "Edit User Profile" when use successfully enters to the "success.jsp" page or from the "login.jsp" page where "Register Here" link is given to register a new user.

If user clicks "Register Here" link for user registration then the page is rendered blank.

If you fill incorrect information or just submit the page without providing the information in the fields, then the page is re-rendered with some errors.

If user clicks "Edit User Profile" link for updating its information after successful login to the application, then it is filled with user information as shown below:


4. newaccountsuccess.jsp

This page shows the success message if user is registered successfully. User account information like login id and password are sent to the email id entered while registration.

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>User Registration Successful</title> 
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view> 
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="User Registration Successful" style="background-color: #ebf3fd;">
<h:form>
<h:outputText value="Thanks for registering with us. Account login details have been sent to your mail id." style="font-size:15px"/><br>
<rich:spacer height="30"/>

<h:outputLink value="login.jsf"><h:outputText value="Click to login"/></h:outputLink> 
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view> 
</body>
</html>


 

5. userUpdateSuccess.jsp

This page is rendered if user updates its information successfully.

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>User Update Successful</title> 
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view> 
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="User Update Successful" style="background-color: #ebf3fd;">
<h:form>
<h:outputText value="Account details have been updated." style="font-size:15px"/><br>
<rich:spacer height="30"/>

<h:commandLink value="Go back to main" action="gotomain"/> 
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view> 
</body>
</html>



6. forgotpassword.jsp

This page is called from the link "Forgot Password?" provided in the login page. This link is provided to send the user password to user email id if the user forgets it password. 

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Forget Password</title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view>
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="Send password by mail" style="background-color: #ebf3fd;">
<h:form id="sendPasswordByMail">
<h:panelGrid id="lpg" columns="2" >

<h:outputText value="Enter e-mail Id"/>
<h:inputText id="email" value="#{RetrievePassword.email}" styleClass="inputbox"/>
<h:outputText value=""/>
<h:message for="email" styleClass="errors"/>

<h:outputText value="" rendered="#{RetrievePassword.isRendered}"/>
<h:outputText value="This e-mail id is not registered with us." styleClass="errors" rendered="#{RetrievePassword.isRendered}"/>
<h:outputText value="" rendered="#{RetrievePassword.isRendered}"/>
<h:outputText value="Please Try Again " styleClass="errors" rendered="#{RetrievePassword.isRendered}"/>

<h:outputText value=""/>
<h:commandButton value="Send Password" action="#{RetrievePassword.check}" styleClass="submitButton"/>

</h:panelGrid>
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view>
</body>
</html>

This page looks as below:

User fills its email id provided while registration. If it's not so then the message appears as below:



If user fills correct email id then success page "successpwdsend.jsp" is rendered.

7. successpwdsend.jsp

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>Password sending success</title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view>
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="Password sending successful" style="background-color: #ebf3fd;">
<h:form>
<h:outputText value="Your account password has been sent to your mail id. Please check your mail to get the password and login again." style="font-size:15px"/><br>
<rich:spacer height="30"/>

<h:outputLink value="login.jsf"><h:outputText value="Click to login"/></h:outputLink>
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view> 
</body>
</html>

If user email id is registered with the application then success message appears as below. This password is sent to the email id.


8. changepassword.jsp

User can change its password after successfully login to the application. "Change Password" link calls this page which asks the user to fill old password and then new password. 

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html> 
<head>
<title>Change Password</title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view>
<center>
<h:form id="changePwdForm">
<h:panelGrid width="400px" columns="2" border="0">
<rich:panel header="Change Password" style="background-color: #ebf3fd;">
<h:outputText value="#{userForm.text}" styleClass="textgreen"/>
<h:panelGrid id="lpg" columns="2" >

<h:outputText value="Old Password" />
<h:inputSecret id="oldpwd" redisplay="true" size="50" value="#{userForm.oldPwd}" styleClass="inputbox"/>

<h:outputText value="New Password"/>
<h:inputSecret id="newPwd" redisplay="true" size="50" value="#{userForm.newPwd}" styleClass="inputbox"/>
<h:outputText value=""/>
<h:message for="newPwd" styleClass="errors"/>

<h:outputText value="Confirm Password"/> 
<h:inputSecret id="newPwdConfirm" redisplay="true" size="50" value="#{userForm.newPwdConfirm}" styleClass="inputbox"/>
<h:outputText value=""/>
<h:message for="newPwdConfirm" styleClass="errors"/>

<h:outputText value=""/>
<h:commandButton value="Change Password" action="#{userForm.changePassword}" styleClass="submitButton"/>
</h:panelGrid>
</rich:panel>

</h:panelGrid>
</h:form> 
</f:view>
</body>
</html>

If user fills its old password incorrect then the user gets message to fill the correct old password.



If everything is correct then password is changed and "changepasswordsuccess.jsp" is called.

9. changepasswordsuccess.jsp

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>


<html>
<head>
<title>Password change success</title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view>
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="Changing Password Successful" style="background-color: #ebf3fd;">
<h:form id="LoginForm">
<h:outputText value="Password Changed successfully." style="font-size:15px"/><br>
<rich:spacer height="30"/>

<h:commandLink value="Go back to main" action="gotomain"/>
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view> 
</body>
</html>


10. logout.jsp

User can logout from the application by clicking the "Logout" link provided on the success.jsp page when user logs in successfully. This page show the message that the user has logged out successfully.

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Logout Successful</title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<f:view>
<center>
<h:panelGrid width="380px" columns="2" border="0">
<rich:panel header="Logout Successful" style="background-color: #ebf3fd;">
<h:form id="LoginForm">
<h:outputText value="You have been successfully Logged out." style="font-size:15px"/><br>
<rich:spacer height="30"/>

<h:outputLink value="login.jsf"><h:outputText value="Click to login Again"/></h:outputLink>
</h:form>
</rich:panel>
</h:panelGrid>
</center>
</f:view> 
</body>
</html>

Tutorials

  1. RichFaces: Login & Registration Application:
  2. Developing directory structure for the application (In Tomcat Server):
  3. Developing database for the application
  4. Creating configuration files
  5. Developing JSP files
  6. Creating managed beans
  7. Creating a properties file
  8. Registering managed bean and defining navigation rules
  9. Running the application
  10. RichFaces: Login & Registration Application