Order Entry System 2: JSP, Servlet, Session Bean, JQuery

This is the second part of the series:

OrderEntry.jsp

This JSP  allows the user to entre the quantity, and calculates the gst and total payment by using the on-page JQuery function, and passed the control to OrderCustomer.jsp

<%--
    Document   : OrderEntry
    Created on : 14-Mar-2012, 12:57:23 AM
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:useBean id="rs" scope="request" type="java.sql.ResultSet" />
<jsp:useBean id="OrderBean" scope="session"/>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Order Entry</title>
       <style>
           body {
               font-family: sans-serif;
           }
           #summation {
               font-size: 18px;
               font-weight: bold;
               color:#174C68;
           }
           .txt {
               background-color: #FEFFB0;
               font-weight: bold;
               text-align: right;
           }
       </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

     <body style="font-family:verdana;font-size:10pt;">
       <%
         if(rs.next()) {
       %>
       <form action="OrderCustomer.jsp">
         <input name="itemid" type="hidden" value="<%= rs.getString(1) %>"/>
         <input name="saleprice" type="hidden" value="<%= rs.getString(4) %>"/>
         <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
           <tr>
             <td><b>Name:</b></td>
             <td><input id="itemname" name="itemname" type="text" value="<%= rs.getString(2)%>" readonly /></td>
           </tr>
           <tr>
             <td><b>Description:</b></td>
             <td>"<%= rs.getString(3) %></td>
           </tr>
           <tr>
             <td><b>Price:</b></td>
             <td>
                 <input id="saleprice" name=""saleprice" type=text" value="<%= rs.getString(4)%>" readonly />
             </td>
           </tr>
           <tr>
             <td><b>Quantity:</b></td>
             <td>
               <input id="qty" name="qty" type="text"
               value="0"/>
             </td>
           </tr>
           <tr>
           <tr>
             <td><b>GST:</b></td>
             <td>
               <input id="gst" name="gst" type="text"
               value="" readonly/>
             </td>
           </tr>
           <tr>
             <td><b>Total:</b></td>
             <td>
               <input id="total" "name="total" type="text"
               value="" readonly/>
             </td>
           </tr>
           <tr>               
             <td></td>
             <td>
               <input type="submit" value="Checkout"/>
           </td>
           </tr>
<p></p>

        </table>
        <%
          }
        %>
        <script>
    function displayVals() {
         var mygst =0;
        var mysum =0;
        mysum = parseFloat($("#saleprice").val())*parseFloat($("#qty").val());
        mygst = mysum * 0.13;
        mysum = mysum + mygst;
        $("#gst").val(mygst.toFixed(2));
        $("#total").val(mysum.toFixed(2));
//       $("p").html("<b>gst:</b> " + mygst.toFixed(2) + "<b>   total:</b> " +mysum.toFixed(2));
    }
    $("#qty").change(displayVals);
    displayVals();
        </script>
        </body>
</html>

OrderCustomer.jsp

This JSP saves the order entry information passed by the last JSP to the OrderBean memory structure first, then retrieves those information back to display on top the screen. It also allows the user to entre their information quantity,Finally, it  passed the control to OrderConfirm.jsp.

<%--
    Document   : OrderCustomer
    Created on : 14-Mar-2012, 2:16:41 AM
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<jsp:useBean id="OrderBean" scope="session"/>
<jsp:setProperty name="OrderBean" property="itemid"/>
<jsp:setProperty name="OrderBean" property="itemname"/>
<jsp:setProperty name="OrderBean" property="saleprice"/>
<jsp:setProperty name="OrderBean" property="qty"/>
<jsp:setProperty name="OrderBean" property="gst"/>
<HTML>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Order Entry 2: Customer Contact Detail</title>
        <style>
           body {
               font-family: sans-serif;
           }
           #summation {
               font-size: 18px;
               font-weight: bold;
               color:#174C68;
           }
           .txt {
               background-color: #FEFFB0;
               font-weight: bold;
               text-align: right;
           }
        </style>
    </head>
<BODY>
        You just entered the following order: <BR>
        ItemID: <%= OrderBean.getItemid() %><BR>
        ItemIName: <%= OrderBean.getItemname() %><BR>
        Saleprice: <%= OrderBean.getSaleprice() %><BR>
        Qantity: <%= OrderBean.getQty()%><BR>
        GST: <%= OrderBean.getGst() %><BR>
        Please enter your contact detail: <BR>
        <form action="OrderConfirm.jsp">
         <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
           <tr>
             <td><b>Name:</b></td>
             <td><input id="name" name="name" type="text" value=""/></td>
           </tr>
           <tr>
           <tr>
             <td><b>Address:</b></td>
             <td><input id="address" name="address" type="text" value="" /></td>
           </tr>
           <tr>
             <td><b>Telephone:</b></td>
             <td><input id="tel" name="tel" type="text" value="" /></td>
           </tr>
           <tr>
             <td><b>Email:</b></td>
             <td><input id="email" name="email" type="text" value="" /></td>
           </tr>
           <tr>               
             <td></td>
             <td>
               <input type="submit" value="Next"/>
           </td>
           </tr>
        </table>

</BODY>
</HTML>

OrderConfirm.jsp

This JSP saves the customer information passed by the last JSP to the CustomerBean memory structure first, then retrieves those information back to display on top the screen. Finally, it  passed the control to OrderSaveServlet.

<%--
    Document   : OrderConfirm
    Created on : 14-Mar-2012, 4:30:45 AM
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<jsp:useBean id="OrderBean" scope="session"/>
<jsp:useBean id="CustomerBean" scope="session"/>
<jsp:setProperty name="CustomerBean" property="name"/>
<jsp:setProperty name="CustomerBean" property="address"/>
<jsp:setProperty name="CustomerBean" property="tel"/>
<jsp:setProperty name="CustomerBean" property="email"/>
<HTML>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Order Entry</title>
        <style>
           body {
               font-family: sans-serif;
           }
           #summation {
               font-size: 18px;
               font-weight: bold;
               color:#174C68;
           }
           .txt {
               background-color: #FEFFB0;
               font-weight: bold;
               text-align: right;
           }
        </style>
    </head>
<BODY>
        You just entered the following order: <BR>
        Item ID: <%= OrderBean.getItemid() %><BR>
        Item Name: <%= OrderBean.getItemname() %><BR>
        Saleprice: <%= OrderBean.getSaleprice() %><BR>
        Qantity: <%= OrderBean.getQty()%><BR>
        GST: <%= OrderBean.getGst() %><BR>
        <BR>
        And your contact detail: <BR>
        Name: <%= CustomerBean.getName() %><BR>
        Address: <%= CustomerBean.getAddress() %><BR>
        Telephone: <%= CustomerBean.getTel()%><BR>
        Email: <%= CustomerBean.getEmail() %><BR>
        <BR>
        Click the following button to finish the order: <BR>
        <form action="OrderSaveServlet"> <input type="submit" value="Confirm"/> </form>
</BODY>
</HTML>

About henry416
I am a computer technology explorer and an university student based on Toronto. If you have any question, please feel free to discuss and comment here

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s