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. Replies
    1. Great Article android based projects

      Java Training in Chennai Project Center in Chennai Java Training in Chennai projects for cse The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

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

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

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

    ReplyDelete
  5. Here 8 Jar Files Required..........

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

      Delete
    2. mysql-connector.jar file

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

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

    ReplyDelete
  8. 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
  9. hey getting an error as //home.xhtml Not Found in ExternalContext as a Resource.Please help me with this

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

    ReplyDelete
  11. Great blog !It is best institute.Top Training institute In chennai
    http://chennaitraining.in/openspan-training-in-chennai/
    http://chennaitraining.in/uipath-training-in-chennai/
    http://chennaitraining.in/automation-anywhere-training-in-chennai/
    http://chennaitraining.in/microsoft-azure-training-in-chennai/
    http://chennaitraining.in/workday-training-in-chennai/
    http://chennaitraining.in/vmware-training-in-chennai/

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

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

    ReplyDelete
  14. Hi
    It is great and so amazing post and I am enjoying to read your blog. I am very grateful for the effort put on by you, to guide us, Thank a lot for this informative post ,keep posting such type of wonderful post. Keep it up. We will also offer Quickbooks Error 6123 Contact us +1 877-751-0742 for instant help.

    ReplyDelete
  15. نقل العفش نقل الاثاث نقل العفش والاثاث في المدينة المنورة خدمات تنظيف خدمات التنظيف رش الحشرات مكافحة الحشرات خدمات التنظيف بالمدينة المنورة مؤسسة نقل العفش في المدينه المنوره غسيل الخزانات تنظيف الخزانات بالمدينة المنورة , النظافة العامة , خدمات تنظيف المدينة المنورة

    شركة نقل عفش بالمدينة المنورة
    شركة نقل اثاث بالمدينة المنورة
    شركة مكافحة النمل الابيض
    مكافحة حشرات بالمدينة المنورة
    شركة رش مبيدات بالمدينة المنورة
    شركة نظافة بالمدينة المنورة
    شركة تنظيف شقق ومنازل بالمدينة المنورة

    ReplyDelete
  16. شركة الاندلس للخدمات المنزلية من افضل الشركات التي يمكنك التعامل معها لقد فهي افضل شركة تنظيف موكيت بالرياض تقدم الشركة خدمة مميزة واسعار مذهله كما تقدم خصم يضل الي 30 % لجميع العملاء ولا تقتصر خدمة الشركة التنظيف فقط يمكن التواصل والسؤال عن الخدمات التي تقدمها الشركة من خلال الرقم 0559597588 .

    ReplyDelete
  17. 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