고래씌
[JSP] 6-4. 아이디 중복체크 기능, 댓글 기능 본문
1. 아이디 중복체크 기능
- 유효성 검사를 배제하고 아이디 중복 체크만 만들어보겠다!
▶ memberEnrollForm.jsp
맨아래에 script 추가
<script>
const idCheck = () => {
// 입력한 아이디값 얻어오기
// jQuery 함수는 앞에 $를 붙이는것이 관례임
const $userId = $("#enroll-form input[name=userId]");
// menubar.jsp의 아이디 name값이 userId임.
// enroll-form 아이디값의 후손인 input태그
// name이 userId인 요소가 menubar.jsp에도 존재하기 때문에 확실하게 속한 userId인지 잘 적어줘야한다.
$.ajax({
url : "idCheck.me",
data : {checkId : $userId.val()},
success : function(result){
if(result === "NNNNN"){ // 사용불가 코드
// 각각의 회원탈퇴 등 여러 이유로 사용이 불가능하게 된 아이디이기 때문에 각 고유의 코드를 이용해 조건 검사함
alert("이미 존재하거나 탈퇴한 회원입니다.");
$userId.focus();
}else if (result === "NNNE"){ // 사용불가 코드
alert("사용이 불가능한 아이디");
$userId.focus();
}else { // 사용가능한 아이디
if(confirm("사용가능한 아이디입니다. 사용하시겠습니까..?")){ // 확인=>true, 취소=>false반환
$userId.attr("readonly",true); // 확인버튼 누르면 다시 입력을 못하게 readonly 설정
}else{
$userId.focus();
}
}
}
})
}
</script>
▶ AjaxidCheckController.java
package com.kh.member.controller;
import java.io.IOException;
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.kh.member.model.service.MemberService;
/**
* Servlet implementation class AjaxidCheckController
*/
@WebServlet("/idCheck.me")
public class AjaxidCheckController extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxidCheckController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String checkId = request.getParameter("checkId"); // .ajax 아래에 data가 checkId이므로 그대로 넣어줌
int count = new MemberService().idCheck(checkId);
if(count > 0) { // 아이디가 존재함
response.getWriter().print("NNNNN");
}else {
response.getWriter().print("NNNNY");
}
}
}
▶ MemberSerivce.java
▶ MemberDao.java
▶ member-mapper.xml
2. 게시판 댓글 추가 기능
▶ com.kh.board.mode.vo 아래에 Reply.java 클래스 생성
package com.kh.board.model.vo;
import java.sql.Date;
public class Reply {
private int replyNo;
private String replyContent;
private int refBoardNo;
private int replyWriter;
private Date createDate;
private String status;
private String userId;
public Reply() {
}
public Reply(int replyNo, String replyContent, int refBoardNo, int replyWriter, Date createDate, String status,
String userId) {
super();
this.replyNo = replyNo;
this.replyContent = replyContent;
this.refBoardNo = refBoardNo;
this.replyWriter = replyWriter;
this.createDate = createDate;
this.status = status;
this.userId = userId;
}
public int getReplyNo() {
return replyNo;
}
public void setReplyNo(int replyNo) {
this.replyNo = replyNo;
}
public String getReplyContent() {
return replyContent;
}
public void setReplyContent(String replyContent) {
this.replyContent = replyContent;
}
public int getRefBoardNo() {
return refBoardNo;
}
public void setRefBoardNo(int refBoardNo) {
this.refBoardNo = refBoardNo;
}
public int getReplyWriter() {
return replyWriter;
}
public void setReplyWriter(int replyWriter) {
this.replyWriter = replyWriter;
}
public Date getCreateDate() {
return createDate;
}
public void setCreateDate(Date createDate) {
this.createDate = createDate;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
@Override
public String toString() {
return "Reply [replyNo=" + replyNo + ", replyContent=" + replyContent + ", refBoardNo=" + refBoardNo
+ ", replyWriter=" + replyWriter + ", createDate=" + createDate + ", status=" + status + ", userId="
+ userId + "]";
}
}
▶ WebContent - views - board - boardDetailView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="true" import="com.kh.board.model.vo.*"%>
<%
Board b = (Board)request.getAttribute("b");
Attachment at = (Attachment) request.getAttribute("at");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%@include file="../common/menubar.jsp" %>
<div class="outer">
<br><h2 align="center">일반게시판 상세보기</h2><br>
<table id="detail-area" align="center" border="1">
<tr>
<th width="70">카테고리</th>
<td width="70"><%= b.getCategoryName() %></td>
<th width="70">제목</th>
<td width="350"><%= b.getBoardTitle() %></td>
</tr>
<tr>
<th>작성자</th>
<td><%= b.getBoardWriter() %></td>
<th>작성일</th>
<td><%= b.getCreateDate() %></td>
</tr>
<tr>
<th>내용</th>
<td colspan="3"> <!--열병합3칸-->
<p style="height:200px;">
<%= b.getBoardContent() %>
</p>
</td>
</tr>
<tr>
<th>첨부파일</th>
<td colspan="3">
<% if(at == null) { %>
첨부파일이 없습니다.
<% } else { %>
<!-- 첨부파일이 있을경우 해당파일 다운로드 -->
<a download="<%= at.getOriginName() %>"
href="<%= contextPath %>/<%= at.getFilePath()+at.getChangeName()%>">
<!-- 다운로드 파일을 받을 경로 -->
<%= at.getOriginName() %>
</a>
<!-- at.getFilePath()+at.getChangName() => +를 이용해 하나로 표현해줌 -->
<% } %>
</td>
</tr>
</table>
<br>
<div align="center">
<a href="<%=contextPath%>/list.bo?currentPage=1" class="btn btn-secondary btn-sm">목록</a>
<!-- 로그인한 사용자와 현재 게시글을 작성한 작성자가 맞는지 검사 -->
<% if(loginUser != null && loginUser.getUserId().equals(b.getBoardWriter())) { %>
<!-- 로그인한 사용자만 게시글 수정/삭제버튼이 보여야함 -->
<a href="<%=contextPath %>/update.bo?bno=<%=b.getBoardNo() %>"
class="btn btn-warning btn-sm">수정</a>
<!-- b.getBoardNo() => 내가 작성했던 게시글 내용이 보이게 하기 위해서 현재 게시글 번호를 같이 보내야한다! -->
<a href="<%=contextPath %>/delete.bo?bno=<%=b.getBoardNo() %>"
class="btn btn-danger btn-sm">삭제</a>
<% } %>
</div>
<br>
<div id="reply-area">
<table border="1" align="center">
<thead>
<% if(loginUser == null) { %>
<tr>
<th>댓글작성</th>
<td>
<textarea rows="3" cols="50" style="resize:none" readonly>로그인후 이용가능한 서비스입니다</textarea>
</td>
<td><button id="reply-btn">댓글등록</button></td>
</tr>
<% } else { %>
<tr>
<th>댓글작성</th>
<td>
<textarea id="replyContent" rows="3" cols="50" style="resize:none"></textarea>
</td>
<td><button id="reply-btn">댓글등록</button></td>
</tr>
<% } %>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
// 댓글 등록 기능
$(function(){
$("#reply-btn").click(function(){
$.ajax({
url : "insert.re",
data : {content : $("#replyContent").val(),
bno : <%= b.getBoardNo() %>},
type : 'post',
success : function(result) {
if(result > 0) { // 댓글등록 성공
$("#replyContent").val(""); // 댓글등록 클릭하면 빈칸으로 되도록 설정
selectReplyList(); // 쓴 댓글이 화면에 출력하는 함수 호출
}
},
error : function(){
console.log('비동기 통신 실패');
}
})
})
})
function selectReplyList(){
$.ajax({
url : 'list.re',
data : {bno : <%= b.getBoardNo() %>},
success : function(list){
// 얻어온 데이터를 바탕으로 게시글 작성자, 게시글 내용, 작성일자 순서대로
// 화면에 출력
let str = "";
for(let reply of list){
str += `<tr>
<td>${reply.userId}</td>
<td>${reply.replyContent}</td>
<td>${reply.createDate}</td>
<tr>`;
}
$("#reply-area tbody").html(str);
}
})
}
selectReplyList(); // 두번 호출
</script>
</body>
</html>
=> REPLY 테이블에 댓글이 추가되면 추가되도록 SQL 쿼리문 작성하겠다.
▶ board-mapper.xml
=> 우리는 이미 댓글을 추가하면 자동으로 증가하는 시퀀스를 만들었었다!(SEQ_RNO)
▶ AjaxBoardReplyInsertController.java
package com.kh.board.controller;
import java.io.IOException;
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.kh.board.model.service.BoardService;
import com.kh.board.model.vo.Reply;
import com.kh.member.model.vo.Member;
/**
* Servlet implementation class BoardReplyController
*/
@WebServlet("/insert.re")
public class AjaxReplyInsertController extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxReplyInsertController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String content = request.getParameter("content");
int bno = Integer.parseInt(request.getParameter("bno"));
// 이런방법으로도 가져올 수 있다! (userNo)
int userNo = ((Member)request.getSession().getAttribute("loginUser")).getUserNo();
System.out.println(content);
System.out.println(bno);
System.out.println(userNo);
Reply r = new Reply();
r.setReplyContent(content);
r.setRefBoardNo(bno);
r.setReplyWriter(userNo);
int result = new BoardService().insertReply(r);
response.getWriter().print(result);
}
}
▶ BoardService.java
▶ BoardDao.java
=> 데이터 베이스에 데이터 추가된 것 확인
3. 비동기식 처리 댓글 불러오기 기능
▶ boardDetailView.jsp
※ GSON을 이용하여 화면에 출력할 경우 isELIgnored="true" 를 꼭 추가하여야함!!
▶ Board-mapper.xml
▶ AjaxReplyListController.java
package com.kh.board.controller;
import java.io.IOException;
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.JSONObject;
import com.google.gson.Gson;
import com.kh.board.model.service.BoardService;
import com.kh.board.model.vo.Reply;
/**
* Servlet implementation class AjaxReplyListController
*/
@WebServlet("/list.re")
public class AjaxReplyListController extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxReplyListController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int bno = Integer.parseInt(request.getParameter("bno"));
ArrayList<Reply> list = new BoardService().selectReplyList(bno);
// response.getWriter().print(list); => toString() 으로 호출되기 때문에 print(list.toString());
response.setContentType("application/json; charset=UTF-8");
new Gson().toJson(list, response.getWriter());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
▶ BoardService.java
▶ BoardDao.java
'Server > JSP과 Servlet' 카테고리의 다른 글
| [JSP] 7-2. Action Tag(EL 연산자) (0) | 2023.12.18 |
|---|---|
| [JSP] 7-1. Action Tag (EL 기본 구문) (0) | 2023.12.18 |
| [JSP] 6-3. AJAX(게시글 리스트 검색, XML데이터 가져오기, 파일 업로드 처리) (0) | 2023.12.14 |
| [JSP] 6-2. AJAX (Gson ,ArrayList 받기) (0) | 2023.12.14 |
| [JSP] 6-1. AJAX 개요, get&post방식으로 서버에 데이터 전송 및 응답(ajax 통신, json) (0) | 2023.12.14 |
'Server/JSP과 Servlet' Related Articles
more
