'코드저장소' 카테고리의 글 목록 (5 Page) IT Code Storage

/62

2014. 10. 29. 09:00

네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

이번 포스팅은 대표적으로 자주 이용하는 무료 웹에디터 툴중에 하나인

네이버 스마트에디터에 대한 기본 연동법에 대하여 포스팅 하고자 합니다.

제일먼저 에디터파일을 받도록 합니다.

http://dev.naver.com/projects/smarteditor/download

사이트 접속시 다음과 같이 버전별 에디터 목록이 나옵니다

저같은 경우는 제일 최신으로 등록된 버전을 기준으로 진행을 하겠습니다.

목록을 클릭하여 들어가시면 상단에 다운로드버튼이 존재하는데

클릭하여 파일을 다운로드 받도록 합니다.

저는 포스팅 날짜기준 "SE2.3.10.O11329.zip" 파일을 다운받았습니다.

압축해제 후 다음 파일들을 모두 본인의 프로젝트에 맞추어 include해줍니다.

저는 개인적으로 별도의 "smarteditor" 디렉토리 생성하여 해당 폴더에 통째로 붙여넣기 하였습니다.

스마트 에디터를 적용하기 위해서는 HTML의 textarea 태그가 필요합니다.

index.html 파일에 하단 코드 작성하였습니다.

INCLUDE 파일

1 2	`<script` `type="text/javascript"` `src="//code.jquery.com/jquery-1.11.0.min.js"></script>` `<script` `type="text/javascript"` `src="/smarteditor/js/HuskyEZCreator.js"` `charset="utf-8"></script>`

에디터 샘플 html 코드

<form action="/send.jsp" method="post" id="frm">
    <textarea name="smarteditor" id="smarteditor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
    <input type="button" id="savebutton" value="서버전송" />
</form>

에디터 관련 스크립트 코드

$(function(){
    //전역변수선언
    var editor_object = [];
     
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: editor_object,
        elPlaceHolder: "smarteditor",
        sSkinURI: "/smarteditor/SmartEditor2Skin.html", 
        htParams : {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar : true,             
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,     
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true, 
        }
    });
     
    //전송버튼 클릭이벤트
    $("#savebutton").click(function(){
        //id가 smarteditor인 textarea에 에디터에서 대입
        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);
         
        // 이부분에 에디터 validation 검증
         
        //폼 submit
        $("#frm").submit();
    })
})

위 코드를 차례대로 보시겠습니다.

smarteditor 연동 제공해주는 HuskyEZCreator.js 파일과 jQuery CDN을 이용한 예제입니다.

1. nhn.husky.EZCreator.createInIFrame 명령어를 이용하여 에디터를 iframe을 이용하여 화면에 띄워줍니다.

2. textarea와 패키지개념이긴 하나 실질적으로 별개의 프레임입니다.

elPlaceHolder 속성값에는 연결지을 textarea의 id명을 정해줍니다.

sSkinURI 속성값에는 에디터스킨 html파일 경로를 지정해줍니다

3. 마지막으로 전송버튼시 editor_object라는 배열변수를 이용하여 smarteditor id값을 가진 textarea폼에 에디터스킨에서 입력한 html내용들을 대입시킵니다.

editor_objet 변수를 전역변수로 선언한 이유는 이와같이 클립이벤트 공통으로 에디터객체 핸들링을 위하여 선언하였습니다.

위 3가지에 대한 부분이 주요 설명입니다.

그리고 form submit을 할때 정해준 action url페이지인 send.jsp 페이지내에 코드는 다음과 같습니다.

send.jsp 코드

//한글 인코딩을 위한 UTF-8 설정
request.setCharacterEncoding("utf-8");
out.println("에디터 결과");  
out.println(request.getParameter("smarteditor"));

에디터 로딩 페이지와 전송된 갑이 올바르게 넘어가는지 해당 소스를 실행해보도록 하겠습니다.

최초 로드 화면

send.jsp 전송값 확인

화면상 내용만 출력되었지만 소스보기 결과 정상적으로 에디터에 작성된 태그가 적용된것을 확인 할 수 있었습니다.

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

Spring3 MVC Restful방식으로 스마트에디터 연동(사진첨부 다중파일 포함) 해보기 (13)	2014.11.25
네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함 (97)	2014.10.29

/58

2014. 10. 27. 06:00

MySQL,ORACLE(오라클),MSSQL 2005(+) 페이징쿼리 작성하여 동작시켜보기

이번에는 게시판에 주로 사용되는 페이징 쿼리에 대해서 DBMS별로 포스팅해보도록 하겠습니다.

DBMS 종류는 MySQL,ORACLE,MSSQL 2005(+) 을 작성해보도록 하겠습니다.

페이징쿼리를 돌리기위한 테이블 + 데이터가 필요하겠죠?

기존에 데이터가 많이 쌓여있는 테이블로 테스트 하셔도 무관하나

저같은 경우에는 예를들기위해 임의로 테이블 생성을 해보도록 하겠습니다.

테스트테이블 생성 및 데이터추가

create table board(
  idx int,
  title varchar(100)
);
insert into board
values(1,'제목1');
insert into board
values(2,'제목2');
insert into board
values(3,'제목3');
insert into board
values(4,'제목4');
insert into board
values(5,'제목5');
insert into board
values(6,'제목6');
insert into board
values(7,'제목7');
insert into board
values(8,'제목8');
insert into board
values(9,'제목9');
insert into board
values(10,'제목10');
insert into board
values(11,'제목11');
insert into board
values(12,'제목12');
insert into board
values(13,'제목13');
insert into board
values(14,'제목14');
insert into board
values(15,'제목15');
insert into board
values(16,'제목16');
insert into board
values(17,'제목17');
insert into board
values(18,'제목18');
insert into board
values(19,'제목19');
insert into board
values(20,'제목20');

테이블 생성 후 임의로 20개정도의 데이터 등록을 하였습니다.

생성된 데이터를 이용하여 DBMS별로 페이징 쿼리를 작성해보도록 하겠습니다.

MySQL 페이징쿼리

MySQL은 LIMIT 문법을 사용하여 페이징 쿼리를 만들 수 있습니다.

MySQL LIMIT 쿼리

SELECT 컬럼1,컬럼2, ... 컬럼 n
FROM 테이블명
LIMIT 시작INDEX, 뽑을데이터수

위 쿼리를 이용하여 페이징 쿼리를 만들 수 있습니다.

※ limit 다음 2개의 값을 작성해주게 되어있는데 하나만 작성 할 경우 뽑힌 data의 정의된 수 만큼 출력이 됩니다.

기존의 뽑힌 데이터를 가지고 페이지당 5개씩 출력해보도록 하겠습니다.

-- 1페이지
SELECT *
FROM board
LIMIT 0,5;
-- 2페이지
SELECT *
FROM board
LIMIT 5,5;
-- 3페이지
SELECT *
FROM board
LIMIT 10,5;
-- 4페이지
SELECT *
FROM board
LIMIT 15,5;

각 페이지별 페이징 쿼리를 작성 후 실행해 보았습니다.

MySQL 페이징쿼리 실행결과

게시판의 페이지라고 생각하고 페이지별로 데이터를 출력해보았습니다.

오라클 페이징 쿼리

오라클 경우 ROWNUM을 이용하여 페이징쿼리를 만들 수 있습니다.

ORACLE ROWNUM 쿼리

-- 1 페이지
SELECT *
  FROM (
        SELECT rownum rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 1 AND  5;
-- 2 페이지
SELECT *
  FROM (
        SELECT rownum rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 6 AND  10;
-- 3 페이지
SELECT *
  FROM (
        SELECT rownum rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 11 AND  15;
-- 4 페이지
SELECT *
  FROM (
        SELECT rownum rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 16 AND  20;

작성한 쿼리를 실행해보도록 하겠습니다.

오라클 페이징쿼리 실행 결과

MSSQL 2005버전 이상 페이징 쿼리

마지막으로 MSSQL 페이징 쿼리에 대하여 작성해보도록 하겠습니다.

MSSQL 2005부터 지원이 되는 ROW_NUMBER() 함수를 이용하여 페이징 처리를 하도록 하겠습니다.

※ MSSQL 2000버전에는 ROW_NUMBER() 지원이 되지 않습니다. 2000버전은 TOP 절을 이용하여 페이징 처리를 해줍니다.

MS-SQL 2000에 대한 페이징쿼리를 다음에 포스팅 하도록 하겠습니다.

MS-SQL 2005(+) ROW_NUMBER() OVER() 페이징 쿼리

-- 1 페이지
SELECT *
  FROM (
        SELECT row_number() over(order by idx) rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 1 AND  5;
-- 2 페이지
SELECT *
  FROM (
        SELECT row_number() over(order by idx) rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 6 AND  10;
-- 3 페이지
SELECT *
  FROM (
        SELECT row_number() over(order by idx) rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 11 AND  15;
-- 4 페이지
SELECT *
  FROM (
        SELECT row_number() over(order by idx) rnum,idx,title
          FROM board
        ) board
 WHERE rnum BETWEEN 16 AND  20;

MSSQL 2005 페이징쿼리 실행 결과는 ORACLE 페이징쿼리결과와 동일하므로 생략하였습니다.

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > sql' 카테고리의 다른 글

MSSQL,ORACLE을 이용하여 트리구조로 출력시켜주는 재귀쿼리를 만들어보자 (0)	2014.10.26
oracle,mssql,mysql 문자열 합치기 사용법을 비교해보자 (0)	2014.10.17
오라클 시퀀스 생성법과 테이블에 등록시 시퀀스 자동증가등을 알아보자 (0)	2014.10.15
MySQL과 MSSQL의 시퀀스생성 및 초기화 하는방법에 대해서 알아보도록 하자 (0)	2014.10.14
MySQL- GROUP_CONCAT 함수로 세로로 출력된 결과를 하나의 컬럼에 가로로 출력하기 (0)	2014.10.13

/57

2014. 10. 26. 23:00

MSSQL,ORACLE을 이용하여 트리구조로 출력시켜주는 재귀쿼리를 만들어보자

DBMS별 DEPTH별로 트리목록을 출력하기위한

재귀쿼리를 만들어보도록 하겠습니다.

재귀쿼리는 트리형 메뉴 혹은 부서 또는 직급별로

각 레벨이 구분되어있고 단계별로 한방에 출력하고자 할때

사용이 되는 방법(?)입니다.

이번 포스팅은 MS-SQL과 Oracle에 대하여 포스팅 하도록 하겠습니다.

MySQL에서는 재귀쿼리에 사용되는 문법이 제공되지 않아

FUNCTION을 이용하여 만들어 사용하므로

MySQL 재귀호출에 대해서는 제외하도록 하겠습니다.

슬퍼3

우선적으로 MSSQL과 오라클에 재귀호출을 하기위해서 임의의 테이블 + 데이터가 필요하겠습니다.

DBMS 공통적으로 적용할수 있는 테이블을 생성 해보도록 하겠습니다.

테이블 생성 및 데이터 INSERT(ORACLE / MSSQL 동일)

create table parent_child(
  child int,
  parent int,
  name varchar(50)
);
insert into parent_child
values(1,0,'홍길동할아버지');
insert into parent_child
values(2,0,'이순신할아버지');
insert into parent_child
values(3,0,'개발로짜할아버지');
insert into parent_child
values(4,1,'홍길동아버지1');
insert into parent_child
values(5,1,'홍길동아버지2');
insert into parent_child
values(6,3,'개발로짜아버지');
insert into parent_child
values(7,4,'홍길동아버지1의아들');
insert into parent_child
values(8,4,'홍길동아버지1의딸');
insert into parent_child
values(9,6,'개발로짜아들');

위처럼 가족관계에 대한 샘플 데이터를 생성하였습니다.

제일먼저 다루어볼 재귀쿼리는 MSSQL과 오라클 공통적으로 사용이 가능한 문법입니다.

문법은 같으나 살짝 다른 부분이 있어서 두개쿼리 나눠서 작성을 해보았습니다.

MSSQL 재귀호출 쿼리

WITH recursive_query(child,parent,name,sort,dept_name) AS (
  SELECT 
         child
       , parent
       , name
       , convert(varchar(255), child) sort  
       , convert(varchar(255), name) dept_name
    FROM parent_child
    WHERE parent = 0
    UNION ALL
    SELECT
          b.child
        , b.parent
        , b.name
        , convert(varchar(255), convert(nvarchar,c.sort) + ' > ' +  convert(varchar(255), b.child)) sort
        , convert(varchar(255), convert(nvarchar,c.dept_name) + ' > ' +  convert(varchar(255), b.name)) dept_name
    FROM  parent_child b, recursive_query c
    WHERE b.parent = c.child
) 
SELECT name, dept_name FROM recursive_query order by sort

ORACLE 재귀호출 쿼리(1)

WITH recursive_query(child,parent,name,sort,dept_name) AS (
  SELECT 
         child
       , parent
       , name
       , ''||child sort  
       , ''||name dept_name
    FROM parent_child
    WHERE parent = 0
    UNION ALL
    SELECT
          b.child
        , b.parent
        , b.name
        , c.sort || ' > ' ||  b.child sort
        , c.dept_name || ' > ' ||  b.name dept_name
    FROM  parent_child b, recursive_query c
    WHERE b.parent = c.child
) 
SELECT name, dept_name FROM recursive_query order by sort

위처럼 MSSQL과 Oracle의 문법은 동일하지만

문자열 표시의 합치는 부분의 차이로 인해서 쿼리를 두개로 나누었습니다.

또다른 차이점이라고 하면 차이일수 있겠지만

WITH recrusive_query다음에 괄호부분의 컬럼지정하는 문법은

Oracle에서는 필수지만 MSSQL에서는 제외하셔도 무방합니다.

오라클에는 추가로 재귀쿼리를 지원합니다

ORACLE 재귀호출쿼리(2)

-- name 컬럼만 출력해도 되지만 연결점을 확인하기 위한 LTRIM , SYS_CONNECT_BY_PATH를 사용해보았음
SELECT name, LTRIM (SYS_CONNECT_BY_PATH (name, ' > '), ' > ') AS dept_name
FROM parent_child 
-- 시작지점
START WITH parent = 0
-- 트리구조로 연결할 부모와 자식간의 아이디값
CONNECT BY PRIOR child=parent

오라클의 경우 호출쿼리(2) 쿼리가 간단하니

START WITH CONNECT BY문을 사용하시는게 나으실듯..

재귀쿼리 실행결과

3가지 재귀쿼리코드를 작성했었는데

결과는 모두 동일할것입니다 ^^

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > sql' 카테고리의 다른 글

MySQL,ORACLE(오라클),MSSQL 2005(+) 페이징쿼리 작성하여 동작시켜보기 (0)	2014.10.27
oracle,mssql,mysql 문자열 합치기 사용법을 비교해보자 (0)	2014.10.17
오라클 시퀀스 생성법과 테이블에 등록시 시퀀스 자동증가등을 알아보자 (0)	2014.10.15
MySQL과 MSSQL의 시퀀스생성 및 초기화 하는방법에 대해서 알아보도록 하자 (0)	2014.10.14
MySQL- GROUP_CONCAT 함수로 세로로 출력된 결과를 하나의 컬럼에 가로로 출력하기 (0)	2014.10.13

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

MySQL,ORACLE(오라클),MSSQL 2005(+) 페이징쿼리 작성하여 동작시켜보기

MSSQL,ORACLE을 이용하여 트리구조로 출력시켜주는 재귀쿼리를 만들어보자

INCLUDE 파일

에디터 샘플 html 코드

에디터 관련 스크립트 코드

send.jsp 코드

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

테스트테이블 생성 및 데이터추가

MySQL 페이징쿼리

MySQL LIMIT 쿼리

MySQL 페이징쿼리 실행결과

오라클 페이징 쿼리

ORACLE ROWNUM 쿼리

오라클 페이징쿼리 실행 결과

MSSQL 2005버전 이상 페이징 쿼리

MS-SQL 2005(+) ROW_NUMBER() OVER() 페이징 쿼리

'코드저장소 > sql' 카테고리의 다른 글

테이블 생성 및 데이터 INSERT(ORACLE / MSSQL 동일)

MSSQL 재귀호출 쿼리

ORACLE 재귀호출 쿼리(1)

ORACLE 재귀호출쿼리(2)

재귀쿼리 실행결과

'코드저장소 > sql' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역