JSF login and register application

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.

  1. Eclipse IDE
  2. Tomcat server
  3. JSF framework
  4. 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.


33 comments:

  1. Great example, is it possible to upload the source code again? the link seems missing. Thanks!!

    ReplyDelete
  2. Hello thanks for tutorial but source code is missing

    ReplyDelete
  3. Hello thanks for tutorial but source code is missing

    ReplyDelete
  4. Here 8 Jar Files Required..........

    ReplyDelete
    Replies
    1. which jar files are required please provide atleast names

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Can you do this with EJB/JPA instead of JDBC?

    ReplyDelete
  7. thank you for your tutorial, may i know why when I register. It will "there is an error in signing up. see server console for error"

    ReplyDelete
  8. hey getting an error as //home.xhtml Not Found in ExternalContext as a Resource.Please help me with this

    ReplyDelete
  9. thaks and great work......................
    but how to downoad the codes

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. infelizmente nao ta completo nao consegui fazer funcionar.

    ReplyDelete
  12. Excellent article and with lots of information. I really learned a lot here. Do share more like this.
    Blue Prism Course in Chennai
    Blue Prism Online Course
    UiPath Course in Chennai
    UiPath Online Course

    ReplyDelete
  13. تقدم افضل شركة تسليك مجارى بالضغط بالقصيم وهي شركة درة الخليج أفضل خدمة تسليك المجارى وشفط بيارات وتنظيف وتعقيم مواسير الصرف الصحي وتعمل على المتابعة المستمرة للخدمة مع العميل لضمان عدم انسداد المجاري مرة اخرى
    شركة تسليك مجاري بالقصيم

    ReplyDelete
  14. شركة كشف تسربات المياه بالرس
    شركة كشف تسربات المياه بالرس هي إحدى أكبر وأهم شركات الرس المتخصصة في كشف واصلاح تسربات المياه؛ فهي قادرة على تتبع المصادر المتضررة بفضل فني سباكة بالرس متواجد في شركة فحص تسربات المياه بالرس تتمتع بعدة صفات نادرًا ما تجتمع في كيان واحد فهي تعتبر ارخص شركة كشف تسربات المياه في الرس و بالمنطقة العربية، كما أنها من أسرع شركات إصلاح تسربات المياه وذلك لحل مشكلة ارتفاع فاتورة المياه في الشرق الأوسط
    Al-Rass Water Leak Detection Company is one of the largest and most important Al-Rass companies specialized in detecting and repairing water leaks; It is able to track the damaged sources thanks to a plumber in Al-Rass who is in the water leak inspection company in Al-Rass. It has several characteristics that rarely meet in one entity. It is considered the cheapest water leak detection company in Al-Rass and the Arab region, and it is also one of the fastest water leak repair companies in order to solve the problem Water bill rising in the Middle East

    ReplyDelete
  15. But did'nt connect with database

    ReplyDelete