Giỏ hàng với JSP

Trong bài này tôi sẽ hướng dẫn bạn cách tạo 1 giỏ hàng dùng jsp chuẩn. Trước hết, bạn cấn tạo 1 database hết sức đơn giản có tên qlsp và trong đó có 1 bảng có tên Sanpham(maSP,tenSP,dongia). Ở đây tôi không có ý bàn về database, tôi chỉ dùng nó đơn giản là công cụ hỗ trợ lưu dữ liệu. Trong ứng dụng thực tế bạn không thiết kế cơ sở dữ liệu như thế này. Thiết kế của bảng dữ liệu như sau:

Bạn nhập 1 số mẫu tin vào để thử. Tôi có vài mẫu tin như sau:

Bây giờ bạn tạo 1 thư mục trong thư mục webapps của Tomcat có tên ShoppingCart_SJSP.

Bạn tạo thêm thư mục WEB-INF\lib, WEB-INF\classes trong thư mục trên.

Bây giờ bạn phải viết code java đặc tả các đối tượng có liên quan đến giỏ hàng của mình.

Đầu tiên là đối tượng Sanpham để đặc tả cho 1 sản phẩm. Code như sau:

package www.vvh.com.db;

public class SanPham {
	private String msSP;
	private String tenSP;
	private double dongia;

	public SanPham() {
		super();
	}
	public SanPham(String msSP, String tenSP, double dongia) {
		super();
		this.msSP = msSP;
		this.tenSP = tenSP;
		this.dongia = dongia;
	}
	public String getMsSP() {
		return msSP;
	}
	public void setMsSP(String msSP) {
		this.msSP = msSP;
	}
	public String getTenSP() {
		return tenSP;
	}
	public void setTenSP(String tenSP) {
		this.tenSP = tenSP;
	}
	public double getDongia() {
		return dongia;
	}
	public void setDongia(double dongia) {
		this.dongia = dongia;
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((msSP == null) ? 0 : msSP.hashCode());
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		SanPham other = (SanPham) obj;
		if (msSP == null) {
			if (other.msSP != null)
				return false;
		} else if (!msSP.equals(other.msSP))
			return false;
		return true;
	}

	@Override
	public String toString() {
		return tenSP;
	}
}

Sau đó bạn viết các lớp nối đến database phục vụ cho việc lấy dữ liệu. Có 2 lớp, lớp ConnectDBFactory dùng để kết nối đến database, ở đây chúng ta kết nối đến hệ quản trị cơ sở dữ liệu MySQL và lớp XulyDB bao gồm các thao tác xử lý căn bản.

package www.vvh.com.db;

import java.sql.Connection;
import java.sql.DriverManager;

public class ConnectDBFactory {
	private static Connection con;

	public static Connection CreateMySqlConnection
	(String database)throws Exception{
		String url="com.mysql.jdbc.Driver";
		Class.forName(url);
		String dbURL = "jdbc:mysql://localhost:3306/" 
			+database+"?user=root&password=";	
		con=DriverManager.getConnection(dbURL);

		return con;
	}
}

package www.vvh.com.db;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;

public class XulyDB {
	private Connection con;

	public XulyDB(){
		try {
			con=ConnectDBFactory.CreateMySqlConnection("qlsp");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public SanPham getSanPham(String ms){
		SanPham sp=null;

		try {
			Statement stmt=con.createStatement();
			String sql="select * from sanpham where mssp='"+ms+"'";
			ResultSet rs=stmt.executeQuery(sql);
			if(rs.next()){
				String mssp=rs.getString("mssp");
				String ten=rs.getString("tenSP");
				double dg=rs.getDouble("dongia");
				sp=new SanPham(mssp,ten,dg);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return sp;
	}

	public ResultSet getAllProducts(){
		ResultSet rs=null;
		try {
			Statement stmt=con.createStatement();
			String sql="select * from sanpham";
			rs=stmt.executeQuery(sql);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return rs;
	}
}

Để cho việc kết nối thành công chúng ta cần phải copy driver của MySQL đến thư mục WEB-INF\lib.

Tiếp theo ta phải đặc tả 1 giỏ hàng để client có thể sử dụng. Ta nhận thấy rằng 1 giỏ hàng chứa nhiều món hàng, mỗi món hàng giữ thông tin về mã số của sản phẩm, số lượng đang có trong giỏ và đơn giá của mỗi sản phẩm. Đơn giá trong đối tượng này có thể không cần vì ta có thể dựa vào mã số sản phẩm có thể lấy được, tuy nhiên ở đây ý tôi muốn nói là bạn có thể lấy giá trong database làm giá cơ bản, bạn thêm vào các loại phí,… để tạo thành giá bán.

Code cho đối tượng món hàng như sau:

package www.vvh.com.spc;

public class MonHang {
	private String msMH;
	private int soluong;
	private double dongia;
	public double getDongia() {
		return dongia;
	}
	public void setDongia() {
	}
	public MonHang(String msMH, int soluong, double dongia) {
		super();
		this.msMH = msMH;
		this.soluong = soluong;
		this.dongia = dongia;
	}
	public String getMsMH() {
		return msMH;
	}
	public void setMsMH(String msMH) {
		this.msMH = msMH;
	}
	public int getSoluong() {
		return soluong;
	}
	public void setSoluong(int soluong) {
		this.soluong = soluong;
	}
	public void setDongia(double dongia) {
		this.dongia = dongia;
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((msMH == null) ? 0 : msMH.hashCode());
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		MonHang other = (MonHang) obj;
		if (msMH == null) {
			if (other.msMH != null)
				return false;
		} else if (!msMH.equalsIgnoreCase(other.msMH))
			return false;
		return true;
	}
	
	@Override
	public String toString() {
		return msMH;
	}
}

Trong đối tượng giỏ hàng ta dùng 1 ArrayList để lưu trữ 1 danh sách các món hàng. Ở đây tôi chỉ viết 2 thao tác là thêm hàng vào giỏ và tính tổng giá tiền của giỏ hàng còn những phương thức khác như Xóa món hàng khỏi giỏ,… bạn có thể bổ sung thêm.

package www.vvh.com.spc;

import java.util.ArrayList;

public class Giohang {
	
	private ArrayList<MonHang>cart;
	
	public Giohang(){
		cart=new ArrayList<MonHang>();
	}
	
	public void ThemHang(MonHang mh){
		//Nếu món hàng đã có trong giỏ
		//thì cập nhập lại số lượng
		if(cart.contains(mh)){
			MonHang hang=cart.get(cart.indexOf(mh));
			hang.setSoluong(hang.getSoluong()+mh.getSoluong());
		}
		else{//còn không thì thêm mới
			cart.add(mh);
		}
	}
	
	public double Tongtien(){
		double tien=0;
		for(MonHang mh:cart){
			tien+=mh.getDongia()*mh.getSoluong();
		}
		return tien;
	}
	
	public ArrayList<MonHang> getGH(){
		return cart;
	}
}

OK, như vậy phần code xong rồi! Bạn tiến hành biên dịch và đóng gói nó lại.

Bạn tạo 1 file có tên build.bat với nội dung sau

javac -d . -encoding UTF-8 *.java pause

Thực thi file này, đảm bảo bạn không nhìn thấy lỗi nào. Sau đó tiến hành đóng gói nó, bạn tạo file pack.bat có nội dung sau:

jar -cvf shop.jar www/vvh/com/spc/*.class www/vvh/com/db/*.class pause

Thực thi file này, bạn sẽ có file shop.jar, copy file này vào thư mục lib.

Bây giờ bạn hãy khởi động Tomcat(nếu đã khởi động thì restart lại).

Tiếp theo bạn thiết kế phần JSP.

Đầu tiên bạn thiết kế giao diện cho trang shopping.jsp, code như sau:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="loi.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="java.sql.ResultSet"%>
<%@page import="www.vvh.com.db.XulyDB"%>
<%@page import="www.vvh.com.spc.Giohang"%>
<%@page import="java.util.ArrayList"%>
<%@page import="www.vvh.com.spc.MonHang"%>
<%@page import="www.vvh.com.db.SanPham"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mua hàng qua mạng</title>
</head>
<body>
 	<form action="xuly.jsp" method="post">
 		Chọn sản phẩm:<select name="ms">
		<%
			XulyDB db=new XulyDB();
			ResultSet rs=db.getAllProducts();
			while(rs.next()){
				%>
				 	<option label='<%=rs.getString("tensp") %>' 
				 		value='<%=rs.getString("mssp") %>'>
				<%
			}
		%>
		</select>
		Số lượng:<input type="text" name="sl"/>
		<input type="submit" value="Mua Hàng" name="mua"/>
		<input type="submit" value="In Hóa đơn" name="in"/>	
		<hr/>
		<h1>CHI TIẾT GIỎ HÀNG</h1>
		<table border="1" width="70%">
			<tr><th>MSSP</th>
			<th>Ten san Phẩm</th>
			<th>Số lượng</th>
				<th>Đơn giá</th></tr>
			<%
				Giohang cart=(Giohang)session.getAttribute("gio"); 
				if(cart!=null){
					ArrayList<MonHang> ds=cart.getGH();
					for(MonHang mh:ds){
						SanPham sp=db.getSanPham(mh.getMsMH());
						%>
							<tr>
								<td><%= mh.getMsMH()%></td>
								<td><%= sp.getTenSP()%></td>
								<td><%= mh.getSoluong()%></td>
								<td><%= mh.getDongia()%></td>
							</tr>
						<%
					}
			%>
		</table>
		<h2 align="right">Tổng tiền:<%=cart.Tongtien() %></h2>
		<%} %>
 	</form>
</body>
</html>

Mong muốn của bạn khi thực thi trang này sẽ là:

Khi khách hàng chọn sản phẩm, nhập vào số lượng rồi nhấn nút mua hàng, quá trình xử lý sẽ chuyển sang trang xuly.jsp. Code như sau:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="loi.jsp"%>

<%@page import="www.vvh.com.spc.Giohang"%>
<%@page import="www.vvh.com.db.XulyDB"%>
<%@page import="www.vvh.com.db.SanPham"%>
<%@page import="www.vvh.com.spc.MonHang"%><html>

	<%
		Giohang cart=(Giohang)session.getAttribute("gio");
	
		if(request.getParameter("mua")!=null){
			String mssp=request.getParameter("ms");
			int soluong=Integer.parseInt(request.getParameter("sl"));
			if(cart==null)
				cart=new Giohang();
			XulyDB db=new XulyDB();
			SanPham sp=db.getSanPham(mssp);//l;ay 1 sp
			MonHang mh=new MonHang(sp.getMsSP(),soluong,sp.getDongia());
			//them vào giỏ
			cart.ThemHang(mh);
			
			session.setAttribute("gio",cart);
			
			response.sendRedirect("shopping.jsp");
		}
		else if(request.getParameter("in")!=null){
			response.sendRedirect("hoadon.jsp");	
		}
	%>

Khi khách hàng nhấn nút In Hóa đơn, trang hoadon.jsp sẽ xử lý, nội dung của nó như sau:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="loi.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="www.vvh.com.spc.Giohang"%>
<%@page import="java.util.ArrayList"%>
<%@page import="www.vvh.com.spc.MonHang"%>
<%@page import="www.vvh.com.db.SanPham"%>
<%@page import="www.vvh.com.db.XulyDB"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="70%">
		<tr><th>MSSP</th>
		<th>Ten san Phẩm</th>
		<th>Số lượng</th>
			<th>Đơn giá</th></tr>
		<%
			Giohang cart=(Giohang)session.getAttribute("gio"); 
			
			if(cart!=null){
				XulyDB db=new XulyDB();
				ArrayList<MonHang> ds=cart.getGH();
				for(MonHang mh:ds){
					SanPham sp=db.getSanPham(mh.getMsMH());
					%>
						<tr>
							<td><%= mh.getMsMH()%></td>
							<td><%= sp.getTenSP()%></td>
							<td><%= mh.getSoluong()%></td>
							<td><%= mh.getDongia()%></td>
						</tr>
					<%
				}
		%>
	</table>
	<h2 align="right">Tổng tiền:<%=cart.Tongtien() %></h2>
		<%} %>
</body>
</html>

Cuối cùng là trang hiển thị thông tin lỗi. Code như sau:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isErrorPage="true"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Trang lỗi</title>
</head>
<body>
	<h2>Bạn đã nhập liệu sai!</h2>
	<hr/>
	<%= exception.toString() %>
</body>
</html>

Cấu trúc chương trình:

Kết quả thử nghiệm:

Chúc thành công!