본문 바로가기
백엔드/Spring Framework

템플릿(2) / MEMBER 파일 수정

by maverick11471 2024. 7. 15.

[순서]

 - join.jsp 생성

 - login.jsp 생성

 - header.jsp

 - member controller 생성

 

2. WEB-INF - views - member 폴더 생성

 - join.jsp 생성 

  * join.html <body> 부분 복사

  * header와 footer 가져오기

<%--
  Created by IntelliJ IDEA.
  User: bitcamp
  Date: 24. 7. 12.
  Time: 오후 4:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

</head>
<body>
    <div>
        <jsp:include page="${pageContext.request.contextPath}/header.jsp"></jsp:include>

        <main>
            <div class="container mt-5 w-25">
                <h4>회원가입</h4>
            </div>
            <div class="container mt-3 mb-5 w-25">
                <form id="joinForm" action="" method="post">
                    <div class="form-group">
                        <label for="username">아이디</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                        <div class="d-flex justify-content-end mt-2">
                            <button type="button" class="btn btn-secondary" id="btnIdCheck">중복체크</button>
                        </div>
                    </div>
                    <div class="form-group mt-3">
                        <label for="password">비밀번호</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                        <p id="pwValidation" style="color: red; font-size: 0.8rem;">
                            비밀번호는 영문자, 숫자, 특수문자 조합의 9자리 이상으로 설정해주세요.
                        </p>
                    </div>
                    <div class="form-group mt-3">
                        <label for="passwordChk">비밀번호 확인</label>
                        <input type="password" class="form-control" id="passwordChk" name="passwordChk" required>
                        <p id="pwCheckResult" style="font-size: 0.8rem;"></p>
                    </div>
                    <div class="form-group mt-3">
                        <label for="nickname">닉네임</label>
                        <input type="text" class="form-control" id="nickname" name="nickname" required>
                    </div>
                    <div class="form-group mt-3">
                        <label for="email">이메일</label>
                        <input type="text" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group mt-3">
                        <label for="tel">휴대폰</label>
                        <input type="text" class="form-control" id="tel" name="tel" placeholder="숫자만 입력하세요.">
                    </div>
                    <div class="form-group mt-3">
                        <button type="submit" class="btn btn-outline-secondary w-100">회원가입</button>
                    </div>
                </form>
            </div>
        </main>

        <jsp:include page="${pageContext.request.contextPath}/footer.jsp"></jsp:include>
    </div>
</body>
</html>

 

 

3. header.jsp 수정

 - [web.xml - Dispatcher Servlet - Frameworkservlet - doPost] 가 있어 관례적으로 .do를 붙임

 - <a> 는 무조건 get 방식 -> get 메서드를 만들어야 함

<%--
  Created by IntelliJ IDEA.
  User: bitcamp
  Date: 24. 7. 12.
  Time: 오후 4:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <header class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <button type="button" class="btn btn-outline-light btn-lg text-secondary" onclick="location.href='..'">홈</button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                    // .do를 관례적으로 붙임
                        <a class="nav-link" href="/board/free-list.do">자유게시판</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="board/notice-list.html">공지사항</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/member/login.do">로그인</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/member/join.do">회원가입</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</body>
</html>

 

4. controller 폴더 - Member Controller 클래스 생성

 - @RequestMapping("/member") 을 설정했기 때문에

 - @RequestMapping(value = "/join.do", method = RequestMethod.GET) 에서 value 값을 /member 폴더를 설정 할 필요 없음

 - ? WEB-INF 인지 어떻게 알지?

@Controller
@RequestMapping("/member")
public class MemberController {
    // @RequestMapping(value = "/member/join.do", method = RequestMethod.GET) 
    // == @GetMapping("/member/join.do")
    // <a> 이기 때문에 method = RequestMethod.GET 방식 사용
    @RequestMapping(value = "/join.do", method = RequestMethod.GET)
    public String joinView() {
    // servlet-context.xml 의 view-resolver 설정
    // prefix: member, suffix: join 
    // servlet-context.xml -> dispatcher-servlet으로 리턴
        return "member/join";
    }

    @GetMapping("/login.do")
    public String loginView() {
        return "member/login";
    }
}

 

5. servlet-context.xml 수정

    <!--@Controller이 붙은 객체들은 요청이 올때마다 생성돼서 사용되므로 servlet-context.xml에서
        요청이 올때마다 생성될 수 있게 설정한다.-->
    <context:component-scan base-package="com.bit.springboard.controller"/>

 

6. views - member - login.jsp 생성

<%--
  Created by IntelliJ IDEA.
  User: bitcamp
  Date: 24. 7. 12.
  Time: 오후 5:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

</head>
<body>
    <div>
        <!--pageContext.request.contextPath: WebServer의 root path인 webapp 폴더(http://localhost:8090)-->
        <jsp:include page="${pageContext.request.contextPath}/header.jsp"></jsp:include>

        <main>
            <div class="container mt-5 w-25">
                <h4>로그인</h4>
            </div>
            <div class="container mt-4 mb-5 w-25">
                <form id="loginForm" action="/user/login.do" method="post">
                    <div class="form-group">
                        <label for="username">아이디</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group mt-4">
                        <label for="password">비밀번호</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group mt-4">
                        <button type="submit" class="btn btn-outline-secondary w-100">로그인</button>
                    </div>
                </form>
            </div>
        </main>

        <jsp:include page="${pageContext.request.contextPath}/footer.jsp"></jsp:include>
    </div>
</body>
</html>

'백엔드 > Spring Framework' 카테고리의 다른 글

IMPL 클래스에서 DAO 클래스를 이용하는 법  (0) 2024.07.15
템플릿(3) / BOARD 파일 수정  (0) 2024.07.15
템플릿(1) / 공통사항 설정  (0) 2024.07.15
MyBatis  (0) 2024.07.15
AOP 에서 aspect와 advisor를 사용할 때의 차이점 / Joinpoint와 pointcut의 차이  (2) 2024.07.14

관련글

티스토리툴바