블로그 폐쇄 합니다.

카테고리 없음 2018. 2. 28. 22:10



안녕하세요 사악미소입니다.

개발자를 시작하면서 블로그를 같이 운영을 했고.


이곳에 많은 글을 올렸는데...


이번에 폐쇄하고 다른 새롭게 운영해 볼려고 합니다.


기존 블로그가 너무 쓸데없는 글들도 많고.


폼도 어수선해서 좀더 안정적으로 쓸 환경을 찾아 이전을 하려 합니다.


그래도 작성한 글이나 내용은 그대로 보관하려 합니다.

[AJAX] 파일 업로드 하고 썸네일 생성하기

카테고리 없음 2018. 2. 27. 21:03




■ 파일 업로드 하고 썸네일 생성하기



# 소스코드 01

 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(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++;
            }

            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>




# 소스코드 02

 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;
}
?>




# 출력결과




[jQuery] 이미지 슬라이드 제작

카테고리 없음 2018. 2. 19. 11:45




■ 이미지 슬라이드 제작



이전에 [jQuery] 이미지 슬라이드 만들기 라는 포스트를 작성했으나.

실전에서 특히 반응형 웹에서 사용하려니 많은 문제가 있었다.

그래서 이번에 좀더 다듬어서 실질적으로 사용가능하게 예제를 수정해 보았다.


기본적으로 슬라이드의 넓이는 800px로 고정을 해두었지만.

jQuery를 통해 유동적으로 변경 되게끔 설정해 두었다.



# 소스코드

 main.php

<html>

<head>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>jQuery 슬라이드</title>

</head>

<body style="text-align:center;">

<!-- 캔버스 크기 800px -->

<div id="canvas" style="position:absolute;top:5%;left:5%;width:800px;">

<?php include "./slider.php"; ?>

</div>

</body>



# 소스코드

 slider.php

<style>

* {

margin:0px;

padding:0px;

}


/* 애니메이션 캔버스 */

.animation_canvas  {

overflow:hidden;

position:relative;

float:left;

width:100%;

}

.slide_section {

position:absolute;

}

#leftMove {

top:50%;

left:2%;

}


#rightMove {

top:50%;

left:96%;

}


.move_arrow {

display:table-cell;

vertical-align:middle;

}


/* 슬라이드 패널 */

.slider_panel {

width:calc(800px * 5); /* 사용할 크기 x 갯수 */

position:relative;

}


/* 슬라이드 이미지 */

.slider_image {

float:left;

width:800px;

}


/* 슬라이드 텍스트 패널 */

.slider_text_panel {

position:absolute;

top:10%;

left:10%;

}

.slider_text {

position:absolute;

width:250px;

height:150px;

}


.slider_text > h1 {

background-color:#FFFFFF;

opacity:0.5;

margin:0px;

padding:0px;

}


.slider_text > p {

background-color:#C0C0C0;

opacity:0.5;

margin:0px;

padding:0px;

}


/* 컨트롤 패널  */

.control_panel  {

position:absolute;

overflow:hidden; 

top:90%; 

left:45%;

}


.control_button {

font-size:11px;

width:13px;

height:13px;

border:1px solid #D4D4D4;

background-color:#F4F4F4;

position:relative; 

float:left;

cursor:pointer;

margin-left:3px;

margin-right:3px;

text-align:center;

font-weight:bold;

}


/* 컨트롤 마우스 오버  */

.control_button:hover { 

border:1px solid #F4F4F4;

background-color:#D4D4D4;

color:#FFFFFF;

}

/* 컨트롤 현재 영역  */

.control_button.active { 

border:1px solid #24822A;

background-color:#24822A;

color:#FFFFFF;

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

jQuery(document).ready(function() {


// 캔버스 사이즈를 구한뒤 이미지 사이즈를 지정한다. 예제) 800px 이다.

var canvasSize = jQuery("#canvas").css("width");
var calcSize = canvasSize.split("px");
jQuery(".slider_image").css("width", canvasSize);


// 슬라이드의 전체 개수를 구한다.

var slideMax = jQuery(".control_button").length;


        // 슬라이드 패널의 실제 이미지 크기를 구한다.

        // 이미지 사이즈 × 이미지의 갯수

        jQuery(".slider_panel").css("width", calcSize[0] * slideMax);


// 슬라이드 이미지 좌우 이동버튼

function moveArrow(sum) {


var num = jQuery(".active").index();

var index = jQuery(".active").index() + sum;


if(index < 0) { index = slideMax; }

if(index >= slideMax) { index = 0; }


moveSlider(index);

}


// 슬라이드를 움직여주는 함수

function moveSlider(index) {


// 슬라이드를 이동합니다.

var willMoveLeft = -(index * calcSize[0]);

jQuery(".slider_panel").animate({ left: willMoveLeft }, "slow");


// control_button에 active클래스를 부여/제거합니다.

jQuery(".control_button[data-index=" + index + "]").addClass("active");

jQuery(".control_button[data-index!=" + index + "]").removeClass("active");


// 글자를 이동합니다.

jQuery(".slider_text[data-index=" + index + "]").show().animate({

left : 0

}, "slow");

jQuery(".slider_text[data-index!=" + index + "]").hide("slow", function() {

jQuery(this).css("left", -300);

});

}


// 초기 텍스트 위치 지정 및 data-index 할당

jQuery(".slider_text").css("left", -300).each(function(index) {

jQuery(this).attr("data-index", index);

});


// 좌우 슬라이드 넘김 버튼

jQuery("#leftMove").on("click", function() { moveArrow(-1) });

jQuery("#rightMove").on("click", function() { moveArrow(1) });


// 컨트롤 버튼의 클릭 핸들러 지정 및 data-index 할당

jQuery(".control_button").each(function (index) {

jQuery(this).attr("data-index", index);

}).click(function () {

var index = jQuery(this).attr("data-index");

moveSlider(index);

});


// 초기 슬라이드의 위치 지정

var randomNumber = Math.floor(Math.random() * slideMax);

moveSlider(randomNumber);


var playAction = "";


// 5초마다 한번씩 슬라이드를 자동으로 다음 페이지로 넘긴다.

playAction = setInterval(function() {

moveArrow(1);

}, 5000);


// 마우스가 슬라이드 위에 올라와 있는경우 or 빠져 나간 경우

jQuery(".slide_board").hover(


// 마우스가 슬라이드 위에 올라와 있는경우 그 움직임을 멈춘다.

function() {

clearInterval(playAction);

}


// 마우스가 슬라이드 위에 올라와있다 빠져 나간경우 자동 슬라이드를 초기화 하고 다시 시작한다.

, function () {

playAction = setInterval(function() {

moveArrow(1);

}, 5000);

}

);

});

</script>

<body style="text-align:center;">

<div class="slide_board">

<div class="animation_canvas">

<div class="slider_panel">

<img class="slider_image" src="./image/album_01.jpg">

<img class="slider_image" src="./image/album_02.jpg">

<img class="slider_image" src="./image/album_03.jpg">

<img class="slider_image" src="./image/album_04.jpg">

<img class="slider_image" src="./image/album_05.jpg">

</div>

<div class="slider_text_panel">

<div class="slider_text">

<h1>TWICE</h1>

<p>JYP Entertainment</p>

</div>

<div class="slider_text">

<h1>Red Velvet</h1>

<p>SM Entertainment</p>

</div>

<div class="slider_text">

<h1>LOVELYZ</h1>

<p>Woollim Entertainment</p>

</div>

<div class="slider_text">

<h1>MOMOLAND</h1>

<p>Duble Kick Company</p>

</div>

<div class="slider_text">

<h1>GFRIEND</h1>

<p>Source Music Entertainment</p>

</div>

</div>

<div class="control_panel">

<div class="control_button">1</div>

<div class="control_button">2</div>

<div class="control_button">3</div>

<div class="control_button">4</div>

<div class="control_button">5</div>

</div>

</div>

<div class="slide_section" id="leftMove">

<div class="move_arrow">◀</div>

</div>

<div class="slide_section" id="rightMove">

<div class="move_arrow">▶</div>

</div>

</div>

</body>



# 출력결과







[jQuery] 쇼핑몰 상품박스 예제

jQuery 2018. 2. 13. 10:43




■ 쇼핑몰 상품박스 예제




예제소스 :  merchandise.zip



# 소스코드

 merchandise.php

<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>



# 출력결과





[Ubuntu] Virtual Box로 Ubuntu 설치하기 #2 - Ubuntu 설치하기

Ubuntu 2018. 2. 12. 00:01




■ 버츄얼 박스로 우분투 설치하기 #2 - 우분투 설치하기




01. 맨처음으로는 언어(Language)를 선택하는 창이 나온다. 한국어를 선택해주자.





02. 다음 화면에서 우분투 설치를 클릭한다.





03. 마찬가지로 한국어를 선택하고 작업을 진행한다.

 ① 한국어를 선택한다.

 ② 계속 버튼을 클릭하여 설치를 진행하자.




04. 계속버튼을 클릭해서 작업을 진행한다.

 ① Ubuntu 설치 중 업데이트 다운로드를 선택하고 작업을 진행하자.

 ② 계속 버튼을 클릭한다.




05. 우분투를 저장 장치에 설치하는 방법을 선택한다.

  새로 만든 가상 디스크에 처음으로 우분투를 설치하는 것이므로,

     자동으로 설치하는 옵션인 디스크를 지우고 Ubuntu 설치를 눌러서 작업을 진행하자.

 지글 설치를 클릭한다.





06. 디스크를 지우고 Ubuntu 설치를 선택했다면 아래와 같은 창이 뜬다 계속 버튼을 눌러 다음으로 진행하자.





07. 지역 설정 화면이다. 기본적으로는 Seoul로 되어 있을테니 계속을 눌러 작업을 진행하자.





08. 키보드 설정을 정하는 구간이다.

 ① 키보드 배치를 한국어로 선택한다.

 ② 자판은 한국어 - 한국어(101/104)를 선택했다.

※ 언어설정은 추후 변경이 가능하다.




09. 사용자 정보를 입력하는 구간이다.

 ① 설치할 우분투의 이름암호등의 개인정보를 항목에 맞게 입력한다.

 ② 계속 버튼을 클릭하여 설치를 진행하자.




10. 그럼 이제 우분투 설치가 진행이 된다. 설치가 다 끝날때까지 기다리자.




11. 설치가 끝나면 컴퓨터를 다시 시작한다는 알림창이 뜬다. 지금 다시 시작을 눌러 재부팅 하자.




12. 이제 컴퓨터가 재부팅 되면 아래와 같이 우분투 로그인 창이 나타나는 것을 확인 할 수 있다.

    위에서 작성한 패스워드를 입력하여 로그인해보자.