[블로그프로젝트] 8. 회원가입, 로그인페이지 만들기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

 

 

메인페이지에 이어서 회원가입, 로그인화면을 이어서 만들어보자.

 

우선 HTML을 읽는 과정에서 딜레이가 생기지 않게 script들을 </body>에 가장 가까운 곳으로 이동시킨다.

참조 : https://velog.io/@takeknowledge/script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C%EC%9A%94

 

 

그 후 header 와 footer를 나누기위해서 views 하위로 layout폴더를 생성한다.

 

container를 기준으로 header와 footer를 나눈다.

 

header.jsp

 

footer.jsp

 

index.jsp에 아래코드들을 추가해 header와 footer를 연결시켜준다

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

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

 

로그인/회원가입 할 때 필요한 기능들을 추가하기위해서 W3schools를 이용하였다.

 

https://www.w3schools.com/bootstrap4/default.asp

Bootstrap 4 Tutorial

 

Bootstrap -> BS4 Forms 에서 Stacked Form에 있는 코드들을 사용해보자.

 

복사한 코드들을 /WEB-INF/views/user 하위폴더에 loginForm.jsp 과 signForm.jsp을 생성한 후 붙여넣기 하고

header.jsp에 로그인과 회원가입 링크를 추가한다.

회원가입시 저장된 정보들을 가져올 필요가 없기때문에 loginForm.jsp에만 작성하였다.

 

 

user.java 클래스를 보면 필요한 컬럼은 3개이기 때문에 3개의 값만 받으면 된다.

회원가입시

 

UserController에 @Controller 어노테이션을 추가하고 회원가입과 로그인 페이지의 경로를 추가한다.

package com.blog.controller;

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

@Controller
public class UserController {

    @GetMapping("/user/loginForm")
    public String joinForm(){

        return "user/loginForm";
    }

    @GetMapping("/user/signForm")
    public String signForm(){

        return "user/signForm";
    }


}

 

그 후 브라우저로 이동해 확인해보면, 지금까지 작업한 내용들을 볼 수 있다.