In this example we are going to create a login and signup application using JSF framework. I am planning to use the below technologies to create the whole application.
- Eclipse IDE
- Tomcat server
- JSF framework
- Mysql Database
Before you proceed, make sure you have above software up and running. Also, we need to have some of the dependency jar files in order to compile and run the project. I am going to include the complete source code including the jsf and mysql jar files at the end of this tutorial. You can also go ahead and download it from online resources.
Now, open up the eclipse IDE and create the dynamic web project and set the project structure as below.
Project Structure
Lets design the database table and schema. You can turn on your mysql connection and copy the below db script into your mysql client.
Mysql DB script:
CREATE TABLE `user` (
`firstname` varchar(15) NOT NULL,
`password` varchar(15) DEFAULT NULL,
`lastname` varchar(15) DEFAULT NULL,
`email` varchar(45) DEFAULT NULL,
PRIMARY KEY (`firstname`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Now, lets create the context.xml file under META-INF folder. This file will hold the database connection information and also we can configure the datasource into this file.
context.xml
<?xml version="1.0" encoding="UTF-8"?>
<Context>
<Resource name="jdbc/database" auth="Container" type="javax.sql.DataSource"
username="root" password="password" driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/appdb" />
</Context>
Now, we are going to create the front end using some xhtml files.
index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:loadBundle basename="resources.application" var="msg" />
<h:head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
</h:head>
<h:body>
<h3>
<h:outputText value="#{msg.welcomeHeading}" />
</h3>
<p>
<h:outputText value="#{msg.welcomeMessage}" />
</p>
</h:body>
</h:html>
error.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Error</title>
</h:head>
<h:body>
<f:view>
<p>
<b>Sorry, either name or password is incorrect please try again</b>
</p>
<p>
<h:outputLink value="login.xhtml">Login Again</h:outputLink>
</p>
</f:view>
</h:body>
</html>
home.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Home Page</title>
</h:head>
<h:body>
<h:panelGrid id="panel" columns="2" border="1" cellpadding="10"
cellspacing="1">
<f:facet name="header">
<h:outputText value="Welcome to the Java and J2EE Tutor" />
</f:facet>
<h:outputLabel value="Already a user" />
<h:outputLink value="login.xhtml">Sign In</h:outputLink>
<h:outputLabel value="Not a member yet" />
<h:outputLink value="register.xhtml">Sign Up</h:outputLink>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center">
<h:outputLabel value="Created by Amzi" />
</h:panelGroup>
</f:facet>
</h:panelGrid>
</h:body>
</html>
login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Login Page</title>
</h:head>
<h:body>
<f:view>
<h:form id="loginForm">
<table frame="box">
<tr>
<th>Login Page</th>
</tr>
<tr>
<td><h:outputText value="Enter Your Name : " /></td>
<td><h:inputText id="inputName" value="#{user.firstName}"
required="true" requiredMessage="Name field must not be empty" />
</td>
<td><h:message for="inputName" style="color:red" /></td>
</tr>
<tr>
<td><h:outputText value="Enter password :" /></td>
<td><h:inputSecret id="inputPassword" value="#{user.password}"
required="true"
requiredMessage="Password field must not be empty" /></td>
<td><h:message for="inputPassword" style="color:red" /></td>
</tr>
<tr>
<td><h:commandButton value="Sign In" action="#{user.login}" /></td>
<td><h:outputText value="Not a User " />
<h:outputLink value="register.xhtml">Sign Up</h:outputLink>
</td>
</tr>
</table>
</h:form>
</f:view>
</h:body>
</html>
register.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Registration Page</title>
</h:head>
<h:body>
<f:view>
<h:form id="registerForm">
<table>
<tr>
<td><h:outputText value="Enter Your First Name:" /></td>
<td><h:inputText id="fname" value="#{user.firstName}"
required="true" requiredMessage="Please enter your first name" /></td>
<td><h:message for="fname" style="color:red" /></td>
</tr>
<tr>
<td><h:outputText value="Enter Your Last Name:" /></td>
<td><h:inputText id="lname" value="#{user.lastName}"
required="true" requiredMessage="Please enter your last name" /></td>
<td><h:message for="lname" style="color:red" /></td>
</tr>
<tr>
<td><h:outputText value="Enter Your email ID:" /></td>
<td><h:inputText id="email" value="#{user.email}"
required="true" requiredMessage="Please enter your email id" /></td>
<td><h:message for="email" style="color:red" /></td>
</tr>
<tr>
<td><h:outputText value="Enter Password :" /></td>
<td><h:inputSecret id="psw" value="#{user.password}"
required="true" requiredMessage="Please enter your password" /></td>
<td><h:message for="psw" style="color:red" /></td>
</tr>
<tr>
<td />
<td><h:commandButton value="Register" action="#{user.add}" /></td>
</tr>
<tr>
<td><h:outputLink value="home.xhtml">Home</h:outputLink></td>
</tr>
</table>
</h:form>
</f:view>
</h:body>
</html>
success.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Success Page</title>
</h:head>
<h:body>
<f:view>
<p>Successfully logged in</p>
<p>Hi, #{user.firstName}</p>
<h:form>
<p>
<h:commandLink value="logout" action="#{user.logout}" />
</p>
</h:form>
</f:view>
</h:body>
</html>
unsuccess.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Unsuccess Page</title>
</h:head>
<h:body>
<f:view>
<p>There is an error in signing up. See Server Console for error.</p>
<h:outputLink value="register.xhtml">Back</h:outputLink>
</f:view>
</h:body>
</html>
Now, the frontend is almost completed so, lets create a java class which will have some of the required fields and methods which will enable us to insert the data into the database and validate the data for the login functionality.
User.java
package com.amzi.beans;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
@ManagedBean(name = "user")
@RequestScoped
public class User {
private String firstName;
private String lastName;
private String email;
private String password;
private String dbPassword;
private String dbName;
DataSource ds;
public User() {
try {
Context ctx = new InitialContext();
ds = (DataSource) ctx.lookup("java:comp/env/jdbc/database");
} catch (NamingException e) {
e.printStackTrace();
}
}
public String getDbPassword() {
return dbPassword;
}
public String getDbName() {
return dbName;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String name) {
this.firstName = name;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
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;
}
public String add() {
int i = 0;
if (firstName != null) {
PreparedStatement ps = null;
Connection con = null;
try {
if (ds != null) {
con = ds.getConnection();
if (con != null) {
String sql = "INSERT INTO user(firstname, password, lastname, email) VALUES(?,?,?,?)";
ps = con.prepareStatement(sql);
ps.setString(1, firstName);
ps.setString(2, password);
ps.setString(3, lastName);
ps.setString(4, email);
i = ps.executeUpdate();
System.out.println("Data Added Successfully");
}
}
} catch (Exception e) {
System.out.println(e);
} finally {
try {
con.close();
ps.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
if (i > 0) {
return "success";
} else
return "unsuccess";
}
public void dbData(String uName) {
if (uName != null) {
PreparedStatement ps = null;
Connection con = null;
ResultSet rs = null;
if (ds != null) {
try {
con = ds.getConnection();
if (con != null) {
String sql = "select firstname,password from user where firstname = '"
+ uName + "'";
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
rs.next();
dbName = rs.getString("firstname");
dbPassword = rs.getString("password");
}
} catch (SQLException sqle) {
sqle.printStackTrace();
}
}
}
}
public String login() {
dbData(firstName);
if (firstName.equals(dbName) && password.equals(dbPassword)) {
return "output";
} else
return "invalid";
}
public void logout() {
FacesContext.getCurrentInstance().getExternalContext()
.invalidateSession();
FacesContext.getCurrentInstance()
.getApplication().getNavigationHandler()
.handleNavigation(FacesContext.getCurrentInstance(), null, "/login.xhtml");
}
}
In the resources folder we can create the application.properties file just for the demonstration purposes.
application.properties
# -- welcome --
welcomeTitle=JSF Application
welcomeHeading=Welcome to my Blog!
welcomeMessage=This is a JSF application. You can find the application.properties file with this message in the src/resources folder.
Now, since this is JSF based application so, we are creating faces-config.xml file. This xml file will contain the navigation rule, message bundle configuration etc.
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<message-bundle>resources.application</message-bundle>
<locale-config>
<default-locale>en</default-locale>
</locale-config>
</application>
<navigation-rule>
<description>login user</description>
<from-view-id>/login.xhtml</from-view-id>
<navigation-case>
<from-action>#{user.login}</from-action>
<from-outcome>output</from-outcome>
<to-view-id>/success.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{user.login}</from-action>
<from-outcome>invalid</from-outcome>
<to-view-id>/error.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<description>register new user</description>
<from-view-id>/register.xhtml</from-view-id>
<navigation-case>
<from-action>#{user.add}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/success.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{user.add}</from-action>
<from-outcome>unsuccess</from-outcome>
<to-view-id>/unsuccess.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
And, finally we are going to create the web.xml file
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>jsfLoginExample</display-name>
<welcome-file-list>
<welcome-file>/home.xhtml</welcome-file>
</welcome-file-list>
<resource-ref>
<description>Login Database</description>
<res-ref-name>jdbc/database</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
</resource-ref>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
<url-pattern>*.jsp</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>
Now, we are all set to deploy our application onto the tomcat server. And, once we deploy our project the application should redirect to home.xhtml
So, first of all lets check to see if the the sign up link is working correctly.
Clicking on logout link will redirect the page to the login page.
Now, we are going to register with the duplicate primary key and see what happens.
Also, we can verify the index page by hitting this URL
Download the complete source code.
