게시글 작성 폼 생성

• html 파일에 간단한 구조를 만들어 줍니다.
  

• controller를 작성합니다
  

• return 에는 어떤 html(View) 파일을 보여줄 것인지를 입력
• @GetMapping : 어떤 url로 접근할지를 지정하는 어노테이션

• localhost:8080/board/write 로 접속하면 html에서 작성한 폼이 나옵니다.
  

글 작성 처리

• html에서 form 태그로 작성한 내용을 감쌉니다.
  
• form
  • action : 어느 url 주소로 데이터를 보내는지
  • method : rest api 어느 방식인지
• name도 붙여줍니다.
• submit : 데이터 전송

• 페이지에 작성 버튼을 누르면 페이지가 없다는 에러 내용이 나옴.
• /board/writepro 를 만들어줘야 함.
  

• Controller에 PostMapping으로 값이 잘 들어오는지 확인
  • title, content는 html에서 지정한 name
    
• 다시 작성하고 글을 쓰면 500 에러가 나온다. (html 페이지가 없기 때문)
• 콘솔 출력을 보면 값이 들어옴을 볼 수 있다.
  
  

DB에 저장하기

• DB에 저장하려면 repository 가 필요하다.
• repository, entity 패키지를 만든다.
• entity는 테이블 이름과 같아야 함. 영속성
  

Entity

• entity 패키지의 Board 클래스에 @Entity를 붙임 (테이블을 의미)
• 테이블의 컬럼의 이름, 형식에 맞게 값을 만듦.
• 각 필드에 맞게 어노테이션을 붙임.
  

@GeneratedValue(strategy = GenerationType.IDENTITY)
// IDENTITY : Mysql, MariaDB
// SEQUENCE : Oracle
// AUTO : 알아서 지정

• Controller에 html에서 저장한 name을 받지 않고, Entity에서 작성한 Board를 받도록 바꿨다.
  • Entity Board는 html에서 받은 title, content를 가지고 Board board를 만든다.
  • 잘 출력 된다.
    

Repository

• Repository 패키지에 BoardRepository 인터페이스를 만들고, @Repository를 붙인다.
• 인터페이스는 JpaRepository를 상속 받는다. 제네릭으로 타입을 지정해야한다.
• <> 안에는 넣을 Entity, Entity의 pk의 타입을 순서대로 넣는다.
  

Service

• Service 패키지에 BoardService 클래스를 만들고, @Service를 붙인다.
• Repository와 @Autowired로 연결
• 실제 동작할 행위를 작성한다. (메소드)
  • DB에 Entity를 저장하는 것은 save(entity)
    

Controller

• 작성한 Service를 사용한다.
• boardService를 @Autowired로 연결
  

동작 확인

• DB에 잘 들어오는 것을 확인할 수 있다.
  

게시글 리스트

• 게시판이 잘 동작하는지 알기 위해 DB에 더미데이터를 만들어준다.
  https://velog.io/@minyule/DB-%ED%94%84%EB%A1%9C%EC%8B%9C%EC%A0%80-%EB%A7%8C%EB%93%A4%EA%B8%B0

리스트 페이지 만들기

Controller

• 메소드와 html, url 먼저 지정해 준다.
  

html

• resources.templates에 boardlist.html을 만들고, 확인한다.
  

Service

• 글을 불러올 메소드를 만듦
• DB에 있는 모든 글을 가져와야 한다.

• Board가 들어있는 List 형식.
• boardRepository 에서 findAll로 모든 항목을 가져온다.
  
• findAll의 generic을 확인하면 어떤 형식의 값을 넣고, 어떻게 반환되는지 확인 가능
  

Controller

• 데이터를 담아서 보는 페이지로 전달해야함
  • Model 사용
  • model.addAttribute("이름", 내용)
  • boardService.boardList()에서 반환된 값을 적힌 이름인 "list"로 넘기겠다는 뜻
    

html

• 받아온 데이터를 출력하기 위해 변경
• list에 담긴 값을 반복문으로 보여줌
  

게시글 상세 페이지

상세 페이지 만들기

html

• 상세 페이지 먼저 만듦. 더미로 값 넣어줌
  

Controller

• 메소드와 url, html 먼저 지정
• @GetMapping : 이 url 경로로 들어왔을 때, html(template) 을 보여줍니다.
  • 데이터를 전달할 것이므로 Model을 쓰겠죠!
    

Service

• boardView라는 메소드를 만듦. id로 Board를 찾아서 넘겨줘야 함.
  

Controller

• 값을 넘겨줘야 하므로 Model을 사용
• url을 통해서 파라미터 값을 받음. (get 방식)
  

html

• Controller에서 받은 값을 출력하도록 변경, 동작 확인
  

• 글 제목에 a 태그를 붙여서 상세 페이지로 넘어갈 수 있도록 함.
  

게시글 삭제

삭제 버튼 생성 및 삭제 처리

html

• 삭제 버튼 만들기, 위치만 확인
  

Service

• id로 삭제하는 기능
• 삭제만 하고 return할 것이 없으므로 void
  

Controller

• id 값으로 Service의 boardDelete를 실행하고, 전체 게시글 보기로 return
  
• redirect로

동작 확인

• http://localhost:8080/board/delete?id=1
• 1번째 글이 사라진다.

게시글 수정

게시글 수정 버튼 생성 및 수정 처리

html

• 게시글 상세보기 html에 수정 버튼을 만든다.
  

Controller

• PathVariable을 사용한다.
  • url이 들어왔을 때, {} 가 인식이 되어서 Integer 형태의 id로 들어옴
  • 숫자만 붙게 된다.
• 게시글 삭제 때 썼던 방식은 쿼리 스트링
  • ?id=4 이런 식으로 붙음
• url과 보여줄 html을 지정한다.
  

• 수정 페이지에서는 기존 글 내용이 보여야하기 때문에 기존 글에 대한 정보를 담아줄 Model이 필요하다.
• board라는 형식으로 id를 보냄
  

html

• 수정 페이지 만들기
  
• 버튼의 action을 바꾼다.
  

Controller

• @PostMapping
• PathVariable로 받은 id를 통해 기존 글을 찾는다 (boardTemp)
• 기존 글에 새로 입력한 내용이 있는 board를 덮어씌운다.
• 기존 내용을 새로운 내용으로 변경한다.
  

처리 메시지 출력

게시글 등록, 수정

html

Controller

• 기존에 만들었던 boardWritePro를 변경
  

동작 확인

• 글을 작성하면 alert가 뜨고, list로 가는 것을 볼 수 있다.
  

파일 업로드

파일 업로드하기

DB 컬럼 바꾸기 - mysql workbench

Entity 변경

html

• 파일 업로드하는 부분 추가하기
• 폼에 enctype 추가
• input 태그에 type을 file로 설정, name도 file로 설정
  

디렉토리 추가

Service

• 글 쓸 때, 파일도 받도록 추가
  
• projectPath 에 저장할 파일의 경로를 입력함
  • System.getProperty : 현재 프로젝트의 경로가 담김
  • 추가 주소를 더해준다.
• File 클래스: (경로, 파일이름)
• UUID : 식별자 만드는 클래스
  

Controller

• 기존 글 쓰기, 글 수정하기 controller 변경
• Multipartfile file 을 받고, boardServie.write에 file을 주도록
  
  

DB에 넣기 - Service 수정

• 파일 이름, 경로를 함께 저장
  

html - 파일 보기 버튼

페이징

게시판 페이징 처리 - 백엔드 처리

• 페이지 나누기
• 최신 글을 맨 위에 위치 시키기

Controller

• boardList controller 수정
• Pageable 인터페이스 사용
• @PageableDefault
  • page : default 페이지
  • size : 한 페이지 게시글 수
  • sort : 정렬 기준 컬럼
  • direction : 정렬 순서
    

Service

• findAll에 매개변수가 없을 때는 List가 리턴 형식이었는데, 매개변수가 들어가면 Page가 리턴 형식이 된다.
  • 클래스 형식 바꾸기
    

동작 확인

• 파라미터에 값을 넣어서 page, size 변경 가능하다
  

페이지 블럭 출력 - 프론트엔드 처리

• nowPage : 현재 페이지
• startPage : 블럭에서 보여줄 시작 페이지
• endPage : 블럭에서 보여줄 마지막 페이지

Controller

html - 페이지 블럭 적용

동작 확인

페이징 알고리즘 공부 필요

검색 기능

게시판 검색 기능

• JPA Repository는 검색 기능 제공
  • findBy(컬럼 이름) : 컬럼에서 키워드를 넣어서 찾겠다. (일치하는 것만)
  • findBy(컬럼 이름)Containing : 컬럼에서 키워드가 포함된 것을 찾겠다. (포함하는 것)

Interface

• 메소드 추가
  

Service

• 메소드 추가
  

Controller

동작 확인

• url에 파라미터를 넣으면 동작함 but, 다음 페이지로 넘어가면 searchKeyword 해제됨
  

html

• 파라미터에 searchKeyword 넣고 다름 페이지로 넘어갈 수도 있게 됨.
• param 사용
  
• 검색창 만듦
  

동작 확인