BoardProject 0428.zip
1.99MB

인덱스 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
<body>
	<%
		if (session.getAttribute("loginInfo") != null) {
	%>
	<%=session.getAttribute("loginInfo")%>님 환영합니다!
	<button id="mypage">마이페이지</button>
	<button id="Logout">로그아웃</button>
	<button id="memberout">회원탈퇴</button>
	<script>
		$("#mypage").on("click", function() {
			location.href = "mypageView.jsp";
		})
		$("#Logout").on("click", function() {
			location.href = "LogoutController";
		})
		$("#memberout").on("click", function() {
			if (confirm("정말로 회원탈퇴를 하시겠습니까?")) {

				location.href = "MemberoutController";
			}
		})
	</script>
	<%
		} else {
	%>

	<div class="wrapper">
		<form action=LoginController method="post">
			<table align=center border="1px" style="text-align: center">
				<tr>
					<td><b>Login</b></td>
				</tr>
				<tr>
					<td><input type="text" name="id" placeholder="Input your ID"></td>
				</tr>
				<tr>
					<td><input type="password" name="pw"
						placeholder="Input your PW"></td>
				</tr>
				<tr>
					<td><input type="submit" id="login" value="Login"> <input
						type="button" id="signup" value="Sign up"><br> <input
						type="checkbox">Remember my ID</td>
				</tr>
			</table>
		</form>
	</div>
	<script>
		$("#signup").on("click", function() {
			location.href = "signup.jsp"
		})
		$("#login").on("click", function() {
			location.href = "LoginCheckController"
		})
	</script>

	<%
		}
	%>


</body>
</html>

 

 

마이페이지뷰.jsp - 컨트롤러로?

<%@page import="kh.backend.dto.memberDTO"%>
<%@page import="java.util.List"%>
<%@page import="kh.backend.dao.memberDAO"%>
<%@ 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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
	<table border=1 align=center>

		<%
		memberDAO dao = new memberDAO();
		String id = (String)request.getSession().getAttribute("loginInfo");
		List<memberDTO> list = dao.memberInfo(id);
		for (memberDTO dto : list) {
		%>
		<tr>
			<td>아이디</td>
			<td><%=dto.getId()%>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td>
		</tr>
		<tr>
			<td>이름</td>
			<td><%=dto.getName()%>
		</tr>
		<tr>
			<td>전화번호</td>
			<td><%=dto.getPhone()%>
		</tr>
		<tr>
			<td>이메일</td>
			<td><%=dto.getEmail()%>
		</tr>
		<tr>
			<td>우편번호</td>
			<td><%=dto.getZipcode()%>
		</tr>
		<tr>
			<td>주소1</td>
			<td><%=dto.getAddress1()%>
		</tr>
		<tr>
			<td>주소2</td>
			<td><%=dto.getAddress2()%>
		</tr>
		</tr>
		<%
		}
		%>

		<tr>
			<td colspan=4 align=center><button id="back">돌아가기</button>
		</tr>
	</table>
	<script>
			document.getElementById('back').onclick = function() {
				location.href = 'index.jsp';
			}
		</script>
</body>
</html>

 

DAO - dao.memberInfo(id) : 아이디로 정보 가져오기

	public List<memberDTO> memberInfo(String id) throws Exception{
		String sql = "select * from member where id=?";
		try(
				Connection con = getConnection();
				PreparedStatement pstat = con.prepareStatement(sql);
				) {
			pstat.setString(1, id);
			ResultSet rs = pstat.executeQuery();
			List<memberDTO> sdt = new ArrayList<>();
			while(rs.next()) {
				String pw = rs.getString("pw");
				String name = rs.getString("name");
				String phone = rs.getString("phone");
				String email = rs.getString("email");
				String zipcode = rs.getString("zipcode");
				String address1 = rs.getString("address1");
				String address2 = rs.getString("address2");
				sdt.add(new memberDTO(id,pw,name,phone,email,zipcode,address1,address2));
			}

			return sdt;
		}
	}

 

'디지털 컨버전스 > Project' 카테고리의 다른 글

[FrontController]  (0) 2020.05.01
[BoardProject] 정보 수정  (0) 2020.05.01
[BoardProject] 회원 탈퇴  (0) 2020.04.29
[BoardProject] 로그인  (0) 2020.04.29
[BoardProject] 로그인 인증 저장  (0) 2020.04.29

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
<body>
	<%
		if (session.getAttribute("loginInfo") != null) {
	%>
	<%=session.getAttribute("loginInfo")%>님 환영합니다!
	<button id="Logout">로그아웃</button>
	<button id="memberout">회원탈퇴</button>
	<script>
		$("#Logout").on("click", function() {
			location.href = "LogoutController";
		})
		$("#memberout").on("click", function() {
			if(confirm("정말로 회원탈퇴를 하시겠습니까?")){

				location.href = "MemberoutController";
			}
		})
	</script>
	<%
		} else {
	%>

	<div class="wrapper">
		<form action=LoginController method="post">
			<table align=center border="1px" style="text-align: center">
				<tr>
					<td><b>Login</b></td>
				</tr>
				<tr>
					<td><input type="text" name="id" placeholder="Input your ID"></td>
				</tr>
				<tr>
					<td><input type="password" name="pw"
						placeholder="Input your PW"></td>
				</tr>
				<tr>
					<td><input type="submit" id="login" value="Login"> <input
						type="button" id="signup" value="Sign up"><br> <input
						type="checkbox">Remember my ID</td>
				</tr>
			</table>
		</form>
	</div>
	<script>
		$("#signup").on("click", function() {
			location.href = "signup.jsp"
		})
		$("#login").on("click", function() {
			location.href = "LoginCheckController"
		})
	</script>

	<%
		}
	%>


</body>
</html>

 

 

MemberoutController

package kh.backend.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kh.backend.dao.memberDAO;
import kh.backend.dto.memberDTO;

/**
 * Servlet implementation class MemberoutController
 */
@WebServlet("/MemberoutController")
public class MemberoutController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		memberDAO dao = new memberDAO();
		String id = (String)request.getSession().getAttribute("loginInfo");
				
		try {
			int result = dao.memberOut(id);	//삭제할 글번호 받아오기
		
				request.getSession().invalidate();
				response.sendRedirect("index.jsp");
			
            
		}catch(Exception e) {
			e.printStackTrace();
			response.sendRedirect("error.jsp");
		}

	
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

 

DAO

	public int memberOut(String id) throws Exception{
		String sql = "delete from member where id=?";
		try(Connection con = this.getConnection();	
				PreparedStatement pstat = con.prepareStatement(sql);) {
			pstat.setString(1, id);
			int result = pstat.executeUpdate();
			con.commit();
			return result;
		}
	}

 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
<body>
	<%
		if (session.getAttribute("loginInfo") != null) {
	%>
	<%=session.getAttribute("loginInfo")%>님 환영합니다!
	<button id="Logout">로그아웃</button>
	<script>
		$("#Logout").on("click", function() {
			location.href = "LogoutController";
		})
	</script>
	<%
		} else {
	%>

	<div class="wrapper">
		<form action=LoginController method="post">
			<table align=center border="1px" style="text-align: center">
				<tr>
					<td><b>Login</b></td>
				</tr>
				<tr>
					<td><input type="text" name="id" placeholder="Input your ID"></td>
				</tr>
				<tr>
					<td><input type="password" name="pw"
						placeholder="Input your PW"></td>
				</tr>
				<tr>
					<td><input type="submit" id="login" value="Login"> <input
						type="button" id="signup" value="Sign up"><br> <input
						type="checkbox">Remember my ID</td>
				</tr>
			</table>
		</form>
	</div>
	<script>
		$("#signup").on("click", function() {
			location.href = "signup.jsp"
		})
		$("#login").on("click", function() {
			location.href = "LoginCheckController"
		})
	</script>

	<%
		}
	%>


</body>
</html>

 

LoginController

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kh.backend.dao.memberDAO;


@WebServlet("/LoginController")
public class LoginController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		memberDAO dao = new memberDAO();
		String id = request.getParameter("id");
		String pw = dao.getSHA512(request.getParameter("pw"));
		try {
			boolean result = dao.login(id,pw);
			if(result) {
				//로그인에 성공했다면.
				request.getSession().setAttribute("loginInfo",id);
			}
			response.sendRedirect("index.jsp");
		}catch(Exception e) {
			e.printStackTrace();
			response.sendRedirect("error.jsp");
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

DAO

	public boolean login(String id,String pw) throws Exception{
		String sql = "select * from member where id=? and pw=?";
		try(Connection con = this.getConnection();	
		PreparedStatement pstat = con.prepareStatement(sql)){
			pstat.setString(1, id);
			pstat.setString(2, pw);
			try( ResultSet rs = pstat.executeQuery();){
				return rs.next();
			}
		}
	}

로그아웃

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/LogoutController")
public class LogoutController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getSession().invalidate(); //세션에 접속한 사용자의 모든 정보 날려버림
		response.sendRedirect("index.jsp");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

http프로토콜은 stateless 프로토콜

 

한번 통신이 끝나면 더 이상 상태정보를 갖지 않음


로그인/인증한 클라이언트라는 것을 기억해야함


stateless 문제를 보완하기 위한 방법 : cookie

 

- 클라이언트가 서버에 request 보내기

- res 받기 (안에 인증 징표가 포함되어 있음)

- 하드 디스크에 쿠키파일이라는 형태로 징표를 저장

 

 

-> 보안상 이슈

쿠키 하이잭킹 : 쿠키 파일이 훔쳐지면 보안 뚫림 (개인정보 수정시 비밀번호 다시입력 요구 - 쿠키만 가지고는 통과할수 없는 상황)


cookie -> session

 

세션은 서버로부터 세션키값이 넘어옴

파일로 저장되지 않고 램에 유지됨

(세션키값은 브라우저의 변수값에 저장된다.)

 

-> 해커가 램에 있는 키를 훔치는 것은 난이도가 높음

-> 세션키값을 서버가 보낼때 네트워크 단계에서 훔치려고 함, 그래도 쿠키에 비해 여전히 보안성 높음


세션으로 보안이 필요한 로그인 기능

 

쿠키는

'아이디기억하기 체크박스에 체크시' 아이디 저장,

광고 추천 목적(클릭정보),

드물게 장바구니 용도로도 사용

 


어디에 저장을 할 것인가?

 

저장소 후보

1. pageContext

2. request

3. session

4. application


pageContext

 - 지역변수, 한 페이지 내에서만 수명 유지

 - 우클릭시 나오는 창 : ContextMenu - 자신의 맥락이나 환경에 맞는 메뉴가 나타남

 - pageContext - 우리가 만든 한 jsp페이지에서만 생존 가능

 - 페이지 밖으로 나가지 못함

 

request

 - 클라이언트로부터 서버까지 전달되어서 넘어온 request객체

 - (셋어트리뷰트로 저장 가능)

 - forward를 태워서 여러페이지에서 생존 가능


전역 : 서버가 가동되자 마자 생성, 어디에서나 접근가능, 서버가 꺼질 때까지 생존

 

session

 - 로그인 할 때 사용하는 방식

 - 일종의 은행창고

 - 서버가 클라이언트에게 만들어준 Key값을 제시하고 값을 꺼냄

 - 세션의 키값뿐 아니라 브라우저 정보도 포함

 

application

 - 생명주기 측면에서는 로그인에 적합 하지만,

 - 접근시 퍼블릭하게 오픈

 - key:value

 - 사용자 A가 설정한 데이터를 사용자 B가 접근 할수도 같은키값에 다른밸류 덮어쓰기 


<%@ 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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<%
request.setAttribute("key","request");
session.setAttribute("key", "session");
application.setAttribute("key", "application");
%>
</body>
</html>
<%@ 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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
	<%=request.getAttribute("key")%><br>
	<%=session.getAttribute("key")%><br>
	<%=application.getAttribute("key")%>
</body>
</html>

 

크롬 (이클립스 기본 웹브라우저)
 다른브라우저(엣지브라우저)에서 url열면 session도 꺼낼 수 없음

 

브라우저를 다르게 해서 열면 session도 꺼낼 수 없음


크롬 브라우저에 네이버 로그인 한후

- 새로운 크롬창을 열어서 네이버사이트 들어가면 로그인 되어 있음

- 새로운 엣지브라우저 열어서 네이버사이트 들어가면 로그인 안되어 있음

-> 네이버는 세션을 사용해서 로그인을하는 구나!

 


로그인은 세션이라는 저장소에 데이터를 남겨놓는 것

 

 

세션은 서버에 남아있음

고유키값은 클라이언트의 브라우저 램에 있음

브라우저를 끄면 고유키값 사라짐 -> 로그인 해제

'디지털 컨버전스 > Project' 카테고리의 다른 글

[BoardProject] 회원 탈퇴  (0) 2020.04.29
[BoardProject] 로그인  (0) 2020.04.29
[BoardProject] 로그인 가능 여부 체크  (0) 2020.04.29
[BoardProject] 중복확인  (0) 2020.04.29
[BoardProject] - 회원가입  (0) 2020.04.28

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
	<div class="wrapper">
		<form action=LoginCheckController method="post">
			<table align=center border="1px" style="text-align: center">
				<tr>
					<td><b>Login</b></td>
				</tr>
				<tr>
					<td><input type="text" name="id" placeholder="Input your ID"></td>
				</tr>
				<tr>
					<td><input type="password" name="pw"
						placeholder="Input your PW"></td>
				</tr>
				<tr>
					<td><input type="submit" id="login" value="Login"> <input
						type="button" id="signup" value="Sign up"><br> <input
						type="checkbox">Remember my ID</td>
				</tr>
			</table>
		</form>
	</div>
	<script>
            $("#signup").on("click",function(){
                location.href="signup.jsp"
            })
      $("#login").on("click",function(){
                location.href="LoginCheckController"
            })
        </script>
</body>
</html>

 

LoginCheckController

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kh.backend.dao.memberDAO;


@WebServlet("/LoginCheckController")
public class LoginCheckController extends HttpServlet {


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		memberDAO dao = new memberDAO();
		String id = request.getParameter("id");
		String pw = dao.getSHA512(request.getParameter("pw"));

		try {
			boolean result = dao.loginCheck(id, pw);
			request.setAttribute("result",result);
			request.getRequestDispatcher("loginView.jsp").forward(request, response);

		}catch(Exception e) {
			e.printStackTrace();
			response.sendRedirect("error.jsp");
		}
	
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

DAO

- loginCheck

	public boolean loginCheck(String id,String pw) throws Exception{
		String sql = "select * from member where id=? and pw=?";
		try(Connection con = this.getConnection();	
		PreparedStatement pstat = con.prepareStatement(sql)){
			pstat.setString(1, id);
			pstat.setString(2, pw);
			try( ResultSet rs = pstat.executeQuery();){
				return rs.next();
			}
		}
	}

 

loginView.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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
	<%
		boolean result = (boolean)request.getAttribute("result");
	if (result) {
	%>
	로그인 가능합니다.

	<%
		} else {
			
	%>
	로그인 할수 없습니다.

	<%
	
		}
	%>
	<button id="back">돌아가기</button>
	<script>
	$("#back").on("click", function() {
		location.href="index.jsp";
	})
	</script>
</body>
</html>

 

                            <input type="text" placeholder="8~12글자의 알파벳 대소문자" id="id" name="id">
                            <input type="button" value="중복확인" id="duplCheck">

 

UX가 다르다

 

1) 팝업창으로 사용 가능 여부 알림

2) 입력창

3) 버튼없이 아이디를 쓰자마자 실시간으로 옆에 나타남 <- AJAX


중복확인 버튼을 submit으로 만들기?

 

- 중복확인은 submit으로 만들면 페이지 전환

-> submit이 아니라 중복을 체크해주는 팝업창을 만든다

 

DuplCheckController라는 서블릿 열기

            $(function(){
            	$('#duplCheck').on("click",function(){
            		window.open("DuplCheckController,"","width=400,height=300");
            	})
            })

(2번째 인자값은 생략가능)


데이터 보내기

  1. submit
  2. ajax
  3. 인위적으로 get방식을 모방 (url에 인자값 ?id=**)
<%-- signup.jsp --%> 
			$(function(){
            	$('#duplCheck').on("click",function(){
            		window.open("DuplCheckController?id="+$("#id").val(),"","width=400,height=300");
            	})
            })
package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/DuplCheckController")
public class DuplCheckController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id = request.getParameter("id");
		System.out.println(id);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 


signup.jsp

<%-- signup.jsp --%> 
			$(function(){
            	$('#duplCheck').on("click",function(){
            		window.open("DuplCheckController?id="+$("#id").val(),"","width=400,height=300");
            	})
            })

 

DAO

	public boolean duplCheck(String id) throws Exception{
		String sql = "select * from member where id= ?";
		try(Connection con = this.getConnection();	
		PreparedStatement pstat = con.prepareStatement(sql)){
			pstat.setString(1, id);
			try( ResultSet rs = pstat.executeQuery();){
				return !rs.next();
			}
		}
	}

 

DuplCheckController

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kh.backend.dao.memberDAO;


@WebServlet("/DuplCheckController")
public class DuplCheckController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id = request.getParameter("id");
		memberDAO dao = new memberDAO();
		try {
			boolean result = dao.duplCheck(id);
			request.setAttribute("result",result);
			request.getRequestDispatcher("duplCheckView.jsp").forward(request, response);;

		}catch(Exception e) {
			e.printStackTrace();
			response.sendRedirect("error.jsp");
		}

	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

duplCheckView.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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
	<%
boolean result = (boolean)request.getAttribute("result");
if(result){
	%>
	사용가능한 ID 입니다.
	<button id ="use">사용</button>
	<button id ="cancel">취소</button>
	<% 
}else{
	%>
	이미 사용중인 ID 입니다.
	<button id ="close">닫기</button>
	<%
}
%>
</body>
</html>

팝업창을 닫았을 때 아이디입력부가 지워지도록

 

자신을 팝업시켜준창 : opener

	$(function(){
		$("#use").on("click",function(){
			window.close();
		})
		$("#cancel").on("click",function(){
			opener.document.getElementById("id").value="";
			window.close();
		})
	})

 

-> 에러 발생하는 경우 존재 (자바스크립트는 오류 발생)

(제이쿼리는 별도로 보정해줘서 에러가 안난듯 하다.)


<%@ 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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
	$(function() {
		$("#use").on("click", function() {
			window.close();
		})
		$("#cancel").on("click", function() {
			opener.document.getElementById("id").value = "";
			window.close();
		})
		$("#close").on("click", function() {
			opener.document.getElementById("id").value = "";
			window.close();
		})
	})
</script>
</head>
<body>
	<%
		boolean result = (boolean) request.getAttribute("result");
	if (result) {
	%>
	사용가능한 ID 입니다.
	<button id="use">사용</button>
	<button id="cancel">취소</button>
	<%
		} else {
	%>
	이미 사용중인 ID 입니다.
	<button id="close">닫기</button>
	<%
		}
	%>


</body>
</html>

if 문에 따라 생성되지 않는 버튼이 있는데 거기에 이벤트가 부여됨

 

해결안 : 버튼 생성위치에서 이벤트 부여

<%@ 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>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
<body>
	<%
		boolean result = (boolean) request.getAttribute("result");
	if (result) {
	%>
    
	사용가능한 ID 입니다.
	<button id="use">사용</button>
	<button id="cancel">취소</button>
	<script>
		$("#use").on("click", function() {
			window.close();
		})
		$("#cancel").on("click", function() {
			opener.document.getElementById("id").value = "";
			window.close();
		})
	</script>
	
    <%
		} else {			
	%>
    
	이미 사용중인 ID 입니다.
	<button id="close">닫기</button>
	<script>
	$("#close").on("click", function() {
		opener.document.getElementById("id").value = "";
		window.close();
	})
	</script>
	
    <%
		}
	%>

</body>
</html>

중복확인 후 아이디를 바꿔서 회원가입 하는경우

 

1)

중복확인 변수 하나를 만들어 놓고

디폴트 false 중복통과시 true로 설정

true 일때만 회원가입 가능하도록

 

2) 입력창에 바로 입력을 못하도록 만들고 팝업창으로 받아내도록

 

프론트엔드는 코드가 오픈되어 있기 때문에 결국 다 뚫린다.

프론트엔드는 최소한의 보안만 - 비전문가가 실수로 망가트리는 경우만 방지


 

-정규표현식

-비밀번호 일치

-암호화

BoardProject.zip
1.98MB


오라클 코드

오라클 코드
create table member (
    id varchar(20) primary key,
    pw varchar(128) not null,
    name  varchar(20) not null,
    phone  varchar(20),
    email  varchar(50),
    zipcode  varchar(7),
    address1  varchar(100),
    address2  varchar(100)  
);
commit;
select *from member;

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <table align=center border="1px" style="text-align: center">
                <tr>
                    <td><b>Login</b></td>
                </tr>
                <tr>
                    <td><input type=text placeholder="Input your ID" ></td>
                </tr>
                <tr>
                    <td><input type="password" placeholder="Input your PW" ></td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="login" value="Login">
                        <input type="button" id="signup" value="Sign up"><br>
                        <input type="checkbox">Remember my ID
                    </td>
                </tr>
            </table>
        </div>
        <script>
            $("#signup").on("click",function(){
                location.href="signup.jsp"
            })

        </script>
    </body>
</html>

signup.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
        <style>
            *{box-sizing: border-box;}
            .wrapper div{
                border: 1px solid black;
                margin: 0px;
                padding: 1px;
            }
            .wrapper{
                width:500px;
                margin: auto;
            }
            .right{
                text-align: right;
            }
        </style>
        <script>
            window.onload = function(){
                document.getElementById("check").onsubmit = function(){
                    var id = document.getElementById("id").value;
                    var regexid = /[A-Za-z]{8,12}/;
                    var checkid = regexid.test(id);
                    if(!checkid){
                        alert("아이디는 8~12글자의 알파벳 대소문자로 만들어야 합니다.")
                    }
                    var pw1 = document.getElementById("pw1").value;
                    var regexpw1= /.{6,12}/;
                    var resultpw1 = regexpw1.test(pw1);
                    if(!resultpw1){
                        alert("비밀번호 입력값이 잘못되었습니다. 공백문자를 제외하고 6글자 이상 12글자 이하로 입력하세요")
                    }

                    var pw2 = document.getElementById("pw2").value;
                    if(pw1 != pw2){
                        alert("비밀번호 입력값이 서로 다릅니다.")
                    }

                    var name = document.getElementById("name").value;
                    var regexname= /[A-Za-z가-힣]{1,15}/;
                    var resultname = regexname.test(name);
                    if(!resultname){
                        alert("이름 입력값이 잘못되었습니다. 1~15글자의 알파벳 대소문자 및 한글로 입력하세요")
                    }
                    var phone = document.getElementById("phone").value;
                    var regexphone= /\d{10,11}/;
                    var resultphone = regexphone.test(phone);
                    if(!resultphone){
                        alert("전화번호 입력값이 잘못되었습니다. 숫자 10~11자로 입력하세요")
                    }

                    var email = document.getElementById("email").value;
                    var regexemail= /.+@[a-z]+\.[a-z]+/;
                    var resultemail = regexemail.test(email);
                    if(!resultemail){
                        alert("이메일 입력값이 잘못되었습니다. @와 . 을 포함하여 입력해주세요")
                    } 
                   return resultid && resultpw1 && resultname && resultphone && email 

                }
            }
        </script>
    </head>
    <body>
        <div class="wrapper">
            <form id=check action=SignupController method="post">
                <div class="row">
                    <div class="col-sm-12"  align=center>회원가입</div>
                </div>

                <div class="row">
                    <div class="col-3 right">
                        아이디 :
                    </div>
                    <div class="col">
                        <div>
                            <input type="text" placeholder="8~12글자의 알파벳 대소문자" id="id" name="id">
                            <input type="button" value="중복확인">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-3 right">패스워드 :</div>
                    <div class="col">
                        <input type="text" id="pw1" name="pw">
                    </div>
                </div>
                <div class="row">
                    <div class="col-3 right">패스워드 확인 :</div>
                    <div class="col">
                        <input type="text" id="pw2">
                    </div>
                    <div id="pwcheck"></div>
                </div>
                <div class="row">
                    <div class="col-3 right">이름 :</div>
                    <div class="col"><input type="text" id="name" name="name"></div>
                </div>
                <div class="row">
                    <div class="col-3 right">전화번호 :</div>
                    <div class="col"><input type="text" id="phone" name="phone"></div>
                </div>
                <div class="row">
                    <div class="col-3 right">이메일 :</div>
                    <div class="col"><input type="text" id="email" name="email"></div>
                </div>
                <div class="row">
                    <div class="col-3 right">우편번호 :</div>
                    <div class="col">
                        <input type="text"  id="postcode" name="zipcode" readonly>
                        <input type="button" value="찾기" onclick="sample4_execDaumPostcode()">
                    </div>
                </div>
                <div class="row">
                    <div class="col-3 right">주소1 :</div>
                    <div class="col"><input type="text" id="address1" name="address1" readonly></div>
                </div>
                <div class="row">
                    <div class="col-3 right">주소2 :</div>
                    <div class="col"><input type="text" id="address2" name="address2"></div>
                </div>
                <div class="row">
                    <div class="col" align=center>
                        <input type="submit" value="회원가입">
                        <input type="button" value="다시 입력">
                    </div>
                </div>
            </form>
        </div>

        <script>
            document.getElementById("pw2").onkeyup	 = function(){
                if(document.getElementById("pw1").value==document.getElementById("pw2").value){
                    document.getElementById("pwcheck").innerHTML = "패스워드가 일치합니다"
                    document.getElementById("pwcheck").style.color = "blue";
                }else{
                    document.getElementById("pwcheck").innerHTML = "패스워드가 일치하지 않습니다"
                    document.getElementById("pwcheck").style.color = "red";
                }
            };
            function sample4_execDaumPostcode() {
                new daum.Postcode({
                    oncomplete: function(data) {
                        var roadAddr = data.roadAddress; 
                        document.getElementById('postcode').value = data.zonecode;
                        document.getElementById("address1").value = roadAddr;
                    }
                }).open();
            }
        </script>


    </body>
</html>

memberDTO.java

package kh.backend.dto;

public class memberDTO {
	private String id;
	private String pw;
	private String name; 
	private String phone; 
	private String email; 
	private String zipcode; 
	private String address1; 
	private String address2;
	
	public memberDTO() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public memberDTO(String id, String pw, String name, String phone, String email, String zipcode, String address1,
			String address2) {
		super();
		this.id = id;
		this.pw = pw;
		this.name = name;
		this.phone = phone;
		this.email = email;
		this.zipcode = zipcode;
		this.address1 = address1;
		this.address2 = address2;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getAddress1() {
		return address1;
	}
	public void setAddress1(String address1) {
		this.address1 = address1;
	}
	public String getAddress2() {
		return address2;
	}
	public void setAddress2(String address2) {
		this.address2 = address2;
	} 
	
	
}

memberDAO.java

package kh.backend.dao;

import java.math.BigInteger;
import java.security.MessageDigest;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

import kh.backend.dto.memberDTO;


public class memberDAO {
	private Connection getConnection() throws Exception{
		String url = "jdbc:oracle:thin:@localhost:1521:xe";
		String id = "kh";
		String pw = "kh";
		Class.forName("oracle.jdbc.driver.OracleDriver");
		return DriverManager.getConnection(url,id,pw);
	}
	
	public int signup(memberDTO dto) throws Exception{
		String sql = "insert into member values(?,?,?,?,?,?,?,?)";
		
		try(Connection con = this.getConnection();	
		PreparedStatement pstat = con.prepareStatement(sql)){
			pstat.setString(1, dto.getId());
			pstat.setString(2, dto.getPw());
			pstat.setString(3, dto.getName());
			pstat.setString(4, dto.getPhone());
			pstat.setString(5, dto.getEmail());
			pstat.setString(6, dto.getZipcode());
			pstat.setString(7, dto.getAddress1());
			pstat.setString(8, dto.getAddress2());
			int result = pstat.executeUpdate();
			con.commit();
			return result;
		}
	}
	
	//암호화
    public static String getSHA512(String input){
		String toReturn = null;
		try {
			MessageDigest digest = MessageDigest.getInstance("SHA-512");
			digest.reset();
			digest.update(input.getBytes("utf8"));
			toReturn = String.format("%0128x", new BigInteger(1, digest.digest()));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return toReturn;
	}
	
}

SignupController.java

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kh.backend.dao.memberDAO;
import kh.backend.dto.memberDTO;


@WebServlet("/SignupController")
public class SignupController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		memberDAO dao = new memberDAO();
		String id = request.getParameter("id");
		String pw = dao.getSHA512(request.getParameter("pw"));
		String name = request.getParameter("name");
		String phone = request.getParameter("phone");
		String email = request.getParameter("email");
		String zipcode = request.getParameter("zipcode");
		String address1 = request.getParameter("address1");
		String address2 = request.getParameter("address1");
		
		try {
			int result = dao.signup(new memberDTO(id,pw,name,phone,email,zipcode,address1,address2));
			System.out.println(result);
			response.sendRedirect("index.jsp");
			

		}catch(Exception e) {
			e.printStackTrace();
			response.sendRedirect("error.jsp");
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

유스케이스 다이어그램 ( Usecase Diagram )

  • 철저하게 사용자의 입장에서 시스템에 수행하는 활동을 나열하고, 활동간의 관계를 표시하는 다이어그램

개념상 요구사항 명세 내의 subset

 

유스케이스 사이트 - 그려주는 툴

https://online.visual-paradigm.com/diagrams/solutions/free-use-case-diagram-tool/

 

Free Use Case Diagram Tool

Want a Free Use Case Diagram Tool? The FREE drawing tool, Visual Paradigm Online (VP Online) Express Edition, supports UML, ERD and Organization Chart. You can draw Use Case Diagram quickly through the intuitive UML drawing editor. The free UML tool has wi

online.visual-paradigm.com

Actor (범용적인 이름)
System (개발자의 개발 영역)
Usecase (개발자가 개발해야되는 요소, Actor가 시스템내에서 수행 할 수 있는 기능)
Extend - 로그인 후에 추가적으로(선택적으로) 할 수 있는 일


'Primary Actor' + 'Secondary Actor' 또는 'Primary Actor' + 'Primary Actor'  / 유스케이스의 색은 큰 의미 없음


포괄적인 기능명으로 만들기

 

+ Recent posts