지난 글에는 클라이언트에서 html form 값을 서버로 전송하였다면 이번 포스팅에는 서버값을 

웹페이지로 넘겨보도록 하겠음.

지난시간과 마찬가지로 HelloWorld 클래스에 컨트롤러를 추가로 해보도록하겠다.

@RequestMapping("/response")
public String response(Model model){
	model.addAttribute("value1", "값넘기기1");
	model.addAttribute("value2", "값넘기기2");
	return "response";
}

값 1 : ${value1 }
<br/>
값 2 : ${value2 }

서버 컨트롤러에서 model객체를 이용하여 addAttribute를 해주었는데 value1/value2라는 key값을

이용하여 jsp 페이지에 EL태그를 사용하면 다음과 같이 화면에 key값의 value가 출력되는것을 

확인할 수 있을것이다.

잘 나오는고만~~ 

지금까지 request /response에 대하여 알아보았다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

이번시간에는 

클라이언트 -> 서버로 값 전달하기를 다루어 보도록 하겠다.

우리는 보통 클라이언트 -> 서버로 값들을 전달하였을때 

request.getParameter("파라미터명")으로 값전달을 했었을 것이다.

스프링에서 위와 같은 방식으로도 값을 받아도 동일하게 받을 수 있지만

만약 여러 값을 받을경우에 model 클래스를 하나 생성해서 그안에다가 변수 선언 + getter / setter을 정의해주는 방법으로도 값을 서버에서 

받을 수 있을 것이다.

우선은 테스트를 위하여 기본 html 폼화면을 출력하는 컨트롤러+jsp페이지와 값 전달을 위한 request컨트롤러 하나를 만들어 보도록 하겠다.

연동 소스는 이전 시간에 생성했던 프로젝트에 이어서 작성하기로 하겠음.

기존소스인 HelloWorld 클래스에 다음과 같은 컨트롤러를 맵핑해주도록 하자

@RequestMapping("/form")
public String form(){
	return "form";
}

이어서 WEB-INF -> view 디렉토리에 form.jsp를 생성해주고 다음과 같이 코드를 작성해보도록 

하자

<form action="/request" method="post">
	제목 : <input type="text" name="title"/>
	<br/>
	내용 : <textarea rows="10" cols="50" name="content"></textarea>
	<br/>
	<input type="submit" value="서버전달"/>
</form>

submit버튼 클릭시, 소스내에 form안에 정의한 값들을 받기위해  form action의 값인 /request명으로 컨트롤러 맵핑해주도록 하자

* 두가지 방식으로 예를 들 수 있겠다. 

   일반적인 request.getparameter로 값 전달 받는방법과 model 클래스 생성하여 폼의 name

   명칭으로 맞춰주는 방식이 있다.

@RequestMapping("/request")
public void request(HttpServletRequest request){
	System.out.println("제목:"+request.getParameter("title"));
	System.out.println("내용:"+request.getParameter("content"));		
}

현재 com.spring.web패키지내에 model 패키지를 생성해준후 생성 패키지에 Model.java 클래스를 생성 후 다음과 같이 선언을 해주도록 하겠다.

package com.spring.web.model;

public class RequestModel {
	private String title;
	private String content;
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
}

@RequestMapping("/request")
public void request(RequestModel model){
	System.out.println("제목:"+model.getTitle());
	System.out.println("내용:"+model.getContent());
		
}

인코딩설정이 안맞아서 그런거 같다.

이클립스 및 web.xml 인코딩 설정을 해주도록 하자

web.xml 의 servlet-mapping 다음태그에 추가해보도록 하자

<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>
</filter>
<filter-mapping>
    	<filter-name>encodingFilter</filter-name>
    	<url-pattern>/*</url-pattern>
</filter-mapping>

한글값까지 정상적으로 넘어왔다.

이번시간에는 클라이언트의 값을 서버로 전달하였다면, 

다음포스팅에는 서버값을 클라이언트로 전달해보도록 하겠다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

4일동안 휴가를 다녀오는 바람에 그동안 밀렸던 포스팅이나 해야겄다~

Spring에선느 제공하는 STS 를 이용하여 스프링 기본설정부터 DB설정등 다양한 설정을 다루어 

보도록 하겠음.. 

확장자가 없는 restful 방식으로 진행 하도록 하겠음. ㅎㅎ 

보통 spring 진행하면 .do로 작업하는데 요놈이 거슬림 -_- ...

우선 툴을 다운로드 받도록 하자

다운로드 URL - http://spring.io/tools

SPRING TOOL SUITE의 DOWNLOAD STS로 STS툴을 다운로드 받도록 하자

이클립스와 같은 툴이라서 이클립스를 사용했었더라면 익숙한 화면일 것이다.

다운로드가 완료되었다면 압축해제! 

(현재최신버전인 3.6.0 으로 진행)

sts-bundle -> sts-X.X.X.RELEASE -> STS 실행

[실 행 화 면]

[프로젝트 진행할 워크스페이스폴더 지정]

워크스페이스까지 지정 후, 프로젝트를 생성한다 

우클릭하여 New -> Spring Project

Spring Project를 생성하고자 한다면 프로젝트명을 입력하고 Select Spring version을 선택

(본인은 현재 최종인 3.2.3선택) 후,

Simple Projects -> Simple Spring Web Maven 선택 후 Finish 클릭

프로젝트 생성완료시 다음과 같이 프로젝트가 생성되는것을 확인 할 수 있다.

그럼 이제 웹서버를 등록해야 해보자 

이클립스와 동일하기 Servers -> 마우스 우클릭후, 

New -> Server  클릭

본인은 Tomcat 7.0으로 설정을 잡도록 하겠음

톰캣 설치 디렉토리 지정하고 JRE까지 설정 후 Finish를 해보도록 하자

아마 다음과 같이 프로젝트 추가가 되지 않을 수 있을 것이다.

이럴경우 다음화면처럼 Update Project를 해주도록 하자

[톰캣에 프로젝트 추가 안될시, 해결방법]

위 화면처럼 진행을 하면 다음 화면처럼 프로젝트 추가가 가능할것이다.

Finish!!

프로젝트 -> src -> main -> webapp -> mvc-config.xml xml파일이 존재한다.

해당 소스를 보면 

<context:component-scan
            base-package="org.springframework.samples.web"/>

주석으로 막혀 있는데 이부분을 풀고 base-package값을 본인이 작업하고자 하는 패키지에 맞춰서 작성하도록 하자

본인은 다음과 같이 설정을 하였다.

<context:component-scan base-package="com.spring.web"/>

그리고 위와같은 base-package 영역과 동일하게 패키지를 만들어 준다음, 추가로 controller라는 패키지를 하단에 추가한 후,

HelloWorld라는 클래스를 하나 생성하였다. 

생성한 HelloWorld 클래스내에 다음과 같이 코드를 작성하였다.

package com.spring.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloWorldController {

	@RequestMapping("/helloWorld")
	public String helloWorld(){
		System.out.println("HelloWorld 콘솔내용");
		return "helloWorld";
	}
}

return값으로 넘겨준 문자열은 jsp 페이지를 의미한다. 

return "helloWorld" 를 주었으므로

helloWorld.jsp 를 하나 생성하도록 하자

jsp 생성경로는 src -> main -> webapp -> WEB-INF -> view안에다 생성해주면 되겠음.

생성된 jsp 내에 body 태그에 다음코드를 추가해보도록 하자

<H2>HELLO WORLD!!</H2>

코드는 작성이 완료 되었다.

본인은 프로젝트 명을 url에 작성하기 귀찮으므로 프로젝트명과 동일한 위치에 존재하는 Servers 폴더내에 본인이 추가한 웹서버디렉토리 내에 server.xml을 보면 거의 맨하단 context docbase= 어쩌구라는 태그가 존재한다.

거기서 path 값을 "/"변경해주었다.

<Context docBase="spring_study" path="/" reloadable="true" source="org.eclipse.jst.jee.server:spring_study"/>

이제 홈페이지 URL에 다음과 같이 호출을 해보았다

http://localhost:자신의웹서버포트/helloWorld

를 준다음의 동작화면이다.

이로써 spring의 mvc의 기본적인 hello world를 웹에 뽑아보았다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

보통 웹개발을 할때 주로 네이버의 스마트 에디터 또는 다음의 다음에디터를 연동한다.

현재까지 100%에 대한 웹접근성 지원은 아닌거 같다... -0-;;

그럼, 네이버에서 제공해주는 스마트 에디터 연동법에 대하여 설명을 진행하도록 하겠음 

스마트에디터 다운로드 : http://dev.naver.com/projects/smarteditor/download

뭐 아무거나 받아도 상관없으나 본인은 최신버전으로 다운받도록 하겠다 

현재까지 나온 버전은 2.3.10.11329 버전이다.

클릭하면 버그 수정내용 및 업데이트에 대한 내용이 존재한다.

그리고 다운로드 버튼이 존재하는데 클릭하여 다운을 받도록 하자

압축해제를 하면 파일들을 전부다 프로젝트 내에 넣도록 해보자 

구조는 다음과 같고 SmartEditor2.html만 호출하더라도 샘플 화면은 출력이 된다.

위 구조에서 게시판 글쓰기 화면에 에디터를 적용한다 가정하고 jsp페이지 하나를 만들어 보도록 

하겠다. 본인은 write.jsp 라고 생성하였음

방금 프로젝트에 추가한 스마트 에디터 폴더및 소스들을 모두 editor 폴더내에 넣었음

	
<form id="frm" action="/insert.jsp" method="post" >
<table width="100%">
		<tr>
			<td>제목</td>
			<td><input type="text" id="title" /></td>
		</tr>
		<tr>
			<td>내용</td>
			<td>
				<textarea rows="10" cols="30" id="ir1" name="content" style="width:766px; height:412px; "></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" id="save" value="저장"/>
				<input type="button" value="취소"/>
			</td>
		</tr>
</table>
</form>

뭐전문적으로 화면을 구성할것이 아니라 대충 table 태그로 구조 뚝딱뚝딱

화면출력해보자

음~ 볼품없다... 

어쨋든, 내용에 해당하는 textarea 태그에 에디터를 씌우는 작업을 진행 하도록 하겠음

<script type="text/javascript" src="/editor/js/HuskyEZCreator.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">
var oEditors = [];
$(function(){
					nhn.husky.EZCreator.createInIFrame({
						oAppRef: oEditors,
						elPlaceHolder: "ir1",
						//SmartEditor2Skin.html 파일이 존재하는 경로
						sSkinURI: "/editor/SmartEditor2Skin.html",	
						htParams : {
							// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
							bUseToolbar : true,				
							// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
							bUseVerticalResizer : true,		
							// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
							bUseModeChanger : true,			
							fOnBeforeUnload : function(){
								
							}
						}, 
						fOnAppLoad : function(){
							//기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
							oEditors.getById["ir1"].exec("PASTE_HTML", ["기존 DB에 저장된 내용을 에디터에 적용할 문구"]);
						},
						fCreator: "createSEditor2"
					});
});
</script>

위와같이 작성을 해주었다. 

에디터는 우선 나왔고~~

신규 글쓰기시에는 별 필요 없지만 마냥 내용 수정 화면에 에디터를 쓸경우 필요한 함수는 fOnAppLoad 함수이다.

마지막으로 저장버튼 클릭시 서버로 제목과 내용의 입력값들을 서버에 넘겨 주어야 하는데

현재 상황에서는 에디터에 껍데기만 씌워진 상태라 서버에서 각각의 값을 받게 된다면 제목값만 

받게 될것이다.

$("#save").click(function(){
	oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
	$("#frm").submit();
})

이어서 데이터들을 받을 insert.jsp 페이지를 생성하고 

title / content 에 대한 값을 콘솔에 찍어보도록 하겠다

//제대로 utf-8환경이 아니라 한글 깨짐 그래서 임의로 추가
request.setCharacterEncoding("utf-8");
System.out.println("제목:"+request.getParameter("title"));
System.out.println("내용:"+request.getParameter("content"));

잘나왔도다~ 

다음시간에는 에디터내에 파일첨부 관련에 대하여 다루어 볼까 생각중이다..

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

오랫만에 ExtJS 강의를 올리게 되었다.. 

마땅히 프로젝트 주제를 정하고 정하다가 결국은 심플하게 하기로 정하였다;;;

이번 다룰 주제는 ExtJS MVC 기반을 이용하여 간단? 회원관리 테이블을 만들어볼 예정이다.

해당 주제에서 핵심은 GRID를 통하여 DB에 대한 CRUD 기능을 모두 적용하는 것임.

전에는 GRID에 대하여 LIST 출력하는 내용만 기술하였는데 이번 프로젝트를 통해서 

CRUD를 모두 적용해보도록 하겠음. 

컴포넌트 설정 및 내용에 대하여는 이전 포스팅에 여러가지 올려놨으니 순서대로 차근차근 

보시는걸 추천드림.

우선적으로 웹소스 + DB 커넥션에 대한 설정은 제외 하도록 하겠음.

자 그럼 그리드를 이용한 CRUD 설명 GO!

CREATE TABLE member(  
  seq INT NOT NULL AUTO_INCREMENT COMMENT '회원번호',
  member_name VARCHAR(20) NOT NULL COMMENT '회원이름',
  member_birth VARCHAR(8) NOT NULL COMMENT '회원생년월일',
  member_mobile VARCHAR(11) NOT NULL COMMENT '회원연락처',
  create_date DATETIME NOT NULL COMMENT '등록일',
  PRIMARY KEY (`seq`)
) ENGINE=INNODB CHARSET=utf8;

화면의 mvc.js에서 변경된 것이 있다고 한다면  기존에는  controllers의 값을 

'MVCController'  -> 'MemberController' 이걸로 변경한것이 전부다.

name 명칭을 바꿔주면 cotroller/model/store/view에 대한 모든 define 명칭을 변경해주는것이 

귀찮아서 mvc로 냅둔상태...

자~ TABLE 도 생성했으니 1차적으로 MemberModel.js를 먼저 정의해두도록 하자

흐름방식을 model -> store -> view -> viewport -> controller 로 진행하는것이 수월할듯함... 

Ext.define('mvc.model.MemberModel', {
    extend: 'Ext.data.Model',
    fields: [
	    {name: 'seq', type: 'int'},
	    {name: 'member_name', type: 'string'},
	    {name: 'member_birth', type: 'string'},
	    {name: 'member_mobile', type: 'string'},
	    {name: 'create_date', type: 'date'}
	    /*{name: 'create_date', type: 'string'}*/
    ]
});

Ext.define('mvc.store.MemberStore', {
    extend: 'Ext.data.Store',
    model: 'mvc.model.MemberModel',
    autoLoad: true, 
    proxy: {
        type: 'ajax',
        api: {
        	// insert page
        	create : '/create',
        	// select page
        	read: '/list',
        	// update page
        	update : '/update',
        	// delete page
        	destroy : '/delete'
        },
        //select option
        reader: {
            type: 'json', 
            successProperty: 'success',
            rootProperty: 'items'
        },
        //create,update,delete option
       writer: {
	        type: 'json',
	        //그리드 row의 모든값 전송
	        writeAllFields: true,
	        //필수속성값
	        encode : true,
	        //server (request param id)
	        rootProperty: 'data'
	    }
    }
});

뭔가 드~~럽게 많이 추가되었다. 

예전 grid 페이징을 했을경우, proxy -> api가 read랑 proxy의 reader 속성만 다루었었는데

추가로 api의 속성들이 create / read / destroy 이 세개가 추가되었고 writer 라는 속성이 추가 

되었다.

이와같이 추가된 속성들은 insert / update / delete  db 처리 작업을 하기위하여 필요한 놈들이다 +_+ ㅋㅋㅋ

Ext.define('mvc.view.MemberGrid', {
    extend: 'Ext.grid.Panel',
    alias : 'widget.memberGrid',
    store : 'MemberStore',
    columns: [
   			  { 
				dataIndex : 'seq',
				text : '회원번호'			
			},
			{
				dataIndex : 'member_name',
				text : '회원이름',
				editor : 'textfield'
			},
			{
				dataIndex : 'member_birth',
				text : '생년월일',
				editor : 'textfield'					
			},
			{
				dataIndex : 'member_mobile',
				text : '연락처',
				editor : 'textfield'				
			},
			{
				dataIndex : 'create_date',
				text : '등록일',
				flex : 1
			}
    ],
    //그리드 컬럼을 수정하기위하여 필요한 ExtJS 관련 플러그인 {clicksToEdit: 1} << 제거후
    //수정하려면 컬럼 더블클릭해야함 해당옵션은 한번클릭으로 그리드 컬럼 수정가능
    plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 1})],
    tbar : [
	    {
	    	//추가버튼
	    	xtype :'button',
	    	text : '추가',
	    	id : 'addBtn'
	    	
	    },
	    {
	    	//삭제버튼
	    	xtype :'button',
	    	text : '삭제',
	    	id : 'removeBtn'
	    	
	    },
	    {
	    	//적용버튼
	    	xtype :'button',
	    	text : '적용',
	    	id : 'syncBtn'
			
	    }
    ],
    initComponent: function() {
        this.callParent();
    }
});

Ext.define('mvc.controller.MemberController', {
    //기본상속
    extend: 'Ext.app.Controller',
    refs: [
       {
	        ref: 'memberGrid',
	        selector: 'memberGrid'
       }
	],
	stores : ['MemberStore'],
    views: ['MemberGrid'],
    init: function() {
        this.control({
        	//멤버그리드 컴포넌트내에 존재하는 버튼셀렉터
        	'memberGrid button' : {
        		//클릭이벤트 발생시 controller에 존재하는
        		//gridHandleButton 함수를 호출
        		click : this.gridHandleButton
        	}
        });
    },
    gridHandleButton : function(btn) {
    	//그리드 객체
    	var grid = this.getMemberGrid();
    	//그리드 -> 저장공간 객체
    	var gridStore = grid.getStore();
    	//그리드 행 추가버튼 클릭
    	if(btn.getId() == "addBtn") {
    		//membermodel
    		var rec = new mvc.model.MemberModel({
                seq: '',
                member_name : '',
                member_birth: '',
                member_mobile: '',
            	create_date: ''
            });
    		//store에 로우 추가
            gridStore.insert(0, rec);
            //에디트 시작포커스 잡기 (없으면 단순 로우만 추가)
            grid.plugins[0].startEditByPosition({
                row: 0,
                column: 1
            });
    	} else if(btn.getId() == "removeBtn") {
    		//그리드 로우 삭제
    		grid.getStore().remove(grid.getSelectionModel().getSelection());
    	} else if(btn.getId() == "syncBtn") {
    		//create,update,destroy 처리를 한다
    		grid.getStore().sync({
    			callback : function(){
    				//insert/update/delete 후에 리스트 재호출
    	    		grid.getStore().reload();		
    			}
    		});
    	}
    }
}); 

현 예제에서는 오류 관련은 다루지 않는다.

sync 일 경우 store에서 정의했던 create/update/destroy 속성을 각각호출한다.

한꺼번에 호출할수도 있는데 조금 복잡하므로 추후 시간이 나면 다루도록 하겠음

crud의 핵심은 store에 정의된 proxy url영역이고 컨트롤러의 store load/sync 함수이다!

list는 화면에 출력해주는 것이므로 reader -> rootProperty의 items가 response 해주는 

json root 객체인 셈이다.

db 호출후 서버에서 클라이언트로 응답해주는 json 객체의 json 문자열은 다음과 같다.

파싱관련은 본인이 사용하는 json object 생성 라이브러리를 이용하여 파싱해주도록 하자

// read url 호출시 list json객체
{
"items":
	[
		{"seq":"9","member_name":"333","member_birth":"333","member_mobile":"333","create_date":"2014-07-1623:20:35.0"},
		{"seq":"7","member_name":"11","member_birth":"11","member_mobile":"11","create_date":"2014-07-1623:20:22.0"}
	]
}

거꾸로 create/update/destroy에서 정해준 writer 속성의 rootProperty로 정해준 키값으로 서버

에서 데이터를 request 하게되면json 문자열로 파라미터를 받을수 있다.

writer의 rootProperty 값을 data 정의해준거면 서버에서 request.getParameter("data") 로 

받으면 다음처럼 데이터를 받을 수 있다.

//seq는 자동증가값이므로 입력할 필요없다 
// create_date 역시 null인대 쿼리문 자체에서 now()로 주므로 의미가 없다.
[
	{"seq":0,"member_name":"222","member_birth":"444","member_mobile":"555","create_date":null,"id":"mvc.model.MemberModel-4"},
	{"seq":0,"member_name":"111","member_birth":"333","member_mobile":"444","create_date":null,"id":"mvc.model.MemberModel-3"}
]

writer의 json 속성중 id 는 별의미 없다.

마지막으로 서버에서 가공해줘야 하는 순서는 다음과 같다.

1. 문자열 json을 json object 또는 json array 로 변경해주어야함 

2. json array 및 json object에 대하여 쿼리를 가공하여 db처리를 해준다.

   해당 샘플은 본인이 테스트로 만든 서버 로직이다. 

   (json-simple library 를 이용하였다)

////////////////////// "/create 호출 페이지" /////////////////////////

//object일수도 있고 array일수도 있다. object 변환후 json array에 담는다.
                JSONObject jsonObj = null;
		JSONObject jsonObject = null;
		JSONArray jsonArr = null;
		String data = request.getParameter("data");
		if(data.substring(0,1).equals("{")) {
			jsonObject = JSONObject.fromObject(JSONSerializer.toJSON(data));
			jsonArr = new JSONArray();
			jsonArr.add(jsonObject);
		} else if(data.substring(0,1).equals("[")) {
			jsonArr = JSONArray.fromObject(data);	
		}
		
		if(jsonArr.size() > 0){
			for(int i=0; i<jsonArr.size(); i++) {
				jsonObj = (JSONObject)jsonArr.get(i);
				String query = "";
				query += " INSERT INTO member(member_name,member_birth,member_mobile,create_date) ";
				query += " VALUES('"+jsonObj.get("member_name")+"','"+jsonObj.get("member_birth")+"','"+jsonObj.get("member_mobile")+"',now()) ";
				service.executeQuery(query);
			}
		}
		jsonObj = new JSONObject();
		jsonObj.put("success", true);
                PrintWriter pw = response.getWriter();
		pw.print(jsonObj);
		pw.flush();
		pw.close();

위와 같이 작업한결과 이상없이 동작하는것을 확인하였다.

영상으로 동작과정을 보고 마무리를 하도록 하겠음!!

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!