Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - 2
JSP/Servlet과JSP로 사용자 관리 시스템 구현

Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - 2

반응형

Servlet/JSP로 사용자 관리 시스템 구현하기 과정 


강의 링크 : https://www.slipp.net/wiki/pages/viewpage.action?pageId=25526852



수업에서 진행되는 홈페이지는, 부트스트랩으로 만들었습니다. 실제 강의에서 홈페이지를 만들어가는 과정은 나오지 않고, 기존 틀을 만들었다는 가정하에 이어서 진행되고 있습니다.


따라서 githup에 올려주신 코드를 통해 eclipse로 가져와 수업에 필요한 부분만 커밋한 후 옮겨오는 과정을 진행하고 나서 수업을 들었습니다.


우선, 메인 페이지와 회원가입 페이지에 대한 내용은 아래와 같습니다.

( 부트스트랩 코드는 생략하도록 하겠습니다. ) 혹시 코드를 보시려면 제 github에 있는 코드를 확인하시면 됩니다.

<주소 : https://github.com/kim6394/Cadi_Webproject/tree/master/GSK/webapp/stylesheets>



index.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
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<%@include file="./commons/_head.jspf"%>
 
</head>
<body>
 
    <%@include file="../commons/_top.jspf"%>
    
    <header class="jumbotron subhead" id="overview">
    <div class="container">
        <h1>CADI 6기</h1>
        <p class="lead">Product Manager, Designer, App part, Web part</p>
    </div>
    </header>     
    
    <div class="container">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span6">
                    <h3>메인 페이지 (작성예정)</h3>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
cs



form.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
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<%@include file="../commons/_head.jspf"%>
 
</head>
<body>
    
    <%@include file="../commons/_top.jspf"%>
 
    <div class="container">
        <div class="row">
            <div class="span12">
                <section id="typography">
                <div class="page-header">
                    <h1>회원가입</h1>
                </div>
            
                
                <form class="form-horizontal" action="/form_action.jsp" method="post">
                    <div class="control-group">
                        <label class="control-label" for="userId">사용자 아이디</label>
                        <div class="controls">
                            <input type="text" name="userId" value="" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="password">비밀번호</label>
                        <div class="controls">
                            <input type="password" id="password" name="password" placeholder="">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="name">이름</label>
                        <div class="controls">
                            <input type="text" id="name" name="name" value="" placeholder="">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="email">이메일</label>
                        <div class="controls">
                            <input type="text" id="email" name="email" value="" placeholder="">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <button type="submit" class="btn btn-primary">회원가입</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
cs



일반적으로 구성되는 메인 페이지와 회원가입 페이지가 간단하고 깔끔하게 만들어진 모습입니다.


두 코드에서 공통되는 저게 뭐지?라고 생각되는 부분이 있을 수도 있습니다.


<%@include file="./commons/_head.jspf"%>
 
</head>
<body>
 
    <%@include file="../commons/_top.jspf"%>


이는 두 파일에서 공통되는 부분을 따로 프로젝트의 commons폴더에 작성해두고 include 기능을 통해 가져오는 모습입니다.


_head.jspf와 _top.jspf 코드는 아래와 같습니다.



_head.jspf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CADI :: 회원가입</title>
 
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<link href="/stylesheets/docs.css" rel="stylesheet">
<link href="/stylesheets/main.css" rel="stylesheet">
<style>
  body {
    padding-top: 40px;
  }
</style>
cs


_top.jspf

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
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
        <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="/">2018년 6기 CADI 진행중!</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
            
 <%
     Object userId = session.getAttribute("userId");
 %>
              <li><a href="/">Home</a></li>
<%
    if (userId == null) {
%>
              <li><a href="/login.jsp">로그인</a></li>
              <li><a href="/form.jsp">회원가입</a></li>
<%
    } else {
%>                               
              <li><a href="/logout.jsp">로그아웃</a></li>
              <li><a href="">개인정보수정</a></li>   
<%
    }
%>            
            </ul>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
cs


두 jsp에서 겹치는 부분을 이와 같이 따로 작성해두고, include를 통해 가져오면 훨씬 코드를 보기에 편한 장점이 있습니다.


head.jspf를 보면, 우리가 적용할 부트스트랩 코드를 가져오는 것도 확인할 수 있습니다.



이렇게 구성된 메인 홈페이지와 회원가입 창은 아래와 같이 나타납니다.




부트스트랩을 통해 깔끔한 UI로 보여지고 있습니다ㅎㅎ


이제 기본적인 틀이 만들어졌습니다! 별로 한 게 없는데 뭔가 홈페이지 같은 느낌이 어느정도 드는 것 같네요.


다음 시간에는 이어서 회원가입을 통해 입력한 값을 어떻게 저장해서 로그인에 활용하는지에 대해 알아보도록 하겠습니다.




반응형
저작자표시

'JSP > Servlet과JSP로 사용자 관리 시스템 구현' 카테고리의 다른 글

Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - 5  (0) 2018.07.23
Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - 4  (0) 2018.07.11
Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - TDD  (0) 2018.07.06
Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - 3  (0) 2018.07.06
Servlet/JSP로 사용자 관리 시스템 구현하기 과정 - 1  (0) 2018.07.06

    티스토리툴바