[jsp]로그인 및 회원가입 페이지 만들기

🌿 loginform.html(로그인 화면)

	<form action="login.jsp" method="POST">
		<table>
			<tr>
				<td>아이디</td>
				<td><input type="text" name="userid" /> </td>
			</tr>
			<tr>
				<td>암호</td>
				<td><input type="password" name="passwd" /> </td>
			</tr>
			<tr>
				<td colspan="2">
				<input type="submit" value="로그인" />
				</td>
			</tr>
		</table>
	</form>
	<hr>
	<a href="list.jsp">회원목록</a>

아이디와 비밀번호를 입력 후 login.jsp로 POST 요청을 보내 로그인 절차를 진행한다.

🌿login.jsp(로그인 처리)

<%
//db 연결 설정
String driver = "oracle.jdbc.OracleDriver"; //oracle 사용
String url = "jdbc:oracle:thin:@localhost:1521:xe"; //jdbc:mySQL:@localhost:1521:xe
String dbuid = "jsp";
String dbpwd = "1234";

//넘어온 parameter정보 처리 userid, passwd
//넘어온 정보에 대해 한글 인코딩 처리
request.setCharacterEncoding("utf-8");
String userid=request.getParameter("userid");
String passwd=request.getParameter("passwd");
System.out.println(userid);


//db조회
Class.forName(driver);
Connection db=DriverManager.getConnection(url,dbuid,dbpwd);
String sql = "SELECT USERID";
sql += ", USERNAME";
sql += ", EMAIL";
sql += ", TO_CHAR(RDATE,'YYYY-MM-DD HH:MI:SS PM') RDATE ";//TO_CHAR(RDATE, 'YYYY-MM-DD HH24:MI:SS') 불가
sql += "FROM MEMBERS ";
sql += "WHERE USERID = ? ";
sql += "AND PASSWD = ?";

PreparedStatement pstmt=db.prepareStatement(sql);
pstmt.setString(1, userid);
pstmt.setString(2, passwd);

ResultSet rs = pstmt.executeQuery();
String html="";
//조회결과가 1개이거나 없다.
if(rs.next()){ //아이디가 존재한다.
	html+="<h2>회원정보</h2>";
	html+="<div>아이디:"+ rs.getString("userid")+"</div>";
	html+="<div>이름:"+ rs.getString("username")+"</div>";
	html+="<div>이메일:"+ rs.getString("email")+"</div>";
	html+="<div>가입일:"+ rs.getString("rdate")+"</div>"; 
	html+="<div><a href='javascript:history.back()''>뒤로</a></div>";
}else{ //없는 회원
	html+="<h2>존재하지 않는 회원입니다.</h2>";
	html+="<a href='memregform.html'>회원가입</a>";
	html+="<div><a href='javascript:history.back()'>뒤로</a></div>";
}
rs.close();
pstmt.close();
db.close();

%>

request.getParameter()를 사용하여 HTML 폼으로부터 입력받은 userid,passwd를 처리하고 rs.next()로 데이터베이스에서 일치하는 회원을 조회한다.
SQL WHERE 절에 userid와 passwd를 파라미터로 전달하여 인증을 수행한다.
만약 해당 정보와 일치하는 회원이 있으면 rs.getString을 통해 데이터 베이스에 있는 회원 정보를 출력한다.

<%@page import="java.sql.*"%>

*를 통해 jsp에서 쓰이고 있는 JAVA클래스를 import할 수 있다.

Class.forName(driver);

JDBC 드라이버로드를 한다.

Connection db = DriverManager.getConnection

데이터 베이스에 연결한다.

PreparedStatement

sql쿼리를 실행한다.

executeQuery()

SELECT쿼리를 실행할 수 다.

executeUpdate()

INSERT, UPDATE, DELETE쿼리를 실행할 수 있다.

🌿memregform.html(회원가입 화면)

<head>
<script>   
   // 입력검증 - 클라이언트 validation  (js)
   //  : 입력항목 체크햐여 서버롤 보낼지(form tag 의 submit 이벤트)를 판단
   document.addEventListener('DOMContentLoaded', function() {
	   const  form = document.getElementsByTagName('form')[0];
	   form.onsubmit = function(e) {		   		   
		   // 입력체크
		   // 아이디는 3자 이상입니다
		   const  useridEl = document.querySelector('#userid');
		   if(useridEl.value.length < 3 ) {
			   alert('아이디는 3자 이상입니다')
			   useridEl.focus();
			   return false;
		   }			   
		   
		   // 비밀번호 필수입력
		   // 비밀번호1 == 비밀번호2
		   const  passwd1El =  document.querySelector('#passwd1')
		   const  passwd2El =  document.querySelector('#passwd2')
		   if( passwd1El.value.trim() == '' ) {
			   alert('암호는 반드시 입력해야합니다')
			   passwd1El.focus();
			   return false;
		   }
		   if( passwd2El.value.trim() == '' ) {
			   alert('암호확인은 반드시 입력해야합니다')
			   passwd2El.focus();
			   return false;
		   }
		   if( passwd1El.value.trim() != passwd2El.value.trim() ) {
			   alert('암호와 암호확인은 같아야합니다')
			   passwd2El.focus();
			   return false;
		   }
		   
		   // 이름은 2자이상입니다
		   const  usernameEl = document.querySelector('#username');
		   if(usernameEl.value.length < 2 ) {
			   alert('이름은 2자 이상입니다')
			   usernameEl.focus();
			   return false;
		   }	
		   
		   return true;
		   
		   // return false;   // 이벤트 취소
		   // == e.preventDefault(); e.stopPropagation();
	   }
   
	    // 목록 버튼 클릭 시 회원 리스트 페이지로 이동
	    document.querySelector('#btnList').addEventListener('click', function() {
	        location.href = "list.jsp";
	    });
	
	    // 이전 버튼 클릭 시 브라우저 뒤로 가기
	    document.querySelector('#btnBack').addEventListener('click', function() {
	        history.back();
	    });
	});

</script>

</head>
<body>
  <div id="main">
   <form action="memreg.jsp" method="POST">
    <table>
      <caption><h2>회원가입</h2></caption>
      <tr>
       <th><span class="red">*</span> 아이디</th>
       <td><input type="text"     name="userid" id="userid" /></td>
      </tr>
      <tr>
       <th><span class="red">*</span> 암호</th>
       <td><input type="password" name="passwd" id="passwd1" value="1234" /></td>
      </tr>
      <tr>
       <th><span class="red">*</span> 암호확인</th>
       <td><input type="password" id="passwd2"  value="1234" /></td>
      </tr>
      <tr>
       <th><span class="red">*</span> 이름</th>
       <td><input type="text"     name="username" id="username"  value="하늘2" /></td>
      </tr>
      <tr>
       <th>이메일</th>
       <td><input type="email"    name="email"    id="email" value="sky2@myshop.com" /></td>
      </tr>
      <tr>       
       <td colspan="2">
          <input type="submit"  value="가입" />
          <input type="reset"   value="다시입력" />
          <input type="button"  value="목록" id="btnList" />
          <input type="button"  value="이전" id="btnBack" />
       </td>
      </tr>
    </table>  
   </form>
  </div>
</body>

action="memreg.jsp" : memreg.jsp로 제출한다.
클라이언트 측에서 JavaScript를 사용하여 if문을 통해 아이디, 비밀번호, 이름 등의 입력 항목에 대한 유효성 검사를 수행한다.

document.addEventListener('DOMContentLoaded', function() {
    // 이벤트 리스너 설정
});

JavaScript에서 DOMContentLoaded 이벤트를 사용하여 HTML 문서가 완전히 로드되고 DOM요소를 조작할 수 있게된다.

참고: [js]주요 이벤트(drag and drop)

[js]주요 이벤트(drag and drop)

이벤트설명onfocusgotfocus 포커스를 받고 있는 상태onblurlostfocus 포커스를 받지 않고 있는 상태 ✨onchange최종적으로 값에 변화가 발생하되게되면. onclickclick될 때ondblclickdouble click 클릭

o94777.tistory.com

🌿memreg.jsp(회원가입 처리)

<%
// 넘어온 정보 처리 
request.setCharacterEncoding("utf-8"); // 한글처리 필수
String userid = request.getParameter("userid");
String passwd = request.getParameter("passwd");
String username = request.getParameter("username");
String email = request.getParameter("email");

System.out.println(userid);
System.out.println(passwd);
System.out.println(username);
System.out.println(email);

// db 연결 설정 생략

String sql = "";
sql += "INSERT INTO MEMBERS ( USERID, PASSWD, USERNAME, EMAIL) ";
sql += " VALUES ( ?, ?, ?, ? )";
PreparedStatement pstmt = db.prepareStatement(sql);
pstmt.setString(1, userid);
pstmt.setString(2, passwd);
pstmt.setString(3, username);
pstmt.setString(4, email);

pstmt.executeUpdate(); // 자동 commit 실행된다

pstmt.close();
db.close();

//jsp 에서 페이지 이동   == location.href = 'list.jsp'
response.sendRedirect("list.jsp");
%>
<script>
	// js 의 페이지 이동 
	// location.href = 'list.jsp';
</script>

request.getParameter() : memregform.html에서 전달된 정보를 받아 데이터베이스에 반영한다.
SQL INSERT 문을 사용하여, 입력받은 비밀번호, 이름, 이메일을 해당 userid를 기준으로 executeUpdate한다.
sendRedirect("list.jsp") : 업데이트가 완료되면 list.jsp로 이동하여 수정된 회원 목록을 보여준다.

🌿list.jsp(회원 목록 조회)

<%
//java로 oracle 조회 -> 오라클은 서버에 있다(자바)
//db 연결 설정
String driver = "oracle.jdbc.OracleDriver"; //oracle 사용
String url = "jdbc:oracle:thin:@localhost:1521:xe"; //jdbc:mySQL:@localhost:1521:xe, thin은 새 오라클 드라이브
String dbuid = "jsp";
String dbpwd = "1234";

// 넘어온 정보에 대해 한글 인코딩 처리
request.setCharacterEncoding("utf-8");

String sql = "SELECT USERID,";
sql += "PASSWD,";
sql += "USERNAME,";
sql += "EMAIL,";
sql += "TO_CHAR(RDATE, 'YYYY-MM-DD HH24:MI:SS PM') RDATE";
sql += " FROM MEMBERS";
sql += " ORDER BY USERID ASC";

ResultSet rs = pstmt.executeQuery(); //조회 결과를 resultset에 담음
String html = "<table>";
html += "<tr>";
html += "<th>아이디</th>";
html += "<th>이름</th>";
html += "<th>이메일</th>";
html += "<th>가입일</th>";
html += "<th>삭제</th>";
html += "</tr>";
while (rs.next()) {
	String userid = rs.getString("userid");
	String username = rs.getString("username");
	String email = rs.getString("email").toLowerCase();
	String rdate = rs.getString("rdate");

	String fmt = "<tr>";
	fmt += "<td>%s</td>";
	fmt += "<td><a href='memupdateform.jsp?userid=%s'>%s</a></td>";
	fmt += "<td>%s</td>";
	fmt += "<td>%s</td>";
	fmt += "<td><a href='memdel.jsp?key=%s'>x</a></td>";
	fmt += "</tr>";
	html += String.format(fmt, userid, userid, username, email, rdate, userid );
}
html+="</table>";
rs.close();
pstmt.close();
db.close();
%>


<body>
	<div id="main">
		<h2>사용자 목록</h2>
		<p class="menu"><a href="memregform.html">회원가입</a></p>
		<p class="menu"><a href="loginform.html">로그아웃</a></p>
		<%=html%>
	</div>
</body>

<%= %>를 사용하여 변수나 값을 HTML로 출력한다.
JDBC(Java Database Connectivity): JSP 페이지 내에서 JDBC API를 통해 데이터베이스와 연결하고 데이터를 조회g한다.
ex) DriverManager, Connection, Statement, ResultSet
이 페이지는 데이터베이스에서 MEMBERS 테이블에 저장된 모든 회원 정보를 조회하여, HTML 테이블 형식으로 화면에 출력한다.
DriverManager를 사용하여 데이터베이스에 연결하고, SQL문을 실행하여 회원 목록을 가져온다.

🌿memupdateform.jsp(회원 정보 수정 화면)

<%
//넘어온 정보를 받아서 수정할 정보를 조회
request.setCharacterEncoding("utf-8");
String userid = request.getParameter("userid");

//수정할 정보를 조회
//db 연결 설정 생략
String sql = "SELECT * FROM MEMBERS";
sql += " WHERE USERID = ?";
PreparedStatement pstmt = db.prepareStatement(sql);
pstmt.setString(1, userid);

String uid = "";
String passwd = "";
String username = "";
String email = "";
String rdate = "";

String html = "";
ResultSet rs = pstmt.executeQuery(); //조회결과를 rs에 담음
if (rs.next()) {
	uid = rs.getString(1); //rs.getString("userid") 조회한 첫번째 칼럼
	passwd = rs.getString(2);
	username = rs.getString(3);
	email = rs.getString(4);
	rdate = rs.getString(5);

}

rs.close();
pstmt.close();
db.close();

//조회한 정보로 수정할 정보 입력화면을 생성
%>

<body>
	<div id="main">
		<form action="memupdate.jsp" method="POST">
			<table>
				<tr>
					<td>아이디</td>
					<td><input type="text" name="userid" id="userid" value="<%=uid%>" readonly /></td> <!-- 서버에 있는 변수 -->
				<!-- readonly: 읽기전용 -->
				</tr>
				<tr>
					<td><span class="red">*</span>비밀번호</td>
					<td><input type="password" name="passwd" id="passwd" /></td>
				</tr>
				<tr>
					<td><span class="red">*</span>이름</td>
					<td><input type="text" name="username" id="username" value="<%=username%>" /></td>
				</tr>
				<tr>
					<td>이메일</td>
					<td><input type="text" name="email" id="email" value="<%=email%>" /></td>
				</tr>
				<tr>
					<td>가입일</td>
					<td><input type="text" name="rdate" id="rdate" value="<%=rdate%>" /></td>
				</tr>
				   <tr>
				     <td colspan="2">
				     <input type="submit"  value="수정" />
				     <input type="button"  value="뒤로" onclick="history.back()" />
				     </td>   
				   </tr>  
			</table>
		</form>
	</div>
</body>

사용자가 회원 목록에서 수정 링크를 클릭하면, 이 페이지가 호출되어 수정할 회원 정보를 조회한다.
<input type="text" value="<%= userName %>"> : 해당 회원의 정보를 조회하여, HTML 폼에 미리 값을 채워준다.
수정할 항목(아이디, 비밀번호, 이름, 이메일)을 사용자가 편집할 수 있도록 하며, 아이디는 수정할 수 없도록 readonly 속성으로 처리한다.

🌿memupdate.jsp(회원 정보 수정 처리)

<%

//수정할 정보 조회
String userid = request.getParameter("userid");
String passwd = request.getParameter("passwd");
String username = request.getParameter("username");
String email = request.getParameter("email");

//update 쿼리를 실행한다.
//db 연결 설정 생략

String sql = "UPDATE MEMBERS SET";
sql += " USERNAME = ?";
sql += " ,EMAIL = ?";
sql += " WHERE USERID = ?";
sql += " AND PASSWD = ?";
PreparedStatement pstmt = db.prepareStatement(sql);
pstmt.setString(1, username);
pstmt.setString(2, email);
pstmt.setString(3, userid);
pstmt.setString(4, passwd);

pstmt.executeUpdate();

//돌아간다
response.sendRedirect("list.jsp");
%>

memupdateform.jsp에서 전달된 수정된 정보를 받아 데이터베이스에 반영한다.
SQL UPDATE 문을 사용하여, 입력받은 비밀번호, 이름, 이메일을 해당 userid를 기준으로 업데이트한다.
response.sendRedirect("list.jsp"); : 업데이트가 완료되면 list.jsp로 이동하여 수정된 회원 목록을 보여준다.

🌿memdel.jsp(회원 정보 삭제 처리)

<%
String userid = request.getParameter("key");

//db 연결 설정

String sql = "";
sql += "DELETE FROM MEMBERS ";
sql += " WHERE USERID =  ?";
PreparedStatement pstmt = db.prepareStatement(sql);
pstmt.setString(1, userid);

pstmt.executeUpdate(); // 자동 commit 실행된다

pstmt.close();
db.close();

response.sendRedirect("list.jsp");
%>

사용자가 list.jsp에서 x링크를 클릭하면, pstmt.setString을 통해 해당 회원을 호출하여 데이터베이스에서 삭제한다.
DELETE SQL 문을 사용하여, 전달된 userid를 기준으로 해당 회원을 삭제한다.

'JSP' 카테고리의 다른 글

[jsp]쇼핑몰 회원관리 사이트 만들기 (0)	2024.09.26

🌿 loginform.html(로그인 화면)

🌿login.jsp(로그인 처리)

🌿memregform.html(회원가입 화면)

🌿memreg.jsp(회원가입 처리)

🌿list.jsp(회원 목록 조회)

🌿memupdateform.jsp(회원 정보 수정 화면)

🌿memupdate.jsp(회원 정보 수정 처리)

🌿memdel.jsp(회원 정보 삭제 처리)

'JSP' 카테고리의 다른 글

티스토리툴바