티스토리 뷰

프로그래밍/　　ㄴ실습

[게시판 만들기] 2. 로그인 화면을 위한 jsp 만들기

안싱미 2016. 3. 3. 17:01

게시판을 만들때 기존 웹사이트의 페이지를 참고하면 좋다. 아래 화면을 예로 들어보도록 하겠다. (http://blog.daum.net/)

한 페이지는 각각의 영역들이 모여서 구성된 것이다. 지금부터 만들 게시판도 각각의 영역별로 jsp를 만들어서 하나의 페이지에 보여주는
 이러한 형식으로 만들어볼 것이다.

먼저 프로젝트를 다음과 같이 구성한다.


common 폴더 안에 다음과 같이 jsp파일을 만들어서 index.jsp에 모두 포함시켜준다.

index.jsp

1
2
3
4
5
6
7
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
<jsp:include page="./WEB-INF/view/common/header.jsp"></jsp:include>
<jsp:include page="./WEB-INF/view/common/login.jsp"></jsp:include>
<jsp:include page="./WEB-INF/view/common/footer.jsp"></jsp:include>
cs

header.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/resource/css/header.css" />
<link rel="stylesheet" type="text/css" href="/resource/css/login.css" />
<script type="text/javascript" src="/resource/js/jquery-1.12.1.js"></script>
 
<title>회원제 게시판</title>
</head>
<body>
<!-- html이 제일 먼저 시작하는 페이지 -->
<div id="wrapper">
 
    <div id="header">
        <img src="/resource/img/icon.png" /> <div>안녕하세요. 회원제 게시판입니다. </div>    
    </div>
    <div class="clear"></div>
 
cs

login.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
 
    $(document).ready(function () {
        
        $("#btnLogin").click(function() {
            // validation check 생략
            var form = $("#loginForm");
            form.attr("method", "post");
            fomr.attr("action", "/doLogin");
            form.submit();
        });
    });
 
</script>        
        <div id="login">
            <form id="loginForm">
                <img src="/resource/img/login.png" id="btnLogin" />        
                <input type="password" id="userPw" name="userPw" placeholder="Password" />
                <input type="text" id="userId" name="userId" placeholder="ID" />
            </form>
        </div>
        <div class="clear"></div>
cs

footer.jsp

1
2
3
4
5
6
7
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
    </div>
    
</body>
</html>
cs



이제 클라이언트쪽 페이지를 모두 만들었으니, 서버쪽도 만들어야된다. 그 전에 구조를 먼저 살펴보자.

클라이언트와 서버는 http라는 것으로 대화를 한다.

그런데 http는 기억력이 안좋아서 방금 클라이언트가 어떤 요청을 했는지 기억하지 못한다. 그래서 모든 언어가 Session이라는 것을 지원한다.

Session 이란 클라이언트와 서버 간의 통신 기록을 가져갈수 있는 것을 말한다. 즉 로그인을 한번 했으면 다음 페이지를 넘어갈 때 항상 로그인했던 기록을 계속 가지고 갈 수 있는 것이다. (상태를 계속 저장함)


Q. Session은 서버에 임시적으로 저장이되지만, cookie는 클라이언트에 임시적으로 저장이 된다. 그러면 둘중 하나만하지 왜 헷갈리게 두개 다 만들어놨을까?

세션은 http가 지원하지 않는 상태를 기억하기 위해 만든 것이고, cookie는 사용자의 성향을 분석하기 위해 만든 것이다. 이 웹페이지에서 어떤 메뉴를 많이 가더라 라는 통계를 서버에서 내서 클라이언트에 심어주는 것이다. 그러면 그 정보를 가지고 어떤 정보를 사용자에게 맞게끔 보여줄 수가 있다.


이 구조대로 다음 포스팅에서 filter, servlet, biz, dao 를 만들어볼것이다.  오늘은 여기서 끝~~


'프로그래밍 > 　　ㄴ실습' 카테고리의 다른 글

[게시판 만들기] 4. 게시판 리스트 및 상세정보 조회, 조회수/추천수 업데이트 하기  (0) 2016.03.07
[게시판 만들기] 3. 로그인 시 멤버 정보 확인 및 세션 처리  (2) 2016.03.04
[게시판 만들기] 1. ToadForOracle(토드)를 이용해서 테이블 생성하기  (0) 2016.03.03
[영화정보 웹 만들기] 6. javascript로 validation check하기  (0) 2016.03.02
[영화정보 웹 만들기] 5. jQuery 문법, jquery를 이용하여 Actor 테이블에 데이터 삽입하기  (0) 2016.03.01
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함