📝목차
- 가입 정보 업데이트 기능
- 글 목록 출력 기능
- 글 작성 기능
- 글 삭제 기능
1. 가입 정보 업데이트 기능
업데이트 기능은 어떤 방식을 택하는지에 따라 난이도가 달라지는데, 크게 두 가지로 분류된다.
- 업데이트 View로 넘어가서 수정하기
disable속성 사용하기
전자로 하면 간단하지만, 후자는 이벤트처리를 통해 속성 변환을 주는 것이다.
[ 구현 과정 ]
1) 계정 정보를 출력 View를 생성한다.
2) 출력 시 수정 가능 항목은 input type=text로 설정 뒤, value=“${i.phone}”로 값을 넣는다.
3) 전체 범위를 <form>으로 감싸주고, 수정 버튼의 타입을 button으로 설정한다.
4) 수정 가능 항목에 disabled 속성을 설정한다.
disabled: submit을 해도 데이터가 전송되지 않는다.
5) 수정 버튼을 누르는 순간에 대한 이벤트 처리를 해준다
- 이벤트 발생 시, disable 속성 제거 :
$(".edtiable").removeAttr("disabled"); - 수정 버튼은 사라지고, 완료-취소 버튼이 생겨난다.
- 완료-수정 버튼에 이벤트, CSS 처리를 한다.
- .append()로 완료-수정 버튼을 추가한다.
[ View ] : 계정 정보 출력
<form action="update.member" method="post">
<table border=1 align=center>
<c:forEach var="i" items="${list}">
<tr>
<th>Phone
<td colspan=2>
<input type=text value="${i.phone}" class="edtiable" name=phone disabled>
</td>
</tr>
<tr>
<th>adress2
<td colspan=2>
<input type=text value="${i.adress2}" class="edtiable" name=adress2 disabled>
</td>
</tr>
</c:forEach>
<tr>
<th colspan=3 id="btns">
<button id="modify" type=button>수정</button>
<script>
// 이벤트 처리
$("#modify").on("click", function(){
$(".edtiable").removeAttr("disabled"); // 클릭 시 속성을 없앤다
$("#modify").css("display", "none"); // 버튼을 숨긴다.
let ok = $("<button>"); // 수정 완료 버튼 생성
ok.text("수정 완료"); // 기본 submit
let cancel = $("<button>"); // 수정 취소 버튼 생성
cancel.text("수정 취소");
cancel.attr("type", "button"); // button타입 부여
cancel.on("click", function(){
location.reload(); // 페이지를 재로드
});
// 버튼 객체를 실제 HTML에 추가
$("#btns").append(ok);
$("#btns").append(cancel);
});
</script>
</tr>
</table>
</form>
[ Controller ]
계정 정보 출력
if(uri.equals("/list.member")) {
String id = (String) (request.getSession().getAttribute("loginID"));
List<MemberDTO> list = mDao.myPageById(id);
request.setAttribute("list", list);
request.getRequestDispatcher("/member/listView.jsp").forward(request, response);
정보 수정
} else if(uri.equals("/update.member")) {
1.
String id = (String)request.getSession().getAttribute("loginID");
String phone = request.getParameter("phone");
String email = request.getParameter("email");
String zipcode = request.getParameter("zipcode");
String adress1 = request.getParameter("adress1");
String adress2 = request.getParameter("adress2");
int result = mdao.update(new MemberDTO(id, null, phone, email, zipcode, adress1, adress2));
response.sendRedirect("/list.member");
}[ DAO ]
// MyPage 정보 출력
public List<MemberDTO> myPageById(String id) throws Exception {
String sql = "select id, name, nvl(phone,' ') phone, nvl(email,' ') email, nvl(zipcode,' ') zipcode, nvl(address1,' ') adress1, nvl(address2,' ') adress2 from member where id=?";
try(
Connection con = this.getConnection();
PreparedStatement pstat = con.prepareStatement(sql);
){
pstat.setString(1, id);
try(
ResultSet rs = pstat.executeQuery();
){
List<MemberDTO> list = new ArrayList<>();
while(rs.next()) {
String myId = rs.getString("id");
String name = rs.getString("name");
String phone = rs.getString("phone");
String email = rs.getString("email");
String zipcode = rs.getString("zipcode");
String adress1 = rs.getString("adress1");
String adress2 = rs.getString("adress2");
MemberDTO dto = new MemberDTO(myId, name, phone, email, zipcode, adress1, adress2);
list.add(dto);
}
return list;
}
}
}
// 정보 수정
public int update (MemberDTO dto) throws Exception {
String sql = "update member set phone=?, email=?, zipcode=?, address1=?, address2=? where id=?";
try(
Connection con = this.getConnection();
PreparedStatement pstat = con.prepareStatement(sql);
){
pstat.setString(1, dto.getPhone());
pstat.setString(2, dto.getEmail());
pstat.setString(3, dto.getZipcode());
pstat.setString(4, dto.getAdress1());
pstat.setString(5, dto.getAdress2());
pstat.setString(6, dto.getId());
int result = pstat.executeUpdate();
con.commit();
return result;
}
}게시판 만들기
본 과정의 핵심이다. 결국 게시판 만들기를 하기 위해서 이 수업을 듣고 있는 것이니 말이다. 하지만 CRUD의 기본기이다. 뭐 총을 잘 쏠려면 사격을 많이 해봐야 하듯이 웹 개발하려면 게시판 만들기를 많이 해봐야지 :)
일단 기본 골격은 만들어 놓자.
1) 게시판 UI 만들기 (글 목록 출력 / 작성글 출력 / 글 작성 / 글 수정 / 글 삭제)
2) 게시판 간 연결 만들기 (컨트롤러를 통해서)
3) DB table 만들기
2. 글 목록 출력
[ 구현 과정 ]
1) 먼저 기본적인 틀을 만든다.
2) 클라이언트의 요청 시, Controller에서 JSP에 forward한다.
3) JSP에는 JSTL과 EL를 통해서 값을 출력한다.
4) 이때, 각 게시글은 글 번호로 구분한다.
5) 제목 클릭 시 해당 글을 출력하기 위해 컨트롤러에 데이터를 전송하게 설정한다.
6) 설정법은 Jquery-태그 선택자 or <a href=“url”>을 사용한다.
위의 4, 5, 6이 목록 출력의 핵심이다. 왜냐면 목록에서 선택해서 해당 글을 출력할 수 없다면, 그건 반쪽짜리니 말이다. 그래서 게시글의 번호를 기준으로 각 글을 구분한다.
나도 여기서 많이 방황했는데, 그 구현방법은 생각보다 간단하다. 위에 써놓은 거 그대로 제이쿼리 이벤트 처리를 통해서 제목 클릭 시, 해당 태그의 값을 추출해서 파라미터로 보내는 것이다.
근데 이 방법은 굉장히 돌아가는 방법이다.
단순하게 하면 출력 시, EL을 href=“/view.board?${i.seq}” 이런 식으로 사용할 수도 있기 때문이다.
즉, forEach문을 돌리면서 값 내부에 EL을 넣어주는 것이다. 그러니 한 가지만 기억하자.
EL은 속성의 값 내부에도 들어갈 수 있다!!!!
3. 글 작성 기능
[ 구현 과정 ]
0) View에서 입력된 상태
1) 인코딩 방식을 정한다. request.setCharacterEncoding("utf-8");
2) 작성자는 세션에서 ID 정보로 넣는다.
3) 값을 가져온다 : 제목, 글
4) 작성글 DTO에 넣은 뒤, DAO로 보내 DB에 저장한다.
5) 글 목록 출력으로 응답한다.
4. 글 삭제 기능
글 삭제 기능을 사용하기 위해선, 기본적으로 글 목록에서 선택시 선택한 글이 출력되게 해야 한다. 따라서 글 출력 기능을 먼저 구현해보자.
1) 글 출력 기능
[ 구현 과정 ]
(1) 글 목록 출력 기능에서 EL, 제이쿼리를 통해서 이미 글 번호를 제목 링크로 걸어줬다.
(2) URL 파라미터로 들어오는 값을 추출한다….
(3) DAO 에 해당 값을 넣어 DB에서 추출한 값을 DTO에 넣는다.
(4) DTO를 request에 넣어 JSP로 넘겨준다.
- 삭제, 수정 권한 : 작성자와 로그인 계정이 일치할 때만 부여한다.
(5) 세션의 로그인 ID를 꺼내와서, 글쓴이와 비교한다.
(6) DAO 에서 값이 일치할 시, 다음 코드를 실행한다.
(7) 게시글 View에서 사용할 Boolean 값을 넘겨준다.
(8) DTO 값 중, 글 번호를 세션에 저장한다. - 핵심
- 공통
(9) 정해진 양식 안에서 EL로 출력한다.
2) 글 삭제 기능
[ 구현 과정 ]
(1) 삭제 여부를 물어보는 팝업 View를 만든다.
(2) 게시글에서 삭제 버튼을 누르면, 삭제 여부를 물어보는 팝업을 띄운다.
(3) 삭제 요청을 받으면, 세션에 저장한 글 번호를 꺼낸다.
(4) remove Attribute(“글 번호”); 로 세션에서 제거한다.
(5) DAO 을 이용해 DB에서 삭제한다.
(6) 비동기 처리 : 팝업을 닫고, 게시글 목록을 출력하는 인터페이스로 재요청한다.
