AR삽질러

JSP 개인프로젝트(3) - 로그인, 회원가입 본문

JAVA/JSP

JSP 개인프로젝트(3) - 로그인, 회원가입

아랑팡팡 2023. 2. 5. 00:05
728x90

https://arang95.tistory.com/31

 

JSP 개인프로젝트(2) 회원테이블생성 zipcode생

1. 회원테이블스키마 생성 2. 우편번호 스키마생성 회원테이블과 우편번호테이블을 생성한다. (우편번호 테이블의 ri와 bunji는 null값이 허용되어야한다.) 우편번호AIP 또는 우편번호파일을 다운받

arang95.tistory.com

지난시간에 회원테이블을 생성하였고 이번 시간에는 로그인과 회원가입 view와 회원가입기능을 구현했다.

1. 메인페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../css/custom.css">
	<title>메인페이지</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="../js/bootstrap.js"></script>
</head>
<body>
	<%
		String id = null;
		if(session.getAttribute("id") != null){
			id = (String)session.getAttribute("id");
		}
	%>
	<nav class="navbar navbar-default">
	 <div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed"
	  	data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
	  	aria-expanded="false">
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 </button>
		 <a class="navbar-brand" href="main.jsp">실시간 회원제 채팅서비스</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		 <ul class="nav navbar-nav">
		  <li class="active"><a href="main.jsp">메인</a>
		 </ul>
		 <%
		 	if(id == null){
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">접속하기<span class="caret"></span>
		   </a>
		   <ul class="dropdown-menu">
		   	<li><a href="login.jsp">로그인</a></li>
		   	<li><a href="join.jsp">회원가입</a></li>
		   </ul>
		  </li>
		 </ul>
		 <%
		 	}else{
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">회원관리<span class="caret"></span>
		   </a>
		  </li>
		 </ul>
		 <%
		 	}
		 %>
		</div>
	</nav>
</body>
</html>

메인페이지를 구성하고 로고나 메인을 누를시 메인페이지로 이동하고 회원탈퇴나 가입성공시도 메인 페이지로 이동하도록 만들어 기본페이지를 구성하였다.

 

2. 로그인 화면 만들기

유튜브 동빈나 님의 css와 코드를 참조하여 만들었습니다.

https://www.youtube.com/watch?v=bETgFGtnpzQ&list=PLRx0vPvlEmdAlUbX_TGDxaSxKCvfl2isa&index=5 

 

왼쪽상단에 접속하기 버튼에 로그인이 되어있지 않으면 로그인과 회원가입 버튼을 만들어 테스트중..

아직 DB연동은 하지 않은 상태

<body>
	<%
		String id = null;
		if(session.getAttribute("id") != null){
			id = (String)session.getAttribute("id");
		}
	%>
	<nav class="navbar navbar-default">
	 <div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed"
	  	data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
	  	aria-expanded="false">
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 </button>
		 <a class="navbar-brand" href="main.jsp">AR 웹페이지</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		 <ul class="nav navbar-nav">
		  <li class="active"><a href="main.jsp">메인</a>
		 </ul>
		 <%
		 	if(id == null){
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">접속하기<span class="caret"></span>
		   </a>
		   <ul class="dropdown-menu">
		   	<li><a href="login.jsp">로그인</a></li>
		   	<li><a href="join.jsp">회원가입</a></li>
		   </ul>
		  </li>
		 </ul>
		 <%
		 	}else{
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">회원관리<span class="caret"></span>
		   </a>
		  </li>
		 </ul>
		 <%
		 	}
		 %>
		</div>
	</nav>
	
	<div class="container">
	 <form method="post" action="#">
	  <table class="table table-bordered table-hover" style="text-align: center; border: 1px solid #ddddddd">
	   <thead>
	    <tr>
	     <th colspan="2"><h4>로그인 테스트</h4></th>
	    </tr>
	   </thead>
	    <tbody>
	     <tr>
	      <td style="width:110px;"><h5>아이디</h5></td>
	      <td><input class="form-control" type="text" id="userID" name="userID" maxlength="20" placeholder="아이디를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>비밀번호</h5></td>
	      <td><input class="form-control" type="text" id="userPassword" name="userPassword" maxlength="20" placeholder="비밀번호를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="text-align: left" colspan="2"><input class="btn btn-primary pull-right" type="submit" value="로그인" onClick="javascript:window.location='regForm.jsp'" /></td>
	     </tr>
	    </tbody>
	   </table>
	  </form>
	 </div>
	     
</body>
</html>

 

2. 회원가입 화면 만들기

아이디 : 중복체크 기능 (아이디를 입력하지 않고 중복체크를 할경우 == 아이디를 입력해주세요, 존재하는 아이디일시 == 존재하는 아이디입니다.(불가), 존재하지 않는 아이디일시 == 사용가능한 아이디입니다.)

비밀번호 : password로 암호화 

비밀번호 확인 : 비밀번호와 일치할경우 통과

이름 : 

전화번호 : 선택

나이 : 선택 왼쪽 나이 up down

성별 : 선택

이메일 : 형식에 맞지 않을 경우 : 이메일 형식에 맞지 않습니다.

우편번호 : 우편주소 검색기능 추가

다시입력 : 초기화

등록 : 한개라도 입력이 빠져있을 경우 해당 내용에 경고 스크립트를 띄운다.

 

<body>
	<%
		String id = null;
		if(session.getAttribute("id") != null){
			id = (String)session.getAttribute("id");
		}
	%>
	<nav class="navbar navbar-default">
	 <div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed"
	  	data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
	  	aria-expanded="false">
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 </button>
		 <a class="navbar-brand" href="main.jsp">AR 웹페이지</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		 <ul class="nav navbar-nav">
		  <li class="active"><a href="main.jsp">메인</a>
		 </ul>
		 <%
		 	if(id == null){
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">접속하기<span class="caret"></span>
		   </a>
		   <ul class="dropdown-menu">
		   	<li><a href="login.jsp">로그인</a></li>
		   	<li><a href="join.jsp">회원가입</a></li>
		   </ul>
		  </li>
		 </ul>
		 <%
		 	}else{
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">회원관리<span class="caret"></span>
		   </a>
		  </li>
		 </ul>
		 <%
		 	}
		 %>
		</div>
	</nav>
	
	<div class="container">
	 <form method="post" action="regProc.jsp" name="regform.jsp">
	  <table class="table table-bordered table-hover" style="text-align: center; border: 1px solid #ddddddd">
	   <thead>
	    <tr>
	     <th colspan="3"><h4>회원등록양식</h4></th>
	    </tr>
	   </thead>
	    <tbody>
	     <tr>
	      <td style="width:110px;"><h5>아이디</h5></td>
	      <td><input class="form-control" type="text" id="id" name="id" maxlength="20" placeholder="아이디를 입력하세요.">
	      <td style="width:110px;"><button class="btn btn-primary" onClick="idCheck(this.form.id.value)" type="button">중복체크</button></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>비밀번호</h5></td>
	      <td class="2"><input onkeyup="passwordCheckFunction();" class="form-control" id="userPassword1" type="password" name="userPassword1" maxlength="20" placeholder="비밀번호를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>비밀번호 확인</h5></td>
	      <td class="2"><input onkeyup="passwordCheckFunction();" class="form-control" id="userPassword12" type="password" name="userPassword2" maxlength="20" placeholder="비밀번호확인를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>이름</h5></td>
	      <td class="2"><input class="form-control" id="userName" type="text" name="userName" maxlength="20" placeholder="이름를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>전화번호</h5></td>
	      <td style="text-align: left;">
	       <select name="phone1">
	        <option value="02">02</option>
	        <option value="010">010</option>
	        <option value="011">011</option>
	        <option value="016">016</option>
	        <option value="017">017</option>
	        <option value="018">018</option>
	        <option value="019">019</option>
	       </select> -
	       <input type="text" name="phone2" size="8" /> -
	       <input type="text" name="phone3" size="8" />
	      </td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>나이</h5></td>
	      <td class="2"><input class="form-control" id="userAge" type="number" name="userAge" maxlength="20" placeholder="나이를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>성별</h5></td>
	      <td colspan="2" >
	       <div class="form-group" style="text-align: center; margin: 0 auto;">
	        <div class="btn-group" data-toggle="buttons">
	         <label class="btn btn-primary active">
	          <input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자
	         </label>
	         <label class="btn btn-primary">
	          <input type="radio" name="userGender" autocomplete="off" value="여자">여자
	         </label>
	        </div>
	       </div>
	      </td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>이메일</h5></td>
	      <td><input class="form-control" id="userEmail" type="text" name="userEmail" maxlength="20" placeholder="이메일를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>우편번호</h5></td>
	      <td><input class="form-control" id="zipcode" type="text" name="zipcode" />
	      <td style="width:110px;"><button class="btn btn-primary" onClick="zipCheck()" type="button">찾기</button></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>주소1</h5></td>
	      <td><input class="form-control" id="address1" type="text" name="address1" size="50" placeholder="주소를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="width:110px;"><h5>주소2</h5></td>
	      <td><input class="form-control" id="address2" type="text" name="address2" size="30" placeholder="상세주소를 입력하세요."></td>
	     </tr>
	     <tr>
	      <td style="text-align: left;" colspan="3"><h5 style="color: red;" id="passwordCheckMessage"></h5>
	       <input class="btn btn-primary pull-right" type="reset" value="다시입력" />&nbsp;&nbsp;
	       <input class="btn btn-primary pull-right" type="submit" value="등록">
	      </td>
	     </tr>
	    </tbody>
	  </table>
	 </form>
	</div>
	
</body>

 

3. 아이디 중복확인

function idCheck(id){
	if(id == ""){
		alert("아이디를 입력해 주세요.");
		document.regForm.id.focus();
	}else{
		url = "idCheck.jsp?id=" + id;
		window.open(url,"post", "width=300,height=150");
	}
}

function zipCheck(){
	url = "zipCheck.jsp?check=y";
	window.open(url,"post","toolbar=no, width=500, height=300, directories=no, status=yes, scrollbars=yes, menubar=no");
}

 

4. JavaBeans VO 만들기

public class MemberVO {
	private String id;
	private String pass;
	private String name;
	private String phone1;
	private String phone2;
	private String phone3;
	private int age;
	private String gender;
	private String email;
	private String zipcode;
	private String address1;
	private String address2;
	private String profile;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPhone1() {
		return phone1;
	}
	public void setPhone1(String phone1) {
		this.phone1 = phone1;
	}
	public String getPhone2() {
		return phone2;
	}
	public void setPhone2(String phone2) {
		this.phone2 = phone2;
	}
	public String getPhone3() {
		return phone3;
	}
	public void setPhone3(String phone3) {
		this.phone3 = phone3;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	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;
	}
	public String getProfile() {
		return profile;
	}
	public void setProfile(String profile) {
		this.profile = profile;
	}

 

5. JavaBeans DAO 만들기

public class MemberDAO {
	private Connection getConnection() {

		Connection conn = null;
		try {
			Context init = new InitialContext();
			DataSource ds = (DataSource)init.lookup("java:comp/env/jdbc/myOracle");
			conn = ds.getConnection();
		}catch(Exception e) {
			System.err.println("Connection 생성실패");
			e.printStackTrace();
		}
		return conn;
	}
	
	
	public boolean idCheck(String id) {

		boolean result = true;   // 사용불가
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		try {
			conn = getConnection();
			pstmt = conn.prepareStatement("select * from member where id = ?");
			pstmt.setString(1, id);
			rs = pstmt.executeQuery();
			if(!rs.next())result = false;  // 아이디가 있으면 사용가능으로 바꾼다.
		}catch(SQLException sqle) {
			sqle.printStackTrace();
		}finally {
			if(rs != null)try {rs.close();}catch(SQLException e) {}
			if(pstmt != null)try {pstmt.close();}catch(SQLException e) {}
			if(conn != null)try {conn.close();}catch(SQLException e) {}
		}
		return result;
	}

 

6. 중복체크 만들기

<%
	String id = request.getParameter("id");
	boolean check = dao.idCheck(id);
%>    
<!DOCTYPE html>
<html>
<head>
	<meta charset=UTF-8">
	<title>ID중복체크</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="script.js"></script>
	
	
</head>
<body bgcolor="#FFFFCC">
<center>
	<b><%=id %></b>
	<%
		if(check){
			out.println("는 이미 존재하는 ID입니다.<br></br>");
		}else{
			out.println("는 사용 가능한 ID입니다.<br></br>");
		}
	%>
	<a href="#" onClick="javascript:self.close()">닫기</a>
</center>

</body>
function idCheck(id){
	if(id == ""){
		alert("아이디를 입력해 주세요.");
		document.regForm.id.focus();
	}else{
		url = "idCheck.jsp?id=" + id;
		window.open(url,"post", "width=300,height=150");
	}
}

 

7. 우편주소 검색 스크립트

function zipCheck(){
	url = "zipCheck.jsp?check=y";
	window.open(url,"post","toolbar=no, width=500, height=300, directories=no, status=yes, scrollbars=yes, menubar=no");
}

 

8. zipcode.vo

public class ZipCodeVO {
	private String zipcode;
	private String sido;
	private String gugun;
	private String dong;
	private String ri;
	private String bunji;
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getSido() {
		return sido;
	}
	public void setSido(String sido) {
		this.sido = sido;
	}
	public String getGugun() {
		return gugun;
	}
	public void setGugun(String gugun) {
		this.gugun = gugun;
	}
	public String getDong() {
		return dong;
	}
	public void setDong(String dong) {
		this.dong = dong;
	}
	public String getRi() {
		return ri;
	}
	public void setRi(String ri) {
		this.ri = ri;
	}
	public String getBunji() {
		return bunji;
	}
	public void setBunji(String bunji) {
		this.bunji = bunji;
	}

9. zipcode.DAO

public Vector<ZipCodeVO> zipcodeRead(String dong){
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		Vector<ZipCodeVO> vecList = new Vector<ZipCodeVO>();
		try {
			conn = getConnection();
			String strQuery = "select * from zipcode where dong like '" + dong + "%'";
			pstmt = conn.prepareStatement(strQuery);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				ZipCodeVO tempZipcode = new ZipCodeVO();
				tempZipcode.setZipcode(rs.getString("zipcode"));
				tempZipcode.setSido(rs.getString("sido"));
				tempZipcode.setGugun(rs.getString("gugun"));
				tempZipcode.setDong(rs.getString("dong"));
				tempZipcode.setRi(rs.getString("ri"));
				tempZipcode.setBunji(rs.getString("bunji"));
				vecList.addElement(tempZipcode);
			}
		}catch(SQLException e) {
			e.printStackTrace();
		}finally {
			if(rs != null)try {rs.close();}catch(SQLException e) {}
			if(pstmt != null)try {pstmt.close();}catch(SQLException e) {}
			if(conn != null)try {conn.close();}catch(SQLException e) {}
		}
		return vecList;
	}

zipcodeDAO를 통해서 동이름 검색시 선택된 동이름을 백터에 담아 리턴한다.

 

10. 우편주소 검색 구현하기

senAddress변수를 만들어 시도번지동을 받아 저장한다.

join으로 창을 열었으니 join에 데이터를 저장한고 창을 닫는다.

 

스크립트를 통해서 입력되지 않은 항목에 입력 경고를 띄운다.

 

추가사항

UI를 조금 개선할 필요가 있다..

회원가입 : 미입력시 입력하세요 스크립트 띄우기 수정, DAO수정, 회원가입 DB처리, 우편번호형식, 프로필사진

728x90
반응형
LIST
저작자표시 비영리 동일조건

'JAVA > JSP' 카테고리의 다른 글

JSP 개인프로젝트(5) - 회원정보수정  (0) 2023.02.17
JSP 개인프로젝트(4) - 회원가입완성, 로그인구현  (0) 2023.02.16
JSP 개인프로젝트(2) 회원테이블생성 zipcode생  (3) 2023.02.04
JSP 개인프로젝트(1)  (0) 2023.02.04
JSP 설치 가이드  (0) 2023.01.22
'JAVA/JSP' Related Articles more