#01. [Side Project 1] JSP 로그인, 게시판 만들기 (1) 로그인, 회원가입, ID체크 Model + View

프로그램이 커지면 커질수록 정리하기가 너무 어려워지기 때문에, 그 때 그 때 혹여 내가 까먹는 부분이 있을까 싶어 코드 공부, 정리 겸 정리해둔다. 글꼴이나 이런거 신경쓰기 어려운 점 참고 부탁 드린다. 훗날 기회가 된다면 예쁘게 바로 잡아 고치겠음. 우선 지금은 MVC Model 1 타입으로 짜는 중이다.

1. 로그인 View (Login.html)

나는 개인적으로 로그인 View를 예쁘게 하고 싶어서 Colorlib 사이트에서 참고하였다. 개인 프로젝트 주제에 대해 마음이 바뀔진 모르겠지만(?) 우선 나는 헬스 정보 커뮤니티를 만들고 싶어서(본인은 헬린이임) 배경화면과 분위기를 이렇게 조금 바꾸었다.

HTML, CSS 코드까지 다 넣으면 스크롤이 쥐콩만해지므로 핵심적인 부분만 기입하겠다.

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

<script type="text/javascript">
 
$("#_btnLogin").click(function () {
    // alert('click');
    if( $("#id").val().trim() == "") {
        alert("id를 입력해 주십시오");
        $("#id").focus();
    }
    else if( $("#pwd").val().trim() == "" ) {
        alert("pwd를 입력해 주십시오");
        $("#pwd").focus();
    }
    else{
        $("#frm").attr("action", "loginAf.jsp").submit();
    }
});
 
 
/* check box */
// cookie : String
// session : Object
 
let user_id = $.cookie("user_id");             // cookie를 꺼내온 것
if(user_id != null){                                    // 저장된 cookie가 있을 때
    //alert("cookie 있음");
    $("#id").val( user_id );
    $("#chk_save_id").attr("checked", "checked");         
}
 
$("#chk_save_id").click(function () {
    
    if( $("#chk_save_id").is(":checked") ){             // check-on 되었을 때
    //    alert('체크 되었음');
        /* cookie 저장 */
        if( $("#id").val().trim() == "" ){
            alert('id를 입력해 주세요');
            $("#chk_save_id").prop("checked", false);         // 일단 false로 check 없애주어야 함
        }
        else{                                                                     // 쿠키 저장되는 부분
            $.cookie("user_id", $("#id").val().trim(), { expires:7, path:'/'} );     // expires : 7 => 7일, -1은 무한대
 
        }
        
    }
    else{
    //    alert('체크 없어짐');
        /* cookie 삭제 */
        $.removeCookie("user_id", {path:'/'});
    }
    
});
 
 
 
</script>
 
Colored by Color Scripter

cs

로그인 버튼을 클릭했을 때, 그리고 아이디를 쿠키로 저장하여 다시 기입하는 번거로움을 조금 덜 수 있게 코딩하였다.

2. 로그인 View (loginAf.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 import="dto.MemberDto"%>
<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
 <%
 String id = request.getParameter("id");
 String pwd = request.getParameter("pwd");
 
 // System.out.println("id:" + id + "pwd" + pwd);                    // 확인용
 
 %>   
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loginAf.jsp</title>
</head>
<body>
 
<%
MemberDao dao = MemberDao.getInstance();
 
MemberDto mem = dao.login(id, pwd);
 
if(mem != null && !mem.getId().equals("")){
    // login 정보 저장
    // => session에 저장한다
    session.setAttribute("login", mem);
    session.setMaxInactiveInterval(30 * 60 * 60);             // 시간
    
    %>
    
    <script type="text/javascript">
    alert("안녕하세요 <%=mem.getName() %>님");
    location.href = "./bbslist.jsp";
    </script>
    <%
}else{
    %>
    <script type="text/javascript">
    alert(" id나 password를 확인하십시오 ");
    location.href = "./Login/Login.html";
    </script>
    <%
}
%>
 
</body>
</html>
Colored by Color Scripter

cs

세션을 통해 login 정보를 저장한 후, 로그인 했을 때 alert으로 다정하게 내 이름을 불러준다. 물론, 이 전에 MemberDao를 통해 DB와 연동을 해주었다.

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import db.DBClose;
import db.DBConnection;
import dto.MemberDto;

public class MemberDao {

	private static MemberDao dao = new MemberDao();
	
	private MemberDao() {
		DBConnection.initConnection();
	}
	public static MemberDao getInstance() {
		return dao;
	}
	
	public boolean getId(String id) {	
		// id 확인 -> true/false 
		String sql = " SELECT ID FROM MEMBER "
				+ " WHERE ID=? ";
	//	String sql = " SELECT COUNT(*) FROM MEMBER "	// 이렇게 할 수도 있음
	//				+ " WHERE ID=? ";
		
		Connection conn = null;
		PreparedStatement psmt = null;
		ResultSet rs = null;
		
		boolean findid = false;
		
		try {
			conn = DBConnection.getConnection();
			System.out.println("1/6 getId success");
				
			psmt = conn.prepareStatement(sql);
			System.out.println("2/6 getId success");
			
			psmt.setString(1, id.trim());
			
			rs = psmt.executeQuery();
			System.out.println("3/6 getId success");
			
			if(rs.next()) {		// 찾았다
				findid = true;
			}			
			
		} catch (SQLException e) {			
			e.printStackTrace();
			System.out.println("getId fail");
		} finally {
			DBClose.close(psmt, conn, rs);			
		}
		
		return findid;
	}
	public boolean addMember(MemberDto dto) {
		// 회원가입의 데이터 -> DB
		String sql = " INSERT INTO MEMBER "
				+ "	(ID, PWD, NAME, EMAIL, AUTH) "
				+ " VALUES(?, ?, ?, ?, 3) ";
		
		Connection conn = null;
		PreparedStatement psmt = null;		
		int count = 0;
		
		try {
			conn = DBConnection.getConnection();
			System.out.println("1/6 addMember success");
				
			psmt = conn.prepareStatement(sql);
			System.out.println("2/6 addMember success");
			
			psmt.setString(1, dto.getId());
			psmt.setString(2, dto.getPwd());
			psmt.setString(3, dto.getName());
			psmt.setString(4, dto.getEmail());
			
			count = psmt.executeUpdate();
			System.out.println("3/6 addMember success");
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			System.out.println("addMember fail");
		} finally {
			DBClose.close(psmt, conn, null);			
		}
		
		return count>0?true:false;
	}
	
	public MemberDto login(String id, String pwd)  {  
	/*public MemberDto login(MemberDto dto)  { // 이것도 가능 */
	
		String sql = " SELECT ID, NAME, EMAIL, AUTH "
						+ " FROM MEMBER "
						+ " WHERE ID=? AND PWD=? ";
		
		Connection conn = null;
		PreparedStatement psmt = null;
		ResultSet rs = null;
		
		MemberDto dto = null;
		
		try {
			conn = DBConnection.getConnection();
			System.out.println("1/6 login success"); 			// 깃대
			
			psmt = conn.prepareStatement(sql);
			psmt.setString(1, id);
			psmt.setString(2, pwd);
			System.out.println("2/6 login success");
			
			rs = psmt.executeQuery(); 								// select 이므로
			// auth 는 왜 얻어오나? : 관리자페이지 / 유저페이지로 각각 다르게 보내주기 위해
			System.out.println("3/6 login success");
			
			if(rs.next()) {
				String user_id = rs.getString(1); 							// DB는 1번부터 간다
				String name = rs.getString(2);
				String email = rs.getString(3);
				int auth = rs.getInt(4);
				
				// 생성
				dto = new MemberDto(user_id, null, name, email, auth); // 안전성을 위해 PW는 빼는 것이 좋다
			}
			System.out.println("4/6 login success");
		
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBClose.close(psmt,  conn, rs);
		}
		
		return dto;
		
	}
	
	
	
	
	
}

3. 회원가입 View (regi.jsp)

회원가입 창이다. 기입하면 DB로 데이터가 넘어가고, 로그인이 가능해진다. 역시 HTML 부분은 생략하고 javaScript부분만 메모하겠다.

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

 
<script type="text/javascript">
$(function () {
    
    $("#btn").click(function () {
        // alert("btn click");
    
        $.ajax({
            type:"post",
            url:"./idcheck.jsp",
        //    data:"id=" + $("#id").val(),
            data:{ "id":$("#id").val() },
            success:function( data ){
                alert("success");
            //    alert(data.trim());
                if(data.trim() == "YES"){
                    $("#idcheck").css("color", "#0000ff");
                    $("#idcheck").html('사용할 수 있는 id입니다');
                }else{
                    $("#idcheck").css("color", "#ff0000");
                    $("#idcheck").html('사용 중인 id입니다');
                    $("#id").val("");
                }            
            },
            error:function(){
                alert("error");
            }
        });
        
    });
    
});
</script>
 
Colored by Color Scripter

cs

 
4. 회원가입 View (regiAf.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 import="dto.MemberDto"%>
<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
 
<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String name = request.getParameter("name");
String email = request.getParameter("email");
 
System.out.println("id:" + id);
System.out.println("pwd:" + pwd);
 
%>    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<%
MemberDao dao = MemberDao.getInstance();
 
boolean isS = dao.addMember(new MemberDto(id, pwd, name, email, 0));
 
if(isS){
%>
    <script type="text/javascript">
    alert("성공적으로 가입되었습니다");
    location.href = "./Login.html";
    </script>
<%
}else{
%>
    <script type="text/javascript">
    alert("다시 기입해 주십시오");
    location.href = "regi.jsp";
    </script>
<%
}
%>
 
</body>
</html>
 
 
 
 
 
 
Colored by Color Scripter

cs


 
 
5. 게시판 리스트 View (bbslist.jsp)

아직 DB에 Content를 못 넣은 상태다. 이제 곧 넣을거임......

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

<%@page import="dto.BbsDto"%>
<%@page import="java.util.List"%>
<%@page import="dao.BbsDao"%>
<%@page import="dto.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
Object ologin = session.getAttribute("login");
MemberDto mem = null;
if(ologin == null) {
    %>
    <script type="text/javascript">
        alert("로그인 해 주세요");
        location.href = "login.jsp";    
        </script>
    <%
}
mem = (MemberDto)ologin;
 
BbsDao dao = BbsDao.getInstance();
 
List<BbsDto> list = dao.getBbsList();
 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bbslist.jsp</title>
</head>
<body>
<!-- bbslist.jsp 페이지입니다 -->
 
<h4 align="right" style="background-color: #f0f0f0">
    환영합니다 <%=mem.getId() %>
</h4>
 
<h1> 게시판 </h1>
 
<div align="center">
 
<table border="1">
<col width="70"><col width="600"><col width="150">
<tr>
    <th>번호</th><th>제목</th><th>작성자</th>
</tr>
 
<%
if(list == null || list.size() == 0){        // 글이 없었을 때
    %>
    <tr>
        <td colspan="3">작성된 글이 없습니다</td>
    </tr>
    <%
} else {
    
        for(int i = 0; i < list.size(); i++){    
            BbsDto bbs = list.get(i);                            // 하나씩 bbs가 넘어온다
        %>
        <tr>
            <th> <%=i+1 %></th>
            <td>
                <a href="bbsdetail.jsp?seq=<%=bbs.getSeq() %>">            <!-- // 글에 대한 번호는 가지고 가야한다!  -->
                    <%=bbs.getTitle() %>
                </a>
            </td>
            <td align="center"><%=bbs.getId() %></td>
        </tr>
 
<%
        }
}
%>
 
</table>
</div>
 
 
<a href="bbswrite.jsp">글쓰기</a>
 
 
 
</body>
</html>
Colored by Color Scripter

cs

5. 게시판 글쓰기 View (bbswrite.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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 
<!-- jQuery -->
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 
<!-- Bootstrap CSS -->
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
 
<title>Board</title>
</head>
<body>
 
<script>
 
    $(document).on('click', '#btnSave', function(e){
        e.preventDefault();
        $("#form").submit();
 
    });
 
    $(document).on('click', '#btnList', function(e){
        e.preventDefault();
        location.href="${pageContext.request.contextPath}/board/getBoardList";
    });
 
</script>
 
<style>
 
body {
  padding-top: 70px;
  padding-bottom: 30px;
}
 
</style>
</head>
<body>
    <article>
 
        <div class="container" role="main">
 
            <h1> <b> 글 작성 </b></h1> 
            <br><br>
 
            <form name="form" id="form" role="form" method="post" action="${pageContext.request.contextPath}/board/saveBoard">
                <div class="mb-3">
                    <label for="title">제목</label>
                    <input type="text" class="form-control" name="title" id="title" placeholder="제목을 입력해 주세요">
                </div>
 
                
                <div class="mb-3">
                    <label for="reg_id">작성자</label>
                    <input type="text" class="form-control" name="reg_id" id="reg_id" placeholder="이름을 입력해 주세요">
                </div>
 
                
                <div class="mb-3">
                    <label for="content">내용</label>
                    <textarea class="form-control" rows="7" name="content" id="content" placeholder="내용을 입력해 주세요" ></textarea>
                </div>
 
                <div class="mb-3">
                    <label for="tag">TAG</label>
                    <input type="text" class="form-control" name="tag" id="tag" placeholder="태그를 입력해 주세요">
                </div>
 
            </form>
            <div >
                <button type="button" class="btn btn-sm btn-primary" id="btnList">목록</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSave">저장</button>
 
            </div>
        </div>
    </article>
</body>
 
</html>
Colored by Color Scripter

cs

아직 미완성. 다음 이시간에 ,,,,,

■ 유용하게 쓰일 idcheck.jsp

<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
String id = request.getParameter("id");
System.out.println("id:" + id);

MemberDao dao = MemberDao.getInstance();
boolean b = dao.getId(id);

if(b == true){	// id가 없음
	out.println("NO");	
}else{			// id가 없음
	out.println("YES");
}
%>

■ DB 테이블

DROP TABLE BBS
CASCADE CONSTRAINTS;

DROP SEQUENCE SEQ_BBS;

CREATE TABLE BBS( 
		SEQ NUMBER(8) PRIMARY KEY,
		ID VARCHAR2(50) NOT NULL,
		
		REF NUMBER(8) NOT NULL,
		STEP NUMBER(8) NOT NULL,
		DEPTH NUMBER(8) NOT NULL,
		
		TITLE VARCHAR2(200) NOT NULL,
		CONTENT VARCHAR2(4000) NOT NULL,
		WDATE DATE NOT NULL,
		
		DEL NUMBER(1) NOT NULL,
		READCOUNT NUMBER(8) NOT NULL

);


CREATE SEQUENCE SEQ_BBS
START WITH 1
INCREMENT BY 1;

ALTER TABLE BBS
ADD CONSTRAINT FK_BBS_ID FOREIGN KEY(ID)
REFERENCES MEMBER(ID);

※ REF = Seq가 들어간다

String sql = " INSERT INTO BBS "
				+ " (SEQ, ID, REF, STEP, DEPTH, "
				+ " TITLE, CONTENT, WDATE, "
				+ " DEL, READCOUNT) "
				+ " VALUES( SEQ_BBS.NEXTVAL, ?, "
							+ " (SELECT NVL( MAX(REF), 0 )+1 FROM BBS), 0, 0, "
							+ " ?, ?, SYSDATE, "
							+ " 0, 0) ";

※ 해석 : 서브쿼리부터 실행, MAX(REF) 가 null이 나올 때 0을 대입한다. 0을 대입하고 +1을 해주니 1이 들어간다. 그 다음에 REF값이 SEQ_BBS.NEXTVAL에 들어간다. 고로, MAX(REF) 값과 SEQ_BBS.NEXTVAL과 같은 값을 가질 수 있다.

세션에 있는 ID를 넣어주는 것이며, TITLE, CONTENT는 작성자로부터 받아온다.

저작자표시

'Side Project' 카테고리의 다른 글

#06. [Side Project 1] JSP 로그인, 게시판 만들기 (6) :: 글 삭제 (0)	2020.07.30
#05. [Side Project 1] JSP 로그인, 게시판 만들기 (5) :: 글 내용 Detail 자세히 보기 (0)	2020.07.30
#04. [Side Project 1] JSP 로그인, 게시판 만들기 (4) :: 답글, 댓글, (0)	2020.07.30
#03. [Side Project 1] JSP 로그인, 게시판 만들기 (3) :: 글 목록, List, 조회수 (0)	2020.07.30
#02. [Side Project 1] JSP 로그인, 게시판 만들기 (2) :: 글 작성, 글쓰기 (0)	2020.07.30

고목나무 매미의 라이프

#01. [Side Project 1] JSP 로그인, 게시판 만들기 (1) 로그인, 회원가입, ID체크 Model + View

1. 로그인 View (Login.html)

2. 로그인 View (loginAf.jsp)

3. 회원가입 View (regi.jsp)

4. 회원가입 View (regiAf.jsp)

5. 게시판 리스트 View (bbslist.jsp)

5. 게시판 글쓰기 View (bbswrite.jsp)

■ 유용하게 쓰일 idcheck.jsp

■ DB 테이블

'Side Project' 카테고리의 다른 글

티스토리툴바

#01. [Side Project 1] JSP 로그인, 게시판 만들기 (1) 로그인, 회원가입, ID체크 Model + View

1. 로그인 View (Login.html)

2. 로그인 View (loginAf.jsp)

3. 회원가입 View (regi.jsp)

4. 회원가입 View (regiAf.jsp)

5. 게시판 리스트 View (bbslist.jsp)

5. 게시판 글쓰기 View (bbswrite.jsp)

■ 유용하게 쓰일 idcheck.jsp

■ DB 테이블

'Side Project' 카테고리의 다른 글

'Side Project' Related Articles

티스토리툴바