본문 바로가기
✨ Back-end/Servlet

[Servlet / JSP] 게시판 만들기 -2 (글 수정U, 글 삭제D) CRUD

by 환풍 2023. 2. 18.
728x90
반응형

앞에선 글 등록(C) 글 쓰기(R)를 만들어보았다. 이번을 끝으로 CRUD 모두 거쳐 게시판을 만들고자한다.

 

먼저, 상세보기 페이지를 하나 만들어야한다. 

 

boardDetail.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ page language="java" 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>Insert title here</title>
</head>
<body>
 
글번호 : ${board.boardNum }<br>
제목 : ${board.title } <br>
내용 : ${board.content }<br>
작성자 : ${board.writer }<br>
작성일 : ${board.createDate }<br>
 
<input type="button" value="삭제하기" onclick="location.href='delete.do?boardNum=${board.boardNum }';">
<!-- 어떤걸 삭제할건지 보드 번호를 가져가야해서 ?뒤에 문장이나옴. -->
<input type="button" value="수정" onclick="location.href='updateBoardForm.do?boardNum=${board.boardNum }';">
<!-- 상세보기 페이지로 넘어갈때도 글번호 데이터를 넘겨서 가져가야해서 ?뒤에 문장을쓴다. -->
</body>
</html>
cs

글 상세보기를 하기 위해서 나는 글 제목인 title을 눌리면 갈 수 있게 a태그를 주어 생성했다.

삭제하기와 수정하기 버튼을 만들었다.

 

boardList.jsp  (앞에 있던 jsp에서 수정함)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ page language="java" 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>Insert title here</title>
<style type="text/css">
table{
   border: 1px solid black;
   border-collapse: collapse;
   text-align: center;
   width: 600px;
}
tr, td{
   border: 1px solid black;
}
</style>
</head>
<body>
<form action="regBoardForm.do" method="post">
<table>
   <colgroup>
      <col width="10%">
      <col width="*">
      <col width="15%">
      <col width="15%">
   </colgroup>
   <tr>
      <td>글번호</td>
      <td>제 목</td>
      <td>작성자</td>
      <td>날짜</td>
      <td>내용</td>
   </tr>
   
   <c:forEach items="${list }" var="board">
      <tr>
          <td>${board.boardNum }</td>
          <td><a href="boardDetail.do?boardNum=${board.boardNum }">${board.title }</a></td>
          <td>${board.writer }</td>
          <td>${board.createDate }</td>
          <td>${board.content }</td>
      </tr>
      </c:forEach>
   
</table>
<input type="submit" value="글쓰기">
</form>
 
 
</body>
</html>
cs

먼저, 썻던 제목 타이틀을 누르면 상세보기 화면으로 가는 것을 알아보자.

boardList.jsp에서 42번째 줄인 a태그를 이용해 서블릿 boardDetail.do 로 이동한다.

 

BoardController (서블릿)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
package controller;
 
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.RequestDispatcher;
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 dto.BoardDTO;
 
 
@WebServlet("*.do")
public class BoardController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    private int boardNum= 1;
    private List<BoardDTO> boardlist;
       
   
    public BoardController() {
        super();
        boardlist = new ArrayList<>();
        // 글 등록 해줄 데이터 공간을 생성해준다.
        
    }
 
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doProcess(request, response);
    }
 
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doProcess(request, response);
    }
    
    protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");
 
 
        String requestURI = request.getRequestURI();
        String contextPath = request.getContextPath();
        String command = requestURI.substring(contextPath.length());
        System.out.println("command = " + command);
        
        String page = "";
        
        
        
        if(command.equals("/boardList.do"))
        {
            
            request.setAttribute("list", boardlist);
            
            page = "boardList.jsp";
        }
        
        
        if(command.equals("/regBoardForm.do"))
        {
            page = "board_write_form.jsp";
        }
        
        if(command.equals("/regBoard.do"))
        {
            String title = request.getParameter("title");
            String writer = request.getParameter("writer");
            String createDate = request.getParameter("createDate");
            String content = request.getParameter("content");
            
            BoardDTO board = new BoardDTO(boardNum, title, content, writer, createDate);
            
            boardNum++;
            
            boardlist.add(board);
            
            page = "boardList.do";
            // boardList로 돌아가서 
            // 데이터를 적재할 request.setAtrribute("list", boardlist)를 추가해줘야한다.
            
        }
        
        if(command.equals("/boardDetail.do"))
        {
            int num= Integer.parseInt(request.getParameter("boardNum"));
            
            for(BoardDTO board: boardlist) {
                if(board.getBoardNum() == num) {
                    request.setAttribute("board", board );
                }
            }
            page = "boardDetail.jsp";
        }
        
        
        if(command.equals("/delete.do"))
        {
            int num = Integer.parseInt(request.getParameter("boardNum")); 
            for(int i =0; i<boardlist.size(); i++)
            {
                if(boardlist.get(i).getBoardNum() == num)
                {
                    boardlist.remove(i);
                }
            }
        }
        
        if(command.equals("/updateBoardForm.do"))
        {
            int num = Integer.parseInt(request.getParameter("boardNum"));
 
            for (BoardDTO board : boardlist) {
                if (board.getBoardNum() == num) {
                    request.setAttribute("board", board);
                }
            }
            // 수정하고자 하는 게시글의 정보를 jsp에 보내줘야함.
            page = "update_board_form.jsp";
            
        }
        
        if(command.equals("/updateBoard.do"))
        {
            String title = request.getParameter("title");
            String writer = request.getParameter("writer");
            String createDate = request.getParameter("createDate");
            String content = request.getParameter("content");
            int num = Integer.parseInt(request.getParameter("boardNum"));
            
            for(BoardDTO board : boardlist) {
                if(board.getBoardNum()==num)
                {
                    board.setTitle(title);
                    board.setWriter(writer);
                    board.setContent(content);
                    board.setCreateDate(createDate);
                }
            }
            
            page="boarList.do";
        }
        
        
        RequestDispatcher dispatcher = request.getRequestDispatcher(page);
        dispatcher.forward(request, response);
        
    }
 
}
 
cs

if(command.equals("/boardDetail.do")) 에 받아온 boardNum값이 BoardDTO에 저장된 boardlist 값과 같으면 BoardDTO에 저장된 데이터 리스트를 boardDetail.jsp에 보내라고 명령하였다.

 

이후 BoardControll 서블릿으로 돌아와 삭제하기와 수정 버튼을 눌리면 해당 기능을 하게끔 서블릿에서 

if(command.equals("/delete.do")) 와  if(command.equals("/updateBoardForm.do")) 커맨드를 추가했다.

이후 삭제하기 버튼을 누르면 /delete.do 로 가야하는데, 조금 다른 방식으로 주소를 줘보았다.

<input type="button" value="삭제하기" onclick="location.href='delete.do?boardNum=${board.boardNum }';">

delete.do 뒤에있는 ? 다음 코드 boardNum과 ${board.boardNum}은 현재 boardNum의 값과 받아온 ${board.boardNum}의 값이 같은것을 말한다. 두 비교된 값이 같으면 이 값들만 변경된다.

서블릿의 103번째부터 113번째 줄에서 입력한 코드와 같이, 뽑아온 boardNum 값이 리스트에 저장된 BoardNum값과 같으면 삭제하라고 명령하였다.

 

다음은 글 수정하기를 해보려고한다. 먼저 수정 폼을 만들어야해서 나는 jsp파일에 update_board_form를 생성했다.

update_board_form.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ 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>
</head>
<body>
<form action="updateBoard.do" method="post">
<input type="hidden" name="boardNum" value="${board.boardNum }">
<table>
    <tr>
        <td>제목</td>
        <td><input type="text" name="title" value="${board.title }"></td>
    </tr>
    <tr>
        <td>작성자</td>
        <td><input type="text" name="writer" value="${board.writer }"></td>
    </tr>
    <tr>
        <td>작성일</td>
        <!-- read온리는 수정은 안되지만, 데이터가 넘어간다. -->
        <td><input type="text" name="createDate" value="${board.createDate }" readonly></td>
    </tr>
    <tr>
        <td>내용</td> <!--textarea는 value가 없다. 여는태그, 닫는태그 사이에 넣어준다.  -->
        <td><textarea rows="5" cols="50">${board.content }</textarea></td>
    </tr>
</table>
<input type="submit" value="글수정">
</form>
</body>
</html>
cs

 

글수정 버튼을 만들어 클릭시 <form action="updateBoard.do" method="post"> updateBoard 서블릿으로 가게 만들어주었다.

여기서 수정하려는 name을 getParamerter로 입력받아와 서블릿에 저장해주었다.

이후 hidden으로 숨긴 BoardNum 값이 num과 같다면 세터(set)을 이용해 board에 저장되어있는 값을 변경해주었다.

이후 다시 boarList.do 페이지로 이동하게 코드를 작성하면 끝이다.

 

728x90
반응형
저작자표시 비영리 변경금지

'✨ Back-end > Servlet' 카테고리의 다른 글

[Servlet / JSP / SQL] 회원 관리 폼 만들기 (1) - CREATE (DB 테이블 생성)  (0) 2023.02.22
[Servlet / JSP] 게시판 만들기 등록, 쓰기, 수정, 삭제 CRUD (최종)  (0) 2023.02.18
[Servlet / JSP] 게시판 만들기 -1 (글 쓰기R, 글 등록C) CRUD  (0) 2023.02.18
[Servlet] Servlet 하나로 여러 JSP 데이터 주고 받기  (0) 2023.02.18
[Servlet] JSP, Servlet, Class 사용하여 이름, 나이, 성적 간단히 출력  (0) 2023.02.14

관련글

댓글

티스토리툴바