Digking's cave

My First Blog Project (10) : 블로그 메인 / 로그인 / 회원가입 화면 본문

Spring/My First Blog Project

My First Blog Project (10) : 블로그 메인 / 로그인 / 회원가입 화면

디깅 2022. 12. 17. 11:25
728x90

#메인 / 로그인 / 회원가입 화면 

UserController.java

package com.cos.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {
    @GetMapping("/user/joinForm")
    public String joinForm(){
        return "user/joinForm";
    }

    @GetMapping("/user/loginForm")
    public String loginForm(){
        return "user/loginForm";
    }
}

BoardController.java

package com.cos.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class BoardController {
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

header/main/footer 로 분리하여 구성

header.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 lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="/blog">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <c:choose>
        <c:when test="${empty sessionScope.principal}">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/blog/user/loginForm">로그인</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog/user/joinForm">회원가입</a>
                </li>
            </ul>
        </c:when>
        <c:otherwise>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/blog/user/wirteForm">글쓰기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog/user/userForm">회원정보</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog/user/logout">로그아웃</a>
                </li>
            </ul>
        </c:otherwise>
    </c:choose>
  </div>
</nav>
<br/>

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ include file="layout/header.jsp" %>

<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">제목 적는 부분</h4>
      <a href="#" class="btn btn-primary">상세보기</a>
    </div>
  </div>
  <div class="card">
      <div class="card-body">
        <h4 class="card-title">제목 적는 부분</h4>
        <a href="#" class="btn btn-primary">상세보기</a>
      </div>
  </div>
  <div class="card">
      <div class="card-body">
        <h4 class="card-title">제목 적는 부분</h4>
        <a href="#" class="btn btn-primary">상세보기</a>
      </div>
  </div>
</div>

<%@ include file="layout/footer.jsp" %>

 

footer.jsp

<br/>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Create by daking</p>
  <p>010-0000-0000</p>
  <p>🏁Seoul, Korea</p>
</div>
</body>
</html>

 

WEB-INF/views/user

joinForm.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ include file="../layout/header.jsp" %>

<div class="container">
    <form>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" class="form-control" placeholder="Enter Username" id="username">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" placeholder="Enter password" id="pwd">
      </div>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" placeholder="Enter email" id="email">
      </div>
    </form>
    <button id="btn-save" class="btn btn-primary">회원가입 완료</button>
</div>

<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp" %>

loginForm.java

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ include file="../layout/header.jsp" %>

<div class="container">
    <form>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" class="form-control" placeholder="Enter Username" id="username">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" placeholder="Enter password" id="pwd">
      </div>
      <div class="form-group form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
        </label>
      </div>

    </form>
    <button id="btn-login" class="btn btn-primary">로그인</button>
</div>

<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp" %>

 

 

 

++)

32강 요약

https://getinthere.tistory.com/24

https://www.youtube.com/watch?v=gt17FdIl-3w&list=PL93mKxaRDidECgjOBjPgI3Dyo8ka6Ilqm&index=34&t=59s

1. get 요청은 주소에 담아서 브라우저를 통해 보낼 수 있고, body 데이터 없음. form태그 형식으로.

2. post 요청도 form 태그로 가능하지만 put, delete 요청과 모두 통일을 위해 javascript로 ajax요청+데이터는 json형태로 통일(수업에서는 이 방식 사용)하거나 form:form 태그로 4가지 요청을 다 커버한다.

3. 스프링 컨트롤러는 key=value 형태의 데이터를 자동으로 파싱하여 변수에 담거나 object로 파싱해서 받아줄 수 있다.(해당 object의 setter 꼭 필요)

4. key=value 형태가 아닌 Json데이터나 일반 text 데이터는 @requestbody 어노테이션이 필요하다.

반응형

'Spring > My First Blog Project' 카테고리의 다른 글

My First Blog Project (12) : SpringSecurit 적용 및 로그인 페이지 생성  (0) 2022.12.19
My First Blog Project (11) : 회원가입 / 로그인 처리 완료  (0) 2022.12.18
My First Blog Project (9) : Exception 처리  (0) 2022.12.16
My First Blog Project (8) : Update / Delete / 더티체킹 / @Transactional  (0) 2022.12.16
My First Blog Project (7) : 전체 user Select / ID로 Select / 페이징  (1) 2022.12.16
'Spring/My First Blog Project' Related Articles more