[홈페이지 제작] 게시판 만들기 9 - 비밀번호 수정 페이지

Feb 08, 2024

Contents

1. View 확인 2. Controller 3. Repository 4. DB 데이터 View에 전달

지난 블로그에서 게시글 만들기와 수정, 삭제를 만들었다. 이번 블로그에서는 회원의 정보를 변경하는 페이지를 만들어본다.

1. View 확인

user/updateForm.mustache


{{> /layout/header}}

<div class="container p-5">


    <div class="card">
        <div class="card-header"><b>회원수정을 해주세요</b></div>
        <div class="card-body">
            <form action="/user/update" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" value="{{sessionUser.username}}" disabled>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email" disabled>
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입수정</button>
            </form>
        </div>
    </div>
</div>

{{> /layout/footer}}

지금은 아이디와 이메일은 두고 비밀번호만 수정할 수 있도록 만든다. 유저 네임과 이메일은 DB에서 데이터를 받아서 표시하고 비밀번호만 입력 받을 수 있도록 한다.

2. Controller


@GetMapping("/user/updateForm")
    public String updateForm(HttpServletRequest request) {
				// 세션 접근
        User sessionUser = (User) session.getAttribute("sessionUser");
				// 로그인 정보 확인
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }
				// DB에서 세션id를 가지고 유저네임과 이메일을 조회
        User user = userRepository.findByUsernameAndEmail(sessionUser.getId());
				// 세션 정보를 View 에 넣는다.
        request.setAttribute("sessionUser", user);

        return "user/updateForm";
    }

3. Repository

user/UerRepository


public User findByUsernameAndEmail(int id) {
            Query query = em.createNativeQuery("select username, email from user_tb where id =?",User.class);
            query.setParameter(1,id);

        try{
            User user = (User) query.getSingleResult(); // getSingleResult()의 리턴값이 오브젝트라 다운캐스팅
            return user ;
        }catch(Exception e){
            return null ;
        }

select 쿼리를 통해 유저네임과 이메일을 조회한다. id 는 세션의 아이디를 넘겨받는다.

4. DB 데이터 View에 전달

DB에서 전달 받은 데이터를 View 에 전달한다.


{{> /layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원수정을 해주세요</b></div>
        <div class="card-body">
            <form action="/user/update" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" value="{{sessionUser.username}}" disabled>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email" value="{{sessionUser.email}}" disabled>
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입수정</button>
            </form>
        </div>
    </div>
</div>

{{> /layout/footer}}

Enter username 태그와 Enter email 태그에 각각 value="{{sessionUser.username}}” , value="{{sessionUser.email}}" 를 추가해서 컨트롤러의 user데이터를 전달받는다.

아이디 ssar 로 로그인 했을 때 DB 의 유저네임과 이메일을 전달받아 페이지에 띄운다.

{{> /layout/header}} <div class="container p-5"> <div class="card"> <div class="card-header"><b>회원수정을 해주세요</b></div> <div class="card-body"> <form action="/user/update" method="post" enctype="application/x-www-form-urlencoded"> <div class="mb-3"> <input type="text" class="form-control" placeholder="Enter username" name="username" value="{{sessionUser.username}}" disabled> </div> <div class="mb-3"> <input type="password" class="form-control" placeholder="Enter password" name="password"> </div> <div class="mb-3"> <input type="email" class="form-control" placeholder="Enter email" name="email" disabled> </div> <button type="submit" class="btn btn-primary form-control">회원가입수정</button> </form> </div> </div> </div> {{> /layout/footer}}

@GetMapping("/user/updateForm") public String updateForm(HttpServletRequest request) { // 세션 접근 User sessionUser = (User) session.getAttribute("sessionUser"); // 로그인 정보 확인 if (sessionUser == null) { return "redirect:/loginForm"; } // DB에서 세션id를 가지고 유저네임과 이메일을 조회 User user = userRepository.findByUsernameAndEmail(sessionUser.getId()); // 세션 정보를 View 에 넣는다. request.setAttribute("sessionUser", user); return "user/updateForm"; }

public User findByUsernameAndEmail(int id) { Query query = em.createNativeQuery("select username, email from user_tb where id =?",User.class); query.setParameter(1,id); try{ User user = (User) query.getSingleResult(); // getSingleResult()의 리턴값이 오브젝트라 다운캐스팅 return user ; }catch(Exception e){ return null ; }

{{> /layout/header}} <div class="container p-5">  <div class="card"> <div class="card-header"><b>회원수정을 해주세요</b></div> <div class="card-body"> <form action="/user/update" method="post" enctype="application/x-www-form-urlencoded"> <div class="mb-3"> <input type="text" class="form-control" placeholder="Enter username" name="username" value="{{sessionUser.username}}" disabled> </div> <div class="mb-3"> <input type="password" class="form-control" placeholder="Enter password" name="password"> </div> <div class="mb-3"> <input type="email" class="form-control" placeholder="Enter email" name="email" value="{{sessionUser.email}}" disabled> </div> <button type="submit" class="btn btn-primary form-control">회원가입수정</button> </form> </div> </div> </div> {{> /layout/footer}}