SERVLET으로 게시판 구현해보기

꿈꾸는하늘·2024년 3월 20일

JSP

목록 보기
6/25
post-thumbnail

지금까지는 jsp 파일내에 다른 jsp 파일을 경로로 링크를 걸어서(예1) 페이지를 연결하여 게시판을 구현했었으며 필요에 따라 jsp 파일 내에 스크립틀립 <%%>을 사용해서 java 코드를 넣어줬었다(예2).

-> 예1) Main 페이지에서 로그인/회원가입 버튼에 하이퍼링크를 Login.jsp/Register.jsp 로 연결해준다거나, 'form action = '에 jsp 파일을 연결하여 페이지 이동이 일어날 수 있도록.
이 경우, 주소창에 jsp 파일명이 그대로 노출되었었음.

-> 예2) 메인화면에서 게시판 클릭시 List.jsp에서 로그인 여부를 java 코드로 확인 후 로그인 상태일 경우 게시판을, 로그아웃 상태일경우 로그인 화면으로 이동하도록.

이제는 Servlet을 배웠기 때문에 Servlet을 이용하여 주소창에 jsp 파일명 노출 없이, 주소 변화없이 게시판을 구현하고 jsp 파일 내에서 java 코드를 삭제하여 다소 번잡스러웠던 코드를 좀 더 깔끔하게 작성해보고자 한다.

Servlet 매핑은 두 가지가 있는데 나는 직접 @WebServlet 애너테이션을 이용하여 맵핑하는 방식을 선호한다. (이 때, 주의해야 하는 점은 @WebServlet ("/경로") 를 선언할 때 경로 앞에 ★ / 슬래쉬 ★ 표시를 꼭!!! 잊지 않고 해줘야한다. 그렇지 않으면 경로를 찾을 수 없어서 에러가 뜸)

Servlet을 사용하여 MVC 패턴을 적용하므로 지금까지 jsp로 구현했던 입출력 과정을 Controller 클래스를 생성하여 구현한다.

Controller는 HttpServlet을 상속받으며, 해당 servlet으로 수행할 기능?에 따라 크게 doGet 또는 doPost 메소드를 오버라이드해준다.

먼저, 내가 jsp파일로 구현한 게시판을 servlet 방식으로 바꾸기 전에 각 컨트롤러별 수행할 기능을 아래와 같이 정리해보았다.

정리하면서 다시 한번 머릿속에 정리해본 내용은,

  • get 방식은 클라이언트의 화면에 원하는 페이지를 출력하고자 할때 사용되고 주소창 변화없이 페이지만을 출력해주기 위해 forward(주소 변화 없이 화면만 바뀜) 처리하여 jsp 파일을 화면에 출력해준다.
  • post 방식은 클라이언트의 요청에 따라 각 기능(로그인, 회원가입 등 db 입력)을 수행하고 수행이 완료되면 아예 다른 페이지로 넘어가줘야 하기 때문에 sendRedirect(주소도, 화면도 바뀜)를 통해 주소를 넘겨 재요청을 해준다.
  • mainController.java
package 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;

@WebServlet ("/main")
public class mainController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("/Main.jsp").forward(req, resp);
	}
	
}
  • Main.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="css/HeaderAndNav.css">

</head>
<body>
<%@ include file = "HeaderAndNav.jsp" %>
	
</body>
</html>
  • loginController.java
package controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import dao.MemberDao;
import dto.Member;

@WebServlet("/login")
public class loginController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String url = req.getParameter("url");
		req.getRequestDispatcher("LoginForm.jsp?url="+url).forward(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String id = req.getParameter("id");
		String pw = req.getParameter("pw");
		String url = req.getParameter("back");
		String rememberId = req.getParameter("rememberId");
		System.out.println("id : "+id);
		System.out.println("pw : "+pw);
		System.out.println("back : "+url);
		System.out.println("rememberId : "+rememberId);
		String back = "null".equals(url) || url==null || "".equals(url) ? "main" : req.getParameter("back"); 

		
		MemberDao dao = new MemberDao(req.getServletContext());
		
		Cookie cookie = new Cookie("id", id);
		
		Member mem = dao.login(id);
		   
		   
		if(mem.getId().equals(id)&&mem.getPw().equals(pw)){
			if("on".equals(rememberId)){
				cookie = new Cookie("id", id);
				resp.addCookie(cookie);
				/* util.CookieManager.makeCookie(resp, "id", id, 86400); */
				}else{
				cookie = new Cookie("id","");
				cookie.setMaxAge(0);
				resp.addCookie(cookie);
				/* util.CookieManager.deleteCookie(resp, "id"); */
				}
			HttpSession session = req.getSession();
			session.setAttribute("id", id);
			session.setAttribute("name", mem.getName());
			
			resp.sendRedirect(back);
		   }else{
			   req.getRequestDispatcher("/LoginForm.jsp?loginError=1").forward(req, resp);
		   }
		   
		   dao.close();
	}
	
}
  • LoginForm.jsp
<%@page import="util.CookieManager"%>
<%@ 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="css/HeaderAndNav.css">
<style>
*{box-sizing : border-box;}

	form{
		border : 2px dashed green;
		margin : 0 auto;
		border-radius: 5px;
		width : 300px;
		height : 300px;
		display : grid;
		grid-template-rows : repeat(5, 1fr);
	}
	h2{
		color : green;
		text-align : center;
		margin : 40px;
		font-weight : bolder;}
	
	.logSec{
		width : 300px;
		display : flex;
		justify-content: center;
		align-items: center;
	}
	input{
		height : 35px;
		font-size : 15px;
		padding : 0 10px;
		border-radius : 5px;
		border : 1px solid gray;
	}
	button{
		width : 80px;
		height : 30px;
		font-size : 15px;
	}
	#login{
	font-size : 40px;
	font-weight : bolder;
	text-align : center;
	color : green;
	}
	
	#rememberId{
		width : 10px; 
		height : 10px;
		border : 1px solid green;
		margin-right:3px;
	}
	label {
	display : flex;
	align-items: center;
	justify-content : center;
	}
	#msg { text-align: center;
	padding-top : 30px;}
</style>
</head>
<body>
<%@ include file = "HeaderAndNav.jsp" %>
<%
	/* String rememberId = "";	
	String check = "";
    Cookie[] cookies = request.getCookies();  // 요청 헤더의 모든 쿠키 얻기
    if (cookies!=null) {
        for (Cookie c : cookies) {  // 쿠키 각각의
            String cookieName = c.getName();  // 쿠키 이름 얻기
            if("id".equals(cookieName)){
            	rememberId = c.getValue();
            	check = "checked";
            }
        }
    } */
   
    /* String rememberId = CookieManager.readCookie(request, "id");
    String check = "";
    if(!rememberId.equals("")) check="checked"; */
    
    
%>
	
<p id="login">로그인</p>
	<form action="./login" method="post" onsubmit = "return formCheck(this);">
		<div id="msg"></div>
		<input type="hidden" name="back" value="${param.url }">
		<div class="logSec"><input type="text" name = "id" autofocus placeholder="아이디" value="${cookie.id.value}"></div>
		<div class="logSec"><input type="password" name="pw" placeholder="비밀번호"></div>
		<label><input type="checkbox" name="rememberId" id="rememberId" ${empty cookie.id.value ? "":"checked"} >아이디 기억</label>
		<div class="logSec"><button>로그인</button></div>
	</form>
	
<script>
	if("${param.loginError}"!=""){
	
		document.querySelector("#msg").innerText ="아이디와 비밀번호를 확인해주세요"
	}

	function formCheck(frm) {
	    	if(frm.id.value.length==0) {
	    	    setMessage("아이디를 입력해주세요", frm.id);
	    	    return false;
	    	}
	    	
	    	if(frm.pw.value.length==0) {
	    	    setMessage("비밀번호를 입력해주세요", frm.pw);
				return false;
	    	}
	    	return true;
	    }


	function setMessage(msg, element){
	     document.getElementById("msg").innerHTML = msg;
	     if(element) {
	        element.select();
	     }
	}
	   
	   
</script>
</body>
</html>
  • logoutController.java (별도로 로그아웃 페이지가 필요하지 않고, 로그아웃 클릭시 로그아웃 기능 수행 후 메인화면으로 이동하면 되기 때문에 jsp는 필요없다.)
package 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 javax.servlet.http.HttpSession;

@WebServlet ("/logout")
public class logoutController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		HttpSession session = req.getSession();
		session.invalidate();
		resp.sendRedirect("main");
	}
	
}
  • registerController.java
package controller;

import java.io.IOException;
import java.net.URLEncoder;

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 dao.MemberDao;
import dto.Member;

@WebServlet ("/register")
public class registerController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("/RegisterForm.jsp").forward(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		MemberDao dao = new MemberDao(req.getServletContext());
		String id = req.getParameter("id");
		String pw = req.getParameter("pw");
		String name = req.getParameter("name");
		String pwch = req.getParameter("pwch");
		
		Member mem = new Member(id, pw, name);
		
		if(pw!=null&&pw.equals(pwch)){
			int res = dao.register(mem);
			if(res==1) {   
			resp.sendRedirect("login");
				}else{
				req.getRequestDispatcher("RegisterForm.jsp?msg="+URLEncoder.encode("회원가입에 실패했습니다.", "utf-8")).forward(req, resp);
				req.setAttribute("id", id);
				req.setAttribute("name", name);
			}
		}else {
			req.getRequestDispatcher("RegisterForm.jsp?msg="+URLEncoder.encode("회원가입에 실패했습니다.", "utf-8")).forward(req, resp);
			req.setAttribute("id", id);
			req.setAttribute("name", name);
		}
		   dao.close();
	}
	
}
  • RegisterForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.net.URLDecoder" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="css/HeaderAndNav.css">
<style>
	form{
		border : 2px dashed green;
		margin : 0 auto;
		padding : 20px 0;
		border-radius: 5px;
		width : 300px;
		height : 320px;
		display : grid;
		grid-template-rows : repeat(1fr, 5);
	}
	h2{
		color : green;
		text-align : center;
		margin : 40px;}
	
	.regSec{
		width : 300px;
		display : flex;
		justify-content: center;
		align-items: center;
	}
	input{
		height : 35px;
		font-size : 15px;
		padding : 0 10px;
		border-radius : 5px;
		border : 1px solid gray;
	}
	button{
		width : 80px;
		height : 30px;
		font-size : 15px;
		margin : 10px;
	}
	#msg { text-align: center;
</style>
</head>
<body>
<%@ include file = "HeaderAndNav.jsp" %>
<h2>회원가입</h2>
	<form action="./register" method="post" onsubmit = "return formCheck(this);">
		<div id="msg">${URLDecoder.decode(param.msg, 'utf-8') }</div>
		<div class="regSec"><input type="text" name = "id" autofocus placeholder="아이디" value="${param.id }"></div>
		<div class="regSec"><input type="password" name="pw" placeholder="비밀번호"></div>
		<div class="regSec"><input type="password" name="pwch" placeholder="비밀번호 확인"></div>
		<div class="regSec"><input type="text" name="name" placeholder="이름" value="${param.name }"></div>
		<div class="regSec"><button>회원가입</button><button type="button" onclick="location.href='Main.jsp'">취소</button></div>
	</form>
<script>
	/* if("${param.registerError}"!=""){
		
		document.querySelector("#msg").innerText ="회원가입이 완료되지 않았습니다."
	} */

	function formCheck(frm) {
	    	if(frm.id.value.length==0) {
	    	    setMessage("아이디를 입력해주세요", frm.id);
	    	    return false;
	    	}
	    	
	    	if(frm.pw.value.length==0||frm.pwch.value.length==0) {
	    	    setMessage("비밀번호를 입력해주세요", frm.pw);
				return false;
	    	}
	    	if(frm.name.value.length==0) {
	    	    setMessage("이름을 입력해주세요", frm.pw);
				return false;
	    	}
	    	return true;
	    }


	function setMessage(msg, element){
	     document.getElementById("msg").innerHTML = msg;
	     if(element) {
	        element.select();
	     }
	}
	   
	   
</script>
</body>
</html>
  • listController.java
package controller;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 dao.BoardDao;
import dto.BoardDto;
import util.JSFunction;
import util.PageHandler;
import util.SearchCondition;

@WebServlet ("/list")
public class listController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	if(req.getSession().getAttribute("id")==null) {
		String url = req.getRequestURI();
		JSFunction.alertLocation("로그인 후 이용해주세요.", "login?url="+url, resp);
		return;
	}
	BoardDao dao = new BoardDao(req.getServletContext());
	Map<String, String> map = new HashMap<String, String>();
	SearchCondition sc = null;
	PageHandler ph = null;
	
	//쿼리스트링 통해서 전달 받을 값
	String searchField = req.getParameter("searchField");
	String searchWord = req.getParameter("searchWord");
	int pageSize = 10;
	int pageNum = 1;
	String pageTmp = req.getParameter("pageNum");
	if(pageTmp != null && !"".equals(pageTmp)&&!"null".equals(pageTmp)) {
		pageNum = Integer.parseInt(pageTmp);
	}
	
	//검색어가 있다면
	if(searchWord!=null&&!"".equals(searchWord)) {
		map.put("searchField", searchField);
		map.put("searchWord", searchWord);
		sc = new SearchCondition(searchField, searchWord, pageNum, pageSize);
	} else {
		sc = new SearchCondition(pageNum, pageSize);
	}
	
	//총 게시물 수 확인
	int totalCnt = dao.selectCount(map);
	
	ph = new PageHandler(sc, totalCnt);
	
	map.put("offset", sc.getOffset(pageNum)+"");
	map.put("pageSize", pageSize+"");
	
	//게시물 조회
	List<BoardDto> blist = dao.selectList(map);
	
	req.setAttribute("blist", blist);
	req.setAttribute("ph", ph);
	req.setAttribute("pageNum", pageNum);
	
	//날짜 비교
	Date date = new Date();
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	String now = sdf.format(date);
	req.setAttribute("now", now);
	
	dao.close();
	req.getRequestDispatcher("List.jsp").forward(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	}

	
}
  • List.jsp
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="util.PageHandler"%>
<%@page import="dto.BoardDto"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="dao.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<style>
	section{
		width : 1200px;
		height : 700px;
		margin : 0 auto;}
	table{
		border-collapse: collapse;
		margin : 0 auto;
		width : 1000px;
	}
	tr, th, td {
		border : 1px solid lightgray;
		padding : 10px;
		text-align : center;
	}
	td{
		font-size:15px;
	}
	th{
		background-color : #F2F5F2;
		font-size : 17px;
		}
	h1{
		text-align : center;
		margin-top : 40px;
	}
	#searchBar{
	text-align : right;
	margin : 20px 0;
	padding-right:100px;
	}
	#searchField, #searchWord{
	height : 30px;
	
	}
	#searchBar>button{
		margin-left : 5px;
		height : 30px;
	}
	#postBtn{
		text-align : right;
		margin : 10px;
		padding-right : 100px;
	}
	#postBtn>a{
		color : green;
		font-size : 15px;
		font-weight : bold;}
		
	a{text-decoration: none; color : black;}
	#pageNav{
		text-align : center;
	}
</style>
<link rel="stylesheet" href="css/HeaderAndNav.css">
</head>

<body>
<%@ include file = "HeaderAndNav.jsp" %>
<section>
<form>
	<h1>회원제 게시판</h1>
	<div id="searchBar">
		<select name = "searchField" id = "searchField">
			<option value="title" ${"title" eq param.searchField? "selected":"" }>제목</option>
			<option value="content" ${"content" eq param.searchField? "selected":"" }>내용</option>
		</select>
		<input type="text" id= "searchWord" name="searchWord" value = "${empty param.searchWord ? '' : param.searchWord }"><button>검색</button>
	</div>
	<table>
		<tr>
			<th width="10%">번호</th>
			<th width="50%">제목</th>
			<th width="10%">작성자</th>
			<th width="10%">조회수</th>
			<th width="10%">좋아요</th>
			<th width="10%">작성일</th>
		</tr>
		<c:choose>
			<c:when test="${empty blist }">
				<tr><td colspan = "5" align="center">등록된 게시물이 없습니다.</td>
			</c:when>
			<c:otherwise>
				<c:forEach items="${blist }" var="tmp">
					<tr>
					<td>${tmp.num }</td>
					<td><a href="view?num=${tmp.num }&pageNum=${pageNum}">${tmp.title }</a>
						<c:if test="${tmp.commentCnt > 0}">
							<a style="color:green; margin-left:3px;" href="view?num=${tmp.num }&pageNum=${pageNum}">[${tmp.commentCnt }]</a></td>
						</c:if>
					<td>${tmp.id }</td>
					<td>${tmp.viewCnt }</td>
					<td>${tmp.likeCnt }</td>
					<fmt:formatDate value="${tmp.postDate }" type="both" pattern="yyyy-MM-dd" var="postdate"></fmt:formatDate>
					<fmt:formatDate value="${tmp.postDate}" type="time" pattern="HH:mm" var="posttime"></fmt:formatDate>
					<c:choose>
						<c:when test="${now eq postdate }">
							<td>${posttime }</td>
						</c:when>
						<c:otherwise>
							<td>${postdate }</td>
						</c:otherwise>
					</c:choose>
					</tr>
				</c:forEach>
			</c:otherwise>
		</c:choose>
	</table>
	<div id="postBtn"><a href="./post">글쓰기</a></div>
	
	<div id="pageNav" name="pageNav">
		<c:if test="${ph.showPrev}">
			<a href="./list${ph.sc.getQueryString(ph.beginPage-1)}">이전</a>
		</c:if>
		<c:forEach var="i" begin="${ph.beginPage }" end="${ph.endPage}">
			<c:choose>
				<c:when test="${i==ph.sc.page }">
					<a style="color:green; font-weight:bold;" href="./list${ph.sc.getQueryString(i) }">${i }</a>
				</c:when>
				<c:otherwise>
					<a href="./list${ph.sc.getQueryString(i)}">${i }</a>
				</c:otherwise>
			</c:choose>
		</c:forEach>
		<c:if test="${ph.showNext}">
			<a href="./list${ph.sc.getQueryString(ph.endPage+1)}">다음</a>
		</c:if>
	</div>
</form>
</section>
</body>
</html>
  • postController.java
package 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 javax.servlet.http.HttpSession;

import dao.BoardDao;
import dto.BoardDto;
import util.JSFunction;
import util.JSFunction2;
@WebServlet ("/post")
public class postController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		HttpSession session = req.getSession();
		if(session.getAttribute("id")==null) {
			JSFunction.alertLocation(getServletName(), getServletInfo(), resp);
			return;
		}
		req.getRequestDispatcher("PostForm.jsp").forward(req, resp);

	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		BoardDao dao = new BoardDao(req.getServletContext());
		String title = req.getParameter("title");
		String content = req.getParameter("content");
		HttpSession session = req.getSession();
		String id = session.getAttribute("id")+"";
		
		BoardDto dto = new BoardDto(title, content, id);
		int res = dao.post(dto);
		
		if(res==1){
			JSFunction.alertLocation("정상적으로 등록되었습니다.", "list", resp);
		}else{
			JSFunction.alertBack("잠시 후 다시 시도해주세요.", resp);
		}
			
		dao.close();
	}
	
}
  • PostForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/HeaderAndNav.css">
<style>
	*{
 		box-sizing: border-box;}
	section {
            width : 500px;
            height: 600px;
            margin : 0 auto;
    }
    #boardHeader{
   	 text-align : center;
    }
    textarea{
    		font-size : 15px;
            width: 500px;
            height: 400px;
            border: 1px solid green;
            border-radius : 10px;
            resize: none;
            padding : 10px;
    }
    #title{
    		font-size : 15px;
            width: 500px;
            border: 1px solid green;
            border-radius : 10px;
            padding : 10px;
    }
    #btn{text-align : right;}
    button{
    	margin : 3px;
    	background-color : white;
    	border : 1px solid green;
    }
    button:hover{
    	cursor:pointer;
    }
</style>
</head>
<body>
<%@ include file = "HeaderAndNav.jsp" %>


<section>
	<form action="./post" onsubmit="return formCheck(this);" method="post">
     <h1 id="boardHeader">글 쓰기</h1>
     <h3>제목</h3>
     <input type="text" id="title" name="title">
     <h3>내용</h3><textarea name="content"></textarea>
     <div id=btn><button>작성</button><button type="reset">취소</button><button type="button" onclick="location.href='List.jsp'" >목록보기</button></div>
     </form>
</section>
	<script>
		function formCheck(form){
			console.log(form.title.value);
			if(form.title.value.trim()==""){
				alert("제목을 입력하세요.");
				form.title.focus();
				return false;
			}
			if(form.content.value.trim()==""){
				alert("내용을 입력하세요.");
				form.content.focuse();
				return false;
			}
			return true;
		}
		
	</script>
</body>
</html>
  • editController.java
package 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 dao.BoardDao;
import dto.BoardDto;
import util.JSFunction;
@WebServlet ("/edit")
public class editController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		if(req.getSession().getAttribute("id")==null) {
			JSFunction.alertLocation("로그인 후 이용해주세요.", "login", resp);
			return;
		}
		BoardDao dao = new BoardDao(req.getServletContext());
		String snum = req.getParameter("num");
		String pageNum = req.getParameter("pageNum");
		pageNum = pageNum==null||"".equals(pageNum)||"null".equals(pageNum)? "1" : pageNum;
		int num = Integer.parseInt(snum);
		BoardDto dto = dao.selectNum(num);
		req.setAttribute("dto", dto);
		req.setAttribute("pageNum", pageNum);
		
		dao.close();
		
		req.getRequestDispatcher("EditForm.jsp").forward(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String title = req.getParameter("title");
		String content = req.getParameter("content");
		String snum = req.getParameter("num");
		int num = Integer.parseInt(snum);
		String pageNum = req.getParameter("pageNum");
		pageNum = pageNum==null||"".equals(pageNum)||"null".equals(pageNum)? "1" : pageNum;
		req.setAttribute("pageNum", pageNum);
		String id = req.getSession().getAttribute("id")+"";
		
		BoardDto dto = new BoardDto(num, title, content, id);
		
		BoardDao dao = new BoardDao(req.getServletContext());
		int res = dao.edit(dto);
		
		if(res==1) {
			resp.sendRedirect("view?num="+num+"&pageNum="+pageNum);
		}else {
			JSFunction.alertBack("잠시 후 다시 시도부탁드립니다.", resp);
		}
		
		dao.close();
	}
	
}
  • EditForm.jsp
<%@page import="dto.BoardDto"%>
<%@page import="dao.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<link rel="stylesheet" href="css/HeaderAndNav.css">
<style>
	*{
 		box-sizing: border-box;}
	section {
            width : 500px;
            height: 600px;
            margin : 0 auto;
    }
    #boardHeader{
   	 text-align : center;
    }
    textarea{
    		font-size : 15px;
            width: 500px;
            height: 400px;
            border: 1px solid green;
            border-radius : 10px;
            resize: none;
            padding : 10px;
    }
    #title{
    		font-size : 15px;
            width: 500px;
            border: 1px solid green;
            border-radius : 10px;
            padding : 10px;
    }
    #btn{text-align : right;}
    button{
    	margin : 3px;
    	background-color : white;
    	border : 1px solid green;
    }

</style>
</head>
<body>
<%@ include file = "HeaderAndNav.jsp" %>
	
<% 	
	int num = Integer.parseInt(request.getParameter("num"));
	BoardDao dao = new BoardDao(application);
	BoardDto dto = dao.selectNum(num);
	request.setAttribute("dto", dto);
	
	String pageNum = request.getParameter("pageNum");
	pageNum = pageNum==null ? "1":pageNum;
	
	request.setAttribute("pageNum", pageNum);
%>

<section>
	<form action="./edit" onsubmit="return formCheck(this);" method="post">
		<input type="hidden" name = "num" value="${dto.num}">
		<input type="hidden" name = "pageNum" value="${pageNum }">
     <h1 id="boardHeader">글 쓰기</h1>
     <h3>제목</h3>
     <input type="text" id="title" name="title" value="${dto.title }">
     <h3>내용</h3><textarea name="content">${dto.content }</textarea>
     <div id=btn><button>수정</button><button type="button" onclick="location.href='view?num=${param.num}&pageNum=${pageNum}'">취소</button><button type="button" onclick="location.href='list?pageNum=${pageNum}'">목록보기</button></div>
     </form>
</section>
	<script>
		function formCheck(form){
			console.log(form.title.value);
			if(form.title.value.trim()==""){
				alert("제목을 입력하세요.");
				form.title.focus();
				return false;
			}
			if(form.content.value.trim()==""){
				alert("내용을 입력하세요.");
				form.content.focuse();
				return false;
			}
			return true;
		}
		
	</script>
</body>
</html>
  • viewController.java
package 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 javax.servlet.http.HttpSession;

import dao.BoardDao;
import dao.LikeDao;
import dto.BoardDto;
import util.JSFunction;
@WebServlet ("/view")
public class viewController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		HttpSession session = req.getSession();
		if(session.getAttribute("id")==null) {
			JSFunction.alertLocation("로그인 후 이용해주세요.", "login", resp);
			return;
		}
		
		//게시물 번호
		String snum = req.getParameter("num");
		int num = Integer.parseInt(snum);
		
		//id값
		String id = session.getAttribute("id")+"";
		
		//좋아요 유무
		LikeDao ldao = new LikeDao(req.getServletContext());
		int like = ldao.selectLike(id, num+"");
		
		req.setAttribute("like", like);
		
		//페이지 번호
		String pageNum = req.getParameter("pageNum");
		pageNum= pageNum==null || "".equals(pageNum)||"null".equals(pageNum)? "1" :pageNum;
		req.setAttribute("pageNum", pageNum);
		
		
		BoardDao dao = new BoardDao(req.getServletContext());
		int res = dao.updateViewCnt(num);
		if(res==1) {
			BoardDto dto = dao.selectNum(num);
			req.setAttribute("dto", dto);
		}else {
			JSFunction.alertLocation("잠시 후 다시 시도해주세요.", "main", resp);
		}
		dao.close();
		req.getRequestDispatcher("BoardView.jsp").forward(req, resp);
		
	}
	
}
  • BoardView.jsp
<%@page import="util.JSFunction"%>
<%@page import="dto.BoardDto"%>
<%@page import="dao.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<style>
*{box-sizing: border-box;
margin : 0;
}
form {
    width : 700px;
    height: 600px;
    margin : 0 auto;
            
    }
#container{
	border : 1px solid grey;
    padding : 10px;
}
button{
    margin : 3px;
    background-color : white;
    border : 1px solid green;
    }
h2{text-align : center;
	margin : 20px;
}
#viewInfo{
	font-size : 12px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<link rel="stylesheet" href="css/HeaderAndNav.css">
<body>
<%@ include file = "HeaderAndNav.jsp" %>

<h2>상세보기(View)</h2>

<form action="./edit">
	<div id="container">
		<input type="hidden" name = "num" value="${dto.num }">
		<input type="hidden" name = "pageNum" value="${pageNum }">
		<div id="like">
			<c:choose>
				<c:when test="${like ==1}"><button type="button" name = "likeBtn" value="unlike">💚</button>
				</c:when>
				<c:otherwise><button type="button" name = "likeBtn" value="like">🤍</button>
				</c:otherwise>
			</c:choose>
		</div>
		<div><h3>${dto.title }</h3></div>
		<div id="viewInfo">
			<span>작성자 : ${dto.name } </span>
			<span> / 작성일 : ${dto.postDate } </span>
			<span> / 조회수 : ${dto.viewCnt } </span>
			<span id="cmt"> / 댓글 수 : ${dto.commentCnt }</span>
			<span id="likeNum"> / 좋아요 수 : ${dto.likeCnt }</span>
		</div>
		
		<br>
		<div><h4>내용</h4>${dto.content }</div>
	</div>
	<c:if test="${dto.id eq sessionScope.id}">
		<button>수정</button> <button type="button" onclick="deleteBoard()">삭제</button>
	</c:if>
		<button type="button" onclick="location.href='list?pageNum=${pageNum }'">목록</button>

</form>
<script>
	bno = "${param.bno}";
		
	function deleteBoard(){
		let check = confirm("정말로 삭제하시겠습니까?");
		if(check){
			location.href="delete?num=${dto.num }";
		}
	}
	
	$(document).ready(function(){
		let bno= "${param.num}";
	    $("#like>button").click(function(){
			let mode =$("#like>button").val();
			console.log(mode);
			let btn = $(this);
	        $.ajax({
	        	type:'post',       // 요청 메서드 (post 방식)
	            url: './like?',  // 요청 URI 
	            /* type:'get',       // 요청 메서드 (get 방식)
	            url: './like?mode='+mode+'&num='+bno,  // 요청 URI */	
	            data : { mode:mode , num:bno } ,// 전달 데이터
	            success : function(result){ // 요청이 성공일 때 실행되는 이벤트
	            	console.log(result.res);
	            	console.log("mode : " + result.mode);
	            	if(result.mode == "unlike"){
	            		btn.val("unlike");
	            		btn.text("💚");
	            	}else{
	            		btn.val("like");
	            		btn.text("🤍");
	            	}
	            	$("#likeNum").text(" /  좋아요 수 : "+result.res) 
	            },
	            error: function(request, status, error){ alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error) } // 에러가 발생했을 때, 호출될 함수
	        }); // $.ajax()
    	});
	})
</script>
<%@include file = "Comment.jsp" %>
</body>
</html>
  • deleteController.java (로그아웃과 마찬가지로 별도의 삭제페이지는 필요하지 않기 때문에 jsp는 없음)
package 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 dao.BoardDao;
import util.JSFunction;
@WebServlet ("/delete")
public class deleteController extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String tmp = req.getParameter("num");
		int num = Integer.parseInt(tmp);
		BoardDao dao = new BoardDao(req.getServletContext());
		
		String id = req.getSession().getAttribute("id")+"";
		int res = dao.delete(num, id);
		
		if(res==1) {
			JSFunction.alertLocation("정상적으로 삭제되었습니다.", "list", resp);
		}
		else {
			JSFunction.alertBack("잠시 후 다시 시도해주세요.", resp);
		}
	
	}
	
}

위와 같이 controller를 사용함으로써 process.jsp로 연결되었던 경로는 모두 /main, /login, /register, /post 등과 같은 요청으로 수정되어 주소창에 jsp 파일명 노출없이 각 페이지가 연결되었으며 jsp 파일내에 삽입되었던 java 코드는 controller 내에 작성되어 jsp에는 html 코드만 남게되었다.

한결 깔끔해진 jsp 코드들!

profile
꿈꾸는하늘
이전 포스트

MVC 패턴, SERVLET 개념

다음 포스트

EL문, JSTL 사용

0개의 댓글