JAVA 풀스택 43일차 - Server(JSP CRUD / MVC)

JSP 게시판 CRUD 기능 구현

1. JSP 게시판 전체 흐름

mylist.jsp
 ├─ 상세 조회 → selectone.jsp
 ├─ 글쓰기 → myinsert.jsp → myinsert_res.jsp
 ├─ 수정 → myupdate.jsp → myupdate_res.jsp
 └─ 삭제 → mydelete.jsp

 

JSP 파일	역할
mylist.jsp	게시글 목록 출력, 상세/글쓰기 페이지로 이동
selectone.jsp	게시글 번호를 받아 상세 내용 출력
myinsert.jsp	글쓰기 입력 form 화면
myinsert_res.jsp	입력값을 받아 DB에 게시글 등록
myupdate.jsp	기존 게시글 내용을 수정 form에 출력
myupdate_res.jsp	수정된 값을 받아 DB UPDATE 실행
mydelete.jsp	게시글 번호를 받아 DB DELETE 실행

2. 상세 조회 기능

2-1 mylist.jsp에서 상세페이지로 이동

<a href="./selectone.jsp?myno=<%= list.get(i).getMyno() %>">
    <%= list.get(i).getMytitle() %>
</a>

<%= %>을 이용하여 HTML안에서 Java 코드를 구현 및 JSP라는 것을 알 수 있다.

3. URL 파라미터 전달

URL 파라미터는 URL 뒤에 값을 붙여서 다른 페이지로 전달하는 방식

페이지주소?이름=값

selectone.jsp?myno=5

 

- selectone.jsp로 이동하면서 myno라는 이름으로 5를 전달

부분	의미
selectone.jsp	이동할 JSP 페이지
?	파라미터 시작
myno	전달할 값의 이름
5	전달할 실제 값

4. 전달된 파라미터 받기

다른 JSP에서 전달한 값은 request.getParameter()로 받는다

<%
    int myno = Integer.parseInt(request.getParameter("myno"));
%>

4-1 request.getParameter()

request.getParameter("myno")

myno라는 이름으로 전달된 값을 가져온다.

만약 주소가

selectone.jsp?myno=5

라면 request.getParameter("myno")의 결과는 5로 전달된다.

4-2 Integet.parseInt()

request.getParameter()로 받은 값은 문자열이다.

하지만 게시글 번호는 숫자로 사용해야함으로 문자열을 int로 변환해야 한다.

int myno = Integer.parseInt(request.getParameter("myno"));

5. selectone.jsp와 selectOne()

selectone.jsp에서는 전달받은 myno를 이용해 DAO의 selectOne()을 실행

<%
    int myno = Integer.parseInt(request.getParameter("myno"));

    MyBoardDao dao = new MyBoardDao();
    MyBoardDto dto = dao.selectOne(myno);
%>

흐름

1. URL로 전달된 myno 값 받기
2. 문자열을 숫자로 변환
3. DAO 객체 생성
4. dao.selectOne(myno) 실행
5. 조회 결과를 DTO에 저장
6. DTO 값을 JSP 화면에 출력

6. 글쓰기 기능

6-1 myinsert.jsp

myinsert.jsp는 게시글을 작성하는 입력 화면이다

<form action="myinsert_res.jsp" method="post">
    <input type="text" name="myname">
    <input type="text" name="mytitle">
    <textarea rows="10" cols="60" name="mycontent"></textarea>

    <input type="submit" value="입력">
    <input type="button" value="취소" onclick="history.back();">
</form>

- J SP 페이지에서 사용자 입력 화면을 만들고, 입력값을 다른 JSP로 전송한다.

6-2 form 태그

<form action="myinsert_res.jsp" method="post">

 

속성	의미
action	입력값을 처리할 JSP 페이지
method	값을 보내는 방식

7. 게시글 등록 기능

7-1 myinsert_res.jsp

글쓰기 form에서 전달된 값을 받아 DB에 저장하는 처리용 JSP이다.

form 값 받기
↓
DTO 객체 생성
↓
DAO insert 실행
↓
결과에 따라 alert 출력
↓
목록으로 이동

7-2 JSP에서 form 값 받기

myinsert.jsp에서 보낸 값을 request.getParameter()로 받는다.

<%
    String name = request.getParameter("myname");
    String title = request.getParameter("mytitle");
    String content = request.getParameter("mycontent");
%>

7-3 JSP에서 DTO 생성

form에서 받은 값을 DTO 객체에 담는다

<%
    MyBoardDto dto = new MyBoardDto(0, name, title, content, null);
%>

 

값	의미
0	게시글 번호는 DB 시퀀스가 자동 생성
null	작성일은 DB에서 SYSDATE로 자동 저장

7-4 DAO insert 실행

JSP에서 DAO 객체를 만들고 insert()를 실행한다.

<%
    MyBoardDao dao = new MyBoardDao();
    int res = dao.insert(dto);
%>

- executeUpdate() 실행 결과가 res에 저장되고, res > 0이면 등록 성공

String sql =
" INSERT INTO MYBOARD VALUES(SEQ_MYBOARD.NEXTVAL,?,?,?, SYSDATE) ";

7-5 JSP에서 등록 결과 처리

<%
    if(res > 0){
%>
    <script type="text/javascript">
        alert("게시글 등록 성공");
        location.href="mylist.jsp";
    </script>
<%
    } else {
%>
    <script type="text/javascript">
        alert("게시글 등록 실패");
        location.href="mylist.jsp";
    </script>
<%
    }
%>

서버에서 JSP의 if문 실행
↓
성공이면 성공 alert 스크립트 생성
실패이면 실패 alert 스크립트 생성
↓
브라우저에서 JavaScript 실행
↓
알림창 출력 후 페이지 이동

8. 게시글 수정 기능

8-1 myupdate.jsp 역할

수정 form에서 넘어온 값을 받아 DB에 UPDATE를 실행하는 JSP

<%
    int no = Integer.parseInt(request.getParameter("myno"));
    String title = request.getParameter("mytitle");
    String content = request.getParameter("mycontent");
%>

8-2 수정용 DTO 생성

<%
    MyBoardDto dto = new MyBoardDto(no, null, title, content, null);
%>

작성자, 작성일은 그대로 유지하기에 null로 둔다

8-3 DAO update 실행

<%
    int res = new MyBoardDao().update(dto);
%>

String sql = " UPDATE MYBOARD SET MYTITLE=?, MYCONTENT=? WHERE MYNO=? ";

8-4 JSP에서 수정 결과 처리

수정 성공 시

<script type="text/javascript">
    alert("게시글 수정 성공");
    location.href="selectone.jsp?myno=<%=dto.getMyno() %>";
</script>

- 수정된 글의 상세 페이지로 이동

수정 실패 시

<script type="text/javascript">
    alert("게시글 수정 실패");
    location.href="myupdate.jsp?myno=<%=dto.getMyno() %>";
</script>

- 다시 수정 패이자로 이동

9. 게시글 삭제 기능

9-1 mydelete.jsp

게시글 번호를 받아 DB에서 해당 글을 삭제하는 처리용 JSP

<%
    int myno = Integer.parseInt(request.getParameter("myno"));
    int res = new MyBoardDao().delete(myno);
%>

1. URL 파라미터로 myno 받기
2. 숫자로 변환
3. dao.delete(myno) 실행
4. 결과에 따라 JavaScript 출력

9-2 DAO delete 실행

String sql = " DELETE FROM MYBOARD WHERE MYNO=? ";

9-3 JSP에서 삭제 결과 처리

삭제 성공 시

<script type="text/javascript">
    alert("게시글 삭제 성공");
    location.href="mylist.jsp";
</script>

- 목록 페이지로 이동

삭제 실패 시

<script type="text/javascript">
    alert("게시글 삭제 실패");
    location.href="selectone.jsp?myno=<%=myno%>";
</script>

- 다시 상세 페이지로 이동

JSP 게시판 MVC 기능 구현

게시판 목록 조회

1. JSP MVC 구조

구분	파일	역할
View	index.html, boardlist.jsp	사용자가 보는 화면
Controller	mycontroller.jsp	요청을 받아 어떤 기능을 실행할지 판단
Model	MVCBoardDao, MVCBoardDto, DB	데이터 조회와 저장

2. index.html

처음 접속하는 메인 화면

<a href="mycontroller.jsp?command=boardlist">글 목록</a>

- 이 링크를 클릭하면 boardlist.jsp로 바로 가는 것이 아니라, 먼저 mycontroller.jsp로 이동한다

부분	의미
mycontroller.jsp	요청을 받을 Controller JSP
?	파라미터 전달 시작
command	요청 이름
boardlist	게시글 목록 조회 기능

3. command 파라미터

어떤 기능을 실행하지 알려주는 값

mycontroller.jsp?command=boardlist

- boardlist 기능을 실행시키라는 의미

4. mycontroller.jsp

Controller 역할을 하는 JSP

<%
    String command = request.getParameter("command");
%>

request.getParameter("command")는 URL로 전달된 command 값을 가져온다.

5. Controller에서 기능 구분

command 값에 따라 실행할 기능을 결정

<%
    MVCBoardDao dao = new MVCBoardDao();

    if(command.equals("boardlist")){
        List<MVCBoardDto> list = dao.selectAll();

        request.setAttribute("allList", list);

        pageContext.forward("boardlist.jsp");
    }
%>

흐름

1. command 값 확인
2. command가 "boardlist"인지 확인
3. DAO 객체 생성
4. dao.selectAll() 실행
5. DB에서 게시글 목록 조회
6. 조회 결과를 request에 저장
7. boardlist.jsp로 forward

mycontroller.jsp는 게시글을 직접 출력하지 않고, 게시글 목록 데이터를 준비한 뒤 boardlist.jsp에게 넘긴다

6. DAO 목록 조회

public List<MVCBoardDto> selectAll()

 

String sql = " SELECT * FROM MVCBOARD ORDER BY SEQ DESC ";

- MVCBOARD 테이블의 모든 게시글을 조회한다. SEQ 번호가 큰 순서대로 정렬한다

while(rs.next()) {
    MVCBoardDto tmp = new MVCBoardDto();

    tmp.setSeq(rs.getInt(1));
    tmp.setWriter(rs.getString(2));
    tmp.setTitle(rs.getString(3));
    tmp.setContent(rs.getString(4));
    tmp.setRegdate(rs.getDate(5));

    res.add(tmp);
}

- 조회 결과는 MVCBoardDto 객체에 담고, 여러 개의 DTO를 List에 저장

7. MVCBoardDto

게시글 하나의 데이터를 저장하는 객체

private int seq;
private String writer;
private String title;
private String content;
private Date regdate;

8. request.setAttribute()

Controller에서 조회한 게시글 목록은 바로 화면에 출력하지 않고, request 객체에 담아서 View JSP로 전달

request.setAttribute("allList", list);

- list 데이터를 allList라는 이름으로 request에 저장한다.

9. pageContext.forward()

Controller에서 데이터를 request에 담은 뒤, 화면을 출력할 JSP로 이동

pageContext.forward("boardlist.jsp");

- boardlist.jsp로 화면 처리를 넘기는 코드

forward 사용 시 request에 담은 값이 유지된다.

mycontroller.jsp
↓ request에 allList 저장
↓ forward
boardlist.jsp
↓ request에서 allList 꺼내 사용 가능

10. boardlist.jsp

View 역할을 하는 JSP

<%
    List<MVCBoardDto> list =
        (List<MVCBoardDto>)request.getAttribute("allList");
%>

- getAttribute()는 Object 타입으로 값을 반환하기 때문에, 원래 타입인 List<MVCBoardDto>로 형변환

11. 게시글 처리

11-1 게시글이 없을 경우

<%
    if(list.size()==0){
%>
    <tr>
        <td colspan="4">---- 글이 존재하지 않습니다 ----</td>
    </tr>
<%
    }
%>

- list에 게시글이 하나도 없으면 "글이 존재하지 않습니다" 출력

11-2 게시글이 있을 경우

<%
    for(MVCBoardDto dto : list){
%>
    <tr>
        <td><%=dto.getSeq() %></td>
        <td><%=dto.getWriter() %></td>
        <td><%=dto.getTitle() %></td>
        <td><%=dto.getRegdate() %></td>
    </tr>
<%
    }
%>

12. forward / redirect 차이

forward

서버 내부에서 페이지 이동
request 값 유지
주소창 변경 없음

Controller에서 request에 담은 allList를 View에서 그대로 사용할 수 있다.

redirect

브라우저가 새로운 페이지를 다시 요청
request 값 유지 안 됨
주소창 변경됨

redirect는 새로운 요청이기 때문에 기존 request에 담은 값이 사라진다.