[PHP] DB 입출력시 따옴표( ' )를 처리방법[PHP] DB 입출력시 따옴표( ' )를 처리방법

Posted at 2018. 4. 6. 14:28 | Posted in PHP
반응형




■ 따옴표를 처리하는 addslashes(), stripslashes() 함수



PHP에서 문자열에 따옴표(큰 따옴표 : ", 작은 따옴표 : ')가 들어간 내용을 DB 값으로 집어 넣을때 addslashes, stripslashes 를 사용한다.

그런데 HTML에 직접 값을 넣지않고, PHP에서 바로 출력하는 경우 문제가 생겨 간단히 정리하고자 한다.


addslashes : 문자열에 따옴표가 사입된 경우 문자열 앞에 역슬래시(\')를 붙인다.

stripslashes : addslashes를 사용한 해당 문자열의 역슬래시를 제거한다.


단순하지만 아래 출력 코드와 같이 input 트그에 값을 넣눈경우가 있어 이렇게 저리해 보고자한다.





# 소스코드

<?

// 테스트할 따옴표가 들어간 문구

$str = "Rockin' In Rhythm";


echo $str;

echo "<br/><hr/><br/>";


// addslashes를 사용하여 따옴표 앞에 역슬래시를 붙임(\')

echo "addslashes : ".addslashes($str);

echo "<br/><hr/><br/>";


// stripslashes를 사용하여 따옴표 앞에 역슬래시를 제거(\')

echo "stripslashes  : ".stripslashes($str);

echo "<br/><hr/><br/>";



// value값등에 넣을 경우 \"%s\" 식으로 따옴표를 감싸주어서 해결해야 한다.

echo sprintf("<input type='text' value=\"%s\"/>", stripslashes($str));

?>




# 출력결과





위와같이 INPUTE 타입에 콤마를 삽입하는 경우 \"%s\" 로 감싸서 해결하였다.

단순한 실수 지만 순간 왜그러지 라고 계속 생각하느라 시간을 잡아 먹어서 이렇게 정리해 본다.








반응형
//

[API] 다음 - 우편번호 API 모바일에서 사용하기[API] 다음 - 우편번호 API 모바일에서 사용하기

Posted at 2018. 4. 4. 20:11 | Posted in API/우편번호
반응형

 

 

 

■ 다음 우편번호 - 팝업창 띄우지 않고 사용하기

 

 

-. 이전 포스팅에서 팝업창을 띄워서 사용하는 방법에 대한 포스팅을 작성하였는데. 이 방법만으로는 사용에 한계가 있었다.

 ① 모바일 환경에서의 사용을 고려한 반응형 웹에서 사용가능하도록 UI 변경

 ② 팝업창 사용을 막아둔 브라우저 환경 대응

 

-. postcode.v2.js 가 나오면서 좀더 다양하고 많은 기능을 사용할 수 있게 되었다.

-. 다음 우편번호 서비스의 "iframe을 이용하여 페이지에 끼워 넣기"를 바탕으로 작성하였다.

 

 

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 다음 주소록 API ::</title>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
    function openDaumZipAddress() {

        // 우편번호 찾기 화면을 넣을 element를 지정
        var element_wrap = document.getElementById("wrap");

        // wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다.
        if(jQuery("#wrap").css("display") == "none") {
            new daum.Postcode({
                oncomplete:function(data) {
                    jQuery("#zonecode").val(data.zonecode);
                    jQuery("#address").val(data.address);
                    jQuery("#address_detail").focus();
                    console.log(data);
                }

                // 사용자가 값을 주소를 선택해서 레이어를 닫을 경우
                // 다음 주소록 레이어를 완전히 종료 시킨다.
                , onclose:function(state) {
                    if(state === "COMPLETE_CLOSE") {

                        // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
                        offDaumZipAddress(function() {
                            element_wrap.style.display = "none";
                        });
                    }
                }
                , width:"100%"  // 가로사이즈를 wrap 레이어에 맞움
            }).embed(element_wrap);

            // 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다.
            jQuery("#wrap").slideDown();
        }
        
        // warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다.
        else {

            // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
            offDaumZipAddress(function() {
                element_wrap.style.display = "none";
                return false;
            });
        }
    }

    function offDaumZipAddress() {



        // 슬라이드 업 기능을 이용해 레이어 창을 닫는다.
        jQuery("#wrap").slideUp();

    }
</script>
</head>
<body>
    <input id="zonecode" type="text" value="" style="width:50px;" readOnly/>
    &nbsp;
    <input type="button" onClick="openDaumZipAddress();" value = "주소 찾기"/>

    <!-- 다음 우편번호 찾기 리스트를 띄울 영역을 지정 -->

    <div id="wrap" style="display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px"></div>
    <div style="height:10px;"></div>
    <input type="text" id="address" value="" style="width:240px;" readOnly/>
    <input type="text" id="address_detail" value="" style="width:200px;"/>
</body>
</html>
 

 

 

※ 계속 값을 체크해 강제로 display:none 처리한 이유

 

기본적으로 위에서 설명한 다음 우편번호 서비스의

"iframe을 이용하여 페이지에 끼워 넣기"를 필자의 입맛에 맞게 수정한 내용이다.

이렇게 한 이유는 좀 자연스러운 애니메이션(슬라이드) 효과를 사용하고 싶어서 였다.

 

그래서 위 코드에서는 if(jQuery("#wrap").css("display") == "none") 으로 한번

onclose:function(state) 기능으로 또 한번

다음 주소록 레이어를 강제로 종료시키고 있는데.

이렇게 한 이유는 아래와 같다.

 

처음 제작 했을때는 slideUpslideDown 기능이 아니라 slideToggle만을 사용하여 편하게

display 설정 만을 변경해가며 사용했었다.

그런데 다음 주소록 레이어가 제대로 종료가 되지 않아서 발생을 하는지.

실제 사용중 종종 <div id="wrap"></div>를 지정한 영역에

 

 

# slideToggle 기능만을 사용한 결과물

 

 

위와 같이 실선이 생기는경우가 발견되었다.

그래서 위와같이 callback과 slideDown기능을 사용하여 레이어를 한번 닫고.

작업이 완료된 이후 한번더 다음 주소록 레이어를 완전히 숨기는 방식으로 변경하였다.

 

 

# 출력결과 - Computer Web

 

 

 

# 출력결과 - Mobile Web

 

 

위와같이 모바일에서의 사용에 문제가 없게끔 변경해 보았다.

 

 

 

 

반응형
//

[CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기[CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기

Posted at 2018. 4. 4. 11:12 | Posted in CSS
반응형




참고 : 모던 웹사이트 다지인의 정석



■ 내비게이션 메뉴를 토글 형태로




반응형 웹 제작중 컴퓨터에서 보여지는 메뉴를 모바일에 맞춘다는것은 쉬운일이 아니다.

이경우 완전히 UI 디자인을 다시 짜는경우가 많기에 화면 사이즈를 감지하고

화면 크기에 맞는 메뉴, 카테고리로 알맞게 화면에 띄워보자.




# 소스코드

<html>
<head>
<title>:: 화면크기에따른 메뉴 UI 변경 ::</title>
<style type="text/css">
.menuNav li a:hover {
    border-radius:5px;
    background-color:#FF0000;
    color:#FFFFFF;
}

.menuNav ul {
    margin:0;
    padding:0;
    list-style:none;
}

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

.menuNav li a {
    display:block;
    padding-top:10px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:10px;
    color:#000000;
    font-size:14px;
    text-decoration:none;
}

/* ############ 767px 이하 ############ */
@media(max-width:767px) {
   
    /* 토글 버튼 */
    .menuBtn {
        padding-top:6px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:2px;
        border:1px solid #AAAAAA;
        border-radius:5px;
        background-color:#FFFFFF;
        cursor:pointer;
    }

    /* 클릭시 배경색 변경 */
    .menuBtn:hover {
        background-color:#DDDDDD;
    }
   
    /* 파란색 테두리 제거 */
    .menuBtn:focus {
        outline:none;
    }
   
    .menuBtn i {
        color:#888888;
    }
   
    /* 토글버튼 글자 숨기기 */
    .menuBtn span {
        display:inline-block;
        text-indent:-999px;
    }

    .menuNav {
        display:none;
    }
}

/* ############ 768px 이상 ############ */
@media(min-width:768px) {

    /* 토글 버튼 */
    .menuBtn {
        display:none;
    }

    /* 내비게이션 */
    .menuNav {

        /* !important는 지정한 스타일의 속성이 중요하기 때문에 변경을 막기위 해지 지정한다. */
        display:block !important;
    }

    .menuNav li {
        float:left;
        width:auto;
    }
}
</style>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".menuBtn").click(function() {

        // slideToggle은 요소의 hight 값을 조작해서 움직임을 만들어 낸다.
        // 보이면 안보이게, 안보이면 보이게 처리한다.
        jQuery(".menuNav").slideToggle();
    });
});
</script>
</head>
<body>
    <!-- 모바일 화면에서 보여질 토글 메뉴 -->
    <button type="button" class="menuBtn">
        <i><img src="icon-menu.svg" style="width:20px;height:20px;"/></i><span>MENU</span>
    </button>
   

    <!-- 내비게이션 메뉴, 창크기에 맞게 변화한다.  -->

    <nav class="menuNav" id="menuNav">
        <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>
            <li><a href="#">서현숙</a></li>
        </ul>
    </nav>
</body>
</html>




# 출력결과 - Mobile Web




# 출력결과 - Computer Web






반응형
//

[PHP] 모바일 접속 여부 체크방법[PHP] 모바일 접속 여부 체크방법

Posted at 2018. 3. 29. 18:43 | Posted in PHP
반응형




참고 : http://esajin.kr/291




■ HTTP_USER_AGENT를 사용한 디바이스 확인




-. $_SERVER['HTTP_USER_AGENT']는 사용자의 웹 접속환경에 관한 정보를 담고있는 전역변수이다.

-. 사용자가 데스크탑으로 접속하였는지 모바로 접속하였는지 확인을 위해 쓰일 수 있다.



# 소스코드 - 어떤 디바이스를 통해서 접근했는지를 파악할 mobile_check.php

<?php

class module {

function mobileConcertCheck() {


            $mobileArray = array(
                  "iphone"
                , "lgtelecom"
                , "skt"
                , "mobile"
                , "samsung"
                , "nokia"
                , "blackberry"
                , "android"
                , "sony"
                , "phone"
            );


$checkCount = 0;

for($num = 0; $num < sizeof($mobileArray); $num++) {

if(preg_match("/$mobileArray[$num]/", strtolower($_SERVER['HTTP_USER_AGENT']))) {

                                        $checkCount++;

                                        break;

                        }

}


return ($checkCount >= 1) ? "mobile" : "computer";

}

}

?>




# 소스코드 - 접속 결과를 나타낼 screen_change.php

<?php

include "./mobile_check.php";

$obj = new module();


if($obj -> mobileConcertCheck() == "mobile") {

echo "현재 보고계신 화면은 모바일 입니다.";

} else {

echo "현재 보고계신 화면은 컴퓨터 입니다.";

}

?>





# 출력결과






반응형
//