Study Web Development

1월 28일

이전으로

Servlet & JSP

9. MVC

mvcPage

프로젝트 생성 및 설정
  1. WEB-INF 폴더의 member.properties 하단에 다음의 내용을 추가
/member/memberList.do=kr.member.action.MemberListAction
/member/detailUserForm.do=kr.member.action.DetailUserFormAction
/member/detailUser.do=kr.member.action.DetailUserAction
  1. css 폴더의 layout.css 하단에 다음의 내용을 추가
/* 회원가입, 수정폼 */
input[type="text"],input[type="password"],input[type="email"] {
	width: 200px;
}
#register_form input[id="id"] {
	width: 78px;
}
input[id="zipcode"] {
	width: 95px;
}
.form-notice {
	margin-left: 130px;
}

/* 목록 */
form#search_form {
	border: none;
}
ul.search {
	width: 300px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}
ul.search li {
	margin:0 0 9px 0;
	padding: 0;
	display: inline;
}
.list-space {
	margin-bottom: 10px;
}
  1. sql 폴더의 table.sql 하단에 다음의 내용을 추가
/* 게시판 */
CREATE TABLE zboard(
	board_num NUMBER NOT NULL,
	title VARCHAR2(150) NOT NULL,
	content CLOB NOT NULL,
	hit NUMBER(5) DEFAULT 0 NOT NULL, /* 조회수는 최대 십만 단위까지 */
	reg_date DATE DEFAULT SYSDATE NOT NULL,
	modify_date DATE,
	filename VARCHAR2(150),
	ip VARCHAR2(40) NOT NULL,
	mem_num NUMBER NOT NULL,
	CONSTRAINT zboard_pk PRIMARY KEY (board_num),
	CONSTRAINT zboard_fk FOREIGN KEY (mem_num) REFERENCES zmember (mem_num)
);

CREATE SEQUENCE zboard_seq;
  1. WEB-INF 폴더의 board.properties를 열고 다음의 내용을 작성
# 부모글
/board/list.do=kr.board.action.ListAction
/board/writeForm.do=kr.board.action.WriteFormAction
Model
  1. 새 클래스 MemberListAction 생성
package kr.member.action;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
import kr.util.PagingUtil;

public class MemberListAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do";
		}
		
		Integer user_auth = (Integer)session.getAttribute("user_auth");
		if(user_auth<3) { // 관리자로 로그인하지 않은 경우
			return "/WEB-INF/views/common/notice.jsp";
		}
		
		// 관리자로 로그인한 경우
		String pageNum = request.getParameter("pageNum");
		if(pageNum==null) pageNum = "1";
		
		String keyfield = request.getParameter("keyfield");
		String keyword = request.getParameter("keyword");
		if(keyfield==null) keyfield = "";
		if(keyword==null) keyword = "";
		
		MemberDAO dao = MemberDAO.getInstance();
		int count = dao.getMemberCountByAdmin(keyfield, keyword);
		
		// 페이지 처리
		PagingUtil page = new PagingUtil(keyfield, keyword, Integer.parseInt(pageNum), count, 20, 10, "memberList.do"); // keyfield, keyword, currentPage, totalCount, rowCount, pageCount, pageUrl
		
		List<MemberVO> list =  null;
		if(count>0) {
			list = dao.getListMemberByAdmin(page.getStartCount(), page.getEndCount(), keyfield, keyword);
		}
		
		request.setAttribute("count", count);
		request.setAttribute("list", list);
		request.setAttribute("pagingHtml", page.getPagingHtml());
		
		// JSP 경로 반환
		return "/WEB-INF/views/member/memberList.jsp";
	}

}
  1. 새 클래스 DetailUserFormAction 생성
package kr.member.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;

public class DetailUserFormAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do";
		}
		
		Integer user_auth = (Integer)session.getAttribute("user_auth");
		if(user_auth<3) { // 관리자로 로그인하지 않은 경우
			return "/WEB-INF/views/common/notice.jsp";
		}
		
		// 관리자로 로그인한 경우
		int mem_num = Integer.parseInt(request.getParameter("mem_num"));
		
		MemberDAO dao = MemberDAO.getInstance();
		MemberVO member = dao.getMember(mem_num);
		
		request.setAttribute("member", member);
		
		// JSP 경로 반환
		return "/WEB-INF/views/member/detailUserForm.jsp";
	}

}
  1. 새 클래스 DetailUserAction 생성
package kr.member.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;

public class DetailUserAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do";
		}
		
		Integer user_auth = (Integer)session.getAttribute("user_auth");
		if(user_auth<3) { // 관리자로 로그인하지 않은 경우
			return "/WEB-INF/views/common/notice.jsp";
		}
		
		// 관리자로 로그인한 경우
		// 전송된 데이터 인코딩 처리
		request.setCharacterEncoding("UTF-8");
		
		MemberVO member = new MemberVO();
		member.setMem_num(Integer.parseInt(request.getParameter("mem_num")));
		member.setAuth(Integer.parseInt(request.getParameter("auth")));
		member.setName(request.getParameter("name"));
		member.setPhone(request.getParameter("phone"));
		member.setEmail(request.getParameter("email"));
		member.setZipcode(request.getParameter("zipcode"));
		member.setAddress1(request.getParameter("address1"));
		member.setAddress2(request.getParameter("address2"));
		
		MemberDAO dao = MemberDAO.getInstance();
		dao.updateMemberByAdmin(member);
		
		// JSP 경로 반환
		return "/WEB-INF/views/member/detailUser.jsp";
	}

}
  1. src/main/java 오른쪽 클릭하고 새 패키지 kr.board.action 생성 후 새 클래스 ListAction 생성
package kr.board.action;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.board.dao.BoardDAO;
import kr.board.vo.BoardVO;
import kr.controller.Action;
import kr.util.PagingUtil;

public class ListAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		String pageNum = request.getParameter("pageNum");
		if(pageNum==null) pageNum = "1";

		String keyfield = request.getParameter("keyfield");
		String keyword = request.getParameter("keyword");
		
		if(keyfield==null) keyfield = ""; // GET 방식으로 null 전송시 PagingUtil에서 문제가 발생할 수 있으므로 빈 문자열로 처리
		if(keyword==null) keyword = "";
		
		BoardDAO dao = BoardDAO.getInstance();
		int totalCount = dao.getBoardCount(keyfield, keyword);
		
		// 페이지 처리
		PagingUtil page = new PagingUtil(keyfield, keyword, Integer.parseInt(pageNum), totalCount, 20, 10, "list.do");
		
		List<BoardVO> list = null;
		if(totalCount>0) {
			list = dao.getListBoard(page.getStartCount(), page.getEndCount(), keyfield, keyword);
		}
		
		request.setAttribute("totalCount", totalCount);
		request.setAttribute("list", list);
		request.setAttribute("pagingHtml", page.getPagingHtml());
		
		// JSP 경로 반환
		return "/WEB-INF/views/board/list.jsp";
	}

}
  1. 새 클래스 WriteFormAction 생성
package kr.board.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;

public class WriteFormAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do";
		}
		
		// 로그인되어 있는 경우
		// JSP 경로 반환
		return "/WEB-INF/views/board/writeForm.jsp";
	}

}
View
  1. common 폴더에 새 JSP 파일 notice.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>안내</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>안내</h2>
	<div class="result-display">
		<div class="align-center">
			<c:if test="${!empty accessMsg}">
				${accessMsg}
			</c:if>
			<c:if test="${empty accessMsg}">
				잘못된 접근입니다.
			</c:if>
			<p>
			<c:if test="${!empty accessUrl}">
				<input type="button" value="이동" onclick="location.href = '${accessUrl}';">
			</c:if>
			<c:if test="${empty accessUrl}">
				<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
			</c:if>
		</div>
	</div>
</div>
</body>
</html>
  1. member 폴더에 새 JSP 파일 memberList.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 목록</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#search_form').submit(function() {
			if($('#keyword').val().trim()=='') {
				alert('검색어를 입력하세요!');
				$('#keyword').val('').focus();
				return false;
			}
		}); // end of submit
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>회원 목록 (관리자 전용)</h2>
	<form id="search_form" action="memberList.do" method="get"> <%-- 검색 결과를 링크할 수 있도록 하기 위해 GET 방식 사용; 모델 클래스에서 인코딩 처리 불필요 --%>
		<ul class="search">
			<li>
				<select name="keyfield"> <%-- 검색할 컬럼 --%>
					<option value="1">아이디</option>
					<option value="2">이름</option>
					<option value="3">이메일</option>
				</select>
			</li>
			<li>
				<input type="search" size="16" name="keyword" id="keyword"> <%-- 검색할 값 --%>
			</li>
			<li>
				<input type="submit" value="검색">
			</li>
		</ul>
	</form>
	<div class="list-space align-right">
		<input type="button" value="목록" onclick="location.href = 'memberList.do';">
		<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
	</div>
	<c:if test="${count==0}">
	<div class="result-display">
		표시할 내용이 없습니다.
	</div>
	</c:if>
	<c:if test="${count>0}">
	<table>
		<tr>
			<th>아이디</th>
			<th>이름</th>
			<th>이메일</th>
			<th>전화번호</th>
			<th>가입일</th>
			<th>등급</th>
		</tr>
		<c:forEach var="member" items="${list}">
		<tr>
			<td>
				<c:if test="${member.auth>0}">
				<a href="detailUserForm.do?mem_num=${member.mem_num}">${member.id}</a>
				</c:if>
				<c:if test="${member.auth==0}"> <%-- 탈퇴 회원의 경우 변경 가능한 정보가 없으므로 링크 비활성화 --%>
				${member.id}
				</c:if>
			</td>
			<td>${member.name}</td>
			<td>${member.email}</td>
			<td>${member.phone}</td>
			<td>${member.reg_date}</td>
			<td>
				<c:if test="${member.auth==0}">탈퇴</c:if>
				<c:if test="${member.auth==1}">정지</c:if>
				<c:if test="${member.auth==2}">일반</c:if>
				<c:if test="${member.auth==3}">관리자</c:if>
			</td>
		</tr>
		</c:forEach>	
	</table>
	<div class="align-center">
		${pagingHtml}
	</div>
	</c:if>
</div>
</body>
</html>
  1. member 폴더에 새 JSP 파일 detailUserForm.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보 수정 (관리자 전용)</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#detail_form').submit(function() {
			let isValid = true; // submit()의 return 값 지정
			
			$('li').each(function() {
				let input = $(this).find('input[type!="button"]'); // button이 아닌 <input> 태그들만 선택
				if(!input.val().trim()) {
					let word = $(this).find('label').text();
					let post = (word.charCodeAt(word.length-1) - ''.charCodeAt(0)) % 28 > 0 ? '' : '';
					alert(word + post + ' 입력하세요!');
					input.val('').focus();
					isValid = false; // submit()의 return 값 지정
					return false; // each() 루프 중단
				}
			}); // end of each
			
			return isValid;
		}); // end of submit		
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>${member.id}의 정보 수정 (관리자 전용)</h2>
	<form action="detailUser.do" method="post" id="detail_form">
		<input type="hidden" name="mem_num" value="${member.mem_num}">
		<ul>
			<li>
				<label>등급</label>
				<c:if test="${member.auth!=3}">
				<input type="radio" name="auth" value="1" id="auth1" <c:if test="${member.auth==1}">checked</c:if>>정지
				<input type="radio" name="auth" value="2" id="auth2" <c:if test="${member.auth==2}">checked</c:if>>일반
				</c:if>
				<c:if test="${member.auth==3}"> <%-- 관리자 등급은 변경 불가능하도록 처리 --%>
				<input type="radio" name="auth" value="3" id="auth3" checked>관리자
				</c:if>
			</li>
			<li>
				<label for="name">이름</label>
				<input type="text" name="name" id="name" value="${member.name}" maxlength="10">
			</li>
			<li>
				<label for="phone">전화번호</label>
				<input type="text" name="phone" id="phone" value="${member.phone}" maxlength="15">
			</li>
			<li>
				<label for="email">이메일</label>
				<input type="email" name="email" id="email" value="${member.email}" maxlength="50">
			</li>
			<li>
				<label for="zipcode">우편번호</label>
				<input type="text" name="zipcode" id="zipcode" value="${member.zipcode}" maxlength="5">
				<input type="button" value="우편번호 찾기" onclick="sample2_execDaumPostcode();">
			</li>
			<li>
				<label for="address1">주소</label>
				<input type="text" name="address1" id="address1" value="${member.address1}" maxlength="30">
			</li>
			<li>
				<label for="address2">나머지 주소</label>
				<input type="text" name="address2" id="address2" value="${member.address2}" maxlength="30">
			</li>
		</ul>
		<div class="align-center">
			<input type="submit" value="수정">
			<input type="button" value="목록" onclick="location.href = 'memberList.do';">
		</div>
	</form>
<!-- 우편번호 스크립트 시작 -->
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    // 우편번호 찾기 화면을 넣을 element
    var element_layer = document.getElementById('layer');

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element_layer.style.display = 'none';
    }

    function sample2_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if(data.userSelectedType === 'R'){
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if(data.buildingName !== '' && data.apartment === 'Y'){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if(extraAddr !== ''){
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    //(주의)address1에 참고항목이 보여지도록 수정
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    //(수정) document.getElementById("address2").value = extraAddr;
                
                } 
                //(수정) else {
                //(수정)    document.getElementById("address2").value = '';
                //(수정) }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('zipcode').value = data.zonecode;
                //(수정) + extraAddr를 추가해서 address1에 참고항목이 보여지도록 수정
                document.getElementById("address1").value = addr + extraAddr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("address2").focus();

                // iframe을 넣은 element를 안보이게 한다.
                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                element_layer.style.display = 'none';
            },
            width : '100%',
            height : '100%',
            maxSuggestItems : 5
        }).embed(element_layer);

        // iframe을 넣은 element를 보이게 한다.
        element_layer.style.display = 'block';

        // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
        initLayerPosition();
    }

    // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
    // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
    // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
    function initLayerPosition(){
        var width = 300; //우편번호서비스가 들어갈 element의 width
        var height = 400; //우편번호서비스가 들어갈 element의 height
        var borderWidth = 5; //샘플에서 사용하는 border의 두께

        // 위에서 선언한 값들을 실제 element에 넣는다.
        element_layer.style.width = width + 'px';
        element_layer.style.height = height + 'px';
        element_layer.style.border = borderWidth + 'px solid';
        // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
        element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
        element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
    }
</script>
<!-- 우편번호 스크립트 끝 -->
</div>
</body>
</html>
  1. member 폴더에 새 JSP 파일 detailUser.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
	alert('회원 정보 수정이 완료되었습니다.');
	location.href = 'memberList.do';
</script>
  1. views 폴더의 하위 폴더로 board 생성 후 새 JSP 파일 list.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#search_form').submit(function() {
			if($('#keyword').val().trim()=='') {
				alert('검색어를 입력하세요!');
				$('#keyword').val('').focus();
				return false;
			}
		});
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>게시판 목록</h2>
	<form id="search_form" action="list.do" method="get">
		<ul class="search">
			<li>
				<select name="keyfield">
					<option value="1" <c:if test="${param.keyfield==1}">selected</c:if>>제목</option>
					<option value="2" <c:if test="${param.keyfield==2}">selected</c:if>>작성자</option>
					<option value="3" <c:if test="${param.keyfield==3}">selected</c:if>>내용</option>
				</select>
			</li>
			<li>
				<input type="search" size="16" name="keyword" id="keyword" value="${param.keyword}">
			</li>
			<li>
				<input type="submit" value="검색">
			</li>
		</ul>
	</form>
	<div class="list-space align-right">
		<input type="button" value="글쓰기" onclick="location.href = 'writeForm.do';" <c:if test="${empty user_num}">disabled</c:if>>
		<input type="button" value="목록" onclick="location.href = 'list.do';">
		<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
	</div>
	<c:if test="${totalCount==0}">
	<div class="result-display">
		표시할 게시물이 없습니다.
	</div>
	</c:if>
	<c:if test="${totalCount>0}">
	<table>
		<tr>
			<th>글 번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>작성일</th>
			<th>조회수</th>
		</tr>
		<c:forEach var="board" items="${list}">
		<tr>
			<td>${board.board_num}</td>
			<td><a href="detail.do?board_num=${board.board_num}">${board.title}</a></td>
			<td>${board.id}</td>
			<td>${board.reg_date}</td>
			<td>${board.hit}</td>
		</tr>
		</c:forEach>
	</table>
	<div class="align-center">
		${pagingHtml}
	</div>
	</c:if>
</div>
</body>
</html>
  1. board 폴더에 writeForm.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글쓰기</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#write_form').submit(function() {
			if($('#title').val().trim()=='') {
				alert('제목을 입력하세요!');
				$('#title').val('').focus();
				return false;
			}
			if($('#content').val().trim()=='') {
				alert('내용을 입력하세요!');
				$('#content').val('').focus();
				return false;
			}			
		}); // end of submit
		
		$('#filename').change(function() {
			let file = this.files[0];
			if(file.size>5*1024*1024) {
				alert('5MB까지만 업로드 가능합니다!');
				$(this).val('');
			}
		}); // end of change
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>게시판 글쓰기</h2>
	<form id="write_form" action="write.do" method="post" enctype="multipart/form-data">
		<ul>
			<li>
				<label for="title">제목</label>
				<input type="text" name="title" id="title" maxlength="50">
			</li>
			<li>
				<label for="content">내용</label>
				<textarea rows="5" cols="40" name="content" id="content"></textarea>
			</li>
			<li>
				<label for="filename">첨부 이미지</label>
				<input type="file" name="filename" id="filename" accept="image/jpeg, image/png, image/gif">
			</li>
		</ul>
		<div class="align-center">
			<input type="submit" value="등록">
			<input type="button" value="목록" onclick="location.href = 'list.do';">
		</div>
	</form>
</div>
</body>
</html>
자바빈
  1. src/main/java 오른쪽 클릭하고 새 패키지 kr.board.vo 생성 후 새 클래스 BoardVO 생성
package kr.board.vo;

import java.sql.Date;

public class BoardVO {
	private int board_num; // 글 번호
	private String title; // 제목
	private String content; // 내용
	private int hit; // 조회수
	private Date reg_date; // 등록일
	private Date modify_date; // 수정일
	private String filename; // 파일명
	private String ip; // IP 주소
	private int mem_num; // 작성자 회원 번호
	private String id; // 작성자 아이디; 테이블에는 없지만 회원 번호 대신 화면에 표시할 것이므로 프로퍼티에 포함
	
	public int getBoard_num() {
		return board_num;
	}
	public void setBoard_num(int board_num) {
		this.board_num = board_num;
	}
	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 int getHit() {
		return hit;
	}
	public void setHit(int hit) {
		this.hit = hit;
	}
	public Date getReg_date() {
		return reg_date;
	}
	public void setReg_date(Date reg_date) {
		this.reg_date = reg_date;
	}
	public Date getModify_date() {
		return modify_date;
	}
	public void setModify_date(Date modify_date) {
		this.modify_date = modify_date;
	}
	public String getFilename() {
		return filename;
	}
	public void setFilename(String filename) {
		this.filename = filename;
	}
	public String getIp() {
		return ip;
	}
	public void setIp(String ip) {
		this.ip = ip;
	}
	public int getMem_num() {
		return mem_num;
	}
	public void setMem_num(int mem_num) {
		this.mem_num = mem_num;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
}
DAO
  1. src/main/java 오른쪽 클릭하고 새 패키지 kr.board.dao 생성 후 새 클래스 BoardDAO 생성
package kr.board.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import kr.board.vo.BoardVO;
import kr.util.DBUtil;
import kr.util.StringUtil;

public class BoardDAO {
	// 싱글턴 패턴
	private static BoardDAO instance = new BoardDAO();
	public static BoardDAO getInstance() {
		return instance;
	}
	private BoardDAO() {}
	
	// 글 등록
	public void insertBoard(BoardVO board) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "INSERT INTO zboard (board_num, title, content, filename, ip, mem_num) "
				+ "VALUES (zboard_seq.NEXTVAL, ?, ?, ?, ?, ?)";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setString(1, board.getTitle());
			pstmt.setString(2, board.getContent());
			pstmt.setString(3, board.getFilename());
			pstmt.setString(4, board.getIp());
			pstmt.setInt(5, board.getMem_num());
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 총 레코드 수/검색 레코드 수
	public int getBoardCount(String keyfield, String keyword) throws Exception {
		int count = 0;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		String sub_sql = "";
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();			
			// 검색 처리
			if(keyword!=null && !"".equals(keyword)) {
				if(keyfield.equals("1")) sub_sql = "WHERE title LIKE ?";
				else if(keyfield.equals("2")) sub_sql = "WHERE id LIKE ?";
				else if(keyfield.equals("3")) sub_sql = "WHERE content LIKE ?";
			}
			// SQL문 작성
			sql = "SELECT COUNT(*) FROM zboard JOIN zmember USING(mem_num)" + sub_sql;
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			if(keyword!=null && !"".equals(keyword)) {
				pstmt.setString(1, "%" + keyword + "%");
			}
			// SQL문을 실행해서 결과 행을 ResultSet에 담아 반환
			rs = pstmt.executeQuery();
			if(rs.next()) {
				count = rs.getInt(1);
			}			
		}
		catch (Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(rs, pstmt, conn);
		}
		
		return count;
	}
	
	// 목록
	public List<BoardVO> getListBoard(int startRow, int endRow, String keyfield, String keyword) throws Exception {
		List<BoardVO> list = null;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		String sub_sql = "";
		int cnt = 0; // 가변적 ? 번호 처리
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// 검색 처리
			if(keyword!=null && !"".equals(keyword)) {
				if(keyfield.equals("1")) sub_sql = "WHERE title LIKE ?";
				else if(keyfield.equals("2")) sub_sql = "WHERE id LIKE ?";
				else if(keyfield.equals("3")) sub_sql = "WHERE content LIKE ?";				
			}
			// SQL문 작성
			sql = "SELECT * FROM (SELECT z.*, ROWNUM AS rnum "
				+ "FROM (SELECT * FROM zboard JOIN zmember USING(mem_num) "
				+ sub_sql + " ORDER BY board_num DESC) z) "
				+ "WHERE rnum >= ? AND rnum <=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			if(keyword!=null && !"".equals(keyword)) {
				pstmt.setString(++cnt, "%" + keyword + "%");
			}
			pstmt.setInt(++cnt, startRow);
			pstmt.setInt(++cnt, endRow);
			// SQL문을 실행해서 결과 행들을 ResultSet에 담아 반환
			rs = pstmt.executeQuery();
			list = new ArrayList<BoardVO>();
			while(rs.next()) {
				BoardVO board = new BoardVO();
				board.setBoard_num(rs.getInt("board_num"));
				board.setTitle(StringUtil.useNoHtml(rs.getString("title"))); // 제목에는 HTML 태그를 허용하지 않음
				board.setHit(rs.getInt("hit"));
				board.setReg_date(rs.getDate("reg_date"));
				board.setId(rs.getString("id"));
				// BoardVO를 ArrayList에 저장
				list.add(board);
			}
		}
		catch (Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(rs, pstmt, conn);
		}
		
		return list;
	}
	
	// 글 상세
	public BoardVO getBoard(int board_num) throws Exception {
		BoardVO board = null;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "SELECT * FROM zboard b JOIN zmember m "
				+ "ON b.mem_num=m.mem_num WHERE b.board_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, board_num);
			// SQL문을 실행해서 결과 행을 ResultSet에 담아 반환
			rs = pstmt.executeQuery();
			if(rs.next()) {
				board = new BoardVO();
				board.setBoard_num(board_num);
				board.setTitle(rs.getString("title"));
				board.setContent(rs.getString("content"));
				board.setHit(rs.getInt("hit"));
				board.setReg_date(rs.getDate("reg_date"));
				board.setModify_date(rs.getDate("modify_date"));
				board.setFilename(rs.getString("filename"));
				board.setMem_num(rs.getInt("mem_num"));
				board.setId(rs.getString("id"));
			}
		}
		catch (Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(rs, pstmt, conn);
		}
		
		return board;
	}
	
	// 조회수 증가
	public void updateReadcount(int board_num) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "UPDATE zboard SET hit=hit+1 WHERE board_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, board_num);
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch (Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 글 수정
	public void updateBoard(BoardVO board) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		String sub_sql = "";
		int cnt = 0; // 가변적 ? 번호 처리
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();

			if(board.getFilename()!=null) {
				sub_sql = "filename=?, ";
			}
			
			// SQL문 작성
			sql = "UPDATE zboard SET title=?, content=?, " + sub_sql
				+ "modify_date=SYSDATE, ip=? WHERE board_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setString(++cnt, board.getTitle());
			pstmt.setString(++cnt, board.getContent());
			if(board.getFilename()!=null) {
				pstmt.setString(++cnt, board.getFilename());
			}
			pstmt.setString(++cnt, board.getIp());
			pstmt.setInt(++cnt, board.getBoard_num());
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 파일 삭제
	public void deleteFile(int board_num) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "UPDATE zboard SET filename='' WHERE board_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, board_num);
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 글 삭제
	public void deleteBoard(int board_num) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		PreparedStatement pstmt2 = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// 오토커밋 해제
			conn.setAutoCommit(false);
			
			// 댓글 삭제
			// SQL문 작성
			sql = "DELETE FROM zboard_reply WHERE board_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, board_num);
			// SQL문 실행
			pstmt.executeUpdate();
			
			// 부모글 삭제
			// SQL문 작성
			sql = "DELETE FROM zboard WHERE board_num=?";
			// PreparedStatement 객체 생성
			pstmt2 = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt2.setInt(1, board_num);
			// SQL문 실행
			pstmt2.executeUpdate();
			
			// 정상적으로 모든 SQL문이 실행된 경우
			conn.commit();
		}
		catch(Exception e) {
			// SQL문 실행이 하나라도 실패한 경우
			conn.rollback();
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt2, null);
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 댓글 등록
	public void insertReplyBoard(BoardReplyVO boardReply) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "INSERT INTO zboard_reply (re_num, re_content, re_ip, board_num, mem_num) "
				+ "VALUES (zreply_seq.NEXTVAL, ?, ?, ?, ?)";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setString(1, boardReply.getRe_content());
			pstmt.setString(2, boardReply.getRe_ip());
			pstmt.setInt(3, boardReply.getBoard_num());
			pstmt.setInt(4, boardReply.getMem_num());
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 댓글 수
	public int getReplyBoardCount(int board_num) throws Exception {
		int count = 0;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "SELECT COUNT(*) FROM zboard_reply JOIN zmember "
				+ "USING(mem_num) WHERE board_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, board_num);
			// SQL문을 실행해서 ResultSet에 결과 행을 담아 반환
			rs = pstmt.executeQuery();
			if(rs.next()) {
				count = rs.getInt(1);
			}
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(rs, pstmt, conn);
		}
		
		return count;
	}
	
	// 댓글 목록
	public List<BoardReplyVO> getListReplyBoard(int startRow, int endRow, int board_num) throws Exception {
		List<BoardReplyVO> list = null;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
 			sql = "SELECT * FROM (SELECT r.*, ROWNUM AS rnum "
 				+ "FROM (SELECT b.re_num, TO_CHAR(b.re_date, 'YYYY-MM-DD HH24:MI:SS') AS re_date, "
 				+ "TO_CHAR(b.re_modifydate, 'YYYY-MM-DD HH24:MI:SS') AS re_modifydate, b.re_content, "
 				+ "b.board_num, mem_num, m.id FROM zboard_reply b JOIN zmember m USING(mem_num) " // USING에 사용되는 컬럼은 컬럼명에 테이블 알리아스를 붙이면 오류 발생하므로 주의
 				+ "WHERE b.board_num=? ORDER BY b.re_num DESC) r) "
 				+ "WHERE rnum >= ? AND rnum <= ?";
 			// PreparedStatement 객체 생성
 			pstmt = conn.prepareStatement(sql);
 			// ?에 데이터를 바인딩
 			pstmt.setInt(1, board_num);
 			pstmt.setInt(2, startRow);
 			pstmt.setInt(3, endRow);
 			// SQL문을 실행해서 결과 행들을 ResultSet에 담아 반환
 			rs = pstmt.executeQuery();
 			list = new ArrayList<BoardReplyVO>();
 			while(rs.next()) {
 				BoardReplyVO reply = new BoardReplyVO();
 				reply.setRe_num(rs.getInt("re_num"));
 				// 날짜를 1분 전, 1시간 전, 1일 전 형식의 문자열로 변환
 				reply.setRe_date(DurationFromNow.getTimeDiffLabel(rs.getString("re_date")));
 				if(rs.getString("re_modifydate")!=null) {
 					reply.setRe_modifydate(DurationFromNow.getTimeDiffLabel(rs.getString("re_modifydate")));
 				}
 				// 줄바꿈은 인정하고 HTML 태그는 허용하지 않음
 				reply.setRe_content(StringUtil.useBrNoHtml(rs.getString("re_content")));
 				reply.setBoard_num(rs.getInt("board_num"));
 				reply.setMem_num(rs.getInt("mem_num"));
 				reply.setId(rs.getString("id"));

 				list.add(reply);
 			}
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(rs, pstmt, conn);
		}
		
		return list;
	}
	
	// 댓글 상세
	public BoardReplyVO getReplyBoard(int re_num) throws Exception {
		BoardReplyVO reply = null;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs= null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "SELECT * FROM zboard_reply JOIN zmember USING(mem_num) WHERE re_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, re_num);
			// SQL문을 실행해서 결과 행을 ResultSet에 담아 반환
			rs = pstmt.executeQuery();
			if(rs.next()) {
				reply = new BoardReplyVO();
				reply.setRe_num(re_num);
				reply.setBoard_num(rs.getInt("board_num"));
				reply.setMem_num(rs.getInt("mem_num"));
				reply.setId(rs.getString("id"));
			}
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(rs, pstmt, conn);
		}
		
		return reply;
	}
	
	// 댓글 수정
	public void updateReplyBoard(BoardReplyVO reply) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "UPDATE zboard_reply SET re_content=?, re_modifydate=SYSDATE, re_ip=? WHERE re_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setString(1, reply.getRe_content());
			pstmt.setString(2, reply.getRe_ip());
			pstmt.setInt(3, reply.getRe_num());
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch (Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
	// 댓글 삭제
	public void deleteReplyBoard(int re_num) throws Exception {
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			// 커넥션 풀로부터 커넥션 할당
			conn = DBUtil.getConnection();
			// SQL문 작성
			sql = "DELETE FROM zboard_reply WHERE re_num=?";
			// PreparedStatement 객체 생성
			pstmt = conn.prepareStatement(sql);
			// ?에 데이터를 바인딩
			pstmt.setInt(1, re_num);
			// SQL문 실행
			pstmt.executeUpdate();
		}
		catch(Exception e) {
			throw new Exception(e);
		}
		finally {
			// 자원 정리
			DBUtil.executeClose(null, pstmt, conn);
		}
	}
	
}
  1. kr.util 패키지에 새 클래스 StringUtil 생성
package kr.util;

public class StringUtil {
	// HTML 태그를 허용하면서 줄바꿈
	public static String useBrHtml(String str) {
		if(str==null) return null;
		
		return str.replaceAll("\r\n", "<br>")
				.replaceAll("\r", "<br>")
				.replaceAll("\n", "<br>");
	}
	
	// HTML 태그를 허용하지 않으면서 줄바꿈
	public static String useBrNoHtml(String str) {
		if(str==null) return null;
		
		return str.replaceAll("<", "&lt;")
				.replaceAll(">", "&gt;")
				.replaceAll("\r\n", "<br>")
				.replaceAll("\r", "<br>")
				.replaceAll("\n", "<br>");
	}
	
	// HTML 태그를 허용하지 않음
	public static String useNoHtml(String str) {
		if(str==null) return null;
		
		return str.replaceAll("<", "&lt;")
				.replaceAll(">", "&gt;");
	}
	
	// 특정 길이 이후에 ...으로 처리
	public static String shortWords(int length, String content) {
		if(content==null) return null;
		
		if(content.length()>length) {
			return content.substring(0, length) + "...";
		}
		
		return content;
	}
}

다음으로