졸업작품 피드백
마포평생학습관 열람실 선택 - 공연장 예매할 때 참고
https://mpllc.sen.go.kr/mpllc/index.do?getContextPath=
- 메타 태그로 5초마다 새로고침 되어서 실시간으로 좌석이 업데이트하게 만들 수 있다.
-
중고거래
핸드폰 번호를 올렸을 때 인터넷상에 보여줄 수 있으면 ?
중간 과정을 고민해보기
-
후기게시판
- 부모테이블 하나로 구분코드로 분류해서 여러 테이블을 만든다.
like, where 연산자 사용해서 구분코드로 분류해주면 된다.
-
여행 루트 짜주는 사이트
https://www.stubbyplanner.com/
-
후기게시판
- new와 best 게시판은 테이블이 두개인 것이 아니다.
- 테이블 하나로 모두 생성해서 구분코드로 분류해서 where조건절로 구분코드='new'를 가져오고 구분코드='best'를 가져오면 된다.
댓글게시판
부모와 자식 페이지가 나누어져있다.
빨강이 부모, 파랑이 자식페이지
한 가족인 것을 인식하기 위해 글번호가 3이면 부모자식페이지도 글번호가 3이 들어가야한다.
로그인이 되어있지 않아서 작성자 : test3 으로 되어있는데, 로그인된 상황으로 구성하려면
-> session.getAttribute("")로 로그인 되어져있는 아이디를 test3자리에 넣어주기만 하면 된다.
1. 테이블생성
부모글번호가 중요하다.
같은 번호 3을 가지고 있어야 같은 가족이라는 것을 알 수 있다.
-- 상품 댓글 테이블
create table pcomment (
cno number primary key --댓글번호
,pno number not null --부모글 번호
,content varchar2(255) not null --댓글내용
,wname varchar(100) not null --작성자
,regdate date default sysdate --작성일
);
-- 댓글 시퀀스
create sequence pcomment_seq;
commit;
2. Backend
팩키지 생성 : kr.co.itwill.comment
1) CommentDTO
package kr.co.itwill.comment;
public class CommentDTO {
private int cno;
private int pno;
private String content;
private String wname;
private String regdate;
// 기본생성자, getter, setter, toString
public CommentDTO() {}
public int getCno() {
return cno;
}
public void setCno(int cno) {
this.cno = cno;
}
public int getPno() {
return pno;
}
public void setPno(int pno) {
this.pno = pno;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getWname() {
return wname;
}
public void setWname(String wname) {
this.wname = wname;
}
public String getRegdate() {
return regdate;
}
public void setRegdate(String regdate) {
this.regdate = regdate;
}
@Override
public String toString() {
return "CommentDTO [cno=" + cno + ", pno=" + pno + ", content=" + content + ", wname=" + wname + ", regdate="
+ regdate + "]";
}
}//class end
2) CommentCont - 컨트롤러
package kr.co.itwill.comment;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/comment")
public class CommentCont {
public CommentCont() {
System.out.println("------CommentCont() 객체 생성됨");
}//CommentCont() end
@Autowired
CommentDAO commentDao;
}//class end
3) CommentDAO - 데이터베이스 연결
package kr.co.itwill.comment;
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
@Repository
public class CommentDAO {
public CommentDAO() {
System.out.println("------CommentDAO() 객체 생성됨");
}//CommentDAO() end
@Autowired
SqlSession sqlSession;
}//class end4) Mapper - sql문
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- comment.xml -->
<mapper namespace="comment">
</mapper>3. Frontend단
- /src/main/webapp/WEB-INF/views/product/detail.jsp
1) detail.jsp
상품 상세보기 페이지 아래 내용 추가
<!-- 댓글 -->
<div class="container">
<label for="content">댓글</label>
<!-- 댓글 추가 폼 -->
<form name="commentInsertForm" id="commentInsertForm">
<div>
<!-- 히든속성으로 부모글 코드 product_code를 가져와야한다. -->
<input type="hidden" name="pno" id="pno" value="${product.PRODUCT_CODE}">
<input type="text" name="content" id="content" placeholder="내용을 입력해 주세요">
<button type="button" name="commentInsertBtn" id="commentInsertBtn"> 등록 </button>
</div>
</form>
</div>
<hr>
<div class="container">
<div class="commentList"></div>
</div>
<!-- 댓글관련 자바스크립트 -->
<script>
</script>
부모 글번호 ${product.PRODUCT_CODE}를 꼭 가지고 다녀야한다.
◎ 댓글 페이지 jsp로 따로 만들어서 include 하는 방법
댓글 페이지가 다른 페이지에도 중복되는 폼이라면 따로 comment.jsp 페이지를 만들어서 include만 해주면 된다.
- 페이지 소스보기
댓글추가
댓글 더보기 기능 - AJAX()를 사용해준다.
detail.jsp
1) jquery라이브러리 등록해야함
2) 부모글 번호 나오는지 페이지소스보기로 확인
- 페이지소스보기로 확인
3) 등록버튼을 누르면 폼이 전송되어야 한다.
이값이 넘어가야한다.
※ 오류 - 등록버튼 눌러도 alert창이 안뜸
Uncaught ReferenceError: $ is not defined
절대경로로 바꿔준다.
4) alert 경고창 뜨는지 확인
5) 함수 호출
JQuery serialize()
JQuery Ajax로 호출하기 전에 serialize를 해주면 form안에 값들을 한 번에 전송 가능한 data로 만들 수 있어 많은 data를 보낼 때 유용하다.
(Ajax가 아닌 다른 상황에서도 사용할 수 있음.)
형태: $("form id 또는 name").serialize();
serialize를 사용하지 않는다면 하나씩 담아줘야 하기 때문에 보낼 data가 많을수록 노가다를 엄청 해야 된다.
CommentCont
// ------------------------------------------------------------- insert 댓글추가
@RequestMapping("/insert")
@ResponseBody
private int mCommentServiceInsert(@RequestParam int pno, @RequestParam String content) throws Exception {
//dto로 받아도 되고 request로 받아도 된다. + Exception 예외처리도 넣어준다.
// DTO에 사용자가 넘긴 값을 받아온다.
CommentDTO comment = new CommentDTO();
comment.setPno(pno);
comment.setContent(content);
//로그인 기능을 구현했거나 따로 댓글 작성자를 입력받는 폼이 있다면 입력 받아온 값으로 사용하면 된다.
//따로 폼을 구현하지 않았기 때문에 임시로 "test"
comment.setWname("test"); // 나중에 session.getAttribute()로 가져온다.
return commentDao.commentInsert(comment);
}//mCommentServiceInsert() endCommentDAO
comment.xml
결과값이 1이 나와야한다. (자료형을 int형으로 맞춰줬기 때문)
1이 뜨면 정상적으로 데이터가 들어왔다는 의미이다.
자료형을 int형으로 주었기 때문에 숫자1이 들어온다.
detail.jsp - script
댓글쓰기 다 하고나면 목록으로 보내야한다. ↓
댓글목록
detail.jsp
댓글 목록 함수 생성
부모글번호를 넘겨줘야 한다.
부모글 번호는 이미 detail.jsp script에 변수로 넣어줬다.
//댓글 목록
function commentList(){
$.ajax({
url: '/comment/list'
, type:'get'
, data:{'pno': pno} // let pno = "${product.PRODUCT_CODE}"; //부모글 번호
, success:function(data){
alert(data); //[object Object],[object Object],[object Object],[object Object]
});//each end
$(".commentList").html(a);
}//success end
});//ajax() end
}//commentList() endCommentCont
@RequestMapping("/list")
@ResponseBody
private List<CommentDTO> mCommentServiceList(@RequestParam int pno, Model model) throws Exception {
// detail.jsp에 있는 commentList()함수에 있는 pno를 작성, model은 혹시 몰라서 추가 안써도됨
return commentDao.commentlist(pno);
}//mCommentServiceList() endCommentDAO
// ------------------------------------------------------------- list 댓글목록
public List<CommentDTO> commentlist(int pno){
return sqlSession.selectList("comment.list", pno);
}//list() endcomment.xml
<!-- [ list 댓글목록 ] -->
<select id="list" resultType="kr.co.itwill.comment.CommentDTO" parameterType="int">
SELECT cno, pno, content, wname, regdate
FROM pcomment
WHERE pno=#{pno}
</select> detail.jsp -success:function(data) 담기는지 확인
5건이 있기 때문에 object 배열로 5건이 반환된다.
alert(data); 창 뜨는지 확인 후
→ DTO객체가 반환된다.
detail.jsp - each반복문으로 댓글에 있는 데이터 모두 담기는지 확인
반복문으로 key와 value값이 따로 잘 들어온다.
detail.jsp - 댓글 내용 하나하나 찍어보기
값이 잘 넘어오는 걸 확인했으면 이제 front단에 꾸며주기만 하면 된다.
detail.jsp 페이지 로딩 시 댓글 목록 출력
detail.jsp
$(document).ready(function(){
commentList();
});//ready() enddetail.jsp - front단에 출력해주기
//댓글 목록
function commentList(){
$.ajax({
url: '/comment/list'
, type:'get'
, data:{'pno': pno} // let pno = "${product.PRODUCT_CODE}"; //부모글 번호
, success:function(data){
//alert(data); //[object Object],[object Object],[object Object],[object Object]
let a='';
$.each(data, function(key, value){
a += '<div class="commentArea" style="border-bottom:1px solid darkgray;
margin-bottom:15px;">';
a += ' <div class="commentInfo' + value.cno + '">';
a += ' 댓글번호:' + value.cno + ' /작성자 : ' + value.wname + " " + value.pno;
a += ' <a href="javascript:commentUpdate(' + value.cno
+ ', \'' + value.content + '\');">수정</a>';
a += ' <a href="javascript:commentDelete(' + value.cno + ');">삭제</a>';
a += ' </div>';
a += ' <div class="commentContent' + value.cno + '">';
a += ' <p>내용 : ' + value.content + '</p>';
a += ' </div>';
a += ' </div>';
});//each end
$(".commentList").html(a);
}//success end
});//ajax() end
}//commentList() end댓글 수정
detail.jsp
1) 댓글수정 - 댓글 내용 출력을 input폼으로 변경
2) 댓글수정
CommentCont
CommentDAO
comment.xml
댓글 삭제
detail.jsp
CommentCont
CommentDAO
comment.xml
