[SpringBoot] 22-08-04 자바와 html을 이용한 게시판예제 (1) ☑

DB를 연결하지 않고 클래스와 HTML으로만 게시판 만들기 예제

 

build.gradle > dependencies

//dependencies-추가하고자 하는 라이브러리를 편리하게 넣을 수 있다.
dependencies {

    /*1.타임리프 : SpringBoot(백엔드)와 html을 유연하게 연결해주는 템플릿
      2.stater : web에 tomcat이 포함되어있다
      3.tomcat : Spring 프로젝트를 웹하고 연결해주는 도구 */
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'

    //롬복추가
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'

    //서버 자동재기동 도구
    //Spring Boot Devtools를 설치하면 서버 재시작 없이도 클래스 변경시 서버가 자동으로 재기동 된다.
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
}

application.properties

#server.port=9090

#thymeleaf path setting
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

---

BoardController

package com.testspring.testspring.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
//내장라이브러리 호출 ↑
import com.testspring.testspring.domain.Board;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
//외장라이브러리 호출 ↑


//@Controller 선언을 해주면 BoardController클래스는 컨트롤을 담당이라고 Spring boot는 인식
@Controller
public class BoardController {
    //step1. 일반 문자열 변수 사용
    static String title_string_static = "";     /*TITLE*/
    static String writer_string_static = "";    /*WRITER*/
    static String content_string_static = "";   /*CONTENT*/

    //step2. 배열 객체 사용
    static ArrayList<String> title_array = new ArrayList<String>();     /*TITLE 배열객체*/
    static ArrayList<String> writer_array = new ArrayList<String>();        /*WRITER 배열객체*/
    static ArrayList<String> content_array = new ArrayList<String>();       /*CONTENT 배열객체*/

    //step3. 사용자 생성 객체 사용 (Board라는객체타입으로-> ArrayList생성)
    static ArrayList<Board> board_array = new ArrayList<Board>();       /*BOARD 사용자생성객체*/
    static int count = 0;

    /*RequestMapping : 호출하는 클라이언트의 정보를 가져다가 서버(controller)에 전달해주는 매핑
    @RequestMapping은 [서버]에서 디스페처서블릿을 통해 [클라이언트]html의 action태그의 주소와 동일한
    문자열을 찾는 매핑기능(연결)이 실행되고 하단에 메서드가 실행*/
    @RequestMapping("/getBoardList")
    public String getBoardList(Model model){

        //ArrayList를 List에 대입
        List<Board>boardList = new ArrayList<Board>();

        if(title_array.size()> 0){
            for (int i = 0; i < title_array.size(); i++) {

                Board board = new Board();

                //번호가 1부터 시작해야하므로 +1
                board.setSeq(new Long(i)+1);
                board.setTitle(title_array.get(i)); /*title_array에서 index를 가져와서(get) 재정의(set)해준다*/
                board.setWriter(writer_array.get(i));
                board.setContent(content_array.get(i));

                //내장 클래스인 java.util.Date 객체로 시간 데이터 출력
                board.setCreateDate(new Date());

                // 0은 묵시적으로 int값의미, L은 명시적으로 Long형값의미, OL = long형 0의미
                board.setCnt(0L);

                //boardList배열에 board객체 넣기
                boardList.add(board);
            }
        }

        /*model 객체에 boardList(arraylist)를 boardList key값으로 넣음
        attributeName = key
        attributeValue = value
        model에는 참조타입만 넣을 수 있다 (addAttribute 메서드 안에 매개변수 타입으로 확인 가능)*/
        model.addAttribute("boardList",boardList);

        return "getBoardList";
        /*return String인 이유는 뷰리졸버가 html파일을 찾기 위한 문자열을 리턴
        디서패처서블릿이 뷰리졸버(viewResolver)를 찾아서 연결해 줍니다
        retrun getBoardList라는 문자열로 templates에 있는 같은 이름에 html파일을 찾는다*/
    }

    /*RequestMapping : 호출하는 클라이언트의 정보를 가져다가 서버(controller)에 전달해주는 매핑
    @RequestParam : [클라이언트]에서 string문자열을 [서버]에 전달하는 매개변수 선언
    @RequestParam("title")String title에서 ("title")은 [클라이언트]의 name이라는 속성로써
    key값을 매개변수를 전달*/
    @RequestMapping("getBoard")
    public String getBoard(
            @RequestParam("userRole")String userRole,
            @RequestParam("userId")String userId,
            @RequestParam("title")String title,
            @RequestParam("writer")String writer,
            @RequestParam("content")String content,
            @RequestParam("createDate")String createDate,
            @RequestParam("cnt")String cnt,
            Model model){
            //model을 통해서 변수등록 => .addAttribute

        model.addAttribute("title", title);
        //title이라는 값을 title이라는 이름에 연결시켜서 보내줌
        model.addAttribute("writer", writer);
        model.addAttribute("content", content);
        model.addAttribute("createDate", createDate);
        model.addAttribute("cnt", cnt);
        model.addAttribute("userId", userId);
        model.addAttribute("userRole", userRole);

        return "getBoard";
        //return->templates의 getBoard를 알아서 찾아 브라우저로 전송
    }

    /*GetMapping, PostMapping <- @RequestMapping의 자식클래스이다.
    RequestMapping의 기능을 모두 쓸수있다 (기능, 서버의 리소스 감소 및 보안 고려해서 사용) */

    //GetMapping 선언을 해주면 특정 (html에서 지정한)url로 인식해서 받아오게 됩니다.
    @GetMapping("insertBoard")
    public String insertBoard() {
        return "insertBoard";
    }

    /* 클라이언트 html form태그의 method속성의 값인 post를 인식하여 아래의
    @PostMapping에 연결 */
    @PostMapping("insertBoard")
    public String insertBoard(
            /*RequestParam 사용자가 정의해준 값을 정의*/
            @RequestParam("title")String title,
            @RequestParam("writer")String writer,
            @RequestParam("content")String content,
            Model model)
        {
        title_string_static = title;
        writer_string_static = writer;
        content_string_static = content;

        title_array.add(title);
        writer_array.add(writer);
        content_array.add(content);

        count++;

        Board board = new Board();

        board.setSeq((long) count);
        board.setTitle(title);
        board.setWriter(writer);
        board.setContent(content);
        board.setCreateDate(new Date());
        board.setCnt(0L);
        board_array.add(board);

        /*redirect : 페이지 전환 이동
        redirect:getBoardList : getBoardList 페이지로 이동*/
        return "redirect:getBoardList";
        }
}

domain > Board

package com.testspring.testspring.domain;

//외장 라이브러리 (gradle로 다운로드한 롬북이 외장 라이브러리)
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

import java.util.Date;


@Getter
@Setter
@ToString
public class Board {

    private Long seq;
    private String title;
    private String writer;
    private String content;
    private Date createDate;
    private long cnt;
}

getBoard.html

<!DOCTYPE html>
<!--타임리프 템플릿 엔진 선언부분이며, model 데이터를 가져와서 html에 데이터를 뿌려주는역할-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body th:align="center">

<h1>게시글 상세</h1>

<table th:align="center" border="1" th:cellpadding="0" th:cellspacing="0">

  <!--[서버]에서 java의 데이터를 [클라이언트]html문서에 값을 할당해주는 문법${title}-->
  <tr>
    <td bgcolor="orange" th:text="제목" width="80"></th>
    <th><input name="title" type="text" th:value="${title}"></th>
  </tr>
  <tr>
    <td bgcolor="orange" th:text="작성자"></th>
    <td th:text="${writer}"></td>
  </tr>
  <tr>
    <td bgcolor="orange" th:text="내용"></td>
    <td><textarea name="content" th:text="${content}" cols="40" rows="10"></textarea></td>
  </tr>
  <tr>
    <td bgcolor="orange" th:text="등록일"></td>
    <td th:text="${createDate}"></td>
  </tr>
  <tr>
    <td bgcolor="orange" th:text="조회수"></td>
    <td th:text="${cnt}"></td>
  </tr>

</table>

<a th:href="@{getBoardList}">글목록</a>

</body>
</html>

getBoardList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="/css/default.css">
  <title>Title</title>
</head>

<body th:align="center">

<h1>게시글 목록</h1>

<table th:align="center" border="1" th:cellpadding="0" th:cellspacing="0" th:width="700">

  <tr>
    <th bgcolor="orange" width="100">번호</th>
    <th bgcolor="orange" width="200">제목</th>
    <th bgcolor="orange" width="150">작성자</th>
    <th bgcolor="orange" width="150">등록일</th>
    <th bgcolor="orange" width="100">조회수</th>
  </tr>

  <!--model에 있는 데이터를 타임리프는 html에 뿌려주게 되고, 순수한 html파일로 만들어서 톰캣에 전달-->

  <!--   each : for문-->
  <!--   모델에 있는 boardList 배열을 순회해서 board라는 객체를 하나씩 출력 (유사 : 향상된 for문-->
  <tr th:each="board :${boardList}">
    <td th:text="${board.seq}"></td>
    <td> <a th:href="@{/getBoard(
                       seq=${board.seq},
                       userId='userIdTeste',
                       userRole='userIdRole',
                       title=${board.title},
                       writer=${board.writer},
                       content=${board.content},
                       createDate=${board.createDate},
                       cnt=${board.cnt}
                       )}"
            th:text="${board.title}"></a></td>

    <td th:text="${board.writer}"></td>
                <!--dates.format = 날짜를 일정형식으로 바꿔주는 포맷팅-->
    <td th:text="${#dates.format(board.createDate, 'yyyy-MM-dd')}"></td>
    <td th:text="${board.cnt}"></td>
  </tr>

</table>

<a th:href="@{/insertBoard}">글등록</a>

</body>
</html>

insertBoard.html

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

<body th:align="center">

<h1>게시글 등록</h1>

<!--
    [클라이언트] html의 form태그를 통한 submit액션을 실행하면 [서버]로 전달되는 mapping주소
    th:action="insertBoard"
    mothod="post" // get/post방식으로 데이터 전달 명시하다
    [서버]컨트롤러에서는 get방식 받는 것과 post방식으로 받는 것을 구분할 수 있습니다
-->

<form th:action="insertBoard" method="post">
  <table th:align="center" border="1" th:cellpadding="0" th:cellspacing="0">
    <tr>
      <td bgcolor="orange" th:text="제목" width="80"></td>

      <!--[클라이언트]name="title" 은 [서버]에서 데이터 매개변수를 받기 위한 변수명(key)-->
      <td><input name="title" type="text" size="50"></td>
    </tr>
    <tr>
      <td bgcolor="orange" th:text="작성자" width="80"></td>
      <td><input name="writer" type="text" size="10"></td>
    </tr>
    <tr>
      <td bgcolor="orange" th:text="내용" width="80"></td>
      <td><textarea name="content" cols="50" rows="10"></textarea>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" value="게시글 등록">
      </td>
    </tr>
  </table>
</form>
<a th:href="@{/getBoardList}">글목록</a>
</body>
</html>