본문 바로가기
HTML

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

by aesup 2021. 3. 17.
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
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

48일차//JSP// FileItem 인터페이스 ( 자료실 파일 업로드, 올리기)💨  (0) 2021.03.22
48일차//jsp// 게시판 파일업로드..enctype = "multipart/form-data"  (0) 2021.03.22
jsp (JavaServer Pages)란 무엇인가?  (0) 2021.03.12
ajax란?  (0) 2021.03.12
42일차// jsp설문지를 작성하여 jsp페이지로 데이터 넘겨주기(파라미터 넘기기)  (0) 2021.03.12

관련글

티스토리툴바