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:

Trang chọn sản phẩm
Trang chọn sản phẩm

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

Giỏ hàng
Giỏ hàng

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

Trang sản phẩm

<%-- 
    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>

Trang giỏ hàng

<%@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>
Advertisements

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

  1. ý 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

    Số lượt thích

    • 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

      Số lượt thích

Phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s