4.4.4.4.A Simple Web Application with Data Service
We have almost everything ready to build a simple web application with Data Service framework.
What do we miss?

A couple of Java Server Pages.
One of them is login.jsp.
The page should have a login form with the text fields for login (email) and password.

Another page is welcome.jsp which should pick up the name of a user and provide a nice greeting.

For consistent look and feel, both pages should have a header (header.jsp) and a footer (foter.jsp), which will be included in the beginning and in the end of every page.

Here is a suggested code for login.jsp:


<%@ include file = "header.jsp" %>

<%

String html = (String) request.getAttribute("html");

if(html == null) {

	html = "";

}

%>

<%=html %>





Welcome to Login!







Login(email) 



Password  





 | 













  

<%@ include file = "footer.jsp" %>

Was it clear so far?

Create the folder jsp in the WebContent directory and place the login.jsp file there.
You immediately see red lines for the header.jsp and footer.jsp lines.
Eclipse gives us a hint: create these files in the same jsp folder.

The welcome.jsp page is even simpler.


<%@ include file = "header.jsp" %>

<%

String html = (String) request.getAttribute("html");

if(html == null) {

	html = "";

}

%>





<%=html %>



  

<%@ include file = "footer.jsp" %>

Place the welcome.jsp file to the same jsp folder.

Check if this project works. Still remember that whatever login we choose, on the Submit button, the application will return to the login.jsp with the discouraging message that No match � found.
Do not be too upset because this is hardcoded in the retrieveNameFromDB() method to always return null and the LoginAction chooses to get back to the login page with a proper message.
Assignments:
1. Create a new project 4.4.4.4.DataServiceWeb and copy source files from the previous project 4.4.4.4.DataServiceWeb.
2. Make sure that all source elements, including web.xml, actions and jsp files are in place.
3. Start Tomcat Server and make sure that the browser can display the login page on this URL:
http://localhost/4.4.4.3.DataServiceWeb/jsp/login.jsp
4. Provide breakpoints in the LoginAction and in the Debug mode use F6 and F5 to follow the code flow. Watch the variables.
5. Change code in the retrieveNameFromDB() method to return your name and check in the Debug mode a new behavior of the application.
6. Include in the header.jsp the link to DataServiceWeb.css � file to provide special classes for the form fields and buttons. Create this file in the WebContent/css � folder.
7. Create the js folder in the WebContent directory. Add to this folder the DataServiceWeb.js � file and provide the link to this file in the header.jsp.
8. In the Java Script file provide two functions:
- checkEmptyTextFields(form) � if any of the text fields is empty alert(�Fill in all fields�);
- validateEmailAddress(form) � if the name of the field is email check if the email looks like email, if not, alert(�Provide a valid email address�);
Do not try to send email to the address, just check if usual email elements are present.
9. Add to necessary files for the Bootstrap framework to make sure that you can expand this project with more components and they will be well displayed on a mobile phone.
10. Make sure that the project works locally and email the compressed project sources as zip (src and WebContent with web.xml, jsp, js, css, and whatever sources needed) to dean@ituniversity.us.

<br/><%@ include file = "header.jsp" %> <br/><% <br/>String html = (String) request.getAttribute("html"); <br/>if(html == null) { <br/> html = ""; <br/>} <br/>%> <br/><%=html %> <br/><div style="text-lign:center"> <br/> <br/><h3>Welcome to Login!</h3> <br/> <br/><form action="/4.4.4.4.DataServiceWeb/Lookup" method="post" onsubmit="return checkEmptyTextFields(this);"> <br/><input type="hidden" name=action value="login"> <br/><label>Login(email)</label> <input type="text" name="email"> <br/> <br/><label>Password</label> <input type="password" name="password"> <br/> <br/> <br/><input type=button value="Cancel" onclick="javascript:history.back()"> | <br/><input type="submit" name="submit" value="Submit"> <br/></form> <br/> <br/> <br/> <br/></div> <br/> <br/><%@ include file = "footer.jsp" %> <br/>

<br/><%@ include file = "header.jsp" %> <br/><% <br/>String html = (String) request.getAttribute("html"); <br/>if(html == null) { <br/> html = ""; <br/>} <br/>%> <br/> <br/><div style="text-lign:center"> <br/><h2><%=html %></h2> <br/></div> <br/> <br/><%@ include file = "footer.jsp" %> <br/>