이국진의 개발블로그

전화번호의 형태가 010-1234-5678의 형태에서 01012345678의 형태로 변환하기 위해서는 str_replace() 함수를 사용한다.

바뀐 값을 저장할 변수 = str_replace("바꿀 기호", "바뀐 기호", 바꿀 기호가 저장된 변수명); 의 형태로 사용한다.

<?php
$phone_num = str_replace("-", "", $a);
?>

010-1234-5678의 값이 저장된 $a를 str_replace() 함수를 사용하여 "-"(hyphen) 기호를 처음에 넣고 그 다음에 "" 로 교체하는 부분을 두번째에 넣고 $phone_num에 저장한다.

$phone_num을 출력해보면 01012345678의 형태로 "-"(hyphen) 이 없어진 값으로 들어가게 된다.

2016/02/11의 형태로 된 날짜도 2016.02.11의 형태로 바꾸는 것도  str_replace("/", ".", $date)  로 쉽게 변경이 가능하다.

체크박스를 여러개 선택해서 값을 넘길려고 할 때 아래와 같이 box[ ] 배열로 만들어서 바로 서버로 넘겨도 된다.

서버에서 반복문으로 푸는 방법과 스크립트에서 반복문으로 풀어서 서버로 넘기는 방법이 있다.

아래와 같은 체크박스 태그가 반복문을 통해 여러개 있을 경우 태그명을 class를 이용해야 한다.(id는 유일한 이름)

<input type="checkbox" name="box[]" value="a" class="checkSelect">
<input type="checkbox" name="box[]" value="b" class="checkSelect">
<input type="checkbox" name="box[]" value="c" class="checkSelect">
<input type="checkbox" name="box[]" value="d" class="checkSelect">
<input type="checkbox" name="box[]" value="e" class="checkSelect">

box[0].val() => a

box[1].val() => b

box[2].val() => c

…

이러한 형태로 되어있는 것을 

아래 코드를 통해 id=array라는 태그의 value 값으로 a,b,c,d,e 의 형태로 넣는다.

<script>
var send_array = Array();
var send_cnt = 0;
var chkbox = $(".checkSelect");

for(i=0;i<chkbox.length;i++) {
    if (chkbox[i].checked == true){
        send_array[send_cnt] = chkbox[i].value;
        send_cnt++;
    }
}

$("#array").val(send_array);
</script>

send_array라는 배열 변수를 선언하고.

배열의 index를 넣을 send_cnt와 체크박스의 이름인 .checkSelect를 chkbox라는 변수로 선언을 한다.

for문을 이용해서 

box[0].val() => a

box[1].val() => b

box[2].val() => c        이러한 형태의 값들을 하나씩 send_array[i]에 넣는다.

send_array를 출력해보면 a,b,c,d,e 와 같은 형태로 , 로 구분하여 저장된다.

그걸 value 값에 넣어 서버로 보내면 서버에서 반복문을 실행하지 않아도 여러개의 값들을 쓸 수 있다.

*a,b,c,d,e의 형태로 넘어간 값들은 SELECT, DELETE 문을 사용할때 wehre user_name in ('send_array') 와 같은 형태로 사용할 수 있다.

DB에 저장된 전화번호(휴대폰번호) 형식에서 01012345678과 같은 형식으로 저장되는 경우도 있다.

이러한 형식의 전화번호를 010-1234-5636으로 짜르고 "-"를 넣어 변환하는 방법은 다음과 같다.

function format_phone($phone){
    $phone = preg_replace("/[^0-9]/", "", $phone);
    $length = strlen($phone);

    switch($length){
      case 11 :
          return preg_replace("/([0-9]{3})([0-9]{4})([0-9]{4})/", "$1-$2-$3", $phone);
          break;
      case 10:
          return preg_replace("/([0-9]{3})([0-9]{3})([0-9]{4})/", "$1-$2-$3", $phone);
          break;
      default :
          return $phone;
          break;
    }
}

먼저 전화번호를 짜르기 위한 함수를 만든다.

대부분이 사용하는 휴대폰번호는 11자리(01012345678)이다. 그럴 경우 3자리(010), 4자리(1234), 4자리(5678)와 같이 나누고 그 사이에 "-"를 넣는다.

switch문을 이용하여 변수의 길이를 파악하고 해당 자리 수에 맞는 형식으로 preg_replace로 자른 부분에 - 를 넣고 바뀐 것으로 return 한다.

$format_phone = format_phone($phone);

다음과 같이 DB에서 넘어온 값을 format_phone() 함수에 넣고 리턴 값을 변수에 저장하면 된다.

$format_phone을 출력하면 010-1234-5678과 같이 - 가 입력된다.

스마트 에디터에서 큰 사진을 첨부하게 되면 에디터 내에서 크게 이미지가 불러오는 경우가 있다. (서버에서 이미지를 줄일 수 있음.)

서버에서 이미지 크기를 줄이지 않고 에디터 내에서만 이미지를 줄이는 방법이 있다.

SmartEditor => photo_uploader => plugin => hp_SE2M_AttachQuickPhoto.js 에 들어가서

    _getPhotoTag : function(htPhotoInfo){
        // id와 class는 썸네일과 연관이 많습니다. 수정시 썸네일 영역도 Test
        var sTag = '<img src="{=sOriginalImageURL}" title="{=sName}" width="600px;">';
        if(htPhotoInfo.bNewLine){
            sTag += '<br style="clear:both;">';
        }
        sTag = jindo.$Template(sTag).process(htPhotoInfo);
        
        return sTag;
    }

var sTag에서 width="600px"를 추가해준다.

게시판에서 전체 선택을 체크하는 경우가 생긴다. 

그럴 경우 맨 위에 체크박스(checkbox)를 클릭할 시 아래 체크박스들의 속성으로 checked를 넣는다는 방식으로 하면 된다.

$(document).on("click", "#checkAll", function(){
    if (! $('#checkAll').attr('checked')) {
            $('.checkSelect').attr('checked', false);
    }else{
        $('.checkSelect').attr('checked', 'checked');
    }
});

아래는 테이블의 제목인 체크박스이다.

<th><input type="checkbox" name="" id="checkAll" /></th>

<td><input type="checkbox" name="chk_box" class="checkSelect"/></td>

테이블 제목에 있는 체크박스를 클릭할 경우 #checkAll의 속성에 checked가 없을 경우 나머지 체크박스들의 checked를 false로 바꾸고(선택 해제)

만약 체크되어있다면 체크박스들의 속성을 checked, checked로 넣는다는 것이다.(전체 선택)

만약 전체 선택 후에 개별 체크부분을 누를 경우 전체 선택이 해제되야되기 때문에 그 부분도 스크립트를 넣어야한다.

$(document).on("click", ".checkSelect", function(){
    $("#checkAll").attr('checked', false);
});

.checkSelect (개별선택)을 클릭(해제)했을 경우 #checkAll(전체선택)의 속성에서 checked를 false로 선택해제한다.

<select id="customSelect" onchange="SetSelectBox();">
    <option value="title">전체</option>
    <option value="board_title">제목</option>
    <option value="reg_id">작성자</option>
</select>

select box에서 항목을 선택할 경우 onChange로 스크립트에 SetSelectBox() 함수를 실행한다.

function SetSelectBox(){
    var schField = $("#customSelect option:selected").text(); //전체, 제목, 작성자
}

다음과 같이 $("#customSelect option:selected").text()를 하면 "제목"이라는 텍스트를 가져온다.

function SetSelectBox(){
    var schField = $("#customSelect option:selected").val(); // title, board_title, reg_id
}

$("#customSelect option:selected").val()을 쓸 경우 "board_title"을 가져온다.

특정 값을 받고 그 부분을 선택하는 옵션을 넣고 싶은 경우 아래와 같이 한다.

if(schField == "제목"){
    $("#customSelect").val("board_title").prop("selected", true);
}

schField 값이 "제목"일 경우 board_title의 값을 가진 부분에 selected 옵션을 추가한다.

게시글을 등록할 경우 제목과 내용을 테이블에 넣는 쿼리 부분과 파일첨부에 대한 정보를 다른 테이블에 넣을 경우 게시물 PK(primary key) 값이 필요하다. 그래야 그 파일첨부한 정보가 어떤 게시물에 대한 파일인지 알기 때문이다.

INSERT 문을 실행하고 방금 넣은 쿼리에 대한 PK값을 반환하는 함수가 필요하다.

    $sql = "INSERT INTO t_board (
                board_title, board_contents
            ) VALUES (
                '".$board_title."', '".$board_contents."'
            )";

    $result = mysql_query($sql);
    $board_no = mysql_insert_id();

mysql_insert_id()를 통해서 값을 얻어올 수 있다.

$board_no 변수 안에 방금 실행한 쿼리문의 PK가 담긴다.

다중 파일첨부한 내용을 표현할때 반복문을 사용하여 태그를 추가한다. 이때 같은 태그를 반복하기 때문에 같은 클래스명으로 추가 된다. 따라서 스크립트를 사용할때 제약이 걸린다. 

이때 태그 안에 data-item을 사용한다.(아래 div 코드가 여러개 존재)

<div id="file_div_<?= $row['file_no'] ?>">
    <input type="button" id="<?= $row['file_no'] ?>" onclick="del_file(this)" 
    data-item="<?= $row['file_no'] ?>" value="삭제하기">
</div>

반복문으로 여러개가 추가 됐을 input 태그에서 onclick으로 아래의 함수를 실행하고 자바스크립트로 값을 받아오고 로직을 처리한다.

function del_file(file_no){
    var file_no = file_no.getAttribute("data-item");
    console.log(file_no);
    $("#file_div_"+file_no).remove();
    $("#delete_file_list_div").append('<input name="delete_file[]" type="hidden" value="'+file_no+'" id="delete_file"/>');
}

스마트에디터를 사용한 Textarea의 빈값(유효성)을 체크하는 부분은 아래 코드를 사용합니다.

    function submitContents() {
        var elClickedObj = $("#form");
        oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
        var ir1 = $("#ir1").val();

        if( ir1 == ""  || ir1 == null || ir1 == '&nbsp;' || ir1 == '<p>&nbsp;</p>')  {
             alert("내용을 입력하세요.");
             oEditors.getById["ir1"].exec("FOCUS"); //포커싱
             return;
        }

        try {
            elClickedObj.submit();
        } catch(e) {}
    }