이제 DB 출력을 확인했으니, 입력하는 방법을 알아보겠습니다.

간단합니다! 출력 반대로(?)


요약

- DB에 data insert하기-

1. .jsp 에 input 추가하여 controller로 던져주기

2. controller에 데이터 삽입 메서드 작성하기

3. mapper에 insert 문 작성하기

4. 동작 확인하기



시작합니다!

1. jsp에 input 추가하여 contoller로 던져주기

처음에 데이터 입력할 페이지를 설정을 해줍니다. 저는 testpage.jsp에다가 하려고 합니다.

데이터 삽입 페이지, 출력 페이지 따로 구성할 수 도 있지만

저는 그냥 한 페이지에 입력하면 바로 출력할 수 있도록 만들 계획입니다.


- form을 이용하여 페이지에서 입력된 값을 구분자 값 -"/testPage/insert_data"를 'POST'형식으로 controller로 던져줄 것입니다.


일단 작성 했으니 페이지 동작하는지 확인


굿


2.  Contoller에 메서드 추가하기

이제 Controller에 던져준 값을 처리할 메서드를 작성합니다.

저는 testPageController.java에 추가하면 되겠군요


1
2
3
4
5
6
7
8
9
10
11
/*jsp 페이지에서 구분자로 "/testPage/insert_data" 값으로 던져주었기 떄문에 해당 값으로 RequesetMapping을 합니다.
  post 형식으로 던졌기 때문에 post로 받아주기! (GET/POST 형식의 차이는 면접에서 자주 물어보는 기본 질문이니 숙지합시다 ㅎㅎ) */
@RequestMapping(value = "/testPage/insert_data", method = RequestMethod.POST)
 
    //메서드 작성하기 @Model 어노테이션을 통해 testPage 생성
    public String insert_data(@ModelAttribute testPage testpage){
        
        System.out.print(testpage.toString()); //view에서 제대로 값 던져주는지 확인하기        
        
        return "redirect:/testPage";  //요청 처리 후 testPage로 다시 연결
    }
cs

* GET/POST 간단정리 (자세한건 검색하기!)



2.1 이후 웹 페이지에서 데이터 입력하고 확인해봅니다.

console로 확인 하면 완료!



3. mapper에 insert 문 작성하기

mapper에 DB로 입력 할 Inert문을 작성합니다.



3.1 mapper에 insert_data를 생성 후 controller에서 mapper로 전달 해 줄 문장을 추가합니다.


4. 확인하기

- 데이터 jin / user 데이터 작성 


- 저장 버튼 누른 후 테이블 변동 확인


정상 동작하면 완료!!


이렇게 DB를 입력 출력을 완성했습니다.

이것을 응용하면 회원가입/ 로그인 / 게시판 입력/수정/삭제 와 같은 기능을 작성할 수 있을 것 입니다.

물론 깊게 들어가면 부가적으로 들어가는 개념들을 이해해야겠지만요


아무튼 오늘은 끝!






'WEB 개발 > Spring Project' 카테고리의 다른 글

Spring WEB project 03 - Spring과 DB 연동하기  (0) 2019.01.28
Spring WEB Project 02 - 부트스트랩 및 타일즈 적용하기  (0) 2019.01.19
Spring WEB project 01 - 프로젝트 생성 및 Git 적용하기  (0) 2019.01.18

기본 셋팅의 마지막!

오늘 할 일은 DB와 연동하기!

- 테스트 페이지 만들기

- Spring과 DB 연동

- 등록한 데이터 확인하기

- Web에서 DB에 데이터 등록하기


이것만 끝나면 이제 슬슬 기능을 만들어 볼 수 있을 것 같습니다.


DB 연동 요약 정리 하기 

-----------------------------------------------------------------

* DB 연동 페이지 생성하기 (페이지 생성될때마다 하는 것)

-----------------------------------------------------------------

1) VIEW : page.jsp 생성

2) Controller : pageController.java 생성 -> 메서드 작성

3) Mapper : pageMapper 생성 -> 쿼리문 작성 

-> 새로운 Mapper일 경우 root-context.xml에 mapper 추가

4) VO : DB getter/setter / return toString 작성

5) tiles.xml 새로운 페이지 추가

----------------------------------------------------------------


----------------------------------------------------------------

* DB 최초 연동하기 (최초 설정 후 안건드려도 되는 것)

----------------------------------------------------------------

1) pom.xml DBMS 관련 라이브러리 작성하여 메이븐 추가

2) root-context.xml에 properties, DBMS, Mapper 추가

3) mybatis-config.xml 추가

4) resource에 jdbc.properties 추가

----------------------------------------------------------------

시작!


먼저 테스트 페이지를 하나 만들겠습니다.


1. 테스트 페이지 만들기

1.1 Sidebar.jsp 수정

- 테스트 페이지 메뉴 내용을 추가/수정 해줍니다.  (href=이동할 위치 / 표기할 이름)




1.2 테스트 페이지를 추가합니다.

이제 테스트 페이지 메뉴를 클릭하면 보여줄 view를 작성해줍니다.

폴더와 jsp 파일을 생성해주세요.


1.3 이제 컨트롤러를 생성해줍니다.

- MVC 패턴으로 생성 했기 때문에 view에 관한 동작을 통제하는 컨트롤러를 생성해주어야 합니다.

 컨트롤러는 .java로 실행되기 때문에 자바 클래스를 하나 생성해주시면 됩니다.


- 그러면 이제 testPage의 컨트롤러가 생겼고 클래스가 생성되었으니 메서드를 작석해서 동작해주도록 합시다.

코드 작성에는 @RequestMapping과 @Controller를 사용합니다.

자바의 장점 중 하나인 AOP(관심 지향 프로그래밍)를 이용하는 것이지요!


클라이언트가 /testPage로 접속하여 요청을 보내면 testPageController에서 동작을 처리해서 결과 값을 testPage/testpage로 보내주게 됩니다.



1.4  타일즈 설정하기

- 페이지까지 생성이 되었으면 이제 tiles.xml에 타일즈 디자인을 표기할 페이지를 추가해 주면 됩니다.

- name 이랑 value 수정하면 됩니다. 당연한 이야기지만 경로 정확하게 설정하지 않으면 에러나요!



1.5 페이지 생성 확인

정상 동작 확인했으면 이제 본격적으로 DB를 연동해보도록 하죠


2. DB 연동하기

저는 Mysql을 사용할 계획 입니다. 오라클과 같은 다른 DBMS를 사용하시는 구조는 동일합니다만 패키지 추가하는 내용이 조금 다를듯 해서

그 부분은 따로 찾아봐야 할 것 같네요

또한 전 HeidSQL 이라는 프로그램을 사용합니다. 하지만 면접을 준비할때는 Mysql CMD를 통해 연습하는것이 좋을 듯 합니다


DBMS와 테이블이 생성되어있다는 가정 하에 진행하겠습니다.

* 정보 

DB 이름 : spring_web_project

table 이름 : testpage

속성 : id - int-auto increament(prime key) / user_name -varchar(50) / content - varchar(50)


2.1 데이터베이스 연동하기

연동에 필요한 순서는 Pom.xml에 라이브러리 파일 추가하기 ->   root-context.xml에 DBMS 정보 등록하기 -> mybatis 설정 입니다.


2.1.1 Pom.xml

Spring에는 Maven이라는 것이 존재합니다. Maven은 라이브러리를 pom.xml에 작성을 하면 자동으로 라이브러리를 포함해주는

아주아주 편리한 기능이죠! 

그래서 아래의 내용을 pom.xml에 Mysql관련 라이브러리를 포함하도록 합니다.

추가할 내용은 다음과 같습니다.

- mysql - mysql-connetcor-java => java와 mysql 연동을 위한 라이브러리

- MyBatis => mybatis

- mybatis-spring => spring에서 사용할 mybatis 정보

- Spring JDBC => jdbc 라이브러리

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<dependency>
         <groupId>mysql</groupId>
         <artifactId>mysql-connector-java</artifactId>
         <version>5.1.41</version>
    </dependency>
    <!-- MyBatis 3.4 -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.4.1</version>
    </dependency>
    <!-- MyBatis-Spring 1.3-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>1.3.0</version>
    </dependency>
    <!-- Spring-JDBC -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>${org.springframework-version}</version>
    </dependency>
cs


이렇게 저장하면 자동으로 라이브러리가 다운로드 받아집니다. 

라이브러리 포함 후 서버는 재시작해야 동작합니다. 

보통 xml과 같은 설정 파일들을 수정하게 되면 적용하기 위해 재시작 해준다 생각하면 편할 듯 합니다.


2.2 root-context.xml 에 DBMS 관련 객체를 설정해줍니다. (여기서 스프링의 장점인 Spring DI를 알 수 있겠네요)

설정 내용은 다음과 같습니다.

- properties => jdbc에 연결할때 DB의 접속 주소, 계정, 비밀번호를 설정 관리하는 파일을 설정합니다.

- jdbc-mysql => jdbc 드라이버를 사용할때 참조할 위치 설정

- MyBatis-Spring => Spring에서 MyBatis를 설정을 참조할 부분 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- properties -->
    <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="locations" value="classpath:/jdbc.properties" />
        <property name="ignoreUnresolvablePlaceholders" value="true" />
        <property name="fileEncoding" value="UTF-8" />
    </bean>
    <!-- JDBC-MYSQL -->
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
    </bean>
    
     <!-- MyBatis-Spring -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="configLocation" value="classpath:mybatis-config.xml" />
        <property name="dataSource" ref="dataSource" />
    </bean>
cs


2.3 properties 작성하기

- 이제 DB로 접속할 정보가 작성되어있는 properties 파일을 설정합니다. root-context.xml에 작성한 위치에 생성하면 됩니다.

- jdbc.properties 생성


- jdbc.properties 내용



2.4 mybatis 설정 파일인 mybatis-config.xml를 작성해줍니다. (root-context.xml에 작성된 파일이 없으면 실행 에러나는것 참고해주세요)

작성 방법은 다음과 같습니다.

접속 경로 같은건 properties에서 작성할것이기 때문에 따로 작성 할 내용은 없습니다.


- 작성 위치 및 내용



1
2
3
4
5
6
7
<?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>
   
</configuration>
cs




2.5 mapper 생성

MVC 패턴의 model 부분 입니다.

Client 요청 -> View -> 동작요청 -> Controller 메서드 실행 -> 데이터 관련 -> Model로 요청 -> 컨트롤러로 전송 -> 메서드 처리 후 다시 -> view

위에 굵은 글씨 부분을 작성하게 되는 것 입니다.

mapper의 특징은 interface로 작성된다는것! 중요하니 참고 해주세요.


2.5.1 mapper 생성

- mapper Package를 생성 후 mapper를 생성해줍니다. mapper의 확장자는 .java 입니다.


- mapper의 내용은 DB 쿼리문 이라고 생각하시면 됩니다.

여기서 또 구분할 내용이 있는데 Mapper의 경우 mapper의 역할만 합니다. 그래서 DB의 내용을 담아줄 파일을 나누어 줘야 관리하기가 편리해 주는데

이것은 VO 라고 합니다.  


MVC 패턴에선 이것을 DAO - DTO(VO) 구조로 나누어서 사용을 합니다.

지금 하는 예제 프로젝트에서는 DAO를 따로 설정하지 않았는데, 추후에 DAO 설정을 통해 접근을 관리할 수 있도록 추가하겠습니다.

(일단 연동 테스트 부터)


아직 서버 트래픽 관리 부분까지는 개념과 실력이 부족하기 때문에 관련 내용을 좀 더 깊게 공부 한 후 서버 관리 영역에 관해 글을 작성할때 내용을 추가해보도록 하겠습니다.



2.5.2 mapper 객체 root-context.xml에 아래 내용을 추가 합니다.

1
2
3
4
5
<!-- Mapper -->
    <bean id="testPageMapper" class="org.mybatis.spring.mapper.MapperFactoryBean">
        <property name="mapperInterface" value="com.mycompany.mapper.testPageMapper" />
        <property name="sqlSessionFactory" ref="sqlSessionFactory" />
    </bean>
cs



 2.5.3 vo 생성 하기 

- vo의 내용은 getter / setter로 구성됩니다.

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
package com.mycompany.vo;
 
public class testPage {
    String id;
    String user_name;
    String content;
    
    
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    
    public String getUser_name() {
        return user_name;
    }
    public void setUser_name(String user_name) {
        this.user_name = user_name;
    }
    
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    
    @Override
    public String toString() {
        return "testPage [id=" + id + ", user_name=" + user_name + ", content=" + content + "]";
    }
 
}
 
cs


2.5.4 mapper 작성하기

- interface로 작성하기 때문에 메서드 이름만 생성해주고 내용은 생성 안합니다.

- select 어노테이션을 통해 쿼리문을 작성해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.mycompany.mapper;
 
import java.util.List;
 
import org.apache.ibatis.annotations.Select;
 
import com.mycompany.vo.testPage;
 
 
public interface testPageMapper {
    @Select("select * from testpage ORDER BY date DESC")
    public List<testPage> getList();
}
 
cs


2.6 DB 출력을 위해 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
26
27
28
29
30
31
32
33
34
35
package com.mycompany.myapp;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
import com.mycompany.mapper.testPageMapper;
import com.mycompany.vo.testPage;
 
@Controller
public class testPageController {
    
    @Autowired
    private testPageMapper testpagemapper;
    
    @RequestMapping(value = "/testPage", method = RequestMethod.GET)
    
    //DB 출력 동작 메서드
    public String testPage_print(Model model){
        //<> 안에 DTO or VO 이름
        List<testPage> testpage = testpagemapper.getList_testpage();
        
        //model을 통해 View로 전달
        model.addAttribute("testpage",testpage);
        
        return "testPage/testpage";
    }
    
 
}
 
cs




2.7 View에 표기하기

- testpage.jsp 작성한 내용입니다.

- controller로 부터 DB 내용을 가져올때 경로 설정을 c:foreach 문을 사용했는데 이 문법을 사용하기 위해서

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>를 추가해주었습니다.

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
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
 -->
 
<div class="container-fluid">
 
    <!-- Breadcrumbs-->
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">testPage</a></li>
        <li class="breadcrumb-item active">Overview</li>
    </ol>
 
    <!-- DataTables Example -->
    <div class="card mb-3">
        <div class="card-header">
            <i class="fas fa-table"></i> testPage-data
        </div>
        <div class="card-body">
            <div class="table-responsive">
 
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>user_name</th>
                            <th>content</th>
                        </tr>
                    </thead>
                        
                    <tbody>
                        <c:forEach items="${testpage}" var="testpage">
                                            <tr>
                                                <td>${testpage.id}</td>
                                                <td>${testpage.user_name}</td>
                                                <td>${testpage.content}</td>                                                
                                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
 
 
</div>
 
cs


2.8 정상적으로 데이터 읽어오는지 확인하기

- 이제 서버를 재시작하고 페이지가 정상 동작하는지를 확인합니다.



정상적으로 출력 되었다면 잘 작성했다는 것이겠죠?

정리하며 쓰다보니  내용이 많아져서

DB작성하기는 다음편에 작성하겠습니다.




'WEB 개발 > Spring Project' 카테고리의 다른 글

Spring WEB Project 04 - DB에 데이터 삽입하기  (0) 2019.02.08
Spring WEB Project 02 - 부트스트랩 및 타일즈 적용하기  (0) 2019.01.19
Spring WEB project 01 - 프로젝트 생성 및 Git 적용하기  (0) 2019.01.18

웹 페이지를 꾸며야하는데, 저처럼 디자인적 감각이 거의 없는 경우에 선택하는 방법은

부트스트랩 테마를 적용하는 것 입니다.


* 오늘 정리할 내용은 아래와 같습니다.

1. 부트스트랩 적용하기

2. 타일즈 적용하기



부트스트랩을 이용하면 디자인적인 기본 기능들이 이미 구현되어 있기 때문에 가져다 쓰기만 하면되서

굉장히 편리합니다.

물론 유료로 사용하는것이 기능으로나 디자인으로나 훨-씬 좋겠지만,

저는 무료로 제공하는 아래 디자인을 다운받아 사용하려고 합니다.

(다운로드 링크 -> https://startbootstrap.com/template-overviews/sb-admin/)

그림1) 예제에 사용 할 부트스트랩 이미지


그럼 다운로드 한 부트스트랩을 프로젝트에 적용해보도록 하겠습니다.


1. 부트스트랩 적용하기


1.1 압축풀기

다운받은 파일을 압출을 풀면 다음과 같이 정리 되어 있을 것 입니다.

html을 코드를 보면 어떤식으로 사용하는지 확인할 수 있습니다!


그림2) 부트스트랩 내용물


1.2 resources 폴더에 복사하기

그림2) 사진에 있는 폴더 css/js/scss/vendor 폴더를 작업중인 프로젝트 내의 resources에 복사합니다.

그림3) resources 폴더


1.3 servlet-context.xml 수정하기

이제 부트스트랩을 사용하려면 코드를 작성할때 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 과 같은 방식으로 작성하게 됩니다.

그래서 이 경로를 Spring에서 원할하게 찾을 수 있도록 servlet-context.xml 을 수정해 주어야 합니다.

resources mapping 부분을 아래와 같이 변경 합니다.

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

그림4) Servlet.xml 수정


(xml 파일은 수정 후 서버를 재시작해야 적용됩니다.)


1.4 적용 확인하기

이제 정상적으로 동작하는지 확인하기 위해 그림2) 에있던 폴더에서 index.html에 있는 코드를 home.jsp에 붙여넣습니다.

이후 서버 시작해서 확인하기

그림5) 부트스트랩 적용 확인


1.5 정장 작동을 확인했으면 Git에 commit하기!

git의 순서는 언제다 add-> commit -> push 입니다.

add to index 이후 commit message 작성 후 commit!


그림 6) 부트스트랩 적용 후 commit



2. Tiles 적용하기

home.jsp에 코드를 복사하게되면 코드의 양이 상당히 많습니다.

왜냐하면 그 코드에는 위쪽 메뉴바, 왼쪽 메뉴바, 중앙 내용, 하단 내용이 모두 들어가 있기 때문입니다.


새로운 페이지마다 그 긴 코드를 모두 작성하긴 힘들 것 입니다.

그래서 타일즈를 이용하여 고정적으로 사용되는 부분은 한번만 작성하여 계속 가지고 다니게 만드려고 합니다!


타일즈 적용에 필요한 것은 아래와 같습니다.


2.1 pom.xml에 tiles dependency 추가


<!-- tiles -->

<dependency>

<groupId>org.apache.tiles</groupId>

<artifactId>tiles-core</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>org.apache.tiles</groupId>

<artifactId>tiles-api</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>org.apache.tiles</groupId>

<artifactId>tiles-extras</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>org.apache.tiles</groupId>

<artifactId>tiles-servlet</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>org.apache.tiles</groupId>

<artifactId>tiles-jsp</artifactId>

<version>2.2.2</version>

</dependency>



2.2 WEB-INF/tiles 폴더 생성

- 내용 구성은 layout, tile , tiles.xml 파일







2.2.1  layout에 header / content / footer로 상단 / 중단 / 하단부를 정의해줍니다.

아래 형식이 기본 작성 방법입니다.


하지만 저는 제가 원하는 방식으로 화면에 출력하고 싶기 때문에 아래와 같이 수정했습니다.







2.2.2 tile 폴더 내에는 상단 중단 하단부에 고정으로 보여 주고 싶은 내용을 입력 합니다.

(jsp파일 작성하듯이 똑같이 작성하면 됩니다. 아래 사진은 header.jsp 내용)




2.2.3 마지막으로 tiles.xml 작성

- layout.jsp 위치 header.jsp footer.jsp 파일 위치, content 부분에 적용될 jsp 설정 부분을 작성하여 tiles.xml을 만듭니다.



- tiles 페이지 설정 / 비설정 (2019.06.25 추가)

페이지를 설정 하던 중 로그인 페이지에는 타일즈를 제외 해야 할 일이 생겼습니다.

그래서 내용 추가 합니다.


타일즈 적용 부를 위에처럼 하나씩 다 설정해주어도 괜찮지만 페이지가 많아질수록 관리하기 귀찮겠죠?

그래서 아래와 같이 설정을 변경합니다.

--------------------------------------------------------------------------------------------

<!-- 타일즈 제외 선언부를 제외한 나머지는 모두 타일즈로 적용 됨 -->

<definition name="*/*" extends ="layout">

<put-attribute name="content" value ="/WEB-INF/views/{1}/{2}.jsp"/>

</definition>

--------------------------------------------------------------------------------------------

"*/*" -> 모든 페이지를 layout으로 적용하겠다는 말입니다.


그리고 제외 할 페이지를 설정해줍니다. 

페이지 선언 이전에, 비어있는 layout인 emtpy.jsp를 추가해줍니다. (loyout 폴더 아래)





empty.jsp의 내용은 아래와 같이 타일즈 layout 설정을 다 빼버림 되겠죠!





그리고 tiles.xml에 제외할 페이지들을 선언해줍니다.

아래 사진은 제외할 페이지가 들어있는 폴더 views/logInfo 입니다.


--------------------------------------------------------------------------------------------------------

<!-- 타일즈 제외 선언부 -->

<definition name="logInfo/login" extends ="empty">

<put-attribute name="content" value ="/WEB-INF/views/logInfo/login.jsp"/>

</definition>

<definition name="logInfo/memberJoin" extends ="empty">

<put-attribute name="content" value ="/WEB-INF/views/logInfo/memberJoin.jsp"/>

</definition>


--------------------------------------------------------------------------------------------------------


tiles.xml 전체 소스

-----------------------------------------------------------------------------------------------------------------------------

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

 <!DOCTYPE tiles-definitions PUBLIC

      "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"

      "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">



<tiles-definitions>

<!-- tiles layout 적용 정의부 -->

<definition name ="layout" template ="/WEB-INF/tiles/layout/layout.jsp">

<put-attribute name="header" value ="/WEB-INF/tiles/tile/header.jsp"/>

<put-attribute name="sidebar" value ="/WEB-INF/tiles/tile/sidebar.jsp"/>

<put-attribute name="content" value =""/>

<put-attribute name="footer" value ="/WEB-INF/tiles/tile/footer.jsp"/>

<put-attribute name="footer-menu" value ="/WEB-INF/tiles/tile/footer-menu.jsp"/>

</definition>

<!-- tiles 적용 제외 부분 정의부 -->

<definition name="empty" template ="/WEB-INF/tiles/layout/empty.jsp">

<put-attribute name="content" value =""/>

</definition>

<!-- 타일즈 제외 선언부를 제외한 나머지는 모두 타일즈로 적용 됨 -->

<definition name="*/*" extends ="layout">

<put-attribute name="content" value ="/WEB-INF/views/{1}/{2}.jsp"/>

</definition>

<!-- 타일즈 제외 선언부 -->

<definition name="logInfo/login" extends ="empty">

<put-attribute name="content" value ="/WEB-INF/views/logInfo/login.jsp"/>

</definition>

<definition name="logInfo/memberJoin" extends ="empty">

<put-attribute name="content" value ="/WEB-INF/views/logInfo/memberJoin.jsp"/>

</definition>

</tiles-definitions>

-----------------------------------------------------------------------------------------------------------------------------


이렇게 tiles 변경 후 적용을 변경하면 로그인 페이지를 제외한 나머지 페이지들만 타일즈가 적용됩니다!








2.3 servlet-context.xml에 tiles 정보 추가

이제 생성한 폴더를 서블릿에서 인식해주기 위해서 servlet-context.xml 파일에 tiles 정보와 폴더의 경로를 아래와 같이 내용을 추가해줍니다.


<!-- 부트스트랩 링크를 위해 resources 경로를 루트부터 찾도록 변경해줍니다 -->  

<!-- <resources mapping="/resources/**" location="/resources/" />  -->

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

<!-- Tiles--> 

<beans:bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles2.TilesViewResolver" >

</beans:bean>

<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">

<beans:property name ="definitions">

<beans:list>

<beans:value>/WEB-INF/tiles/tiles.xml</beans:value>

</beans:list>

</beans:property>

</beans:bean>









2.4 root-coontext tiles 내용 추가

이제 root-context.xml 파일에도 아래와 같이 tiles 정보를 추가 입력해줍니다.


<!-- tiles--> 

<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">

     <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView" />

     <property name="order" value="2" />

</bean>













2.5 이제 타일즈를 적용할 파일에 중앙부 내용을 입력하고 타일즈가 적용이 되었는지를 확인합니다.

   (지금 예제의 경우는 home에 적용을 했기 때문에 home.jsp가 정상 동작하는지 확인합니다.)

적용이 안되가지구 보니 tiles.xml 작성할때 /WEB-INF/views/home.jsp 로 작성했기 때문에 homecontroller에 return 값을 "home" ->"/home"으로 변경하니 정상 작동하는것을 확인 했습니다.




이렇게하면 Tiles까지 적용 완료! 

새로운 페이지를 만들때에 타일즈를 적용할거면 페이지.jsp 작성 후 tiles.xml에 페이지.jsp 경로를 추가해주면 될 것입니다.

이제 정상동작 확인했으니 commit 후 push!



이제 본격적으로 기능들을 만들어 볼 차례가 된 것 같습니다.

오늘은 여기까지 정리하겠습니다!






'WEB 개발 > Spring Project' 카테고리의 다른 글

Spring WEB Project 04 - DB에 데이터 삽입하기  (0) 2019.02.08
Spring WEB project 03 - Spring과 DB 연동하기  (0) 2019.01.28
Spring WEB project 01 - 프로젝트 생성 및 Git 적용하기  (0) 2019.01.18

SpringFramewokr를 이용하여 웹 프로젝트에 사용되는 기본 예제들을 하나씩 정리해 볼까 합니다.


환경설정은 아래와 같습니다.

- Spring 3.1.1

- MySQL 5.7

- Apache Tomcat 7.0

- JDK 1.8


시작합니다!


오늘 정리할 것은 세가지!

- githup.com에 repositroy 생성하기

- 프로젝트 생성 하기 

- Git 적용하기


1. Github 홈페이지에 repository 생성하기


1.1 github 계정이 있다면 로그인 후 New를 클릭하여 repository를 생성합니다.


1.2 이후 repository 이름을 설정 후 Create repository를 생성합니다.


1.3 Creating a new file을 클릭해주세요.

- 단, 기존 프로젝트를 git 프로젝트로 진행하고자 한다면 uploading an existing file을 클릭해주세요

(저는 처음부터 진행 할 예정이기에 creating a new fille을 선택했습니다.)


1.4 commit 하기 위해선 우선 파일을 하나 생성해야 하기 때문에 ReadMe file을 생성하고 내용을 입력합니다.



1.5 이후 최초 1회 커밋이 되어야 repository 생성이 가능하기 때문에 아래 Commit message를 적고 change commit을 클릭해주시면 완료됩니다.


1.6 이렇게 하면 repository가 생성 되었습니다.


이제 github을 STS와 연동합니다.



1.7 File -> import 클릭 후 Git -> project from Git을 선택합니다.


1.8 이후 Clone URI를 클릭 후 github에 있던 clone 주소를 복사하여 설정합니다.


1.9 URI 입력 후 계정 비밀번호 입력하고 NEXT를 누르면 연동이 됩니다.

이후 next 누르면 아직 project는 없기에 finish는 클릭이 안되는데, 그냥 cancel 누르면 됩니다.

이렇게 하면 일단 repo와 sts 연동 성공!


2. 프로젝트 생성하기

/*

Spring에서 프로젝트를 생성할때 주로 아래와 같은 프로젝트 중 선택을 하게 됩니다. 

- Spring Legacy Project (일반적으로 사용하는 MVC SpringFramework ->유지보수가 편해서 큰 프로젝트 만들때 유용)

- Dynamic Web Project (Wep application 개발시 사용하는 프로젝트 -> 단순 기능동작하는 작은 프로젝트에 유용)

- java Project ( Java application 개발시 사용.. 저는 코딩테스트 연습할때 자주 씁니다)

근데 이것들이 차이가 궁금해서 보니 차이는 프로젝트 폴더 구조의 차이였습니다. 

상황에 따라 관리하기 유용한 프로젝트를 선택하면 되는것이라는 말이지요.

복잡하게 하나하나 분석하면 길어질 것 같기때문에 간단히 정리해봤습니다.

*/


2.1 Spring Legacy Project를 생성합니다. 

- 프로젝트명을 작성합니다. 저는 "Spring_WEB_Basic"로 생성하려 합니다.

- 이후 Spring MVC Project를 선택하고 Next를 눌러주세요.

2.



2.2 패키지 이름을 설정합니다.

패키지 이름은 아래 형식에 맞게 원하는 이름으로 설정합니다.


2.3 MVC 프로젝트의 폴더 구성은 다음과 같습니다.

( MVC 개념 관련 내용은 따로 정리 하겠습니다. )




3. STS에서 생성한 프로젝트 Git에 추가하기

- 생성 되었으면 이제 Git으로 버전을 관리할 수 있도록 설정하겠습니다.

- Git에 관련된 명령어 및 개념들은 Git 메뉴에 따로 정리할 예정입니다.


3.1  프로젝트 오른쪽 클릭 후 Team -> Share Project 클릭


3.2 Share Project를 누르게 되면 저장소를 설정하게 되는데, 원하는 위치에 설정하면 됩니다.



3.3 이후 다시 Share Project를 누르고 Add to index 누르고 commit message 작성 후 commit & push 눌러서 성공하면 설정 끝!


3.4 git 홈페이지에서 repository에 정상 등록 되었는지 확인하면 완료입니다.



다음 내용은 이제 부트스트랩 적용 및 타일즈 설정하기!





'WEB 개발 > Spring Project' 카테고리의 다른 글

Spring WEB Project 04 - DB에 데이터 삽입하기  (0) 2019.02.08
Spring WEB project 03 - Spring과 DB 연동하기  (0) 2019.01.28
Spring WEB Project 02 - 부트스트랩 및 타일즈 적용하기  (0) 2019.01.19

+ Recent posts

티스토리툴바