Web programming

(22.11.22)Web 프로그래밍: JSP 개발모델1 MVC방식(로그인하여 게시판 작성하기)

프로그래머 오월 2022. 11. 22.

로그인을 하여 로그인 아이디를 작성자로 쓰고 게시판 CRUD 실습
로그인하지 않고 게시판에 들어가려 해도 로그인 먼저 하게 만들기
Controller 역할을 하는 JSP를 만들어서 하게 해주기

●●로그인 Part●●

User.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public class User 
{
    private String uid;
    private String pwd;
    
    public User() {}
    
    public String getUid() {
        return uid;
    }
    public void setUid(String uid) {
        this.uid = uid;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
}
 
Colored by Color Scripter

cs

로그인 파트의 VO클래스로, 즉 모델 클래스로 쓸 데이터들이 구축 되어 있다.

변수들을 전역 변수로 선언하고 getter와 setter 메소드를 만들어 다른 클래스나 jsp에서 값을 가져오거나 정할 수 있게 해준다.

UserService.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import javax.servlet.http.HttpSession;
 
public class UserService 
{
    private HttpSession session;
    
    public UserService() {}
    
    public boolean login(User user)
    {
        if(user.getUid().equals("smith") && user.getPwd().equals("1111"))
        {
            session.setAttribute("uid", user.getUid());
            return true;
        }
        return false;
    }
    public void setSession(HttpSession session) {
        this.session = session;
    }
}
 
Colored by Color Scripter

cs

서비스 클래스로서 로그인 한 아이디와 비밀번호를 대조하여 논리AND를 써서 맞다면 세션객체에 아이디를 저장하여 준다. 이 아이디는 나중에 session.getAttribute를 해서 작성자를 아이디명으로 이용할 것이다.

그리고 로그인 성공이라면 true를 아니라면 false를 리턴해준다.

loginForm.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
56
57
58

<%@ 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;}
    form {border:1px solid black; padding:1em;}
    label {display:inline-block; width:3em; text-align: right; padding-right:1em; }
    div.btn { width:fit-content; margin: 0.5em auto; }
</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 getLogin()
{
    var obj = $('#loginForm').serialize();
    $.ajax({
        url : 'loginController.jsp',
        method:'post',
        data : obj,
        cache:false,
        dataType:'json',
        success:function(res){
            alert(res.login ? '로그인 성공':'로그인 실패');
            if(res.login){
                location.href=res.url;
            }
        },
        error : function(xhr, status, err){
            alert('에러:' + err);
        }
    });
    return false;
}
</script>
</head>
<body>
<main>
<h3>로그인 폼</h3>
<form id="loginForm" onsubmit="return getLogin();">
    <input type="hidden" name="cmd" value="login">
    <div><label for="uid">아이디</label>
        <input type="text" id="uid" name="uid" value="smith">
    </div>
    <div><label for="pwd">암호</label>
        <input type="password" id="pwd" name="pwd" value="1111">
    </div>
    <div class="btn">
        <button type="reset">취소</button>
        <button type="submit">로그인</button>
    </div>
</form>
</main>
</body>
</html>
Colored by Color Scripter

cs

로그인 파트의 뷰를 담당하는 jsp로 아이디와 암호를 입력 받는다. 입력 받은 데이터를 직렬화 하여 ajax 비동기 방식을 사용하여 결과를 받을 수 있다. 데이터는 loginController.jsp 가서 cmd가 login이기 때문에 loginProc.jsp로 간다. 여기서 받은 응답이 참이면 로그인 성공을 거짓이면 로그인 실패를 alert창에 띄운다.

로그인이 성공이면 즉 응답으로 넘어온 login 값이 true면 같이 응답에서 같이 넘어온 url 값으로 넘어갈 수 있게 링크를 걸어준다.

loginController.jsp

1
2
3
4
5
6
7
8
9
10
11

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    String cmd = request.getParameter("cmd");
    if (cmd==null) cmd = "loginform";
    
    if(cmd.equals("loginform")){ %>
        <jsp:forward page="loginForm.jsp"/>
<%    }else if(cmd.equals("login")){ %>
        <jsp:forward page="loginProc.jsp"/>
<%    }
%>
Colored by Color Scripter

cs

로그인 파트의 컨트롤로서 cmd에 따라 데이터를 해당 jsp로 보내준다.

요청에서 파라미터를 받아 cmd가 아무것도 없다면 cmd를 loginform라 해준다.

cmd가 loginform라면 loginForm.jsp의 뷰를 보여주고 cmd가 login이라면 모든 데이터를 loginProc.jsp로 보낸다.

loginProc.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<%@page import="org.json.simple.JSONObject"%>
<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
 
<jsp:useBean id="login_svc" class="com.ezen.web.user.UserService" scope="session"/>
<jsp:setProperty name="login_svc" property="session" value="<%=session%>" />
 
<jsp:useBean id="user" class="com.ezen.web.user.User">
    <jsp:setProperty name="user" property="*" />
</jsp:useBean>
 
<%
    boolean ok = login_svc.login(user);
    JSONObject jsObj = new JSONObject();
    jsObj.put("login", ok);
    jsObj.put("url", (String)session.getAttribute("url"));
    out.print(jsObj.toJSONString());
    out.flush();
%>
Colored by Color Scripter

cs

setProperty를 통해 넘어온 아이디와 비밀번호를 setUid, setPwd해서 user 객체에 담아 login service 클래스로 보낸다. 이곳에서 처린된 값을 boolean 변수로 받고 json 오브젝트에 {login, ok}, {url, 세션객체에 담아져온 url} 를 담아 loginForm.jsp에 json 오브젝트를 응답으로 넘긴다.

●●Board Part●●

Board.java

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

import java.io.Serializable;
 
public class Board implements Serializable, Comparable<Board>
{
    private int num;
    private String title;
    private String author;
    private java.sql.Date regDate;
    private String contents;
    private int hit;
 
    public Board() {}
    
    public Board(int num) {
        this.num = num;
    }
 
    @Override
    public boolean equals(Object obj) {
        Board other = (Board)obj;
        return this.num==other.num;
    }
    @Override
    public String toString() {
        return String.format("%d %s %s %s %s %d", 
                num,title,author,regDate,contents,hit);
    }
    @Override
    public int compareTo(Board o) {
        if(this.num>o.num) return 1;
        else if(this.num==o.num) return 0;
        else return -1;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getAuthor() {
        return author;
    }
    public void setAuthor(String author) {
        this.author = author;
    }
    public java.sql.Date getRegDate() {
        return regDate;
    }
    public void setRegDate(java.sql.Date regDate) {
        this.regDate = regDate;
    }
    public String getContents() {
        return contents;
    }
    public void setContents(String contents) {
        this.contents = contents;
    }
    public int getHit() {
        return hit;
    }
    public void setHit(int hit) {
        this.hit = hit;
    }
}
Colored by Color Scripter

cs

보드 파트의 모델 클래스(VO클래스)이다. 나중에 contain() 메소드에서 equals()를 쓸 것이기 때문에 번호로 같은 객체를 찾기 위하여 equals()메소드를 오버라이드 해준다. 추가된 순서대로 번호를 지정해줄 것이기 때문에 compareTo() 메소드도 오버라이드 해준다. 각 변수들을 getter, setter 메소드를 만들어 주고 num만 파라미터로 갖는 메소드를 서비스 클래스에서 쓸 것이기 때문에 num만을 파라미터로 갖는 생성자 또한 만들어 준다.

BoardService.java

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

import java.io.*;
import java.util.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
 
public class BoardService 
{
    private HttpServletRequest request;
    private HttpSession session;
    
    private String fpath = "D:/java_test/boardList.ser";
    
    public BoardService() {}
 
    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 newBoard) {
        List<Board> list = deserialize();
        if(list.contains(newBoard)) {
            Board b = list.get(list.indexOf(newBoard));
            b.setTitle(newBoard.getTitle());
            b.setContents(newBoard.getContents());
            return serialize(list);
        }
        return false;
    }
    public boolean deleteBoard(Board key)
    {
        List<Board> list = deserialize();
        if(list.contains(key)) {
            list.remove(list.indexOf(key));
            return 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;
    }
}
Colored by Color Scripter

cs

request객체와 session객체를 값을 가져오고 정해주기 위하여 전역 변수로 선언해 getter, setter 메소드를 만들어 준다.

11행 : 데이터가 직렬화 되어 저장될 파일이 저장될 위치를 정해준다.

83~94행 : 직렬화 메소드. 객체를 직렬화 하여 파일에 저장하고 저장이 정상적을 됐다면 true를 아니라면 false를 리턴한다.

97~111행 : 파일의 정보를 역직렬화하여 저장된 리스트를 얻는다. 만약 파일이 존재 하지 않는다면(프로그램을 처음 돌렸을 경우)

15~31 행 : 파일에서 역직렬화하여 리스트 데이터를 얻는다. 리스트의 크기를 통해 가장 마지막 리스트 객체를 뽑아 그 리스트 객체의 num값에 +1을 하여 새로 추가되는 리스트 객체의 num 값으로 정해준다. 세션 객체에서 uid를 뽑아 작성자로 정해준다. java.util에서 오늘날짜를 구하고 java.sql에 .getTime()메소드를 통해 보드 객체의 작성날짜로 정해준다. 정보가 저장된 보드객체를 리스트에 담아서 직렬화 해주고 결과를 true, false로 리턴한다.

34~37행 : getList()메소드는 그냥 리스트를 얻기 위한 메소드이기 때문에 역직렬화메소드를 호출해준다.

39~45행 : 리스트를 찾는 메소드로 파라미터로 넘어온 key(num)으로 리스트에서 해당 객체를 찾아 그 리스트를 리턴해준다.

48~55 행 : find()메소드와 비슷하지만, 상세보기를 눌렀을 때 조회수(hit)를 늘려주는 로직을 따로 빼기위한 read()메소드이다. 로직이 실행되어 돌아갈때 마다 찾은 리스트의 조회수(hit)에 기존 조회수+1을 해준다. 새로 리뉴얼 된 데이터는 직렬화하여 파일에서도 갱신해준다. 그리고 찾은 리스트를 리턴해준다.

63~71행 : 파일에서 리스트를 역직렬화하여 넘어온 num으로 해당 리스트 객체를 찾고 넘어온 제목과 글내용을 set 메소드를 통해 새로 정해준다. 갱신된 리스트는 직렬화 하여 파일에 저장하고 결과를 true, false로 결과를 리턴해준다.

73~80 행 : 넘어온 num으로 해당 리스트 객체를 찾고 remove메소드를 이용하여 리스트 자료구조에서 해당 리스트를 삭제한다. 갱신된 정보는 직렬화하여 파일에 저장하고 결과를 true, false로 리턴한다.

boardController.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

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    String uid = (String)session.getAttribute("uid");
    if(uid==null) {
        session.setAttribute("url", request.getRequestURL().toString());
        response.sendRedirect("../login/loginController.jsp?cmd=loginform");
        return;
    }
    
    String cmd = request.getParameter("cmd");
    if (cmd==null) cmd="LIST";
    
    switch(cmd)
    {
    case "ADD_FORM":
%>
        <jsp:forward page="boardAddForm.jsp"/>
<%        break;
    case "ADD":
%>
        <jsp:forward page="boardAddProc.jsp"/>
<%        break;
    case "LIST":
%>
        <jsp:forward page="boardListForm.jsp"/>
<%        break;
    case "READ":
%>
        <jsp:forward page="boardDetailForm.jsp"/>
<%        break;
    case "FIND":
%>
        <jsp:forward page="boardDetailForm.jsp"/>
<%        break;    
    case "EDIT":
%>
        <jsp:forward page="boardEditForm.jsp"/>
<%        break;
    case "UPDATE":
%>
        <jsp:forward page="boardUpdateForm.jsp"/>
<%        break;    
    case "DELETE":
%>
        <jsp:forward page="boardDeleteForm.jsp"/>
<%        break;    
    }
%>
Colored by Color Scripter

cs

3~7행 : 세션객체에서 받아온 uid를 문자열 uid에 저장하고 uid가 null이라면 사용자가 접속하려했던 url을 세션객체에 set해주고 loginform으로 사용자를 보내 로그인 하고 게시판을 이용할 수 있도록한다.

10~46행 : cmd가 null이라면 cmd=LIST이라 한다. 각 cmd에 맞는 뷰jsp나 로직 처리jsp로 forward해준다.

boardAddForm.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

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>게시글 추가 폼</title>
<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 : 'boardController.jsp',
        method: 'post',
        data: obj,
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.added ? '추가 성공' : '추가 실패');
            location.href="boardController.jsp?cmd=LIST";
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
    return false;
}
</script>
</head>
<body>
<main>
<h3>게시글 입력</h3>
<form id="addForm" action="boardController.jsp" 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>
        <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>
Colored by Color Scripter

cs

제목, 내용을 입력받아서 submit 해준다. 컨트롤러에는 cmd를 ADD로 해주고 submit 되기전에 addBoard()함수를 돌려 추가 성공, 추가 실패를 비동기 방식으로 alert창에 띄운다. boardAddProc.jsp에서 넘어온 응답이 참이면 추가성공을 거짓이면 추가실패를 띄우고, 추가가 됐다면 게시글 리스트.jsp로 보내 작성한 글이 게재돼 있는지 확인할 수 있게 해준다.

boardAddProc.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<%@page import="org.json.simple.JSONObject"%>
<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
 
<jsp:useBean id="board_svc" class="com.ezen.web.hello.BoardService" scope="session"/>
<jsp:setProperty name="board_svc" property="session" value="<%=session%>" />
 
<jsp:useBean id="board" class="com.ezen.web.hello.Board">
    <jsp:setProperty name="board" property="*"/>
</jsp:useBean>
 
<%
    boolean added = board_svc.add(board); 
    JSONObject jsObj = new JSONObject();
    jsObj.put("added", added);
%>
<%=jsObj.toJSONString()%>
Colored by Color Scripter

cs

jsp:useBean 액션태그를 활용하여 보드 서비스객체화 시키고 보드서비스에 넘어온 제목과 글내용을 보내서 add메소드를 실행시켜 리스트를 파일에 직렬화 해준다. added 결과는 json객체에 담아서 boardAddForm.jsp에 응답으로 보낸다.

boardListForm.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

<%@page import="com.ezen.web.hello.*"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:useBean id="board_svc" class="com.ezen.web.hello.BoardService" scope="session"/>
<%
    List<Board> list = board_svc.getList(); 
%>
<!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>
</head>
<body>
<main>
<h3>게시글 목록</h3>
<table>
<tr><th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>히트수</th></tr>
<%
    for(int i=0;i<list.size();i++) {
        Board board = list.get(i); 
%>
        <tr>
            <td><%=board.getNum()%></td>
            <td>
                <a href="boardController.jsp?cmd=DETAIL&num=<%=board.getNum()%>">
                    <%=board.getTitle()%></a>
            </td>
            <td><%=board.getAuthor()%></td>
            <td><%=board.getRegDate()%></td>
            <td><%=board.getHit()%></td>
        </tr>
<%    }
%>
</table>
<div class="links">
    [<a href="boardController.jsp?cmd=ADD_FORM">글쓰기</a>]
</div>
</main>
</body>
</html>
Colored by Color Scripter

cs

보드 서비스에서 꺼낸 리스트를 반복문을 통하여 번호,제목,작성자,작성일,히트수를 표형식으로 보여준다.

제목은 링크를 달아서 해당 넘어를 넘겨주어 상세보기할 수 있도록한다.

boardDetailForm.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
56
57
58
59
60
61
62
63
64
65
66
67
68

<%@page import="com.ezen.web.hello.Board"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:useBean id="board_svc" class="com.ezen.web.hello.BoardService" scope="session"/>
    <jsp:setProperty name="board_svc" property="request" value="<%=request %>" />
<jsp:useBean id="board" class="com.ezen.web.hello.Board">
    <jsp:setProperty name="board" property="*"  />
</jsp:useBean>
<%
    Board b = board_svc.read(board);
%>
<!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;
    }
</style>
</head>
<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 deleteBoard(num)
    {
        if(!confirm("정말로 현재 게시글을 삭제하겠습니까?")) return;
 
        var obj ={};
        obj.cmd='DELETE';
        obj.num=<%=b.getNum()%>;
        $.ajax({
            url:'boardController.jsp', 
            method:'post',
            data: obj,
            cache : false,
            dataType: 'json',
            success: function(res){ 
                if(res.deleted){
                    alert(res.deleted ? '삭제 성공':'에러'); 
                    location.href ='boardListForm.jsp';
                }
            },
            error : function(xhr,status,err){
                alert(err);
            }
        });
        return false;
    }
</script>
<body>
<main>
<h3>게시글 읽기</h3>
<div><label>글번호</label> <%=b.getNum()%></div>
<div><label>제 목</label> <%=b.getTitle()%></div>
<div><label>작성자</label> <%=b.getAuthor()%></div>
<div><label>작성일</label> <%=b.getRegDate()%></div>
<div><label>히트수</label> <%=b.getHit()%></div>
<div><label>글내용</label> <%=b.getContents()%></div>
[<a href="boardController.jsp?cmd=ADD_FORM"> 게시글 등록 페이지 가기 </a>]
[<a href="boardController.jsp?cmd=EDIT&num=<%=b.getNum()%>"> 수정 </a>]
[<a href="javascript:deleteBoard(<%=b.getNum()%>);">삭제</a>]
</main>
</body>
</html>
Colored by Color Scripter

cs

상세보기하여 글내용까지 나오도록한다. 64행 수정을 누르면 해당 보드객체의 num과 함께 컨트롤러의 cmd=EDIT으로 보내고 65행 삭제를 하면 보드객체의 num을 deleteBoard함수의 파라미터로 넣어준다. !confirm이 참이라면 return으로 함수를 끝내고 !confirm이 거짓이면 함수가 계속 돌아간다. json객체에cmd는 DELETE로 num는 파라미터로 받은 해당 보드객체의 num을 담아준다. 담은 json객체를 컨트롤러로 보내 보드서비스의 deleteBoard메소드가 돌아가 해당 객체를 지울 수 있게 해준다.

boardEditForm.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
56
57
58
59
60
61

<%@page import="com.ezen.web.hello.Board"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:useBean id="board_svc" class="com.ezen.web.hello.BoardService" scope="session"/>
<jsp:useBean id="board" class="com.ezen.web.hello.Board">
    <jsp:setProperty name="board" property="*"  />
</jsp:useBean>
<%
    Board b = board_svc.find(board);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>게시글 수정 폼</title>
<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 = $('#updateForm').serialize();
    $.ajax({
        url : 'boardController.jsp',
        method: 'post',
        data: obj,
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.updated ? '수정 성공' : '수정 실패');
            location.href="boardController.jsp?cmd=FIND&num=<%=b.getNum()%>";
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
    return false;
}
</script>
</head>
<body>
<main>
<h3>게시글 입력</h3>
<form id="updateForm" onsubmit="return updateBoard();">
    <input type="hidden" name="cmd" value="UPDATE">
    <input type="hidden" name="num" value="<%=b.getNum()%>">
    <div>
        <label for="title">제목</label> 
        <input id="title" type="text" name="title" value="<%=b.getTitle()%>">
    </div>
    <div>
        <label for="contents">내용</label>
        <textarea id="contents" name="contents" rows="5" cols="50" ><%=b.getContents()%></textarea>
    </div>
    <div class="btn">
        <button type="reset">취소</button>
        <button type="submit">저장</button>
    </div>
</form>
</main>
</body>
</html>
Colored by Color Scripter

cs

게시물의 내용과 제목만 바꿀 수 있게 해준다. 보드서비스의 find메소드로 찾은 보드객체에 새로운 제목과 새로운 내용을 받아 직렬화하여 updateBoard()함수에 json객체로 보낸다. cmd는 UPDATE이기 때문에 boardUpdateForm에서 로직이 돌아가고 여기서 받은 응답을 통해 true면 수정성공을 false면 수정실패를 띄운다.

boardUpdateForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<%@page import="org.json.simple.JSONObject"%>
<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
 
<jsp:useBean id="board_svc" class="com.ezen.web.hello.BoardService" scope="session"/>
<jsp:setProperty name="board_svc" property="session" value="<%=session%>" />
 
<jsp:useBean id="board" class="com.ezen.web.hello.Board">
    <jsp:setProperty name="board" property="*"/>
</jsp:useBean>
 
<%
    boolean updated = board_svc.update(board);  
    JSONObject jsObj = new JSONObject();
    jsObj.put("updated", updated);
%>
<%=jsObj.toJSONString()%>
Colored by Color Scripter

cs

넘어온 데이터를 보드 서비스의 update()메소드에 파라미터로 준다. 리턴된 boolean값을 json 객체에 담아서 응답으로 리턴해준다.

boardDeleteForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<%@page import="org.json.simple.JSONObject"%>
<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
 
<jsp:useBean id="board_svc" class="com.ezen.web.hello.BoardService" scope="session"/>
<jsp:setProperty name="board_svc" property="session" value="<%=session%>" />
 
<jsp:useBean id="board" class="com.ezen.web.hello.Board">
    <jsp:setProperty name="board" property="*"/>
</jsp:useBean>
 
<%
    boolean deleted = board_svc.deleteBoard(board);  
    JSONObject jsObj = new JSONObject();
    jsObj.put("deleted", deleted);
%>
<%=jsObj.toJSONString()%>
Colored by Color Scripter

cs

넘어온 데이터를 보드 서비스의 deleteBoard()메소드에 파라미터로 준다. 리턴된 boolean값을 json 객체에 담아서 응답으로 리턴해준다.

실행결과 :

'Web programming' 카테고리의 다른 글

(22.11.24)Web 프로그래밍: JSTL,EL / JSP개발모델1에서 개발모델2로 변환하기 (1)	2022.11.24
(22.11.23)Web 프로그래밍: JSP 개발모델1(MVC방식)-게시판 로그아웃기능, 작성자만 수정/삭제 기능만들기 (0)	2022.11.23
(22.11.21)Web 프로그래밍: JSP 개발방법론 Model1-jsp로 Controller 역할 하게 하기 (0)	2022.11.21
(22.11.18)Web 프로그래밍: 게시판 CRUD(JSP 개발방법론 Model1) (0)	2022.11.18
(22.11.17)Web 프로그래밍: 회원정보 리스트 보기,상세 보기, 수정하기(jsp, jsp:Bean 액션태그) (2)	2022.11.17