코딩항해기
[실습/JSP] JSP 로그인 회원가입 연습하기 본문
[실습]
로그인, 회원가입, 회원목록 조회 기능 구현하기
(jsp/apache tomcat)
[로직]
더보기
- 로그인
- 사용자에게 아이디와 비밀번호를 입력받아 이동한다.
- 전달받은 데이터를 DTO에 담아 DAO selectOne에 보낸다
- selectOne에서는 해당 id와 pw를 지닌 데이터가 있는지 확인한다.
- 있다면 해당 객체를 반환하고 아니라면 null을 반환한다.
- 객체가 반환되었다면, 세션에 이름을 저장하고, 이동한다.
- null이 반환되었다면 이전페이지로 돌아가며 로그인실패를 안내한다.
- 메인페이지
- 정상적으로 메인 페이지에 들어왔다면 세션값이 있는 상태이므로 세션 값을 불러온다.
- 불러온 세션 값, 즉 유저명을 페이지에 띄운다.
- 목록 출력하는 부분에서 DAO로부터 전체 데이터를 받아온다.
- 받아온 데이터가 비어있다면 비어있음을 안내한다.
- 받아온 데이터가 비어있지 않다면 for문을 통해 값을 하나씩 보여준다.
- 회원가입
- 사용자로부터 아이디와 비밀번호, 이름을 받아 이동한다.
- 전달받은 값을 DAO를 통해 넣는다.
- insert하기 전에 DB에 이미 있는 id라면 insert 실패를 띄운다.
- 실패했다면 실패했음을 안내하고 이전 페이지인 회원가입 페이지로 돌아간다.
- 성공했다면 성공했음을 안내하고 로그인 페이지로 돌아간다.
- 회원가입 페이지에서 취소를 누르면 로그인 페이지로 돌아간다.
[화면]
[코드]
(jsp명은 문제 요구사항대로 작성)
a.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a</title>
<link rel="stylesheet" type="text/css" href="../css/NewFile.css">
</head>
<body>
<form action="d.jsp" method="POST">
<h2>로그인</h2>
<div>ID</div>
<input type="text" name="mid" placeholder="아이디를 입력하세요." required>
<div>PW</div>
<input type="password" name="password" placeholder="비밀번호를 입력하세요." required>
<input type="submit" value="로그인">
<button type="button" onclick = "location.href = 'c.jsp'">회원가입</button>
</form>
</body>
</html>
b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.ArrayList"%>
<jsp:useBean class="dto.MemberDTO" id="memberDTO"/>
<jsp:useBean class="dao.MemberDAO" id="memberDAO" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b</title>
<link rel="stylesheet" type="text/css" href="../css/NewFile.css">
</head>
<body>
<%
String userName = ""+session.getAttribute("user");
%>
<section>
<h2><%= userName %>님 안녕하세요! :D</h2>
<hr>
<h3>이 사이트의 회원목록</h3>
<ul>
<%
ArrayList<dto.MemberDTO> userList = memberDAO.selectAll(memberDTO);
if(userList.isEmpty()){
out.println("<li>아직 가입한 회원이 없습니다.</li>");
}
else{
for(dto.MemberDTO user : userList){
out.println("<li>"+user.getMid()+"\t"+user.getName()+"</li>");
}
}
%>
</ul>
<button type="button" onclick = "location.href = 'a.jsp'">처음으로 돌아가기</button>
</section>
</body>
</html>
c.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>c</title>
<link rel="stylesheet" type="text/css" href="../css/NewFile.css">
</head>
<body>
<form action="e.jsp" method="POST">
<h2>회원가입</h2>
<div>이름 <span>(필수)</span></div>
<input type="text" name="name" placeholder="이름을 입력하세요." required>
<div>ID <span>(필수)</span></div>
<input type="text" name="mid" placeholder="아이디를 입력하세요." required>
<div>PW <span>(필수)</span></div>
<input type="password" name="password" placeholder="비밀번호를 입력하세요." required>
<input type="submit" value="회원가입">
<button type="button" onclick = "location.href = 'a.jsp'">취 소</button>
</form>
</body>
</html>
e.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean class="dto.MemberDTO" id="memberDTO" />
<jsp:useBean class="dao.MemberDAO" id="memberDAO" />
<jsp:setProperty property="*" name="memberDTO" />
<%
if(memberDAO.insert(memberDTO)){
out.println("<script>alert('회원가입 성공!');location.href = 'a.jsp';</script>");
}
else{
out.println("<script>alert('회원가입 실패!');history.go(-1);</script>");
}
%>
MemberDTO
package dto;
public class MemberDTO {
private String mid;
private String password;
private String name;
public String getMid() {
return mid;
}
public void setMid(String mid) {
this.mid = mid;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "MemberDTO [mid=" + mid + ", password=" + password + ", name=" + name + "]";
}
}
MemberDAO
package dao;
import java.util.ArrayList;
import dto.MemberDTO;
public class MemberDAO {
private static ArrayList<MemberDTO> datas = new ArrayList<>();
public boolean insert(MemberDTO memberDTO) {
for(MemberDTO data : MemberDAO.datas){
if(data.getMid().equals(memberDTO.getMid())){
return false;
}
}
MemberDTO data = new MemberDTO();
data.setMid(memberDTO.getMid());
data.setName(memberDTO.getName());
data.setPassword(memberDTO.getPassword());
MemberDAO.datas.add(data);
return true;
}
private boolean update(MemberDTO memberDTO) {
return false;
}
private boolean delete(MemberDTO memberDTO) {
return false;
}
public ArrayList<MemberDTO> selectAll(MemberDTO memberDTO){
ArrayList<MemberDTO> datas = new ArrayList<>();
datas.addAll(MemberDAO.datas); //깊은 복사해서 반환해야하지만 편의상 얕은 복사로 반환
return datas;
}
public MemberDTO selectOne(MemberDTO memberDTO){
//로그인
for(MemberDTO data : MemberDAO.datas){
if(data.getMid().equals(memberDTO.getMid())
&& data.getPassword().equals(memberDTO.getPassword())){
return data;
}
}
return null;
}
}
cssfile
더보기
/* 공통 스타일 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
button {
padding: 10px;
border: 1px solid lightgrey;
border-radius: 4px;
color: #333;
background-color: white;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
button:hover {
background-color: lightgrey;
}
/* a.jsp 전용 스타일 */
form {
display: flex;
flex-direction: column;
width: 300px;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
div {
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
input[type="submit"]{
padding: 10px;
border: none;
border-radius: 4px;
color: white;
background-color: #007BFF;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
input[type="submit"]:hover{
background-color: #0056b3;
}
/*chatGPT사용*/
span{
color: grey;
font-size : 12px;
}
/* b.jsp 전용 스타일 */
section {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
}
h3 {
margin-bottom: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 10px auto;
}
li {
padding: 5px 0;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
'problem solving > 과제&실습 코딩' 카테고리의 다른 글
[풀이/JSP] 간단한 쇼핑몰 프로그램 풀이코드 분석 (0) | 2024.08.11 |
---|---|
[과제/JSP] 간단한 쇼핑몰 프로그램 구현하기 (Controller 분할버전) (0) | 2024.08.11 |
[실습/JSP] 장바구니 프로그램 만들기 (+풀이 0807) (0) | 2024.08.07 |
[실습/JSP] 댓글 프로그램 만들기 (+풀이 0807) (0) | 2024.08.07 |
[과제/JSP] JSP 기초 연습을 위한 회원가입 구현하기 (0) | 2024.08.06 |