1. 개요
■ 지난 포스팅 : [JSP개발] 회원가입 - 로그인, 로그아웃 구현
로그인, 로그아웃을 구현한 이후 페이지 전체를 변경하였다. MainForm.jsp에 <jsp:include> 태그 적용으로 페이지를 모듈화했다. 상단과 하단은 공통 영역, 중단은 메뉴 선택에 따른 내용이 표시된다. 중단에 표시되는 화면은 로그인, 회원가입 화면이다.
■ JSP
MainForm.jsp : 메인화면, 지난 포스팅과 달라진 점은 현재 메인화면은 단순한 레이아웃 역할만 한다.
Header.jsp : 상단 영역을 담당하는 JSP, 각종 메뉴가 위치하고 있다.
FirstView.jsp : 중단 영역에 처음 표시될 화면
■ CSS
bootstrap.min.css : 상단 영역 버튼 디자인 관련 CSS
2. 소스 코드
아래의 소스는 지난 포스팅과 동일하다.
MemberBean.java
DBConnection.java
- MemberDAO.java
join_style.css는 #wrap 부분을 주석으로 처리하였다. 첨부된 소스코드를 확인하면 될 것이다.
■ MainForm.jsp
4 ~ 6 줄
중단 영역을 메뉴 선택마다 변경하기 위해 사용하였다. contentPage라는 파라미터를 받아와 그 정보를 <jsp:include> 태그에 집어넣는다. contentPage는 URL 값이므로 <jsp:include> 에서는 해당 URL의 페이지를 중단 영역에 표시하게 된다.
최초 실행시 contentPage값이 없을 경우에는 첫 화면인 FirstView.jsp를 출력한다.
20 ~ 46 줄
메인 화면의 CSS이다. 상, 중, 하단 영역의 크기와 배경색을 지정한다.
52 ~ 60 줄
<div>로 구분된 영역이다. header는 상단, main은 중단, footer는 하단이다.
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"%> <% String contentPage=request.getParameter("contentPage"); if(contentPage==null) contentPage="FirstView.jsp"; %> <html> <head> <title>메인 화면</title> <style> /* 레이아웃 전체 가운데 정렬 태그 - margin:0 auto 0 auto;(시계방향으로 위, 오른쪽, 아래, 왼쪽) 왼쪽, 오른쪽 바깥여백을 auto로 주면 중앙정렬이 된다. 전체를 감싸주는 태그 #wrap */ #wrap { width: 800px; margin: 0 auto 0 auto; } #header { text-align: center; width: 800px; height: 150px; background-color: #92FFFF; padding: 60px 0px; } #main { float: left; width: 800px; height: 500px; background-color: #FFCA6C; text-align:center; vertical-align: middle; } #footer { clear: left; width: 800px; height: 60px; background-color: #7DFE74; } </style> </head> <body> <div id="wrap"> <div id="header"> <jsp:include page="Header.jsp" /> </div> <div id="main"> <jsp:include page="<%=contentPage%>" /> </div> <div id="footer"> 하단 </div> </div> </body> </html> | cs |
■ FirstView.jsp
실행 시 중단 영역에 처음으로 표시되는 화면이다.
8 ~ 18 줄
최초 MainForm.jsp 실행시 그리고 로그인이 안 되어있을 경우에 출력되는 부분이다. 첫 화면이라는 텍스트와 함께 이미지를 출력한다.
19 ~ 25 줄
로그인이 되어있을 경우 로그인된 사용자의 ID를 화면에 출력한다.
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 | <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <html> <head> <title>첫화면</title> </head> <body> <% if(session.getAttribute("sessionID") == null) // 로그인이 안되었을 때 { %> <br><br><br> <b><font size="6" color="gray">첫화면</font></b> <br><br><br> <img src="img/welcome.jpg"> <br><br> <% } else // 로그인 했을 경우 { %> <br><br><br> <font size=6 color="skyblue"><%=session.getAttribute("sessionID") %></font> <font size=6>님 환영합니다.</font> <% } %> </body> </html> | cs |
■ Header.jsp
상단 영역 페이지이다. 메뉴 버튼을 출력한다.
7 줄
버튼 스타일 정보를 담고 있는 CSS 파일을 링크시킨다.
19 ~ 37 줄
각 버튼을 클릭할 시 보여줄 페이지를 지정하는 함수이다.
44 ~ 60 줄
화면에 표시되는 버튼이다. 로그인 되었을 경우와 로그인 되지 않을 경우 보여주는 버튼이 다르게 처리하였다. 각 버튼은 클릭 시 changeView( )를 호출하며 특정 값을 넘겨준다. 이 값을 기준으로 표시될 화면을 구분한다.
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 | <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <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.jsp"; } else if(value == "1") // 로그인 버튼 클릭시 로그인 화면으로 이동 { location.href="MainForm.jsp?contentPage=member/view/LoginForm.jsp"; } else if(value == "2") // 회원가입 버튼 클릭시 회원가입 화면으로 이동 { location.href="MainForm.jsp?contentPage=member/view/JoinForm.jsp"; } else if(value == "3") // 로그아웃 버튼 클릭시 로그아웃 처리 { location.href="member/pro/LogoutPro.jsp"; } } </script> </head> <body> <div id = "wrap"> <p> <button class="btn btn-success" onclick="changeView(0)">HOME</button> <% // 로그인 안되었을 경우 - 로그인, 회원가입 버튼을 보여준다. if(session.getAttribute("sessionID")==null){ %> <button id="loginBtn" class="btn btn-primary" onclick="changeView(1)">로그인</button> <button id="joinBtn" class="btn btn-primary" onclick="changeView(2)">회원가입</button> <% // 로그인 되었을 경우 - 로그아웃, 내정보 버튼을 보여준다. }else{ %> <button id="logoutBtn" class="btn btn-primary" onclick="changeView(3)">로그아웃</button> <button id="updateBtn" class="btn btn-primary" >내정보</button> <% } %> <button id="memberViewBtn" class="btn btn-warning">회원보기</button> </p> </div> </body> </html> | cs |
■ LoginForm.jsp
변경 사항은 첨부된 소스 코드 참고
48 ~ 50 줄
취소 버튼 클릭 시 MainForm.jsp로 이동된다.
76 줄
기존 회원가입 버튼에서 취소 버튼으로 변경
■ LoginPro.jsp
변경 사항은 첨부된 소스 코드 참고
32 ~ 36 줄
MainForm.jsp에서는 contentPage라는 파라미터 값을 받아서 처리하므로 URL을 변경하였다.
■ LogoutPro.jsp
변경 사항은 첨부된 소스 코드 참고
10 줄
로그아웃 시 MainForm.jsp으로 돌아가도록 URL을 변경하였다.
■ JoinForm.jsp
변경 사항은 첨부된 소스 코드 참고
47 줄
취소 버튼 클릭 시 MainForm.jsp로 이동된다
■ JoinPro.jsp
변경 사항은 첨부된 소스 코드 참고
19 줄
CSS 파일의 경로를 변경하였다.
23 ~ 25 줄
확인 버튼 클릭 시 MainForm.jsp으로 돌아가도록 처리하였다.
100 줄
확인 버튼 클릭 시 이벤트 추가
3. 실행 결과
MainForm.jsp 실행 시 첫 화면이다. MainForm.jsp은 상, 중, 하단으로 구성되어 있다.
로그인 되었을 경우 FirstView.jsp에 로그인한 사용자를 표시한다. 그리고 상단의 버튼이 로그아웃, 내정보로 변경된다.
4. 소스코드 다운로드 (war파일)
JSP_DEV.war'코딩 > JSP' 카테고리의 다른 글
| [JSP개발] 회원가입 - MVC 패턴 적용 (5) | 2016.12.04 |
|---|---|
| [JSP개발] 회원탈퇴, 회원수정 구현 (10) | 2016.11.24 |
| [JSP개발] 회원가입 - 로그인, 로그아웃 구현 (10) | 2016.11.23 |
| [JSP개발] 회원가입 DB연동 (28) | 2016.11.22 |
| JSP에서 CSS 파일 불러오기 (0) | 2016.11.22 |
