인덱스
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<h3>jdbc templates 실습</h3>
<c:if test="${empty sessionScope.loginId}">
<a href="/member/join">회원가입</a>
<a href="/member/login">로그인</a>
</c:if>
<c:if test="${not empty sessionScope.loginId}">
<h3>~ hello ${sessionScope.loginId} *^^* ~</h3>
<a href="/member/list">멤버 리스트</a>
<a href="/member/edit">내정보보기</a>
<a href="/member/logout">로그아웃</a>
<a href="/member/out">회원탈퇴</a>
<br/>
<a href="/board/list">게시판</a>
</c:if>
<br/><br/>
${msg }HomeController
@Controller
public class HomeController {
@RequestMapping("/")
public String root() {
return "index";
}
}
1. 회원가입
// 회원가입
@GetMapping("/join") // 폼
public void joinForm() {
}
@PostMapping("/join") // 완료
public String join(MemberVo vo) {
MemberVo mvo = service.getMember(vo.getId());
if (mvo == null) {
service.addMember(vo);
}
return "redirect:/"; //redirect로 페이지 이동 (redirect 이기 때문에 메시지 못보냄 ㅠ)
}
// id 중복체크
@ResponseBody // 응답 데이터를 직접 반환하겠다.
// JSON 형태 응답 보내기 위해 -> Map으로 리턴~
@PostMapping("/idcheck")
// @RequestParam("id") 쓰지 않아도 입력양식 이름과 같게 적으면 파라메터값 읽어올 수 있음.
public Map idcheck(String id) {
MemberVo mvo = service.getMember(id);
boolean flag = (mvo == null);
Map map = new HashMap(); // Map 하나 당 {}
map.put("flag", flag); // {"flag", true(or false)}
return map;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#b1').click(function(){
$.ajax({
url: '/member/idcheck',
type: 'post',
data: {'id':$('#id').val()}, // 전송할 데이터 -- id 라는 파라메터 이름으로 감~
dataType: 'json', // 응답 데이터 타입
success:function(result){ //result : json 형태로 받아오니까 배열.
let txt = '<h4 style="color:';
if(result.flag){
txt += 'blue">사용 가능한 아이디</h4>';
} else {
txt += 'red">사용 불가능한 아이디</h4>';
}
$('#res').html(txt);
},
error:function(req, status){
alert(status);
}
});
});
});
</script>
</head>
<body>
<h3>회원가입</h3>
<form action="/member/join" method="post">
id:<input type="text" name="id" id="id"><input type="button" value="id중복체크" id="b1">
<span id="res"></span><br/>
pwd:<input type="password" name="pwd"><br/>
name:<input type="text" name="name"><br/>
email:<input type="text" name="email"><br/>
<input type="submit" value="가입"><br/>
</form>
</body>2. 로그인
// 로그인
@GetMapping("/login") // 폼
public void loginForm() {
}
@PostMapping("/login") // 완료
public String login(MemberVo vo, HttpSession session) {
MemberVo mvo = service.getMember(vo.getId());
String msg = "로그인 실패";
// 조건 순서가 바뀌면 null 에러 떠용~
// && 에서 첫번째 조건이 false 이면 뒷 조건 안 봄!
// || 에서 첫번째 조건이 true 이면 뒷 조건 안 봄!
if (mvo != null && mvo.getPwd().equals(vo.getPwd())) {
mvo = service.getMember(vo.getId());
msg = "로그인 성공";
session.setAttribute("loginId", vo.getId());
}
session.setAttribute("msg",msg);
return"index";
}<h3>로그인</h3>
<form action="/member/login" method="post">
id:<input type="text" name="id"><br/>
pwd:<input type="password" name="pwd">
<input type="submit" value="로그인">
</form>3. 내정보 확인 & 수정
// 내정보보기 및 수정
@GetMapping("/edit") // 내정보보기
public void editForm(HttpSession session, ModelMap map) {
session.removeAttribute("msg"); // 로그인성공 메시지 초기화
String id = (String) session.getAttribute("loginId");
MemberVo vo = service.getMember(id);
map.addAttribute("vo", vo);
}
@PostMapping("/edit") // 수정
public String edit(MemberVo vo) {
service.editMember(vo);
return "redirect:/member/edit";
}<h3>내정보 수정</h3>
<form action="/member/edit" method="post">
id:<input type="text" name="id" value="${vo.id}" readonly><br/>
pwd:<input type="text" name="pwd" value="${vo.pwd}"><br/>
name:<input type="text" name="name" value="${vo.name}" readonly><br/>
email:<input type="text" name="email" value="${vo.email}"><br/>
<input type="submit" value="수정">
<input type="button" value="뒤로가기" onclick="location.href='/'"><br/>4. 로그아웃
// 로그아웃
@RequestMapping("/logout")
public String logout(HttpSession session) {
session.invalidate();
return "index";
}5. 탈퇴
// 탈퇴
@RequestMapping("/out")
public String out(HttpSession session) {
String id = (String) session.getAttribute("loginId");
service.delMember(id);
session.invalidate();
//return "redirect:/member/logout";
return "index";
}
0. 총 코드
MemberController
더보기
package com.example.demo.member;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import jakarta.servlet.http.HttpSession;
@Controller
@RequestMapping("/member")
public class MemberController {
@Autowired
private MemberService service;
@RequestMapping("/list")
public void list(ModelMap map) { // map은 view 페이지로 자동 전달
ArrayList<MemberVo> list = service.getAll();
map.addAttribute("list", list);
}
// 회원가입
@GetMapping("/join") // 폼
public void joinForm() {
}
@PostMapping("/join") // 완료
public String join(MemberVo vo) {
MemberVo mvo = service.getMember(vo.getId());
if (mvo == null) {
service.addMember(vo);
}
return "redirect:/"; //redirect로 페이지 이동 (redirect 이기 때문에 메시지 못보냄 ㅠ)
}
// id 중복체크
@ResponseBody // 응답 데이터를 직접 반환하겠다.
// JSON 형태 응답 보내기 위해 -> Map으로 리턴~
@PostMapping("/idcheck")
// @RequestParam("id") 쓰지 않아도 입력양식 이름과 같게 적으면 파라메터값 읽어올 수 있음.
public Map idcheck(String id) {
MemberVo mvo = service.getMember(id);
boolean flag = (mvo == null);
Map map = new HashMap(); // Map 하나 당 {}
map.put("flag", flag); // {"flag", true(or false)}
return map;
}
// 로그인
@GetMapping("/login") // 폼
public void loginForm() {
}
@PostMapping("/login") // 완료
public String login(MemberVo vo, HttpSession session) {
MemberVo mvo = service.getMember(vo.getId());
String msg = "로그인 실패";
// 조건 순서가 바뀌면 null 에러 떠용~
// && 에서 첫번째 조건이 false 이면 뒷 조건 안 봄!
// || 에서 첫번째 조건이 true 이면 뒷 조건 안 봄!
if (mvo != null && mvo.getPwd().equals(vo.getPwd())) {
mvo = service.getMember(vo.getId());
msg = "로그인 성공";
session.setAttribute("loginId", vo.getId());
}
session.setAttribute("msg",msg);
return "index";
}
// 로그아웃
@RequestMapping("/logout")
public String logout(HttpSession session) {
session.invalidate();
return "index";
}
// 탈퇴
@RequestMapping("/out")
public String out(HttpSession session) {
String id = (String) session.getAttribute("loginId");
service.delMember(id);
session.invalidate();
//return "redirect:/member/logout";
return "index";
}
// 내정보보기 및 수정
@GetMapping("/edit") // 내정보보기
public void editForm(HttpSession session, ModelMap map) {
session.removeAttribute("msg"); // 로그인성공 메시지 초기화
String id = (String) session.getAttribute("loginId");
MemberVo vo = service.getMember(id);
map.addAttribute("vo", vo);
}
@PostMapping("/edit") // 수정
public String edit(MemberVo vo) {
service.editMember(vo);
return "redirect:/member/edit";
}
}
index.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>Insert title here</title>
</head>
<body>
<h3>jdbc templates 실습</h3>
<c:if test="${empty sessionScope.loginId}">
<a href="/member/join">회원가입</a>
<a href="/member/login">로그인</a>
</c:if>
<c:if test="${not empty sessionScope.loginId}">
<h3>~ hello ${sessionScope.loginId} *^^* ~</h3>
<a href="/member/list">멤버 리스트</a>
<a href="/member/edit">내정보보기</a>
<a href="/member/logout">로그아웃</a>
<a href="/member/out">회원탈퇴</a>
<br/>
<a href="/board/list">게시판</a>
</c:if>
<br/><br/>
${msg }
</body>
</html>
join.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#b1').click(function(){
$.ajax({
url: '/member/idcheck',
type: 'post',
data: {'id':$('#id').val()}, // 전송할 데이터 -- id 라는 파라메터 이름으로 감~
dataType: 'json', // 응답 데이터 타입
success:function(result){ //result : json 형태로 받아오니까 배열.
let txt = '<h4 style="color:';
if(result.flag){
txt += 'blue">사용 가능한 아이디</h4>';
} else {
txt += 'red">사용 불가능한 아이디</h4>';
}
$('#res').html(txt);
},
error:function(req, status){
alert(status);
}
});
});
});
</script>
</head>
<body>
<!-- 입력양식 name과 멤버변수의 이름이 같아야 함!! -->
<!-- setter, getter, 파라메터없는 생성자 있어야 함!! -->
<!-- 폼 양식에 담긴 값을 자동으로 vo에 담음. 이름이 다르면 자동으로 안들어감. -->
<!-- vo의 멤버변수를 전부 form 에서 입력받을 필요는 없음. setter, getter 로 호출하기 때문에. -->
<h3>회원가입</h3>
<form action="/member/join" method="post">
id:<input type="text" name="id" id="id"><input type="button" value="id중복체크" id="b1">
<span id="res"></span><br/>
pwd:<input type="password" name="pwd"><br/>
name:<input type="text" name="name"><br/>
email:<input type="text" name="email"><br/>
<input type="submit" value="가입"><br/>
</form>
</body>
</html>login.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>로그인</h3>
<form action="/member/login" method="post">
id:<input type="text" name="id"><br/>
pwd:<input type="password" name="pwd">
<input type="submit" value="로그인">
</form>
</body>
</html>edit.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>내정보 수정</h3>
<form action="/member/edit" method="post">
id:<input type="text" name="id" value="${vo.id}" readonly><br/>
pwd:<input type="text" name="pwd" value="${vo.pwd}"><br/>
name:<input type="text" name="name" value="${vo.name}" readonly><br/>
email:<input type="text" name="email" value="${vo.email}"><br/>
<input type="submit" value="수정"><input type="button" value="뒤로가기" onclick="location.href='/'"><br/>
</form>
</body>
</html>
