14 August 2008

Simple JSF Login application in 8 step

This example simple JSF login application that takes username and password from user, if username and password equals "a", program directs browser to "success" jsp page, if not equals directs browser to "failure" page.
You can download
Netbeans Project folder/codes in rar format

Required platform: Netbeans with JSF plugin (optional- I have explained the way with the netbeans 6.1), Java platform, Glassfish, Tomcat etc.

1. Open Netbeans IDE and create web application project with JSF

2. For application we need 3 jsp page login.jsp (our JSF page), fail.jsp, and success.jsp .

3. Create login.jsp . This jsp page include jsf codes to get username and password from the user.

<%@ page contentType="text/html"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<f:view>
<html>
<head><title>JSF Simple Login Example</title></head>

<body>
<h:form>
<table>
<tr>
<td><h:outputText value="Enter Login ID: "/></td>
<td><h:inputText id="loginname" value="#{SimpleLogin.loginname}" /></td>
</tr>
<tr>
<td><h:outputText value="Enter Password: " /></td>
<td><h:inputSecret id="password" value="#{SimpleLogin.password}" /></td>
</tr>
<tr>
<td> </td>
<td><h:commandButton value="Login" action="#{SimpleLogin.CheckValidUser}" /></td>
</tr>
</table>
</h:form>
</body>
</html>
</f:view>

4.Create fail.jsp that simply displays "fail!" text on the the browser.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Fail!</h2>
</body>
</html>

5. Create success.jsp
that simply displays "success!" text on the the browser.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Success!</h2>
</body>
</html>

6. Now we are creating SimpleLogin.java class. This class processing username and password variables and according to result returns "success" or "fail".

package ebuz;

/**
*
* @author emrah dayioglu
*/
public class SimpleLogin {

String loginname;
String password;

public SimpleLogin() {
}

public String getLoginname() {
return loginname;
}

public void setLoginname(String loginname) {
this.loginname = loginname;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String CheckValidUser() {
if (loginname.equals("a") && password.equals("a")) {
System.out.println("chandan");
return "success";
} else {
return "fail";
}
}
}

7. Now we are creating/modifying faces-config.xml file as;

<?xml version='1.0' encoding='UTF-8'?>

<!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config version="1.2"
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_1_2.xsd">
<managed-bean>
<managed-bean-name>SimpleLogin</managed-bean-name>
<managed-bean-class>ebuz.SimpleLogin</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-action>#{SimpleLogin.CheckValidUser}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/faces/success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{SimpleLogin.CheckValidUser}</from-action>
<from-outcome>fail</from-outcome>
<to-view-id>/faces/fail.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

8. Finally we are creating/modifying web.xml file as;

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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-app_2_5.xsd">
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<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>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/login.jsp</welcome-file>
</welcome-file-list>
</web-app>

This application is just demonstrate JSF functionality to create user login application. For real project aplication requires session, and database connectivity.

No comments: