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

우선 스프링 버전을 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



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




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


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


디자인에는 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에 넣어 보도록 하겠습니다~


수고하셧습니다~



작업 순서


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 로 준비중입니다. ㅎㅎ~











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











암호화 하는 방법은 


스프링에서 처리하는 방법, 데이터베이스에서 처리하는 방법 이렇게 저는 2가지 알고있어요 ㅎㅎ


우선 스프링에서 암호화처리하여 DB에 저장하는 방법은

http://kingchobocoding.tistory.com/4?category=978301 여기에 올려 뒀으니 참고 하세요 


데이터베이스에서 처리하는 방법은 너무 간단해서 따로 버튼을 추가하진 않겠습니다.


기존에 작성하셨던 회원가입에서 signup.xml 에서 mabatis 쿼리만 바꿔주면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
        INSERT INTO tbl_member(
            userid,
            userpwd,
            username,
            email,
            addr1,
            addr2,
            addr3
        )VALUES(
            #{userid},
            #{userpwd},
            #{username},
            #{email},
            #{addr1},
            #{addr2},
            #{addr3}
        )
    </insert>
cs


기존 작성하신 것에서 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
            INSERT INTO tbl_member(
                userid,
                userpwd,
                username,
                email,
                addr1,
                addr2,
                addr3
            )VALUES(
                #{userid},
                PASSWORD(#{userpwd}),
                #{username},
                #{email},
                #{addr1},
                #{addr2},
                #{addr3}
            )
        </insert>
cs


무엇이 바뀌었는지 아시겠나요 ?ㅎㅎㅎ

PASSWORD(#{userpwd}), 이부분입니다.


앞에 password만 적어주시고 괄호로 묶어주시면 

기존 test로 회원가입했을 땐 1234 로 들어갔던것이 

암호화처리되어 입력된것이 보이시죠 ?ㅎㅎㅎ 엄청 간단합니다!!!! 


스프링에서 암호화하는 방법과 , DB에서 암호화 처리하는 방법 어떤것이 보안에 더 좋은지는 잘 모르겠습니다.

지금은 mysql 환경이지만 ORACLE 이나 기타 DBMS에서는 저렇게 해두 되나요 ?? 한번 해봐야겠네요 

안된다면 , 스프링에서 처리해야하니 두가지 다 익히셨으면 하는게 저의 생각입니다. 


물론 화면에서 넘어오는 pwd는 암호화해서 처리해서 VO로 넘어 오는 것이 아니기 때문에 

토큰?? 복호화가 가능한 ? 그렇게 처리해서 넘겨주는 것으로 알고있습니다. 자료를 많이 찾아보긴 했으나 너무 어려워서 ㅠㅠ

후에 다시 시도해보고 올리도록 해보겠습니다. 


다음엔 주소를 다음 API를 써서 처리하는 글을 올리겠습니다. ~

우선 메인 화면에는 각 기능을 구현 할 링크를 만들겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Main</title>
</head>
 
<body>
 
<div class="container">
  <h3>회원가입</h3>
  <a href="/signup/signup.do" class="btn btn-primary">회원가입</a>
</div>
 
</body>
</html>
cs


요런식으로 계속 기능을 만들어 갈 예정입니다.



메인 페이지 매핑  @RequestMapping("/main.do")


1
2
3
4
5
6
7
8
9
10
@Controller
public class MainController {
    
        //메인 GET 공통
        @RequestMapping("/main.do")
        public String main() {
            return "main";
        }
}
 
cs



앞으로 버튼을 계속 추가하여 기능 구현을 하는게 목표입니다.


우선 회원가입을 위해 Table 을 생성하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
create table tbl_member(
    userid varchar(50) not null,
    userpwd varchar(100) not null,
    username varchar(50) not null,
    email varchar(100) not null,
    addr1 varchar(50),
    addr2 varchar(100),
    addr3 varchar(100),
    rdate timestamp default now(),
    updatedate timestamp default now(),
    primary key (userid)
);
cs


SignupVO 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class SignupVO {
 
    private String userid;
    
    private String userpwd;
    
    private String username;
    
    private String email;
    
    private String addr1;
    private String addr2;
    private String addr3;
    
    private Date rdate;
    
    private Date updatedate;
 
    //getter/setter ..
cs


회원가입 폼은 저와 동일하게 만들어주세요 디자인은 따로 다루지 않겠습니다.

이번엔는 아이디 중복확인, 우편번호 찾기는 구현하지 않겠습니다. 

이후에 구현 예정이니 폼은 동일하게 만들어 주세요.


회원가입 Controller

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
@Controller
@RequestMapping("/signup/*")
public class SingupController {
    
    @Inject
    private SignupService signupService;
    
    //SignUp GET
    @RequestMapping(value="/signup.do", method=RequestMethod.GET)
    public void signupGET() {
        
    }
    
    //SignUp PSOT
        @RequestMapping(value="/signup.do", method=RequestMethod.POST)
        public String signupPOST(SignupVO signVO) {
            
            signupService.insertMember(signVO);
            
            return "main";
        }
    
    
    
}
cs


회원가입 Service Interface

1
2
3
4
5
6
7
public interface SignupService {
 
    //회원가입 Service
    public void insertMember(SignupVO signVO);
 
    
}
cs


회원가입 ServiceImpl

1
2
3
4
5
6
7
8
9
10
11
@Service
public class SignupServiceImpl implements SignupService {
 
    @Inject
    private SignupDAO dao;
 
    @Override
    public void insertMember(SignupVO signVO) {
        dao.insertMember(signVO);
    }
}
cs


회원가입 DAO Interface

1
2
3
4
5
public interface SignupDAO {
    //회원가입 DAO
    public void insertMember(SignupVO signVO);
 
}
cs


회원가입 DAOImpl

1
2
3
4
5
6
7
8
9
10
11
12
@Repository
public class SignupDAOImpl implements SignupDAO {
 
    @Inject
    private SqlSession session;
 
    @Override
    public void insertMember(SignupVO signVO) {
        session.insert("insertMember",signVO);
    }
}
 
cs


회원가입 xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
        INSERT INTO tbl_member(
            userid,
            userpwd,
            username,
            email,
            addr1,
            addr2,
            addr3
        )VALUES(
            #{userid},
            #{userpwd},
            #{username},
            #{email},
            #{addr1},
            #{addr2},
            #{addr3}
        )
    </insert>
cs


이렇게 작성하고 내용을 넣겠습니다 . 아직 아이디중복확인 및 비밀번호 확인은 구현하지 않았습니다.~


데이터 베이스를 확인하면 ~ 짠 잘 들어 갔습니다.~


다음에는 비밀번호 암호화하여 저장하기, Daum 주소 API를 사용하여 우편번호 및 주소 찾기를 해보겠습니다.~


스프링 사이트에 가면 여러가지 프로젝트 들이 있다.


그중에서


SPRING SECURITY 를 선택하여 

pom. xml에 dependencies와 repository를 넣고 메이븐 업데이트를 하면 준비가 완료된다.


이제 회원가입시 입력받은 비밀번호를 암호화아여 디비에 잘 저장되는지 확인해보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Override
    public void insert(SignupVO vo) throws Exception {
        
        
        BCryptPasswordEncoder scpwd = new BCryptPasswordEncoder();
        System.out.println(vo.toString());
        //암호화 하기전
          String password = scpwd.encode(vo.getCppwd());
        //암호화 하여 password에 저장
        vo.setCppwd(password);
        System.out.println(vo.toString());
        
        dao.insert(vo);
 
    }
    
cs



우선 암호화 하기전에 입력받은 값을 출력해보고 

scpwd.encode(암호화 할 비밀번호) = password에 저장하고


암호화 처리 된 password를 출력해보시면 암호화가 잘 처리된 것을 확일할 수 있습니다.



vo를 찍어보면 암호하하기전에 입력 받은 값은 qwer 이고

함호화 이후엔 $2a$10$.lCIFYSuP26ioqh4dJHlXeWEaZiyCFSCD1k./D4paL/nbXIzaXmqC  로 입력된걸 확인할 수 있다.


데이터 베이스에 잘 저장되었는지 확인해보면

잘 저장되었다. 


BCryptPasswordEncoder는 복호화가 되지 않으므로 로그인 할때도 암호화한걸 비교해서 로그인 하시면 됩니다.~




+ Recent posts