[SpringFramework] 스프링프레임워크 회원가입 기능 구현 예제_2

 

---

회원가입 구현 예제 1

https://hdhdeveloper.tistory.com/16

[SpringFramework] 스프링프레임워크 회원가입 기능 구현 예제_1

 

회원가입 구현 예제 3

https://hdhdeveloper.tistory.com/18

[SpringFramework] db 연동 후 회원가입 로직 작성하기_3

 

---

 

mysql 연동까지 진행했고 이 페이지에서는 회원가입 폼 작성 및 db 연동 작업을 진행하겠다

먼저 프레임워크에서 프로젝트를 생성하게 되면,

기본적으로 homeController.class와 home.jsp 파일이 있을 것이다

 

 

@RequestMapping(value = "/", method = {RequestMethod.GET, RequestMethod.POST})
    public String home(ModelMap model,HttpSession session) {
        return "home";
    }

이런식으로 HomeController가 있을 건데, "/" 로 접속을 하면

return 문에 있는 페이지인 home.jsp페이지로 이동한다는 뜻이다

 

 

나는 bootstrap을 이용한 모달 창을 이용하여 회원가입 페이지를 생성했다

우선 화면을 생성하기 전, bootstrap 모달 창을 이용하기 위해 css 파일과 js 파일을 다운로드 받았다

 

bootstrapk.com/getting-started/#download

시작하기 · 부트스트랩

해당 페이지로 접속해 부트스트랩 다운로드 버튼을 클릭하면 압축파일이 다운로드 된다.

 

해당파일을 다운로드 받아

압축파일 내부에 bootstrap.min.css, bootstrap.min.js, bootstrap.js 를

현재 프로젝트의 resources 폴더안에 넣어준다.

나는 해당 경로에 css, js 폴더를 각각 만들어 분기해주었다.

home.jsp 의 div태그이다.

 

코드를 home.jsp body안에 넣어주도록 한다.

header 태그안에는 모달 창을 호출하는 버튼인 Join 버튼과 Login 버튼을 생성해 두었다.

<header>            <h2 style="display:inline;cursor:pointer;" onclick="location.href='/'">Test Company IntroDuce</h2>            <nav>                <ul class="">                        <li><a href="#" onclick="fn_join_modal();">Join</a></li>                        <li><a href="#" onclick="fn_login_modal();" id="login">Login</a></li>                        <li><a href="/login/logout_proc">Logout</a></li>                        <li><a href="/update/update.do">Info</a></li>                </ul>            </nav></header><div class="modal fade" id="JoinModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content ">
                <div class="modal-header fn-font">
                    <h2 style="text-align:center;" class="modal-title" id="exampleModalLabel">JOIN</h2>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <form class="reg_form">
                    <input type="hidden" id="flag" name="flag" value="add"/>
                    <div class="modal-body fn-font">
                        <table>
                            <colgroup>
                                <col style="width:100px;"/>
                                <col style="width:px;"/>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_id" name="user_id" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>PW</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_pw" name="user_pw" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>NAME</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;"  id="user_name" name="user_name" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>E-Mail</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_email" name="user_email" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>Phone</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_phone" name="user_phone" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>Age</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_age" name="user_age" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>Company</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_company" name="user_company" class="form-control" value="asd"/> </td>
                                </tr>
                                <tr>
                                    <th>User Number</th>
                                    <td><input type="text" style="margin-left:10%;width:200px;" id="user_no" name="user_no" class="form-control" value="asd"/> </td>
                                </tr>                        
                            </tbody>
                        </table>
                    </div>
                </form>
                <div class="modal-footer fn-font">
                    <button class="btn" type="button" id="join_submit">예</button>
                    <button class="btn" type="button" data-dismiss="modal">아니요</button>
                </div>
            </div>
        </div>
    </div>

그리고 회원가입을 할 때, [예] 버튼을 눌러 데이터베이스에 자료를 저장할 때나

모달 창을 열고 닫을 때 jquery를 쓸 예정이므로 jquery CDN을 받아온다.

 

jquery와 bootstrap 파일 받아온 것을 해당 페이지에 적용 시키기 위해 html 태그 상단에 선언을 해준다

link 태그와 script 태그의 부트스트랩 경로는 아까 우리가 넣어주었던 폴더의 경로이다

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <link rel="stylesheet" type="text/css" href="../resources/css/bootstrap.min.css" />
    <script
          src="https://code.jquery.com/jquery-3.5.1.min.js"
          integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous"></script> <!--제이쿼리 CDN-->
    <script src="../resources/js/bootstrap.min.js"></script>
    <script src="../resources/js/bootstrap.js"></script>
    <script src="../resources/js/common.js"></script>
<html lang="ko">

다음은 script 파일을 작성해야한다

fn_join_modal 과 fn_login_modal은 bootstrap.js를 임포트 받아서 사용할 수 있는

modal태그를 jquery와 함께 사용한 것이다. 

<script type="text/javascript">
    function fn_join_modal(){
        $('#JoinModal').modal("show");
    }
    function fn_login_modal(){
        $('#LoginModal').modal("show");
    }
    /*회원 등록 버튼*/
    $("#join_submit").click(function(){
        $.ajax({
            type: "post",
            url : "/join/reg_proc.ajax",
            dataType : "json",
            data : $(".reg_form").serialize(),
            success:function(data){
                alert("등록처리 되었습니다.");
            },
//             error:function(jqXHR, textStatus, errorThrown){
//                 alert("사용자 등록 도중 오류 발생했습니다."+textStatus);
//             }
        })
    });
    
</script>

지금까지 진행한 것은 모달 창을 이용해서 회원가입 다이얼로그를 만들었다

다음 포스팅에서는 ajax를 이용해 비동기로 회원 등록 처리를 하려고 한다