[Java] MongoDB 이용해서 웹페이지 구현하기

MongoDB Atlas란?
MongoDB Atlas 다운로드
MongoDB와 JAVA 연결하기
MongoDB로 Board 만들기
Board에서 글 작성하기
Board 글 상세 보기
Board에 sns 만들기
Board 글 삭제하기
Board 작성한 글 수정하고 글의 개수 가져오기

MongoDB Atlas란?

MongoDB의 완전 관리형 클라우드 데이터베이스 서비스
데이터베이스를 클라우드에서 호스팅 하고 관리하는 것을 중심으로 함
개발자 및 기업이 손쉽게 애플리케이션을 빌드하고 배포할 수 있도록 지원함
AWS, Azure, GCP를 통해 배포에 관한 모든 것을 통합 관리해 줌
클라우드 환경에서 사용할 수 있으며 나의 컴퓨팅 자원을 소모하지 않고 사용할 수 있는 원격 DB가 생성됨

MongoDB Atlas 다운로드

MongoDB Atlas: Cloud Document Database

Cloud-hosted MongoDB service on AWS, Azure, and GCP

www.mongodb.com

- Start Free 누른 후 가입하기

- 가입 후 파일 다운로드

- 다운로드 완료

- test > test에 데이터 입력하기

- Json 형식으로 key와 value를 입력하기

- 입력한 값이 잘 들어감

MongoDB와 JAVA 연결하기

01) 새로운 project 생성

02) Application.properties 설정

- 위와 같이 접속 정보를 확인한 후 아래의 코드에서 uri에 붙여 넣기


server.port=80

# thymeleaf호출시 경로 설정
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

## MongoDB Config ##
spring.data.mongodb.uri=mongodb+srv://id:password@cluster0.tl1qsf1.mongodb.net/
spring.data.mongodb.database=name

03) Test.java 생성

- 데이터베이스 테이블과 일치하는 객체 설정하기


package com.peazh.entity;

import java.util.Map;

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

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@Document(collection = "test") //mongoDB에서 연결할 테이블명 입력 
@AllArgsConstructor
@NoArgsConstructor
public class Test {
‌
‌@Id
‌private String id;
‌private int age;
‌private String name;
‌private Map<String, String> hobby;

}

- @AllArgsConstructor : 모든 필드를 매개 변수로 받아 객체를 생성할 때 사용할 수 있는 생성자를 만들어 줌

- @NoArgsConstructor : 매개변수가 없는 기본 생성자를 자동으로 생성함

04) TestController.java 생성


package com.peazh.controller;

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 com.peazh.entity.Test;
import com.peazh.service.TestService;

@Controller
public class TestController {
‌
‌@Autowired
‌private TestService testService;
‌
‌@GetMapping("/test")
‌public String test(Model model) {// 데이터베이스의 값을 저장하고 타임리프로 보내주는 역할
‌‌List<Test> list = testService.list();
‌‌model.addAttribute("list",list);
‌‌return "test";
‌}

}

05) TestService.java 생성


package com.peazh.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.peazh.entity.Test;
import com.peazh.repository.TestRepository;

@Service
public class TestService {
‌
‌@Autowired
‌private TestRepository testRepository;

‌public List<Test> list() {
‌‌return testRepository.findAll();
‌}

}

06) TestRepository.java 생성 (interface)


package com.peazh.repository;

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

import com.peazh.entity.Test;

//MongoRepository 자체가 값을 자동으로 만들어줌
public interface TestRepository extends MongoRepository<Test, Long>{
‌
}

07) test.html 생성


<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
‌[[${list}]]
</body>
</html>

MongoDB로 Board 만들기

01) Board.java 생성


package com.peazh.entity;

import java.time.LocalDateTime;

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

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@Document(collection = "board")
@NoArgsConstructor
@AllArgsConstructor
public class Board {
‌
‌@Id
‌private String id;
‌private String title;
‌private String content;
‌private LocalDateTime date;
‌private String name;
‌private String img;

}

- 보드 테이블 예시

{

"_id": {

"$oid": "64f6b6bb874910553a75f88f"

"title": "그림",

"content": "그림",

"date": {

"$date": "2023-09-05T05:03:55.009Z"

"name": "홍길동"

}

02) BoardController.java 생성


package com.peazh.controller;

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 com.peazh.entity.Board;
import com.peazh.service.BoardService;

@Controller
public class BoardController {

‌@Autowired
‌private BoardService boardService;
‌
// 게시판 가져오기
‌@GetMapping("/board")
‌public String board(Model model) {
‌‌List<Board> list = boardService.list();
‌‌model.addAttribute("list",list);
‌‌return "board";
‌}
‌
}

03) BoardService.java 생성


package com.peazh.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.peazh.entity.Board;
import com.peazh.repository.BoardRepository;

@Service
public class BoardService {
‌
‌@Autowired
‌private BoardRepository boardRespository;

‌public List<Board> list() {
‌‌return boardRespository.findAll();
‌}
}

04) BoardRepository.java 생성


package com.peazh.repository;

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

import com.peazh.entity.Board;

public interface BoardRepository extends MongoRepository<Board, Long> {

}

05) board.html 생성


<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>BOARD</title>
</head>
<body>
‌[[${list}]]
‌<button th:onclick="|location.href='@{/write}'|">작성하기</button>
</body>
</html>

Board에서 글 작성하기

01) BoardController.java 수정


// 게시판 작성하기
@GetMapping("/write")
public String write() {
return "write";
}

// 작성한 값 가져오기
@PostMapping("/write")
// 입력된 값을 img는 img로 받고 나머지는 request로 받음
public String write(@RequestParam("img") MultipartFile img, HttpServletRequest request) throws IOException {

Board board = new Board();
board.setTitle(request.getParameter("title"));
board.setContent(request.getParameter("content"));
board.setName("홍길동");
board.setDate(LocalDateTime.now());//현재시간
if(img.getSize() > 0) {// 파일 입력한게 0보다 클 경우 = 파일이 있을 경우
String fileName = img.getOriginalFilename();// 파일을 fileName으로 저장할 것

// 파일명 .뒤에 있는 글자(확장자명)가 jpg, gif, png로 끝날 경우
if(Pattern.matches("([^\\s]+(\\.(?i)(jpg|gif|png))?)", fileName)) { 

// 문자열로 표현된 이미지 데이터를 바이트 배열로 변환하고, 그 바이트 배열을 Base64로 인코딩하기
// 그림을 바이트 단위로 깨서 저장하기
byte[] img2Byte = Base64.encodeBase64(img.getBytes());

// Base64로 인코딩된 이미지 데이터를 특정 형식의 문자열로 저장하기
board.setImg("data:image/png;base64," + new String(img2Byte));         
}
}
boardService.save(board);
return "redirect:/board";
}

02) BoardService.java 수정


public void save(Board board) {
‌boardRepository.save(board);
}

03) write.html 생성


<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>WRITE</title>

<script type="text/javascript">
function writef(){
let title = document.getElementById('title');
let content = document.getElementById('content');

const reg = new RegExp('.jpg|.png|.gif');
// 제목을 입력 안했을 경우
if(title.value == '' || title.value == null){
document.querySelector('#result').innerText = "제목을 입력하세요.";
title.style.backgroundColor = "red";// 배경색 변경
title.style.borderColor = "#FF0000";// 테두리색 변경
title.focus();
return false;
}
title.style.backgroundColor = "write";

// 내용을 입력 안했을 경우
if(content.value == '' || content.value == null){
document.querySelector('#result').innerText = "내용을 입력하세요.";
content.style.backgroundColor = "red";// 배경색 변경
content.style.borderColor = "#FF0000";// 테두리색 변경
content.focus();
return false;
}
content.style.backgroundColor = "write";
document.getElementById('write-form').style.backgroundColor = "gray";

let file = document.getElementById("img").value;

// 파일이 있을 경우
if(file != "" || file != null){
‌// 파일의 마지막 글자가 jpg, gif, png일 때 확장자를 reg로 저장
const reg = /([^\s]+(?=\.(jpg|gif|png))\.\2)/;
//alert(reg.test(file));
// 확장자가 jpg, gif, png가 아닐 경우
if(!(reg.test(file))){      
alert("그림파일(jpg, png, gif)만 선택 가능합니다.");
document.querySelector('#result').innerText = "그림파일(jpg, png, gif)만 선택 가능합니다.";
return false;
}
}
}
</script>
</head>
<body>
‌<h1>write</h1>
‌<div id="write-form">
<form action="./write" method="post" enctype="multipart/form-data" onsubmit="return writef();">
<input type="text" name="title" id="title">
<textarea name="content" id="content"></textarea>
<input type="file" name="img" id="img" accept=".jpg, .png, .gif">
<div id="result">그림파일(jpg, png, gif)만 선택 가능</div>
<button type="submit">write</button>
</form>
</div>
</body>
</html>

Board 글 상세 보기

01) BoardController.java 수정


@GetMapping("/detail")
public String board(@RequestParam("no") String id, Model model) {
‌Board detail = boardService.findById(id).get();
‌//Optional
‌model.addAttribute("detail", detail);
‌return "detail";
}

02) BoardService.java 수정


public Optional<Board> findById(String id) {
‌‌return boardRepository.findById(id);
}

03) BoardRepository.java 수정


Optional<Board> findById(String id);

- 해당하는 id의 글을 가져와야 하므로 repository 작성해 줌

04) detail.html 생성


<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" th:href="@{./css/thymeleaf.css}">
</head>
<body>
‌<th:block th:insert="~{/menu.html :: menu}"></th:block>
‌<div class="main">
‌‌<h1>상세보기</h1>
‌‌<button th:onclick="|location.href='@{/update(no=${detail.id})}'|">update</button>
‌‌<button th:onclick="|location.href='@{/delete(no=${detail.id})}'|">delete</button>
‌‌<hr>
‌‌[[${detail.id}]]<br> [[${detail.title}]]<br>
‌‌[[${detail.content}]]<br> [[${detail.name}]]<br>
‌‌[[${detail.date}]]<br>
‌‌<div th:if="${detail.img ne null}">				
‌‌‌<img th:src="${detail.img}">
‌‌</div>
‌‌<button th:onclick="|location.href='@{/board}'|">board</button>
‌</div>
</body>
</html>

Board에 sns 만들기

01) BoardController.java 수정


@GetMapping("/sns")
public String sns(Model model) {
‌// 정렬 옵션
List<Sort.Order> order = new ArrayList<Sort.Order>();
// 날짜 순으로 정렬할거임
order.add(Sort.Order.desc("date"));

//										최신글 10개만 뜨기
Page<Board> list = boardService.findAll(PageRequest.of(0, 10, Sort.by(order)));
model.addAttribute("list", list);
return "sns";
}

02) BoardService.java 수정


public Page<Board> findAll(PageRequest of) {
‌return boardRepository.findAll(of);
}

03) sns.html 생성


<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" th:href="@{./css/thymeleaf.css}">
<style type="text/css">
.box{
‌width: 500px;
‌height: auto;
‌background-color: rgb(231, 231, 231);
‌margin: 10px;
‌padding: 10px;
}
.box img{
‌width: 500px;
}
</style>
</head>
<body>
‌<th:block th:insert="~{/menu.html :: menu}"></th:block>
‌<div class="main">
‌‌<button th:onclick="|location.href='@{/write}'|">글쓰기</button>
‌‌<th:block th:each="row : ${list}">
‌‌‌<div class="box">
‌‌‌‌[[${row.title}]]
‌‌‌‌[[${row.name}]] / [[${row.date}]]
‌‌‌‌<hr>
‌‌‌‌[[${row.content}]]
‌‌‌‌<div th:if="${row.img ne null}">				
‌‌‌‌‌<img th:src="${row.img}">
‌‌‌‌</div>
‌‌‌</div>
‌‌‌
‌‌‌
‌‌</th:block>
‌</div>
</body>
</html>

Board 글 삭제하기

01) BoardController.java 수정


@GetMapping("/delete")
public String delete(@RequestParam("no") String id) {
‌// id를 기준으로 찾아서 삭제하기
‌boardService.deleteById(id);
return "redirect:/board";
}

02) BoardService.java 수정


public void deleteById(String id) {
‌‌boardRepository.deleteById(id);
}

03) BoardRepository.java 수정


void deleteById(String id);

- 글 상세 보기에서 삭제하기 버튼 클릭

- 해당 글이 삭제되어 게시판에 글이 없음

Board 작성한 글 수정하고 글의 개수 가져오기

01) BoardController.java 수정


@GetMapping("/update")
public String update(@RequestParam("no") String id, Model model) {
Board detail = boardService.findById(id).get();
model.addAttribute("detail", detail);
return "update";
}

@PostMapping("/update")
public String update(Board board) {
board.setName("수정함.");
board.setDate(LocalDateTime.now());// 수정한 시간으로 변경
boardService.save(board);
return "redirect:/board";
}

// 작성한 글 개수 가져오기
@GetMapping("/board")
‌public String board(Model model) {
‌‌
‌‌int count = boardService.count();
‌‌model.addAttribute("count",count);

- save는 이미 생성했으므로 service나 repository에 생성 안 해줘도 됨

02) BoardService.java 수정


public int count() {
‌return (int) boardRepository.count();
}

03) update.html 생성


<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>수정하기</title>
<link rel="stylesheet" type="text/css" th:href="@{./css/thymeleaf.css}">
<link rel="stylesheet" type="text/css" th:href="@{./css/write.css}">
</head>
<body>
‌<th:block th:insert="~{/menu.html :: menu}"></th:block>
‌<div class="main">
‌‌<h1>update</h1>
‌‌<div class="write-form">
‌‌‌<form action="./update" method="post">
‌‌‌‌<input type="text" name="title" th:value="${detail.title}">
‌‌‌‌<textarea name="content">[[${detail.content}]]</textarea>
‌‌‌‌<input type="hidden" name="id" th:value="${detail.id}">
‌‌‌‌<button type="submit">수정</button>
‌‌‌</form>
‌‌</div>
‌</div>
</body>
</html>

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

배움엔 끝이 없다

[Java] MongoDB 이용해서 웹페이지 구현하기

MongoDB Atlas란?

MongoDB Atlas 다운로드

MongoDB와 JAVA 연결하기

MongoDB로 Board 만들기

Board에서 글 작성하기

Board 글 상세 보기

Board에 sns 만들기

Board 글 삭제하기

Board 작성한 글 수정하고 글의 개수 가져오기

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[Java] MongoDB 이용해서 웹페이지 구현하기

MongoDB Atlas란?

MongoDB Atlas 다운로드

MongoDB와 JAVA 연결하기

MongoDB로 Board 만들기

Board에서 글 작성하기

Board 글 상세 보기

Board에 sns 만들기

Board 글 삭제하기

Board 작성한 글 수정하고 글의 개수 가져오기

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역