코딩항해기

[실습/JSP] JSP 로그인 회원가입 연습하기 본문

problem solving/과제&실습 코딩

[실습/JSP] JSP 로그인 회원가입 연습하기

miniBcake 2024. 8. 8. 12:39

 

[실습]

로그인, 회원가입, 회원목록 조회 기능 구현하기

(jsp/apache tomcat)

 

[로직]

더보기
  1. 로그인
    1. 사용자에게 아이디와 비밀번호를 입력받아 이동한다.
    2. 전달받은 데이터를 DTO에 담아 DAO selectOne에 보낸다
    3. selectOne에서는 해당 id와 pw를 지닌 데이터가 있는지 확인한다.
    4. 있다면 해당 객체를 반환하고 아니라면 null을 반환한다.
    5. 객체가 반환되었다면, 세션에 이름을 저장하고, 이동한다.
    6. null이 반환되었다면 이전페이지로 돌아가며 로그인실패를 안내한다.
  2. 메인페이지
    1. 정상적으로 메인 페이지에 들어왔다면 세션값이 있는 상태이므로 세션 값을 불러온다.
    2. 불러온 세션 값, 즉 유저명을 페이지에 띄운다.
    3. 목록 출력하는 부분에서 DAO로부터 전체 데이터를 받아온다.
    4. 받아온 데이터가 비어있다면 비어있음을 안내한다.
    5. 받아온 데이터가 비어있지 않다면 for문을 통해 값을 하나씩 보여준다.
  3. 회원가입
    1. 사용자로부터 아이디와 비밀번호, 이름을 받아 이동한다.
    2. 전달받은 값을 DAO를 통해 넣는다.
    3. insert하기 전에 DB에 이미 있는 id라면 insert 실패를 띄운다.
    4. 실패했다면 실패했음을 안내하고 이전 페이지인 회원가입 페이지로 돌아간다.
    5. 성공했다면 성공했음을 안내하고 로그인 페이지로 돌아간다.
    6. 회원가입 페이지에서 취소를 누르면 로그인 페이지로 돌아간다.

 

[화면]

 

 

[코드]

(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
'problem solving/과제&실습 코딩' Related Articles more