현대마법의 IT공방

'전체 글'에 해당되는 글 256건

[PHP] PHP QR코드 이미지 저장하고 띄우기[PHP] PHP QR코드 이미지 저장하고 띄우기

Posted at 2018. 3. 16. 12:35 | Posted in PHP/PHP Library

■ <img>태그를 사용하여 QR코드 불러오기

# 소스코드01 - QR코드를 생성하는 php_qrcode_01.php

<?php

include_once "./phpqrcode/qrlib.php";

ob_start("colback");

$codeText = "안녕하세요 반갑습니다.";

$debugLog = ob_get_contents();

ob_end_clean();

QRcode::png($codeText);

# 소스코드02 - <img>태그를 사용하여 QR코드를 불러올 php_qrcode_02.php

<?php

echo "<img src='php_qrcode_01.php'/>";

# 출력결과

■ QR코드를 이미지로 저장하고 가지고오기

# 소스코드

<?php
    include_once "./phpqrcode/qrlib.php";

    $codeContents = "WickedMISO";
    $filePath = md5($codeContents).".png";

    if(!file_exists($filePath)) {
        QRcode::png($codeContents, $filePath);
        echo "파일이 정상적으로 생성되었습니다.";
        echo "<hr/>";
    } else {
        echo "파일이 이미 생성되어 있습니다.\n파일을 지우거나 이름을 바꾸어 실행하세요.";
        echo "<hr/>";
    }

    echo "저장된 파일명 : ".$filePath;
    echo "<hr/>";
    echo "<img src='".$filePath."'/>";
?>

# 출력결과

# 파일생성

※ QR코드를 정상적으로 성공하는데 성공했다면, 이제 QR코드의 스캔하여 그 데이터를 가져와 보자.

참고 : [JavaScript ] QR CODE 스캐너 제작 - jsQR 사용

저작자표시

'PHP > PHP Library' 카테고리의 다른 글

[PHP] SimpleSql 라이브러리를 사용한 손쉬운 쿼리사용 (1)	2018.04.16
[PHP] PHP 메일 발송 (5)	2018.04.10
[PHP] PHPExcel 엑셀 파일 업로드 하고 내용 읽기 (0)	2018.03.22
[PHP] PHPExcel 설치하고 엑셀파일 다운받기 (0)	2018.03.21
[PHP] PHP QR코드 세팅하기 (0)	2018.03.15

[PHP] PHP QR코드 세팅하기[PHP] PHP QR코드 세팅하기

Posted at 2018. 3. 15. 01:02 | Posted in PHP/PHP Library

■ PHP QR Code 설치하기

-. QR코드를 생성하기 위해서는 PHP GD가 사용 가능한 상태여야 한다.

-. php.ini를 오픈하여 extension=php_gd2.dll 파일이 사용가능한 상태인지 확인해 보자.

사용이 가능하지 않은 상태라면 extension=php_gd2.dll의 주석( ; )을 제거하고 Apache 를 재시작 한뒤 진행해야 한다.

01. https://sourceforge.net/projects/phpqrcode/files/ 사이트에 접속하여 PHP QR Code 라이브 러리를 다운받는다.

02. 잠시 기다리고 있으면 phpqrcode.zip 파일을 다운받을 수 있다.

03. 다운받은 phpqrcode.zip 파일의 압축을 해제한다.

■ PHP QR Code를 사용하여 QR코드 생성하기

# 소스코드

<?php

// 압축을 해제한 phpqrcode 폴더의 grlib.php 파일을 include한다.

include_once "./phpqrcode/qrlib.php";

// 출력 버퍼 사용 시작!!

ob_start("colback");

$codeText = "안녕하세요 반갑습니다.";

// 출력 버퍼의 내용을 변수로 저장한다.

$debugLog = ob_get_contents();

// 출력 버퍼의 내용을 출력하지 않고, 출력 버퍼를 비우고 종료한다.

// 출력 버퍼의 내용은 반드시 비워야 한다.

ob_end_clean();

QRcode::png($codeText);

# 출력결과

위와같이 QR코드가 정상적으로 생성되는것을 확인할 수 있다.

저작자표시

'PHP > PHP Library' 카테고리의 다른 글

[PHP] SimpleSql 라이브러리를 사용한 손쉬운 쿼리사용 (1)	2018.04.16
[PHP] PHP 메일 발송 (5)	2018.04.10
[PHP] PHPExcel 엑셀 파일 업로드 하고 내용 읽기 (0)	2018.03.22
[PHP] PHPExcel 설치하고 엑셀파일 다운받기 (0)	2018.03.21
[PHP] PHP QR코드 이미지 저장하고 띄우기 (0)	2018.03.16

[jQuery] 쇼핑몰 대표 이미지 상품박스[jQuery] 쇼핑몰 대표 이미지 상품박스

Posted at 2018. 3. 14. 09:34 | Posted in JavaScript & jQuery/jQuery

■ onMouseover를 통한 이미지 변경

# 소스코드

<html>
<title>:: 상품박스 ::</title>
<head>
<style type="text/css">
   .represent {
       border:1px solid #FF0000;
       width:460px;
       overflow:auto;
   }

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

   li {
       margin:0 0 0 0;
       padding:0 0 0 0;
       border:0;
       float:left;
       width:20%;
   }

   img {
       width:100%;
   }
</style>
</head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
function changeRepresentImage(num) {
    var link = jQuery(".imgServe").eq(num).attr("src");
    jQuery("#imgRepresent").attr("src", link);
}
</script>
<body>
    <div class="represent">
        <img id="imgRepresent" src="./image/Box_01.png" style="width:460px;height:460px;"/>
        <ul>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('0');">
                    <img class="imgServe" src="./image/Box_01.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('1');">
                    <img class="imgServe" src="./image/Box_02.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('2');">
                    <img class="imgServe" src="./image/Box_03.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('3');">
                    <img class="imgServe" src="./image/Box_04.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('4');">
                    <img class="imgServe" src="./image/Box_05.png"/>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

# 출력결과

인터넷 쇼핑몰등에서는 위와같이 상품의 대표이미지를 올려둘 수 있는 사이트들이 많이 있다.

이렇게 상품 이미지를 올리는것은

<input type="file"/>을 사용하는 것이 쉬울 수 있겠지만,

좀더 세련된 UI를 사용해 보기위해 아래와같은 방식을 취해 보려고 한다.

■ AJAX로 파일 업로드 하고 썸네일 이미지 받아오기

# 소스코드 - 이미지 업로드를 실제로 조작하는 thumbnail_upload.php

<html>
<title>:: 업로드 파일 썸네일 생성 ::</title>
<head>
<style type="text/css">
.temporaryFile {
    display:none;
}

.thumbnailImg {
    width:64px;
    height:64px;
    border-radius:10px;
    border:3px solid #CCCCCC;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
// 이미지를 업로드 할 준비를 시작한다.
function temporaryFileUpload(num) {

    // 이미지파일의 정보를 받을 배열을 선언한다.
    var tmpFile = new Object();
    tmpFile['file'] = new Array();     // tmpFile['file'] 파일의 정보를 담을 변수
    tmpFile['img'] = new Array();    // tmpFile['file'] 이미지의 경로를 담을 변수
    var tmpNum = 0;
    var addPlus = 0;

    // 먼저 업로드 된 파일의 존재 유무를 확인한다.
    if(jQuery(".temporaryFile").eq(num).val()) {

        // 파일이 존재하면 우선 기존 파일을 삭제한 이후에 작업을 진행한다.
        if(confirm("해당 이미지를 삭제 하시겠습니까?") == true) {

            // 먼저 업로드 하지 않을 파일을 제거한다.
            jQuery(".temporaryFile").eq(num).val("");

            // 파일이 제거되면 <input type="file"/>의 수만큼 반복문을 돌린다.
            jQuery(".temporaryFile").each(function(idx) {

                // 반복문을 돌리는 중에 <input type="file"/>의 값이 존재한는 순서로 배열에 담는다.
                if(jQuery(".temporaryFile").eq(idx).val()) {
                    tmpFile['file'][tmpNum] = [jQuery(".temporaryFile").eq(idx).clone()];
                    tmpFile['img'][tmpNum] = jQuery(".thumbnailImg").eq(idx).attr("src");
                    tmpNum++;
                }
            });

            // 모든 썸네일 이미지 정보를 초기화 한다.
            jQuery(".temporaryFile").val("");
            jQuery(".thumbnailImg").attr("src", "./plusimg.png");
            jQuery(".thumbnailImg").css("display", "none");

// 배열로 받은 파일의 정보를 for문 or for in문을 사용하여 순서를 재정렬한다.

/* ① for in 문을 사용한 경우(for in 문을 주석처리 한 이유는 아래에 기술 하였다.)

            for(var key in tmpFile['file']) {
                jQuery(".temporaryFile").eq(key).replaceWith(tmpFile['file'][key][0].clone(true));
                jQuery(".thumbnailImg").eq(key).css("display", "inline");
                jQuery(".thumbnailImg").eq(key).attr("src", tmpFile['img'][key]);
                addPlus++;
            }

/* ② for 문(ie8 이하 호환)을 사용한 경우 */

            for(var lineUp = 0, item; item=tmpFiles['file'][lineUp]; lineUp++) {
                jQuery(".temporaryFile").eq(lineUp).replaceWith(tmpFiles['file'][addPlus][0].clone(true));
                jQuery(".thumbnailImg").eq(lineUp).css("display", "inline");
                jQuery(".thumbnailImg").eq(lineUp).attr("src", tmpFiles['src'][addPlus]);
                jQuery(".previousFile").eq(lineUp).val(tmpFiles['img'][addPlus]);
                addPlus++;
            }

            if(addPlus < 5) {
                jQuery(".thumbnailImg").eq(addPlus).css("display", "inline");
            }

        } else {
            return false;
        }
    }

    // 파일이 존재하지 않다면 업로드를 시작한다.
    else {
        jQuery(".temporaryFile").eq(num).click();
    }
}

// 임시폴더에 파일을 업로드하고 그 경로를 받아온다.
function temporaryFileTransmit(num) {
    var form = jQuery("#uploadFrom")[0];
    var formData = new FormData(form);
    formData.append("mode", "temporaryImageUpload");
    formData.append("tmpFile", jQuery(".temporaryFile").eq(num)[0].files[0]);

    // ajax로 파일을 업로드 한다.
    jQuery.ajax({
          url : "./upload_class.php"
        , type : "POST"
        , processData : false
        , contentType : false
        , data : formData
        , success:function(json) {
            var obj = JSON.parse(json);
            if(obj.ret == "succ") {

                // 업로드된 버튼을 임시폴더에 업로드된 경로의 이미지 파일로 교체한다.
                jQuery(".thumbnailImg").eq(num).attr("src", obj.img);

                // 업로드 버튼이 4개 이하인경우 업로드 버튼을 하나 생성한다.
                if(num < 5) {
                    jQuery(".thumbnailImg").eq(++num).css("display", "inline");
                }

            } else {
                alert(obj.message);
                return false;
            }
        }
    });
}
</script>
<body>
<form id="uploadFrom" method="post">
<input type="file" class="temporaryFile" name="thumbnailImg[0]" onChange="temporaryFileTransmit(0);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[1]" onChange="temporaryFileTransmit(1);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[2]" onChange="temporaryFileTransmit(2);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[3]" onChange="temporaryFileTransmit(3);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[4]" onChange="temporaryFileTransmit(4);" style="display:none;"/>
<h1># 이미지 파일 업로드시 썸네일 생성하기</h1>
<table>
    <tr>
        <th>이미지 업로드 : </th>
        <td>
            <a href="javascript:;" onClick="temporaryFileUpload(0);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:inline;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(1);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(2);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(3);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(4);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
        </td>
    </tr>
</table>
</form>
</body>
</html>

※ for in 문을 주석 처리한 이유

처음에 제작할때는 for in문을 사용했었다.
그런데 문제가 발생한것이 필자는 평소 다음 오픈 에디터를 주로 사용하는데.
다음 오픈 에디터와 같은 페이지에서 해당 반복문이 돌아갈 경우 스크립트 충돌이 발생했다.

(이유는 아직 까지 확인 하지 못했다.)

그래서 ② for 문(ie8 호환 방식)을 사용하게 되었다

(위 코드는 그냥 for문을 사용해도 된다. 하지만 다른곳에서 문제가 발생하는 경우가 있었기에 적어둔다.)

아무튼 다음 오픈 에디터와 같이 사용하는 경우에는 스크립트단에서의 for in 문의 사용은 자제하려 한다.

# 소스코드 - 임시 경로에 파일을 업로드 하고 업로드된 이미지를 받아오는 upload_class.php

<?php
// 업로드 폴더 경로
$uploadsDir = "./temporary";

// 업로드 가능한 확장자 지정
$allowedExt = array("jpg", "JPG", "jpeg", "JPEG", "png", "PNG", "gif", "GIF");

switch($_POST['mode']) {

    case "temporaryImageUpload" :

        $fileName = $_FILES['tmpFile']['name'];

        // 파일의 확장자를 분리
        $ext = array_pop(explode(".", $fileName));

        // 업로드 가능한 확장자 인지 확인한다.
        if(!in_array($ext, $allowedExt)) {
            $RetVal['message'] = "허용되지 않는 확장자입니다.";
        } else {

            // 업로드할 파일의 경로
            $tmpFile = $uploadsDir."/".date("YmdHis")."_".$fileName;

            if(move_uploaded_file($_FILES['tmpFile']['tmp_name'], $tmpFile)) {
                $RetVal['img'] = $tmpFile;
                $RetVal['ret'] = "succ";
            } else {
                $RetVal['message'] = "업로드시 문제가 발생하였습니다.\n다시 시도하여 주시기 바랍니다.";
            }
        }

        print json_encode($RetVal);
        return;
    break;

    default :
    break;
}
?>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 따라다니는플로팅 배너 제작 (0)	2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0)	2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기 (2)	2018.03.22
[jQuery] AJAX를 사용한 파일 업로드 (1)	2018.03.18
[jQuery] 이미지 슬라이드 제작 (0)	2018.03.10

[API] 다음 - 우편번호 API 사용하기[API] 다음 - 우편번호 API 사용하기

Posted at 2018. 3. 13. 13:46 | Posted in API/우편번호

■ DAUM - 우편번호 API

· 다음 우편번호 서비스 API(http://postcode.map.daum.net/guide)는 스크립트 한번에 손쉽게 우편번호를 받아올 수 있어서 사용이 매우 간편하다.

· http://dmaps.daum.net/map_js_init/postcode.v2.js 스크립트를 추가만 해주면 된다.

# 다음 에디터 데이터 정리

항목	값(예시)	설명
postcode	463-400	구 우편번호 6자리
postcode1	463	구 우편번호 앞 3자리
postcode2	400	구 우편번호 뒤 3자리
zonecode	13494	국가기초구역번호 2015년 8월 1일부터 시행될 새 우편번호
address	경기 성남시 분당구 판교역로 235	기본주소(검색결과에서 첫줄에 나오는 주소)
addressEnglish	235 Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, korea	기본 영문 주소
addressType	R/J	검색된 기본 주소 타입 : R(도로명), J(지번)
userSelectedType	R/J	검색 결과에서 사용자가 선택한 주소의 타입
roadAddress	경기 성남시 분당구 판교역로 235	도로명 주소 (모든 주소에 도로명 주소가 부여되어 있지는 않다.)
roadAddressEnglish	235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea	영문 도로명 주소
jibunAddress	경기 성남시 분당구 삼평동 681	지번 주소
jibunAddressEnglish	681, Sampyeong-dong, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea	영문 지번 주소
autoRoadAddress	경기 성남시 분당구 판교역로 235	매핑된 도로명 주소가 여러개인 경우, 사용자가 '선택안함'을 클릭했을 때 임의로 첫번째 매핑 주소를 넣어서 반환합니다. (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)
autoRoadAddressEnglish	235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea	autoRoadAddress의 영문 도로명 주소
autoJibunAddress	경기 성남시 분당구 삼평동 681	매핑된 지번 주소가 여러개인 경우, 사용자가 '선택안함'을 클릭했을 때 임의로 첫번째 매핑 주소를 넣어서 반환합니다. (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)
autoJibunAddressEnglish	681, Sampyeong-dong, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea	autoJibunAddress의 영문 지번 주소
buildingCode	4113510900106810000000001	건물코드
buildingName	에이치스퀘어 엔동	건물명
postcodeSeq	001	우편번호 일련번호
sido	경기	도 / 시 이름
sigungu	성남시 분당동	시 / 군 / 수 이름
bcode	4113510900	법정동 코드
bname	삼평동	법정동 이름

■ 팝업창 띄워서 사용하기

# 소스코드

<html>

<head>

function openDaumZipAddress() {

new daum.Postcode({

oncomplete:function(data) {

jQuery("#postcode1").val(data.postcode1);

jQuery("#postcode2").val(data.postcode2);

jQuery("#zonecode").val(data.zonecode);

jQuery("#address").val(data.address);

jQuery("#address_etc").focus();

console.log(data);

}

}).open();

}

</script>

</head>

<body>

<br/>

</body>

</html>

# 출력결과

☞ 다음 우편번호 API - 모바일에서 사용하기 로 이어집니다.

저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 주소 검색 - 행정안전부 API 사용하기 (0)	2019.11.20
[API] 다음 - 우편번호 API 모바일에서 사용하기 (4)	2018.04.04

Prev Next

1 ··· 60 61 62 63 64

'전체 글'에 해당되는 글 256건

[PHP] PHP QR코드 이미지 저장하고 띄우기[PHP] PHP QR코드 이미지 저장하고 띄우기

'PHP > PHP Library' 카테고리의 다른 글

[PHP] PHP QR코드 세팅하기[PHP] PHP QR코드 세팅하기

'PHP > PHP Library' 카테고리의 다른 글

[jQuery] 쇼핑몰 대표 이미지 상품박스[jQuery] 쇼핑몰 대표 이미지 상품박스

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[API] 다음 - 우편번호 API 사용하기[API] 다음 - 우편번호 API 사용하기

'API > 우편번호' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바