스프링부트 + jsp + yml로 게시판 만들기 - (2) 게시판 만들기

먼저 이클립스의 src/main/resource에 application.properties -> application.yml로 파일명을 변경하여 줍니다.

그리고 마리아 디비에서 데이터베이스를 만들고 테이블을 만들어 주어야 합니다.

마리아디비 데이터베이스 생성 및 dbeaver에서 디비 연결 하기

실행 검색에 maria를 치고서 mysql client를 클릭하고 마리아디비를 설치를 할때 설정한 비밀번호를 입력을 하면

마리아디비 관리자로 접속을 할수가 있습니다.

show databases; 를 입력을 해서 데이터 베이스를 볼수가 있습니다.

create database test; 를 만들어 줍니다.

ok 명령이 나오고 실행이 완료가 되면 exit로 빠져 나오고 Dbeaver를 실행을 시킵니다.

실행후에 프로젝트 탭에서 Create > Connection을 클릭을 해서 마리아디비 방금 만든 데이터베이스에 접속을 합니다.

database : test, password : root 입력후 완료를 클릭을 합니다.

이렇게 되면 디비에 접속이 가능 합니다.

이렇게 sql 편집기를 열어서 테이블을 만들고 게시판을 만들면 됩니다.

이제 디비 테이블까지 만들었으니 스프링부트에서 yml에 설정후 게시판을 만들면 됩니다.

application.yml

server:
    port: 18081  

---

server:
    port: 8083

spring:
    config:
      activate:
        on-profile: dev
    
    datasource:
      driver-class-name: net.sf.log4jdbc.sql.jdbcapi.DriverSpy
      url: jdbc:log4jdbc:mariadb://localhost:3306/test
      user-name: root
      password: root

    mvc:
      view:
        prefix: /WEB-INF/jsp/
        suffix: .jsp

 

위와 같이 yml 파일에 작성을 합니다.

webapp > WEB-INF > jsp 이렇게 폴더를 src 밑에 만듭니다.

그리고 po.xml에 밑에 내용을 추가를 합니다. log4j, mubatis 입니다.

<dependencies></dependencies> 이 사이에 추가를 하시면 됩니다.

 

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
 </dependency>

 

<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>

<dependency>
    <groupId>org.bgee.log4jdbc-log4j2</groupId>
    <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
    <version>1.16</version>
</dependency>

 

<dependency>
   <groupId>javax.servlet</groupId>
   <artifactId>jstl</artifactId>
</dependency>

 

추가를 한후에 프로젝트 폴더에서 마우스 오른쪽을 클릭을 하고 Maven > Update Project를 해 줍니다.

Maven Repository는 해당 사이트에서 다운 받을수 있습니다.

https://mvnrepository.com/

 

그다음 log4j, log4jdbc.log4j2.properties 설정 파일을 src/main/resources 폴더 밑에 추가를 해줍니다.

log4j2.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration>
<Configuration status="info" monitorInterval="30">
    <Properties>
        <Property name="LOG_FORMAT">%d{yyyy-MM-dd HH:mm:ss} %p %m%n</Property>
        <Property name="BASE_DIR">D:\tmp</Property>
    </Properties>

    <Appenders>
        <Console name="Console" target="SYSTEM_OUT" follow="true">
            <PatternLayout pattern="${LOG_FORMAT}"/>
        </Console>
        <RollingFile name="File"
                     fileName="${BASE_DIR}/test.log"
                     filePattern="${BASE_DIR}/test.%d{yyyyMMdd}.log">
            <PatternLayout pattern="${LOG_FORMAT}"/>
            <Policies>
                <TimeBasedTriggeringPolicy />
            </Policies>
            <DefaultRolloverStrategy>
                <Delete basePath="${BASE_DIR}">
                    <IfFileName glob="*.log" />
                    <IfLastModified age="30d" />
                </Delete>
            </DefaultRolloverStrategy>
        </RollingFile>
    </Appenders>

    <Loggers>
        <Root level="INFO">
            <AppenderRef ref="Console"/>
            <AppenderRef ref="File" />
        </Root>
    </Loggers>
</Configuration>

 

log4jdbc.log4j2.properties

log4jdbc.drivers=org.mariadb.jdbc.Driver
log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
log4jdbc.dump.sql.maxlinelength=0

 

이제 mybatis 사용을 위해 configuration 파일을 하나 만들어야 합니다.

DatabaseConfig.java 파일로 만들겠습니다.

com.example.demo.config, com.example.demo.mapper 패키지를 만들어 줍니다.

config 패키지 밑에 DatabaseConfig 자바 파일을 만들고 configuration 파일을 작성해 줍니다.

DatabaseConfig.java

package com.example.demo.config;

 

import javax.sql.DataSource;

 

import org.apache.ibatis.session.SqlSessionFactory;

import org.mybatis.spring.SqlSessionFactoryBean;

import org.mybatis.spring.SqlSessionTemplate;

import org.mybatis.spring.annotation.MapperScan;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.core.io.support.PathMatchingResourcePatternResolver;

import org.springframework.transaction.annotation.EnableTransactionManagement;

 

import com.zaxxer.hikari.HikariConfig;

import com.zaxxer.hikari.HikariDataSource;

 

@Configuration

@MapperScan(basePackages= {"com.example.demo.mapper"})

@EnableTransactionManagement

public class DatabaseConfig {

 

    @Autowired

    private DatabaseProperties prop;

 

    @Bean 

    public HikariConfig hikariConfig() {

        final HikariConfig hikariConfig = new HikariConfig();

        hikariConfig.setDriverClassName(prop.getDriverClassName());

        hikariConfig.setJdbcUrl(prop.getUrl());

        hikariConfig.setUsername(prop.getUserName());

        hikariConfig.setPassword(prop.getPassword());

        return hikariConfig;

    }

 

    @Bean(destroyMethod = "close")

    public DataSource dataSource() throws Exception {

        final DataSource dataSource = new HikariDataSource(hikariConfig());

        return dataSource;

    }

 

    @Bean

    public SqlSessionFactory sqlSessionFactory(DataSource datasource) throws Exception{

        final SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean();

        sessionFactory.setDataSource(datasource);

 

        PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();

        sessionFactory.setMapperLocations(resolver.getResources("classpath:mapper/*.xml"));

        return sessionFactory.getObject();

    }

 

    @Bean

    public SqlSessionTemplate sqlSessionTemplate(SqlSessionFactory sqlSessionFactory)throws Exception{

        final SqlSessionTemplate sqlSessionTemplate = new SqlSessionTemplate(sqlSessionFactory);

        return sqlSessionTemplate;

    }

}

 

그리고 DatabaseProperties.java 도 작성해 줍니다.

DatabaseProperties.java

package com.example.demo.config;

 

import org.springframework.boot.context.properties.ConfigurationProperties;

import org.springframework.stereotype.Component;

 

@Component

@ConfigurationProperties("spring.datasource")

public class DatabaseProperties {

    private String driverClassName;

    private String url;

    private String userName;

    private String password;

 

    public String getUrl() {

        return url;

    }

    public void setUrl(String url) {

        this.url = url;

    }

    public String getUserName() {

        return userName;

    }

    public void setUserName(String userName) {

        this.userName = userName;

    }

    public String getPassword() {

        return password;

    }

    public void setPassword(String password) {

        this.password = password;

    }

    public String getDriverClassName() {

        return driverClassName;

    }

    public void setDriverClassName(String driverClassName) {

        this.driverClassName = driverClassName;

    }

 

    @Override

    public String toString() {

        return "DatabaseProperties [driverClassName=" + driverClassName + ", url=" + url + ", userName=" + userName

        + ", password=" + password + "]";

    }

 

}

 

디비에 접속을 해서 게시판에 사용할 테이블을 만들어 줍니다.

CREATE TABLE TEST (

    COLUMN1 VARCHAR(10) COMMENT '컬럼1',

    COLUMN2 VARCHAR(10) COMMENT '컬럼2'

) COMMENT '테스트'

;

 

이제 Controller, service, mapper, vo, xml(mabatis), jsp를 만들어 줍니다.

그림과 같이 해당 패키지 밑에 만들어 줍니다.

TestMapper.java는 인터페이스 파일로 만들어 주어야 합니다.

test.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.demo.mapper.TestMapper">

 

    <select id="list" resultType="com.example.demo.test.TestVo" parameterType="com.example.demo.test.TestVo">

        SELECT 

            COLUMN1,

            COLUMN2

        FROM TEST

    </select>

</mapper>

 

TestMapper.java

package com.example.demo.mapper;

 

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import org.springframework.stereotype.Component;

import com.example.demo.test.TestVo;

 

@Mapper

@Component

public interface TestMapper {

    List<TestVo> list(TestVo vo) throws Exception;

}

 

TestVo.java

public class TestVo {

 

    private String column1;

    private String column2;

    

    public String getColumn1() {

        return column1;

    }

    public void setColumn1(String column1) {

        this.column1 = column1;

    }

    

    public String getColumn2() {

        return column2;

    }

    public void setColumn2(String column2) {

        this.column2 = column2;

    }

}

 

TestService.java

package com.example.demo.test;

 

import java.util.List;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

 

import com.example.demo.mapper.TestMapper;

 

@Service

public class TestService {

 

    @Autowired

    TestMapper mapper;

 

    public List<TestVo> list(TestVo vo) throws Exception {

        return mapper.list(vo);

    }

}

 

TestController.java

package com.example.demo.test;

 

import javax.servlet.http.HttpServletRequest;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

 

@Controller

public class TestController {

 

    @Autowired

    TestService service;

 

    @GetMapping("/test")

    public String test(TestVo vo, HttpServletRequest request) throws Exception { 

 

        request.setAttribute("list", service.list(vo));

 

        return "test"; 

    }

 

}

 

test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

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

<!DOCTYPE html>

<html>

<head>

    <title>Insert title here</title>

</head>

<body>

 

    <table>

        <tr>

            <td>컬럼1</td>

            <td>컬럼2</td>

        </tr>

        <c:forEach items="${list}" var="list">

            <tr>

                <td>${list.column1}</td>

                <td>${list.column2}</td>

            </tr>

        </c:forEach>

    </table>

</body>

</html>

 

이제 이클립스에서 서버를 띄우고 크롬을 띄워서 정상적으로 나오는지 확인을 합니다.

Run As > Spring Boot App 이거를 하면 되는데 이걸 하기 전에 설정을 먼저 해주어야 yml 파일을 읽어 드립니다.

Run As > Run Configurations 를 클릭을 해서 VM Arguments에 해당 내용을 입력을 합니다.

-Dspring.profiles.active=dev

입력후세 apply, run을 차례대로 클릭을 합니다. 최초 띄울때 이렇게 하면 되고, 그다음 부터는

Run as > Spring Boot App 으로 띄우면 정상적으로 띄워 집니다.

 

서버를 띄웠으면 이제 클롬에서 페이지를 띄워 줍니다.

http://localhost:8083/test

이렇게 해서 페이지가 나오면 게시판 리스트 만들기가 완성  되었습니다.

 

그리고 게시판 리스트를 만들었으니 등록을 해서 데이터가 제대로 나오는지 확인을 위해 등록 하는 부분을

만들어 보겠습니다.

test.xml <mapper></mapper> 이 사이에 추가를 해줍니다.

<insert id="insert" parameterType="com.example.demo.test.TestVo">

    INSERT INTO TEST

    VALUES(#{column1}, #{column2})

</insert>

 

TestMapper.java : 해당 내용을 추가 합니다.

int insert(TestVo vo) throws Exception;

TestService.java : 해당 내용을 추가 합니다.

public int insert(TestVo vo) throws Exception {

    return mapper.insert(vo);

}

 

TestController.java : 해당 내용을 추가 합니다.

@PostMapping("/insert")

public String insert(TestVo vo) throws Exception { 

 

    int result = service.insert(vo);

 

    return "redirect:/test"; 

}

 

test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

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

<!DOCTYPE html>

<html>

<head>

    <title>Insert title here</title>

    <script>

        function insert() {

            var frm = document.test;

            frm.method = "post";

            frm.action = "/insert";

            frm.submit();

        }

    </script>

</head>

<body>

 

    <table>

        <tr>

            <td>컬럼1</td>

            <td>컬럼2</td>

        </tr>

        <c:forEach items="${list}" var="list">

            <tr>

                <td>${list.column1}</td>

                <td>${list.column2}</td>

            </tr>

        </c:forEach>

    </table>

    <br><br><br>

 

    <form name="test">

        <table>

            <tr>

                <td>

                    컬럼1 : <input type="text" name="column1" />

                </td>

                <td>

                    컬럼2 : <input type="text" name="column2" />

                </td>

                <td>

                    <button onClick="insert()">등록</button>

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

 

이제 페이지를 띄우고 등록을 하면 리스트에 데이터가 나오는걸 볼수 있습니다.

그리고 소스 수정시에 서버를 내렸다가 올려야 되는 번거로움이 있습니다.

이때는 스프링부트의 devtools를 사용하여 서버를 내리지 않아도 소스가 바로 적용 될수 있게 할수 있습니다.

https://astonysia-story.tistory.com/26

스프링부트 html, css, js, java 파일들 서버 리로드 없이 바로 적용 시키기

 

• ps

그리고 마지막으로 스프링부트에서 css, image, javascript 등을 불러와야 할때가 있습니다.

이경우에는 resources/static 아래에 폴더나 파일을 복사해 붙이고 사용 하시면 됩니다.

스타일 시트

<link rel="stylesheet" href="/css/main.css" type="text/css" />

자바스크립트
<script type="text/javascript" src="/js/Winwheel.js"></script>

이미지

<img src="/img/spin_off.png" alt="Spin" />

 

이런식으로 불러 오면 됩니다.