(22.11.25)Web 프로그래밍: JSP 개발방법론 Model1으로 만든 게시판을 JSP 개발방법론 Model2로 변환하기

 

JSP 개발방법론 Model1으로 만든 게시판을 JSP 개발방법론 Model2로 변환하기

개발방법론 Model2는 Model1과 다르게 서블릿을 가지고 있다. 근데 이때 이 서블릿에서 로직을 처리해주는 게 아니라 요청을 브라우저에서 처음 받아 그 요청을 자바 서비스 혹은 컨트롤러 레이어로 보내준다. 그리고 JSP도 뷰만 역할을 해주는 JSP만을 쓰게 되고 로직이 있던 JSP는 모두 서비스 클래스에 로직으로 넣는다.

( JSP 개발방법론 Model1으로 만든 게시판은 (22.11.23)게시글 참고)

 

M : Board.java

V : boardAddForm.jsp,  boardList.jsp,  boardEdit.jsp,  boardRead.jsp

C : BoardServlet.java

 

 

 

BoardService.java

import java.io.*;
import java.util.*;
import javax.servlet.http.*;
import org.json.simple.JSONObject;
import com.ezen.web.hello.Board;
 
public class BoardService 
{
    private HttpServletRequest request;
    private HttpServletResponse response;
    private HttpSession session;
    
    private String viewPath = "/WEB-INF/jsp/model2";
    private String fpath = "D:/test/boardList.ser";
    
    public BoardService(){}
    
    public BoardService(HttpServletRequest request,
            HttpServletResponse response)
    {
        this.request = request;
        this.response = response;
        this.session = request.getSession();
    }
    
    public String exec()
    {
        String cmd = request.getParameter("cmd");
        if(cmd==null || cmd.equals("list"))
        {
            List<Board> list = getList();
            request.setAttribute("list", list);
            return viewPath+"/boardList.jsp";
        }
        else if(cmd.equals("addform"))
        {
            return viewPath+"/boardAddForm.jsp";
        }
        else if(cmd.equals("add"))
        {
            Board board = createBoardFromParam();
            boolean added = add(board);
            
            Map<String, Object> map = new HashMap<>();
            map.put("added", added);
            sendJSONStr(map);
        }
        else if(cmd.equals("read"))
        {
            Board board = createBoardFromParam();
            board = read(board);
            request.setAttribute("board", board);
 
            String uid = (String)session.getAttribute("uid");
            String author = board.getAuthor();
            boolean owned = uid.equals(author);
            request.setAttribute("owned", owned);
            return viewPath+"/boardRead.jsp";
        }
        else if(cmd.equals("edit"))
        {
            Board board = createBoardFromParam();
            board = find(board);
            request.setAttribute("b", board);
            return viewPath+"/boardEdit.jsp";
        }
        else if(cmd.equals("update"))
        {
            Board board = createBoardFromParam();
            boolean updated = update(board);
            Map<String, Object> map = new HashMap<>();
            map.put("updated", updated);
            sendJSONStr(map);
        }
        else if(cmd.equals("delete"))
        {
            Board board = createBoardFromParam();
            boolean deleted = delete(board);
            Map<String, Object> map = new HashMap<>();
            map.put("deleted", deleted);
            sendJSONStr(map);
        }
        else if(cmd.equals("find"))
        {
            Board board = createBoardFromParam();
            board = find(board);
            request.setAttribute("board", board);
            return viewPath+"/boardRead.jsp";
        }
 
        return null;
    }
    
    private Board createBoardFromParam()
    {
        String sNum = request.getParameter("num");
        String title = request.getParameter("title");
        String contents = request.getParameter("contents");
        
        Board board = new Board();
        if(sNum!=null) board.setNum( Integer.valueOf(sNum));
        board.setTitle(title);
        board.setContents(contents);
        
        return board;
    }
    
    private void sendJSONStr(Map<String, Object> map)
    {
        JSONObject jsObj = new JSONObject(map);
        String jsStr = jsObj.toJSONString();
        try {
            PrintWriter out = response.getWriter();
            out.print(jsStr);
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    public boolean add(Board board)
    {
        List<Board> list = deserialize();
        int num = 1;
        if(list.size()>0) {  
            Board last = list.get(list.size()-1);  
            num = last.getNum() + 1;
        }
        board.setNum(num);
        board.setAuthor((String) session.getAttribute("uid"));
        
        java.util.Date today = new java.util.Date();
        java.sql.Date sqlDate = new java.sql.Date(today.getTime());
        board.setRegDate(sqlDate);
        
        boolean added = list.add(board);
        return added && serialize(list);
    }
    
    public List<Board> getList()
    {
        return deserialize();
    }
    
    public Board find(Board key)
    {
        List<Board> list = deserialize();
        if(list.contains(key)) {
            return list.get(list.indexOf(key));
        }
        return null;
    }
    
    public Board read(Board key)
    {
        String cmd = request.getParameter("cmd");
        Board found = find(key);
        
        if(cmd.equals("find")) {
            return found;
        }
        found.setHit(found.getHit()+1);
        List<Board> list = deserialize();
        list.get(list.indexOf(found)).setHit(found.getHit());
        serialize(list);
        return found;
    }
    
    public boolean update(Board key)
    {
        List<Board> list = deserialize();
        if(list.contains(key)) {
            Board found = list.get(list.indexOf(key));
            found.setTitle(key.getTitle());
            found.setContents(key.getContents());
            return serialize(list);
        }
        return false;
    }
    
    public boolean delete(Board key)
    {
        List<Board> list = deserialize();
        if(list.contains(key)) {
            boolean deleted = list.remove(key);
            return deleted && serialize(list);
        }
        return false;
    }
    
    private boolean serialize(List<Board> list)
    {
        File f = new File(fpath);
        try {
            ObjectOutputStream oout = new ObjectOutputStream(new FileOutputStream(f));
            oout.writeObject(list);
            oout.close();
            return true;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return false;
    }
    
    private List<Board> deserialize()
    {
        File f = new File(fpath);
        List<Board> list = null;
        if(!f.exists()) {
            list = new ArrayList<Board>();
        }else {
            try {
                ObjectInputStream oin = new ObjectInputStream(new FileInputStream(f));
                list = (List<Board>)oin.readObject();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        
        return list;
    }
    
    public HttpServletRequest getRequest() {
        return request;
    }
    public void setRequest(HttpServletRequest request) {
        this.request = request;
    }
    public HttpSession getSession() {
        return session;
    }
    public void setSession(HttpSession session) {
        this.session = session;
    }
}

26~92행 : 컨트롤러에 해당하는 로직으로 서블릿에 코딩하지 않고 서비스 클래스에 코딩하여 서블릿의 역할을 단순화 하였다.

94~106 행 : 요청에서 넘어오는 num, title,contents를 board 객체에 담고 그 board 객체를 리턴해준다. 참조 변수는 null로서 저장이 가능하지만 Integer.valueOf(sNum)는 기본 변수인 int 변수가 나오고 int 변수는 null값을 저장 못하기에 if문을 써서 표현한다.

108~119 행 : sendJSONStr() 메소드는 기존에 있던 로직을 담당하던 JSP의 로직을 옮겨 두었다. 자주 쓰이는 로직이기 때문에 따로 메소드로 빼놨다. 여기서 나온 json문자열은 VIEW를 담당하는 JSP의 함수에서 success의 function의 응답으로 들어 가게 된다.

 

boardAddForm.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>게시글 추가 폼</title>
<style type="text/css">
    main { width:fit-content; margin:1em auto;}
    h3 { text-align: center;}
    div.btn { width:fit-content; margin:0.5em auto; }
    form { border:1px solid black; padding:1em; width:fit-content;}
    form>div {margin:1em;}
    label {display:inline-block; width:3em; padding-right:1em; text-align:right;}
    div.contents { position: relative; }
    label[for=contents] {position:relative; top:-2em;}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
function addBoard()
{
    var obj = $('#addForm').serialize();
    $.ajax({
        url : 'board',
        method: 'post',
        data: obj,
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.added ? '추가 성공' : '추가 실패');
            location.href="board?cmd=list";
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
    return false;
}
</script>
</head>
<body>
<main>
<h3>게시글 입력</h3>
<form id="addForm" action="board" method="post" onsubmit="return addBoard();">
    <input type="hidden" name="cmd" value="add">
    <div>
        <label for="title">제목</label> 
        <input id="title" type="text" name="title" value="게시판 테스트">
    </div>
    <div class="contents">
        <label for="contents">내용</label>
        <textarea id="contents" name="contents" rows="5" cols="50"></textarea>
    </div>
    <div class="btn">
        <button type="reset">취소</button>
        <button type="submit">저장</button>
    </div>
</form>
</main>
</body>
</html>

 

 

boardList.jsp

<%@page import="com.ezen.web.hello.*"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>게시글 목록</title>
<style type="text/css">
    main { width:fit-content; margin:1em auto; }
    main h3{ text-align: center; }
    table { border:1px solid black; border-spacing:0; border-collapse: collapse; 
        padding:0.5em;
    } 
    td,th { border-bottom:1px dashed black; padding:0.3em 1em; 
        border-right: 1px solid black;
    }
    th { background-color:rgb(210,210, 255);}
    a {text-decoration: none;}
    div.links { width:fit-content; margin:1em auto; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
</head>
<body>
<main>
<%@ include file="/WEB-INF/jsp/user_inc.jsp" %>
<h3>게시글 목록</h3>
<table>
<tr><th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>히트수</th></tr>
<c:forEach var="b" items="${list}">
    <tr>
        <td>${b.num}</td>
        <td>
            <a href="board?cmd=read&num=${b.num}">
                ${b.title}</a>
        </td>
        <td>${b.author}</td>
        <td>${b.regDate}</td>
        <td>${b.hit}</td>
    </tr>
</c:forEach>
</table>
<div class="links">
    [<a href="board?cmd=addform">글쓰기</a>]
</div>
</main>
</body>
</html>

 

 

boardRead.jsp

<%@page import="com.ezen.web.hello.Board"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>게시글 읽기</title>
<style type="text/css">
    main{width:fit-content; margin:1em auto; }
    main h3{text-align: center;}
    label { display:inline-block; padding:0.2em 1em; border-bottom:1px solid black;
        text-align: right; width:3em; margin-right:1em; background-color:rgb(200,255,255);
    }
    .container {width:fit-content; padding:1em; border:1px solid black;}
    a { text-decoration: none;}
    .links{margin:1em auto; width:fit-content; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
$(function(){
    var owned = ${owned};
    if(!owned){
        //$('#owner_only').css('visibility', 'hidden');
        $('#owner_only').css('display', 'none');
    }
});
</script>
<script type="text/javascript">
function deleteBoard(num)
{
    if(!confirm('정말로 현재 글을 삭제하시겠어요?')) return;
    $.ajax({
        url:'board',
        method:'post',
        cache:false,
        data:{"cmd":"delete", "num":num},
        dataType:'json',
        success:function(res){
            alert(res.deleted ? '삭제 성공':'삭제 실패');
            location.href='board?cmd=list';
        },
        error : function(xhr, status, err){
            alert('에러:' + err);
        }
    });
}
</script>
</head>
<body>
<main>
<h3>게시글 읽기</h3>
<div class="container">
<div><label>글번호</label>${board.num}</div>
<div><label>제목</label>${board.title}</div>
<div><label>작성자</label>${board.author}</div>
<div><label>작성일</label>${board.regDate}</div>
<div><label>히트수</label>${board.hit}</div>
<div><label>내용</label>${board.contents}</div>
</div>
<div class="links">
    <span id="owner_only">
    [<a href="board?cmd=edit&num=${board.num}">수정</a>]
    [<a href="javascript:deleteBoard(${board.num});">삭제</a>]
    </span>
    [<a href="board?cmd=list">목록</a>]
</div>
</main>
</body>
</html>

 

 

boardEdit.jsp

<%@ page import="com.ezen.web.hello.Board"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>게시글 수정 폼</title>
<style type="text/css">
    main { width:fit-content; margin:1em auto;}
    main h3{text-align: center;}
    table { border:1px solid black; padding:1em; border-spacing: 0; border-collapse: collapse;
        width:630px;
    }
    th { background-color:rgb(200,255,255); border-right:1px solid black;}
    th, td {border-bottom:1px solid black; padding:0.4em;}
    td#title { width:400px; }
    input {width:400px;}
    textarea {width:520px; height:100px;}
    div.btn { margin:1em auto; width:fit-content;}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
function updateBoard()
{
    var obj = $('#editForm').serialize();
 
    if(!confirm('현재의 내용으로 수정하시겠어요?')) return;
    $.ajax({
        url : 'board',
        method:'post',
        cache:false,
        data:obj,
        dataType:'json',
        success:function(res){
            alert(res.updated ? '수정성공':'수정실패');
            if(res.updated)
                location.href='board?cmd=find&num=${b.num}';
        },
        error:function(xhr,status,err){
            alert('에러:' + err);
        }
    });
    return false;
}
 
function deleteBoard(num)
{
    if(!confirm('현재 내용을 삭제하시겠어요?')) return;
    $.ajax({
        url : 'board',
        method:'post',
        cache:false,
        data:{"cmd":"delete", "num":num },
        dataType:'json',
        success:function(res){
            alert(res.deleted ? '삭제성공':'삭제실패');
            if(res.deleted)
                location.href='board';
        },
        error:function(xhr,status,err){
            alert('에러:' + err);
        }
    });    
}
</script>
</head>
<body>
<main>
<h3>게시글 수정</h3>
<div class="container">
<form id="editForm" onsubmit="return updateBoard();">
    <input type="hidden" name="cmd" value="update">
    <input type="hidden" name="num" value="${b.num}">
<table>
<tr><th>글번호</th><td id="num">${b.num}</td><th>제목</th><td id="title" colspan="3">
    <input type="text" id="title" name="title" value="${b.title}">
</td></tr>
<tr><th>작성자</th><td>${b.author}</td><th>작성일</th><td>${b.regDate}</td><th>Hit</th><td>${b.hit}</td></tr>
<tr><th>내용</th><td colspan="5">
    <textarea id="contents" name="contents">${b.contents}</textarea>
</td></tr>
</table>
<div class="btn">
    <button type="reset">취소</button>
    <button type="submit">수정</button>
    <button type="button" onclick="deleteBoard(${b.num});">삭제</button>
</div>
</form>
</div>
</main>
</body>
</html>

 

JSP에 있는 스크립트 릿을 써서 표현한 자바 코드들도 JSTL과 EL을 써서 간단하게 표현하였다.

 

BoardServlet.java

import java.io.*;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
 
@WebServlet("/board")
public class BoardServlet extends HttpServlet 
{
    protected void service(HttpServletRequest request, HttpServletResponse response) 
                            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
 
        HttpSession session = request.getSession();
        String uid = (String)session.getAttribute("uid");
        if(uid==null) {
            session.setAttribute("url", request.getRequestURL().toString());
            try {
                response.sendRedirect("login/userController.jsp?cmd=loginform");
            } catch (IOException e) {
                e.printStackTrace();
            }
            return;
        }
        
        String viewPath = new BoardService(request, response).exec();
 
        if(viewPath!=null) {
            getServletContext().getRequestDispatcher(viewPath).forward(request, response);
        }
    }
}