우선 테스트 도중에 에러가 좀 있어서 버전 변경을 좀 했습니다 ㅠㅠ 저도 아직 초보라 이해좀 부탁드려요 ㅎㅎ

우선 스프링 버전을 4.2.3 버전으로 바꿧어요 ㅠㅠ 컨트롤러를 못찾나 ? 여튼 아시는 분 있으면 조언 부탁드리며

저도 다시 테스트 해볼게요 ㅎㅎ


1
2
3
4
5
6
    <properties>
        <java-version>1.8</java-version>
        <org.springframework-version>4.2.3.RELEASE</org.springframework-version>
        <org.aspectj-version>1.6.10</org.aspectj-version>
        <org.slf4j-version>1.6.6</org.slf4j-version>
    </properties>
cs


Pom.xml 에 추가해줍니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>
        
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.3</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.bgee.log4jdbc-log4j2</groupId>
            <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
            <version>1.16</version>
        </dependency>
cs



root-context.xml


* 계정과 비밀번호는 수정 바랍니다.~


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:jdbc="http://www.springframework.org/schema/jdbc"
    xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
    xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.3.xsd
        http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">
    
    <!-- Root Context: defines shared resources visible to all other web components -->
            <!-- MariaDB JDBC DataSource -->
 
 
  <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy" />
        <property name="url" value="jdbc:log4jdbc:mysql://127.0.0.1:3306/test?useSSL=false" />
        <property name="username" value="root" />
        <property name="password" value="비밀번호" />
    </bean>
    
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <property name="configLocation" value="classpath:/mybatis-config.xml" />
        <property name="mapperLocations" value="classpath:/mappers/**/**/*.xml" />
    </bean>
    
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate" destroy-method="clearCache">
        <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
    </bean>  
 
    <context:component-scan base-package="com"></context:component-scan>
 
 
</beans>
cs


다음과 같이 만들어 줍니다. 




LottoController.Class


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.sjh.rotto;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class LottoController {
    
    @Inject
    private LottoService service;
    
    @RequestMapping("/lotto.do")
    public String lottoInfo(Model model,LottoVO vo) {
        
        List<LottoVO> list = service.lottoInfo(vo);
        model.addAttribute("list", list);
        
        return "lotto/lotto";
    }
}
 
cs



LottoService.Class


1
2
3
4
5
6
7
8
9
10
package com.sjh.rotto;
 
import java.util.List;
 
public interface LottoService {
    
    public List<LottoVO> lottoInfo(LottoVO vo);         //로또 정보 번호 조회
 
}
 
cs


LottoServiceImpl.Class


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.sjh.rotto;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.springframework.stereotype.Service;
 
@Service
public class LottoServiceImpl implements LottoService{
 
    @Inject
    private LottoDAO dao;
 
    @Override
    public List<LottoVO> lottoInfo(LottoVO vo) {
        
        return dao.lottoInfo(vo);
    }
    
    
 
}
 
cs



LottoDAO.Class


1
2
3
4
5
6
7
8
9
package com.sjh.rotto;
 
import java.util.List;
 
public interface LottoDAO {
 
    public List<LottoVO> lottoInfo(LottoVO vo);
}
 
cs


LottoDAOImpl.Class


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.sjh.rotto;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;
 
@Repository
public class LottoDAOImpl implements LottoDAO {
 
    @Inject
    private SqlSession session;
 
    @Override
    public List<LottoVO> lottoInfo(LottoVO vo) {
        
        return session.selectList("lottoList",vo);
    }
 
    
}
 
cs



LottoVO.Class


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
package com.sjh.rotto;
 
public class LottoVO {
 
    private int YEAR;                //년도
    private int TIMES;                //회차
    private String LOTTERY_DAY;        //추첨일
    private String WINNER_1;            //1등 당첨자
    private String WIN_MONEY_1;            //1등 당첨금액
    private String WINNER_2;            //2등 당첨자
    private String WIN_MONEY_2;            //1등 당첨금액
    private String WINNER_3;            //3등 당첨자
    private String WIN_MONEY_3;            //1등 당첨금액
    private String WINNER_4;            //4등 당첨자
    private String WIN_MONEY_4;            //1등 당첨금액
    private String WINNER_5;            //5등 당첨자
    private String WIN_MONEY_5;            //1등 당첨금액
    private String ROTO_NUM1;            //당첨번호1
    private String ROTO_NUM2;            //당첨번호2
    private String ROTO_NUM3;            //당첨번호3
    private String ROTO_NUM4;            //당첨번호4
    private String ROTO_NUM5;            //당첨번호5
    private String ROTO_NUMB;            //보너스번호
    
    public int getYEAR() {
        return YEAR;
    }
    public void setYEAR(int yEAR) {
        YEAR = yEAR;
    }
    public int getTIMES() {
        return TIMES;
    }
    public void setTIMES(int tIMES) {
        TIMES = tIMES;
    }
    public String getLOTTERY_DAY() {
        return LOTTERY_DAY;
    }
    public void setLOTTERY_DAY(String lOTTERY_DAY) {
        LOTTERY_DAY = lOTTERY_DAY;
    }
    public String getWINNER_1() {
        return WINNER_1;
    }
    public void setWINNER_1(String wINNER_1) {
        WINNER_1 = wINNER_1;
    }
    public String getWIN_MONEY_1() {
        return WIN_MONEY_1;
    }
    public void setWIN_MONEY_1(String wIN_MONEY_1) {
        WIN_MONEY_1 = wIN_MONEY_1;
    }
    public String getWINNER_2() {
        return WINNER_2;
    }
    public void setWINNER_2(String wINNER_2) {
        WINNER_2 = wINNER_2;
    }
    public String getWIN_MONEY_2() {
        return WIN_MONEY_2;
    }
    public void setWIN_MONEY_2(String wIN_MONEY_2) {
        WIN_MONEY_2 = wIN_MONEY_2;
    }
    public String getWINNER_3() {
        return WINNER_3;
    }
    public void setWINNER_3(String wINNER_3) {
        WINNER_3 = wINNER_3;
    }
    public String getWIN_MONEY_3() {
        return WIN_MONEY_3;
    }
    public void setWIN_MONEY_3(String wIN_MONEY_3) {
        WIN_MONEY_3 = wIN_MONEY_3;
    }
    public String getWINNER_4() {
        return WINNER_4;
    }
    public void setWINNER_4(String wINNER_4) {
        WINNER_4 = wINNER_4;
    }
    public String getWIN_MONEY_4() {
        return WIN_MONEY_4;
    }
    public void setWIN_MONEY_4(String wIN_MONEY_4) {
        WIN_MONEY_4 = wIN_MONEY_4;
    }
    public String getWINNER_5() {
        return WINNER_5;
    }
    public void setWINNER_5(String wINNER_5) {
        WINNER_5 = wINNER_5;
    }
    public String getWIN_MONEY_5() {
        return WIN_MONEY_5;
    }
    public void setWIN_MONEY_5(String wIN_MONEY_5) {
        WIN_MONEY_5 = wIN_MONEY_5;
    }
    public String getROTO_NUM1() {
        return ROTO_NUM1;
    }
    public void setROTO_NUM1(String rOTO_NUM1) {
        ROTO_NUM1 = rOTO_NUM1;
    }
    public String getROTO_NUM2() {
        return ROTO_NUM2;
    }
    public void setROTO_NUM2(String rOTO_NUM2) {
        ROTO_NUM2 = rOTO_NUM2;
    }
    public String getROTO_NUM3() {
        return ROTO_NUM3;
    }
    public void setROTO_NUM3(String rOTO_NUM3) {
        ROTO_NUM3 = rOTO_NUM3;
    }
    public String getROTO_NUM4() {
        return ROTO_NUM4;
    }
    public void setROTO_NUM4(String rOTO_NUM4) {
        ROTO_NUM4 = rOTO_NUM4;
    }
    public String getROTO_NUM5() {
        return ROTO_NUM5;
    }
    public void setROTO_NUM5(String rOTO_NUM5) {
        ROTO_NUM5 = rOTO_NUM5;
    }
    public String getROTO_NUMB() {
        return ROTO_NUMB;
    }
    public void setROTO_NUMB(String rOTO_NUMB) {
        ROTO_NUMB = rOTO_NUMB;
    }
 
    
    
}
cs




mybatis 설정 부분입니다. 다음과 같이 만들어주세요





lotto.xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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.sjh.rotto">
 
    <select id="lottoList"  resultType="com.sjh.rotto.LottoVO">
    
        select * from tbl_lotto
    
    </select>
    
    
</mapper>
cs


log4jdbc.log4j2.properties


1
log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
cs


logback.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="UTF-8"?>
 
<configuration>
    <include resource="org/springframework/boot/logging/logback/base.xml"/>
    <!-- log4jdbc-log4j2 -->
    <logger name="jdbc.sqlonly" level="DEBUG"/>
    <logger name="jdbc.sqltiming" level="INFO"/>
    <logger name="jdbc.audit" level="WARN"/>
    <logger name="jdbc.resultset" level="OFF"/>
    <logger name="jdbc.resultsettable" level="ERROR"/>
    <logger name="jdbc.connection" level="INFO"/>
</configuration>
cs


mybatis-config.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
    PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-config.dtd">
 
 
 
<configuration>
 
    <typeAliases>        
         <package name="com.sjh.rotto"/>
    </typeAliases>
</configuration>
cs


이제 화면에서 넘어온 값을 뿌려주기만 하면 됩니다,


상단에 JSTL 추가하시고 테이블에 forEach문을 이용해서 출력해주면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<%@include file="../include/meta.jsp" %>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <%@include file="../include/navbar.jsp" %>
  <!-- Main Sidebar Container -->
  <%@include file="../include/sidebar.jsp" %>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>First_Project</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">First_Project</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
 
    <!-- Main content -->
    <section class="content">
 
      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Title</h3>
 
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
              <class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
             <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>년도</th>
                                            <th>회차</th>
                                            <th>추첨일</th>
                                            <th>1등당첨자</th>
                                            <th>1등당첨금액</th>
                                            <th>2등당첨자</th>
                                            <th>2등당첨금액</th>
                                            <th>3등당첨자</th>
                                            <th>3등당첨금액</th>
                                            <th>4등당첨자</th>
                                            <th>4등당첨금액</th>
                                            <th>5등당첨자</th>
                                            <th>5등당첨금액</th>
                                            <th>당첨번호1</th>
                                            <th>당첨번호2</th>
                                            <th>당첨번호3</th>
                                            <th>당첨번호4</th>
                                            <th>당첨번호5</th>
                                            <th>보너스번호</th>    
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${list}" var="list">
                                        <tr>
                                            <td>${list.YEAR}</td>
                                            <td>${list.TIMES}</td>
                                            <td>${list.LOTTERY_DAY}</td>
                                            <td>${list.WINNER_1}</td>
                                            <td>${list.WIN_MONEY_1}</td>
                                            <td>${list.WINNER_2}</td>
                                            <td>${list.WIN_MONEY_2}</td>
                                            <td>${list.WINNER_3}</td>
                                            <td>${list.WIN_MONEY_3}</td>
                                            <td>${list.WINNER_4}</td>
                                            <td>${list.WIN_MONEY_4}</td>
                                            <td>${list.WINNER_5}</td>
                                            <td>${list.WIN_MONEY_5}</td>
                                            <td>${list.ROTO_NUM1}</td>
                                            <td>${list.ROTO_NUM2}</td>
                                            <td>${list.ROTO_NUM3}</td>
                                            <td>${list.ROTO_NUM4}</td>
                                            <td>${list.ROTO_NUM5}</td>
                                            <td>${list.ROTO_NUMB}</td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          Footer
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
 
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  
</div>
<!-- ./wrapper -->
<%@include file="../include/footer.jsp" %>
<!-- jQuery -->
<%@include file="../include/script.jsp" %>
</body>
</html>
 
cs



다음과 같이 출력되면 성공!!!




저도 테스트를 하면서 진행다보니 설명을 제대로 정리하지 못했네요 ㅠㅠ 


스프링 카테고리에 정리해둔게 있으니 참고 바랍니다. 



로또 사이트에 들어가서 당첨내역 - 엑셀 다운로드를 합니다.


그리고 다음과 같이 CSV 파일로 다시 저장해주세요 파일을 올릴테니 다운받아서 쓰세요 ~

테이블 양식에 맞게 약간 수정하였습니다. 


tbl_lotto.csv


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
CREATE TABLE tbl_lotto
(
    `PK`           INT            NOT NULL    AUTO_INCREMENT COMMENT 'PK'
    `YEAR`         INT            NULL        COMMENT '년도'
    `TIMES`        INT            NULL        COMMENT '회차'
    `LOTTERY_DAY`  VARCHAR(45)    NULL        COMMENT '추첨일'
    `WINNER_1`     VARCHAR(45)    NULL        COMMENT '1등당첨자'
    `WIN_MONEY_1`  VARCHAR(45)    NULL        COMMENT '1등당첨금액'
    `WINNER_2`     VARCHAR(45)    NULL        COMMENT '2등당첨자'
    `WIN_MONEY_2`  VARCHAR(45)    NULL        COMMENT '2등당첨금액'
    `WINNER_3`     VARCHAR(45)    NULL        COMMENT '3등당첨자'
    `WIN_MONEY_3`  VARCHAR(45)    NULL        COMMENT '1등당첨금액'
    `WINNER_4`     VARCHAR(45)    NULL        COMMENT '4등당첨자'
    `WIN_MONEY_4`  VARCHAR(45)    NULL        COMMENT '1등당첨금액'
    `WINNER_5`     VARCHAR(45)    NULL        COMMENT '5등당첨자'
    `WIN_MONEY_5`  VARCHAR(45)    NULL        COMMENT '5등당첨금액'
    `ROTO_NUM1`    VARCHAR(45)    NULL        COMMENT '당첨번호1'
    `ROTO_NUM2`    VARCHAR(45)    NULL        COMMENT '당첨번호2'
    `ROTO_NUM3`    VARCHAR(45)    NULL        COMMENT '당첨번호3'
    `ROTO_NUM4`    VARCHAR(45)    NULL        COMMENT '당첨번호4'
    `ROTO_NUM5`    VARCHAR(45)    NULL        COMMENT '당첨번호5'
    `ROTO_NUM6`    VARCHAR(45)    NULL        COMMENT '당첨번호6'
    `ROTO_NUMB`    VARCHAR(45)    NULL        COMMENT '보너스번호'
    PRIMARY KEY (PK)
);
cs


다음과 같이 테이블을 생성합니다.



heidiSQL 에서  도구 -> CSV 파일 가져오기




파일을 선택하고 


PK는 체크를해제해주세요  하고 가져오기를 누르면 




다음과 같이 잘 들어가집니다. 


이제 스프링에서 데이터베이스 연결테스트를 하고 mybatis 세팅을 해서 잘 출력 되는지 테스트 하겠습니다.~ 


수고하셨습니다. 




디자인에는 Bootstrap을 사용하겠습니다.


구글에 bootstrap admin free template 무료 템플릿이 많이 있습니다. 


저는 AdminLTE 에서 제공하는 템플릿을 사용하겠습니다.


https://adminlte.io/   에서 템플릿을 다운로드 받습니다.




오늘 마우스를 두고와서 ㅠㅠㅠ 더 안이쁘네요 ㅠㅠ 죄송죄송


Source.code.zip 파일을 다운받으시면 됩니다.

다운로드 받으셔서 압축을 풀면 다음과 같은 여러개의 파일이 있는데 그중에서 


이렇게 3개의 파일만 사용 할것이니 우선 알고 계시면 되겠습니다.~


우선 공통으로 사용되는 부분부터 결정해야겠죠 저는 다음과 같이 나눴습니다.



1. 네비게이션 바 (navBar) 

2. 사이드 바 (sideBar)

3. 섹션 컨테이너 

4. 헤더

5. 라인

6. 푸터


이제부터 명칭은 다음과 같이 정의하겠습니다.


제가 계속적으로 수정할 부분은 4번 5번  헤더와 라인입니다. 나머지는 공통부분입니다. 



스프링으로 넘어와 보겠습니다.



servlet-context.xml 에서


1
<resources mapping="/resources/**" location="/resources/" />
cs


이 부분을 보시면 /resources/ 경로까지 설정 되어 있는걸 볼 수 있습니다. 이제 템플릿 다운 받은 것에서
dist , pages, plugins  resource에 복사해서 붙여 넣습니다. 

이제 JSP 파일을 하나 만들어 봅니다. 우선 만드시기 전에 

servlet-context.xml 에서



1
2
3
4
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>
cs


 <beans:property name="prefix" value="/WEB-INF/views/" />
 <beans:property name="suffix" value=".jsp" />


여기를 보시면 느낌이 오시나요 ? 

WEB-INF 아래 views 아래 jsp를 읽고 있네요  저는 views폴더 안에 lotto폴더를 하나 만들어서 lotto.JSP 파일을 만들겠습

니다.



다음과 같이 만들면 Encoding 타입이  EUC-KR 이네요 UTF-8로 바꾸겠습니다.  하나하나 바꾸셔도 되지만

 설정에서 바꾸겟습니다.



windows - preferences - web - JSP Files




다음과 같이 만들어주세요 



딱 보시면 알겠지만 공통으로 쓰이는 부분을 뺀 것입니다.

물론 장점은 한번만 수정하면 ~ 다 적용이 된다는 거겠죠 ?


우선 blank.html의 전체를 복사해서 lotto.jsp 파일을 수정해 넣습니다.




이제 각가 중복으로 사용하는 부분을 Ctrl + X 해서 잘라내서 include에 만들어 둔 곳에 복사해서 넣겠습니다.


꼭 직접 하시기 바랍니다~ 한번만 해보면 다음부터는 어떤 템플릿을 가져와도 나눌 수 있습니다. 꼭 직접하는게 중요해요


mata.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
    
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>프로젝트</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="resources/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
cs



위에서 설명했 듯  CSS 파일은 resources 폴더 안에 있습니다, 그래서 요롷게 수정해주셔야합니다.

<link rel="stylesheet" href="resources/dist/css/adminlte.min.css">




navbar.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <class="nav-link" data-widget="pushmenu" href="#"><class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="../../index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
 
    <!-- SEARCH FORM -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <class="fa fa-search"></i>
          </button>
        </div>
      </div>
    </form>
 
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <class="nav-link" data-toggle="dropdown" href="#">
          <class="fa fa-comments-o"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"><class="fa fa-star"></i></span>
                </h3>
                <class="text-sm">Call me whenever you can...</p>
                <class="text-sm text-muted"><class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><class="fa fa-star"></i></span>
                </h3>
                <class="text-sm">I got your message bro</p>
                <class="text-sm text-muted"><class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><class="fa fa-star"></i></span>
                </h3>
                <class="text-sm">The subject goes here</p>
                <class="text-sm text-muted"><class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <class="nav-link" data-toggle="dropdown" href="#">
          <class="fa fa-bell-o"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">15 Notifications</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <class="fa fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <class="fa fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <class="fa fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2 days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
          <class="fa fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->
 
cs



sidebar.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="../../index3.html" class="brand-link">
      <img src="/resources/dist/img/AdminLTELogo.png"
           alt="AdminLTE Logo"
           class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">SJH_PROJ</span>
    </a>
 
    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        
          <li class="nav-item">
            <a href="../widgets.html" class="nav-link">
              <class="nav-icon fa fa-th"></i>
              <p>로또 프로젝트 </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
 
 
cs



footer.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 3.0.0-alpha
    </div>
    <strong>Copyright &copy; 2014-2018 <a href="localhost:7080/lotto.do">sjhProject.io</a>.</strong> All rights
    reserved.
  </footer>
 
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
 
cs


script.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<script src="resources/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="resources/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- SlimScroll -->
<script src="resources/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="resources/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="resources/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="resources/dist/js/demo.js"></script>
cs


여기또한 경로를 다 수정해주셔야 합니다.~~~~


이렇게 다 나누고 나면 

lotto.jsp 에는 요렇게 앞으로 수정 할 Section 부분만 남습니다.  이제 공통으로 쓰기위해 나둬는 부분을 include 시켜줘야겠죠 ㅎㅎ


Ctrl + X 해서 도려낸 부분에 include를 시켜줍니다.  경로는 상대경로로 지금 현재 lotto.jsp 보다 위에 include폴더 부터 써주시면 됩니다 . 

<%@include file="../include/meta.jsp" %>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@include file="../include/meta.jsp" %>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <%@include file="../include/navbar.jsp" %>
  <!-- Main Sidebar Container -->
  <%@include file="../include/sidebar.jsp" %>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Blank Page</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Blank Page</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
 
    <!-- Main content -->
    <section class="content">
 
      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Title</h3>
 
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
              <class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
          Start creating your amazing application!
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          Footer
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
 
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  
</div>
<!-- ./wrapper -->
<%@include file="../include/footer.jsp" %>
<!-- jQuery -->
<%@include file="../include/script.jsp" %>
</body>
</html>
 
cs


이제 모든 디자인 작업을 끝냈으니 화면에 잘 나오나 확인 해야겠죠 ?ㅎㅎㅎ


향후에 ULR을 localhost:7080/~~~~.do 로 호출하기위해서 web.xml을 조금 수정하겠습니다.


 / 요 부분을


1
2
3
4
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
cs


*.do 로 주정해주세요


1
2
3
4
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
cs



이제 컨트롤러를 만들어서 화면을 확인해 보겠습니다,~


다음과 같이 com.sjh.rotto 아래에 lottoController 클래스를 하나 만들고 다음과 같이 작성합니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.sjh.rotto;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class LottoController {
 
    @RequestMapping("/lotto.do")
    public String dashBaord() {
        
        return "lotto/lotto";
    }
}
 
cs



이제보니 패키지를 rotto라고 햇네요 ;;;


작성하셨다면 이제 서버를 돌리고 

화면을 확인해보면


다음과 같이 화면이 나온다면 성공입니다.~

참고로 로고 이미지가 깨질 텐데 ~ 다 이해하셨다면 저와같이 나올 겁니다 ㅎㅎ 숙제!!



수고 많으셨습니다 ~~~ 이제 디자인 작업이 다 끝났으니 다음엔 로또정보를 DB에 넣어 보도록 하겠습니다~


수고하셧습니다~

버전 변경까지 끝내셨다면 이제 톰캣 서버를 올려서 나의 첫 화면을 띄워서 스프링이 잘 설치되었는지 확인하겠습니다.


http://tomcat.apache.org/




다운받으셔서 압축을 푸시면 되겠습니다~


다시 이클립스로 돌아와서



Servers 클릭



Apache 폴더 밑에


조금전에 다운받으신 버전에 맞는걸 선택 하고 Next 

저는 8.0버전을 다운받았습니다. 





확인 누르시고




자신의 프로젝트를 왼쪽에서 오른쪽으로 Add ~ 시켜줍니다. 그리고 피니쉬!!



추가 된 서버 우클릭헤서 Start 를 눌러줍니다. 


혹시 저와 같이 요른 에러가 뜬다면 당황하지 마시고~ 8080 포트를 사용중이여서 다른 포트를 사용해야한다는 에러이기 때문에 



서버를 더블클릭해서 포트번호를 앞자리만 살짝 바꿔주고 저장



그리고 다시 실행해봅니다~


그럼 콘솔창에 주저리 주저리 나오고 


브라우저를 열어서 

다음과 같이 주소창에 localhost:7080/rotto

저는 아까 7080으로 포트를 수정했기때문에 7080/ 이후 경로는 처음에 프로젝트 생성시 com.sjh.rotto 라고 만들어서..


짜잔 ~~  대망의 Hello world !!!!!!

현재시간이 출력되네요  

하지만 한글이 깨지네요 그럼 저것부터 잡고 가볼까요 ?ㅎㅎㅎ






web.xml에서 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>
            org.springframework.web.filter.CharacterEncodingFilter
        </filter-class>
 
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
 
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
cs



요것을 추가하고 서버를 다시 돌리고 브라우저 새로고침을 하면 !!!! 짜잔 ~~ 한글이 안깨지고 잘 나오네요





여기까지 오셧다면 프로젝트의 50%는 오셨습니다. !!! 수고하셧어요 





참고로

스프링을 처음 접해보셨다면 아마도 가장 많이 하는 실수 중 하나가 주소를 잘못 쳐서 나는 에러이지 싶습니다. 



404 에러  해당하는 주소를 찾을 수 없을 때 나는 에러입니다.  난 정말 경로가 이해가 안됨~!!!!! 그렇다면



요부분을 확인해보세요 


프로젝트 생성시 자동으로 저렇게 만들어지는데 우측에 Edit... 을 클릭하셔서 변경하셔도 됩니다. 

/rotto를  /a 로 변경 후 localhost:7080/a 이렇게 치면 화면이 뜰거에요 


   /  요것만 남기고  rotto는 지우겠습니다. 


그럼 앞으로 주소창에  localhost:7080  이렇게만 쳐도 화면이 출력될것입니다. !!!


자 ~ 스프링 설치 및 이제 개발 준비는 되었고 이제 내가 만들 디자인을 만들어 보겠습니다. 

 


이제 스프링 프로젝트를 만들고 개발을 위해 버전을 통일하겠습니다.



Package Explorer에서 마우스 우클릭 


New - Spring Legacy Project 




Project name에 적당한 이름을 넣으시고~


Templates 에서 

Spring MVC Project 를 선택하고 Next~

혹시 처음 프로젝트를 생성하신다면 다운로드 할거냐구 뜨는데 OK 누르시면됩니다,



후에 설정에 있어 중요하니 위와 같은 방식으로 만들어주세요 

위에 설명에 보니 com. 회사이름 . 프로젝트이름  이런식으로 작성하라고 되어있네요 ㅎㅎ

회사가 없느니 저는 com. 이니셜 . 로또  이렇게 만들었습니다.

Finish!!


이제 스프링과 자바 버전변경을 하겠습니다.



우선 이미지 편집 죄송합니다.ㅠㅠㅠ ㅎㅎㅎㅎㅎㅎ


pom.xml 은 Maven의 설정파일을 관리하는 곳입니다. 


다음과 같이 수정해주세요


1
2
3
4
5
6
7
    <properties>
        <java-version>1.8</java-version>
        <org.springframework-version>5.0.7.RELEASE</org.springframework-version>
        <org.aspectj-version>1.6.10</org.aspectj-version>
        <org.slf4j-version>1.6.6</org.slf4j-version>
    </properties>
 
cs


스프링의 버전은 

https://spring.io/projects/spring-framework


요기 들어가시면 버전을 확인 할 수 있습니다.  제 작성 기준에는 5.0.7 버전이 최신이니까 이걸로 해볼까요?ㅎㅎ

이후 충돌관련해서는 저도 모르겠어요 ㅋㅋ그냥 일단 최신버전 ㄱㄱㄱㄱㄱ


Ctrl + S  저장!!


저장을 누르면 수정 된 버전에 맞게 빌드를 시작합니다.


설정에 맞게 


동일하게 1.8로 설정해주고





Apply and Close 눌러 적용하면 버전변경은 우선 끝입니다. ㅎ 후에 또 변경이 있으면 변경하도록 하고


이제 Tomcat 서버를 올려서 화면이 잘 나오는지 확인하겠습니다,~~~


부족하지만 열심히 준비하겠습니다 ㅠㅠㅠㅠ





혼자 작업을 하더라도 스토리보드는 간략하게 정리하고 작업을 하는 것이 좋습니다. 

저처럼 왕초보라면 더더욱 ㅎㅎ 훗날 포트폴리오로 사용하기 위해서라도 ㅎㅎ

무엇보다 저도 아직 실력이 부족해서 ,, 


혹시 팀으로 작업하게 된다면 더더욱 스토리보드의 중요성은 말할 것도 없죠 


간략하게 스토리보드를 작성해볼까요?







이전에 작성 했던 자료입니다. 


자신이 만들고자 하는 프로그램에 화면 단위로 영역별로 기능을 정리해두었습니다.

웹 기획에 대해서는 내용이 많아 추가로 정리해서 올릴게요 ㅠㅠ 죄송죄송


우선 스토리보드를 작성하기위해서는 PPT를 활용하거나 , 목업 툴을 상용할 수 있습니다.



저는 위와같이 로그인하여 로또 번호 확인하기 버튼을 누르면 테이블과 차트를 출력하고 인쇄하기 버튼을 만들것입니다.



추가로 유용한 사이트 소개해드릴게요 ㅎㅎㅎ 


1. MOCKUPWORLD 

https://www.mockupworld.co


2. GRAPHIC BURGER

http://graphicburger.com



3. freepik

http://www.freepik.com/


4. Pixeden

http://www.pixeden.com/


5. Alien Valley

http://alienvalley.com



빨리 코드 소개하고자 ㅠㅠ 내용이 부실한건 이해해주세요 ㅠㅠ 이후 프로젝트에선 좀 더 정리해서 올릴게요 ㅠㅠㅠㅠㅠ



작업 순서


1. 프로젝트 정하기

2. 개발 환경 정하기

3. 프로젝트 스토리보드 작성

4. 스프링 개발환경 구축

5. 디자인 작업하기 Bootstrap

6. DataBase 연동 및 테스트

7. 데이터베이스 모델링

8. 데이터 테이블 출력 

9. 데이터 테이블 차트로 출력

10 테이터 PDF로 출력하기

마무리



프로젝트를 진행하기 앞서 유용한 사이트를 알려드릴까해요 ㅎㅎ

https://trello.com/ 





카드 방식의 플래너 입니다. 저는 위에 작업 순서에따라 나눴습니다. 디테일한 작업을 추가하고 완료되면 완료처리하면서 작업하면 본인의 프로젝트 위치를 정확하게 파악할 수 있습니다. 

프로그램이 아니여도 카드 방식의 플랜이 엄청 좋다고 어디 책에서 봤는데 저도 처음 써보는거라 ㅎㅎ 

이번 프로젝트를 처음으로 저도 처음 써볼까 합니다 ㅎㅎ



1. 프로젝트 정하기


로또 사이트에서 CSV파일 다운로드하여 데이터베이스 저장 후 ,

테이블 형식으로 출력한다. 출력한 내용을 차트로 다양하게 출력해보고

인쇄가 가능하게 pdf로 내보내기 버튼을 만든다.


(아주 간략하게나마 자신이 만들고자 하는 내용을 정리하세요  꼭 중간에 틀어지더라구요 ㅎㅎㅎ)


목표는 간단합니다. 


1. 엑셀 데이터 대량으로 입력하기 

2. 입력한 데이터 웹에 출력하기

3. 차트로 출력하기

4. 인쇄하기



2. 개발환경 정하기


프레임워크

Spring Framework + mybatis


DBMS

mariaDB


디자인

Bootstrap


스크립트

DataTables , ChartJS



* 추가로 Spring Boot , 하이버네이트 , PostgreSQL , Angular 로 준비중입니다. ㅎㅎ~











다음편엔 간략하게 스토리 보드를 작성하겠습니다.











+ Recent posts