Friday 5 April 2013

Create Login Page with JSF

Steps in creating this example:

1) Create a Template page
2) Create a JSF Web page with two fields namely username and password
2.1) Page will have a command button to check login
2.2) Action on command button (with Ajax enabled) invokes the controller to validate the login against database
2.3) Status of login is updated in the output label.
3) Creating Entity Class
4) Controller invokes named query to check the database and yields result

1) Create Template
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><ui:insert name="title">Default Title</ui:insert></title>
        <h:outputStylesheet name="css/jsfcrud.css"/>
    </h:head>

    <h:body>
        <p>
            <ui:insert name="body">Default Body</ui:insert>
        </p>
    </h:body>

</html>


2) Create Client page with Username and password fields

<ui:composition template="template.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">
    <ui:define name="title">Welcome, Please Login</ui:define>
    <ui:define name="body">
        <h:form>
           
            <h:panelGrid style="float: right; border: 1">
                <h:outputText value="Login!!" />
                <h:outputText value="Username"/>
                <h:inputText value="#{logintblController.selected.username}" />
                <h:outputText value="Password" />
                <h:inputSecret  value="#{logintblController.selected.password}" />
                <h:commandButton action="#{logintblController.validateLogin}" value="Login">
                    <f:ajax execute="@form" render="displayResponse" />
                </h:commandButton>
                <h:outputLabel id="displayResponse" value="#{logintblController.message}" />
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>

3)Entity Class:

@Entity
@Table(name = "LOGINTBL")
@XmlRootElement
@NamedQueries({
    @NamedQuery(name = "Logintbl.findByUsernameAndPassword",
        query = "SELECT l FROM Logintbl l where l.username = :username "
        + "and l.password= :password")
    })
public class Logintbl implements Serializable {
    private static final long serialVersionUID = 1L;
    @Id
    @Basic(optional = false)
    @NotNull
    @Column(name = "USERID")
    private Integer userid;
    @Basic(optional = false)
    @NotNull
    @Size(min = 1, max = 20)
    @Column(name = "USERNAME")
    private String username;
    @Basic(optional = false)
    @NotNull
    @Size(min = 1, max = 25)
    @Column(name = "PASSWORD")
    private String password;

    ... setter and getter methods

4) Controller Class:

@ManagedBean(name = "logintblController")
@SessionScoped
public class LogintblController implements Serializable {

    private Logintbl current;
    @EJB
    private com.jsf.blog.example1.LogintblFacade ejbFacade;
    private String message;

    public LogintblController() {
    }

    public Logintbl getSelected() {
        if (current == null) {
            current = new Logintbl();
        }
        return current;
    }

    private LogintblFacade getFacade() {
        return ejbFacade;
    }

    public void validateLogin() {
        TypedQuery<Logintbl> query = getFacade().getEntityManager().
                createNamedQuery("Logintbl.findByUsernameAndPassword", Logintbl.class);
        query.setParameter("username", current.getUsername());
        query.setParameter("password", current.getPassword());
        try {
            Logintbl login = query.getSingleResult();
            message = "Valid User";
        } catch (Exception e) {
            message = "Invalid Login Credentials";

        }
    }
    public String getMessage() {
        return message;
    }
}


Result:




5 comments:

  1. Great Help Thanks !!! :)

    ReplyDelete
  2. where is the LogintblFacade.java at ?

    we can't procede without it !!

    please help

    ReplyDelete
    Replies
    1. Hi.. that could be any data access object you can develop as per your database needs

      Delete