Spring - 회원가입 시스템 구현 [IT 국비지원/구디 아카데미/김지훈 강사님]

hooon__dii·2023년 9월 19일

Spring

목록 보기

4/5

<!-- index.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
    table, th, td{
        border: 1px solid black;
        border-collapse: collapse;
        padding: 5px 10px;
    }
    
    input[type="submit"]{
    	height: 50px;
    }    
</style>
</head>
<body>
	<h2>LOGIN</h2>
	<hr/>
	<form action="login" method="post">
	    <table>
	        <tr>
	            <th>ID</th>
	            <th>
	                <input type="text" name="id" value="" placeholder="아이디를 입력 하세요"/>
	            </th>
	            <th rowspan="2">
	                <input type="submit" value="login"/>
	            </th>
	        </tr>
	        <tr>
	            <th>PW</th>
	            <th>
	                <input type="password" name="pw" value="" placeholder="비밀번호를 입력 하세요"/>
	            </th>                
	        </tr>
	        <tr>
	            <th colspan="3">
	                <input id="regist" type="button" value="회원가입"/>
	                <input type="button" value="아이디/비번 찾기"/>
	            </th>    
	        </tr>
	    </table>
	</form>
</body>
<script>
	$('#regist').on('click',function(){
		location.href='joinForm';
	});
	
	var msg = "${msg}";
	if(msg != ""){
		alert(msg);
	}
</script>
</html>

<!-- joinForm.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
	 table, th, td{
        border: 1px solid black; 
        border-collapse: collapse;
    }

    th, td{
        padding: 5px 10px;
    }
</style>
</head>
<body>
	<h2>회원가입 페이지</h2>
        <hr/><br/>
        <form action="join" method="post">
            <table>
                <tr>
                    <th>아이디</th>
                    <td>
                        <input type="text" name="id">
                    </td>
                </tr>
                <tr>
                    <th>비밀번호</th>
                    <td>
                        <input type="password" name="pw">
                    </td>
                </tr>
                <tr>
                    <th>이&nbsp;&nbsp;&nbsp;름</th>
                    <td>
                        <input type="text" name="name">
                    </td>
                </tr>
                 <tr>
                    <th>나이</th>
                    <td>
                        <input type="text" name="age">
                    </td>
                </tr>
                <tr>
                    <th>이메일</th>
                    <td>
                        <input type="email" name="email">
                    </td>
                </tr>
                
                <tr> 
                    <th>성&nbsp;&nbsp;&nbsp;별</th>
                    <td>
                        <input type="radio" name="gender" value="남자" checked>남자
                        <input type="radio" name="gender" value="여자">여자
                    </td>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="회원가입"/>
                    </th>
                </tr>
            </table>
            
        </form>
</body>
<script>

</script>
</html>

<!-- list.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 리스트</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
	table, th, td{
		border:  1px solid black;
		border-collapse: collapse;
		padding: 5px 10px;
	}
</style>
</head>
<body>
 	<div>
		안녕하세요 ${sessionScope.loginId }님
		&nbsp;&nbsp;&nbsp;
	<a href="logout">로그아웃</a>
	</div>
	<h3>회원 리스트</h3>
	<table>
		<tr>
			<th>id</th>
			<th>name</th>
			<th>gender</th>
			<th>삭제</th>
		</tr>
		<c:forEach items="${list }" var="member">
			<tr>
				<td>${member.id }</td>
				<td><a href="detail?id=${member.id }">${member.name }</a></td>
				<td>${member.gender }</td>
				<td><a href="del?id=${member.id }">삭제</a></td>
				<td></td>
			</tr>
		</c:forEach>
	</table>
</body>
<script>
	var msg = "${msg}";
	if(msg != ""){
		alert(msg);
	}
</script>
</html>

<!-- detail.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 상세 페이지</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
	 table, th, td{
        border: 1px solid black; 
        border-collapse: collapse;
    }

    th, td{
        padding: 5px 10px;
    }
</style>
</head>
<body>
	<h2>회원 상세 페이지</h2>
        <hr/><br/>
        <form action="join" method="post">
            <table>
                <tr>
                    <th>아이디</th>
                    <th>${member.id }</th>
                </tr>
                <tr>
                    <th>비밀번호</th>
                    <th>${member.pw }</th>
                </tr>
                <tr>
                    <th>이&nbsp;&nbsp;&nbsp;름</th>
                    <th>${member.name }</th>
                </tr>
                 <tr>
                    <th>나이</th>
                    <th>${member.age }</th>
                </tr>
                <tr>
                    <th>이메일</th>
                    <th>${member.email }</th>
                </tr>
                
                <tr> 
                    <th>성&nbsp;&nbsp;&nbsp;별</th>
                    <th>${member.gender }</th>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="button" value="리스트" onclick="location.href='list'"/>
                    </th>
                </tr>
            </table>
            
        </form>
</body>
<script>

</script>
</html>

// MemberDTO
package kr.co.gudi.dto;

// beans, VO, DTO 여려가지 이름으로 불린다.
// 본질은 데이터를 담고 있는 객체
public class MemberDTO {
	// 빈즈 규약 : private으로 선언 할 것
	// 약속 : 컬럼명과 DTO의 변수는 가급적이면 통일
	// parameter == DTO 변수 == 컬럼명 이 가장 이상적
	
	private String id;
	private String pw;
	private String name;
	private int age;
	private String gender;
	private String email;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
}

// MemberController

@Controller
public class MemberController {

	Logger logger = LoggerFactory.getLogger(getClass());
	
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String index() {
		logger.info("login page 이동");
		return "index";
	}
	
	//회원가입 페이지로 이동
	@RequestMapping(value = "/joinForm", method = RequestMethod.GET)
	public String joinForm() {
		logger.info("join page로 이동");
		return "joinForm";
	}
	
	
	// 회원가입
	@RequestMapping(value = "/join", method = RequestMethod.POST)
	public String join(Model model, @RequestParam HashMap<String, String> params ) {
		logger.info("params : "+params );
		MemberService service = new MemberService();
		String msg = service.join(params);
		model.addAttribute("msg", msg);
		return "index";
	}
	
	// 로그인 
	@RequestMapping(value = "/login", method = RequestMethod.POST)
	public String login(Model model, HttpSession session, 
			@RequestParam String id, @RequestParam String pw) {
		logger.info(id+" / "+pw );
		MemberService service = new MemberService();
		boolean success = service.login(id, pw);
		logger.info("login success : "+success);
		String page = "index";
		
		
		if(success) {	// 로그인 성공시
			// session에 로그인 성공했다는 표시로 id를 저장한다.
			session.setAttribute("loginId", id);
			// list.jsp로 이동한다 (list.jsp에는 회원 정보 리스트가 나타나야 한다.
			page = "redirect:/list";	// 성공하면  -> / list 요청을 보내도록 한다.
		}else {		// 로그인 실패시
			// msg에 '아이디 또는 비밀번호를 확인하세요' 라는 메시지를 담는다.
			// index.jsp로 보낸다.
			model.addAttribute("msg", "아이디 또는 비밀번호를 확인하세요!");	
		}
		
		return page;
	}
	
	// list
	@RequestMapping(value = "/list")
	public String list(Model model, HttpSession session) {
		logger.info( "list 요청받음" );
		String page = "index";
		String msg = "로그인이 필요합니다.";
		
		if(session.getAttribute("loginId") != null){	// 로그인 했을경우에만 내용을 실행
			page = "list";
			msg = "";
			MemberService service = new MemberService();
			model.addAttribute("list", service.list());
		}
		model.addAttribute("msg", msg);
		
		return page;
	}
	
	// delete
	@RequestMapping(value = "/del", method = RequestMethod.GET)
	public String del(Model model,@RequestParam String id, HttpSession session) {
		logger.info("delete 요청");
		logger.info("param id : " + id);
		String page = "index";
		if(session.getAttribute("loginId")!= null) {
			page = "redirect:/list";
			MemberService service = new MemberService();
			service.del(id);
			
		}else {
			model.addAttribute("msg", "로그인이 필요한 서비스 입니다.");
		}
		return page;
	}
	
	// detail
	@RequestMapping(value = "/detail", method = RequestMethod.GET)
	public String detail(Model model, HttpSession session, @RequestParam String id ) {
		logger.info("상세보기 요청 : " + id);
		String page = "redirect:/list";
		
		if(session.getAttribute("loginId") != null) {
			MemberService service = new MemberService();
			MemberDTO member = service.detail(id);
			if(member != null) {
				page = "detail";
				model.addAttribute("member", member);
			}
		}else {
			page = "index";
			model.addAttribute("msg" , "로그인이 필요합니다.");
		}
		return page;
	}
	
    // logout - session 속성 제거
	@RequestMapping(value = "/logout", method = RequestMethod.GET)
	public String logout(HttpSession session) {
		session.removeAttribute("loginId");
		return "redirect:/";
		
	}
	
			
}

// MemberService

public class MemberService {
	Logger logger = LoggerFactory.getLogger(getClass());
	
	// 회원가입
	public String join(HashMap<String, String> params) {
		logger.info("join 요청 (service)");
		String msg = "회원가입에 실패 하였습니다.";
		
		MemberDAO dao = new MemberDAO();
		
		int row = dao.join(params);
		if(row>0) {
			msg = "회원가입에 성공했습니다.";
		}
		return msg;
	}
	
	// 로그인
	public boolean login(String id, String pw) {
		MemberDAO dao = new MemberDAO();
		return dao.login(id, pw);
	}
	
    // list
	public ArrayList<MemberDTO> list() {
		MemberDAO dao = new MemberDAO();
		return dao.list();
	}
	
    // delete
	public void del(String id) {
		MemberDAO dao = new MemberDAO();
		dao.del(id);
	}
	
    // detail
	public MemberDTO detail(String id) {
		MemberDAO dao = new MemberDAO();
		MemberDTO dto = new MemberDTO();
		return dao.detail(id);
	}
}

// MemberDAO

public class MemberDAO {
	Logger logger = LoggerFactory.getLogger(getClass());

	public Connection conn = null;	// 다른곳에서도 conn을 사용하기 위해 public
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	// 생성자를 만드는 이유? DAO라는 객체를 사용한다는것은 DB를 사용한다는 뜻
	// 객체가 호출 될때마다 DB와 연결 해주는 작업을 해주기 위해
	public MemberDAO() {
		try {
			Context ctx = new InitialContext();
			DataSource ds =  (DataSource) ctx.lookup("java:comp/env/jdbc/MariaDB");
			conn = ds.getConnection();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	// 자원정리
	public void close() {
		try {
			if(rs != null) { rs.close();}
			if(pstmt != null) { pstmt.close();}
			if(conn != null) { conn.close();}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// 회원가입 ( join )
	public int join(HashMap<String, String> params) {
		logger.info("join요청 ( DAO )");
		int row = 0;
		String sql = "INSERT INTO member(id, pw, name, age, gender, email)"
				+ "VALUES(?, ?, ?, ?, ?, ?)";
		
		try {
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1,params.get("id"));
			pstmt.setString(2,params.get("pw"));
			pstmt.setString(3,params.get("name"));
			pstmt.setInt(4,Integer.parseInt(params.get("age")));
			pstmt.setString(5,params.get("gender"));
			pstmt.setString(6,params.get("email"));
			
			row = pstmt.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			close();
		}
		return row;
	}

	// 로그인 ( login )	- id와 pw가 일치하는 id 값이 있나?
	public boolean login(String id, String pw) {
		logger.info("login 요청 ( DAO )");
		String sql = "SELECT id, pw FROM member WHERE id=? AND pw =?";
		boolean success = false;
		try {
			pstmt= conn.prepareStatement(sql);
			
			pstmt.setString(1, id);
			pstmt.setString(2, pw);
			
			rs = pstmt.executeQuery();
			success = rs.next();	// Result Set에 값이 있는지 여부 확인
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			close();
		}
		return success;
	}
	
	
	
	// 리스트 ( list )
	public ArrayList<MemberDTO> list() {
		// 1. 쿼리문(id, name, gender )
		String sql = "SELECT id, name, gender FROM member";
		ArrayList<MemberDTO> list = null;
		
		try {
			// 2. Prepared Statement -> ? 가 필요한가.
			pstmt = conn.prepareStatement(sql);
			// 3. 쿼리문실행 -> Update / Query
			rs = pstmt.executeQuery();
			// 4. ResultSet 에서 데이터 가져오기
			list = new ArrayList<MemberDTO>();
			while(rs.next()) {
				String id = rs.getString("id");
				String name = rs.getString("name");
				String gender = rs.getString("gender");
				logger.info(id+" / "+name+" / "+gender);
				
				// DTO에 가져온값 담기
				MemberDTO dto = new MemberDTO();
				dto.setId(id);
				dto.setName(name);
				dto.setGender(gender);
				list.add(dto);
			}
			// 5. 어떻게 담아서 보낼것인가
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			close();
		}
		return list;
	}

	// 삭제 ( delete )
	public void del(String id) {
		String sql = "DELETE FROM member WHERE id = ?";
		int row = 0;
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			row = pstmt.executeUpdate();
			logger.info("삭제 개수 : "+ row);
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			close();
		}
	}

	
	// 상세 보기 ( detail )
	public MemberDTO detail(String id) {
		// 1. 쿼리문
		String sql = "SELECT * FROM member WHERE id = ?";
		
		MemberDTO dto = null;
		try {
			// 2. PreparedStatement
			pstmt = conn.prepareStatement(sql);
			// 3. ? 대응
			pstmt.setString(1, id);
			// 4. 쿼리 실행
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				dto = new MemberDTO();
				dto.setId(rs.getString("id"));
				dto.setPw(rs.getString("pw"));
				dto.setName(rs.getString("name"));
				dto.setAge(rs.getInt("age"));
				dto.setGender(rs.getString("gender"));
				dto.setEmail(rs.getString("email"));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			close();
		}
		return dto;
	}

hooon__dii

이전 포스트

Spring - Transaction [IT 국비지원/구디 아카데미/김지훈 강사님]

다음 포스트

Spring - 회원가입 시스템 구현 [IT 국비지원/구디 아카데미/김지훈 강사님]

Spring

Spring - Transaction [IT 국비지원/구디 아카데미/김지훈 강사님]

Spring - Mybatis [IT 국비지원/구디 아카데미/김지훈 강사님]

0개의 댓글