📒 실행 사진
✏️ 테이블
✏️ regStep1.jsp
중복체크를 진행하지 않았을 때 팝업 / 비밀번호가 서로 다를 때 팝업
✏️ 중복체크 시 window.open 함수
✏️ regStep2.jsp
✏️ regInsert.jsp
abcd가 추가된 것을 확인
✏️ login.jsp
✏️ memList.jsp
📒 코드
✏️ 1. 로그인 login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 화면</title>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<form name="login" action="loginProcess.jsp" method="post" onsubmit="return formCheck()">
<fieldset>
<legend>로그인</legend>
<table>
<tr>
<td><label for = "id">아이디: </label></td>
<td><input type="text" name="id" id="id"/></td>
</tr>
<tr>
<td><label for = "passwd">비밀번호: </label></td>
<td><input type="password" name="passwd" id="passwd"/></td>
</tr>
</table>
</fieldset>
<input type="reset" value="다시입력">
<input type="submit" value="로그인"><br>
<p>♣ 아이디가 없으면 <a href="regStep1.jsp">회원가입</a></p>
</form>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>✏️ 2. 로그인 처리 loginProcess.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
String id = request.getParameter("id");
String pw = request.getParameter("passwd");
// 아이디 값이 null 이라면 로그인 불가
if(id.equals("")||id.equals(null)){
response.sendRedirect("login.jsp");
return;
}
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String driver = "org.mariadb.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/testdb3";
try {
Class.forName(driver);
conn = DriverManager.getConnection(url, "java", "java");
String sql = "SELECT * FROM member WHERE id =?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next() && pw.equals(rs.getString("passwd"))){
session.setAttribute("sessionId", id);
session.setAttribute("level", rs.getInt("level")); // level도 불러온다.
response.sendRedirect("memList.jsp");
return;
}
else {
response.sendRedirect("login.jsp");
return;
}
}
catch (Exception e){
e.printStackTrace();
}
finally {
try {
rs.close();
pstmt.close();
conn.close();
}
catch(Exception e){
e.printStackTrace();
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 처리</title>
</head>
<body>
</body>
</html>✏️ 3. 회원가입 스텝 1 regStep1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 스텝 1</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="regStep1" action="regStep2.jsp" method="post" onsubmit="return Next()">
<fieldset>
<legend>회원가입: 기본</legend>
<table>
<tr>
<td><label for ="id">아이디 </label></td>
<td><input type="text" name="id" id="id" required="required"/></td>
<td><input type="button" value="중복확인" onclick="idCheck()"></td>
<td><input type="hidden" id="hidden_id" value="0"/></td> // 중복 체크 값 확인을 위해 value 0으로 설정
</tr>
<tr>
<td><label for = "passwd1">비밀번호 </label></td>
<td><input type="password" name="passwd1" id="passwd1" required="required"/></td>
</tr>
<tr>
<td><label for = "passwd2">비밀번호 확인 </label></td>
<td><input type="password" name="passwd2" id="passwd2" required="required"/></td>
</tr>
</table>
</fieldset>
<input type="reset" value="다시입력">
<button type="submit">다음단계</button><br>
<p>♣ 아이디가 있으면 <a href="login.jsp">로그인</a></p>
</form>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>✏️ 4. 회원가입 스텝 2 regStep2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = request.getParameter("id");
String pw = request.getParameter("passwd1");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 스텝 2</title>
<script type="text/javascript" src="js/script.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<form name="regStep2" action="regInsert.jsp" method="post" onsubmit="return emailCheck()">
<input type="hidden" name="id" value="<%=id %>"> <!-- 이전 regStep1의 아이디 값을 가져오기 위해 -->
<input type="hidden" name="passwd" value="<%=pw %>">
<h3>신청 아이디: <%=id %></h3>
<fieldset>
<legend>회원가입: 상세</legend>
<table>
<tr>
<td><label for = "email">이메일 </label></td>
<td><input type="email" name="email" id="email" placeholder="email@email.com" required="required"/></td>
</tr>
<tr>
<td><label for = "phone">휴대번호 </label></td>
<td><input type="text" name="phone" id="phone" placeholder="010-1234-5678" required="required"/></td>
</tr>
<tr>
<td><label for = "birth">생년월일 </label></td>
<td><input type="date" name="birth" id="birth" required="required"/></td>
</tr>
</table>
</fieldset>
<input type="reset" value="다시입력">
<a href="regStep1.jsp"><input type="button" value="이전단계"></a>
<input type="submit" value="다음단계">
</form>
</body>
</html>✏️ 5. 회원가입 저장 regInsert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
String id = request.getParameter("id");
String pw = request.getParameter("passwd");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
String birth = request.getParameter("birth");
String regdate = request.getParameter("regdate");
int level = 1; // 기본 레벨은 1로 설정
Connection conn = null;
PreparedStatement pstmt = null;
String driver = "org.mariadb.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/testdb3";
try {
Class.forName(driver);
conn = DriverManager.getConnection(url, "java", "java");
pstmt = conn.prepareStatement("INSERT INTO member VALUES(?, ?, ?, ?, ?, now(), ?)");
pstmt.setString(1, id);
pstmt.setString(2, pw);
pstmt.setString(3, email);
pstmt.setString(4, phone);
pstmt.setString(5, birth);
pstmt.setInt(6, level);
int result = pstmt.executeUpdate();
if(result !=0){
out.println("회원 등록 완료");
}
}
catch(ClassNotFoundException e){
System.out.println("드라이버 로드 실패");
e.printStackTrace();
}
catch(SQLException e){
System.out.println("SQL 에러");
e.printStackTrace();
}
catch(Exception e){
System.out.println("에러");
e.printStackTrace();
}
finally {
try {
pstmt.close();
conn.close();
}
catch(Exception e){
e.printStackTrace();
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="js/script.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>아이디: <%=id %></h3>
<h3>비밀번호: <%=pw %></h3>
<h3>이메일: <%=email %></h3>
<h3>휴대번호: <%=phone %></h3>
<h3>생년월일: <%=birth %></h3>
<h3><a href="login.jsp">로그인</a></h3>
</body>
</html>✏️ 6. 멤버리스트 memList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
int level = (int)session.getAttribute("level");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String driver = "org.mariadb.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/testdb3";
try {
Class.forName(driver);
conn = DriverManager.getConnection(url, "java", "java");
String sql = "SELECT * FROM member";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
}
catch(Exception e) {
e.printStackTrace();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>멤버 리스트 화면</title>
</head>
<body>
<%
if(level==5){
String sessionId = (String)session.getAttribute("sessionId");
out.println("sessionId: "+sessionId+"님 반갑습니다.");
%>
<table border=1>
<tr>
<td>아이디</td>
<td>비밀번호</td>
<td>이메일</td>
<td>휴대번호</td>
<td>생년월일</td>
<td>등록일자</td>
</tr>
<%
while(rs.next()){
String id = rs.getString("id");
String pw = rs.getString("passwd");
String email = rs.getString("email");
String phone = rs.getString("phone");
String birth = rs.getString("birth");
String regdate = rs.getString("regdate");
%>
<tr>
<td><%=id %></td>
<td><%=pw %></td>
<td><%=email %></td>
<td><%=phone %></td>
<td><%=birth %></td>
<td><%=regdate %></td>
</tr>
<%
}
%>
</table>
<%
}
else {
String sessionId = (String)session.getAttribute("sessionId");
out.println("sessionId: "+sessionId+"님 반갑습니다.");
}
%>
<a href="logOut.jsp">로그아웃</a>
</body>
</html>✏️ 7. 로그아웃 logOut.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
if((session.getAttribute("sessionId")!=null)) {
session.removeAttribute("sessionId");
response.sendRedirect("login.jsp");
return;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그아웃</title>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<script type="js/script.js"></script>
</body>
</html>✏️ 8. css style.css
@charset "UTF-8";
table {
float: left;
}✏️ 9. javascript script.js
function formCheck() { // login.jsp
let id = document.getElementById("id");
let pw = document.getElementById("passwd");
if(id.value==""){
alert("아이디를 입력하세요");
id.focus(); // 커서가 깜빡이는 현상
return false; // 아래 코드부터 아무것도 진행하지 말 것
}
if(pw.value==""){
alert("비밀번호를 입력하세요");
pw.focus();
return false;
}
}
function Next() { // regStep1.jsp
let pw1 = document.getElementById("passwd1");
let pw2 = document.getElementById("passwd2");
if(pw1.value!=pw2.value){
alert("비밀번호가 서로 다릅니다. 다시 입력해주세요");
pw1.focus();
return false;
}
if(regStep1.hidden_id.value=="0"){ // 중복체크를 위한 코드
alert("중복체크를 진행해주세요");
return false;
}
}
function idCheck(){ // regStep1.jsp
let id = regStep1.id.value;
let url = "idCheckForm.jsp?id=" +id;
if(!id) {
alert("아이디를 입력하세요");
}
window.open(url, "idCheck", "width=400, height=200"); // idCheck라는 임의의 이름으로 창이 열린다.
}✏️ 아이디 중복 확인을 위한 idCheckForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import= "java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 확인</title>
</head>
<body>
<h3>아이디 중복 확인 결과</h3>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String driver = "org.mariadb.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/testdb3";
int check = -1;
String id = request.getParameter("id");
try {
Class.forName(driver);
conn = DriverManager.getConnection(url, "java", "java");
String sql = "SELECT id FROM member where id= ? ";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next()){
check = 1;
}
else{
check = 0;
}
}
catch(Exception e) {
e.printStackTrace();
}
finally {
try {
rs.close();
pstmt.close();
conn.close();
}
catch(Exception e){
e.printStackTrace();
}
}
if(check==1){
%>
<b>"입력 id: <%= id %> 는 이미 사용중인 아이디입니다.</b>
<form name="idCheckForm" action="idCheckForm.jsp" method="post">
<br>다른 아이디를 선택하세요.<br>
<input type="text" name="id"/>
<input type="submit" value="중복확인"/>
</form>
<%
}
else{
%>
<b>입력 id: <%= id %>는 사용하실 수 있는 아이디입니다.</b>
<input type="hidden" id="conf" value="1">
<input type="button" value="닫기" onclick="setid(id)">
<%
}
%>
<script> // jsp에서 id를 가져와 js에서 사용하기 위해 js를 따로 설정
function setid(){
opener.document.regStep1.id.value= "<%=id %>";
window.self.close();
let a = document.querySelector("#conf"); // 중복 확인이 끝나면 value 값이 1로 되어 중복체크 알림이 뜨지 않는다.
if(a.value == 1){
opener.document.querySelector("#hidden_id").value = "1";
}
}
</script>
</body>
</html>
비전공자 Java, JavaScript, Html, Css, C++ 공부중