[웹프로젝트] 8. 마이페이지(1) 조회

ㅁ views/member에 myinfo.jsp를 만든다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

#profileImg{

width:250px;

height:250px;

border:1px solid lightgray;

border-radius: 50%;

}

</style>

</head>

<body>

<jsp:include page="/WEB-INF/views/common/header.jsp"/>

<h2 class="m-4">마이페이지</h2>

<br>

</div>

<label for="email">   Email :</label>

<label for="phone">   Phone :</label>

<label for="address">   Address :</label>

<label for="">   Gender : </label>   

</div>

<br>

</div>

</form>

</div>

</section>

<jsp:include page="/WEB-INF/views/common/footer.jsp"/>

</div>

</div>

<b>

탈퇴 후 복구가 불가능합니다. <br>

정말로 탈퇴 하시겠습니까?

</b>

비밀번호 :

</form>

</div>

</body>

</html>

- 마이페이지_myinfo.html에서 body태그를 복붙, 스타일 태그를 복붙했다.

ㅁ header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<style>

header{height: 50px}

header a{color:black;}

header .profile-img{width:30px;}

</style>

if('${alertMsg}' != ''){

alert('${alertMsg}');

if('${historyBackYN}' == 'Y'){

history.back();

}

</script>

</div>

<c:choose>

<c:when test="${ empty loginUser }">

<a href="${contextPath}/member/signup.do">회원가입</a>  | 

</c:when>

<c:otherwise>

<div>

<a href="${contextPath}/member/myinfo.do">${loginUser.userName}님</a>  | 

</div>

</c:otherwise>

</c:choose>

</div>

</header>

</li>

</li>

<a class="nav-link" href="#">일반게시판</a>

</li>

<a class="nav-link" href="#">사진게시판</a>

</li>

</ul>

</nav>

<h4 class="modal-title">Login</h4>

</div>

<label for="userPwd" class="mr-sm-2">Password:</label>

</div>

</div>

</form>

</div>

- ~님해서 로그인한 회원의 이름이 노출되는 a태그가 있다.

여기에 경로를 작성한다. 마이페이지로 이동하는.

ㅁ MemberController

package com.br.spring.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

import org.springframework.stereotype.Controller;

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 org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.br.spring.dto.MemberDto;

import com.br.spring.service.MemberService;

import lombok.RequiredArgsConstructor;

import lombok.extern.slf4j.Slf4j;

@Slf4j

@RequestMapping("/member")

@RequiredArgsConstructor

@Controller

public class MemberController {

private final MemberService memberService;

private final BCryptPasswordEncoder bcryptPwdEncoder;

@PostMapping("/signin.do")

public void signin(MemberDto m, HttpServletResponse response, HttpSession session, HttpServletRequest request) throws IOException {

MemberDto loginUser = memberService.selectMember(m);

// 로그인 성공시 => 세션에 회원정보를 담고, alert와 함께 메인 페이지로 이동

// 로그인 실패시 => alert와 함께 기존에 보던 페이지 유지(아이디, 비번 입력하는 로그인 폼 유지. 작성하던 입력데이터도 그대로.)

// script문을 응답데이터로 돌려줘서 흐름제어

response.setContentType("text/html; charset=utf-8");

PrintWriter out = response.getWriter();

out.println("<script>");

if(loginUser != null && bcryptPwdEncoder.matches(m.getUserPwd(), loginUser.getUserPwd())) { // 로그인 성공

session.setAttribute("loginUser", loginUser);

out.println("alert('" + loginUser.getUserName() + "님 환영합니다~');");

out.println("location.href = '" + request.getHeader("referer") + "';"); // 메인페이지가 아닌 이전에 보던 페이지로 이동

}else { // 로그인 실패

out.println("alert('로그인에 실패하였습니다. 아이디 및 비밀번호를 다시 확인해주세요.');");

out.println("history.back();"); // modal이 띄워진 상태였으면 modal도 유지된다.

}

out.println("</script>");

}

@GetMapping("/signout.do")

public String signout(HttpSession session) {

session.invalidate();

return "redirect:/";

}

@GetMapping("/signup.do")

public void signupPage() { } //WEB-INF/views/member/signup.jsp

@ResponseBody

@GetMapping("/idcheck.do")

public String idCheck(String checkId) {

return memberService.selectUserIdCount(checkId) == 0 ? "YYYY" : "NNNN";

}

@PostMapping("/insert.do")

public String signup(MemberDto m, RedirectAttributes rdAttributes) {

log.debug("암호화 전 member: {}", m);

m.setUserPwd( bcryptPwdEncoder.encode(m.getUserPwd()) );

log.debug("암호화 후 member: {}", m);

int result = memberService.insertMember(m);

// 성공시 alert와 함께 메인페이지 이동

// 실패시 alert와 함께 기존에 작업중이던 페이지 유지

if(result > 0) {

rdAttributes.addFlashAttribute("alertMsg", "성공적으로 회원가입 되었습니다.");

}else {

rdAttributes.addFlashAttribute("alertMsg", "회원가입에 실패하였습니다.");

rdAttributes.addFlashAttribute("historyBackYN", "Y");

}

return "redirect:/";

}

@GetMapping("/myinfo.do")

public void myinfoPage() {}

}

- myinfoPage() 메소드르르 만들었다.

굳이 응답 뷰를 반환할 필용 ㅓㅄ이 void로 둘 수 있다.

ㅁ myinfo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

#profileImg{

width:250px;

height:250px;

border:1px solid lightgray;

border-radius: 50%;

}

</style>

</head>

<body>

<jsp:include page="/WEB-INF/views/common/header.jsp"/>

<h2 class="m-4">마이페이지</h2>

<br>

<img id="profileImg" src="${contextPath}<c:out value='${loginUser.profileURL}' default='/resources/images/defaultProfile.png' />" onclick="$('#profileImgFile').click();">

</div>

<label for="email">   Email :</label>

<label for="phone">   Phone :</label>

<label for="address">   Address :</label>

<label for="">   Gender : </label>   

$(function(){

$("#myinfo_form :radio").filter("[value=${loginUser.gender}]").attr("checked", true);

})

</script>

</div>

<br>

</div>

</form>

</div>

</section>

<jsp:include page="/WEB-INF/views/common/footer.jsp"/>

</div>

</div>

<b>

탈퇴 후 복구가 불가능합니다. <br>

정말로 탈퇴 하시겠습니까?

</b>

비밀번호 :

</form>

</div>

</body>

</html>

- value값들을 다 loginUser에서 불러온다.

- 성별도 checked로 명시적으로 써있는걸 지운다.

현재 로그인한 회원의 성별에 따라서 둘 중에 하나가 체크된 상태로 보여지게끔 스크립트로 작성한다.

- form 요소에서 onsubmit 속성은 지운다.

id를 추가한다. myinfo_form.

언더바는 더블클릭하면 언더바 포함해서 전체선택됨.

대쉬는 더블클릭하면 단어만 선택됨.

- 공백은 후손선택자다. :은 타입선택자다.

- <img id="profileImg" src="../../../resources/images/defaultProfile.png" onclick="$('#profileImgFile').click();">에서

- <img id="profileImg" src="${contextPath}<c:out value='${loginUser.profileURL}' default='/resources/images/defaultProfile.png' />" onclick="$('#profileImgFile').click();">

ㅁ 서버키고 오른쪽 위의 이름을 눌러서 마이페이지로 이동

- db에 저장되어있던 데이터가 보여진다.

'Spring' 카테고리의 다른 글

[웹프로젝트] 10. 마이페이지(3) 프로필이미지 변경 요청 (1)	2024.10.29
[웹프로젝트] 9. 마이페이지(2) 수정 요청 (0)	2024.10.29
[웹프로젝트] 7. 회원가입(3) - 암호화 후 로그인 (0)	2024.10.29
[웹프로젝트] 6. 회원가입(2) - 암호화 (0)	2024.10.28
[웹프로젝트] 5. 회원가입 (1)	2024.10.28

공부 블로그

[웹프로젝트] 8. 마이페이지(1) 조회

'Spring' 카테고리의 다른 글

티스토리툴바

[웹프로젝트] 8. 마이페이지(1) 조회

'Spring' 카테고리의 다른 글

관련글

티스토리툴바