Web programming

(22.11.23)Web 프로그래밍: JSP 개발모델1(MVC방식)-게시판 로그아웃기능, 작성자만 수정/삭제 기능만들기

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

(22.11.22)에 작성한 프로그램에 추가로 로그아웃 기능 작성

그리고 해당 uid의 작성자만 자신의 글을 삭제, 수정 가능하게 하기 다른 사람으로 로그인하면 글 읽기는 가능하더라도 삭제 수정은 불가능 하게 만들기

●●logout Part●●

loginController.jsp

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

<%@ 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="../WEB-INF/jsp/loginForm.jsp"/>
<%    }else if(cmd.equals("login")){ %>
        <jsp:forward page="../WEB-INF/jsp/loginProc.jsp"/>
<%    }else if(cmd.equals("logout")){ %>
        <jsp:forward page="../WEB-INF/jsp/logoutProc.jsp"/>
<%    }
%>
Colored by Color Scripter

cs

로그인 컨트롤로 cmd의 값에 따라 해당 jsp로 forward해준다.

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

import java.util.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
 
public class UserService 
{
    private HttpSession session;
    private static Map<String,String> userMap = new HashMap<>();
    static { //static 블럭 : 클래스가 로드될 때 자동으로 한번만 실행되는 블럭 (기능은DB라 생각하면 됨)
        userMap.put("smith", "1111");
        userMap.put("bob", "2222");
    }
    
    public UserService() {}
    
    public boolean login(User user)
    {
        Set<String> keyset =userMap.keySet();
        Iterator<String> it = keyset.iterator();
        while(it.hasNext()) {
            String uid = it.next();
            String pwd = userMap.get(uid);
            if(user.getUid().equals(uid) && user.getPwd().equals(pwd))
            {
                session.setAttribute("uid", user.getUid());
                return true;
            }
        }
        return false;
    }
    public void setSession(HttpSession session) {
        this.session = session;
    }
    public void logout()
    {
        session.invalidate();
    }
}
Colored by Color Scripter

cs

hashMap을 이용하여 아이디와 비밀번호를 쌍으로 저장한다.

16행: 자료구조 map은 반복문을 돌려주지 못하기 때문에 Set 자료구조로 바꿔서 Iterator를 통해 hasNext()메소드를 써서 반복문을 돌린다.

34행 : logout 메소드

session.removeAttribute("uid"); (로그아웃 링크 클릭시 서버측 session에 저장된 이용자의 id제거)

session.invalidate();(세션에 저장된 모든 값들을 전부 삭제)

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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
   String uid = (String)session.getAttribute("uid");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 로그아웃 </title>
</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 logout()
{    
    $.ajax({
        url : '/JavaWeb/login/loginController.jsp',
        method: 'post',
        data:{"cmd":"logout"},
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.logout ? '로그아웃 성공' : '로그아웃 실패');
            location.href='/JavaWeb/login/loginController.jsp';
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
}
</script>
<style>
   a#logout_link {margin-left:1em; background-color:rgb(255,200,200); font-size: small;}
</style>
<body>
<span><%=uid %></span>
<a id="logout_link"href="javascript:logout();">로그아웃</a>
</body>
</html>
Colored by Color Scripter

cs

로그아웃 링크를 누르면 logout()함수가 돌아간다. 로그인컨트롤러에 cmd에 logout을 준다. logoutProc.jsp에서 넘어온 응답이 참이면 로그아웃 성공을 거짓이면 로그아웃 실패를 alert창에 띄운다.

logoutProc.jsp

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

<%@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>
 
<%
    login_svc.logout();
    JSONObject jsObj = new JSONObject();
    jsObj.put("logout", true);
    out.print(jsObj.toJSONString());
    out.flush();
%>
Colored by Color Scripter

cs

logout()메소드를 돌려 참이 나온다면 json객체에 logout을 참이라 설정해서 user_inc.jsp에 넘겨준다.

●●Board Part●●

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
49
50
51
52

<%@ 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="../WEB-INF/jsp/boardAddForm.jsp"/>
<%
        break;
    case "ADD":
%>
        <jsp:forward page="../WEB-INF/boardAddProc.jsp"/>
<%    
        break;
    case "LIST":
%>
        <jsp:forward page="../WEB-INF/jsp/boardListForm.jsp"/>
<%        break;
    case "READ":
%>
        <jsp:forward page="../WEB-INF/jsp/boardDetailForm.jsp"/>
 
<%        break;
    case "FIND":
%>
        <jsp:forward page="../WEB-INF/jsp/boardDetailForm.jsp"/>
 
<%        break;    
    case "EDIT":
%>
        <jsp:forward page="../WEB-INF/jsp/boardEditForm.jsp"/>
<%        break;
    case "UPDATE":
%>
        <jsp:forward page="../WEB-INF/boardUpdateForm.jsp"/>
<%        break;    
    case "DELETE":
%>
        <jsp:forward page="../WEB-INF/boardDeleteForm.jsp"/>
<%        break;    
    }
%>
Colored by Color Scripter

cs

이용자가 만약 수정/삭제의 요청 경로를 알고 있다면 그 주소를 주소창에 입력하고 접근할 수 있다.
그래서 무분별하게 접속하는 걸 막기 위하여 뷰에 해당되는 모든 페이지들은 이용자가 직접 접근할 수 없도록 감춰야한다.
콘트롤러를 거치지 않고 url로 접속하지 않게 하기 위해서 콘트롤러를 제외한 다른 뷰,로직 jsp들을 모두 WEB-INF 안에 저장하여 실행해야 한다.
WEB-INF/ 아래에 JSP파일을 두면 이용자가 웹브라우저로 직접 호출 할 수 없다.
forward 시에 page속성으로 WEB-INF/.... 경로를 사용할 수 있다.

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
55

<%@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>
<%@ include file="/WEB-INF/jsp/user_inc.jsp"  %>
<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=READ&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

29행 : 지시자 태그를 이용하여 include 지시어를 사용하여 다른 페이지(로그아웃 링크를 만들어 내는 user_inc.jsp)를 현재 페이지에 삽입한다.

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<%@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);
 
    String thisuid = (String)session.getAttribute("uid");
    String author = b.getAuthor();
    boolean owned = thisuid.equals(author);
%>
<!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(){
    var owned = <%=owned %>
    if(!owned){
        $('#owner_only').css('display','none');
    }        
});
</script>
<script type="text/javascript">
    function deleteBoard(num)
    {
        if(!confirm("정말로 현재 게시글을 삭제하겠습니까?")) return;
 
        var obj ={};
        obj.cmd='DELETE'; //={"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 ='boardController.jsp?cmd=LIST';
                }
            },
            error : function(xhr,status,err){
                alert(err);
            }
        });
        return false;
    }
</script>
<body>
<main>
<%@ include file="/WEB-INF/jsp/user_inc.jsp"  %>
<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>]
<span id="owner_only">
[<a href="boardController.jsp?cmd=EDIT&num=<%=b.getNum()%>"> 수정 </a>]
[<a href="javascript:deleteBoard(<%=b.getNum()%>);">삭제</a>]
</span>
[<a href="boardController.jsp?cmd=LIST"> 목록 가기</a>]
</main>
</body>
</html>
Colored by Color Scripter

cs

18행 : 작성자와 현재 세션 객체에 있는 uid가 같지 않다면 삭제와 수정 링크를 완전히 없애기

$('#btn').css('visibility','hidden'); btn 태그를 안보이게 함
$('#btn').css('visibility','hidden'); btn 태그를 보이게 함
$('#btn').css('display','none'); btn 태그를 완전히 제거함

실행 결과 :

<%@ include file %> 때문에 생긴 좌측 상단 아이디와 로그아웃 링크

bob 아이디로 bob이 적은 게시글 읽기 수정과 삭제 링크가 제대로 나오는 걸 볼 수 있다

bob 아이디로 smith가 적은 게시글을 보면 수정과 삭제 링크가 사라져서 수정 및 삭제를 할 수가 없다

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

(22.11.25)Web 프로그래밍: JSP 개발방법론 Model1으로 만든 게시판을 JSP 개발방법론 Model2로 변환하기 (0)	2022.11.25
(22.11.24)Web 프로그래밍: JSTL,EL / JSP개발모델1에서 개발모델2로 변환하기 (1)	2022.11.24
(22.11.22)Web 프로그래밍: JSP 개발모델1 MVC방식(로그인하여 게시판 작성하기) (0)	2022.11.22
(22.11.21)Web 프로그래밍: JSP 개발방법론 Model1-jsp로 Controller 역할 하게 하기 (0)	2022.11.21
(22.11.18)Web 프로그래밍: 게시판 CRUD(JSP 개발방법론 Model1) (0)	2022.11.18