Spring - 회원 상세정보 수정처리 구현

Spring - 회원 상세정보 수정처리 구현

1. 컨트롤러(흐름제어)

MemberController

회원정보 수정처리 mapping(member/update.do)

전체 회원목록 페이지로 리다이렉트

package com.example.spring01.member.controller;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.example.spring01.member.model.dto.MemberVO;
import com.example.spring01.member.service.MemberService;
 
@Controller // 현재의 클래스를 controller bean에 등록시킴
public class MemberController {
    
    private static final Logger logger = LoggerFactory.getLogger(MemberController.class);
    
    // MemberService 객체를 스프링에서 생성하여 주입시킴
    @Inject
    MemberService memberService;
    
    // 01 회원 목록
    // url pattern mapping
    @RequestMapping("member/list.do")
    public String memberList(Model model){
    // controller => service => dao 요청
        List<MemberVO> list = memberService.memberList();
        model.addAttribute("list", list);
        return "member/member_list";
    }
    
    // 02_01 회원 등록 페이지로 이동
    @RequestMapping("member/write.do")
    public String memberWrite(){
        
        return "member/member_write";
    }
    
    // 02_02 회원 등록 처리 후 ==> 회원목록으로 리다이렉트
    // @ModelAttribute에 폼에서 입력한 데이터가 저장된다.
    @RequestMapping("member/insert.do")
    // * 폼에서 입력한 데이터를 받아오는 법 3가지 
    //public String memberInsert(HttpServlet request){
    //public String memberInsert(String userId, String userPw, String userName, String userEmail){
    public String memberInsert(@ModelAttribute MemberVO vo){
        // 테이블에 레코드 입력
        memberService.insertMember(vo);
        // * (/)의 유무에 차이
        // /member/list.do : 루트 디렉토리를 기준
        // member/list.do : 현재 디렉토리를 기준
        // member_list.jsp로 리다이렉트
        return "redirect:/member/list.do";
    }
    
    // 03 회원 상세정보 조회
    @RequestMapping("member/view.do")
    public String memberView(String userId, Model model){
        // 회원 정보를 model에 저장
        model.addAttribute("dto", memberService.viewMember(userId));
        //System.out.println("클릭한 아이디 확인 : "+userId);
        logger.info("클릭한 아이디 : "+userId);
        // member_view.jsp로 포워드
        return "member/member_view";
    }
    // 04. 회원 정보 수정 처리
    @RequestMapping("member/update.do")
    public String memberUpdate(@ModelAttribute MemberVO vo){
        memberService.updateMember(vo);
        return "redirect:/member/list.do";
    }
}
 

2. 서비스(비지니스로직, DB연동 이외의 작업)

MemberServiceImpl

회원 정보 수정처리 updateMember메서드 호출

package com.example.spring01.member.service;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.springframework.stereotype.Service;
 
import com.example.spring01.member.model.dao.MemberDAOImpl;
import com.example.spring01.member.model.dto.MemberVO;
 
// 현재 클래스를 스프링에서 관리하는 service bean으로 등록
@Service
public class MemberServiceImpl implements MemberService {
    
    // MemberDAOImpl 객체를 스프링에서 생성하여 주입시킴
    @Inject
    MemberDAOImpl memberDao;
    
    // 01. 전체 회원 목록 조회
    @Override
    public List<MemberVO> memberList() {
        return memberDao.memberList();
    }
    
    // 02. 회원 등록
    @Override
    public void insertMember(MemberVO vo) {
        memberDao.insertMember(vo);
    }
    // 03. 회원 정보 상세 조회 
    @Override
    public MemberVO viewMember(String userId) {
        return memberDao.viewMember(userId);
    }
    
    @Override
    public void deleteMember(String userId) {
        
    }
    // 04. 회원 정보 수정 처리
    @Override
    public void updateMember(MemberVO vo) {
        memberDao.updateMember(vo);
    }
 
}
 

3. 모델(비지니스로직, DB연동)

MemberDAOImpl

회원정보 수정처리 update메서드 호출

package com.example.spring01.member.model.dao;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;
 
import com.example.spring01.member.model.dto.MemberVO;
 
// 현재 클래스를 DAO bean으로 등록시킴
@Repository
public class MemberDAOImpl implements MemberDAO {
    
    // SqlSession 객체를 스프링에서 생성하여 주입시켜준다.
    // 의존관계 주입(Dependency Injection, DI)
    // 느스한 결함
    // IoC(Inversion of Control, 제어의 역전)
    @Inject
    // Inject애노테이션이 없으면 sqlSession은 null상태이지만
    // Inject애노테이션이 있으면 외부에서 객체를 주입시켜주게 된다. 
    // try catch문, finally문, 객체를 close할 필요가 없어졌다.
    SqlSession sqlSession;
    
    // 01. 전체 회원 목록 조회
    @Override
    public List<MemberVO> memberList() {
        return sqlSession.selectList("member.memberList");
    }
    // 02. 회원 등록
    @Override
    public void insertMember(MemberVO vo) {
        sqlSession.insert("member.insertMember", vo);
    }
    // 03. 회원 정보 상세 조회
    @Override
    public MemberVO viewMember(String userId) {
        return sqlSession.selectOne("member.viewMember", userId);
    }
    
    @Override
    public void deleteMember(String userId) {
        // TODO Auto-generated method stub
 
    }
    // 04. 회원 정보 수정 처리
    @Override
    public void updateMember(MemberVO vo) {
        sqlSession.update("member.updateMember", vo);
 
    }
 
}
 

MemberMapper.xml

회원정보 수정처리(update 쿼리 작성)

<?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와 중복되지 않도록 네임스페이스 기재 -->
<mapper namespace="member">
    <!-- 01. 회원록록 -->
    <select id="memberList" resultType="com.example.spring01.member.model.dto.MemberVO">
        SELECT 
          user_id AS userId, 
          user_name AS userName,
          user_email AS userEmail,
          user_regdate AS userRegdate
        FROM tbl_member
        ORDER BY userId
    </select>
    
    <!-- 02. 회원 등록 -->
    <insert id="insertMember">
        INSERT INTO tbl_member
            (user_id, user_pw, user_name, user_email)
        VALUES 
            (#{userId}, #{userPw}, #{userName}, #{userEmail})    
    </insert>
    
    <!-- 03. 회원정보 상세조회 -->
    <select id="viewMember" resultType="com.example.spring01.member.model.dto.MemberVO">
        SELECT 
          user_id AS userId, 
          user_name AS userName,
          user_email AS userEmail,
          user_regdate AS userRegdate,
          user_regdate AS userUpdatedate
        FROM tbl_member
        WHERE user_id = #{userId}
    </select>
    <!-- 04. 회원정보 수정처리 -->
    <update id="updateMember">
        UPDATE tbl_member
        SET
            user_pw = #{userPw},
            user_name = #{userName},
            user_email = #{userEmail},
            user_updatedate = SYSDATE
        WHERE
            user_id = #{userId}    
    </update>
</mapper>

4. 뷰

member_view.jsp

수정버튼 클릭 이벤트 jQuery 코드 작성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원정보 상세 페이지</title>
<%@ include file="../include/member_header.jsp" %>
<script>
    $(document).ready(function(){
        $("#btnUpdate").click(function(){
            document.form1.action = "${path}/member/update.do";
            document.form1.submit();
        });
    });
</script>
</head>
<body>
<%@ include file="../include/member_menu.jsp" %>
    <h2>회원정보 상세</h2>
    <form name="form1" method="post">
        <table border="1" width="400px">
            <tr>
                <td>아이디</td>
                 <!-- id는 수정이 불가능하도록 readonly속성 추가 -->
                <td><input name="userId" value="${dto.userId}" readonly="readonly"></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="password" name="userPw"></td>
            </tr>
            <tr>
                <td>이름</td>
                <td><input name="userName" value="${dto.userName}"></td>
            </tr>
            <!-- 누락된 부분 -->
            <tr>
                <td>이메일주소</td>
                <td><input name="userEmail" value="${dto.userEmail}"></td>
            </tr>
            <!-- 누락된 부분 -->
            <tr>
                <td>회원가입일자</td>
                <td>
                    <fmt:formatDate value="${dto.userRegdate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                </td>
            </tr>
            <tr>
                <td>회원정보 수정일자</td>
                <td>
                    <fmt:formatDate value="${dto.userUpdatedate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="수정" id="btnUpdate">
                    <input type="button" value="삭제" id="btnDelete">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

5. 실행화면

회원목록페이지에서 이름 클릭시 해당 id의 회원정보페이지로 이동

회원정보페이지에서 회원정보를 수정후 수정 버튼 클릭

회원정보를 수정처리후 전체회원 목록페이지로 리다이렉트