본문으로 바로가기







1. 개요





 난 포스팅 :   [JSP개발] 모든 회원보기 추가



이번에는 기존 JSP에 적용된 <% %>나 <%= %>와 같은 스크립트 요소들을 EL과 JSTL로 변경할 것이다. EL과 JSTL을 사용하면 보다 간단하게 값을 출력할 수 있고, JSP 소스 코드를 간결하게 할 수 있는 장점이 있다.


EL과 JSTL 적용은 JSP에서만 진행되며 라이브러리를 추가해야 한다.  아래의 압축 파일을 다운로드 받아 압축을 푼 뒤 WEB-INF 아래에 있는 lib 폴더에 집어넣으면 된다.



 jar 파일


jstl.zip




2. 소스 코드


파일을 추가했으면 EL과 JSTL로 소스 코드를 수정하자. JSTL을 사용할 경우 상단에 이 코드를 추가해야 한다.


1
<%@ taglib p/refix="c" uri="http://java.sun.com/jspjstl/core"%>
cs



 MainForm.jsp




기존의 MainForm.jsp에서는 첫 번째 코드로 되어 있었다. 이것을 두 번째 코드로 변경을 한다. request의 파라미터 값인 contentPage의 경우 JSTL의 <c:set>를 이용해 변수에 담았다. 그리고 <cif> 태그를 이용해 값이 null일 경우와 아닐 경우의 보여줄 화면을 달리하였다.



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 
    <%--
        String contentPage=request.getParameter("contentPage");
        if(contentPage==null)
            contentPage="FirstView.jsp";
            
        이 부분을 EL과 JSTL로 변경하면 아래와 같다.    
    --%>
    
<html>
<head>
    <title>메인 화면</title>
    
    <style>
        /*
        레이아웃 전체 가운데 정렬 태그  
        - margin:0 auto 0 auto;(시계방향으로 위, 오른쪽, 아래, 왼쪽)
        왼쪽, 오른쪽 바깥여백을 auto로 주면 중앙정렬이 된다. 
        
        전체를 감싸주는 태그 #wrap 
        */
        #wrap {
            width: 950px;
            margin: 0 auto 0 auto;
        }
        
        #header {
            text-align: center;
            width: 950px;
            height: 150px;
            background-color: #92FFFF;
            padding: 60px 0px;
        }
        
        #main {
            float: left;
            width: 950px;
            height: 500px;
            background-color: #FFCA6C;
            text-align:center;
            vertical-align: middle;
        }
        #footer {
            clear: left;
            width: 950px;
            height: 100px;
            background-color: #7DFE74;
        }
    </style>
    
</head>
<body>
    <div id="wrap">
        <div id="header">
            <jsp:include page="Header.jsp" />
        </div>
        <div id="main">
        
            <!-- contentPage가 없을 경우 FirstView.jsp를 보여준다. -->
            <c:set var="contentPage" value="${param.contentPage}"/>
            <c:if test="${contentPage==null}">    
                <jsp:include page="FirstView.jsp" />
            </c:if>
            <jsp:include page="${contentPage}" />
            
        </div>
        <div id="footer"> 
            <jsp:include page="Footer.jsp" />
        </div>
    </div>
    
</body>
</html>
cs



■ Header.jsp




상단 메뉴 부분인 Header.jsp에서는 로그인했을 경우, 로그인을 안 했을 경우에 따라 메뉴가 달라진다. 그것을 처리하기 위해 <cif> 태그를 이용하였다.



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<html>
<head>
    <title>상단 영역</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style type="text/css">
        #wrap{
            text-align: center;
            width: 800px;
            height: 150px;
        }
    </style>
    
    <script type="text/javascript">
        
        function changeView(value){
            
            if(value == "0"// HOME 버튼 클릭시 첫화면으로 이동
            {
                location.href="MainForm.do";
            }
            else if(value == "1"// 로그인 버튼 클릭시 로그인 화면으로 이동
            {
                location.href="LoginForm.do";
            }
            else if(value == "2"// 회원가입 버튼 클릭시 회원가입 화면으로 이동
            {
                location.href="JoinForm.do";
            }
            else if(value == "3"// 로그아웃 버튼 클릭시 로그아웃 처리
            {
                location.href="MemberLogoutAction.do";
            }
            else if(value == "4"// 내정보 버튼 클릭시 회원정보 보여주는 화면으로 이동
            {
                location.href="MemberInfoAction.do";
            }
            else if(value == "5")
            {
                location.href="MemberListAction.do";
            }
        }
    </script>
    
</head>
<body>
    <div id = "wrap">
        <p>
            <button class="btn btn-success" onclick="changeView(0)">HOME</button>
 
        <!-- // 로그인 안되었을 경우 - 로그인, 회원가입 버튼을 보여준다. -->
        <c:if test="${sessionScope.sessionID==null}">
            <button id="loginBtn" class="btn btn-primary" onclick="changeView(1)">로그인</button>
            <button id="joinBtn" class="btn btn-primary" onclick="changeView(2)">회원가입</button>
        </c:if>
 
        <!-- // 로그인 되었을 경우 - 로그아웃, 내정보 버튼을 보여준다. -->
        <c:if test="${sessionScope.sessionID!=null}">
            <button id="logoutBtn" class="btn btn-primary" onclick="changeView(3)">로그아웃</button>
            <button id="updateBtn" class="btn btn-primary" onclick="changeView(4)">내정보</button>
            
            <!--  관리자 로그인 -->
            <c:if test="${sessionScope.sessionID=='admin'}">
                <button id="memberViewBtn" class="btn btn-warning" onclick="changeView(5)">회원보기</button>
            </c:if>
        </c:if>
 
        </p>
    </div>
</body>
</html>
cs



■ Footer.jsp


세션에 담긴 방문자 수 값을 기존에는 <%= %>(표현식)로 처리했는데 이것을 EL로 변경하였다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>    
<html>
<head>
    <title>하단 영역</title>
</head>
<body>
    <br>
    전체 : ${sessionScope.totalCount }
    <br>
    오늘 : ${sessionScope.todayCount }
    <br>
</body>
</html>
cs



■ FirstView.jsp


Header.jsp와 마찬가지로 로그인했을 때와 로그인을 안 했을때 보여주는 부분이 다르므로 <cif> 태그를 적용했다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<html>
    <head>
        <title>첫화면</title>
    </head>
    <body>        
            <!-- 로그인 안되었을 경우 -->
    <c:if test="${sessionScope.sessionID==null}">
        <br><br><br>
        <br><br><br>
        <img src="img/welcome.jpg">
        <br><br>    
    </c:if>    
            <!-- 로그인 -->
    <c:if test="${sessionScope.sessionID!=null}">    
        <br><br><br>
        <font size=6 color="skyblue">${sessionScope.sessionID}</font>
        <font size=6>님 환영합니다.</font>
    </c:if>    
    
    </body>
</html>
cs



 LoginForm.jsp 


로그인 화면도 마찬가지로 EL과 JSTL을 이용해 변경하였다.




기존의 <% %> 로 처리된 부분에서는 로그인 실패 시 request의 파라미터로 넘어온 값을 if 문을 이용해 처리하였다. JSTL로 변경할 때 if - esle 문이 없으므로 <c:choose>태그를 이용하였다. 일종의 switch 문이라 생각하면 된다. 


실패 메시지 값이 0이면 비밀번호가 잘못된 경우이므로 그에 해당하는 메시지를 출력한다. 실패 메시지가 0이 아닐 경우 아래의 <c:otherwise> 부분이 실행된다.



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<html>
<head>
    <%
        // 인코딩 처리
    //    request.setCharacterEncoding("euc-kr"); 
    %>
    <title>로그인 화면</title>
 
    <style type="text/css">
        table{
            padding: 60px 0px;
            margin-left:auto; 
            margin-right:auto;
            border:3px solid skyblue;
        }
        
        td{
            border:1px solid skyblue
        }
        
        #title{
            background-color:skyblue
        }
    </style>
 
    <script type="text/javascript">
 
        function checkValue()
        {
            inputForm = eval("document.loginInfo");
            if(!inputForm.id.value)
            {
                alert("아이디를 입력하세요");    
                inputForm.id.focus();
                return false;
            }
            if(!inputForm.password.value)
            {
                alert("비밀번호를 입력하세요");    
                inputForm.password.focus();
                return false;
            }
        }
    
        // 취소 버튼 클릭시 첫화면으로 이동
        function goFirstForm() {
            location.href="MainForm.do";
        }
    </script>
 
</head>
<body>
    <div id="wrap">
    
        <br><br>
        <b><font size="6" color="gray">로그인</font></b>
        <br><br><br>
    
        <form name="loginInfo" method="post" action="MemberLoginAction.do" 
                onsubmit="return checkValue()">
 
            <table>
                <tr>
                    <td bgcolor="skyblue">아이디</td>
                    <td><input type="text" name="id" maxlength="50"></td>
                </tr>
                <tr>
                    <td bgcolor="skyblue">비밀번호</td>
                    <td><input type="password" name="password" maxlength="50"></td>
                </tr>
            </table>
            <br>
            <input type="submit" value="로그인"/>
            <input type="button" value="취소" onclick="goFirstForm()">
        </form>
        
        <%-- 
            // 아이디, 비밀번호가 틀릴경우 화면에 메시지 표시
            String loginMsg = (String)request.getAttribute("fail");
            
            if(loginMsg!=null && loginMsg.equals("0")){
                out.println("<br>");
                out.println("<font color='red' size='5'>비밀번호를 확인해 주세요.</font>");
            }
            else if(loginMsg!=null && loginMsg.equals("-1")){    
                out.println("<br>");
                out.println("<font color='red' size='5'>아이디를 확인해 주세요.</font>");
            }
            
            위의 if 문을 EL과 JSTL로 변경한 것은 아래와 같다. 
        --%>    
        
        <c:set var="failMessage" value="${requestScope.fail}"/>
        <c:if test="${failMessage!=null}">    
            <c:choose>
                <c:when test="${failMessage=='0'}">
                    <br><font color='red' size='5'>비밀번호를 확인해 주세요.</font>
                </c:when>
                <c:otherwise>
                    <br><font color='red' size='5'>아이디를 확인해 주세요.</font>
                </c:otherwise>
            </c:choose>
        </c:if>
        
    </div>    
</body>
</html>
cs



 UserInfoForm.jsp




request에 담겨있는 MemberBean을 <c:set>를 이용해 변수 member에 담았다. member에 있는 각각의 값을 출력하는 것은 EL을 이용했다. 



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>  
<%@ page import="jsp.member.model.MemberBean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
 
<html>
<head>
    <title>현재 유저정보 출력화면</title>
    
    <style type="text/css">
        table{
            margin-left:auto; 
            margin-right:auto;
            border:3px solid skyblue;
        }
        
        td{
            border:1px solid skyblue
        }
        
        #title{
            background-color:skyblue
        }
    </style>
    
    <script type="text/javascript">
    
        function changeForm(val){
            if(val == "-1"){
                location.href="MainForm.do";
            }else if(val == "0"){
                location.href="MemberModifyFormAction.do";
            }else if(val == "1"){
                location.href="DeleteForm.do";
            }
        }
        
    </script>
    
</head>
<body>
        <br><br>
        <b><font size="6" color="gray">내 정보</font></b>
        <br><br><br>
        
        <!-- 회원정보를 가져와 member 변수에 담는다. -->
        <c:set var="member" value="${requestScope.memberInfo}"/>
        
        <!-- 가져온 회원정보를 출력한다. -->
        <table>
            <tr>
                <td id="title">아이디</td>
                <td>${member.id}</td>
            </tr>
                        
            <tr>
                <td id="title">비밀번호</td>
                <td>${member.password}</td>
            </tr>
                    
            <tr>
                <td id="title">이름</td>
                <td>${member.name}</td>
            </tr>
                    
            <tr>
                <td id="title">성별</td>
                <td>${member.gender}</td>
            </tr>
                    
            <tr>
                <td id="title">생일</td>
                <td>
                    ${member.birthyy}년 
                    ${member.birthmm}월 
                    ${member.birthdd}일
                </td>
            </tr>
                    
            <tr>
                <td id="title">이메일</td>
                <td>
                    ${member.mail1}@${member.mail2}
                </td>
            </tr>
                    
            <tr>
                <td id="title">휴대전화</td>
                <td>${member.phone}</td>
            </tr>
            <tr>
                <td id="title">주소</td>
                <td>
                    ${member.address}
                </td>
            </tr>
        </table>
        
        <br>
        <input type="button" value="뒤로" onclick="changeForm(-1)">
        <input type="button" value="회원정보 변경" onclick="changeForm(0)">
        <input type="button" value="회원탈퇴" onclick="changeForm(1)">
</body>
</html>
cs



 ModifyFrom.jsp


수정화면도 UserInfoForm.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
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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="jsp.member.model.MemberDAO" %>    
<%@ page import="jsp.member.model.MemberBean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
 
<html>
<head>
 
    <title>회원정보 수정화면</title>
    
    <style type="text/css">
        table{
            margin-left:auto; 
            margin-right:auto;
            border:3px solid skyblue;
        }
        
        td{
            border:1px solid skyblue
        }
        
        #title{
            background-color:skyblue
        }
    </style>
    
    <script type="text/javascript">
    
        function init(){
            setComboValue("${member.mail2}");
        }
 
        function setComboValue(val) 
        {
            var selectMail = document.getElementById('mail2'); // select 아이디를 가져온다.
            for (i = 0, j = selectMail.length; i < j; i++)  // select 하단 option 수만큼 반복문 돌린다.
            {
                if (selectMail.options[i].value == val)  // 입력된값과 option의 value가 같은지 비교
                {
                    selectMail.options[i].selected = true// 같은경우라면 체크되도록 한다.
                    break;
                }
            }
        }
        
        // 비밀번호 입력여부 체크
        function checkValue() {
            if(!document.userInfo.password.value){
                alert("비밀번호를 입력하세요.");
                return false;
            }
        }
        
    </script>
    
</head>
<body onload="init()">
 
        <br><br>
        <b><font size="6" color="gray">회원정보 수정</font></b>
        <br><br><br>
        <!-- 회원정보를 가져와 member 변수에 담는다. -->
        <c:set var="member" value="${requestScope.memberInfo}"/>
        
        <!-- 입력한 값을 전송하기 위해 form 태그를 사용한다 -->
        <!-- 값(파라미터) 전송은 POST 방식 -->
        <form method="post" action="MemberModifyAction.do" 
                name="userInfo" onsubmit="return checkValue()">
                
            <table>
                <tr>
                    <td id="title">아이디</td>
                    <td id="title">${member.id}</td>
                </tr>
                <tr>
                    <td id="title">비밀번호</td>
                    <td>
                        <input type="password" name="password" maxlength="50" 
                            value="${member.password}">
                    </td>
                </tr>
            </table>    
            <br><br>    
            <table>
 
                <tr>
                    <td id="title">이름</td>
                    <td>${member.name}</td>
                </tr>
                    
                <tr>
                    <td id="title">성별</td>
                    <td>${member.gender}</td>
                </tr>
                    
                <tr>
                    <td id="title">생일</td>
                    <td>
                        ${member.birthyy}년 
                        ${member.birthmm}월 
                        ${member.birthdd}일
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">이메일</td>
                    <td>
                        <input type="text" name="mail1" maxlength="50" 
                            value="${member.mail1}">
                        @
                        <select name="mail2" id="mail2">
                            <option value="naver.com">naver.com</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="daum.net" >daum.net</option>
                            <option value="nate.com">nate.com</option>                        
                        </select>
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">휴대전화</td>
                    <td>
                        <input type="text" name="phone" value="${member.phone}"/>
                    </td>
                </tr>
                <tr>
                    <td id="title">주소</td>
                    <td>
                        <input type="text" size="50" name="address"
                            value="${member.address}"/>
                    </td>
                </tr>
            </table>
            <br><br>
            <input type="button" value="취소" onclick="javascript:window.location='MainForm.do'">
            <input type="submit" value="수정"/>  
        </form>
        
</body>
</html>
cs


 MemberListForm.jsp




request에 담긴 ArrayList<MemberBean>값을 <c:set>를 이용해 변수 memberList에 담았다. ArrayList 이므로 반복문을 이용해서 화면에 출력해야 된다. 그렇기에 반복문 태그인 <c:forEach>를 이용해서 처리하였다.



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.util.*" %>    
<%@ page import="jsp.member.model.MemberBean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
 
<html>
<head>
    <title>회원 리스트 - 관리자 화면</title>
    
    <style type="text/css">
        table{
            margin-left:auto; 
            margin-right:auto;
            border:3px solid skyblue;
        }
        
        td{
            border:1px solid skyblue
        }
        
        #title{
            background-color:skyblue
        }
    </style>
    
</head>
<body>
    <br><br>
    <b><font size="6" color="gray">전체 회원정보</font></b>
    <br><br>
    
    <table>    
        <tr align="center">
            <td id=title>아이디</td>
            <td id=title>비밀번호</td>
            <td id=title>이름</td>
            <td id=title>성별</td>
            <td id=title>생년월일</td>
            <td id=title>이메일</td>
            <td id=title>전화</td>
            <td id=title>주소</td>
            <td id=title>가입일</td>
        </tr>
        
        <c:set var="memberList" value="${requestScope.memberList}"/>
        <c:forEach var="member" items="${memberList}">
            <tr>
                <td>${member.id}</td>
                <td>${member.password}</td>
                <td>${member.name}</td>
                <td>${member.gender}</td>
                <td>${member.birthyy}</td>
                <td>${member.mail1}</td>
                <td>${member.phone}</td>
                <td>${member.address}</td>
                <td>${member.reg}</td>
            </tr>
        </c:forEach>    
    </table>
 
</body>
</html>
cs



 ResultForm.jsp




LoginForm.jsp 에서처럼 기존에 if - esle 문으로 되어있는 것을 변경하기 위해 <c:choose>태그를 이용하였다.  



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 language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>     
<html>
<head>
    <title>결과 페이지</title>
</head>
<body>
    <br><br><br>
    <!-- 
        String msg = (String)session.getAttribute("msg");
    
        if(msg != null)
        {
            if(msg.equals("0"))
                out.println("<font size='6'>회원정보가 수정되었습니다.</font>");
            else if(msg.equals("1"))
                out.println("<font size='6'>회원가입을 축하드립니다.</font>");
            
            session.removeAttribute("msg");
        }
        else
        {
            out.println("<font size='6'>회원정보가 삭제되었습니다.</font>");
        }
        //이 부분을 아래와 같이 EL과 JSTL을 이용해 변경하였다.
     -->
    
    <c:set var="msg" value="${sessionScope.msg}" scope="session" />
    <c:choose>
        <c:when test="${msg!=null && msg=='0'}">
            <font size='6'>회원정보가 수정되었습니다.</font>
            <c:remove var="msg" scope="session"></c:remove>
        </c:when>
        <c:when test="${msg!=null && msg=='1'}">
            <font size='6'>회원가입을 축하드립니다.</font>
            <c:remove var="msg" scope="session"></c:remove>
        </c:when>
        <c:otherwise>
            <font size='6'>회원정보가 삭제되었습니다.</font>
        </c:otherwise>
    </c:choose>
 
    <br><br>
    <input type="button" value="메인으로" onclick="javascript:window.location='MainForm.do'"/>
    
</body>
</html>
cs




4. 소스코드 다운로드 (war 파일)



JSP_DEV.war



RSS구독 링크추가 트위터 이메일 구독