Login Application in JSF

Basic Tutorial for JSF beginners. This 'll surely help in learning JSF.
There are some basic steps for creating this application.

1. Create Web Project in Eclipse IDE

2. Name project "Login_Application" and set properties like this:

3. Click Next and Click on Manage Library like this:

4. Now Add Libraries (can download from here:) Jar Files

5. Add Jar files like:

6. Click Finish and now JSF project basic structure is build. For login Application, i just create one managed bean and two web pages i-e login and welcome page. Basic Structure of Application is like this:

7. Now Add Class in src folder of project and name Class : Login like this:

8. Add Code in Login Class :

package com.jsf.login;
import javax.faces.bean.ManagedBean;

@ManagedBean(name="login")
public class Login {

    // Class Variables
    private String username;
    private String userpassword;
    private String msg;

    // Getters And Setters
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getUserpassword() {
        return userpassword;
    }
    public void setUserpassword(String userpassword) {
        this.userpassword = userpassword;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public String getMsg() {
        return msg;
    }
    //Method for Login
    public String userlogin()
    {
        if(username.equals("") || userpassword.equals(""))
        {
            msg="Username and password fields empty!";
            return "login?faces-redirect=true";
        }
        if(username.equals("admin") && userpassword.equals("12345"))
        {
            System.out.println("Returning Welcome Page!!!");
            msg="";
            return "welcome?faces-redirect=true";
        }
        else
        {
            System.out.println("Returning Login Page!!!");
            msg="Wrong Username or Password!";
            return "login?faces-redirect=true";
        }
       }
    }

9. Now create New HTML File and save file name with .xhtml extension like this:

Add two Html files like above one , named as login.xhtml and welcome .xhtml

10. Insert web pages code like:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Login Application in JSF 2.0</title>
</h:head>
<body>
<h:form>

    <h2 align="center">Login Application in JSF</h2>
    <table align="center">
        <tr>
            <td>Username:</td>
            <td><h:inputText id="username" value="#{login.username}" /></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><h:inputSecret id="password" value="#{login.userpassword}" /></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><h:commandButton value="Login"
                type="submit" action="#{login.userlogin}" /></td>
        </tr>
        <tr>
            <td colspan="2"><h:outputText style="color:red;" value="#{login.msg}">
            </h:outputText></td>
        </tr>

    </table>
</h:form>
</body>
</html>

welcome.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welcome Page</title>
</head>
<body>
<table align="center" width="25%">
        <tr>
            <td><h2>User Successfully login..</h2> </td>
            </tr>

    </table>
</body>
</html>

11. Now Run Application, it looks like:

12. Now click on login button leaving fields empty, it seems like:

13. Now enter your name or anything else in username and password fields, it outputs like:

14. Now enter username: admin and password: 12345, it outputs like:

It is Simple application for beginners of jsf, war file of this application can download from here: Login_Application

Give your feedback about this post and enjoy..:)

Login Application in JSF

1. Create Web Project in Eclipse IDE

2. Name project "Login_Application" and set properties like this:

3. Click Next and Click on Manage Library like this:

4. Now Add Libraries (can download from here:) Jar Files

5. Add Jar files like:

6. Click Finish and now JSF project basic structure is build. For login Application, i just create one managed bean and two web pages i-e login and welcome page. Basic Structure of Application is like this:

7. Now Add Class in src folder of project and name Class : Login like this:

8. Add Code in Login Class :

9. Now create New HTML File and save file name with .xhtml extension like this:

10. Insert web pages code like:

login.xhtml :

welcome.xhtml

11. Now Run Application, it looks like:

12. Now click on login button leaving fields empty, it seems like:

13. Now enter your name or anything else in username and password fields, it outputs like:

14. Now enter username: admin and password: 12345, it outputs like:

It is Simple application for beginners of jsf, war file of this application can download from here: Login_Application

Give your feedback about this post and enjoy..:)

Noor ul Huda

Post a Comment

XML & PHP

Artificial Intelligence - A wider approach

Create Editable HTML table using JavasSript

SQL Query Tutorial - Searching and Extracting Text

#buttons=(Accept !) #days=(20)

Contact form

Login Application in JSF

1. Create Web Project in Eclipse IDE

2. Name project "Login_Application" and set properties like this:

3. Click Next and Click on Manage Library like this:

4. Now Add Libraries (can download from here:) Jar Files

5. Add Jar files like:

6. Click Finish and now JSF project basic structure is build. For login Application, i just create one managed bean and two web pages i-e login and welcome page. Basic Structure of Application is like this:

7. Now Add Class in src folder of project and name Class : Login like this:

8. Add Code in Login Class :

9. Now create New HTML File and save file name with .xhtml extension like this:

10. Insert web pages code like:

login.xhtml :

welcome.xhtml

11. Now Run Application, it looks like:

12. Now click on login button leaving fields empty, it seems like:

13. Now enter your name or anything else in username and password fields, it outputs like:

14. Now enter username: admin and password: 12345, it outputs like:

It is Simple application for beginners of jsf, war file of this application can download from here: Login_Application

Give your feedback about this post and enjoy..:)

Noor ul Huda

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form