페이징 처리 버튼 앞에서 url 에 페이지 값을 통해 각 페이지의 question 을 보여주는 기능을 만들었습니다. 하지만, 항상 url 을 통해 페이지를 보여줄 수 없기 때문에 페이지를 보여줄 수 있는 게시물 리스트 아래 페이지 버튼을 만들겠습니다. ... 이전 다음 질문 등록하기 question_list 파일에서 page 를 선택할 수 있도록 ul 태그를 통해 만들었습니다. 첫번째 li 태그는 이전의 페이지가 없을 경우 disabled 를 통해 보여지지 않고 이전 페이지가 있을 경우 "이전" 이라는 버튼을 만듭니다. 이전 두번째 li 태그는 0부터 마지막 페이지까지 버튼을 만들어줍니다. 각 버튼마다 localhost:8080/question/list?page=(페이지버튼) 을 연결해줍니다. 또한 현재..

이번 포스트에서는 question 테이블에 저장된 게시글을 페이징 처리해서 브라우저에 보여주도록 하겠습니다. 시작 현재 데이터베이스에 데이터가 2개밖에 없기 때문에 더미데이터를 만들어주겠습니다. MariaDB [springboot_crud]> delimiter $$ MariaDB [springboot_crud]> drop procedure if exists loopinsert$$ Query OK, 0 rows affected (0.006 sec) MariaDB [springboot_crud]> create procedure loopinsert() -> begin -> declare i int default 1; -> while i insert into question(content, create_date..

이번 포스트에서는 모든 페이지에서 위쪽에 고정되어 있는 홈, 로그인 등의 메뉴를 보여주는 네비게이션바를 만듭니다. 네비게이션바 다음과 같이 layout.html 파일의 body 태그 안에 작성을 해줍니다. Board 로그인 layout.html 을 상속받는 모든 페이지에서 안의 내용들을 화면에 출력합니다. 다음으로 부트스트랩에서 자바스크립트를 사용하기 위해 아래 script 태그를 head 태그 안에 넣어줍니다. 페이지에 접속해보면 다음과 같이 화면이 나옵니다. 위에서 추가한 자바스크립트 기능을 사용해서 부트스트랩은 navbar 를 반응형 웹페이지로 만들어서 작은 화면일 경우 아래와 같이 우측의 메뉴 버튼을 누르면 메뉴를 보여줍니다.

앞에서 만든 질문 등록 기능과 비슷하게 답변 등록 기능을 만들겠습니다. AnswerForm 작성 package com.crud.model; import jakarta.validation.constraints.NotEmpty; import lombok.Getter; import lombok.Setter; @Getter @Setter public class AnswerForm { @NotEmpty(message = "내용을 입력해주세요.") private String content; } 답변은 content 만 있으므로 AnswerForm 은 content 하나만 속성으로 갖습니다. AnswerController 수정 다음으로 AnswerController 를 AnswerForm 을 통해 검증을 할 수 있도..

앞에서 질문을 등록하고 데이터베이스에 추가하는 기능을 만들었습니다. 하지만 질문을 등록할때 subject 나 content 를 비워두고 등록 버튼을 클릭하면 데이터베이스에는 해당값이 없는채로 등록이 됩니다. 이번에는 값이 비워져있으면 검증을 통해 메세지를 출력하도록 하겠습니다. 시작 먼저 pom.xml 파일에 아래와 같이 dependency 를 추가합니다. org.springframework.boot spring-boot-starter-validation QuestionForm 작성 다음으로 question_form 페이지에서 입력값이 제대로 작성되었는지 확인하기 위해서 subject 와 content 를 갖는 QuestionForm 클래스를 작성해서 검증을 하겠습니다. QuestionForm 클래스는 ..

이번 포스트에서는 질문을 등록하는 기능을 만들어보겠습니다. 시작 먼저 메인 페이지에서 질문 등록하기 버튼을 만들어서 질문 등록 페이지로 이동할 수 있도록 하겠습니다. ... 질문 등록하기 메인페이지인 question_list.html 파일 안에 질문 등록하기 버튼을 추가합니다. 이 버튼을 클릭하면 get 방식으로 localhost:8080/question/create 로 이동하게 됩니다. 질문 등록 페이지 다음으로 질문을 등록할 수 있는 페이지인 question_form.html 파일을 templates 폴더 안에 만들어줍니다. 앞에서 만든 layout.html 을 상속해서 작성을 합니다. 질문등록 제목 내용 th:action="@{/question/create}" 을 통해 버튼을 클릭하면 post 방식..

앞에서 만든 question_list.html 과 question_detail.html 은 body 태그의 바깥 부분은 동일한 내용입니다. 이후 다른 html 파일을 만들게 되더라도 body 태그의 바깥 부분은 계속 동일하기 때문에 템플릿을 상속받아 기본틀을 만들고 그 안에 내용을 채우는 방식으로 진행하겠습니다. 시작 제일 먼저 thymeleaf 의 layout 기능을 사용하기 위해 pom.xml 파일에 라이브러리를 추가합니다. nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 기본틀 다음과 같이 기본틀이 되는 layout.html 파일을 templates 폴더 안에 생성합니다. 위 코드에서 body 태그 안의 layout:fragment 부분에 기존에 작성된 내용들..

이번 포스트에서는 앞에서 만든 question_list.html 과 question_detail.html 을 bootstrap 을 적용해 꾸며보겠습니다. 시작 bootstap 을 적용하기 위해서는 html 파일의 안에 다음과 같은 문구를 추가합니다. bootstrap 은 각 태그에 클래스 속성에 값을 줘서 css 설정을 할 수 있습니다. 1. question_list.html 제목 작성일시 2. quesiton_detail.html question_list.html question_list 의 테이블에 번호라는 열을 추가해서 각 질문마다 번호를 표시할 수 있도록 하였고, thymeleaf 의 유틸리티인 #temporals.format 을 사용해서 날짜 표시 형식을 지정했습니다. 번호 제목 작성일시 브라우..