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

우선 스프링 버전을 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">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <i 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



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




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


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


저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

6. 데이터 베이스 준비하기  (0) 2018.06.23
5. 스프링 디자인 작업하기  (0) 2018.06.22
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20

디자인에는 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">
        <a class="nav-link" data-widget="pushmenu" href="#"><i 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">
            <i 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">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i 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"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted"><i 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"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i 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"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i 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">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i 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">
            <i 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">
            <i 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">
            <i 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">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
          <i 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">
              <i 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">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <i 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에 넣어 보도록 하겠습니다~


수고하셧습니다~

저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

7. 스프링 DB 연동하기  (3) 2018.06.24
6. 데이터 베이스 준비하기  (0) 2018.06.23
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20

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


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  이렇게만 쳐도 화면이 출력될것입니다. !!!


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

 


저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

6. 데이터 베이스 준비하기  (0) 2018.06.23
5. 스프링 디자인 작업하기  (0) 2018.06.22
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20
1. 웹 프로젝트 기획  (0) 2018.06.20

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



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 서버를 올려서 화면이 잘 나오는지 확인하겠습니다,~~~


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





저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

6. 데이터 베이스 준비하기  (0) 2018.06.23
5. 스프링 디자인 작업하기  (0) 2018.06.22
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
2. 스토리보드 작성하기  (0) 2018.06.20
1. 웹 프로젝트 기획  (0) 2018.06.20



작업 순서


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











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











저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

6. 데이터 베이스 준비하기  (0) 2018.06.23
5. 스프링 디자인 작업하기  (0) 2018.06.22
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20

설 연휴가 시작 되었습니다. 모두 새해 복 많이 받으세요 ~~~~~


오늘은 게시판 글 작성하기입니다.


제목, 내용을 입력하고 데이터베이스에 저장하기 입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
CREATE TABLE `tbl_notice` (
    `nno` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'pk',
    `ntitle` VARCHAR(200) NULL DEFAULT NULL COMMENT '제목',
    `ncontent` TEXT NULL DEFAULT NULL COMMENT '내용',
    `nwriter` VARCHAR(50) NULL DEFAULT NULL COMMENT '작성자',
    `nrdate` TIMESTAMP NULL DEFAULT '',
    `nviewcnt` INT(11) NULL DEFAULT '',
    `nisdelete` CHAR(1) NULL DEFAULT 'N' COMMENT '삭제여부',
    PRIMARY KEY (`nno`)
)
cs


테이블을 이렇게 생성해주세요 


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
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                  
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <form id="boardFrm" name="boardFrm" action="/board/boardSave.do" method="post">
                        <div class="row form-group">
                            <label class="col-lg-2">제목</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" id="ntitle" name="ntitle" min="1" max="3">
                             </div>
                        </div>
                           <div class="row form-group">
                           <label class="col-lg-2">내용</label>
                           <div class="col-lg-8">
                               <textarea class="form-control" id="ncontent" name="ncontent"></textarea>
                           </div>
                       </div>
                  </form>
                       <button class="btn btn-outline btn-info" onclick="fn_MoveToUrl('/board/boardSave.do','저장')">저장하기</button>
                          <button class="btn btn-outline btn-primary" onclick="location.href='/board/boardList.do'">리스트</button>
                </div>
            </div>
        </div>
    </div>
</div>
cs



Contoller

1
2
3
4
5
6
7
8
9
10
11
12
    @RequestMapping(value="/boardWrite.do", method=RequestMethod.GET)
    public String boardWrite() {
        return "board/boardwrite";
    }
    
    @RequestMapping(value="/boardSave.do", method=RequestMethod.POST)
     public String boardSave(BoardVO boardVO) {
        
        service.boardSave(boardVO);
        
        return "redirect:boardList.do";
    }
cs


우선 게시판 작성 화면을 띄여줄 boardWrite.do 

저장처리를 할 boardSave.do 


이제 Service/DAO단은 생략하겠습니다.  :D (앞부분 부터 보셨다면 이제 익술해지셨으리라ㅎㅎㅎ)

이후에 게시판 작성과, 수정? 한번에 처리하기 에서 서비스단이랑 DAO단은 다시 다루겠으니

이번엔 생략하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
<insert id="boardSave">
            INSERT INTO tbl_notice(
                ntitle,
                ncontent,
                nwriter
            )VALUES(
                #{ntitle},
                #{ncontent},
                '관리자'
            )
                
</insert>
cs


스크립트 버튼 이벤트

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
<script type="text/javascript">
    function fn_MoveToUrl(url,msg){
        var ntitle = $("#ntitle").val();
        var ncontent = $("#ncontent").val();
        
        if(ntitle.length == 0){
             alert("제목을 입력해 주세요");  
            $("#ntitle").focus();
            return false;
    
        }
        
        if(ncontent.length == 0){
             alert("내용을 입력해 주세요");  
            $("#ncontent").focus();
            return false;
        }
        
        if(msg){
            if(confirm(msg + "하시겠습니까???"))
            $("#boardFrm").submit();
            return;
        }
        location.href=url;
    }
</script>
cs


우선 공백 확인을 하고 

fn_MoveToUrl('/board/boardSave.do','저장')

fn_MoveToUrl 에 Url과 msg 두개의 두개의 매개변수를 념겨줍니다.

그럼 msg = 저장 + 하시겠습니까 의 alert메시지를 확인할 수 있어 편리합니다. 사실 따로 빼서 관리하면 

fn_MoveToUrl 를 써서 수정하시겠습니까 ? 삭제하시겠습니까? 자장하시겠습니까 ? 등 

메시지와 url을 사용할 수 있어 엄청 편합니다. ~ 


다음엔 게시글 상세조회 처리에대하여 올리겟습니다~


저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

6. 스프링 기본 게시판 만들기(리스트출력하기)  (3) 2018.02.13
5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07

저도 Ajax는 아직 완벽하게 이해한게 아니라 시간이 좀 걸렸네요 ㅠㅠ 400에러 404에러 415에러 500에러 

안본게 없네요 ㅎㅎ


부족하더라도 정리해보겠습니다. ~


우선 동기와 비동기 방식이 있는데 음.. 

이해하기 쉽게 설명드리자면 .. 음 동기는 이어달리기 ? 비동기는 그냥 달리기 시합 이라고 생각하시면 

쉬울것같아요 

동기방식은 요청이 들어오면 응답을 받기전까지 다음 요청을 처리하지 않습니다. 

이어달리기에서 바톤을 받아야 다음 주자가 뛸 수 있는것과 비슷하죠 ??ㅎㅎㅎ

비동기는 그냥 달리기 시합과 같습니다 ~

그냥 다같이 뛰는거죠 먼져 도착한사람이 먼져 응답을 주는 식? 이렇게 하면 이해가 쉽겟죠 ?

흔한 예제에서는 

은행 업무를 많이 들고 있습니다.  

나의 잔고가 10만원인데 . 친구에게 10만원을 입금해줍니다. 그런데 중간에 자동이체로 후르륵 빠져나가면

큰일 나겠죠 ? 그래서 이럴땐 10만원이 이체완료 후에 자동이체가 진행되는 동기 방식을 쓰는거죠 

비동기는 엄청나게 매력적이에요 node.js를 잠깐 해봤는데 단일 페이지에서 이것저것 하는것은 

사용자로 하여금 엄청나게 매력을 줍니다 ㅠㅠ 하지만 저는 이게 왜이렇게 어려운지 한번만 이해하면 쉽다고하는데

ㅠㅠ 각설하고 코드로 설명드리겠습니다.


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
<script type="text/javascript">
//아이디 체크여부 확인 (아이디 중복일 경우 = 0 , 중복이 아닐경우 = 1 )
var idck = 0;
$(function() {
    //idck 버튼을 클릭했을 때 
    $("#idck").click(function() {
        
        //userid 를 param.
        var userid =  $("#userid").val(); 
        
        $.ajax({
            async: true,
            type : 'POST',
            data : userid,
            url : "idcheck.do",
            dataType : "json",
            contentType: "application/json; charset=UTF-8",
            success : function(data) {
                if (data.cnt > 0) {
                    
                    alert("아이디가 존재합니다. 다른 아이디를 입력해주세요.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-error")
                    $("#divInputId").removeClass("has-success")
                    $("#userid").focus();
                    
                
                } else {
                    alert("사용가능한 아이디입니다.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-success")
                    $("#divInputId").removeClass("has-error")
                    $("#userpwd").focus();
                    //아이디가 중복하지 않으면  idck = 1 
                    idck = 1;
                    
                }
            },
            error : function(error) {
                
                alert("error : " + error);
            }
        });
    });
});
 
 
</script>
cs


우선 Ajax부터 작성했습니다.

var idck = 0; 우선 아이디 체크를했는지 안했는지 안했다면 회원가입이 불가하게 처리하기 위해

변수를 먼져 선언했습니다. 아이디 체크 여부에 따라 1 or 0 으로 처리할것입니다. 


컨트롤러


1
2
3
4
5
6
7
8
9
10
11
12
13
 @RequestMapping("/idcheck.do")
    @ResponseBody
    public Map<Object, Object> idcheck(@RequestBody String userid) {
        
        int count = 0;
        Map<Object, Object> map = new HashMap<Object, Object>();
 
        count = signupService.idcheck(userid);
        map.put("cnt", count);
 
        return map;
    }
 
cs


Ajax사용을 위해 @ResponseBody 위를 어노테이션을 써줘야하구요 

JSON으로 넘어온 userid를 매개변수로 받습니다.


signupService.idcheck(userid); 쿼리를 먼져 확인해보면 


1
2
3
4
5
<select id="idcheck" parameterType="String" resultType="Integer">
      SELECT COUNT(*) FROM tbl_member
      WHERE
          userid = #{userid}
</select>
cs

 

테이블에 저장되어 있는 userid의 COUNT를 가져옵니다.  


다시 컨트롤러에서 count = 1 이 될것입니다. 

이렇게 맵에 넣어서 다시 jsp로 넘겨줍니다. 다시 AJAX 작성한것을 보면 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (data.cnt > 0) {    
        alert("이미 아이디가 존재합니다.");               
    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-error")
        $("#divInputId").removeClass("has-success")
        $("#userid").focus();
                    
                
} else {
         alert("사용가능한 아이디입니다.");
     //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-success")
        $("#divInputId").removeClass("has-error")
        $("#userpwd").focus();
        //아이디가 중복하지 않으면  idck = 1 
        idck = 1;
}
cs


컨트롤러에서 아이디가 중복이라면  cnt = 1 아니면 0이 넘어 왔을 때 

data.cnt > 0 이면 중복!

아니라면 사용 가능합니다!


설명을 어렵게 드린거 같네요 ㅠㅠ 


그리고 회원가입을 해봤더니 이전에 유효성 검사에서 버튼을 submit으로 만들었었습니다. 

아이디가 중복인데 ㅠㅠ 막 에러를 뿜뿜  primary key ㅠㅠ

그래서 유효성 검사에서 


1
2
3
4
5
6
7
8
9
if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }
cs


마지막 부분에 이렇게 추가 했습니다.


이전 글을 보신분은 회원가입 버튼에 TYPE을 submit에서 button으로 바꿔주시고 

form 에 name="frm" id="frm"을 추가해주세요  





존재하는 아이디를 넣었을 때 count = 1 은 아이디가 존재 합니다.






아이디가 존재할 경우 빯갛게 표시 ㅎㅎㅎㅎ 





아이디가 존재하는데 회원가입을 진행했을 경우  

if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }








다시 정상적인 아이디를 입력했을 경우 



디비를 확인해보니 아주 이쁘게 잘 들어갔네요 ㅎㅎㅎㅎㅎㅎ






설명이 많이 부족합니다 .ㅠㅠ ajax는 추가로 따로 음...공부하고  스크립트 카테고리에 올리겠습니다 ㅠㅠ 

이것으로 회원가입에 필요한 비밀번호 암호화 , 유효성검사, 주소 자동완성, 아디디 중복검사를 했습니다. 

다음엔 게시판(공지사항) 을 만들겠습니다. 

공지사항에는 1. 게시글 등록 2.리스트 3. 수정 4. 삭제(CRUD)  5. 검색 6. 페이징  이렇게 다루겠습니다. 

코드가 필요하신 분은 댓글 달아주시면 git으로 코드를 올리겠습니다~ 

저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

7. 스프링 게시판 글 작성하기  (0) 2018.02.15
6. 스프링 기본 게시판 만들기(리스트출력하기)  (3) 2018.02.13
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07



이번에는 회원가입시 꼭 필요한 유효성 검사입니다.


간단하게 공백 시 alert메시지를 띄우는 것만 하겠습니다. 


저도 아직 정규표현식은 ... 구글링을 통해 하는지라.. 




우선 유효성 검사를 위해 다음과 같이 스크립트를 추가합니다.

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
function DosignUp() {
    
    var userid = $("#userid").val();
    var userpwd = $("#userpwd").val();
    var inputPwdCfm = $("#signUpUserPwdCfm").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var addr1 = $("#addr1").val();
    var addr2 = $("#addr2").val();
    var addr3 = $("#addr3").val();
    
    if(userid.length == 0){
        alert("아이디를 입력해 주세요"); 
        $("#userid").focus();
        return false;
    }
    
    if(userpwd.length == 0){
        alert("비밀번호를 입력해 주세요"); 
        $("#userpwd").focus();
        return false;
    }
 
    if(userpwd != inputPwdCfm){
        alert("비밀번호가 서로 다릅니다. 비밀번호를 확인해 주세요."); 
        $("#signUpUserPwd").focus();
        return false; 
    }
 
    if(username.length == 0){
        alert("이름을 입력해주세요");
        $("#username").focus();
        return false;
    }
    
    if(email.length == 0){
        alert("이메일을 입력해주세요");
        $("#email").focus();
        return false;
    }
    
    if(addr1.length == 0 || addr2.length == 0 || addr3.length == 0 ){
        alert("주소를 입력해주세요");
        $("#addr3").focus();
        return false;
    }
    
    if(confirm("회원가입을 하시겠습니까?")){
        alert("회원가입을 축하합니다");
        return true;
    }
    
}
cs



1
2
<input type="submit" class="btn btn-lg btn-success btn-block" value="회원가입" onclick="DosignUp();" />
 
cs


회원가입 제출 버튼에 type="submit" 으로 변경해주세요 .


onclick="DosignUp(); 추가해주세요


보통 화면단에서 이렇게 유효성 검사를 1차로 진행한 후 , 자바단(스프링) validation 으로 다시 처리를 하고 

DB단 에서 한번 더 유혀성 검사를 하는 것으로 알고 있는데 ?? 맞나요 ?? 실무자님 계시면 댓글좀 ㅠㅠ


스프링에서 validation을 사용하는 것은 이후 시간이 있으면 포스팅 하겠습니다. 

DB단은 저도 잘 ;;    :D 모르겟어요 ㅎㅎ 누가 좀 알려주세요 ㅎㅎㅎㅎ


다음 글은 AJAX를 활용해서 아이디 중복 검사를 해보겠습니다. ㅎㅎㅎㅎ

저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

6. 스프링 기본 게시판 만들기(리스트출력하기)  (3) 2018.02.13
5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07
1. Spring 회원가입하기  (4) 2018.02.06

암호화 하는 방법은 


스프링에서 처리하는 방법, 데이터베이스에서 처리하는 방법 이렇게 저는 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를 써서 처리하는 글을 올리겠습니다. ~

저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
1. Spring 회원가입하기  (4) 2018.02.06
spring 회원가입 비밀번호 암호화하여 DB에 저장하기  (0) 2018.01.11

+ Recent posts

티스토리툴바