A simple snippet of a login page having included jsp's into it.
What we will achieve by using include directive tag in a JSP ?
1. Create header.jsp
<h2 align="center">Welcome to Hubberspot.com !!!</h2> <hr size="2" />
2. Create menu.jsp
<table width="200" border="0" align="center" cellpadding="5"> <tr> <td height="60" bgcolor="#476BC0"><div align="center" class="small">Learn Java by Example !!!</div></td> </tr> <tr> <td height="30" bgcolor="#5577C6"><a href="/home.jsp" class="small">Home</a></td> </tr> <tr> <td height="30" bgcolor="#728DCF"><a href="/register.jsp?" class="small">Register</a></td> </tr> <tr> <td height="30" bgcolor="#98ACDC"><a href="/contact.jsp?" class="small">Contact</a></td> </tr> <tr> <td height="30" bgcolor="#B8C6E7"> </td> </tr> </table>
3. Create body.jsp
<form method="post" action="welcome.jsp"> <p> </p> <p class="small" align="center">Enter Login id and password.</p> <table align="center" bgcolor="#728DCF"> <tr> <td class="small">Login id</td> <td><input name=loginid size=20 class="small"></td> </tr> <tr> <td class="small">Password</td> <td><input name=password type="password" size=20 class="small"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Login" /></td> </tr> </table> </form>
4. Create footer.jsp
<hr size="2" /> <h3 class="small">Copyright © 2012 Hubberspot.com . All rights reserved.</h3>
5. Create login.jsp which will include all those above jsps
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>login
<%@ include file="/header.jsp"%> | |
<%@ include file="/menu.jsp"%> | <%@ include file="/body.jsp"%> |
<%@ include file="/footer.jsp"%> |
6. Create style.css (optional)
body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; background-color: #FDF4DF; font-size: 14px; color: #333333; } td { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size: 14px; } .small { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
Output of the application :