반응형

저번에는 수정하기를 해보았다.

이번에는 수정하면 수정했다.

글 등록되면 글록 되었다. 

 

등 

이런 alert 창을 띄워 보자

 

우선 message.html을 만들어 보자

 

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

<script th:inline="javascript">

    /*<![CDATA[*/

    var message = [[${message}]];
    alert(message);

    location.replace([[${SearchUrl}]]);

    /*]]>*/
</script>

<body>

</body>
</html>

 

이런식으로 message를 만들었다. 

 

그다음 컨트롤러를 보자 

 

    @PostMapping("/board/update/{id}")
    public String boardUpdate(@PathVariable("id") Integer id , Board board , Model model){

        Board boardTemp = boardService.boardView(id);
        boardTemp.setTitle(board.getTitle());
        boardTemp.setContent(board.getContent());

        model.addAttribute("message" , "글 수정 완료.");
        model.addAttribute("SearchUrl" , "/board/list");

        // 절대 이렇게 하면 안되고 Jpa에서 제공하는 변경감지나 Merge 기능을 따로 공부하자.
        boardService.write(boardTemp);

        return "Message";
    }

 

우선 리턴값을 message로 하면 글 수정이 되었을때 메시지로 이동이 된다. 

 

즉 이 순서다

 

글 수정 > 메시지창 > 리스트 페이지

 

글 수정을 하면 먼저 수정이 되고 메시지.html로 가서

모델에서 받은 값들로 변경되어 

메시지를 출력한다. 

 

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(8) 검색기능 및 페이징 {타임리프,스프링부트}  (0) 2022.05.11
JPA를 사용한 게시판 만들기(7) 페이징처리 {타임리프,스프링부트}  (0) 2022.05.11
JPA를 사용한 게시판 만들기(5) 수정처리 {타임리프,스프링부트}  (0) 2022.05.10
JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
반응형

저번엔 삭제처리를 알아보았다.

이번에는 수정을 알아보아야하는데

아직 JPA 극 초보라 변경감지나 MErge같은 기능을 배우지 않아 

그냥 set 후 get으로 넘겨 버렸다. 이렇게 하면 안됨을 명심하자 

그냥 스프링부트와 CRUD를 하기 위함임을 

나중에 배워 보자 

 

우선 뷰페이부터 만들자 

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 위에 xmlns 하면 타임리프 문법을 쓸수 있다.-->
<head>
  <meta charset="UTF-8">
  <title>게시물 작성폼</title>
</head>

<style>
    .layout{
    width : 500px;
    margin: 0 auto;
    margin-top :40px;
    }

    .layout  input, textarea {
    width : 100%;
    margin-top :10px;
    box-sizing : border-box;
    }

    textarea{
    height : 300px;
    }
</style>

<body>
<div class="layout">
  <form th:action="@{/board/update/{id}(id = ${board.id})}" method="post">
    <input name="title" type="text" th:value="${board.title}">
    <textarea name="content" th:text ="${board.content}"></textarea>
    <button>수정</button>
  </form>
</div>
</body>
</html>

사실 저번에 글 작성 페이지와 변한건 없다. 

 

우선 리스트에서 수정버튼에 id를 담아 넘겨주어야하니 리스트에 수정버튼 + 파라미터값을 넘기는 Url을 해보자

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 위에 xmlns 하면 타임리프 문법을 쓸수 있다.-->
<head>
    <meta charset="UTF-8">
    <title>게시글 상세페이지</title>
</head>
<body>

<h1 th:text="${board.title}">제목 입니다.</h1>
<p th:text ="${board.content}">내용이 들어갈 내용입니다.</p>
<a th:href="@{/board/delete?(id=${board.id})}">글 삭제</a>
<a th:href="@{/board/modify/{id}(id=${board.id})}">글 수정</a>
</body>
</html>

타임리프로 th:href = "@{}"

을 하여 파라미터 값을 넘긴다. 

이때 삭제랑은 좀 다른데 이떄 나는 

pathvariable을 이용할 것이다. 

원래 삭제버튼 같은경우에는

/board/delete?id=숫자 이렇게 살짝 지저분하게 떨어지는데

위 방법처럼하면

/board/modify/1 이런씩으로 깔끔하게 떨어진다. 

 

이제 컨트롤러를 보자.

 

    @GetMapping("/board/modify/{id}")
    public String boardModify(@PathVariable("id") Integer id , Model model){
        System.out.println("제발류");
        model.addAttribute("board",boardService.boardView(id));

        return "boardmodify";
    }

제발류 이건 무시하자 안되서 기도메타로 넣은거라 

 

암튼 각설하고 

이제 view에서 글번호를 가져와서 modify에다 뿌려 줄것이다.

이떄 pathvariabe을 쓰고 근데 이건 스프링이랑 같은지 모르겠는데

id값과 변수명이 일치하면 안해도 된다고 알고 있다. 

 

맞는지는 검증이 필요해보인다. 

 

id값으로 boardView를 불러와서 뿌려준다. 

 

그럼 다음과 같이 뿌려줄것이다.

 

수정버튼을 누르게 되면

 

이렇게 url을 타고 온다

이제 수정버튼을 누르면 수정이 되게 해보자

 

    @PostMapping("/board/update/{id}")
    public String boardUpdate(@PathVariable("id") Integer id , Board board , Model model){

        Board boardTemp = boardService.boardView(id);
        boardTemp.setTitle(board.getTitle());
        boardTemp.setContent(board.getContent());

        model.addAttribute("message" , "글 수정 완료.");
        model.addAttribute("SearchUrl" , "/board/list");

        // 절대 이렇게 하면 안되고 Jpa에서 제공하는 변경감지나 Merge 기능을 따로 공부하자.
        boardService.write(boardTemp);

        return "Message";
    }

먼저 Integet 타입에 id를 받고 board를 받아 수정할 대상을 값을 받아준다.

그다음에 set으로 깔아두고 불러온 파라미터를 get으로 보내면 수정이 완료 된다. 

 

다시한번 말하지만 이렇게하는게아니고 변경감지를 통해서 해야한다. 

 

아까 8번 게시물을 수정해보자

 

 

수정8로 업데이트가 되었다.

 

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(7) 페이징처리 {타임리프,스프링부트}  (0) 2022.05.11
JPA를 사용한 게시판 만들기(6) 메시지띄우기 {타임리프,스프링부트}  (0) 2022.05.10
JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기(2) 리스트작업 {타임리프,스프링부트}  (0) 2022.05.05
반응형

저번시간에는 상세보기를 알아보았다. 

이번에는 삭제 처리이다.

상세보기 만큼 아니 .. 아마 제일 쉬운것 같다

 

JPA를 공부하는데 

좀 신세계인거 같다. 

 

오늘도 디자인 따위는 없다 

남자는 남자답게 글 삭제 a태그 하나로 삭제한다. 

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 위에 xmlns 하면 타임리프 문법을 쓸수 있다.-->
<head>
    <meta charset="UTF-8">
    <title>게시글 상세페이지</title>
</head>
<body>

<h1 th:text="${board.title}">제목 입니다.</h1>
<p th:text ="${board.content}">내용이 들어갈 내용입니다.</p>
<a th:href="@{/board/delete?(id=${board.id})}">글 삭제</a>
</body>
</html>

먼저 뷰 코드부터 보자 

 

컨트롤러와 연결하기 위해 id값을 파라미터로 타임리프 th:href로 id값을 넘긴다. 

 

다음에 컨트롤러를 보자 

 

    @GetMapping("/board/delete")
    public String boardDelete(Integer id){
        boardService.boardDelete(id);

        return "redirect:/board/list";
    }

 

GetMapping으로  url을 받은 후에 

리턴값으로 리다이렉트로 게시글 리스트로 돌려보낸다. 

 

Service를 보자 

 

    public void boardDelete(Integer id){
        boardRepository.deleteById(id);
    }

JPA라서 그런가.. 쿼리문이 필요없다 

정말 놀랍다 

 

 

글 4번을 삭제해보자 

 

글이 삭제되어 보이지 않는다. 

 

https://github.com/MoonSeokHyun

 

MoonSeokHyun - Overview

http://mls0000.dothome.co.kr/. MoonSeokHyun has 14 repositories available. Follow their code on GitHub.

github.com

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(6) 메시지띄우기 {타임리프,스프링부트}  (0) 2022.05.10
JPA를 사용한 게시판 만들기(5) 수정처리 {타임리프,스프링부트}  (0) 2022.05.10
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기(2) 리스트작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기 글쓰기(1)  (3) 2022.05.05
반응형

저번에는 리스트를 만들어 보았다 이번에는 상세보기를 알아보도록 하쟈

 

오늘도 디자인은 물논 없다. 

 

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 위에 xmlns 하면 타임리프 문법을 쓸수 있다.-->
<head>
    <meta charset="UTF-8">
    <title>게시글 상세페이지</title>
</head>
<body>

<h1 th:text="${board.title}">제목 입니다.</h1>
<p th:text ="${board.content}">내용이 들어갈 내용입니다.</p>
</body>
</html>

정말 간단하게 제목 H1 태그 

내용이 들어가는 p 태그 이다. 

 <a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>

컨트롤러 에서 위에 파라미터를 받을 수 있다.

 

@GetMapping("/board/view")
public String boardView(Model model , Integer id){

    model.addAttribute("board",boardService.boardView(id));
    return "boardview";
}

먼저 게시물 번호를 파라미터로 받고 그글 을 보여준다. 

 

그 다음에 service를 보자

 

    // 특정 게시글 불러오기
    public Board boardView(Integer id){
        return boardRepository.findById(id).get();
    }

게시글을 불러 와야 하기 떄문에 board타입으로 객체를 만들고 

id를 받아준다. 

그리고 findById(id) 로 한개의 게시물을 가져 와준다. 

 

    select
        board0_.id as id1_0_0_,
        board0_.content as content2_0_0_,
        board0_.title as title3_0_0_ 
    from
        board board0_ 
    where
        board0_.id=?

findAll을 쓰면 이렇게 불러 오게 된다. 

 

https://github.com/MoonSeokHyun/SpringBoot_StudyBoard

 

GitHub - MoonSeokHyun/SpringBoot_StudyBoard

Contribute to MoonSeokHyun/SpringBoot_StudyBoard development by creating an account on GitHub.

github.com

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(5) 수정처리 {타임리프,스프링부트}  (0) 2022.05.10
JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(2) 리스트작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기 글쓰기(1)  (3) 2022.05.05
스프링부트 기초 프로젝트 만들기 (Spring initializr)  (0) 2022.05.04
반응형

저번에는 글쓰기에 대해서 알아보았다.

 

이제 쓴 글을 리스트화 시키는 방법에 대해서 스프링 부트와 jpa 방법으로 알아보고자 한다. 

 

 

이렇게 됬다 공부중이라 디자인은 생략한다. 

 

자 이제 시작해보자 

 

우선 리스트를 하기위해 더미데이터를 대략 120개 정도  돌려준다. 

 

컨트롤러에서 해도 되지만 그냥 넣어준다. 

 

CREATE PROCEDURE testDataInsert()
BEGIN
    DECLARE i INT DEFAULT 1;

    WHILE i <= 120 DO
        INSERT INTO board(title, content)
          VALUES(concat('제목',i), concat('내용',i));
        SET i = i + 1;
    END WHILE;
END$$
DELIMITER $$

call testDataInsert

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 위에 xmlns 하면 타임리프 문법을 쓸수 있다.-->
<head>
    <meta charset="UTF-8">
    <title>게시물 리스트 페이지</title>
</head>

    <style>
        .layout{
        width : 500px;
        margin: 0 auto;
        margin-top :40px;
        }
    </style>
<body>
  <div class="layout">
      <table>
          <thead>
                <tr>
                    <th>제목 </th>
                    <th>내용 </th>
                </tr>
          </thead>
          <tbody>
              <tr th:each="board : ${list}">
                  <td th:text="${board.id}">1</td>
                  <td>
                      <a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</body>
</html>

우선 정말 간단한..? 리스트 페이지를 만들었다. 

 

이제 페이지에 들어갈 수 있도록 

컨트롤러를 제작해보자

 

    @GetMapping("/board/list")
    public String boardList(Model model){
        System.out.println(boardService.boardList());
        model.addAttribute("list",boardService.boardList());
        return "boardList";
    }

간단하게 Getmapping으로 board에 리스트로 접근한다. 

그리고 리턴타입으로는 html 파일명을 입력 주면 된다. 

 

 이제 Service를 보자 

 

    //게시글 리스트 처리
    public List<Board> boardList(){
        return  boardRepository.findAll();
    }

대략 120개의 리스트덩어리를 받아줘야해서 LIst 타입으로 받아준다. 

이떄 JPA의 findALL()을 써준다. 

 

findALL 이란? 

 

전체 레코드 불러오기 및 정렬 페이징 등을 관리한다.

 

FIndAll을 하면 아래와 같은 코드로 이루어진다.

  select
        board0_.id as id1_0_,
        board0_.content as content2_0_,
        board0_.title as title3_0_ 
    from
        board board0_

 

다시 컨트롤러로 와보자

 

    @GetMapping("/board/list")
    public String boardList(Model model){
        System.out.println(boardService.boardList());
        model.addAttribute("list",boardService.boardList());
        return "boardList";
    }
    model.addAttribute("list",boardService.boardList())

 

로 board라는 이름으로 service에 boardList를 뷰에 뿌려준다. 

 

타임리프 사용법 

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 위에 xmlns 하면 타임리프 문법을 쓸수 있다.-->
<head>
    <meta charset="UTF-8">
    <title>게시물 리스트 페이지</title>
</head>

    <style>
        .layout{
        width : 500px;
        margin: 0 auto;
        margin-top :40px;
        }
    </style>
<body>
  <div class="layout">
      <table>
          <thead>
                <tr>
                    <th>제목 </th>
                    <th>내용 </th>
                </tr>
          </thead>
          <tbody>
              <tr th:each="board : ${list}">
                  <td th:text="${board.id}">1</td>
                  <td>
                      <a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</body>
</html>

<html lang="en" xmlns:th="http://www.thymeleaf.org"> 을 써준다.

 

html코드에 그 다음은 jsp에 jstl이랑 비슷하다.

 

th:each 는 c:foreach 와 비슷한거같다.

아까 뿌려준 board리스트가 다 털릴때 까지 html에 뿌려준다. 

 

다음은 상세보기에 대해서 알아보자 

 

 

https://github.com/MoonSeokHyun/SpringBoot_StudyBoard

 

GitHub - MoonSeokHyun/SpringBoot_StudyBoard

Contribute to MoonSeokHyun/SpringBoot_StudyBoard development by creating an account on GitHub.

github.com

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기 글쓰기(1)  (3) 2022.05.05
스프링부트 기초 프로젝트 만들기 (Spring initializr)  (0) 2022.05.04
인텔리제이(IntelliJ IDEA) 설치 방법  (0) 2022.05.04
반응형

JPA를 사용하여 게시판을 만들어보자 

 

툴 : 인텔리제이 

데이터베이스 : 마리아디비 

라이브러리 : 스프링 부트 

사용기술 JPA

 

우선 그래들환경에 익숙해지기 위해 좀 해깔렷지만 지금은 조금 익숙해 졌다.

 

 

이런식으로 되어있는데 

우선 Entity는 VO와 비슷한거같다. 

 

우선 Entity를 살펴 보자

 

1) Entity란 ? 

- 데이터베이스 에 필드와 여러 엔티티간 연관관계를 정의 한다 데이터베이스는 엑셀처럼 2차원 테이블이라고 생각하면 된다. 이 테이블에 서비스에서 필요한 정보를 다 저장하고 활용하게 된다. 

 

 

package com.study.board.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Data
public class Board {

    @Id 
    @GeneratedValue(strategy = GenerationType.IDENTITY) //

    private Integer id;
    private String title;
    private String content;


}

@어노테이션

 

대략적인 어노테이션의 개념만 알도록하자

@Entity : 클래스 위에 선언하여 이클래스가 엔티티임을 알려준다. 이렇게 되면 JPA에서 정의된 필드들을 바탕으로 데이터베이스에 테이블을 만들어준다. 

@data : lombok 각 필드값을 조회할 수있는 getter와 setter를 조회해 준다. 

@id , @GeneratedValue : 해당 엔티티의 주요키가 될 값을 지정해 주는 것이 @Id 이며 @GeneratedValue이 pk이라 자동으로 1씩 증가하게 되는 어노테이션이다. 

 

 

다음 레포지토리를 보자

 

package com.study.board.repository;

import com.study.board.entity.Board;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface BoardRepository extends JpaRepository<Board , Integer> {
}

 

2. Repository

- Entity에 의해 생성된 DB에 접근하는 메서드들을 사용하기 위한 인터페이스 이다. 

위에서 엔티티를 선언함으로써 데이터베이스 구조를 만들었다면 여기에 어떤값을 넣거나 넣어진 값을 조회하는 등의 CRUD를 해야 쓸모가 있는데 이것을 어떻게 정의 해주는 계층이다.

 

JpaRepository를 상속받도록 함으로써 기본적인 동작이 모두 가능해진다! JpaRepository는 어떤 엔티티를 메서드의 대상으로 할지를 다음 키워드로 지정한다. JpaRepository<대상으로 지정할 엔티티, 해당 엔티티의 PK의 타입>.

 

이렇게 extends를 통해서 상속받고나면, 해당 레포지토리의 객체를 이용해서 기본적으로 제공되는 메서드(save(), findAll(), get()) 등을 사용할 수 있게 된다.

 

 

3. Service

 

주요 로직을 수행한다.

위에 제네릭으로 JpaRepository를 상속했기 때문에 아래의 메소드를 사용할 수 있다. 

@Service
public class BoardSercie {

    @Autowired
    private BoardRepository boardRepository;

    public void write(Board board){

        boardRepository.save(board);
    }
}

 

4. 컨트롤러

- 뷰에서 받은 파라미터를 service로 넘겨준다. 

 

   @Autowired
   private BoardSercie boardService;

    @GetMapping("/board/write") //localhost:8090/board/write
    public String boardwriteForm(){

        return "boardwrite";
    }

    @PostMapping("/board/writepro")
    public String boardWritePro(Board board){

        boardService.write(board);

        return "";
    }
<body>
    <div class="layout">
        <form action="/board/writepro" method="post">
            <input name="title" type="text">
            <textarea name="content"></textarea>
            <button>작성</button>
        </form>
    </div>
</body>
</html>

 

대략 이런 단순한 게시판이 있다고 해보자 

 

작동 순서

 

1) board form에 name값으로 각각 "content" , "title" 2개를 주었고 id는 자동으로 1씩 증가된다. 

작성을 누르게 되면 위에 action으로 post방식으로 컨트롤러에 던져주게 된다. 

2) 컨트롤러는 제목과 내용을 받아서 서비스로 던져준다. 

3) 서비스에서 레포지토리에서 상속받은 save()를 하여 insert 시킨다. 

 

이정도로 이해하면 될거같다. 

 

 

를 작성해서 데이터 베이스로 넘겨보자

 

id는 자동증가가 되었고 

title과 content 모두 잘 저장 되었다. 

 

https://github.com/MoonSeokHyun/SpringBoot_StudyBoard

 

GitHub - MoonSeokHyun/SpringBoot_StudyBoard

Contribute to MoonSeokHyun/SpringBoot_StudyBoard development by creating an account on GitHub.

github.com

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기(2) 리스트작업 {타임리프,스프링부트}  (0) 2022.05.05
스프링부트 기초 프로젝트 만들기 (Spring initializr)  (0) 2022.05.04
인텔리제이(IntelliJ IDEA) 설치 방법  (0) 2022.05.04
반응형

스프링부트 나 스프링프로젝트를 쉽게 생성할 수 있게 만들어주는 사이트가 있어 소개 해보려고 한다. 

 

https://start.spring.io/

 

사이트는 다음과 같다. 

 

1. 프로젝트를 선택해준다 메이븐형식으로 할지 그래들로 할지? 

나는 메이븐 방식이 편하지만 그래들도 한번 사용해보고자 한다. 

2. 스프링부트 버전을 선택해준다. (snapshot)이 붙어 있는건 아직 개발중이라는거라고 하여

없는 버전을 선택해준다. 

3. 그룹 이름을 선언해주고 (ex : com.study)

4. 이름을 정해준다. 

5. 제일 중요한 디펜던시를 선언해준다. 

 

나는 이번에 jpa와 마리아 디비를 쓰려고한다.

jsp보다는 타임리프를 한번 써보려고 한다. 

 

이렇게 해서 

 

GENERATE을 눌러 주면 zip파일로 받을 수 있게 된다. 

 

그다음에 압축을 풀고 인텔리제이 폴더에 붙여 넣기를 하면된다.

 

그래들이 적용된 모습이다.

 

 

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기(2) 리스트작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기 글쓰기(1)  (3) 2022.05.05
인텔리제이(IntelliJ IDEA) 설치 방법  (0) 2022.05.04
반응형

항상 이클립스를 쓰다가 이제는 다른 자바 툴인 IntelliJ IDEA 를 써보려고 한다.

 

먼저 다운로드를 하려면 

https://www.jetbrains.com/ko-kr/idea/

 

IntelliJ IDEA: 우수성과 인체 공학이 담긴 JetBrains Java IDE

 

www.jetbrains.com

 

에서 다운로드를 선택한다. 

 

무료 버전을 선택한다.

 

 

인텔리 제이 설치 

 

실행 한다. 

 

next 를 누르다 보면 

 

이런 화면 이 나올텐데 

1. 바로 가기 생성

2. 환경변수 자동추가

3. 프로젝트 폴더 열기 메뉴 추가 

4. 사용언어 추가 

 

이렇게 하면 완료 된다. 

 

완료 되었다.

 

이제부터 인텔리제이로 코딩을 한번 해보자 

아직까지는 이클립스가 익숙하다 ㅎㅎ..

반응형

'Spring Boot > 기초 게시판제작 + maria DB' 카테고리의 다른 글

JPA를 사용한 게시판 만들기(4) 삭제처리 {타임리프,스프링부트}  (0) 2022.05.06
JPA를 사용한 게시판 만들기(3) 상세보기작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기(2) 리스트작업 {타임리프,스프링부트}  (0) 2022.05.05
JPA를 사용한 게시판 만들기 글쓰기(1)  (3) 2022.05.05
스프링부트 기초 프로젝트 만들기 (Spring initializr)  (0) 2022.05.04
반응형

 

ataTable.addColumn('number',
'날짜');구글 차트를 이용한 데이터 시각화를 하려고 한다. 

날자 to 날자를 선택하면 

해당 기간에 쓴글을 표로 보여주고 표를 토대로 

구글차트를 이용하여 데이터시각화를 보여주려고 한다. 

 

 

 

우선 가장 기본이 되는 sql문 부터 보자 .

 

   <select id="admin_findDate" resultType="hashmap">
   select board_type,count(board_type)as count from job_board where board_regdate
   BETWEEN TO_DATE(#{date1}, 'MM-DD-YY') and TO_DATE(#{date2}, 'MM-DD-YY') 
   GROUP by board_type
   </select>

sql문을 보면 이제 date1과 date2를 받아주어야한다. 

 

ajax를 봐보자

 

$('#join-date')
				.click(
						function() {
							var date1 = $('#date1').val();
							var date2 = $('#date2').val();

							str = '';
							$
									.ajax({
										type : 'post',
										url : '<c:url value ="/admin/findDate"/>',
										dataType : "json",
										data : {
											date1 : date1,
											date2 : date2
										},
										success : function(data) {
											for ( var i = 1 in data) {
												str += "<tr>"
												str += "<td>"
												if(data[i].BOARD_TYPE == 1){
													str += "사기업게시판(1)"
												}
												else if(data[i].BOARD_TYPE == 2){
													str += "공기업게시판(2)"
												}
												else if(data[i].BOARD_TYPE == 3){
													str += "아시아게시판(3)"
												}
												else if(data[i].BOARD_TYPE == 4){
													str += "유럽게시판(4)"
												}
												else if(data[i].BOARD_TYPE == 5){
													str += "남미게시판(5)"
												}
												else if(data[i].BOARD_TYPE == 6){
													str += "북미게시판(6)"
												}
												else if(data[i].BOARD_TYPE == 7){
													str += "아프리카(7)"
												}
												else if(data[i].BOARD_TYPE == 8){
													str += "국가자격증(8)"
												}
												else if(data[i].BOARD_TYPE == 9){
													str += "민간자격증(9)"
												}
												else if(data[i].BOARD_TYPE == 10){
													str += "어학자격증(10)"
												}
												else if(data[i].BOARD_TYPE == 11){
													str += "자유게시판(11)"
												}
												else if(data[i].BOARD_TYPE == 12){
													str += "취뽀게시판(12)"
												}
												else if(data[i].BOARD_TYPE == 13){
													str += "취업게시판(13)"
												}
												else if(data[i].BOARD_TYPE == 14){
													str += "자격증게시판(14)"
												}
												else if(data[i].BOARD_TYPE == 15){
													str += "자소서게시판(15)"
												}
												else if(data[i].BOARD_TYPE == 16){
													str += "삭제(16)"
												}
												str +=	 "</td>"
												str += "<td>" + data[i].COUNT
														+ "</td>"
												str += "</tr>"
											}
											$("#board_info").html(str);
											$("#chart-tbl").DataTable();

											google.charts.load('current',
													{
														packages : [
																'corechart',
																'bar' ]
													});

											google.charts
													.setOnLoadCallback(drawBasic);

											function drawBasic() {

												console.log(data.length);

												var dataTable = new google.visualization.DataTable();
												dataTable.addColumn('number',
														'날짜');
												dataTable.addColumn('number',
														'글수');

												chart_data = [];

												for ( var i = 1 in data) {
													chart_data.push([
															data[i].BOARD_TYPE,
															data[i].COUNT ])
												}

												console.log(chart_data);

												dataTable.addRows(chart_data);

												var options = {

													title : '게시글 수',
													hAxis : {
														title : '게시판명'
													},
													vAxis : {
														title : '글수'
													}
												};

												var chart = new google.visualization.ColumnChart(

														document
																.getElementById('chart_div'));

												chart.draw(dataTable, options);

											}
										},
										error : function(request, status, error) {
											console.log('에러발생!!');
											console.log("code:"
													+ request.status + "\n"
													+ "message:"
													+ request.responseText
													+ "\n" + "error:" + error);
										}
									}) // end ajax
						})
		//$("#board-admin").DataTable();
	})
</script>

우선 데이터 타입이 숫자형식으로 오기때문에 

if문으로 각 숫자에 준하는 게시판을 대입해준다. 

ex) 11번이면 자유게시판

 

그리고 빈문자열 str에 추가해 주어 데이터 테이블까지 적용해준다. 

html(str) 이렇게

 

 

다음 구글차트를 로드해준다. 

 

ataTable.addColumn('number','날짜');

이런식으로 데이터 컬럼을 추가해준다. 

이것은 구글차트에 행과 열을 나타낸다. 

 

그리고 for문으로 데이터를 빼준다. 

 

그리고 옵션을 선언해주고 

데이터 테이블을 부를 태그를 선언해주면 알아서 그려준다.

 

그리고 JSON방식으로 던져줘야한다. 

 

	@ResponseBody
	@PostMapping("/findDate")
	public List<HashMap<String, Object>> admin_findDate(String date1 , String date2) {
		System.out.println(date1);
		System.out.println(date2);
		List<HashMap<String, Object>> list = service.admin_findDate(date1, date2);
		System.out.println(service.admin_findDate(date1, date2));
		return list;
	}

컨트롤러는 이렇게 선언해주고 리스트라는 이름으로  뷰쪽으로 던져주면 된다. 

 

끝~

반응형

'Spring > 잡잡커뮤니티' 카테고리의 다른 글

스프링 관리자페이지 만들기(3) 회원 관리  (0) 2022.04.23
잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(2) (데이터테이블, ajax, 서브쿼리)  (0) 2022.04.21
잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(1)  (0) 2022.04.05
스프링 댓글 구현하기 feat ajax  (1) 2022.04.04
스프링 프로젝트 잡잡커뮤니티 만들기 다중게시판  (1) 2022.03.21
반응형

시금치를 잔뜩삿다.

 

무려 250그람..

 

둘이먹기에는 많은가 했더니..

 

거의 요만큼이었는뎅..

 

거의 이렇게 됬다. 

 

완전 물에 젖은 고양이 마냥

확 줄어들었다 ..

 

싱크대.. 치우고 사진찍을껄 ..

 

조물조물하니 시금치 무침이 됬다.

 

핀란드에서는 베이비시금치라고 한다.

 

베이비라니 마치 .. 나처럼.. 은 개소리고..

 

뭐 맛은 있다 .

 

 

반응형

'일상 > 핀란드' 카테고리의 다른 글

핀란드 일상(10) 헬싱키 시내 학식 방문 및 isic 카드 발급  (0) 2022.04.27
핀란드 일상(9) 비건 양배추김치 만들기 (해외에서 김치만들기, 핀란드, 비건)  (0) 2022.04.22
핀란드 일상(8) 파실라 산책 (해외여행,코로나 해외여행, 핀란드, 핀란드 근교)  (0) 2022.04.17
핀란드 일상(7) 비건 타이 음식점 및 핀란드 근교 산책  (0) 2022.04.11
핀란드 일상(6) - 헬싱키 근교 산책 및 뇨끼  (0) 2022.04.09

+ Recent posts

티스토리툴바