develope_kkyu

[Spring] Spring 프로젝트와 MongoDB altas를 연동한 회원가입, 로그인 페이지 예제 - 2 본문

JAVA/Java EE(Spring)

[Spring] Spring 프로젝트와 MongoDB altas를 연동한 회원가입, 로그인 페이지 예제 - 2

developekkyu37 2023. 3. 22. 23:11
728x90
  • 이전글

https://developerkkyu37.tistory.com/83

 

[Spring] Spring 프로젝트와 MongoDB altas를 연동한 회원가입, 로그인 페이지 예제 - 1

스프링 프로젝트 생성하는 방법은 생략한다. 1. MongoDB Atlas 설정 https://www.mongodb.com/atlas/database MongoDB Atlas Database | Multi-Cloud Database Service The multi-cloud database service at the heart of our developer data platform th

developerkkyu37.tistory.com

2. Spring project mongoDB연동

(1) build.gradle 설정

 

Download jakarta.servlet.jsp.jstl JAR 2.0.0 ➔ With all dependencies!

org.glassfish.web jakarta.servlet.jsp.jstl 2.0.0 compile group: 'org.glassfish.web', name: 'jakarta.servlet.jsp.jstl', version: '2.0.0' //Thanks for using https://jar-download.com libraryDependencies += "org.glassfish.web" % "jakarta.servlet.jsp.jstl" % "2

jar-download.com

 

Download taglibs-standard-impl-1.2.5 JAR files with all dependencies

com.github.demidenko05 taglibs-standard-impl 1.0.5 compile group: 'com.github.demidenko05', name: 'taglibs-standard-impl', version: '1.0.5' //Thanks for using https://jar-download.com libraryDependencies += "com.github.demidenko05" % "taglibs-standard-impl

jar-download.com

(2) application.properties 설정

  • mongoDB connect 가져오기

  • 사용할 DB 이름은 원하는 이름을 적는다
spring.data.mongodb.uri=mongodb+srv://<유저 이름>:<비밀번호>@<클러스트이름>.******.mongodb.net/<사용할 DB이름>?retryWrites=true&w=majority
  • src > main > resources 폴더 안에 있는 application.properties 파일을 수정
# jsp
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

# jsp 수정시 서버 자동 리부트
server.servlet.jsp.init-parameters.development=true

# mongoDB 접속
spring.data.mongodb.uri=mongodb+srv://web_admin:<password>@cluster0.******.mongodb.net/<사용할 DB이름>?retryWrites=true&w=majority

(3) User.java 클래스 생성

  • DB에 저장할 객체를 보내는 클래스를 생성
package com.example.demo;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
@Document(collection = "users") // DB안에 users라는 콜렉션에 저장(table 개념)
public class User {

    @Id
    private String id; // 여기서 id는 mongoDB에서 객체를 식별하기 위한 id
    private String username; // 유저 id
    private String password; // 비밀번호
    private String fullName; // 이름
    private String phoneNumber; // 핸드폰 번호

}

(4) UserController.java 생성

  • 서버를 담당
package com.example.demo;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class UserController {
    @Autowired
    private UserRepository userRepository;

    // "user"라는 이름으로 새로운 'User' 객체를 생성하여 모델에 추가
    @GetMapping("/register")
    public String showRegistrationForm(Model model) {
        model.addAttribute("user", new User());
        return "register";
    }

    // 'user' 객체를 MongoDB 데이터베이스에 저장
    @PostMapping("/register")
    public String registerUser(User user) {
        userRepository.save(user);
        return "redirect:/login";
    }

    // 로그인 페이지
    @GetMapping("/login")
    public String showLoginForm() {
        return "login";
    }

    // 로그인시 등록되어있는 사용자인지 확인
    @PostMapping("/login")
    public String loginUser(User user) {
        User existingUser = userRepository.findByUsername(user.getUsername());
        if (existingUser != null && existingUser.getPassword().equals(user.getPassword())) {
            return "redirect:/home";
        } else {
            return "login";
        }
    }
    
    // 홈페이지
    @GetMapping("/home")
    public String showHomePage() {
        return "home";
    }

    // 회원정보 목록 출력
    @GetMapping("/users")
    public String listUsers(Model model) {
        List<User> userList = userRepository.findAll();
        model.addAttribute("userList", userList);
        return "users";
    }
}

(5) UserRepository.java 생성

  • “UserRepository”를 통해 “User”객체를 데이터베이스에 저장하고, 조회하고, 수정하고, 삭제할 수 있다.
package com.example.demo;

import org.springframework.data.mongodb.repository.MongoRepository;

public interface UserRepository extends MongoRepository<User, String> {
    User findByUsername(String username);
}

(6) home.jsp 생성

  • 홈페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홈</title>
</head>
<body>
    <h1>홈페이지</h1>
    <a href="/register">회원가입 이동</a>
    <a href="/login">로그인 이동</a>
    <a href="/users">회원목록 이동</a>
</body>
</html>

(7) register.jsp 생성

  • 회원가입 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
    <h1>회원가입</h1>
    <form:form method="POST" modelAttribute="user">
        <table>
            <tr>
                <td>아이디:</td>
                <td><form:input path="username" /></td>
            </tr>
            <tr>
                <td>비밀번호:</td>
                <td><form:password path="password" /></td>
            </tr>
            <tr>
                <td>이름:</td>
                <td><form:input path="fullName" /></td>
            </tr>
            <tr>
                <td>핸드폰 번호:</td>
                <td><form:input path="phoneNumber" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="회원가입" /></td>
            </tr>
        </table>
    </form:form>
</body>
</html>

(8) login.jsp 생성

  • 로그인 페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
    <h1>로그인</h1>
    <form method="POST" action="/login">
        <table>
            <tr>
                <td>아이디:</td>
                <td><input type="text" name="username" /></td>
            </tr>
            <tr>
                <td>비밀번호:</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="로그인" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

(9) users.jsp 생성

  • 회원정보 목록 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>회원목록</title>
  </head>
  <body>
    <h1>회원목록</h1>
    <table>
      <tr>
        <th>아이디</th>
        <th>비밀번호</th>
        <th>이름</th>
        <th>핸드폰 번호</th>
      </tr>
      <c:forEach var="user" items="${userList}">
        <tr>
          <td>${user.username}</td>
          <td>${user.password}</td>
          <td>${user.fullName}</td>
          <td>${user.phoneNumber}</td>
        </tr>
      </c:forEach>
    </table>
    <a href="/home">홈페이지 이동</a>
  </body>
</html>

3. DB 저장 확인

  • 회원가입정보 입력

  • Browse Collections 클릭

  • 저장 확인

  • 회원정보가 불러와지는 확인

  • 전체 코드 입니다

https://github.com/SeungKyu37/demo

 

GitHub - SeungKyu37/demo

Contribute to SeungKyu37/demo development by creating an account on GitHub.

github.com

 

728x90

'JAVA > Java EE(Spring)' 카테고리의 다른 글

[Spring] GCP로 깃허브 연동해서 스프링 프로젝트 예제(with Ubuntu) - 2  (0) 2023.03.25
[Spring] GCP로 깃허브 연동해서 스프링 프로젝트 예제(with Ubuntu) - 1  (0) 2023.03.23
[Spring] Spring 프로젝트와 MongoDB altas를 연동한 회원가입, 로그인 페이지 예제 - 1  (0) 2023.03.20
[Spring] Google Cloud Platform에서 Spring 프로젝트 배포하기 - 2  (2) 2023.03.15
[Spring] Google Cloud Platform에서 Spring 프로젝트 배포하기 - 1  (0) 2023.03.14
'JAVA/Java EE(Spring)' Related Articles more