[64] 230330 Spring: 회원 상세 정보 보는 페이지 만들기 [K-디지털 트레이닝 64일]

230329 Thu 64th class

Ch. 18 MVC 패턴 구현
진도: Ch. 18 MVC 패턴 구현에 기반한 자체 수업 (교재: 최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지, 저자: 최범균)
책 예제 코드: https://github.com/madvirus/jsp23
저자 블로그: https://javacan.tistory.com/

최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지 | 최범균 - 교보문고

---

오늘 배운 것 중 기억할 것을 정리했다.

---

void 타입의 메소드는 값을 전달 할 수 없고, 단지 출력만 가능합니다.
참고: https://cloudstudying.kr/questions/49

---

프론트엔드 영역은 servlet-context.xml
백엔드 영역은 root-context.xml이 맡는다.

코드) servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="org.hj.controller" />
	
	<beans:bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver">
	</beans:bean>

</beans:beans>

코드) root-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	<!-- DBCP(DB Connection Pool) -->
	
	<bean id="hikariConfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
		<property name="jdbcUrl" value="jdbc:mysql://localhost:3306/sample?serverTimezone=Asia/Seoul"></property>
		<property name="username" value="root"></property>
		<property name="password" value="1234"></property>
	</bean>
	
	
	
	
	<bean id="dataSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close">
		<constructor-arg ref="hikariConfig" />
	</bean>
	
	<!-- Mybatis 관련 설정 SessionFactory -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
	</bean>
		
	<mybatis-spring:scan base-package="org.hj.mapper"/>	
	
	<context:component-scan base-package="org.hj.service"/>
	
		
</beans>

---

첫번째 resources: xml파일들이 있다. (select절, insert절 등)
두번째 resources: 외부 css, js파일 넣는 공간 

---

MySQL의 데이터 → LoginVO.java (컨트롤러)로 간다.

→ 코드) LoginVo.java 일부

package org.hj.model;

public class LoginVO {

	private String id;
	private String password;
	private String addr;
	private String phone;
	private String email;
	private String name;
	private int age;

}

→ listDetail.jsp로 넘어간다. 

---

문제 풀어보기)

지금까지 배운 내용을 토대로
http://localhost:8081/list(회원목록리스트)에서

1) ID를 클릭하면 그 회원의 상세내용을 알 수 있는 화면으로 이동함과
2) 동시에 정보를 조회하고(select 결과 1 건 - login을 참고)

3) 그 화면에 수정과 삭제 버튼을 생성하여,
4) 수정 및
5) 삭제(회원 가입 - insert를 참조)를 하도록 구현해보세요.

참고: https://doublesprogramming.tistory.com/91

참고: https://yoonbitnara.github.io/spring/53/

---

LoginMapper.xml에서 <를 치면 쓸 수 있는 코드들이 나온다.

---

id 값을 넘기기

(내가 쓴 건 변수명 memlistDetail이다. 수업에선 memdetail로 씀)

화면의 id
http://localhost:8081/listDetail?id=abcd

→ MemberController.java
   memlistDetail()
   → ls.memlistDetail()

→ LoginService.java

public void memlistDetail();

→ LoginServiceImpl.java

public void memlistDetail(){
lm.memlistDetail()
}

→ LoginMapper.java

public void memlistDetail();

→ LoginMapper.xml

select *
from member
where id=#{id}

---

반대 방향으로도 가능하다.
return을 이용한다. 

LoginMapper.xml의 LoginVO(모델)가 넘어갈 때
다른 파일의 void 때문에 return이 안 되므로 다 바꿔야한다. 

---

두 가지 방법
1. form 태그를 이용한다.

<form action="listDetail">
	아이디<input type="text" name="id>
</form>

2. a 태그 이용하면 된다.

<a href="listDetail?id=아이디값">아이디</a>

listDetail.jsp로 가기 전에 select로 아이디 값을 가져간다.

---

void add(int a){ //메서드 선언

}
add(10) //메서드 호출

위의 형태는 아래와 같다.

public void memlistDetail(String id);//[#메서드 선언#]

ls.memlistDetail(id);//[#메서드 호출#]

id는 기본키이므로 중복 안 된다. 한 건만 나온다.

---

코드 1) 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>
</head>
<body>
<!--  ${memlist} -->
	<table border="1">
	<tr>
		<td>ID</td><td>비밀번호</td><td>주소</td><td>폰번호</td><td>이메일</td><td>이름</td><td>생일</td>
	</tr> <!-- c:forEach var="변수" items="아이템" -->
	<c:forEach var="list" items="${memlist}"> <!-- 반복한다. -->
		<tr>
		<td><a href="listDetail?id=${list.id}">${list.id}</a></td> 
		<!-- 내가 틀린 부분: <a href="listDetail"> 에서 ?id=${list.id} 추가하면 id값이 listDetail.jsp로 넘어가게 된다. -->
		<td>${list.password}</td>
		<td>${list.addr}</td>
		<td>${list.phone}</td>
		<td>${list.email}</td>
		<td>${list.name}</td>
		<td>${list.age}</td>
	</tr>
	</c:forEach>
	</table>
</body>
</html>

→ 코드 2) listDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>개인 회원 관리 상세 페이지</title>
</head>
<body>

<!-- DB 작업을 해야한다. 서비스와 Mapper에 보내준다. -->

<%-- ${listDetail} --%>

<a href="listDetail?id=${list.id}">아이디</a>

	<table border="1">
	<tr>
		<td>ID</td><td>${listDetail.id}</td>
	</tr>
	<tr>	
		<td>비밀번호</td><td>${listDetail.password}</td>
	</tr>
	<tr>	
		<td>주소</td><td>${listDetail.addr}</td>
	</tr>
	<tr>
		<td>폰번호</td><td>${listDetail.phone}</td>
	</tr>
	<tr>
		<td>이메일</td><td>${listDetail.email}</td>
	</tr>	
	<tr>
		<td>이름</td><td>${listDetail.name}</td>
	</tr>
	<tr>
		<td>생일</td><td>${listDetail.age}</td>
	</tr>
	</table>
<form>
<input type="submit" value="수정" formaction="modifyMember.jsp">
<input type="submit" value="삭제" formaction="removeMember.jsp">
</form>	
</body>
</html>

→ 코드 3) MemberController.java

package org.hj.controller;

import javax.servlet.http.HttpSession;

import org.apache.tomcat.util.net.openssl.ciphers.Authentication;
import org.hj.model.LoginVO; //모델(LoginVO)이 있음을 알려준다.
import org.hj.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
//import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller

public class MemberController { //MVC중 컨트롤러 역할을 한다.

	@Autowired
	LoginService ls; //LoginService ls = new LoginService(); 클래스를 new를 써서 객체화한 것. 
	//LoginService는 인터페이스이므로 원래 new는 안 되는 데 위에 @AutoWired 이용해서 가능하게 했다.
	
	// 회원가입 //화면 실행을 위한 멤버 (GET방식)
	@RequestMapping(value = "/member", method = RequestMethod.GET) //member 메서드 GET 방식
	public String member () {
		return "member/memberin"; //멤버 폴더의 memberin.jsp를 실행한다.
	}
	
	// 회원가입서버 //실제로 가입하기 위한 멤버 (POST방식)
	@RequestMapping(value = "/member", method = RequestMethod.POST) //둘 다 GET이면 충돌이 일어난다. 메서드 방식이 POST이다.
	//							int		a //member는 참조 변수
	//public String memberPost(String id, String password, String name) //메모리 차지가 크므로 쓰지 않는 방법이다. private 같은 접근 제한자도 없다.
	public String memberPost (LoginVO member) { // 모델: LoginVO
		System.out.println(member); //member.toString()이 생략된 것이다.
		//#####새로 추가함#####
		ls.memreg(member);
		return "board/list"; //board 폴더의 list.jsp를 실행한다. 게시판 목록을 보여준다.
	}
	
	
	// 로그인 페이지
	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String login () {
		System.out.println("aaaa");
		return "member/login";
	}
	
	// 로그인 서버
	@RequestMapping(value = "/login", method = RequestMethod.POST)
	public String loginPost (HttpSession session, LoginVO member) { //member: login.jsp의 데이터를 가져온다.
		// HttpSession session = new HttpSession; 위 ()안의 HttpSession session을 지우고 대신 사용 가능하다.
/*		System.out.println("contorller="+member);
		System.out.println(ls.login(member));*/
		
		session.setAttribute("login", ls.login(member)); //위 member의 아이디, 비밀번호를 가져간다.
		
		if (ls.login(member)==null) {
			return "member/login";
			} else {
				session.setAttribute("login", ls.login(member)); //null이 아니면 세션에 저장한다.
				return "redirect:/list"; 
				//위는 주소 정의해준 게 없어서 처음에 에러남 (board의 list.jsp로 가는 게 아닌 듯 -> member 폴더의 list.jsp 따로 만들어야한다.)
				//return "/board/list"; //게시판 리스트 보기 위해 내가 아래 코드로 바꿈. 
			}
		}
	
	// 회원관리페이지
	@RequestMapping(value = "/list", method = RequestMethod.GET) //value:요청받을 url을 설정하게 된다.
	public String mergerlist(Model model) { //처음 에러 메시지 있는 이유: 리턴이 있어야 한다.
		//model.addAttribute(String name, Object value);
		//: value 객체를 name 이름으로 추가함. 뷰 코드에서는 name으로 지정한 이름을 통해서 value를 사용함.
		model.addAttribute("memlist", ls.memlist()); //ls.memlist()->memlist:데이터 저장해서 넘긴다.
		return "member/list"; //member폴더의 list.jsp 만들어준다. /WEB-INF/views/member/list.jsp
	}
	
	//과제: 개인 회원 상세 정보 조회 페이지
	@RequestMapping(value = "/listDetail", method = RequestMethod.GET) //list.jsp의 <a>태그의 ?에 끌고가는 게 있으면 같이 가게 된다.
	//public String memberDetail(String id) {//매개 변수를 둔다. 
	public String memberDetail(LoginVO login, Model model) {
		// 매개변수를 (LoginVO login)로도 해도 된다 (private String id가 정의되어있으므로) //처음 에러 메시지: 리턴이 있어야 한다.
		//ls.memlistDetail(id);//[#메서드 호출#]
		model.addAttribute("listDetail", ls.memlistDetail(login));
		return "member/listDetail"; // /WEB-INF/views/member/listDetail.jsp
	}
	
	//회원 정보 수정 및 삭제
}

→ 코드 4) LoginService.java

package org.hj.service; //LoginService는 패키지 안에 있다. 

import java.util.ArrayList;

import org.hj.model.LoginVO;
//인터페이스(도면): 설계한다. 매개 변수 등 파악해서 미리 설계해둔 곳이다.
public interface LoginService { //인터페이스가 new()를 할 수 없으므로 MemberController.java에 @Autowired를 설정
	//#####새로 추가함#####
	public void memreg(LoginVO member); //추상메서드이므로 LoginServiceImpl.java에서 구현한다.
	public LoginVO login(LoginVO member);
	public ArrayList<LoginVO> memlist(); //비워둔다.
	//public LoginVO memlistDetail(String id);//[#메서드 선언#] //리턴 타입을 모르겠으면 우선 void로 둔다.
	public LoginVO memlistDetail(LoginVO login);
}

→ 코드 5) LoginServiceImpl.java

package org.hj.service; //파일의 위치는 패키지를 보면 알 수 있다.

import java.util.ArrayList;

import org.hj.mapper.LoginMapper;
import org.hj.model.LoginVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
//구현한다.
@Service
public class LoginServiceImpl implements LoginService { //LoginService를 구현한다.
	
	@Autowired
	LoginMapper lm; //LoginMapper lm = new LoginMapper();
	
	//#####새로 추가함#####
	public void memreg(LoginVO member) { //추상메서드 LoginSerive.java를 구현한다.
		lm.memreg(member);
	};
	
	public LoginVO login (LoginVO member) {
		System.out.println("service="+member);
		System.out.println("service return="+lm.login(member));
		return lm.login(member);
	}
//비즈니스까지 끝났다. 서비스 -> DB 연결해야한다.	
	public ArrayList<LoginVO> memlist() {
		
		return lm.memlist();
		
	}
	
	//public LoginVO memlistDetail(String id) {
	public LoginVO memlistDetail(LoginVO login) {
		
		return lm.memlistDetail(login);//[#메서드 호출#]
		
	}
}

→ 코드 6) LoginMapper.java

package org.hj.mapper;

import java.util.ArrayList;

import org.hj.model.LoginVO;

public interface LoginMapper {
	//#####새로 추가함#####
	public void memreg(LoginVO member);
	public LoginVO login(LoginVO member);
	public ArrayList<LoginVO> memlist();
	//public LoginVO memlistDetail(String id);//[#메서드 선언#]
	public LoginVO memlistDetail(LoginVO login);
}

→ 코드 7) LoginMapper.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

  
  <mapper namespace="org.hj.mapper.LoginMapper">
  
  <!-- #####새로 추가함##### -->
	<insert id="memreg"> <!-- LoginMapper.java의 memreg를 연결한다. insert태그를 사용한다.-->
  		insert into member (id, password, name, birthday, gender)
  		values(#{id},#{password},#{name},sysdate(),"f");
	</insert>
  
  	
	<select id="login" resultType="org.hj.model.LoginVO"> <!-- 구현메서드가 없으니까 return이 없다. -->
	<!-- 대신 select는 resultType이라는 타입이 return 역할이다. -->
  		select id, password <!-- 결과는 한 건이다. id는 기본키이다. -->
  		from member
  		where id=#{id} and password=#{password}
	</select>
  	
  	<!-- 회원 관리 리스트 페이지 -->
  	<select id="memlist" resultType="org.hj.model.LoginVO">
  	
  		select * from member <!-- 결과는 여러 건이다. LoginVO타입의 배열이 필요하다!-->
  		  		
  	</select>
  	
	<!-- 개인 회원 상세 정보 조회 페이지 -->
  	<select id="memlistDetail" resultType="org.hj.model.LoginVO"> <!-- select된 결과를 org.hj.model.LoginVO 클래스에 저장한다. -->
  	
  		select * 
  		from member 
  		where id=#{id} <!-- id를 끌고오는 작업이 필요하다. 메서드의 매개변수로 가능하다. 총 두 가지 방법: String id, LoginVO로 가져올 수 있다.-->
  		  		
  	</select>
  </mapper>

---

결과) 회원 리스트로 간다.

회원 리스트

아이디를 클릭하면 URL에 ?id="선택한 아이디"가 뜨고 상세 페이지가 뜬다.

회원 정보 상세 페이지 화면

---