Activity5 User interaction

The objective of this activity is to:

 Design a basic web application under eclipse IED

 Create servlets, a JSP pages and beans
 Design an MVC architecture using the above mention technologies
Functionalities
1. Customer creation
In our dynamic digital platform, the user should be able to create a customer by typing its
information throughout a form then display those information as a result. Our work will be to:

 Design a form to collect user data;

 Design a bean representing a customer;
 Design a servlet in charge of collecting the data sent via the form, to register them inside
a bean and to transfer them to a JSP;
 JSP in charge of the display of customer information that is the data transmitted by the
servlet
2. Order creation
In this functionality, the user should be equally able to create an order by typing the data via a
form and then display them as a result. Our work consists on:

 Designing a bean representing and order;

 Designing a servlet in charge of collecting the data sent via a form, storing these data
inside a bean and then transferring them to a JSP.
 Designing a JSP in charge of displaying the customer order previously created, that is
transmitting these data using a servlet.
Constraints: the two forms created should be placed inside the eclipse WebContent folder:
ceateCustomer.jsp and createOrder.jsp. A style sheet style.css should be created also.
Hints about forms:

 The two forms should be configured to sent data typed towards the following addresses:
/customerCreation and /orderCreation. When setting up the two servlets, you should
establish a mapping respectively on each of the previously mentioned addresses in the
web.xml file;
 The data shall be sent via the GET mothod of the HTTP protocol. The doGet() mothod
should be therefore implemented in your servlets;
 The parameter names created during the transmission of data correspond to the values of
the attribute name of each <input> tag of the forms. For example, the customer name
being typed using the tag <input name="customerName".../> of the form, it shall be
accessible from the servlet using the following call:
request.getParameter("customerName ") ;
Hints on the model
Two entities are enough for this work, a customer and an order:
  A bean Customer representing data collected from the form ceateCustomer.jsp (name,
firstName, etc);
 A bean Order representing the data collected from the second part of the form
createOrder.jsp(date, amount, paymentMode etc…)
 Concerning bean properties, it is advisable to declare them all as String, except the
amount of the order to be declared as double.
 During the creation of an order, the user should type customer information. Instead of creating a
property for each field elated to customer in our customer bean, it will be suitable to include a
property customer which in its own will contain the properties name, firstName, etc…
Hints about controlers
The two forms created are configured to send the data typed to the server using the GET request. We
should therefore create two servlets called customerCreation and orderCreation which for each from
will:
 Collect paraneters typed by calling the request.getParameter() on the various field names;
 Will convert them in the suitable data types, then store them in their corresponding beans;
 Verify if the user has forgotten to type required parameters (those with a star on the forms)
 If yes, transfer the beans and an error message to a JSP for display
 If not, transfer the beans and a successful message to a JSP for display
 Since the date field shall be not activated, we should initialise the property date of the bean Order
with the current date. The data should therefore be handle as a string.
Hints about views
We need two form to inter data: createCustomer.jsp and createOrder.jsp. We also need to develop
two views: displayCustomer.jsp and displayOrder.jsp. These two views will receive one or
many beans and a message from their respective servlets and should display the data contain on
those objects. The EL expressions represent a wonderful opportunity to realise that.

SOLUTION
1. Project creation:
We create a project under eclipse using: file> new> Dynamic web project>Project name and enter tp1
then take next>next>click on Generate web.xml deployment descriptor>finish.
2. Views design
Go to the folder WebContent and create for JSP file as follows:
1-right click on WebContent folder>take new>take JSP file> in file name input createCustomer.jsp>take
next>finish and copy inside the following code after deleting all what was inside the new page created.
Code in createCustomer.jsp:
<%@ page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Customer creation</title>
<link type="text/css" rel="stylesheet" href="inc/style.css" />
</head>
<body>
<div>
<form method="get" action=" customerCreation">
<fieldset>
<legend> Customer Informations</legend>
<label for="customerName">Name <span class="required">*</span></label>
<input type="text" id=" customerName" name=" customerName" value="" size="20"
maxlength="20" />
<br />
<label for="customerFirstname">First Name </label>
<input type="text" id=" customerFirstname " name=" customerFirstname " value="" size="20"
maxlength="20" />
<br />
<label for="customerAdress">Adress of delivery
<span class="required">*</span></label>
<input type="text" id=" customerAdress " name=" customerAdress " value="" size="20"
maxlength="20" />
<br />
<label for="customerPhone">Customer Phone Number
<span class="required">*</span></label>
<input type="text" id=" customerPhone " name=" customerPhone " value="" size="20"
maxlength="20" />
<br />
<label for="customerEmail">Adresse email</label>
<input type="email" id=" customerEmail " name=" customerEmail " value="" size="20"
maxlength="60" />
<br />
</fieldset>
<input type="submit" value="Validate" /><input type="reset" value="initialise to zero" /> <br/>
</form>
</div>
</body>
</html>
To test the following code do this: right click on tp1>Run as>on a server>next>add all>finish
Then go to your browser and type this as URL: http://localhost:8080/tp1/createCustomer.jsp. For now our
page does not look nice. For that reason let’s add the ccs code to arrange it.
To do that, right click on WebContent>take new>then take folder>input inc as folder name>take finish.
Now right click on inc> new>others>select CSS file and take next>input style.css>take next>finish. Copy
the following in the css file just created:
/* General ---------------------------------------------------------
---------------------------- */
body, p, legend, label, input {
font: normal 8pt verdana, helvetica, sans-serif;
}
/* Forms -----------------------------------------------------------
---------------------------- */
fieldset {
padding: 10px;
border: 1px #0568CD solid;
margin: 10px;
}
legend {
font-weight: bold;
color: #0568CD;
}
form label {
float: left;
width: 200px;
margin: 3px 0px 0px 0px;
}
form input {
margin: 3px 3px 0px 0px;
border: 1px #999 solid;
}
form input.sansLabel {
margin-left: 200px;
}
/* Color styles ----------------------------------------------
---------------------------- */
.required {
color: #c00;
}
.error {
color: #900;
}
.success {
color: #090;
}
.info {
font-style: italic;
color: #E8A22B;
}
This is what you obtained after typing the following URL on your browser:
http://localhost:8080/tp1/createCustomer.jsp

Go to the folder WebContent and create a JSP file as follows:

2-right click on WebContent folder>take new>take JSP file> in file name input createCustomer.jsp>take
next>finish and copy inside the following code after deleting all what was inside the new page created.
Code in createCustomer.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Order creation</title>
<link type="text/css" rel="stylesheet" href="inc/style.css"/>
</head>
<body>
<div>
<form method="get" action=" orderCreation ">
<fieldset>
<legend> Order Informations</legend>
<label for="customerName">Name <span class="required">*</span></label>
<input type="text" id=" customerName " name=" customerName " value="" size="20"
maxlength="20" />
<br />
<label for="customerFirstname">First name </label>
<input type="text" id=" customerFirstname " name=" customerFirstname " value="" size="20"
maxlength="20" />
<br />
<label for="customerAdress">Adress of delivery<span class="required">*</span></label>
<input type="text" id=" customerAdress " name=" customerAdress " value="" size="20"
maxlength="20" />
<br />
<label for="customerPhone">Phone number
<span class="required">*</span></label>
<input type="text" id=" customerPhone "
name=" customerPhone " value="" size="20" maxlength="20" />
<br />
<label for="customerEmail"> Email Adress </label>
<input type="email" id=" customerEmail " name=" customerEmail " value="" size="20"
maxlength="60" />
<br />
</fieldset>
<fieldset>
<legend>Order Informations</legend>
<label for="orderDate">Date <span class="required">*</span></label>
<input type="text" id=" orderDate " name=" orderDate " value="" size="20" maxlength="20"
disabled />
<br />
<label for="orderAmount">Montant <span class="required">*</span></label>
<input type="text" id="orderAmount" name=" orderAmount " value="" size="20" maxlength="20"
/>
<br />
<label for="orderPaymentmode">Payment mode<span class="required">*</span></label>
<input type="text" id=" orderPaymentmode "
name=" orderPaymentmode " value="" size="20" maxlength="20" />
<br />
<label for="orderPaymentStatus">Payment Status</label>
<input type="text" id=" orderPaymentStatus " name=" orderPaymentStatus " value="" size="20"
maxlength="20" />
<br />
<label for="orderDeliverymode">Delivery mode<span class="required">*</span></label>
<input type="text" id=" orderDeliverymode " name=" orderDeliverymode " value="" size="20"
maxlength="20" />
<br />
<label for="orderDeliverystatus">Delivery status</label>
<input type="text" id=" orderDeliverystatus " name=" orderDeliverystatus " value="" size="20"
maxlength="20" />
<br />
</fieldset>
<input type="submit" value="Validate" /> <input type="reset" value="reset" /> <br/>
</form>
</div>
</body>
</html>
Output :
 3. Model design
In the model, we need to create beans which are simply java class
1-Bean to store customer data:
Go to java Resources then right click on it and take new then class. Under package write
com.ensy3.tp.beans. Under name write Customer then take finish and copy the following code inside
public class Customer {
/* bean properties */
private String name;
private String firstname;
private String adress;
private String telephone;
private String email;
public void setNom( String name) {
this. name = name;
}
public String getName() {
return name;
}
public void setPrenom( String firstname) {
this. firstname = firstname;
}
public String getFirstname() {
return firstname;
}
public void setAdress( String adress ) {
this.adress = adress;
}
public String getAdress() {
return adress;
}
public String getTelephone() {
return telephone;
}
public void setTelephone( String telephone ) {
this.telephone = telephone;
}
public void setEmail( String email ) {
this.email = email;
}
public String getEmail() {
return email;
}
}
The same, create the bean Order under the package previously created.
public class Order {
/* Bean properties */
private Customer customer;
private String date;
private Double amount;
private String paymentmode;
private String paymentstatus;
private String deliverymode;
private String deliverystatus;
public Customer getCustomer(){
return customer;
}
public void setCustomer (Customer customer){
this.customer= customer;
}
public String getDate(){
return date;
}
public void setDate(String date){
this.date = date;
}
public Double getAmount(){
return amount;
}
public void setAmount(Double amount){
this. amount= amount;
}
public String getPaymentmode(){
return paymentmode;
}
public void setPaymentmode(String paymentmode) {
this. paymentmode = paymentmode;
}
public String getPaymentstatus() {
return paymentstatus;
}
public void setPaymentstatus(String paymentstatus) {
this. paymentstatus = paymentstatus;
}
public String getDeliverymode() {
return deliverymode;
}
public void setDeliverymode (String deliverymode) {
this. deliverymode = deliverymode;
}
public String getDeliverystatus() {
return deliverystatus;
}
public void setStatutLivraison(String deliverystatus) {
this. deliverystatus = deliverystatus;
}
}
 4. Controller design
The controllers are servlets that are java classes. Send all the JSP previously created inside the WEB-INF
folder then create the servlet to receive data sent from the form creating a customer. Let’s create a servlet as
follows: right click on java Resources then take new and then take class. Under package write
com.ensy3.tp.servlets. Under name write Customercreation and make sure the superclass is
javax.servlet.http.HttpServlet.
Copy the following code inside:
public class CreationClient extends HttpServlet {
public void doGet( HttpServletRequest request, HttpServletResponse response ) throws
ServletException, IOException{
/*
* Collect data typed, sent as parameters via the GET request generated for from validation
*/
String name = request.getParameter( "customerName" );
String firstname = request.getParameter( "customerFirstname" );
String adress = request.getParameter( "customerAdress" );
String telephone = request.getParameter( "customerPhone ");
String email = request.getParameter( "customerEmail" );
String message;
/*
* Initialisation of the message to display: if a form field is mandatory and is empty, therefore an *
error message is displayed, if not a message of success is displayed
*/
if (name.trim().isEmpty() || adress.trim().isEmpty() ||
telephone.trim().isEmpty() ) {
message = "Error – you did not field mandatory fields. <br> <a href=\"createCustomer.jsp\">click
here
i</a> to access a form dedicated for customer creation.";
} else {
message = "Customer created successfully !";
}
/*
* Creating the customer bean and initialising it with data collected
*/
Customer customer = new Customer();
Customer.setName(name);
Customer.setFirstName( firstname);
Customer.setAdress( adress );
Customer.setPhone
( telephone );
Customer.setEmail( email );
/* add the bean et the message to the request object */
request.setAttribute( " customer ", customer);
request.setAttribute( "message", message );
/* Transmission to the JSP in charge of data visualisation */
this.getServletContext().getRequestDispatcher(
"/displayCustomer.jsp").forward( request, response );
}
}