스프링[Spring] 게시판 만들기_04

728x90

이제는 본격적으로, 화면에 대한 템플릿을 적용시켜 보기로 한다.

템플릿 처리

TEMPLATED

A collection of 867 Creative Commons-licensed CSS, HTML5 and Responsive site templates created by Cherry, Doni, AJ, and co.

templated.co

또는 https://www.free-css.com/free-css-templates

Download 3069 Free Website Templates - CSS & HTML | Free CSS

www.free-css.com

등 구글에서 template를 검색 후 무료 템플릿을 다운받는다.

나 같은 경우는 https://colorlib.com/wp/template/fixed-header-table/

Fixed Header Table - Free HTML/CSS Table Template 2020 - Colorlib

Thank you for visiting Colorlib and reading this article! We highly appreciate it! Now you might want to learn how to make a website using our free WordPress themes.

colorlib.com

에서 다운을 받았다.

다운받은 압축파일의 index.html과 같은 파일을 실행시켜보면, 여러 모양의 템플릿이 나오는데 이 중에서 나는 검은색 화면의 템플릿을 선택하기로 했다.

폴더 내의 index.html파일을 이클립스에 적용시킨 뒤, 어떤 부분을 수정해야 하는지 알아보자.

body 부분을 통해 코드를 통해 사용하고자 했던 부분인 검은색 템플릿이 ver3라는 것을 확인할 수 있다. (순서대로 ver1,ver2....)

따라서, ver3를 제외한 나머지 테이블들을 지워준 뒤 이 코드를

전에 만든 list.jsp의 <!DOCTYPE html> 아래 부분에 옮겨준다.

이후, 템플릿을 다운받은 파일에서 index.html을 제외한 나머지 파일(css,fonts,images,js,vendor)들을

webapp->resources 파일에 아래와 같이 추가해준다.

이제 이 파일들이 적용되도록 하기 위해서는 경로를 수정해줘야 하는데

이는 servlet-context.xml의 resource->mapping을 통해 "/resources/**"로 매핑된다는 것을 알 수 있다.

따라서, 아까 list.jsp의 head 링크의 href 속성과 script의 src 속성을 아래와 같이 변경해준다.

이제 속성값을 수정하도록 하자.

list.jsp의 body 부분에서 테이블을 하나만 두고 나머지는 지우도록 하자.

그리고 아까와 마찬가지로 <c:forEach>문으로 테이블을 감싸주고 <c:out> 속성으로 아래와 같이 값을 지정해준다.

이제, Run as->Run on server로 실행시켜 보면

우리가 정한 템플릿에 DB에서 저장된 데이터들이 아래와 같이 적용되는 것을 확인할 수 있다.

데이터의 추가도 가능한지 sqldeveloper에서 데이터를 추가해서 구현해보자.

INSERT INTO MYBOARD VALUES('스프링부트','승','사미라',10/2/3);
INSERT INTO MYBOARD VALUES('카카오톡','승','세트',10/2/1);
INSERT INTO MYBOARD VALUES('네이버','패','카르마',3/4/7);

INSERT INTO MYBOARD VALUES ('스치면부산행','패','엘리스','3/6/6',27);
INSERT INTO MYBOARD VALUES ('스프링','패','드레이븐','0/7/3',23);
INSERT INTO MYBOARD VALUES ('목마탄나그네','승','에코','10/3/5',71);

INSERT INTO MYBOARD VALUES ('JustLikeThatKR','승','카서스','7/0/3',65);
INSERT INTO MYBOARD VALUES ('그랩의신','패','블리츠크랭크','0/3/12',43);
INSERT INTO MYBOARD VALUES ('아직보여줄게','승','아지르','12/2/4',55);

INSERT INTO MYBOARD VALUES ('DWG ShowMaker','패','사일러스','5/6/0',50);
INSERT INTO MYBOARD VALUES ('급할수록돌자','승','아펠리오스','7/2/5',57);
INSERT INTO MYBOARD VALUES ('Destiny','승','쓰레쉬','3/5/14',39);

INSERT INTO MYBOARD VALUES ('DRX keria','승','세트','2/5/13',53);
INSERT INTO MYBOARD VALUES ('꽃툭티','패','티모','3/3/2',27);
INSERT INTO MYBOARD VALUES('Tarzan','승','카직스','13/3/4',65);

INSERT INTO MYBOARD VALUES('The shy','승','칼리스타','10/5/6',76);
INSERT INTO MYBOARD VALUES('편하게드루와','패','이즈리얼','10/7/9',53);
INSERT INTO MYBOARD VALUES('Heart','승','레넥톤','7/2/6',37);

커밋후, F5를 눌러 다시 실행시켜 보면 아래처럼 데이터의 추가도 가능하다는 것을 확인할 수 있다.

728x90

'언어 > Spring' 카테고리의 다른 글

스프링[Spring] 게시판 만들기_06 (0)	2020.09.14
스프링[Spring] 게시판 만들기_05 (0)	2020.07.15
스프링[Spring] 게시판 만들기_03 (0)	2020.07.07
스프링[Spring] 게시판 만들기_02 (0)	2020.07.06
스프링[Spring] 게시판 만들기_01 (0)	2020.06.24

룰루랄라