Index라 표시되는 표지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.ArrayList,mylogin.MemberDTO" %>
<%
ArrayList<MemberDTO> datas = new ArrayList<MemberDTO>(); //멤버DTO객체들을 담을 ArraryList를 생성
application.setAttribute("datas", datas);
//생성한 배열을 jsp의 application(서버)으로 저장
response.sendRedirect("login.jsp"); //로그인페이지로 이동
//새 요청으로 url이 변경된다
%>
<로그인화면>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<div>
<h2>로그인 진행</h2>
<form action="loginAction.jsp" method="POST">
<table border="1">
<tr>
<td><label for="ID">아이디</label></td>
<td><input type="text" id="ID" name="ID" placeholder="아이디를 입력하세요" required></td>
</tr>
<tr>
<td><label for="password">비밀번호</label></td>
<td><input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요" required></td>
</tr>
</table>
<div>
<input type="submit" value="로그인">
</div>
</form>
<div>
<p>
계정이 없나요? <a href="join.jsp">회원가입</a>
</p>
</div>
</div>
</body>
</html>
<로그인로직>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="mylogin.MemberDTO" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<%
String ID = request.getParameter("ID"); // 사용자 입력 ID
String password = request.getParameter("password"); // 사용자 입력 비밀번호
Object dataObj = application.getAttribute("datas"); // 애플리케이션에서 사용자 데이터 가져오기
if (dataObj instanceof ArrayList<?>) { // datas가 ArrayList 타입인지 확인
ArrayList<MemberDTO> datas = (ArrayList<MemberDTO>) dataObj; // 데이터 객체 캐스팅
boolean flag = false;
for (MemberDTO data : datas) { // 모든 회원 정보 확인
if (ID != null && ID.equals(data.getID())) { // ID가 일치하면
if (password != null && password.equals(data.getPassword())) { // 비밀번호도 일치하는지 확인
flag = true; // 로그인 성공
// 로그인 성공 시 세션에 사용자 정보 저장
session.setAttribute("ID", data.getID());
session.setAttribute("tel", data.getTel());
session.setAttribute("email", data.getEmail());
break; // 로그인 성공 시 반복문 종료
}
}
}
if (flag) { // 로그인 성공
out.println("<script>alert('로그인 성공!'); location.href='main.jsp';</script>");
} else { // 로그인 실패
out.println("<script>alert('로그인 실패... 아이디 또는 비밀번호가 잘못되었습니다.'); history.go(-1);</script>");
}
} else {
out.println("<script>alert('로그인 실패... 데이터가 존재하지 않습니다.'); history.go(-1);</script>");
}
%>
</body>
</html>
<회원가입>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<script>
function togglePasswordField() {
var emailSelect = document.getElementById("email");
var passwordInput = document.getElementById("mpw");
if (emailSelect.value == "gmail.com") {
passwordInput.disabled = false;
} else {
passwordInput.disabled = true;
passwordInput.value = "";
}
}
</script>
</head>
<body>
<form action="joinAction.jsp" method="POST">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="mid" required></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="mpw" id="mpw" required disabled></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="phone" required pattern="^010-[0-9]{4}-[0-9]{4}$" placeholder="010-1234-5678"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text" name="email" required>@<select name="emailAddress" id="email" onchange="togglePasswordField()">
<option>daum.net</option>
<option>gmail.com</option>
<option selected>naver.com</option>
<option value="dirict"> 직접입력</option>
</select></td>
</tr>
</table>
<div>
<input type="submit" value="회원가입">
</div>
</form>
</body>
</html>
<회원가입로직>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="mylogin.MemberDTO" %>
<%
String mid = request.getParameter("mid"); // 아이디
String mpw = request.getParameter("mpw"); // 비밀번호
String phone = request.getParameter("phone"); // 전화번호
String email = request.getParameter("email"); // 이메일 앞 부분
String emailAddress = request.getParameter("emailAddress");
email += "@" + emailAddress; // 이메일 합치기
// application에서 데이터 가져오기
ArrayList<MemberDTO> datas = (ArrayList<MemberDTO>) application.getAttribute("datas");
if (datas == null) {
datas = new ArrayList<MemberDTO>(); // 데이터가 없으면 새로 초기화
application.setAttribute("datas", datas);
}
boolean flag = true; // 아이디와 전화번호 중복 체크 변수
for (MemberDTO data : datas) { // 모든 회원 정보 확인
// 아이디 또는 전화번호가 중복되면 flag를 false로 설정
if (data.getID() != null && data.getID().equals(mid)) {
flag = false; // 아이디 중복
break;
}
if (data.getTel() != null && data.getTel().equals(phone)) {
flag = false; // 전화번호 중복
break; // 중복 전화번호가 있으면 더 이상 확인할 필요 없음
}
}
// flag가 true이면 아이디와 전화번호가 중복되지 않음
if (flag) {
MemberDTO data = new MemberDTO(); // 멤버DTO 객체를 생성하여 사용자 입력 정보 저장
data.setID(mid); // 아이디 설정
data.setPassword(mpw); // 비밀번호 설정
data.setTel(phone); // 전화번호 설정
data.setEmail(email); // 이메일 설정
datas.add(data); // 회원 정보를 datas에 추가
out.println("<script>alert('회원가입 성공!'); location.href='login.jsp';</script>");
} else {
out.println("<script>alert('회원가입 실패! 아이디 또는 전화번호가 중복되었습니다.'); history.go(-1);</script>");
}
%>
<로그인성공했을 때 나타나는 main>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@100..900&family=Jacquard+12&display=swap" rel="stylesheet">
<style type="text/css">
body {
font-family: "Single Day", serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="2"><%=session.getAttribute("ID")%>님의 정보</td>
</tr>
<tr>
<td>전화번호</td>
<td><%=session.getAttribute("tel")%></td>
</tr>
<tr>
<td>이메일</td>
<td><%=session.getAttribute("email")%></td>
</tr>
</table>
</body>
</html>
주의해야할 점: name!!!!!
입력받는 정보들(id, password 등)과 멤버dto에 있는 변수들을 같은이름으로 했더니 헷갈렸다;;
설계단계에서부터 주의할 것!!!