더블에스 devlog

728x90



Spring - 게시판 만들기 연습 (글쓰기, 수정, 삭제 회원권한부여)


1. 실행화면


01) 게시글 목록

게시글 글쓰기 버튼을 회원 로그인시에만 활성화되게 처리

게시글의 작성자를 회원의 이름으로 변경




02) 게시글 쓰기 화면

글쓰기화면에 작성자란 삭제(글쓰기 처리시 로그인된 회원의 이름으로 작성자를 insert)


03) 게시글 상세보기, 수정, 삭제

본인이 작성한 글에만 수정, 삭제버튼 활성화



2. 소스코드

01) Controller(흐름제어)

변경사항

BoardController - session에 저장된 userId를 writer에 할당하고 MemberVo에 세팅

@RequestMapping(value="insert.do", method=RequestMethod.POST)
public String insert(@ModelAttribute BoardVO vo, HttpSession session) throws Exception{
    // session에 저장된 userId를 writer에 저장
    String writer = (String) session.getAttribute("userId");
    // vo에 writer를 세팅
    vo.setWriter(writer);
    boardService.create(vo);
    return "redirect:list.do";
}
cs


02) Service(비지니스로직, DB연동 이외의 작업처리)

변경사항 없음


03) Model(비지니스로직, DB연동 작업처리)

변경사항

MemberVO - userName 추가

package com.example.spring02.model.board.dto;
 
import java.util.Date;
 
public class BoardVO {
    private int bno;            // 게시글 번호
    private String title;        // 게시글 제목
    private String content;        // 게시글 내용
    private String writer;        // 게시글 작성자
    private Date regdate;        // 게시글 작성일자 util.Date
    private int viewcnt;        // 게시글 조회수
    private String userName;    // 게시글 회원이름 = 게시글 작성자
 
    // Getter/Setter
    public int getBno() {
        return bno;
    }
    public void setBno(int bno) {
        this.bno = bno;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public String getWriter() {
        return writer;
    }
    public void setWriter(String writer) {
        this.writer = writer;
    }
    public Date getRegdate() {
        return regdate;
    }
    public void setRegdate(Date regdate) {
        this.regdate = regdate;
    }
    public int getViewcnt() {
        return viewcnt;
    }
    public void setViewcnt(int viewcnt) {
        this.viewcnt = viewcnt;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    
    // toString()
    @Override
    public String toString() {
        return "BoardVO [bno=" + bno + ", title=" + title + ", content=" + content + ", writer=" + writer + ", regdate="
                + regdate + ", viewcnt=" + viewcnt + ", userName=" + userName + "]";
    }
    
}
cs


boardMapper.xml

전체 목록 - tbl_board 테이블과 tbl_member테이블을 조인(where조건절: 작성자와 회원의 아이디가 동일할 때)

게시글의 레코드 갯수 - tbl_board, tbl_meber테이블을 조인(where조건절: 작성자와 회원의 아이디가 동일할 때)

<select id="listAll" resultType="com.example.spring02.model.board.dto.BoardVO">
    <!-- 회원권환이 없는 게시글 목록 쿼리
    SELECT bno, title, content, writer, regdate, viewcnt 
    FROM tbl_board -->
    SELECT bno, title, content, b.regdate, viewcnt, user_name AS userName
    FROM tbl_board b, tbl_member m
 
    <!-- WHERE절을 include 태그로 삽입 -->
    <include refid="search"></include>
    ORDER BY bno desc, regdate desc
 
</select>
 
<!-- 01_02. 게시글 레코드 갯수 -->
<select id="countArticle" resultType="int">
 
    SELECT COUNT(*) 
    FROM tbl_board b, tbl_member m
 
    <!-- WHERE절을 include 태그로 삽입 -->
    <include refid="search"></include>
 
</select>
 
<!-- sql code 조각 -->
<!-- 반복되는 sql의 일부를 sql태그를 이용하여 따로 빼둘수 있다. -->
<sql id="search">
    <choose>
        <!-- 검색옵션이 전체 검색일 경우 -->
        <when test="searchOption == 'all'">
        WHERE b.writer = m.user_id
        AND    
            (user_name like '%'||#{keyword}||'%'
            OR content like '%'||#{keyword}||'%'
            OR title like '%'||#{keyword}||'%')
        </when>
    
        <!-- 전체 검색이 아닐 경우 -->
        <otherwise>
            WHERE b.writer = m.user_id 
            AND ${searchOption} like '%'||#{keyword}||'%'
        </otherwise>
    </choose>
</sql>
cs


04) View(화면처리)

변경사항

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시글 목록</title>
<%@ include file="../include/header.jsp" %>
<script>
    $(document).ready(function(){
        $("#btnWrite").click(function(){
            // 페이지 주소 변경(이동)
            location.href = "${path}/board/write.do";
        });
    });
</script>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
    <h2>게시글 목록</h2>
    <form name="form1" method="post" action="${path}/board/list.do">
        <select name="searchOption">
            <!-- 검색조건을 검색처리후 결과화면에 보여주기위해  c:out 출력태그 사용, 삼항연산자 -->
            <option value="all" <c:out value="${map.searchOption == 'all'?'selected':''}"/> >제목+이름+제목</option>
            <option value="user_name" <c:out value="${map.searchOption == 'user_name'?'selected':''}"/> >이름</option>
            <option value="content" <c:out value="${map.searchOption == 'content'?'selected':''}"/> >내용</option>
            <option value="title" <c:out value="${map.searchOption == 'title'?'selected':''}"/> >제목</option>
        </select>
        <input name="keyword" value="${map.keyword}">
        <input type="submit" value="조회">
    <!-- 로그인한 사용자만 글쓰기 버튼을 활성화 -->
    <c:if test="${sessionScope.userId != null}">
        <button type="button" id="btnWrite">글쓰기</button>
    </c:if>
    </form>
    <!-- 레코드의 갯수를 출력 -->
    ${map.count}개의 게시물이 있습니다.
    <table border="1" width="600px">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>이름</th>
            <th>작성일</th>
            <th>조회수</th>
        </tr>
        <c:forEach var="row" items="${map.list}">
        <tr>
            <td>${row.bno}</td>
            <td><a href="${path}/board/view.do?bno=${row.bno}">${row.title}</a></td>
            <td>${row.userName}</td>
            <td>
                <!-- 원하는 날짜형식으로 출력하기 위해 fmt태그 사용 -->
                <fmt:formatDate value="${row.regdate}" pattern="yyyy-MM-dd HH:mm:ss"/>
            </td>
            <td>${row.viewcnt}</td>
        </tr>    
        </c:forEach>
</table>
</body>
</html>
cs


wirte.jsp - 작성자 : 유효성검사 주석처리, 작성자 입력란 : 주석처리

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시글 작성</title>
<%@ include file="../include/header.jsp" %>
<%@ include file="../include/sessionCheck.jsp" %>
<script>
    $(document).ready(function(){
        $("#btnSave").click(function(){
            //var title = document.form1.title.value; ==> name속성으로 처리할 경우
            //var content = document.form1.content.value;
            //var writer = document.form1.writer.value;
            var title = $("#title").val();
            var content = $("#content").val();
            //var writer = $("#writer").val();
            if(title == ""){
                alert("제목을 입력하세요");
                document.form1.title.focus();
                return;
            }
            if(content == ""){
                alert("내용을 입력하세요");
                document.form1.content.focus();
                return;
            }
            /* if(writer == ""){
                alert("이름을 입력하세요");
                document.form1.writer.focus();
                return;
            } */
            // 폼에 입력한 데이터를 서버로 전송
            document.form1.submit();
        });
    });
</script>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
<h2>게시글 작성</h2>
<form name="form1" method="post" action="${path}/board/insert.do">
    <div>
        제목
        <input name="title" id="title" size="80" placeholder="제목을 입력해주세요">
    </div>
    <div>
        내용
        <textarea name="content" id="content" rows="4" cols="80" placeholder="내용을 입력해주세요"></textarea>
    </div>
    <!-- <div>
        이름
        <input name="writer" id="writer" placeholder="이름을 입력해주세요">
    </div> -->
    <div style="width:650px; text-align: center;">
        <button type="button" id="btnSave">확인</button>
        <button type="reset">취소</button>
    </div>
</form>
</body>
</html>
cs


view.jsp 

작성자 수정란 : 주석처리 후 단순출력으로 변경, 

수정, 삭제 버튼 : session의 id값과 작성자가 동일하면 수정, 삭제버튼 활성화

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시글 작성</title>
<%@ include file="../include/header.jsp" %>
<script>
    $(document).ready(function(){
        $("#btnDelete").click(function(){
            if(confirm("삭제하시겠습니까?")){
                document.form1.action = "${path}/board/delete.do";
                document.form1.submit();
            }
        });
        
        $("#btnUpdete").click(function(){
            //var title = document.form1.title.value; ==> name속성으로 처리할 경우
            //var content = document.form1.content.value;
            //var writer = document.form1.writer.value;
            var title = $("#title").val();
            var content = $("#content").val();
            //var writer = $("#writer").val();
            if(title == ""){
                alert("제목을 입력하세요");
                document.form1.title.focus();
                return;
            }
            if(content == ""){
                alert("내용을 입력하세요");
                document.form1.content.focus();
                return;
            }
            /* if(writer == ""){
                alert("이름을 입력하세요");
                document.form1.writer.focus();
                return;
            } */
            document.form1.action="${path}/board/update.do"
            // 폼에 입력한 데이터를 서버로 전송
            document.form1.submit();
            
        });
    });
</script>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
<h2>게시글 보기</h2>
<form name="form1" method="post">
    <div>        <!-- 원하는 날짜형식으로 출력하기 위해 fmt태그 사용 -->
        작성일자 : <fmt:formatDate value="${dto.regdate}" pattern="yyyy-MM-dd a HH:mm:ss"/>
                <!-- 날짜 형식 => yyyy 4자리연도, MM 월, dd 일, a 오전/오후, HH 24시간제, hh 12시간제, mm 분, ss 초 -->
    </div>
    <div>
        조회수 : ${dto.viewcnt}
    </div>
    <div>
        제목
        <input name="title" id="title" size="80" value="${dto.title}" placeholder="제목을 입력해주세요">
    </div>
    <div>
        내용
        <textarea name="content" id="content" rows="4" cols="80" placeholder="내용을 입력해주세요">${dto.content}</textarea>
    </div>
    <div>
        이름
        <%-- <input name="writer" id="writer" value="${dto.writer}" placeholder="이름을 입력해주세요"> --%>
        ${dto.userName}
    </div>
    <div style="width:650px; text-align: center;">
        <!-- 게시물번호를 hidden으로 처리 -->
        <input type="hidden" name="bno" value="${dto.bno}">
    <!-- 본인이 쓴 게시물만 수정, 삭제가 가능하도록 처리 -->
    <c:if test="${sessionScope.userId == dto.writer}">
        <button type="button" id="btnUpdete">수정</button>
        <button type="button" id="btnDelete">삭제</button>
    </c:if>
    </div>
</form>
</body>
</html>
cs


sessionCheck.jsp

아이디의 인증이 필요한 페이지일 경우에는 session의 id값이 null이면 로그인페이지로 이동하도록 처리

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:if test="${sessionScope.userId == null}">
    <script>
        alert("로그인 하신 후에 사용해주세요");
        location.href="${path}/member/login.do"; 
    </script>
</c:if>
cs


저작자표시 비영리 변경금지

티스토리툴바