javacentrix com chap11-2

จากเอกสาร dbUnits.jap, dbBrands.jsp, dbCategories.jsp, dbProducts, dbOrders.jsp, dbOrderDetails.jsp

มีการประมวลผลเกี่ยวกับคำสั่งเพิ่มเรคอร์ดโดยส่งข้อมูลจากฟอร์มไปสู่เอกสาร dbexecute\addrecord.jsp

และมีการลงหรือเปลี่ยนแปลงข้อมูลภายในเทเบิลด้วยเอกสาร dbexecute\updaterecord.jsp ดังมีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page import="EJP.DbUtilities" %> 3 <%@page contentType="text/html; charset=windows-874"%> 4 <%@taglib uri="../tags/db-tags.tld" prefix="database" %> 5 <% 6 String SQL , table = request.getParameter("TableName"); 7 SQL = DbUtilities.getInsertString(request, table); 8 %> 9 <html> 10 <head><title>Add a new record</title> 11 <link rel="stylesheet" href="../classicstyle.css" type="text/css"> 12 </head> 13 <body> 14 <TABLE border='1' CELLSPACING='1' CELLPADDING='3' ALIGN='CENTER' width="400" bordercolor="#990000" > 15 <TR> 16 <TH > ��!</TH> 17 </TR> 18 <FORM METHOD='GET' ACTION=''> 19 <TR> 20 <TD align="center" bgcolor="#FFFFFF"> 21 <p> </p> 22 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 23 username='' password=''> 24 <database:execute sql='<%=SQL%>' > 25 </database:execute> 26 </database:connection> 27 <p><A HREF='<%=request.getParameter("returnpage")%>'>��</A></p> 28 </TD> 29 </TR> 30 </FORM> 31 </TABLE> 32 </body> 33 </html>

เอกสาร dbexecute\updaterecord.jsp มีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page import="EJP.DbUtilities" %> 3 <%@page contentType="text/html; charset=windows-874"%> 4 <%@taglib uri="../tags/db-tags.tld" prefix="database" %> 5 <% 6 String SQL = " " , table = request.getParameter("TableName"); 7 if (request.getParameter("delrow") == null) 8 SQL = DbUtilities.getUpdateString(request, table); 9 else 10 if (Integer.parseInt(request.getParameter("delrow"))==1) 11 SQL = DbUtilities.getDeleteString(request, table); 12 %> 13 <html> 14 <head><title>Update a record</title> 15 <link rel="stylesheet" href="../classicstyle.css" type="text/css"> 16 </head> 17 <body> 18 <TABLE border='1' CELLSPACING='1' CELLPADDING='3' ALIGN='CENTER' width="400" bordercolor="#990000" > 19 <TR> 20 <TH > ��!</TH> 21 </TR> 22 <FORM METHOD='GET' ACTION=''> 23 <TR> 24 <TD align="center" bgcolor="#FFFFFF"> 25 <p> </p> 26 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 27 username='' password=''> 28 <database:execute sql='<%=SQL%>' > 29 </database:execute>

30 </database:connection> 31 <p><A HREF='<%=request.getParameter("returnpage")%>'>��</A></p> 32 </TD> 33 </TR> 34 </FORM> 35 </TABLE> 36 </body> 37 </html>

รูปแสดงเอกสาร dbBrands.jsp

การเรียกดูข้อมูล หากการแสดงผลมีข้อมูลมากกว่า 10 แถวแล้ว ข้อมูลจะถูกแบ่งเป็นหน้าๆหน้า โดยที่ผู้ใช้สามารถเลือกดูแต่ละหน้าจาก หมายเลขหน้าด้านล่างแถวข้อมูล (ก่อนฟอร์มค้นหา)

การค้นหาข้อมูล ทำได้ด้วยการกรอกข้อมูลในช่องค้นหา แล้วตามด้วยปุ่มค้นหา หากต้องการแสดงทุกรายการให้ปล่อยเป็นช่องว่างไว้และกดปุ่มค้นหาคือการแสดงทุกรายการ

การเพิ่มข้อมูล ผู้ใช้ต้องกรอกข้อมูลในฟอร์มเพิ่มรายการด้านล่างสุด จากนั้นกดปุ่มเพิ่มรายการซึ่งข้อมูลในแต่ละช่องจะถูกส่งผ่านไปให้เอกสาร dbexecute\addrecord.jsp เพื่อดำเนินการต่อไป

การลบข้อมูล ทำได้โดยการคลิกเลือกในช่องลบสี่เหลี่ยมหน้าแถวใดๆที่ต้องการลบออกจากเทเบิล และคลิกที่ปุ่มเปลี่ยนแปลง

การเปลี่ยนแปลง ผู้ใช้สามารถเปลี่ยนแปลงข้อมูลได้ทีละแถว ในช่องกรอกข้อมูลจากนั้นกดปุ่มเปลี่ยนแปลง เพื่อดำเนินรายการเปลี่ยนแปลงในฐานข้อมูล

พื้นที่แสดงรายการ

ช่องเลือกลบรายการ ปุ่มดำเนินการ

ลบ/เปลี่ยนแปลง

แสดงรายการตามหน้าเอกสาร

ฟอร์มค้นหาข้อมูล

ฟอร์มเพิ่มข้อมูล

เมนูเลือกดูรายการ

หมายเหตุ เอกสาร dbBrands, dbUnits, dbCategories, dbProducts มีหน้าตาและวิธีการใช้งานคล้ายกัน

รูปแสดงการทำงานของเอกสาร dbCategories.jsp

รูปแสดงการทำงานของเอกสาร dbUnits.jsp

รูปแสดงการทำงานของเอกสาร dbProducts.jsp

รูปแสดงเอกสาร addrecord.jsp, updaterecord.jsp

รูปแสดงการทำงานของเอกสาร dbOrders.jsp

รูปแสดงการทำงานของเอกสาร OrderDetails.jsp

1. ส่วนการใช้เพื่อดำเนินงานคำสั่งซื้อ

ส่วนสุดท้ายที่จะจัดสร้างขึ้นมาคือส่วนในการใช้งานของผู้ใช้หรือลูกค้าของทางร้าน

ที่จะเข้ามาเยี่ยมชมเพื่อเลือกดูสินค้าที่จัดจำหน่าย โดยสามารถเลือกดูตามประเภทสินค้าได้

จากการเลือกดูสินค้าในแต่ละรายการก็สามารถหยิบสินค้าลงในตะกร้าเอาไว้ และกลับไปเลือกดูสินค้าชิ้นอื่นๆต่อๆไป

ในระหว่างการเลือกดูสินค้าสามารถหยิบสินค้าได้ตลอดเวลา หลังจากพอใจแล้วก็จะเข้ามาดูผลสรุปการหยิบสินค้าจากตะกร้าสินค้า

ซึ่งระหว่างนี้สามารถลบสินค้าที่ไม่ต้องการออก หรือเพิ่มจำนวนสินค้าที่ต้องการเช่นจาก 1 ชิ้นเป็น 3 ชิ้นจนพอใจ

สุดท้ายลูกค้าจะยืนยันคำสั่งซื้อด้วยการกรอกชื่อและที่อยู่ในการจัดส่งเพื่อบันทึกคำสั่งซื้อลงในฐานข้อมูลต่อไป

การทำงานของส่วนนี้เป็นการสร้างเอกสาร JSP เพื่อทำงานร่วมกับเซสชั่น

เมื่อผู้ใช้เลือกสินค้าหรือเปลี่ยนแปลงจำนวนสินค้าที่เลือก ก็จะมีเข้าไปเปลี่ยนแปลงเซสชั่นให้เก็บข้อมูลความต้องการล่าสุด

หลังจากนั้นเมื่อลูกค้ายืนยันคำสั่งซื้อด้วยการกรอกข้อมูลชื่อและที่อยู่จัดส่งก็จะเก็บข้อมูลลงในระบบฐานข้อมูลต่อไป

รูปแสดงเส้นทางการทำงานของเอกสาร JSP

ชื่อเอกสาร รายละเอียด

เส้นทางการวางเอกสาร C:\Program Files\Apache Tomcat 4.0\webapps\shop

productscate.jsp

แสดงรายชื่อหมวดสินค้า และตัวอย่างชื่อสินค้าคร่าวๆจำนวนไม่เกิน 5 ชิ้น

ส่วนนี้จะมีการสร้างเซสชั่นในการทำงาน

productlisting.jsp

แสดงรายชื่อสินค้าในหมวดสินค้าที่เลือก โดยแบ่งการแสดงออกเป็นหลายๆหน้า หากมีสินค้ามากกว่า 10 ชิ้น โดยลูกค้าสามารถเลือกหยิบสินค้าที่ต้องการลงในตะกร้าได้

product.jsp แสดงรายละเอียดสินค้าแต่ละชิ้น (หากผู้ใช้ต้องการดู) และสามารถหยิบลงในตะกร้าได้

add2cart.jsp

เป็นการสรุปสินค้าในตะกร้าสินค้า ให้ลูกค้าเปลี่ยนแปลง พร้อมยืนยันคำสั่งซื้อเพื่อดำเนินการต่อไป

customerinfo.jsp แสดงฟอร์มเอกสาร ที่จะให้กรอกชื่อ ที่อยู่ เพื่อจัดส่ง

finalorder.jsp เอกสารนี้แสดงข้อความขอบคุณต่อลูกค้า แต่เบื้องหลังคือการเก็บข้อมูลการสั่งซื้อ และรายละเอียดสินค้าต่อคำสั่งซื้อลงสู่ระบบฐานข้อมูล

ตารางแสดงเอกสาร JSP และหน้าที่ในส่วนรับคำสั่งซื้อ

เอกสาร productscate.jsp มีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page contentType="text/html; charset=windows-874"%> 3 <%@page import="EJP.ThaiUtilities" %> 4 <%@taglib uri="tags/db-tags.tld" prefix="database" %> 5 <% 6 String thispage = "dbProducts.jsp"; 7 String tablename = "Products"; 8 String SQL = "select ProductID, Title, Price, Sale, Products.Description AS Description, " + 9 " Brands.Description AS Brand, Categories.Description AS Category, Units.Description AS Unit " + 10 " from Products, Brands, Categories, Units " + 11 " WHERE Products.BrandID = Brands.BrandID AND Products.CategoryID = Categories.CategoryID " + 12 " AND Products.UnitID = Units.UnitID";

productscate.jsp productlisting.jsp product.jsp

add2cart.jsp

customerinfo.jsp

finalorder.jsp

13 %> 14 <html> 15 <head><title>Product Categories</title> 16 <link rel="stylesheet" href="classicstyle.css" type="text/css"> 17 </head> 18 <body> 19 <jsp:useBean id="cart" class="ShoppingCart.Cart" scope="session"/> 20 <table width="100%" border="0" cellspacing="0" cellpadding="10"> 21 <tr> 22 <td align="center" valign="middle"> 23 <table width="100%" border="1" cellspacing="0" cellpadding="2" bordercolor="#990033"> 24 <tr> 25 <td align="center" bgcolor="#FFFFFF"> 26 <img src="images/ant.jpg" height="80" align="left" hspace="30"> 27 <h1><font color="#006600">��</font><font color="#BF2B15">��</font> 28 <font color="#0099CC">��</font></h1> 29 <h3><font color="#0099CC">(<font color="#006600">Mod</font>- 30 <font color="#CC3300">Ngam</font> Onling Shopping Center)</font></h3> 31 </td> 32 </tr> 33 </table> 34 </td> 35 </tr> 36 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 37 username='' password=''> 38 <tr> 39 <td> 40 <TABLE border='2' CELLSPACING='1' CELLPADDING='5' ALIGN='CENTER' width="60%" 41 bgcolor="#FFFFFF" bordercolor="#330066" > 42 <TR> 43 <TD valign="top" width="25%"> <b><a href='productlisting.jsp?cateid=1'> 44 <database:query sql='<%="select * from categories where categoryid = 1"%>' 45 pagesize='5' > 46 <database:column name='Description' /> </database:query></a></b><br> 47 <database:query sql='<%="select * from products where products.categoryid = 1"%>' 48 pagesize='5' > 49 <database:column name='Title' /> 50 </database:query> 51 </TD> 52 <TD valign="top" width="25%"><b><a href='productlisting.jsp?cateid=2'> 53 <database:query sql='<%="select * from categories where categoryid = 2"%>' 54 pagesize='5' > 55 <database:column name='Description' /> 56 </database:query></a></b><br> 57 <database:query sql='<%="select * from products where products.categoryid = 2"%>' 58 pagesize='5' > 59 <database:column name='Title' /> 60 </database:query> 61 </TD> 62 </TR> 63 <TR> 64 <TD valign="top" width="25%"> <b><a href='productlisting.jsp?cateid=3'> 65 <database:query sql='<%="select * from categories where categoryid = 3"%>' 66 pagesize='5' > 67 <database:column name='Description' /> 68 </database:query></a></b><br> 69 <database:query sql='<%="select * from products where products.categoryid = 3"%>' 70 pagesize='5' > 71 <database:column name='Title' /> 72 </database:query> 73 </TD> 74 <TD valign="top" width="25%"> <b><a href='productlisting.jsp?cateid=4'> 75 <database:query sql='<%="select * from categories where categoryid = 4"%>' 76 pagesize='5' > 77 <database:column name='Description' /> 78 </database:query></a></b><br> 79 <database:query sql='<%="select * from products where products.categoryid = 4"%>' 80 pagesize='5' > 81 <database:column name='Title' /> 82 </database:query>

83 </TD> 84 </TR> 85 </TABLE> 86 <HR align="center" size="1" width="80%"> 87 </td> 88 </tr> 89 </database:connection> 90 </table> 91 </body> 92 </html>

รูปแสดงการทำงานของเอกสาร productscate.jsp

เอกสาร productscate.jsp มีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page contentType="text/html; charset=windows-874"%> 3 <%@page import="EJP.ThaiUtilities" %> 4 <%@taglib uri="tags/db-tags.tld" prefix="database" %> 5 <% 6 String thispage = "dbProducts.jsp"; 7 String tablename = "Products"; 8 String SQL = "select ProductID, Title, Price, Sale, Products.Description AS Description, " + 9 " Brands.Description AS Brand, Categories.Description AS Category, Units.Description AS Unit " + 10 " from Products, Brands, Categories, Units " + 11 " WHERE Products.BrandID = Brands.BrandID AND Products.CategoryID = Categories.CategoryID " + 12 " AND Products.UnitID = Units.UnitID " ; 13 if ((request.getParameter("cateid") != null) && (request.getParameter("cateid").length()>0)) 14 SQL = SQL + " and Products.CategoryID=" + request.getParameter("cateid"); 15 if ((request.getParameter("filter") != null) && (request.getParameter("filter").length()>0)) 16 SQL = SQL + " AND Title LIKE '%" + ThaiUtilities.Unicode2ASCII(request.getParameter("filter") )+ "%'"; 17 %> 18 <html> 19 <head><title>Product Name Listing</title> 20 <link rel="stylesheet" href="classicstyle.css" type="text/css"> 21 </head> 22 <body> 23 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' url='jdbc:mysql://127.0.0.1:3306/shop' 24 username='' password=''> 25 <table width="100%" border="0" cellspacing="0" cellpadding="10"> 26 <tr> 27 <td align="center" valign="middle"> 28 <database:query sql='<%="select Description from categories where CategoryID = " + 29 request.getParameter("cateid")%>' > 30 <h1><font color="#0099CC">��<database:column name='Description'

/></font></h1> 31 </database:query> 32 </td> 33 </tr> 34 <tr> 35 <td> 36 <div align="center"><p><a

href="productscate.jsp">��</a></p></div> 37 <TABLE border='0' CELLSPACING='1' CELLPADDING='5' ALIGN='CENTER' bgcolor="#FFFFFF" width="80" > 38 <database:query sql='<%=SQL%>' pagesize='<%=request.getParameter("pagesize")%>' 39 currentpage='<%=request.getParameter("currentpage")%>'>

40 <FORM METHOD='POST' ACTION='add2cart.jsp'> 41 <TR> 42 <TD class="keyfield"> 43 <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#003300"> 44 <tr> 45 <td align="center" bgcolor="#FFFFFF"> 46 <img src="images/<database:column name='ProductID' />tiny.gif"> 47 </td> 48 </tr> 49 </table> 50 �� <database:column name='ProductID' /> 51 </TD> 52 <TD valign="top" nowrap><b>��</b> <database:column name='Brand' /> 53 <br> <b>�� </b><database:column name='Title' /> 54 </TD> 55 <TD nowrap colspan="1" align="right" valign="top"> 56 <b><font color="#990000" >�� 57 <span class="discount"><database:column name='Price' /></span> ��<br></font> 58 <font color="#000099">�� <database:column name='Sale' /></font></b> 59 <b><font color="#000099"></font><font color="#000099">�� </font></b> <br> 60 <a href="product.jsp?productid=<database:column name='ProductID'/>"

>��</a> 61 </TD> 62 <TD align="center" nowrap> 63 <input type='HIDDEN' name='productid' value="<database:column name='ProductID' />"> 64 <input type='HIDDEN' name='qty' value='1'> 65 <input type='HIDDEN' name='title' value='<database:column name="Category" /> 66 <database:column name="Brand" /> <database:column name="Title" />'> 67 <input type='HIDDEN' name='sale' value='<database:column name="Sale" />'> 68 <input type="image" border="0" name="imageField" src="images/cart.gif" width="22" height="22"> 69 <br><font size="-2">�� </font> 70 </TD> 71 </TR> 72 <TR> 73 <TD COLSPAN='6'" height="1" bgcolor="#0097DF"></TD> 74 </TR> 75 </FORM> 76 </database:query> 77 <TR> 78 <TD COLSPAN='6' ALIGN='CENTER' class="pagenav"> 79 <database:pagenavigator sql='<%=SQL%>' 80 pagesize='<%=request.getParameter("pagesize")%>' 81 currentpage='<%=request.getParameter("currentpage")%>' 82 uri='<%=(request.getRequestURI() + "?" + request.getQueryString())%>' /> 83 </TD> 84 </TR> 85 </TABLE> 86 <HR align="center" size="1" width="80%"> 87 <TABLE align="center" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF"> 88 <TR> 89 <TH COLSPAN='4' > ��</TH> 90 </TR> 91 <FORM METHOD='GET' ACTION=''> 92 <TR> 93 <TD colspan="2" align="right">��</TD> 94 <TD> 95 <INPUT TYPE='TEXT' NAME='filter'> 96 <INPUT TYPE='HIDDEN' NAME='cateid' VALUE='<%=request.getParameter("cateid")%>'> 97 <INPUT TYPE='HIDDEN' NAME='currentpage' VALUE='<%=request.getParameter("currentpage")%>'> 98 <INPUT TYPE='HIDDEN' NAME='pagesize' VALUE='<%=request.getParameter("pagesize")%>'> 99 </TD> 100 <TD align="center"><INPUT TYPE='Submit' NAME='Search' VALUE="��"></TD> 101 </TR> 102 <TR> 103 <TD colspan="2"></TD> 104 <TD colspan="2"><b>��</b> ��</TD> 105 </TR> 106 </FORM> 107 </TABLE> 108 </td>

109 </tr> 110 </table> 111 </database:connection> 112 </body> 113 </html>

รูปแสดงการทำงานของเอกสาร productlisting.jsp เมื่อพารามิเตอร์ cateid=1

เอกสาร product.jsp มีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page contentType="text/html; charset=windows-874"%> 3 <%@page import="EJP.ThaiUtilities" %> 4 <%@taglib uri="tags/db-tags.tld" prefix="database" %> 5 <% 6 String thispage = "dbProducts.jsp"; 7 String tablename = "Products"; 8 String SQL = "select ProductID, Title, Price, Sale, Products.Description AS Description, " + 9 " Brands.Description AS Brand, Categories.Description AS Category from Products, Brands, Categories " + 10 "WHERE Products.BrandID = Brands.BrandID AND Products.CategoryID = Categories.CategoryID "; 11 12 if ((request.getParameter("productid") != null) && (request.getParameter("productid").length()>0)) 13 SQL = SQL + " AND Products.ProductID = " + request.getParameter("productid"); 14 %> 15 <html> 16 <head><title>Product Description</title> 17 <link rel="stylesheet" href="classicstyle.css" type="text/css"> 18 </head> 19 <body>

20 <table width="60%" border="1" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF" bordercolor="#FF0000" align="center"> 21 <tr> 22 <td align="center"> 23 <h1 align="left"><font color="#0066CC">��</font> </h1> 24 <database:connection jdbcdriver='org.gjt.mm.mysql.Driver' 25 url='jdbc:mysql://127.0.0.1:3306/shop' username='' password=''> 26 <TABLE border='0' CELLSPACING='1' CELLPADDING='2' align="center" > 27 <database:query sql='<%=SQL%>'> 28 <FORM METHOD='POST' ACTION='add2cart.jsp' target='_parent'> 29 <TR> 30 <TD valign="top"> 31 <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#003300"> 32 <tr> 33 <td align="center" bgcolor="#FFFFFF" valign="top"> 34 <img src="images/<database:column name='ProductID' />.gif" width="150"> 35 </td> 36 </tr> 37 </table> 38 </TD> 39 <TD valign="top"> 40 <p><b>��</b> <database:column name='ProductID' /> <br> 41 <b>�� </b><database:column name='Title' /><br> 42 <b>��</b> <database:column name='Brand' /></p> 43 <pre><b>��</b><br><database:column name='Description' /></pre> 44 </TD> 45 </TR> 46 <TR> 47 <TD nowrap align="right" valign="top"> 48 <b><font color="#990000">�� <span class="discount"><database:column name='Price' /> 49 </span> ��<br></font><font color="#000099">�� <database:column name='Sale'

/> 50 �� </font></b> 51 </TD> 52 <TD align="center"> 53 <input type='HIDDEN' name='ProductID' value="<database:column name='ProductID' />"> 54 <input type='HIDDEN' name='qty' value='1'> 55 <input type='HIDDEN' name='title' value='<database:column name="Category" /> 56 <database:column name="Brand" /> <database:column name="Title" />'> 57 <input type='HIDDEN' name='sale' value='<database:column name="Sale" />'> 58 <input type="image" border="0" name="imageField" src="images/cart.gif" width="22" height="22"> 59 <br><font size="-2">��</font> 60 </TD> 61 </TR> 62 </FORM> 63 </database:query> 64 </TABLE> 65 </database:connection> 66 <br><a href="#" onclick="JavaScript:history.back()">��</a> 67 </td> 68 </tr> 69 </table> 70 </body> 71 </html>

รูปแสดงการทำงานของเอกสาร product.jsp เมื่อพารามิเตอร์ productid=111

เอกสาร add2cart.jsp เน้นไปทางด้านการเขียนภาษาจาวา ผนวกลงไปในเอกสาร JSP เพื่อแสดงรายงานสรุปสินค้าที่อยู่ในตะกร้า กับตัวแปรในเซสชั่น เพื่อลบรายการสินค้า หากผู้ซื้อเปลี่ยนจำนวนสินค้าเป็นค่า 0 และกดปุ่มปรับปรุง หรือเปลี่ยนแปลงจำนวนการสั่งซื้อและกดปุ่มปรับปรุง ซึ่งจะมีผลทำให้ราคารวมที่แสดงมีการเปลี่ยนแปลงตามจำนวนสินค้าเกิดขึ้นด้วย เอกสารมีรายละเอียดดังนี้ 72 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 73 <%@page contentType="text/html; charset=windows-874"%> 74 <%@page import="EJP.ThaiUtilities, java.util.*, java.lang.*, java.text.*, ShoppingCart.ProductItem" %> 75 <%@taglib uri="tags/db-tags.tld" prefix="database" %> 76 <html> 77 <head><title>Product in Shopping Cart</title> 78 <link rel="stylesheet" href="classicstyle.css" type="text/css"> 79 </head> 80 <body> 81 <jsp:useBean id="cart" class="ShoppingCart.Cart" scope="session" /> 82 <% 83 // Add new product item into cart 84 if ((request.getParameter("productid") != null) && (request.getParameter("productid").length()>0)) { 85 if ((request.getParameter("qty") != null) && (request.getParameter("qty").length()>0)) { 86 if ((request.getParameter("sale") != null) && (request.getParameter("sale").length()>0)) { 87 if ((request.getParameter("title") != null) && (request.getParameter("title").length()>0)) { 88 cart.addProductItem(Integer.parseInt(request.getParameter("productid")), 89 Byte.parseByte(request.getParameter("qty")) ,

Double.parseDouble(request.getParameter("sale")), 90 ThaiUtilities.ASCII2Unicode(request.getParameter("title"))); 91 } 92 } else 93 if (Byte.parseByte(request.getParameter("qty"))>0) 94 cart.updateProductItem(Integer.parseInt(request.getParameter("productid")), 95 Byte.parseByte(request.getParameter("qty"))); 96 else 97 cart.removeProductItem(Integer.parseInt(request.getParameter("productid"))); 98 } 99 } 100 101 %> 102 <table width="100%" border="1" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF" bordercolor="#FF0000"> 103 <tr> 104 <td> 105 <h1 align="left"><font color="#0066CC">��</font></h1> 106 <table border="0" cellspacing="1" cellpadding="2" align="center"> 107 <tr> 108 <th align="center">��</th><th align="center">��</th><th

align="center">��</th>

109 <th align="center">�� (��)</th><th align="center">��</th> 110 <th align="center">�� (��)</th><th></th> 111 </tr> 112 <% 113 double total = 0.0, grandtotal = 0.0; 114 int count = 0; 115 116 Vector mycart = cart.getCart(); 117 ProductItem item; 118 if (mycart.size() > 0) { 119 StringBuffer condition = new StringBuffer(" in ("); 120 for (int i=0; i<mycart.size();i++) { 121 item = (ProductItem)mycart.elementAt(i); 122 %> 123 <form method='' action=''> 124 <tr> 125 <td align="center"><%=(i+1)%></td> 126 <td align="center"><input type="hidden" name="productid" 127 value="<%=item.id%>"><%=item.id%></td> 128 <td><%=item.title%></td> 129 <td align="right"><%=NumberFormat.getInstance().format(item.sale)%></td> 130 <td align="center"><input type="text" name="qty" size="5" value="<%=item.qty%>"></td> 131 <td align="right"> 132 <% 133 total = item.sale * item.qty; 134 out.print(NumberFormat.getInstance().format(total)); 135 grandtotal += total; 136 total = 0; 137 %> 138 </td> 139 <td><input type="submit" name="Submit3" value="��"></td> 140 </tr> 141 </form> 142 <% 143 } %> 144 <tr> 145 <td></td><td></td><td></td><td></td> 146 <td align="right"><b>��</b></td> 147 <td align="right"><%=NumberFormat.getInstance().format(grandtotal)%></td> 148 <td></td> 149 </tr> 150 <% 151 } 152 else { %> 153 <tr align="center"> 154 <td colspan="7"><b>��</b></td> 155 </tr> 156 <% 157 } %> 158 </table> 159 <form name="form1" method="post" action="customerinfo.jsp"> 160 <div align="right"> 161 <input type="button" name="return" value="��" 162 onclick='JavaScript:window.location="productscate.jsp"'> 163 <input type="submit" name="Submit" value="��"> 164 </div> 165 </form> 166 </td> 167 </tr> 168 </table> 169 </body> 170 </html>

รูปแสดงการทำงานของเอกสาร add2cart.jsp เมื่อหยิบสินค้ารหัส 211 และ 322 ลงในตะกร้าสินค้า

เอกสาร customerifo.jsp มีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page contentType="text/html; charset=windows-874"%> 3 <%@page import="EJP.ThaiUtilities, java.util.*, java.lang.*, ShoppingCart.ProductItem" %> 4 <%@taglib uri="tags/db-tags.tld" prefix="database" %> 5 <html> 6 <head><title>Product in Shopping Cart</title> 7 <link rel="stylesheet" href="classicstyle.css" type="text/css"> 8 </head> 9 <body> 10 <jsp:useBean id="cart" class="ShoppingCart.Cart" scope="session" /> 11 <table width="100%" border="1" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF" bordercolor="#FF0000"> 12 <tr> 13 <td> 14 <h1 align="left"><font color="#0066CC">��</font></h1> 15 <form name="form" method="post" action="finalorder.jsp"> 16 <table border="0" cellspacing="0" cellpadding="4" align="center" bgcolor="#EEEEEE"> 17 <tr bgcolor="#0066CC"> 18 <td colspan="4"><b><font color="#FFFFFF">��</font></b></td> 19 </tr> 20 <tr> 21 <td align="right">��</td> 22 <td><input type="text" name="COL_STR_Name"></td> 23 <td align="right">��</td> 24 <td><input type="text" name="COL_STR_Surname"></td> 25 </tr> 26 <tr> 27 <td align="right">E-mail</td> 28 <td><input type="text" name="COL_STR_Email"></td> 29 <td align="right">��</td> 30 <td><input type="text" name="COL_STR_Phone"></td> 31 </tr> 32 <tr bgcolor="#0066CC"> 33 <td colspan="4"><b><font color="#FFFFFF">��</font></b></td> 34 </tr> 35 <tr> 36 <td align="right">��</td> 37 <td><input type="text" name="COL_STR_AddressNo"></td> 38 <td align="right">��</td> 39 <td><input type="text" name="COL_STR_Street"></td> 40 </tr> 41 <tr> 42 <td align="right">��/��</td> 43 <td><input type="text" name="COL_STR_Tumbol"></td> 44 <td align="right">��/��</td> 45 <td><input type="text" name="COL_STR_Amphor"></td>

46 </tr> 47 <tr> 48 <td align="right">��</td> 49 <td><input type="text" name="COL_STR_Province"></td> 50 <td align="right">��</td> 51 <td><input type="text" name="COL_STR_Postal"></td> 52 </tr> 53 <tr> 54 <td></td><td></td><td></td> 55 <td align="center"><input type="submit" name="Submit"

value="��"></td> 56 </tr> 57 </table> 58 </form> 59 </td> 60 </tr> 61 </table> 62 </body> 63 </html>

รูปแสดงการทำงานของเอกสาร customerinfo.jsp

เอกสาร finalorder.jsp มีรายละเอียดดังนี้ 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <%@page contentType="text/html; charset=windows-874"%> 3 <%@page import=" java.util.*,java.lang.*,java.text.*,java.sql.*,ShoppingCart.ProductItem,EJP.ThaiUtilities,EJP.DbUtilities" %> 4 <%@taglib uri="tags/db-tags.tld" prefix="database" %> 5 <html> 6 <head><title>Final Order</title> 7 <link rel="stylesheet" href="classicstyle.css" type="text/css"> 8 </head> 9 <body> 10 <jsp:useBean id="cart" class="ShoppingCart.Cart" scope="session" /> 11 <% 12 Class.forName("org.gjt.mm.mysql.Driver"); 13 Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/shop", "", ""); 14 Statement stmt = conn.createStatement(); 15 // �� mySQL 16 SimpleDateFormat formatter = new SimpleDateFormat ("yyyy-MM-dd hh:mm:ss", Locale.US); 17 java.util.Date currentDateTime = new java.util.Date();

18 String strdate = formatter.format(currentDateTime); 19 20 // �� SQL �� Orders ��

customerinfo.jsp �� 21 StringBuffer SQL1; 22 String table = "Orders"; 23 String SQL = DbUtilities.getInsertString(request, table); 24 SQL1 = new StringBuffer(SQL); 25 int index = SQL.indexOf(table + "(") ; 26 if (index>0) { 27 SQL1.replace(index, index + 7, table + "(OnDate,"); 28 } 29 SQL = SQL1.toString(); 30 index = SQL.indexOf("VALUES("); 31 if (index>0) { 32 SQL1.replace(index, index + 7, "VALUES('" + strdate + "',"); 33 } 34 // ��

�� 0 35 if (stmt.executeUpdate(SQL1.toString())>0) { 36 // �� SQL �� Orders

�� 37 // �� OrderID �� Orders �� 38 SQL = "SELECT OrderID FROM Orders WHERE OnDate = '" + strdate+ "'"; 39 ResultSet rs = stmt.executeQuery(SQL); 40 if (rs.next()) { 41 int orderid = rs.getInt("OrderID"); 42 rs.close(); 43 // �� SQL

�� OrderDetails ��

44 Vector mycart = cart.getCart(); 45 for (int i = 0;i<mycart.size();i++) { 46 StringBuffer SQL2 = 47 new StringBuffer("INSERT INTO OrderDetails(OrderID, ProductID, Qty) VALUES("); 48 ProductItem item = (ProductItem)mycart.elementAt(i); 49 SQL2.append(orderid); 50 SQL2.append(", " + item.id); 51 SQL2.append(", " + item.qty); 52 SQL2.append(")"); 53 stmt.executeUpdate(SQL2.toString()); 54 } 55 } 56

out.println("<CENTER>�� </CENTER>");

57 } 58 conn.close(); 59 %> 60 </body> 61 </html>

รูปแสดงการทำงานของเอกสาร finalorder.jsp

จากตัวอย่างระบบขายสินค้าออนไลน์ที่นำเสนอขึ้นมาในเนื้อหาบทนี้ค่อนข้างยาวพอสมควร เนื่องจากมีการทำงานของเอกสารผสมผสานกันเพื่อการทำงานให้เป็นผลสำเร็จ ทางผู้เขียนได้นำเอาหลักการที่เกี่ยวข้องกับเทคโนโลยีเซิร์ฟเล็ต JSP และเทคโนโลยีสนับสนุนอื่นๆ เช่น CSS

ขึ้นมาสร้างตัวอย่างเพื่อทำให้เกิดกิจกรรมเพื่อทำงานระบบขายสินค้าออนไลน์ได้ในแบบง่ายๆ ซึ่งผู้อ่านสามารถปรับเปลี่ยนให้มีการทำงานที่ดีขึ้น เช่นการเพิ่มระบบสมาชิก

การควบคุมความปลอดภัยของระบบจัดการข้อมูลของผู้บริหารด้วยทะเบียนผู้ใช้ เป็นต้น ทางผู้เขียนหวังว่าตัวอย่างนี้จะทำให้ผู้อ่านได้ทำความเข้าใจในหลักการของการประยุกต์ใช้งานเทคโนโลยีจาวาได้ในระดับหนึ่ง

javacentrix com chap11-2

Documents