JSP 개인프로젝트-영어 학습 사이트 만들기 (강의 장바구니 담기 및 삭제)

이전글

https://amongthestar.tistory.com/152?category=411827

JSP 개인프로젝트-영어 학습 사이트 만들기 (수강후기 상세보기 및 수정 삭제, 댓글 입력 및 삭제)

 

---

이번에 포스팅할 내용은 강의 상세보기 화면에서 "등록하기" 버튼을 눌렀을때 생기는 장바구니 담기 기능에 대해서다.

장바구니는 DB도 따로 있으니 DTO도 따로 생성했다.

 

WCartDTO.java

package com.wmember.model;

public class WCartDTO {
	private int cartnum;
	private int classnum;
	private String classname;
	private String userid;
	
	public int getCartnum() {
		return cartnum;
	}
	public void setCartnum(int cartnum) {
		this.cartnum = cartnum;
	}
	public int getClassnum() {
		return classnum;
	}
	public void setClassnum(int classnum) {
		this.classnum = classnum;
	}
	public String getClassname() {
		return classname == null ? "" : classname.trim();
	}
	public void setClassname(String classname) {
		this.classname = classname;
	}
	public String getUserid() {
		return userid == null ? "" : userid.trim();
	}
	public void setUserid(String userid) {
		this.userid = userid;
	}
}

---

강의 상세보기 화면에서 "등록하기" 버튼을 눌렀을때의 로직은 $.ajax함수를 이용했다.

 

//등록하기 클릭
	$("#subscribe").click(function(){
		if(${sessionScope.userid==null}){
			alert("로그인 필요");
			location.href="/Tutoring/member/login";
		}else{
			if(confirm("장바구니에 추가하시겠습니까?")){
				//장바구니에 있는지 확인
				$.ajax({
					type : "post",
					url  : "/Tutoring/class/cartCheck",
					data : {"classnum":$("#classnum").val(), "userid":$("#userid").val()},
					success : function(value){
						if(value.trim()=="1"){
							alert("이미 장바구니에 있는 강의입니다.");
						}else{
							$.ajax({
								  type:    "post",
				                  url :    "/Tutoring/class/cartInsert",
				                  data:    {"classnum":$("#classnum").val(), "userid":$("#userid").val(), "classname":$("#classname").val()},
				                  success:function(d){
				                	   if(d.trim()=="1"){
					                	   alert("장바구니에 강의가 담겼습니다!");
					                	   if(confirm("장바구니로 이동하시겠습니까?")){
					                		   location.href="/Tutoring/member/cartList.jsp";
					                	   }
				                	   }
				                  },
				                  error: function(e){
				                       alert("error:"+e);
				                  }
							})//ajax	
						}
					},
					error: function(e){
						alert("error:"+e);
					}
				})//ajax
			}//if
		}//else
	})//subscribe

 

가장먼저 로그인을 하도록 유도하고, 로그인이 되어있다면 카드에 있는지 확인하는 cartCheck을 수행한다.

동일한 강의일 경우 장바구니에 1개만 추가될 수 있기 때문이다. 

 

cartCheck을 수행하고 나면 장바구니에 추가할 수 있다. 추가 후에는 다음과 같은 메시지들이 뜬다. 

 

---

WCartCheck.java

(장바구니에 있는 확인하는 서블릿. 경로는 "/Tutoring/class/cartCheck"이다.)

 

package com.wclass.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.wmember.model.WCartDAO;
import com.wmember.model.WCartDTO;

/**
 * Servlet implementation class WCartCheck
 */
@WebServlet("/class/cartCheck")
public class WCartCheck extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WCartCheck() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 RequestDispatcher rd=request.getRequestDispatcher("courseDetail.jsp");
         rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
        int classnum=Integer.parseInt(request.getParameter("classnum"));
        String userid=request.getParameter("userid");
        WCartDAO dao=WCartDAO.getInstance();
        int flag=dao.cartCheck(classnum, userid); //이미 userid에 classnum이 동일하게 있다면 flag=1;
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(flag);
	}

}

 

파라미터 값으로 받아온 강의번호와 아이디를 인자로하여 WCartDAO.java에서 cartCheck 메소드를 수행한다. 반환값을 받아서 다시 ajax으로 이동한다.

 

---

<WCartDAO.java에서 cartCheck 메소드>

 

//디비셋팅
	private static WCartDAO instance=new WCartDAO();
	public static WCartDAO getInstance() {
		return instance;
	}
	private Connection getConnection() throws Exception{
		Context initCtx=new InitialContext();
		Context envCtx=(Context) initCtx.lookup("java:comp/env");
		DataSource ds=(DataSource) envCtx.lookup("jdbc/wiser"); //context.xml의 name을 jdbc/member로 바꾸기
		return ds.getConnection();
	}

//장바구니 체크
	public int cartCheck(int classnum, String userid) {
		Connection con=null;
		Statement st=null;
		ResultSet rs=null;
		int flag=-1;
		try {
			con=getConnection();
			String sql="select classnum, classname from wcart where userid='"+userid+"'";
			st=con.createStatement();
			rs=st.executeQuery(sql);
			if(rs.next()) { //id 맞음
				if(rs.getInt("classnum")==classnum) { //비번 일치
					flag=1;
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, rs);
		}
		return flag;
	}
    
//닫기 closeConnection
	private void closeConnection(Connection con, PreparedStatement ps) {
		try {
			if(ps!=null) ps.close();
			if(con!=null) con.close();
		} catch (SQLException e) {
			e.printStackTrace();
		} 
	}
	private void closeConnection(Connection con, Statement st, ResultSet rs) {
		try {
			if(st!=null) st.close();
			if(con!=null) con.close();
			if(rs!=null) rs.close();
		} catch (SQLException e) {
			e.printStackTrace();
		} 
	}

 

---

cartCheck후 리턴된 flag 값이 1일 경우 장바구니에 있는 강의라는 메시지가 출력되고,

그게 아닐 경우 장바구니에 추가하는 cartInsert를 실행한다.

success : function(value){
	if(value.trim()=="1"){
		alert("이미 장바구니에 있는 강의입니다.");
	}else{
		$.ajax({
		type:    "post",
		url :    "/Tutoring/class/cartInsert",
		data:    {"classnum":$("#classnum").val(), "userid":$("#userid").val(), "classname":$("#classname").val()},
		success:function(d){
          if(d.trim()=="1"){
            alert("장바구니에 강의가 담겼습니다!");
            if(confirm("장바구니로 이동하시겠습니까?")){
            	location.href="/Tutoring/member/cartList.jsp";
          		}
			}
        },
        error: function(e){
            alert("error:"+e);
        }
		})//ajax	
	}
},

 

---

WCartInsert.java

(장바구니 추가 진행 서블릿. 경로는 "/Tutoring/class/cartInsert"이다.)

 

package com.wclass.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.wmember.model.WCartDAO;
import com.wmember.model.WCartDTO;

/**
 * Servlet implementation class WCartInsert
 */
@WebServlet("/class/cartInsert")
public class WCartInsert extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WCartInsert() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RequestDispatcher rd=request.getRequestDispatcher("courseDetail.jsp");
        rd.forward(request, response);
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        WCartDTO cart=new WCartDTO();
        cart.setClassname(request.getParameter("classname"));
        cart.setClassnum(Integer.parseInt(request.getParameter("classnum")));
        cart.setUserid(request.getParameter("userid"));
        WCartDAO dao=WCartDAO.getInstance();
        int flag=dao.cartInsert(cart);
        PrintWriter out = response.getWriter();
        out.println(flag);
    }
}

 

파라미터 값으로 받아온 강의이름, 강의번호, 아이디를 WCartDTO형의 cart객체에 담고 WCartDAO.java의 cartInsert메소드를 수행한다. 리턴값을 내보낸다.

 

 

---

<WCartDAO.java의 cartInsert메소드>

 

//장바구니 추가
	public int cartInsert(WCartDTO vo) {
		Connection con=null;
		PreparedStatement ps=null;
		int flag=0;
		
		try {
			con=getConnection();
			String sql="INSERT INTO wcart(cartnum, classnum, userid, classname) VALUES(wcart_seq.nextval,?,?,?)";
			ps=con.prepareStatement(sql);
			ps.setInt(1, vo.getClassnum());
			ps.setString(2, vo.getUserid());
			ps.setString(3, vo.getClassname());
			flag=ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, ps);
		}
		return flag;
	}

 

장바구니에 추가가 되었다면 int 형의 flag 값이 1이 된다.

 

 

---

flag 값이 1이라면 장바구니에 강의가 담겼습니다! 메시지가 출력된다. 그리고 장바구니로 이동하겠냐는 confirm창에서 확인을 누르면 cartList.jsp로 이동한다.

success:function(d){
      if(d.trim()=="1"){
        alert("장바구니에 강의가 담겼습니다!");
        if(confirm("장바구니로 이동하시겠습니까?")){
        location.href="/Tutoring/member/cartList.jsp";
      }
	}
},

---

cartList.jsp

장바구니 리스트를 getJSON을 통해 불러온다.

 

$(document).ready(function(){
	//장바구니 리스트를 불러옴
	$.getJSON("/Tutoring/member/cartList", 
				{userid:$("#userid").val()}, 
				function(d){
					var htmlStr="<table class='table table-hover table-bordered table-sm'>";
						htmlStr+="<thead><tr>";
		            	htmlStr+="<th style='width: 10%; text-align: center;'>강의 번호</th>";
		            	htmlStr+="<th style='text-align: center;'>강의명</th>";
		            	htmlStr+="<th style='width: 10%; text-align: center'>삭제</th>";
		            	htmlStr+="</tr></thead>";
		            	htmlStr+="<tbody>";
					$.each(d.carr, function(key, val){ 
		            	htmlStr+="<tr>";
	            		htmlStr+="<td>"+val.cartnum+"</td>";
	            		htmlStr+="<td>"+val.classname+"</td>";
	            		htmlStr+="<td style='text-align: center;'><a href='javascript:cartdel("+val.cartnum+")'><img src='/Tutoring/img/delete.png' style='height:20px; width:20px;'></a></td>";
						htmlStr+="</tr>";
					})
						htmlStr+="</tbody></table>";
						$(".back2").html(htmlStr);
				}
	)
})

 

---

WCartList.java

(장바구니 리스트 기능을 구현하는 서블릿. 경로는 "/Tutoring/member/cartList"이다.)

package com.wclass.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;

import com.wmember.model.WCartDAO;
import com.wmember.model.WCartDTO;

/**
 * Servlet implementation class WCartList
 */
@WebServlet("/member/cartList")
public class WCartList extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WCartList() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String userid=request.getParameter("userid");
		WCartDAO dao=WCartDAO.getInstance();
		ArrayList<WCartDTO> arr= dao.cartList(userid);
		
		JSONObject mainObj=new JSONObject();
		JSONArray jarr=new JSONArray();
		
		for(WCartDTO cd:arr) {
			JSONObject obj=new JSONObject();
			obj.put("userid", cd.getUserid());
			obj.put("cartnum", cd.getCartnum());
			obj.put("classnum", cd.getClassnum());
			obj.put("classname", cd.getClassname());
			jarr.add(obj);
		}
		mainObj.put("carr", jarr);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(mainObj.toString());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

WCartDAO의 cartList 메소드를 수행하고 arr 객체에 담는다. 그 arr 객체를 다시 JSONObject과 JSONArray로 처리하고 object 객체를 내보낸다.

 

---

<WCartDAO의 cartList 메소드>

 

//장바구니 전체보기
	public ArrayList<WCartDTO> cartList(String userid) {
		Connection con=null;
		Statement st=null;
		ResultSet rs=null;
		ArrayList<WCartDTO>arr=new ArrayList<WCartDTO>();
		
		try {
			con=getConnection();
			String sql="select * from wcart where userid='"+userid+"'";
			st=con.createStatement();
			rs=st.executeQuery(sql);
			while(rs.next()) {
				WCartDTO dto=new WCartDTO();
				dto.setCartnum(rs.getInt("cartnum"));
				dto.setClassnum(rs.getInt("classnum"));
				dto.setUserid(rs.getString("userid"));
				dto.setClassname(rs.getString("classname"));
				arr.add(dto);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, rs);
		}
		return arr;
	}

 

cartList.jsp에서 불러온 장바구니 목록을 볼 수 있다.

 

---

장바구니에서 해당 강의를 삭제하는 것은 어떻게 구현할 수 있을까?

자신이 쓴 글이면 삭제할수 있도록 휴지통 아이콘이 나타난다. 그 아이콘에 자바스크립트 함수를 붙여넣는다.

 

htmlStr+="<td style='text-align: center;'><a href='javascript:cartdel("+val.cartnum+")'><img src='/Tutoring/img/delete.png' style='height:20px; width:20px;'></a></td>";

 

장바구니 삭제함수가 호출되면 getJSON을 이용하여 cartDelete 경로로 이동한다. 삭제되고 나서도 나머지 목록이 보여야하므로 $.each로 값을 출력한다.

//장바구니 삭제함수
function cartdel(cartnum){
	if(confirm("장바구니에서 삭제하시겠습니까?")){
		$.getJSON("/Tutoring/member/cartDelete", 
				{"cartnum":cartnum, userid:$("#userid").val()}, 
				function(d){
						var htmlStr="<table class='table table-hover table-bordered table-sm'>";
						htmlStr+="<thead><tr>";
		            	htmlStr+="<th style='width: 10%; text-align: center;'>강의 번호</th>";
		            	htmlStr+="<th style='text-align: center;'>강의명</th>";
		            	htmlStr+="<th style='width: 10%; text-align: center'>삭제</th>";
		            	htmlStr+="</tr></thead>";
		            	htmlStr+="<tbody>";
					$.each(d.carr, function(key, val){ 
		            	htmlStr+="<tr>";
	            		htmlStr+="<td>"+val.classnum+"</td>";
	            		htmlStr+="<td>"+val.classname+"</td>";
	            		htmlStr+="<td style='text-align: center;'><a href='javascript:cartdel("+val.cartnum+")'><img src='/Tutoring/img/delete.png' style='height:20px; width:20px;'></a></td>";
						htmlStr+="</tr>";
					})
						htmlStr+="</tbody></table>";
						$(".back2").html(htmlStr);
				}
		)
	}
}

 

 

---

WCartDelete.java

(장바구니 삭제를 진행하는 서블릿. 경로는 "/Tutoring/member/cartDelete"이다.)

 

package com.wclass.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;

import com.wmember.model.WCartDAO;
import com.wmember.model.WCartDTO;

/**
 * Servlet implementation class WCartDelete
 */
@WebServlet("/member/cartDelete")
public class WCartDelete extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WCartDelete() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String userid=request.getParameter("userid");
		int cartnum=Integer.parseInt(request.getParameter("cartnum"));
		WCartDAO dao=WCartDAO.getInstance();
		dao.cartDel(cartnum);
		response.sendRedirect("/Tutoring/member/cartList?userid="+userid);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

삭제한 뒤에는 userid를 들고 장바구니 목록으로 다시 돌아간다.

---

<WCartDAO.java의 cartDel 메소드>

 

//장바구니에서 삭제
	public void cartDel(int cartnum) {
		Connection con=null;
		Statement st=null;
		try {
			con=getConnection();
			String sql="delete from wcart where cartnum='"+cartnum+"'";
			st=con.createStatement();
			st.executeUpdate(sql);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, null);
		}
	}

 

---

<아쉬운 점>

1. 장바구니 외에 따로 결제 기능을 구현하지 못했다. 다른 라이브러리를 배우는데로 업데이트할 예정이다. 다른 사이트들은 잘 모르겠지만.. 캠블리는 장바구니가 아니라 단위 기간별로 결제를 먼저 하는 것 같았는데 그 로직을 이해하지 못했기 때문이다. 

 

2. 또한 영어를 화상으로 튜터와 1:1로 배우는 특성을 살리지 못한 점. 꼭 동영상 수업이 아니더라도.. 그러려면 튜터 DB를 하나 생성해서 학생과 매치시켜야겠지. 그게 어떻게 가능할까?

 

3. 내 강의실을 만들고, 학습하고, 남은 강의일수를 확인하는 시스템을 넣지 못한 점. 결제가 안되기 때문에 장바구니에서 제목을 클릭하면 강의 상세 페이지로 이동만 시켰다. 

 

이로써 JSP 개인프로젝트 리뷰를 마치겠다.

 

https://github.com/kkj0712/JspProject_Tutoring

kkj0712/JspProject_Tutoring