-
(국비교육) 50 - 이클립스 내부에서 DB 보기 + 스프링부트 + 부트스트랩 이용하기 + 모달 + 룸북개발/국비교육 2023. 8. 9. 17:27
■ 이클립스 내부에서 마리아 db 정보 보기
마리아 디비가 없어서 mysql 로 검색해도 나온다.
내가 사용하는 5.1 버전 클릭
JAR 에서 마리아 디비 넣어주기
드라이버 설정해주기
다음과 같이 연결된다.
명령주고 명령값 확인 가능
■ 이클립스 내부에서 db DBeaver 정보보기
위에는 서버명, 밑에는 아이디 적어준다.
그대로 다운로드
연결확인
■ 스프링부트 만들기
첫 인덱스 getmapping 처리하기
하위 경로에 있는 jsp 를 읽어들인다는 뜻이다.
다음과 같이 설정한다.
밑에 주석처리는 위에 runtimeOnly 와 내용 동일하기 때문에 주석처리한다.
plugins { id 'java' id 'org.springframework.boot' version '2.7.14' id 'io.spring.dependency-management' version '1.0.15.RELEASE' } group = 'com.example' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '11' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.3.1' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'org.mariadb.jdbc:mariadb-java-client' //실행할때만 필요 밑에 주석은 해당줄이 있기 때문에 주석처리 annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:2.3.1' implementation 'javax.servlet:jstl:1.2'//jsp implementation "org.apache.tomcat.embed:tomcat-embed-jasper"//tomcat사용하기 //implementation 'org.mariadb.jdbc:mariadb-java-client:3.0.8'//DB implementation 'org.springframework.boot:spring-boot-starter-tomcat' //runtime시에만 필요, 실행환경에서 제공되는 dependency를 설정 } tasks.named('test') { useJUnitPlatform() }
폴더 생성하고 index.jsp 만들기
다음과 같이 출력된다.
해당 버튼을 누르면 웹브라우저 바로 열린다.
■ 부트스트랩 이용하기
압축풀고 해당 3개 파일 static 밑에 넣기
소스복사 후 index.jsp 에 복붙하기
디바이스 크기 1로 설정
그러면 웹 앱 모두 동일한 크기로 설정 가능하다.
css 바로 적용할때 import
모달: 누르면 화면창 띄운다.
부트스트랩에서는 js 맨 나중에 로딩해줘서
맨 하단에 띄우는 것을 지켜준다.
https://www.manualfactory.net/17116#httpsstartbootstrapcom
무료 Bootstrap 테마(theme), 템플릿(template) 다운로드 사이트
Bootstrap은 반응형 웹디자인을 기본으로 하고, 폼 디자인, 메뉴바, 드롭다운 등 자주 사용되지만 손이 많이 가는 요소들의 디자인과 기능을 포함하고 있어 쉽게 사이트를 제작할 수 있다. 하지만,
www.manualfactory.net
그대로 css board 에 가져온다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Board</title> <!-- Core theme CSS (includes Bootstrap)--> <link href="css/styles.css" rel="stylesheet" /> </head> <body> <body id="page-top"> <!-- Navigation--> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="..." /></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fas fa-bars ms-1"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0"> <li class="nav-item"><a class="nav-link" href="./board">board</a></li> <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li> <li class="nav-item"><a class="nav-link" href="#about">About</a></li> <li class="nav-item"><a class="nav-link" href="#team">Team</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> <!-- Masthead--> <header class="masthead"> <div class="container"> <h1>Board</h1> <table> <tbody> <tr> <th>번호</th> <th>제목</th> <th>날짜</th> <th>글쓴이</th> <th>읽음</th> </tr> </tbody> <tbody> <tr> <td>1</td> <td>제목</td> <td>2023-08-09</td> <td>홍길동</td> <td>12</td> </tr> </tbody> </table> </div> </header> <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <script src="js/scripts.js"></script> <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> <!-- * * SB Forms JS * *--> <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *--> <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> </body> </html>
다음과 같이 보드를 만들어준다.
table 넣으면 table 형태가 나온다.
최소로 나타내면서 정수로 많이 나타낼 수 있는 숫자가 12여서 12칼럼으로 끊는다.
https://getbootstrap.kr/docs/5.1/content/tables/
테이블
Bootstrap을 사용한 테이블의 opt-in 스타일에 대한 문서 및 예시 (JavaScript 플러그인에서 널리 사용됨)입니다.
getbootstrap.kr
기존 부트스트랩에 row 효과 적용돼있어서 row1 으로 설정해서 효과를 준다.
버튼도 만들어준다.
변수 var=row2 로 foreach 로 번호 숫자를 1부터 10까지 뽑아준다.
추후에는 row 로 바꾼다.
model 처리해준다.
이를 위해 서비스와 dao 도 만들어준다.
맵퍼 사용 위해 interface 로 바꿔준다.
리스트에 담아올 것이다.
롬복 사용하면 게터세터 다음과 같이 사용 가능하다.
게터 세터 생성자 스트링으로 만들어지는 기능을 합친 것이 data 이다.
https://www.daleseo.com/lombok-popular-annotations/
[자바] 자주 사용되는 Lombok 어노테이션
Engineering Blog by Dale Seo
www.daleseo.com
XML Editor 로 열어준다.
namespace 이름은 DAO 패키지 이름과 파일 이름을 붙이면 된다.
id 는 우리가 쓰고자 하는 메서드와 이름을 일치시켜준다.
resultType 은 우리가 List안에 BoardDTO 로 담을 것이기 때문에 해당 파일이 있는 경로를 적어준다.
출력문을 통해 잘 담겼는지 확인한다.
이제 모델에 담긴 값을 addAttribute 를 통해 담아준다.
foreach 구문을 통해서 담겨있는 값을 가져온다.
/head 태그 위에 title style 넣어주고 왼쪽정렬한다.
그리고 배지 태그를 사용해서 다음과 같이 댓글수를 나타낸다.
if 조건을 통해 0 일 경우 뜨지 않게 설정해준다.
0이 사라진 것을 확인할 수 있다.
자바코드를 붙여서 표현하면 페이지 소스보기 해도 깔끔하게 볼 수 있다.
모달 기능이 구현된다.
https://getbootstrap.kr/docs/5.1/components/modal/
모달
Bootstrap JavaScript 모달 플러그인을 사용하여 라이트박스, 사용자 알림 또는 사용자 정의 콘텐츠를 만들 수 있습니다.
getbootstrap.kr
ajax 로 작동시키 것이다.
파일도 넣어준다.
단, 나는 여기서 압축 파일을 넣어서 오류가 났다.
detail 클릭하면 this 는 tr 을 나타낸다.
children 은 td 를 나타내는데 거기서 0번째를 찾는 것이니 보드번호를 가져오게 된다.
'개발 > 국비교육' 카테고리의 다른 글
(국비교육) 52 - 부트스트랩 3 (0) 2023.08.11 (국비교육) 51 - 부트스트랩 2 + 모달 + json설정 + ajax + summernote + 네이버 smarteditor (0) 2023.08.10 (국비교육) 49 - project1 이어하기16 ( 댓글 글자수 세기 + 스프링부트로 만들기) (0) 2023.08.08 (국비교육) 48 - project1 이어하기15 ( 댓글 삭제하기 자바스크립트 + jquery + ajax) + 깃허브 조직 추가 (0) 2023.08.07 (국비교육) 47 - project1 이어하기14 ( (0) 2023.08.04