'Web 프로그램'에 해당되는 글 377건

jQuery 를 이용하여 input 태그명을 각각 다르게 넘기는 코드를 작성했다.

다른 코드는 동일하므로 이전 게시글(http://link2me.tistory.com/1464)을 참조하면 된다.

Input 필드를 동적으로 추가/삭제하는 코드를 실 활용 코드 수준으로 연습하고 적어둔다.

테스트에 사용한 코드

InputAddRemovejQuery.zip

본 코드는 DB에서 읽어온 데이터를 화면에 표시하고, 데이터 수정, 추가, 삭제하는 로직이 반영된 코드는 아니다.

그냥 단순하게 name 을 배열로 받아서 여러개의 값이 어떻게 넘어가는지 확인하는 코드라고 보면 된다.

name 명칭이 다르게 생성하는 것은 아직 테스트 중이다.

css 를 이용하여 테이블을 미려하게 디자인해보자.

<style></style> 사이에 코드를 추가한다.

테이블 테두리를 만드는 속성

테두리는 border 속성으로 만든다.
table, th, td 요소에 적용할 수 있다. tr 요소에는 적용 안된다.

table 요소에 border를 적용하면 표 외각에 테두리가 그려진다.

table {
    width: 100%;
    border: 1px solid #dddddd; /* 테이블 외곽선이 그려진다 */
    border-collapse: collapse; /* 테두리 사이의 간격 제거 */

}

th, td 요소에 border를 적용하면 각 셀에 테두리가 생긴다.

- border와 padding은 상속하지 않는 속성이다.

th, td {
    border: 1px solid #dddddd; /* 각 셀의 외곽선 그리기 */

    padding: 10px; /* 테두리와 내용 사이의 간격 */

    text-align: center; /* 글자 가운데 정렬 */

    vertical-align: middle; /* 셀 안의 내용 세로 정렬 : top, middle, bottom */

}

세로선 없이 가로선만 보이게 하고  싶을 때
table {
  width: 100%;
  border-top: 1px solid #dddddd;
  border-collapse: collapse;
}
th, td {
  border-bottom: 1px solid #dddddd;
  padding: 10px;
}

제목 행에 배경색 추가하기

th {
  background-color: #bbdefb;
}

짝수행에 배경색 추가하기

tr 요소에 nth-child (가상클랙스) 선택자를 이용하여 배경색을 추가한다.

:nth-child는 형제 요소 중에서 규칙을 만족하는 요소를 선택할 때 사용한다.

an+b 대신에 odd을 쓰면 홀수번째 요소가, even을 적으면 짝수번째 요소가 선택된다.

- a와 b는 상수, n은 변수
- n은 정수 0, 1, 2, 3, ···

- even 대신에 2n 으로, odd 대신 2n + 1 로 해도 된다.

tbody tr:nth-child(even) {
    background-color: #f1f1f1;
}

테이블 행(row)에 마우스 올림 효과

table > tbody > tr:hover {
    background-color: #d1f1f1;
}

클랙스를 적용한 테이블 행에 마우스 올림 효과

table.YourClass tr:hover td {
    background-color: #d1f1f1;
}

네이버스마트 에디터를 이용하여 게시판을 만들어보려고 하니 XSS 대한 공부를 해야 할 거 같다.

크로스 사이트 스크립트란
사이트 간 스크립팅(또는 크로스 사이트 스크립팅, 영문 명칭 cross-site scripting, 영문 약어 XSS)은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.
주로 여러 사용자가 보게 되는 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어진다.
이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다.
이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행할 수 있다.
주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다.

기능을 테스트한 걸 적어둔다. 아직 완벽하게 다 기능 구현을 이해 못한거 같다.

구글링해서 찾은 코드와 여러 자료를 참조하여 함수를 만들어보고 있는 중이다.

입력 데이터

MySQL DB에 저장된 내용(html_encode 함수 이용)

검색하다보니 HTML Purifier 를 이용한 필터링을 하는 걸 추천하는거 같다.

http://htmlpurifier.org/ 에서 파일을 다운로드하여 압축을 푼다.

HTML Purifier 4.10.0 버전이 PHP5, PHP7 지원한다고 적혀있다.

기능을 테스트 해보니 $html_decode 함수인거 같다.

https://gist.github.com/kijin/5829736 에 사용법이 잘 설명되어 있다.

each 메소드와 map 메소드의 차이점을 알아보자.

위 예제를  실행해보면 결과에 차이가 난다.

$.map([], callback(elementOfArray, indexInArray))
$.each([], callback(indexInArray, element))

callback function 의 index, element(item) 위치가 서로 반대다.

each 메소드는 index 가 먼저고, 그 다음에 element 가 온다.

each 메소드

- jQuery 객체/배열의 수 만큼 반복하고, 선택된 요소들에 함수를 실행한다.

- 배열과 length 속성을 갖는 배열과 비슷한 객체들을 index를 기준으로 반복할 수 있다.

- jQuery 유틸리티 메소드 : .each(object, function(index, element) ) { 실행 함수 }

- jQuery 일반 메소드 : $(selector).each(function(index, item){ 실행함수 })

- jQuery 객체들을 위한 반복 로직을 처리하기 이해 만들어졌다.

- each 메소드에서 this 는 current element 를 가리킨다.

each 메소드는 원래의 배열을 반환(returns the original array) 하지만,

map 메소드는 제공된 배열 데이터를 변환시켜 다시 새로운 배열 객체를 반환(returns a new array)한다.

map 메소드를 과다 사용하면 많은 메모리를 낭비할 수 있다.

$(selector).each(...) 는 selector 아이템으로 반복 처리한다.
$.map() 메소드는 selector 를 사용하지 않는다.

실행결과는

each 메소드는 조건이 false를 만나면 loop 를 break 하여 결과는 1, 2 만 나온다.

map 메소드는 조건만 skip 하여 결과는 1, 2, 4, 5 가 나온다.

jQuery map()함수는 배열 데이터를 변환시켜 새로운 배열 객체를 만든다.

jQuery 1.6 부터 Object 도 지원한다.

$.map() 함수를 사용하기 위해서는 반드시 완전한 배열로 바꿔줘야 한다.

<input type="text" name="item[1]" class="item" value="1">
<input type="text" name="item[2]" class="item" value="50">
<input type="text" name="item[3]" class="item" value="12">

jQuery.map(array, callback(elementOfArray, indexInArray) )
- array : 변환할 배열
- callback(elementOfArray, indexInArray) 모든 요소에 대해 실행될 함수.
  첫번째 인자는 배열 요소(item),
  두번째 인자는 배열 인덱스

jQuery.map(arrayOrObject, callback(value, indexOrKey))
- arrayOrObject 변환할 배열 또는 오브젝트
- callback( value, indexOrKey ) 모든 요소에 대해 실행될 함수.
  첫번째 인자는 value,
  두번째 인자는 배열 또는 오브젝트의 index 또는 key

아래 코드는 위와 같은 결과를 얻어내는 jQeury 함수와 스타일 시트다.

모양을 좀 더 미려하게 보여주는 CSS 코드라고 보면 된다.

ㅇ 배열
   - 배열은 여러 개의 변수를 한곳에 저장할 수 있는 자료형이다.
   - 자바스크립트에서는 문자열과 숫자, 불, 함수, 객체와 정의되지 않은 자료형까지 총 6가지의 자료형이 존재
   - 배열은 이중 객체의 일종으로, 대괄호([])를 이용해서 생성
   - 배열 안에 입력된 값을 배열 요소라고 부른다.
   - alert(array[1]); // 배열 기호 안에 들어간 숫자를 인덱스(Index)라고 부른다.
   - for (var i in array) 은 for (var i = 0; i < array.length; i++) 와 같은 의미

ㅇ 배열 선언 방법

    - 배열 리터럴 : 대괄호([]) 내에 데이터를 나열하여 배열을 선언하고, 데이터를 할당할 수 있다.

       var arr = [데이터1, 데이터2, 데이터3, ...., 데이터 n];

    - 배열 객체 :

       var arr = new Array(); // 배열 개수 미지정 객체배열 생성

       arr[0] = 2; arr[1] = "one"; arr[2] = 5;

       var arr = new Array(3); // 배열 개수 지정

       arr[0] = 2; arr[1] = "one"; arr[2] = 5;

       var arr = new Array(1, 2, 3, 4, 5); // 배열을 선언함과 동시에 데이터를 배열에 할당

    - 다차원 배열 선언 : 자바스크립트는 기본적으로 다차원 배열을 지원하지 않는다.

      배열안에 배열을 넣는 방식으로 사용은 가능하다.

       var arr = new Array();

       var arr[0] = new Array();

       var arr[0][0] = new Array();

ㅇ 배열 객체의 메소드 및 속성

ㅇ 배열 활용

메뉴를 가로 정렬을 하고 div 배경색을 지정했는데 안먹힌다.

검색을 해보니 height:auto;min-height: 50px;overflow: hidden;  속성을 지정해주면 된다고 나온다.

box1:after 가상 선택자를 사용했더니 컨텐츠 내용에 따라 높이가 자동인식된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
@charset "UTF-8";
body {font-family: '맑은 고딕', 'Apple SD Gothic Neo', sans-serif}

.menu {list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li a {display:block;
    padding:10px;
    color:#000000;
    font-size:16px;
    text-decoration:none;}
.menu li a:hover{background-color:#75dbe7;}
.menu:after{content: "";
    display:block;
    celar:both;}
.menu li {float:left;
    width:auto;}

.box1 {background-color:#f1f1f1;}
.box1:after {content: "";
    display: block;
    clear: both;}
</style>
</head>
<body>
<div class="box1">
<ul class="menu">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>
  <li><a href="#contact">Contact Us</a></li>
  <li><a href="#map">Map</a></li>
</ul>
</div>

</body>
</html>

JSP를 사용해본 적은 없지만, 네이버지식인에 PHP 를 JSP로 변환하는 것에 대한 질문이 있어서 나중에 사용하게 될 수도 있겠다 싶어 구글링 검색한 것과 알고 있는 지식을 적어둔다.

PHP 코드

JSP 코드

메뉴 가로 정렬과 세로 정렬의 차이점을 살펴보자.

<div class="menu">
<ul>
<li><a href="#">메인</a></li>
<li><a href="#">잡화</a></li>
<li><a href="#">도구</a></li>
<li><a href="#">외출</a></li>
<li><a href="#">음식</a></li>
<li><a href="#">문의</a></li>
</ul>
</div>

li 태그도 기본적으로 세로 정렬을 한다.

가로 정렬을 하도록 하려면 float:left; 로 하고 width 속성을 auto로 지정한다.

float 는 블록 요소를 좌우 정렬시킬 때 사용한다.

float 속성 설명은 http://link2me.tistory.com/1452 참조

text-decoration: none; /* Remove underline from links */

https://www.w3schools.com/howto/howto_css_vertical_menu.asp 에 Vertical Menu 에 대해 직접 실행해 볼 수 있다.

list-style: none; /* 항목 표시가 되지 않음 */

disc : 기본값, 검은 원
circle : 원
square 사각형
decimal : 숫자(1로 시작하는 십진수)
lower-alpha  : 알파벳 소문자 (a, b, c, d, e,..)
lower-roman : 로마자 소문자 (i, ii, iii, iv, v,..)
upper-alpha : 알파벳 대문자 (A, B, C, D, E...)
upper-roman :  로마자 대문자 (I, II, III, IV, V,...)
none : 항목 표시가 되지 않음
initial  : 기본값으로 초기화

display:block; /* 요소를 block 요소처럼 표시한다. 따라서 요소 앞 뒤로 줄바꿈 된다 */

display:inline; /* 기본값, 요소 앞 뒤로 줄바꿈되지 않는다 */

display:none; /* 박스가 생성되지 않는다. 공간을 차지 하지 않는다 */

display:inline-block; /* 요소는 inline 인데 내부는 block 처럼 표시함. */

overflow : auto; /* 내용이 잘릴때만 스크롤바가 보인다 */

overflow : visible; /* 기본값으로 내용이 더 길어도 그대로 보인다 */

overflow : hidden; /* 내용이 넘치면 자른다. 자른 부분은 보이지 않는다 */

overflow : scroll; /* 내용이 넘치지 않아도 항상 스크롤바가 보인다 */

clear : float 를 해제할 때 사용한다.

clear : none /* 기본값으로 clear 를 설정하지 않는 것과 같다 */

clear : left   /* float:left 값을 취소한다. */

clear : right /* float:right 값을 취소한다. */

clear : both /* 왼쪽, 오른쪽을 취소한다 */

Layout 예제를 만들어가면서 Layout 개념을 좀 더 확실하게 익히려고 한다.

네이버지식인에 답변된 내용을 토대로 좀 수정을 하고 내용을 보강하면서 연습중이다.

bootstrap 관련 css 와 js scrpit 를 연결했더니 좀 이상하게 나와서 관련 사항은 삭제를 했다.

div 태그는 세로 정렬이 기본이다.

가로 정렬을 하기 위해서는 container div 안에 content div, aside div 를 float 로 위치를 설정한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body {background:#FFFFF;}
p {
   font-size:1.5em;
   color:#666;
   text-align:center;
   line-height:80px;
}

.wrap {
   /* 전체를  wrap으로 감싸 브라우저의 사이즈에 상관없이 가운데 정렬되게 만든다.  */
   width:800px; 
   margin:0 auto;
}

.header {
   width:100%;
   height:60px;
   background:#F8ECE0;
}

.container {}

.container div {
   height:160px;
}

.container:after {
    display: block;
    clear:both;
}

.content {
   float:left;
   width:80%;
   background:#D8D8D8;
}

.aside {
   float:left;
   width:20%;
   background:#A9E2F3;
}

.footer {
   clear:both; /* float 영향을 받지 않겠다는 의미 */
   width:100%;
   height:60px;
   background:#81DAF5;
}
</style>    
</head>
<body>
<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="container">
        <div class="content">
            <p>content</p>
        </div>
        <div class="aside">
            <p>aside</p>
        </div>
    </div>
    <div class="footer">
        <p>Footer</p>
    </div>
</div>

</body>
</html>

<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰인다.
div 태그는 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓴다.
div와 span 요소는 보통 class 속성을 같이 사용한다.

레이아웃(layout)하는 순서
1. 실제 설계도를 그리는 것처럼 메뉴바, 사이드바, 본문, 하단 등의 배치를 그려본다.
2. 그리고 남들이 직관적으로 이해할 수 있는 이름을 붙인다.
   <div id="navbar"></div>
   <div id="sidemenu"></div>
   <div id="contents"></div>
3. 스타일 주기
   - width : 너비 속성(pixel, % 가능)
   - height : 높이 속성(pixel, % 가능)
   - float : 좌우 정렬 속성(left or right)
   - background-color : 배경색 속성

   - line-height : 1.2 /* 줄 간격(텍스트를 싸고 있는 라인의 기본 높이를 설정) */

     . 숫자 : 현재 글꼴에서 몇 배 크기로 할 지 지정

     . % : 현재 글꼴 크기의 백분율로 높이를 지정

     . 길이 : em, px, pt, cm 등의 고정된 폭

     폰트 사이즈가 12px이고 line-height가 20px 이라면

     그 나머지 8px의 반인 4px씩을 그 위와 아래에 더하게 된다.

     한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋다.

     참조 : http://www.tiptech.net/lecture/html/css/line-height.html
4. 여백 주기
   - margin : 객체와 객체 사이의 공간
     margin-top (상단 여백)
     margin-right (오른쪽 여백)
     margin-bottom (아래 여백)
     margin-left (왼쪽 여백)
     table {
      margin: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
     }
5. border : 선 굵기
   - border-width : border의 width 값을 지정
     p {border-top: thick solid #ff0000;} // CSS 문법
     object.style.border="3px solid blue" // 자바스크립트 문법

   - border-style : border의 style 값을 지정 (4방향의 테두리에 적용될 선의 스타일을 지정)
     . none : border 스타일을 지정하지 않는다.
     . hidden : none 속성값과 같다.
     . dotted, dashed, solid, double, groove, ridge, inset, outset
     .inherit : 부모 요소로부터 값을 상속 받는다
     object.style.borderStyle="dotted double" // 자바스크립트 문법

   - border-color : border의 color 값을 지정 (4방향의 테두리에 적용될 색상을 지정)
     h4 {border-color: red;} /* all four borders are red */
  
6. padding : 내용과 border 사이의 공간

7. float 속성

   - float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성이다.
   - float 속성은 left, right, none 만 있다.
   - float 속성의 default 는 none(띄우지 않음)이다.
   - inline 으로 float 속성 설정
     <img src="imags.png" style="float:left;" >
   - css 이용한 float 속성 설정
     <style type="text/css">
     img { float:left; }
     </style>

   - float 속성 값을 right 로 지정하면 첫번째 박스부터 순서대로 오른쪽으로 붙게 된다.
   - 이미지에다가 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 둘러싼 형태가 된다.
     이미지 좌우에 글자가 오는 걸 방지하려면 clear 속성을 설정한다.
     이미지가 float:left 상태인데 clear:left를 해 주면 글자가 글자가 이미지 아래로 내려간다.

   - clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성이다.

8. div 속성 배우기

    - 아무런 설정을 하지 않은 div는 세로 정렬을 한다.

    - 가로 정렬을 하려면 div 태그로 감싸고 float, width 속성값을 추가한다.

    <div class="boxA">
     <div class="box1">
         BOX1
     </div>
     <div class="box2">
        BOX2
     </div>
    </div>

       <style>
            .boxA {
                border: solid 1px #00a0e9;
                background-color: #a0e0fe;
                color: #00a0e9
            }
            .boxA:after {
                display: block;
                clear: both; // float 의 영향을 받지 않겠다는 의미
            }

            /* BOX1와 BOX2를 가로 정렬 */
            .box1 { float: left; width:50%; }
            .box2 { float: left; width:50%; }
        </style>

    - 가로로 정렬한 div의 너비가 100%를 넘으면 옆으로 빠져나온 div가 아래로 내려가서 출력된다.

    - box1 div width를 고정(250px)하고 싶다면 ... (왼쪽 div 고정)

            .boxA:after {
                content: "";
                display: block;
                clear: both
            }
            /* BOX1와 BOX2를 가로 정렬 */
            .box1 { float: left; width:250px; }
            .box2 { float: none; width:auto;margin-left: 250px; }

    - box2 div width 를 고정(250px)하고 싶다면.... (오른쪽 div 고정)

            .boxA:after {
                content: "";
                display: block;
                clear: both;
            }

            .box1 {
                float: left;
                width: 100%;
                margin-right: -250px;
                padding-right: 250px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .box2 {
                float: left;
                width: 250px
            }

     - 반응형 웹 다지인 : 브라우저 화면의 크기에 따라 가로정렬, 세로정렬 상태를 변경

       . 반응형 웹 : Device 가 모바일, 테블릿, PC에 구분없이 이용 가능한 템플릿을 이용하여 개발한다.

       . https://startbootstrap.com/ 에서 템플릿을 다운로드 한다.

       . 템플릿을 수정하여 화면의 변화를 확인하면서 class 의 내용을 확인한다.

       . 직접 작성하는 반응형 웹 디자인은 "모던 웹사이트 디자인의 정석" 책과

         홈페이지에서 소스코드를 받아서 직접 테스트하면서 해보면 도움된다.

9. 색상 선택

    - https://html-color-codes.info/Korean/ 에서 색상을 선택하면 관련 코드가 나온다.

    - 기본적인 활용 코드는 http://www.color-hex.com/ 를 참조하면 좋다.

    - https://www.w3schools.com/colors/colors_names.asp 에서 다양한 색상을 참조할 수 있다.

10. 스마트폰 레이아웃 주의사항

- overflow 속성을 사용해서 스크롤을 넣을 수 없다.
- 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다.
- 동위 선택자에 제한이 있다.
- 선택자에 ~를 지원하지 않는 브라우저가 있다.
- iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다.
- 그래디언트 적용이 불가할 수 있다.

<form name='my_form'>
  <input type='button' id='my_button' value='개수 카운트' />
  <hr>
  <input type='text' name='tag' class='chk0' value='1' />
  <input type='text' name='tag' class='chk0' value='2' />
  <input type='text' name='tag' class='chk0' value='3' />
  <input type='text' name='tag' class='chk0' value='' />
  <input type='text' name='tag' class='chk0' value='' />
</form>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#my_button").click(function() {
    //alert($("input[class='chk0']").length); // 전체 개수
    var count = 0;
    $('.chk0').filter(function() {
        if(this.value.trim().length > 0){ // 체크한 것의 개수
            count++;
        }
    });
    alert(count);

});
</script>

체크된 체크박스 value 가져오기

전체선택/해제 하는 jQuery 코드와

개별적으로 선택된 값을 가져오고 가져온 개수가 몇개인지 파악하는 코드다.

prop()는 현재 설정된 속성값과 입력폼의 체크등의 여부를 확인 가능한 매우 유용한 속성이다.

결과로 체크 여부에 따라 boolean 타입의 true, false가 반환된다.

$("input:checkbox[id='ID']").prop("checked");

$("input:checkbox[name='NAME']").prop("checked");

$("input:checkbox[name='class[2]']").prop("checked",true); // 배열 사용시 따옴표를 넣어야 인식되더라.

$("input:checkbox[id='class3']").prop("checked",true);

is() 메소드는 해당하는 요소의 상태에 따라 옳고 그름을 불리언으로 반환한다.
$(this).is(":checked");

if($("input:checkbox[id='ID']").is(":checked") == true){ }

http://bytutorial.com/blogs/jquery/jquery-get-selected-checkboxes 를 참조하면 된다.

개수만 체크하는 경우에는 이렇게 하면 더 편하다.

PHP 에서 write.php 만들 때 textarea 만 포함하면 텍스트 형태로만 저장되어 표현의 다양성이 부족하다.

그래서 스마트에디터를 검색해보니 오픈소스인 네이버 스마트에디터(smart editor)를 연동하면 된다고 나온다.

자료를 많이 검색해도 잘 이해가 안되어 개념 잡는데 고생을 좀 했다.

네이버 스마트에디터(SmartEditor)는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기다.

연동에 필요한 사항 전부를 하나 하나 작성해둔다.

1. 네이버 스마트 에디터 다운로드

   스마트에디터2.0 오픈소스는 github으로 이전했다.

    https://github.com/naver/smarteditor2/releases 에서 받아야 한다.

    스마트에디터3.0은 2.0버전과 동작방식이 전혀 다르고 설치형이 아니라 서비스형이다.

    네이버는 오픈소스 계획이 없다.

2. 스마트 에디터 설치 준비

    - 압축을 풀어서 plugin/editor/ 폴더에 복사를 한다.

      다른 API 도 연동할 수 있으므로 plugin 폴더를 만들고 그 하위 폴더에 위치시켰다.

    - readme.txt 파일을 보면 ....

      /css : 에디터에서 사용하는 css 파일
      /img : 에디터에서 사용하는 이미지 파일
      /js : 에디터를 적용할 때 사용하는 JS 파일
      /photo_uploader : 사진 퀵 업로더 팝업 UI를 구성하는 파일

3. 스마트 에디터 연동 과정

   - smart editor 본문에 이미지를 추가하면 sample/photo_uploader/file_uploader.php 가 동작된다.

     이미지가 file_uploader.php 에서 지정한 폴더에 저장된다.

   - 원하는 폴더에 저장되게 하고 싶다면 file_uploader.php 를 수정한다.

   - 이미지가 저장되면 코드가 자동으로 생성되어 smart editor 본문에 추가된다.

   - 저장된 이미지의 경로명을 DB에 저장하고 싶다면 저장할 테이블을 만들고 아래 코드로 추출한다.

     // 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
     preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $getImageSrcPaths);

     $b->bbs_imgSaveDB($getImageSrcPaths[1],$uid); // 이 코드는 개발자가 직접 구현 필요

4. 코드 예시

=== writeForm.php ===

=== se2_insert.js ===

=== delete.php ===

=== write.php ===

5. Smart Editor2에서 이미지 삽입 후 정렬이나 크기 조정 옵션을 설정 하는 방법
   GitHub : https://github.com/naver/smarteditor2/issues/36 를 참고하라고 나오네요.(이건 테스트 안해봤음)

실력이 부족해서 여기까지 알아내는데도 많은 시간이 걸렸다.

이미지 저장 처리 함수는 여기에 적어두지 않는다. 그 부분은 직접 로직 설계를 하면서 구현 ....

깔끔한 모양의 팝업창처럼 보여주는 기능이다.

자세한 설명은

https://inspirationalpixels.com/tutorials/custom-popup-modal 을 참조하면 된다.

본 예제 코드는 첨부파일 참조

popup_jQuery.zip

PHP Code 상에서 데이터베이스(DB)와 테이블을 생성하는 코드 예제를 만들었다.

코드는 bootstrap 기반으로 구현했다.

테스트에 사용한 코드를 첨부한다.

테스트 환경 : 윈도우10 autoset9 APM(apache + PHP + MySQL)

dbcreate.zip

<!DOCTYPE html>
<head>
<title>DB 생성 및 테이블 생성</title>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $("#create").click(function(){
       if(!form.hostname.value) {
          alert('Host명을 입력하세요!');
          form.host.focus();
          return false;
       }
       if(!form.dbuser.value) {
          alert('DB User가 입력되지 않았습니다!');
          form.dbuser.focus();
          return false;
       }
       if(!form.dbpasswd.value) {
          alert('DB Password를 입력하세요!');
          form.dbpasswd.focus();
          return false;
       }
       if(!form.dbname.value) {
          alert('DB Name을 입력하세요!');
          form.dbname.focus();
          return false;
       }
       form.submit();

    });
});
</script>
</head>

<body topmargin=50>
<?php
if(!empty($_POST['dbpasswd']) && !empty($_POST['dbname'])) {
    // DB 연결
    $conn = mysqli_connect("localhost",$_POST['dbuser'],$_POST['dbpasswd']);
    if(mysqli_connect_errno()){
        echo "MySQL 연결 오류 : ".mysqli_connect_error();
    }

    // Create Database
    $sql ="Create DATABASE IF NOT EXISTS  ".$_POST['dbname']." default character set utf8";
    if(mysqli_query($conn,$sql)){

        //echo '<script>alert("Created DATABASE");</script>'; // $sql 결과 테스트 용도

        // dbinfo.php 파일에 기록
        $myfile = fopen("dbinfo.php", "w") or die("Unable to open file!");
        fwrite($myfile, "<?php\n");
        $host = "\$db['host'] = 'localhost';\n";
        fwrite($myfile, $host);
        $dbname = "\$db['name'] = '".$_POST['dbname']."';\n";
        fwrite($myfile, $dbname);
        $dbuser = "\$db['user'] = '".$_POST['dbuser']."';\n";
        fwrite($myfile, $dbuser);
        $dbpasswd = "\$db['pass'] = '".$_POST['dbpasswd']."';\n";
        fwrite($myfile, $dbpasswd);
        $dbport = "\$db['port'] = '3306';\n";
        fwrite($myfile, $dbport);
        fwrite($myfile, "?>\n");
        fclose($myfile);
    } else {
        echo "DB 만들기 오류 : ".mysqli_error($conn);
        echo "<script>location.replace('dbcreate.php')</script>";
    }

    require_once 'dbconnect.php'; // DB 생성후 DB명까지 인식되는 db연결 필수

    // pollinfo 테이블 생성 (테이블 생성 예시로 반드시 MySQL에서 직접 실행해본 테이블을 적어야 한다.)
    $sql = "CREATE TABLE IF NOT EXISTS pollinfo(
        uid int(11) NOT NULL AUTO_INCREMENT,
        question varchar(100),
        start_date date,
        end_date date,
        now_progress char(1),
        select1 varchar(50),
        select2 varchar(50),
        select3 varchar(50),
        select4 varchar(50),
        select5 varchar(50),
        select6 varchar(50),
        select7 varchar(50),
        select8 varchar(50),
        select9 varchar(50),
        select10 varchar(50),
        poll_type char(1),
        no_item tinyint(2),
        PRIMARY KEY(uid)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1";
    mysqli_query($db,$sql);

    $sql = "CREATE TABLE IF NOT EXISTS pollresult(
        uid int(11) not null auto_increment,
        no_poll    int(10) default '0' not null,
        no_select tinyint(4),
        user_ip    varchar(15),
        submit_date    datetime,
        PRIMARY KEY(uid)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1";
    mysqli_query($db,$sql);

    echo "<center><font size=2>설문조사 테이블이 성공적으로 생성 되었습니다.</font></center>";
    echo "<script>location.replace('index.php')</script>";
    exit;

} else {
    //echo '<script>alert("입력된 값이 없습니다");</script>';
}
?>

<div class="container">
<h4 align=center><b>◎◎ 데이타베이스 생성 및 테이블 생성 ◎◎</b></h4>
<form name="form" method="post" action="dbcreate.php">
    <table class="table table-striped">
        <tr>
        <td colspan="3" align=center>DataBase Create Configuration</td>
        </tr>

        <tr>
        <td>Host Name</td>
        <td><input type="text" name="hostname" value="localhost" size="20"></td>
        <td>접속할 호스트 이름</td>
        </tr>

        <tr>
        <td>User Name</td>
        <td><input type="text" name="dbuser" value="root" size="20"></td>
        <td>MySQL 사용자 이름</td>
        </tr>

        <tr>
        <td>User Passwd</td>
        <td><input type="password" name="dbpasswd" value="autoset" size="20"></td>
        <td>MySQL 사용자 비밀번호</td>
        </tr>

        <tr>
        <td>DB Name</td>
        <td><input type="text" name="dbname" value="" size="20"></td>
        <td>생성할 MySQL DB이름</td>
        </tr>

        <tr>
        <td colspan=3>
        <div align='center'>
            <button type="submit" class="btn btn-primary" id="create">DB생성</button>
            <button type='reset' class="btn btn-warning">취소</button>
        </div>
        </td>
        </tr>

    </table>
</form>
</div>
</body>
</html>

PHP 검색어를 입력하면 색상이 다르게 표시해주는 함수다.

아래 간단한 함수 highlight 와 highlightkeyword 차이를 비교해보면 영문 검색시 차이가 난다. 한글 검색은 highlight 함수로도 충분하다.

네이버스마트 에디터로 작성한 view.php 에서 검색을 해보니 highlight 가 정상적으로 잘 보인다.

<?php
function highlight($text='', $keyword=''){
  if(strlen($text) > 0 && strlen($keyword) > 0) {
    return (str_replace($keyword, "<span style=\"color:red;\">$keyword</span>", $text));
  }
   return ($text);
}

function highlightkeyword($str, $search) {
    // 영어 대문자, 소문자 구분없이 검색
    $highlightcolor = "#FE2E2E";
    $occurrences = substr_count(strtolower($str), strtolower($search));
    $newstring = $str;
    $match = array();
 
    for ($i=0;$i<$occurrences;$i++) {
        $match[$i] = stripos($str, $search, $i);
        $match[$i] = substr($str, $match[$i], strlen($search));
        $newstring = str_replace($match[$i], '[#]'.$match[$i].'[@]', strip_tags($newstring));
    }
 
    $newstring = str_replace('[#]', '<span style="color: '.$highlightcolor.';">', $newstring);
    $newstring = str_replace('[@]', '</span>', $newstring);
    return $newstring;
 
}

$str="진실을 깨닫도록 시도해 보세요... 생명이 느껴지시나요? 생명의 빛을 느껴보세요.";
$str="The을 깨닫도록 시도해 보세요... the 느껴지시나요? the의 빛을 느껴보세요.";
$keyword ='the';
echo highlight($str, $keyword);

echo '<br />';
echo highlightkeyword($str, $keyword);
?>

출처 : https://tomelliott.com/php/highlight-search-keyword-string-function

<form> 태그

- <form>태그는 사용자의 데이터를 서버로 전송해 줄 수 있는 기능의 태그이다.

- 입력양식의 모든 태그들은 반드시 <form>~ </form>사이에 기록되어져야 한다.

- <form>태그의 구조

   Action:  폼의 데이터를 처리해주는 화일명이 온다.
   enctype: 폼의 데이터를 전송 시 암호화 방법 지정
   method: 폼의 데이터를 전송하는 방법 지정(get,post)
   name: 폼의 이름, 자바스크립트에서 사용

<input type="submit" name="" value="전송">

- submit : 입력된 내용을 서버측으로 보냄

<input type="reset" name="" value="취소">

- reset : 입력된 내용을 공백으로 만듬

여러개의 체크 박스에서 $_POST 가져오기
체크박스 name뒤에 배열형태로 []를 붙여주면 된다.
여러개의 name 이 존재한다면 check_list[] 처럼 배열형태로 보내주면 받을 때도 배열형태로 받을 수 있다.

checkbox 부분에서 value 부분은 예시라서 for 문 또는 foreach 문으로 값을 넣어야 하는 것은 생략했다.

<script>
function checkForm(frm){
    var chkbox = frm['check_list[]'];
    var cnt = 0;

    for (var i = 0 ; i < chkbox.length; i++) {
        if (chkbox[i].checked) {
           cnt++;
        }
    }

    if(cnt == 0){
        alert('선택된 체크박스가 없습니다');
        return false;
    }

    document.frm.action = "delete.php";
    document.frm.submit();
}
</script>
<form name="frm" method="POST" action="javascript:checkForm(document.frm);">
    <input type="checkbox" name="check_list[]" value="<?=$R[$i]?>" />
    <input type="checkbox" name="check_list[]" value="<?=$R[$i]?>" />
    <input type="checkbox" name="check_list[]" value="<?=$R[$i]?>" />
</form>

=== delete.php ===

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['check_list'])){
    $flag = false;
    foreach($_POST['check_list'] as $item){
        $sql ="delete from test where item='".$item."'";
        if(!mysqli_query($dbconn,$sql)){
            die('Error:'.mysql_error());
        } else {
            $flag = true;
        }
    }

    if($flag == true){
        echo "<script>location.href='index.php';</script>";
    }
}
?>

게시판 본문에 이미지가 여러개 삽입되어 있을 때 이를 추출해서 DB에 저장하는 용도로 활용.

// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $matches);

// img 태그 전체 추출하기
echo '<pre>';print_r($matches[0]);echo '</pre>';

// src 값만 추출하기
echo '<pre>';print_r($matches[1]);echo '</pre>';

// 본문 내용을 텍스트만 일부 표시하려는 경우 태그 제거

$contents = strip_tags($content);

// 게시판에 저장되어 있는 이미지 태그 제거 하기
$content = preg_replace("@<img.*?>@", "", $content);