Wednesday, December 26, 2012

Hướng dẫn tạo trang giỏ hàng đơn giản với jsp

Chúng ta cùng nhau xây dựng chức năng giỏ hàng một cách đơn giản nhất trong jsp như sau:

[caption id="attachment_859" align="alignnone" width="300"]Trang chọn sản phẩm Trang chọn sản phẩm[/caption]

Sau khi chọn sản phẩm sẽ chuyển sang trang giỏ hàng

[caption id="attachment_860" align="alignnone" width="300"]Giỏ hàng Giỏ hàng[/caption]

Các bạn có thể tham khảo bên dưới

Trang sản phẩm
[sourcecode language="html"]
<%--
Document : index
Created on : Dec 25, 2012, 3:08:22 PM
Author : Ngo Tuong Dan
--%>

<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
h1
{
color: yellowgreen;
font-style: italic;
}
div
{
margin-left: auto;
margin-right: auto;
width: 300px;
}
input[type=text]
{
width:150px;
text-align:left;
border:thin solid gray;
padding: 2px 5px 2px 5px;
border-radius: 3px 3px 3px 3px;
}
input[type=submit]
{
width:75px;
text-align:center;
border:thin solid gray;
padding: 3px 5px 3px 5px;
border-radius: 3px 3px 3px 3px;
background-color: orange;
}
input[type=submit]:hover
{
width:75px;
text-align:center;
border:thin solid gray;
padding: 3px 5px 3px 5px;
border-radius: 3px 3px 3px 3px;
background-color: yellowgreen;
}
</style>

<title>JSP Page</title>
</head>
<body>
<div>
<h1>Shopping card demo</h1>
<%
if (request.getParameter("btnOK") != null) {
codes.item item = new codes.item();

item.setId(Integer.parseInt(request.getParameter("txtID")));
item.setPrice(Integer.parseInt(request.getParameter("txtPrice")));
item.setQuantity(Integer.parseInt(request.getParameter("txtQuantity")));
java.util.ArrayList orders = new ArrayList();
if (session.getAttribute("Orders") != null) {
orders = ((java.util.ArrayList) session.getAttribute("Orders"));
}
orders.add(item);
session.setAttribute("Orders", orders);

response.sendRedirect("list.jsp");
}
%>

<form method="post">
<table>
<tr>
<td>
ID</td>
<td>
<input type="text" name="txtID" />
</td>
</tr>
<tr>
<td>
Price
</td>
<td>
<input type="text" name="txtPrice"/>
</td>
</tr>
<tr>
<td>
Quantity
</td>
<td>
<input type="text" name="txtQuantity"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit"value="OK" name="btnOK"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

[/sourcecode]

Trang giỏ hàng

[sourcecode language="html"]
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style>
h1
{
color: yellowgreen;
font-style: italic;
}
div
{
margin-left: auto;
margin-right: auto;
width: 300px;
}

table
{
border: 1px solid gray;
padding: 3px 3px 3px 3px;
}

th
{
color: brown;
}
.back
{
width:75px;
text-align:center;
border:thin solid gray;
padding: 2px 5px 2px 5px;
border-radius: 3px 3px 3px 3px;
background-color: orange;
}
.back:hover
{
width:75px;
text-align:center;
border:thin solid gray;
padding: 3px 5px 3px 5px;
border-radius: 3px 3px 3px 3px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>
<h1>Your card</h1>
<table>
<tr>
<th>ID</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Operator</th>
</tr>
<%
java.util.ArrayList orders = new ArrayList();
codes.item item = new codes.item();
if (session.getAttribute("Orders") != null) {
orders = ((java.util.ArrayList) session.getAttribute("Orders"));
}

int count = orders.size() - 1;
while (count > 0) {
item = (codes.item) orders.get(count);

if (request.getParameter("id") != null) {
if (item.getId() == Integer.parseInt(request.getParameter("id"))) {
orders.remove(item);
count--;
continue;
}
}

out.print("<tr>");
out.print("<td>" + item.getId() + "</td>");
out.print("<td>" + item.getPrice() + "</td>");
out.print("<td>" + item.getQuantity() + "</td>");
out.print("<td>" + item.getQuantity() * item.getPrice() + "</td>");
out.print("<td> <a href='?id=" + item.getId() + "'>Delete</a></td>");
count--;
out.print("</tr>");
}
%>
</table>
<br/>
<a class="back" href="index.jsp">continue</a>
</div>
</body>
</html>
[/sourcecode]

10 comments:

  1. Em không hiểu đoạn này (dòng 61 file index.jsp )
    if (request.getParameter("btnOK") != null) {

    codes.item item = new codes.item();

    ý trên là codes.item nghĩa là gì vậy.

    ReplyDelete
  2. codes.item "codes" là package chứa lớp item thôi em, ở đây tôi mô tả một phần tử trong giả hàng bằng lớp item.

    thân

    ReplyDelete
  3. bạn có thể post giúp packet codes được không. ? thank admin

    ReplyDelete
  4. Ý bạn là sao tôi chưa hiểu, code có ở trên đó bạn.

    ReplyDelete
  5. ý mình hỏi giống ý trần đình hồng,mình biết đó là gói nhưng nó báo lỗi.không có cái gói đó.mình nghĩ nó là gói dưới souce.không biết có đúng không

    C:\Users\sam\Documents\NetBeansProjects\HuongDan\build\generated\src\org\apache\jsp\sanpham_jsp.java:101: error: package codes does not exist

    ReplyDelete
  6. Các bạn clearn rồi biên dịch lại nhe, sanpham_jsp.java là do sanpham.jsp khi server biên dịch nó sinh ra servlet này chứ kg phải gói gì đâu các bạn. Đây là ví dụ tôi viết trực tiếp khi hương dẫn các bạn trên lơp nên tôi không nhớ file tui lưu còn kg để tôi lục lại project này xem

    ReplyDelete
  7. Em đã làm nhiều lần rồi.vì thấy code cũng đơn giản.nhưng rõ dàng đây cần 1 packet dưới servlet. codes

    http://www.mediafire.com/?464egzb7zy92q3r đây là hình mà em đa chạy.A có thể lục lại project giúp em cái.thank a nhiều.

    ReplyDelete
  8. OK, de toi xem lai roi up len

    http://www.mediafire.com/?zaowdaar939tco2

    http://www.youtube.com/watch?v=f1_ytmrYCfs&feature=youtu.be

    Một số ví dụ JSP khác
    http://www.mediafire.com/folder/3f5rh9x793qyp/JSP

    ReplyDelete

Translate