WebSpringBoot

5. SpringBoot 게시판 만들기-1

MariaDB, SpringBoot, Web

게시판은 웹개발에서 필요한 기본적인 내용이 대부분 들어가 있다. 데이터 조회, 입력, 수정, 삭제뿐만 아니라 파일 업로드 및 다운로드등 웹 프로젝트에서 필요한 다양한 기능을 포함하기 때문이다.

게시판 만들기를 통해서 스프링 MVC 구조를 이해하고 이를 토대로 프로젝트를 진행하기에 적합한 예제이다.

DB 구성하기

일단 본격적으로 게시판을 만들기 위해서 DB를 구성해야 한다.

지난 포스트에서 설치한 DBeaver를 통해서 DB를 구성한다.

Databases에서 Create New DataBase를 선택한다.

Create New DataBase를 선택

database name은 t_board로 지정하고 DB를 생성한다.

그다음엔 F3을 누르거나 메뉴의 SQL편집기 > SQL 편집기를 선택한다.

SQL 편집기에 아래와 같이 입력을 한다.

1
2
3
4
5
6
7
8
9
10
11
CREATE TABLE t_board (
    board_idx INT(11) auto_increment NOT NULL COMMENT '글 번호' primary key,
    title VARCHAR(300) NOT NULL COMMENT '제목',
    contents TEXT NOT NULL COMMENT '내용',
    hiit_cnt SMALLINT(10) DEFAULT 0 NOT NULL COMMENT '조회수',
    created_datetime DATETIME NOT NULL COMMENT '작성시간',
    creator_id VARCHAR(50) NOT NULL COMMENT '작성자',
    updated_datetime varchar(100) DEFAULT NULL NULL COMMENT '수정시간',
    updater_id VARCHAR(50) DEFAULT NULL NULL COMMENT '수정자',
    deleted_yn CHAR(1) DEFAULT 'N' NOT NULL COMMENT '삭제여부'
);

작성후 우클릭 후 실행을 한다.

아래와 같이 테이블이 생성된 것을 볼 수 있다.

테이블이 생성

스타일시트(css) 추가하기

화면을 깔끔하게 보여주기 위해서 css를 추가한다.

여기서는 css의 문법을 설명하는 것이 아니기 때문에 미리 작성된 css를 스프링부트 프로젝트에 추가하는 것을 중점으로 설명하겠다.

src/main/resources 폴더 밑의 static 폴더에 css폴더를 생성하고 style.css 파일을 생성한다.

style.css 파일을 생성

그 후 아래의 내용을 복사해 넣는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@CHARSET "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);

html{overflow:scorll;}
html, body, div, h1, h2, a, form, table, caption, thead, tbody, tr, th, td, submit {
    margin:0; outline:0; border:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;
}
body {
    font-size:0.875em; line-height:1.5; color:#666; -webkit-text-size-adjust:none; min-width:320px;
    font-family:'NanumGothic','나눔고딕',dotum, "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serief;
}
h1, h2, h3 {font-size: 1.5em;}
p{margin:0; padding:0;}
ul{margin:0;}
a:link, a:visited {text-decoration:none; color: #656565;}
input{vertical-align:middle;}
input:focus {outline:0;}
caption {display:none; width:0; height:0; margin-top:-1px; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}

.container {max-width:1024px; margin:30px auto;}
.board_list {width:100%; border-top:2px solid #252525; border-bottom:1px solid #ccc; margin:15px 0; border-collapse: collapse;}
.board_list thead th:first-child {background-image:none;}
.board_list thead th {border-bottom:1px solid #ccc; padding:13px 0; color:#3b3a3a; text-align: center; vertical-align:middle;}
.board_list tbody td {border-top:1px solid #ccc; padding:13px 0; text-align:center; vertical-align:middle;}
.board_list tbody tr:first-child td {border:none;}
.board_list tbody tr:hover{background:#ffff99;}
.board_list tbody td.title {text-align:left; padding-left:20px;}
.board_list tbody td a {display:inline-block}

.board_detail {width:100%; border-top:2px solid #252525; border-bottom:1px solid #ccc; border-collapse:collapse;}
.board_detail tbody input {width:100%;}
.board_detail tbody th {text-align:left; background:#f7f7f7; color:#3b3a3a; vertical-align:middle; text-align: center;}
.board_detail tbody th, .board_detail tbody td {padding:10px 15px; border-bottom:1px solid #ccc;}
.board_detail tbody textarea {width:100%; min-height:170px}

.btn {margin:5px; padding:5px 11px; color:#fff !important; display:inline-block; background-color:#7D7F82; vertical-align:middle; border-radius:0 !important; cursor:pointer; border:none;}
.btn:hover {background: #6b9ab8;}

.file_list a {display:inherit !important;}

스프링부트 프로젝트에서는 css, 자바스크립트, 이미지등 정적 리소스가 static 폴더에 들어간다.

공유하기