20230809 _[48일차]_01. 스프링부트 DB연결 & 게시판구현
어제 설치했던 전자정부프레임워크 다시 켜보자
db연결을 하려나보다
아래 나사모양 클릭
5.1 클릭하고 JAR List 탭으로
원래있던 jar 파일 remove 해주고 Add JAR 클릭해서
전에 받았던 mariadb 파일을 넣어준다 난 두개나있다
db정보들 입력
아래 Edit Driver Definition
요기에서 수정해줘도 된다.
성공하면 아래의 팝업이 뜬다.
아래처럼 db는 원통모양으로 생긴다 왜인지는 모르지만 예전부터 이랬단다.
이렇게 db에 있던게 다 나온다
SQL Scrapbook 을 열면
바로 쿼리문 작성하고 아래 result에서 결과도 볼 수 있다.
status에는 시간이 얼마나 걸렸는지 나온다. 빠르다~
DBeaver 연결해보자.
accept 하고 finish 누르면 아래의 창이 뜨는데 Select All => Trust Selected
아래부분 클릭해서
DBeaver 가 뜨면 설치 성공
플러그 모양 클릭해서
Driver properties 탭으로 가서 아래 순서대로 클릭
success 팝업이 뜨면 완료!
아래처럼 db데이터들 확인가능
이제 스프링부트로 프로젝트 만들자
spring project 생성
아래에서 검색해서 필요한것들 추가추가
레거시 프로젝트에 비해 쉽다. 어려운 설정들이 없음, 간편설정 (경량화버전) , 톰캣이 내장되어 있다.
아래파일이 구동시켜주는 애다.
패키지 및 컨트롤러 생성
/ 요청에(첫화면) 대해 index로 리턴.
static 폴더가 위의 패키지에 들어가있으면 오류가 난다. 주의**
80포트 사용하겠다고 설정해주기
컨트롤러에서 jsp파일을 이름으로 찾아갈 수 있도록 설정
그외에 db & mybatis 설정
build.gradle에서는 자바버전 변경할 수 있다.
gradle (short)버전은 아래에서 가져오면 된다.
요기는 테스트코드 작성하는 곳
암튼 다시 build.gradle 로 돌아와서 (pdf에 있는) 아래코드들 넣어준다. (복붙해올때 따옴표주의)
근데 mariadb는 이미 들어있어서 추가해준건 주석처리해줬다.
저장만 하는게 아니라 아래처럼 해줘야 적용이 완료된다.
아래처럼 main아래에 폴더 세개 생성
views 아래에 index.jsp 파일 생성
이제 구동을 해보자
근데 스프링이 실행중이면 포트충돌로 실행이 안된다.
이렇게 하고 아래에서 더블클릭해도 브라우저가 뜬다.
짜잔
이제 부트스트랩 사용해보자
무료 Bootstrap 테마(theme), 템플릿(template) 다운로드 사이트 – MANUAL FACTORY
무료 Bootstrap 테마(theme), 템플릿(template) 다운로드 사이트
Bootstrap은 반응형 웹디자인을 기본으로 하고, 폼 디자인, 메뉴바, 드롭다운 등 자주 사용되지만 손이 많이 가는 요소들의 디자인과 기능을 포함하고 있어 쉽게 사이트를 제작할 수 있다. 하지만,
www.manualfactory.net
Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap
Start Bootstrap
startbootstrap.com
체크 두개 해제해줘야 무료버전이 뜬다.
요기에도 무료가 있다.
Bootstrap 5 Archives
A huge open source collection of free bootstrap 5 templates. ThemeWagon offers a great collection of responsive website templates built with Bootstrap 5.
themewagon.com
요기에도 많다.
Bootstrap Templates | Premium & Free Download | BootstrapMade
Bootstrap Templates | Premium & Free Download | BootstrapMade
Top Quality Bootstrap TemplatesDiscover an exceptional collection of Bootstrap Templates & Themes crafted with finesse. Explore our range of free and premium templates, designed to elevate your web presence. Introducing Append - A Modern Business Bootstrap
bootstrapmade.com
맘에드는거 하나 다운로드 => 집파일 풀기 => 안에있는 폴더들 static 폴더에 넣어주고
다운로드 파일의 index 열어서 소스코드 복사 => 내 index 파일에 붙여넣기
그럼 이제 이건 내꺼
아래부분은 초기 넓이 설정 (반응형 웹사이트 만들때 이게 필요) _ 브라우저용 or 모바일용 화면 맞춰서 띄우려면
파비콘 지구본모양..
모든 os에서 똑같은 폰트로 보여지도록 통일시켜주려고 아래처럼 불러온거다.
구글폰트에서 아래 링크를 가져와서 위처럼 넣어주면 폰트 적용
나눔고딕 추가해줌
메뉴바 항상 위에 고정
css페이지 내에서 이동
아래 표시된 href의 #services를 클릭하면 아래의 id가 services인 곳으로 이동한다.
footer _ 페이지의 최하단부분
modal
윗부분에서서 실행시키면 ( id가 portfolioModal1을 찾는다)
아래꺼를 찾아서 띄우는거
아래 이미지를 클릭하면
창이 새로 뜬다.
이제 board를 만들자
게시판을 누르면 board로 가도록 할거다.
BoardController 생성하고
"/board" 요청에 대해 board(jsp화면)를 리턴
board.jsp 파일만들고 실행시켜보면
아래처럼 잘 뜬다.
index.jsp에서 필요한 코드들 가져오자
메뉴바랑 css랑
부트스트랩부분 가져오고
아래부분도 가져와서 h1에 게시판이라고 넣어준다.
테이블도 만들어준다.
뭔가 어설픈 게시판이 나온다.
정리는 부트스트랩으로 해보자
테이블 · Bootstrap v5.1 (getbootstrap.kr)
테이블
Bootstrap을 사용한 테이블의 opt-in 스타일에 대한 문서 및 예시 (JavaScript 플러그인에서 널리 사용됨)입니다.
getbootstrap.kr
이미 부트스트랩이 연결되어있기 때문에 table에 지정된 class만 넣어줘도 알아서 가져와서 스타일 지정이 된다.
다른 table 스타일도 추가
호버도 넣어주면
레이아웃 - 그리드 (열너비조정)
한줄을 12칸으로 본다 _ 약수가 많아서 다양한 비율로 설정하기가 용이해서란다.
테이블 행에 비율설정 아래처럼 해주면 이렇게 된다.
버튼도 넣어보자
테이블아래에 버튼 클래스 줘보면
아래처럼 회색 버튼이 생긴다.
forEach문으로 테이블 행 여러개 생성
이제 로고를 클릭하면 index로 가도록 만들어주자
지금은 로고를 클릭하면 아래주소로 설정이 되어있는데
이제 로고를 누르면 메인 페이지로 이동한다.
이제 실제 db게시판을 불러오자
서비스 & DAO 만들고 다들 연결
컨트롤러에서 서비스 연결하고
"/board" 요청에 대해 board.jsp를 반환
서비스에서도 DAO랑 연결하고 Model사용
DAO는 repository & mapper 선언 후 인터페이스로 만든다.
컨트롤러에서 dto 사용할거다. 만들자
dto 생성하는데 lombok을 사용해보자.
getter / setter 생성 번거로우면 @Getter / @Setter 로 선언
더 귀찮다면
@Data 로 선언
컨트롤러에서 확인해보면
아래처럼 getter/setter 생성한것과 똑같이 사용할 수 있다.
boardMapper.xml 파일 생성하자
xml파일 다른걸로 열어준다.
DAO랑 연결되도록 namespace 설정 해주고
mapper에서 쿼리문 작성해주면
db의 데이터가 잘 불러와져 콘솔창에 출력된다.
이제 값을 브라우저에 띄워보자
list를 model에 붙여서 jsp로 보낸다.
board.jsp에서 list를 버튼 아래에 출력해보면
아래처럼 잘 불러와진다.
위에서 불러온 list에서 각각의 값들을 뽑아내서
db의 데이터들을 게시판 형태로 불러온다.
댓글이 있을 때만(commebtcount가 0보다 클때만) 댓글수가 보인다.
아래처럼 한줄로 정리해주면
그러면 소스코드를 봤을 떄 아래처럼 공백없이 깔끔해보인다.
띄어쓰기는   (글하고 댓글수 사이에 간격을 줬다.)
글쓰기 버튼 아래에
모달 버튼 추가
아래 코드를 복사해서
헤더아래에 넣어주면 안나온다.
버튼기능도 넣어주면
모달 버튼을 클릭했을때 아래처럼 창이 뜬다.
이제 글을 선택하면 그걸 모달 창으로 불러올건데
row에 detail 클래스를 주고 이 row를 클릭했을때 첫번째 자식요소를 불러오는걸 만들어보자.
jauery로 클릭했을때의 기능 넣어준다.
.children ("td") 로 클래스가 detail인 row의 자식요소를 가져오고
. eq (0) 로 첫번째 요소인 bno를 가져와 팝업으로 띄운다. (괄호안의 숫자는 인덱스를 의미)
이제 713번 글을 클릭하면 bno를 팝업으로 띄운다.
.eq(3)으로 넣어보면 4번째 인덱스에 해당되는 날짜부분이 팝업으로 뜬다.
