44일차//JSP// MVC Model 1 // 로그인 게시판 만들기⭕(1) idcheck Model + View

HTML

44일차//JSP// MVC Model 1 // 로그인 게시판 만들기⭕(1) idcheck Model + View

aesup 2021. 3. 17. 00:24

728x90

mvc모델 1타입으로 짜다가 모델 2타입으로 짜다가 너무 정신이 없어서 정리한다.

1.로그인 View (login.jsp)

간단하고 심플한 로그인 화면을 만들기 위해 핀터레스트와 구글링을 통해 비스므리 만들어보았다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JAVA developers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="RoginPageJava.css">
    
    <script src="https://kit.fontawesome.com/51db22a717.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
    
    <script src="http://lab.alexcican.com/set_cookies/cookie.js" type="text/javascript" ></script>

</head>
<body>
<form action="loginAf.jsp" method = "post">
	 <div class="page-container">
        <div class="login-form-container shadow">
            <div class="login-form-right-side">
                <div class="top-logo-wrap">
                    
                </div>
                <h1><b>Welcome to the <br>Backend Developers Site</b></h1>
                <h4>지금 바로 백엔드 개발자분들과 소통해요!</h4>
            </div>
            <div class="login-form-left-side">
                <div class="login-top-wrap">
                    <span>계정이 없으신가요?</span>
                    <button type = "button" class="create-account-btn shadow-light" onclick = "account()">회원가입</button>
                </div>
                
                <div class="login-input-container">
                <h3 class="heading text__web-h5 grid-panel-web__title" data-testid="panel-title">
                	로그인</h3>
                	
                	       	
                	
                	
                    <div class="login-input-wrap input-id">
                        <i class="far fa-envelope"></i>
                        <input placeholder="계정이름" id = "_id" name ="id" class = "idname" type="text">
                    </div>
                
                     
                     
                                    
                    <div class="login-input-wrap input-password">
                        <i class="fas fa-key"></i>
                        <!-- 비밀번호 입력 갯수 제한 -->
                        <input placeholder="비밀번호" id = "_pass" name ="pwd"  class = "idname" maxlength = "10" type="password">
                    </div>
                    <br>
                    <div class="login-top-wrap">
                    
                    <input type="checkbox" class="checkbox" id = "chk_save_id"><span> &nbsp;Remember your id</span>
                    <input type="checkbox" class="checkbox"><span> &nbsp;Keep login</span>
                    </div>
                </div>
                		
                <div class="login-btn-wrap">
                
                <button class="btn btn-lg btn-primary btn-block" type="submit"
                		>로그인 하기</button>
                  
                    <a href="#" >비밀번호찾기</a>
                </div>
            </div>
        </div>
    </div>
    </form>

<script type="text/javascript">



/* function rogbtn(){
	/* if($("#idname").val() == ""){
		alert("계정이름을 입력해주세요!");
	} */
	
	
	
	
	


function account() {
	location.href = "regi.jsp";
	
}



let user_id = $.cookie("user_id");
if(user_id != null){
	//저장된 아이디가 있다면
	//alert("쿠키있음");
	//확인용
	
	$("#_id").val(user_id);
	$("#chk_save_id").attr("checked","checked");
}


$("#chk_save_id").click(function() {
	

	if( $("#chk_save_id").is(":checked")){
		//체크가 되어있을때
		
		alert("체크됨");
		
		if($("#_id").val().trim() == ""){
			alert("아이디를 입력해주세요");
			$("#chk_save_id").prop("checked",false);
			//체크를 없애줘라 아이디가 없으면
			
		}else{//쿠키저장 아이디가 눌값이 아닐때
			$.cookie("user_id",$("#_id").val().trim(), {expires:7, path:'./'});
			
	}
		
	}else{
		$.removeCookie("user_id", {path:'./'})
	}
		
});



</script>


</body>
</html>

2.로그인 후 View (loginAf.jsp)

세션을 통해 login 정보를 저장한다

로그인 성공시 alert창을 통해 사용자이름과 함께 안녕하세요란 창이 뜬다.

MemberDao를 불러온후 - > MemberDto를 불러와 dao에 있는 login 함수를 실행해서

sql이 조건에 맞는지 확인하도록한다.

public MemberDto login(MemberDto dto) {
		
		String sql = " SELECT ID, NAME, EMAIL, AUTH "
				+ " FROM MEMBER "
				+ " WHERE ID=? AND PWD=? ";

dto가 null값으로 나올경우 해당 아이디와 로그인이 SELECT되지 않았기 때문에

로그인을 다시해야한다.

<%@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");
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
MemberDao dao = MemberDao.getInstance();

MemberDto dto = dao.login(new MemberDto(id, pwd, null, null, 0));

if(dto != null && !dto.getId().equals("")){

	
	//session 에 로그인정보 저장

	
	session.setAttribute("login", dto);
	//session.setMaxInactiveInterval(30*60*60);
	%>
	

	
	<script type="text/javascript">
	alert("안녕하세요 <%=dto.getId() %>님");
	location.href = "bbslist.jsp";
	</script>
	<%
}else{
	%>
	<script type="text/javascript">
	alert("id나 password를 확인하세요");
	location.href = "login.jsp";
	</script>
	<%
}
%>


</body>
</html>

db.DBConnection

package db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
	public static void initConnection() {
		
		try {
			Class.forName("oracle.jdbc.driver.OracleDriver");
			//Class.forName() 을 이용해서 드라이버 로드
			
			System.out.println("Driver Loading Success");
			
		} catch (ClassNotFoundException e) {
			
			System.out.println("Driver가 없습니다");
			
		}
		
	}
	
	
	public static Connection getConnection() {
		//static 붙여준이유는 언제 어디서든 불러 올 수 있게 한다
		Connection conn = null;
		
		try {
			conn = DriverManager.getConnection("jdbc:oracle:thin:@192.168.0.2:1521:xe", "hr","hr");
													//주소는 DB 우클릭  Properties에서 가져온다.
			System.out.println("Oracle Connection Success");
			
		} catch (SQLException e) {
			
			System.out.println("DB를 연결하지 못했습니다");
		}
		
		return conn;
				
	}
}

db.DBClose

package db;

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

public class DBClose {
	public static void close(Connection conn, Statement stmt, ResultSet rs) {
		
		try {
			
			if(conn != null) {
				conn.close();
			}
			if(stmt != null) {
				stmt.close();
			}
			if(rs != null) {
				rs.close();
			}
			
			conn.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
}

3.로그인 확인 Dao

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 addMember(MemberDto dto) {
		
		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/3 addMember success");
				
			psmt = conn.prepareStatement(sql);
			System.out.println("2/3 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/3 addMember success");
			
		} catch (SQLException e) {			
			e.printStackTrace();
			System.out.println("addMember fail");
		} finally {
			DBClose.close(conn, psmt, null);			
		}
		
		return count>0?true:false;
	}
	
	public boolean getId(String id) {
		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;
		
	//	String findid = null;
		boolean findid = false;
				
		try {
			conn = DBConnection.getConnection();
			System.out.println("1/3 getId success");
			
			psmt = conn.prepareStatement(sql);
			psmt.setString(1, id.trim());
			System.out.println("2/3 getId success");
			
			rs = psmt.executeQuery();
			System.out.println("3/3 getId success");
			
			if(rs.next()) {
				findid = true;
			}			
			
		} catch (SQLException e) {
			System.out.println("getId fail");
			e.printStackTrace();
		} finally {
			DBClose.close(conn, psmt, rs);			
		}
		
		return findid;
	}

MemerDao login 함수 (MemerDao)

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 mem = null;
		
		try {
			conn = DBConnection.getConnection();
			psmt = conn.prepareStatement(sql);
			System.out.println("1/6 login suc");
			
			psmt.setString(1, dto.getId());
			psmt.setString(2, dto.getPwd());
			
			System.out.println("2/6 login suc");
			
			rs = psmt.executeQuery();
			
			if(rs.next()) {
				String id = rs.getString(1);
				String name = rs.getString(2);
				String email = rs.getString(3);
				int auth = rs.getInt(4);
				
				mem = new MemberDto(id, null, name, email, auth);				
			}
			
			System.out.println("3/6 login suc");
			
		} catch (Exception e) {
			System.out.println("login fail");
			e.printStackTrace();
		} finally {
			DBClose.close(conn, psmt, rs);			
		}
				
		return mem;
	}

4. 회원가입(regi.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.center{
	margin: auto;
	width: 60%;
	border: 3px solid #0000ff;
	padding: 10px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>

<h2>회원가입</h2>
<p>환영합니다. 자바 개발자들의 홈페이지입니다</p>

<div class="center">

<form action="regiAf.jsp" method="post">

<table border="1">
<tr>
	<td>아이디</td>
	<td>
		<input type="text" name="id" id="_id" size="20"><br>		
		<!-- id확인(ajax) p, button-->		
		<p id="idcheck" style="font-size: 8px"></p>
		<input type="button" id="btn" value="id확인">		
	</td>
</tr>
<tr>
	<td>패스워드</td>
	<td>
		<input type="text" name="pwd" id="_pwd" size="20">
	</td>
</tr>
<tr>
	<td>이름</td>
	<td>
		<input type="text" name="name" size="20">
	</td>
</tr>
<tr>
	<td>이메일</td>
	<td>
		<input type="text" name="email" size="20">
	</td>
</tr>
<tr>
	<td colspan="2">
		<input type="submit" value="회원가입">
	</td>
</tr>

</table>


</form>

</div>

<script type="text/javascript">
$(function () {
	
	$("#btn").click(function () {
		
		$.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>

</body>
</html>

로그인 뷰 말고는 아직 css를 입히지 못했다..

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");
}

%>

5. 회원가입(regiAf.jsp)

<%@page import="dto.MemberDto"%>
<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>    
    

<!-- DB에 데이터를 추가 -->
<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String name = request.getParameter("name");
String email = request.getParameter("email"); 

System.out.println(id + " " + pwd + " " + name + " " + email);


%>


<!-- 이동 -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>regiAf.jsp</title>
</head>
<body>

<%
MemberDao dao = MemberDao.getInstance();

MemberDto dto = new MemberDto(id, pwd, name, email, 0);
boolean isS = dao.addMember(dto);
if(isS){
	%>
	<script type="text/javascript">
	alert("성공적으로 가입되었습니다");
	location.href = "login.jsp";
	</script>
	<%
}else{
	%>
	<script type="text/javascript">
	alert("다시 기입해 주십시오");
	location.href = "regi.jsp";
	</script>
	<%
}
%>




</body>
</html>

6. 로그인 성공시 게시판 리스트로 이동 VIEW (bbslist.jsp)

<%@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>
	alert('로그인 해 주십시오');
	location.href = "login.jsp";
	</script>	
	<%
}
mem = (MemberDto)ologin;
%>

<%!
// 댓글의 depth와 image를 추가하는 함수	
// depth = 1   ' '->	
// depth = 2   '  '->
public String arrow(int depth){
	String rs = "<img src='./image/arrow.png' width='20px' heiht='20px'>";
	String nbsp = "&nbsp;&nbsp;&nbsp;&nbsp;";	// 여백
	
	String ts = "";
	for(int i = 0;i < depth; i++){
		ts += nbsp;
	}
	
	return depth==0 ? "":ts + rs;	
}

%>


<%
// dao부터 list
BbsDao dao = BbsDao.getInstance();

List<BbsDto> list = dao.getBbslist();
System.out.println("dao부터 list");
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bbslist(Bulletin Board System) = 전자 게시판</title>
</head>
<body>
 <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);
		%>
		<tr>
			<th><%=i + 1 %></th>
			<td>
				<%=arrow(bbs.getDepth()) %>		<!-- 여백 + 이미지 -->
				<a href="bbsdetail.jsp?seq=<%=bbs.getSeq() %>">
					<%=bbs.getTitle() %>
				</a>
			</td>
			<td><%=bbs.getId() %></td>
		</tr>
		<%
	}
}
%>
</table>

<br><br>
<a href="bbswrite.jsp">글쓰기</a>

</div>


</body>
</html>

7. 게시판 글쓰기 VIEW (bbswrite.jsp)

<%@page import="dto.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bbswrite.jsp</title>
</head>
<body>
<%
MemberDto mem = (MemberDto)session.getAttribute("login");
if(mem == null){
	response.sendRedirect("login.jsp");
	%>
	<script type="text/javascript">
	location.href = "";
	</script>
	<%
}
%>  

<a href="logout.jsp">로그 아웃</a>

<h1>글쓰기</h1>

<div align="center">

<form action="bbswriteAf.jsp" method="post">

<table border="1">
<col width="200"><col width="400">

<tr>
	<th>아이디</th>
	<td>
		<%-- <input type="text" name="id" size="50px" value="<%=mem.getId() %>"> --%>
		<input type="text" name="id" size="50px" value=${login.id } readonly="readonly">
	</td>
</tr>

<tr>
	<th>제목</th>
	<td>
		<input type="text" name="title" size="50px">
	</td>
</tr>

<tr>
	<th>내용</th>
	<td>
		<textarea rows="20" cols="50px" name="content"></textarea>
	</td>
</tr>
<tr>
	<td colspan="2">
		&nbsp;&nbsp;<input type="submit" value="글쓰기">
	</td>
</tr>

</table>

</form>
</div>

<a href="bbslist.jsp">글목록</a>


</body>
</html>

728x90

저작자표시 비영리 변경금지 (새창열림)