springboot-blog

도움 : https://getinthere.tistory.com/17

 

 

[spring boot settings]

Spring Boot 2.7.6

langauge : java

Type : maven

Packaging : jar

Name : blog

Group : com.jig

Java version : 11

Dependency

 - Spring Boot DevTools // 파일 변경하면 자동 재시작 해준다.

 - Lombok

 - Spring Data JPA

 - MySQL Driver

 - Spring Security

          // 보안 관련

 - Spring Web

          // WEB MVC를 사용하여 웹 애플리케이션을 만드는데 필요한 스프링 부투의 기본적인 요소 ( 애노테이션 )

          // 내장형 컨테이너로 톰켓을 기본 탑재함

 

 

Dependency pom.xml 에 직접 추가

      <!-- 추가 라이브러리 시작-->
      <!-- 시큐리티 태그 라이브러리 -->
      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-taglibs</artifactId>
      </dependency>

      <!-- JSP 템플릿 엔진 (기본적으로 템플릿을 지원하지 않아서 jsp 파일을 모아두는 폴더를 인식하기 위함? -->
      <dependency>
         <groupId>org.apache.tomcat.embed</groupId>
         <artifactId>tomcat-embed-jasper</artifactId>
      </dependency>

      <!-- JSTL (jsp 관련)-->
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
      </dependency>
      <!-- 추가 라이브러리 끝-->

 

DB settings

1. MySQL 한글 설정

• my.ini 파일
• MySQL 재시작

[client]
default-character-set=utf8

[mysql]
default-character-set=utf8

[mysqld]
collation-server = utf8_unicode_ci
init-connect='SET NAMES utf8'
init_connect='SET collation_connection = utf8_general_ci'
character-set-server=utf8

2. 한글 설정 확인

show variables like 'c%';

show variables like 'c%';

3. 사용자 생성 및 권한 주기 및 DB 생성

-- 유저이름@아이피주소
create user 'jig123'@'%' identified by 'root';
-- ON DB이름.테이블명
-- TO 유저이름@아이피주소
GRANT ALL PRIVILEGES ON *.* TO 'jig123'@'%';
CREATE DATABASE blog CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;
use blog;

4. MySQL 프로젝트 연결

src/main/resources/application.yml

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/blog?serverTimezone=Asia/Seoul
    username: jig123
    password: root

 

 

Bootstrap 또는 materialzecss 를 사용하여 화면 구성

Bootstrap 4 Tutorial (w3schools.com) 사용

 

 - index.jsp 메인 페이지

   1) https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp - Collapsing The Navigation Bar - Try it Yourself  전체 복사 index.jsp에 붙여넣기

   2) https://www.w3schools.com/bootstrap4/bootstrap_templates.asp - demo - 아래 footer 부분을 개발자도구에서 소스 복사 index.jsp 아래 container에 넣기

   3) https://www.w3schools.com/bootstrap4/bootstrap_cards.asp - Card Images - Example 소스를 index.jsp의 container에 넣기

   4) https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp - Disabled State - Example 소스를 index.jsp의 container에 넣기, class에 justify-content-center 추가

 

- user/joinForm.jsp

  1) https://www.w3schools.com/bootstrap4/bootstrap_forms.asp - Bootstrap 4 Stacked Form - Example 소스를 joinForm.jsp의 container에 넣기

- boad/saveForm.jsp

 1) https://www.w3schools.com/bootstrap4/bootstrap_forms_inputs.asp - Bootstrap Textarea - Example 소스를 saveForm.jsp의 container에 넣기

 2) summernote 추가

  https://summernote.org/getting-started/#for-bootstrap-4  - 

       [1] summernote bootstrap 스크립트 header에 추가

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

       [2] sermmernote 스크립트 추가 

<div class="container">
    <form>
        <div class="form-group">
            <label for="content">Content:</label>
            <textarea class="form-control summernote" rows="5" id="content"></textarea>
        </div>
    <button id="btn-save" class="btn btn-primary">글쓰기 완료</button>
    </form>
</div>

<script>
    $('.summernote').summernote({
        /*placeholder: 'Hello Bootstrap 4',*/
        tabsize: 2,
        height: 300
    });
</script>

 

- board.jsp 댓글

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp - Header and Footer - example 참고

https://www.w3schools.com/bootstrap4/bootstrap_list_groups.asp - Basic List Groups - example 참고

 

 

 

header에 jstl 추가

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>

JSP - Standard Tag Library (JSTL) Tutorial (tutorialspoint.com)