728x90

JSON.parse() : JSON 문자열을 JSON object로 변환시켜준다.

$.parseJSON(data); // JSON 문자열을 JSON 객체(JavaScript object) 로 변환시켜 준다

JSON.stringify : JSON object를 JSON 문자열로 변환시켜 준다.



다음 예제를 직접 실행해보면 내용을 이해할 수 있다.

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <div id="result"></div>
    </div>
</form>

<script>
$(function () {
    // json 객체 정의
    var employee = { "name": "홍길동", "address": "용인시 죽전동", "phone": "555-4567" };

    // JSON.stringify를 사용하여 String으로 변환한다.
    var jsonstring = JSON.stringify(employee);
    $("#result").append('<p>json string: ' + jsonstring + '</p>');

    // JSON.parse function을 사용하여 JSON string을 JSON 객체(object)로 변환
    var jsonobject = JSON.parse(jsonstring); // $.parseJSON(jsonstring) 사용해도 된다.
    var info = '<ul><li>Name:' + jsonobject.name + '</li><li>Street:' + jsonobject.address + '</li><li>Phone:' + jsonobject.phone + '</li></ul>';

    $("#result").append('<p>json object:</p>');
    $("#result").append(info);
});
</script>
</body>
</html>


728x90
블로그 이미지

Link2Me

,
728x90

DB에서 구한 URL 를 가지고 PHP 를 이용하여 JSON 파일로 만드는 코드 예제다.


<?php
if(isset($_POST['id']) && !empty($_POST['id'])){
    $id=$_POST['id'];
    require_once 'path.php';// root 폴더를 기준으로 상대경로 자동 구하기
    require_once $g['path_class'].'connect.php';
    $sql = "SELECT * FROM menu_items where id='{$id}'";
    $result = mysqli_query($db, $sql);
    if($row=mysqli_fetch_array($result)){
        //echo $row['url'];
        $url = $row['url'];
    }

    if($url !== '#'){
        $data = file_get_contents($url);
        $R = json_decode($data,TRUE); // JSON to Array
        echo json_encode($R); // JSON
    }
}
?>
 


728x90
블로그 이미지

Link2Me

,
728x90

jQuery 로 select 박스가 2개인 것의 값을 제어하는 걸 테스트하고 적어둔다.

 

여기서 알아둘 사항은 Javascript/jQuery 로 현재 URL, 경로 가져오는 방법이다.

//window.location is an object in javascript.
window.location.host             #returns host
window.location.hostname     #returns hostname
window.location.path             #return path
window.location.href             #returns full current url
window.location.port             #returns the port
window.location.protocol       #returns the protocol

// in jquery you can use
$(location).attr('host');          #returns host
$(location).attr('hostname');  #returns hostname
$(location).attr('path');         #returns path
$(location).attr('href');         #returns href
$(location).attr('port');         #returns port
$(location).attr('protocol');   #returns protocol



// To get the URL of the parent window from within an iframe
$(window.parent.location).attr('href');


http://www.abc.com:8082/index.php#tab2?foo=789

Property                                Result
----------------------------------------------------
$(location).attr('host')            www.abc.com:8082
$(location).attr('hostname')    www.abc.com
$(location).attr('port')            8082
$(location).attr('protocol')      http:
$(location).attr('pathname')   index.php
$(location).attr('href')           http://www.abc.com:8082/index.php#tab2
$(location).attr('hash')         #tab2
$(location).attr('search')       ?foo=789

 

 

기본적인 HTML 문법과 PHP를 혼용하여 사용하고 있다.

PHP는 대체문법을 사용하여 깔끔하게 보기좋게 정렬을 하고 있고, 함수화를 통해서 코드를 심플하게 보이도록 구현되어 있다.

 

<?php
include_once "connect.php";
include_once "dbDataClass.php";
$d = new DBDataClass();
$cat1 = isset($_GET['cat1'])? $_GET['cat1'] : 0;
$cat2 = isset($_GET['cat2'])? $_GET['cat2'] : 0;
?>
구분1 <select name="cat1" id="cat1">
    <option value="">+ 구분</option>
    <?php $_CAT1 = $d->getDbArray('menu_items''parent_id=0''*'''01);?>
    <?php while($_CA1 = mysqli_fetch_array($_CAT1)):?>
    <option value="<?php echo $_CA1['id']?>"<?php if($_CA1['id']==$cat1):?> selected<?php endif ?>><?php echo $_CA1['name']?></option>
    <?php endwhile ?>
    </select>
 
    &nbsp;&nbsp;&nbsp;구분2
    <select name="cat2" id="cat2">
    <option value="">+ 구분</option>
    <?php if($cat1):?>
    <?php $_CAT2 = $d->getDbArray('menu_items''parent_id='.$cat1, '*'''01); ?>
    <?php while($_CA2 = mysqli_fetch_array($_CAT2)):?>
    <option value="<?php echo $_CA2['id']?>"<?php if($_CA2['id']==$cat2):?> selected<?php endif ?>><?php echo $_CA2['name']?></option>
    <?php endwhile ?>
    <?php endif ?>
    </select>&nbsp;&nbsp;&nbsp;
    <!--구분 -->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#cat1').on('change',function(){
    var cat1 = $("#cat1 option:selected").val(); // this.value
    location.href = $(location).attr('pathname'+ '?cat1='+cat1;
});
$('#cat2').on('change',function(){
    var cat1 = $("#cat1 option:selected").val();
    var cat2 = $("#cat2 option:selected").val();
    location.href = window.location.pathname + '?cat1='+cat1+'&cat2='+cat2;
});
</script>

 

 아래 코드 예시는 Secure Coding을 고려하여 작성한 코드 중에서 필요한 부분만 발췌하여 적은 것이다.

MDB(Material Design Bootsrap4) 코드를 적용한 select 가 포함되어 있다.

<?php
$link_url = "MemberList.php"// 현재 실행중인 파일명 가져오기
$rowsPage = 10// 한 화면에 표시되는 게시글 수
$curPage = isset($_GET['p']) ? $a->NoFilter($_GET['p']) : 1;
$m = isset($_GET['m']) ? $a->XSSFilter($_GET['m']) :'list';
$cat1 = isset($_GET['cat1']) ? $a->XSSFilter($_GET['cat1']) :'';
 
$g['url_link']=($m?'m='.$m.'&amp;':'').($cat1?'&amp;cat1='.$cat1.'&amp;':'').($where?'where='.$where.'&amp;':'').($keyword?'keyword='.urlencode(stripslashes($keyword)).'&amp;':'');
$g['bbs_reset'= $link_url.'?'.($m?'m='.$m.'&amp;':'');
 
?>
 
<div class="table-responsive text-nowrap">
<p class="h4 mb-4">회원 현황</p>
<div class="float-left info">
    <?php if$keyword ):?><strong>"<?php echo $keyword?>"</strong> 검색결과 : <?php endif?>
    <?php echo number_format($NUM)?>개 (<?php echo $curPage;?>/<?php echo $TPG;?>페이지)
</div>
 
<?php if($_SESSION['authID'== 2):?>
<div class="float-right info">
<select id="cat1" class="browser-default custom-select">
<?php $cats = $a->getDbArray('orgTree''parent_id=0''*'''01);?>
    <option value="">-본부-</option>
    <?php foreach($cats as $C): ?>
        <option value="<?php echo $C['id'];?>"<?php if($C['id']==$cat1):?> selected<?php endif;?>><?php echo $C['name'];?></option>
    <?php endforeach;?>
</select>
</div>
<?php endif;?>
 
<script>
$('#cat1').on('change',function(e){
    e.preventDefault();
    var cat1 = $("#cat1 option:selected").val(); // this.value
    var uri = $('#urlPath').attr('url-path');
    MemberListTable(where,keyword,curPage,uri,cat1);
});
</script>
 

 

 

728x90
블로그 이미지

Link2Me

,
728x90

JSON 데이터 포멧으로 Web URL 데이터를 받아서 PHP 배열로 변환하여 파싱하는 방법이다.


<?php
$url = "http://100.10.10.10/chart/data.json";
$data = file_get_contents_curl($url);

//echo $data.'<br />';

$R = json_decode($data,TRUE);// JSON 데이터를 배열로 변환

foreach($R['content'] as $val) {
    echo $val['sysdate'] . ' | ' . $val['mcount'] . "<br />";
}

function file_get_contents_curl($url) {
    $ch = curl_init();// curl 리소스를 초기화
    curl_setopt($ch, CURLOPT_URL, $url); // url을 설정
    // 헤더는 제외하고 content 만 받음
    curl_setopt($ch, CURLOPT_HEADER, 0);
    // 응답 값을 브라우저에 표시하지 말고 값을 리턴
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $data = curl_exec($ch);
    curl_close($ch);// 리소스 해제를 위해 세션 연결 닫음
    return $data;
}

?>
 


728x90
블로그 이미지

Link2Me

,
728x90

Bootstrap 그래프 샘플을 가지고 테스트한 걸 적어둔다.


var loadJSON = './test.json';
$.getJSON(loadJSON, function(data){
    $each(data, function(i, item){
        console.log(item.name);
    });
});


사이트에 나온 실제 그래프 그려주는 예제에 위 코드를 적용하여 만들면 아래와 같다.

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var loadJSON = './graph.json'; // 서버에서 제공하는 데이터
$.getJSON(loadJSON, function(data){
    var names = new Array();
    var datas = new Array();
    $.each(data, function(i,item){
        names.push(item.name);
        datas.push(item.data);
    });
    console.log(names);
    console.log(datas);

    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: names, // JSON 파일을 읽어서 배열로 저장하여 처리
      datasets: [{
        label: '가입자수',
        data: datas, // JSON 파일을 읽어서 배열로 저장하여 처리
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
    });
});
</script>
 


728x90

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

jQuery Paging 처리 (진행중....)  (0) 2019.01.20
JSON.parse(), JSON.stringify()  (0) 2019.01.13
jQuery parent, children, find 차이  (0) 2018.12.14
jQuery on 이벤트  (0) 2018.12.10
[Javascript] 화면 크기  (0) 2018.12.07
블로그 이미지

Link2Me

,
728x90

jQuery 기능을 익히고자 파싱 테스트를 해봤다.

크롬브라우저에서 시도하면 https://brunch.co.kr/@adrenalinee31/1 에서 2. 외부요청을 가능하게 해주는 플러그인 설치를 하면 파싱이 잘 된다.

원하는 조건의 selector 를 찾느라고 좀 삽질을 했다.

$(html).find('.wiki-heading').find("a:contains('3.2.')").parent().next().find(".wiki-link-internal")



<!DOCTYPE html>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<script>
var weburl ='https://namu.wiki/w/KBO%20%EB%A6%AC%EA%B7%B8/2018%EB%85%84/%EC%8B%A0%EC%9D%
B8%EB%93%9C%EB%9E%98%ED%94%84%ED%8A%B8'

$.get(weburl, function( html ) {
    var data = new Array();
    // 찾으려는 className 을 반복적으로 찾는다.
    var heading = $(html).find('.wiki-heading').find("a:contains('3.2.')").text();
    //console.log(heading);
    var nextclass = $(html).find('.wiki-heading').find("a:contains('3.2.')").parent().next().find(".wiki-link-internal");
    $(html).find('.wiki-heading').find("a:contains('3.2.')").parent().next().find(".wiki-link-internal").each( function(){
        var text = $(this).parent().text();
        if(text !== 'kt' && text !== '삼성' && text !== '롯데' && text !== '한화' && text !== 'SK' && text !== 'KIA' && text !== 'LG' && text !== 'NC' && text !== '넥센' && text !== '두산') {
            //console.log(text);
            data.push(text);
        }
    });

    for(var i=0;i<data.length;i++){
        console.log(data[i]);
    }
});
</script>

</body>
</html>



파싱 결과


크롬 브라우저 콘솔상에서 연습해보던 Javascript 코드

var data = document.querySelectorAll('.wiki-table-wrap .wiki-table .wiki-link-internal');
for(var i=0;i<data.length;i++){
    var t = data[i];
    t = t.innerText;
    console.log(t);
}


728x90
블로그 이미지

Link2Me

,
728x90

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>


$(".mylink").click(function() { // 아래 4개는 모두 동일한 결과 반환
    $(this).parent().siblings(".something1");
    $(this).parent().prev(); // if you always want the parent's previous sibling
    $(this).parents(".box").children(".something1");

    $(this).closest('.box').children('.something1');

});


- closest()는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있다.
- 하나가 아닌 모든 부모 요소를 반환할 필요가 있다면 parents() 메소드를 사용한다.
- parent()는 해당 요소의 바로 위의 부모 요소를 반환한다.

- children()은 해당 요소의 바로 아래 자식 요소들만을 반환한다.

- find()는 해당 노드 아래의 전체 DOM을 탐색하여 반환한다.

- prev() - 이전 요소를 선택하도록 반환한다.
- next() - 다음 요소를 선택하도록 반환한다.




728x90

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

JSON.parse(), JSON.stringify()  (0) 2019.01.13
JSON 데이터 읽어서 그래프 그리기  (0) 2018.12.18
jQuery on 이벤트  (0) 2018.12.10
[Javascript] 화면 크기  (0) 2018.12.07
Javascript 객체 배열  (0) 2018.11.17
블로그 이미지

Link2Me

,
728x90

jQuery on 함수는 1.7버전부터 추가 되었다.
.on( events [, selector ] [, data ], handler(eventObject) )
 - event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") s가 붙었으니 여러개도 사용가능하다.
 - selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링한다.
 - data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정한다.
 - handler : 이벤트 핸들러 함수

$(elem).on("click focus keydown", function(e) { ... });

on 함수의 종료는 off 함수가 있다.

728x90

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

JSON 데이터 읽어서 그래프 그리기  (0) 2018.12.18
jQuery parent, children, find 차이  (0) 2018.12.14
[Javascript] 화면 크기  (0) 2018.12.07
Javascript 객체 배열  (0) 2018.11.17
[jQuery] HTML 속성의 제어  (0) 2018.11.15
블로그 이미지

Link2Me

,
728x90

윈도우/맥북에서 동시에 사용할 수 있는 Editor를 찾다보니 Brackets 이 괜찮은 거 같아서 이용을 해보고 있다.


새로운 파일을 생성하고 Shift + Tab 키를 누르니까 HTML5 기본 포멧이 바로 생성된다.

들여쓰기는 보통은 Shift + Tab 키인데, brackets 에서는 Ctrl + [ 키를 누르면 된다.

내어쓰기는 보통은 Tab 인데, brackets 에서는 Ctrl + ] 키를 누르면 된다.

728x90
블로그 이미지

Link2Me

,
728x90

viewport : 뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미
window.inner*은 뷰포트의 크기를 나타내고, screen.*은 스크린의 크기를 나타낸다.

// 가로 길이(너비)
window.innerWidth // 브라우저 창(window) 두께를 제외한 실질적 가로 길이
window.outerWidth // 브라우저 창(window) 두께를 포함한 브라우저 전체 가로 길이


//세로길이(높이)
window.innerHeight // 브라우저 창(window) 두께를 제외한 실질적 세로 길이
window.outerHeight // 브라우저 창(window) 두께를 포함한 브라우저 전체 세로 길이

$(window).width();   // returns width of browser viewport
$(window).height();   // returns height of browser viewport

document.body.scrollWidth // (문서 전체의 너비)
document.body.scrollHeight //(문서 전체의 높이)

$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

window.screen.width, window.screen.height
모니터 스크린의 너비와 높이

window.scrollTo(x,y);

<script>
    document.getElementById('scrollBtn').addEventListener('click', function(){
        window.scrollTo(0, 1000);
    })
</script>

728x90
블로그 이미지

Link2Me

,
728x90

부트스트랩에서 메뉴버튼을 누르면 왼쪽 화면에 사이드바 메뉴화면이 나오고 없어지는 예제에 대한 설명이다.


출처 : https://bootsnipp.com/snippets/featured/fancy-sidebar-navigation


CSS 부분 주석을 달아 향후 다시 볼 때 이해를 높이도록 했다.

overflow 속성은 http://triki.net/wiki/792# 에 설명이 잘 되어 있다.

아래 사이드 메뉴에 대한 설명은 https://bootstrapious.com/p/bootstrap-sidebar 에 잘 설명되어 있는 편이다.

http://link2me.tistory.com/1194 게시글을 참조하여 수정/활용하면 좋을 것이다.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style>
body {
    position: relative;
    overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}

/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-wrapper {
   /* z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성, 기본값은 0 */
    z-index: 1000; /* z축 상의 위치를 나타내며, 정수값(음수, 양수). 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다 */
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto; /* 본문에 표시되는 내용에 따라 세로 스크롤이 생긴다. */
    overflow-x: hidden; /* 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 */
    background: #1a1a1a;
    -webkit-transition: all 0.5s ease; /* CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공 */
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
  display: none; /* 보이지 않음 */
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    width: 100%;
    padding-top: 70px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute; /* 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다. */
    /* relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, */
    /* absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. */
    /* 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다. */
    margin-right: -220px;
}

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    position: relative;
    line-height: 20px;
    display: inline-block;
    width: 100%;
}

.sidebar-nav li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 3px;
    background-color: #1c1c1c;
    -webkit-transition: width .2s ease-in;
      -moz-transition:  width .2s ease-in;
       -ms-transition:  width .2s ease-in;
            transition: width .2s ease-in;

}
.sidebar-nav li:first-child a {
    color: #fff;
    background-color: #1a1a1a;
}

.sidebar-nav li:before {
    background-color: #D8D8D8;  
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
    width: 100%;
    -webkit-transition: width .2s ease-in;
      -moz-transition:  width .2s ease-in;
       -ms-transition:  width .2s ease-in;
            transition: width .2s ease-in;

}

.sidebar-nav li a {
    display: block; /* 요소를 block 요소처럼 표시한다. 요소 앞뒤로 줄바꿈 된다. */
    color: #ddd;
    text-decoration: none; /* 선을 만들지 않는다. */
    padding: 10px 15px 10px 30px;    
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}

.sidebar-nav > .sidebar-brand {
    height: 45px;
    font-size: 16px;
    line-height: 24px;
}
.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: #222;
    box-shadow: none;
}

/*-------------------------------*/
/*       Link2me-Cross         */
/*-------------------------------*/

.link2me {
  position: fixed; /* fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정 */
  top: 20px;  
  z-index: 999; /* z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성, 기본값은 0 */
  display: block; /* 요소를 block 요소처럼 표시한다. 요소 앞뒤로 줄바꿈 된다. */
  width: 32px;
  height: 32px;
  margin-left: 15px;
  background: transparent;
  border: none;
}
.link2me:hover,
.link2me:focus,
.link2me:active {
  outline: none;
}
.link2me.is-closed:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.link2me.is-closed:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

.link2me.is-closed .hamb-top,
.link2me.is-closed .hamb-middle,
.link2me.is-closed .hamb-bottom,
.link2me.is-open .hamb-top,
.link2me.is-open .hamb-middle,
.link2me.is-open .hamb-bottom {
  position: absolute;
  left: 0;
  height: 4px;
  width: 100%;
}
.link2me.is-closed .hamb-top,
.link2me.is-closed .hamb-middle,
.link2me.is-closed .hamb-bottom {
  background-color: #1a1a1a;
}
.link2me.is-closed .hamb-top {
  top: 5px;
  -webkit-transition: all .35s ease-in-out;
}
.link2me.is-closed .hamb-middle {
  top: 50%;
  margin-top: -2px;
}
.link2me.is-closed .hamb-bottom {
  bottom: 5px;  
  -webkit-transition: all .35s ease-in-out;
}

.link2me.is-closed:hover .hamb-top {
  top: 0;
  -webkit-transition: all .35s ease-in-out;
}
.link2me.is-closed:hover .hamb-bottom {
  bottom: 0;
  -webkit-transition: all .35s ease-in-out;
}
.link2me.is-open .hamb-top,
.link2me.is-open .hamb-middle,
.link2me.is-open .hamb-bottom {
  background-color: #1a1a1a;
}
.link2me.is-open .hamb-top,
.link2me.is-open .hamb-bottom {
  top: 50%;
  margin-top: -2px;  
}
.link2me.is-open .hamb-top {
  -webkit-transform: rotate(45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.link2me.is-open .hamb-middle { display: none; }
.link2me.is-open .hamb-bottom {
  -webkit-transform: rotate(-45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.link2me.is-open:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.link2me.is-open:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
    position: fixed; /* fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정 */
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.8);
    z-index: 1;
}
</style>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
  var trigger = $('.link2me'),
      overlay = $('.overlay'),
     isClosed = false;

    trigger.click(function () {
      link2me_cross();      
    });

    function link2me_cross() {

      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }
 
  $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  
});
</script>
</body>
    <div id="wrapper">
        <div class="overlay"></div>
    
        <!-- Sidebar 숨김으로 보였다 보이지 않았다 하는 부분 -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                       Brand
                    </a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">메뉴1</a>
                </li>
                <li>
                    <a href="#">메뉴2</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">메뉴3<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li class="dropdown-header">Dropdown heading</li>
                    <li><a href="#">서브메뉴3.1</a></li>
                    <li><a href="#">서브메뉴3.2</a></li>
                    <li><a href="#">서브메뉴3.3</a></li>
                    <li><a href="#">서브메뉴3.4</a></li>
                    <li><a href="#">서브메뉴3.5</a></li>
                  </ul>
                </li>
                <li>
                    <a href="#">메뉴4</a>
                </li>
                <li>
                    <a href="#">메뉴5</a>
                </li>
                <li>
                    <a href="https://twitter.com/maridlcrmn">메뉴6</a>
                </li>
            </ul>
        </nav>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <button type="button" class="link2me is-closed" data-toggle="offcanvas">
                <span class="hamb-top"></span>
                <span class="hamb-middle"></span>
                <span class="hamb-bottom"></span>
            </button>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <h1>Toggle Sidebar Navigation</h1>
                        <p>토글 사이드바 네비게이션에 대한 본문 내용입니다.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->
</body>
</html>


728x90
블로그 이미지

Link2Me

,
728x90

출처 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

에서 테스트해볼 수 있다.

CSS에 대한 설명을 약간 추가하기 위해서 적었다.


 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed; /* fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정 */
    z-index: 1; /* z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성, 기본값은 0 */
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden; /* 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 */
    /* 자식 요소가 부모요소의 범위를 초과 할 때 어떻게 처리 할지를 결정 하므로 부모요소에 overflow 속성 값을 결정해 주어야 한다. */
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>
     
</body>
</html>


728x90
블로그 이미지

Link2Me

,
728x90

객체 배열의 특징
내장객체 Array 객체를의미한다.
배열이름[인덱스] : 인덱스는0부터시작한다.
배열이름= new Array(개수); // 생성하는 방법
Arr_Name = new Array(10);

- join(): 배열을 하나의 문자열로 만들어 준다.
- sort(): 배열의 값들을 순서대로 정렬한다.
- reverse(): 배열안에 값들을 순서대로 재정렬시킨다.
- concat(): 두개 배열을 하나의 배열로 만든다.
- slice(): 배열의 일부분의 값을 추출한다.

<SCRIPT LANGUAGE="JAVASCRIPT">
array1 = new Array("사과", "배", "바나나")
document.write("<h4>" + array1.join() + "<br>")
document.write(array1.join("와") + "<br>")
document.write(array1.join("&") + "</h4>")
</SCRIPT>

<SCRIPT LANGUAGE="JAVASCRIPT">
array1 = new Array("오징어", "낙지", "문어","꼴뜨기");
array2 = array1.slice(1,3);
document.write(array2);
</SCRIPT>

728x90
블로그 이미지

Link2Me

,
728x90

자바스크립트에서 속성 읽기, 설정, 제거하는 방법이다.

<a id="target" href="http://abc.com">tutorials</a>

<script>

var t = document.getElementById('target');

t.getAttribute('href'); // href 속성의 값을 가져온다.

t.setAttribute('title', 'abcdef'); // title 속성의 값을 설정한다.

t.removeAttribute('title'); // title 속성을 제거한다.

</script>


jQuery는 HTML 요소에 대해 객체를 통하여 속성 값을 제어할 수 있는 attr()함수를 제공한다.


var 변수 = $("요소").attr("속성이름"); // 속성 값 읽기

var 변수 = $("요소").attr("속성이름","값"); // 속성 값 변경/추가


예제1

<div id="ajaxPath" data-path="<?php echo $g['path_page'].'process/'; ?>" ></div>


var loginpath =$("#ajaxPath").attr('data-path');
$.ajax({
    url: loginpath+'updateUser.php',
    type: 'POST',
    data: {
        idx:$("#memberidx").val(),
        userNM:$("#memberName").val(),
        mobileNO:$("#memberMobile").val()
    },
    dataType: "json",
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (response) {
        if(response.result == 1){
            alert('수정 완료');
            location.replace('index.php'); // 화면 갱신
        } else if(response.result == 0){
            alert('수정 실패');
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert("ajax error : " + textStatus + "\n" + errorThrown);
    }
});


예제2

<span class="button" id="errorChk" data-uid="<?=$R['uid']?>">오류</span>


$("#errorChk").click(function(){
    uid=$(this).attr("data-uid");
    ErrorDisplay(uid);
});

function ErrorDisplay(_uid){
    $.get("ErrorChk.php", {uid:_uid}, function(data){
        $("#dialog").dialog("open").html(data);
    });
}

function ErrorChk(_uid,_mod){
    $.get("ErrorChk.php", {uid:_uid, mod:_mod}, function(data){
        $("#dialog").dialog("open").html(data);
    });
}


prop() 함수 : 선택한 요소에 속성을 반환/생성/변환한다.

주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 Javascript 입장에서의 속성(property)이다.

jQuery 1.6 부터 prop()함수가 추가되어 attr()함수의 역할을 나누게 되었다.


다음 예제를 통해 결과가 어떻게 다른지 확인해보자.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var prop_id = $(":text").prop("id");
    var attr_id = $(":text").attr("id");

    alert("prop id값  : " + prop_id + " , attr id값 : " +  attr_id);


    var prop_class = $(":text").prop("class");
    var attr_class = $(":text").attr("class");

    alert("prop class값 : " + prop_class + " , attr class값 : " +  attr_class);


    var prop_readonly = $(":text").prop("readonly");
    var attr_readonly = $(":text").attr("readonly");

    alert("prop readonly값 : " + prop_readonly + " , attr readonly값 : " +  attr_readonly);


    var prop_disabled = $(":text").prop("disabled");
    var attr_disabled = $(":text").attr("disabled");
    alert("prop disabled값 : " + prop_disabled + " , attr disabled값 : " +  attr_disabled);
})
</script>
</head>
<body>
<input type="text" id="text_field" class="text_class" readonly="readonly" disabled="disabled" />
</body>
</html>


prop id값  : text_field , attr id값 : text_field

prop class값 : text_class , attr class값 : text_class


prop readonly값 : true , attr readonly값 : readonly

prop disabled값 : true , attr disabled값 : disabled


<input id="chk" type="checkbox" checked="checked" />
먼저 attr 함수로 checked 속성 값을 가져오면 그 결과 값은 checked(HTML이 가지고 있는 속성의 text 값)로 나온다.
하지만, prop 함수로 checked 속성 값을 가져오면 그 결과 값은 true(속성이 실제 의미하는 값)가 된다.

먼저 attr 함수로 checked 속성 값을 가져오면 그 결과 값은 checked(HTML이 가지고 있는 속성의 text 값)로 나온다.

하지만, prop 함수로 checked 속성 값을 가져오면 그 결과 값은 true(속성이 실제 의미하는 값)가 된다.



출처: http://ggmouse.tistory.com/92 [초보개발자꽁쥐]

true / false체크 같은 것을 사용할 때 아주 유용하다.
prop가 나온후로는
$("요소").prop("checked",true);
$("요소").prop("checked",false);
로 변경을 해주어야 체크박스 핸들링이 가능하다.

728x90
블로그 이미지

Link2Me

,
728x90

음력 달력 예제를 가지고 수정해서 만들어본 코드다.


달력의 모양은 위와 같다.

ㅇ bootstrap 코드로 수정 보완

    - 해상도에 따라 일부 좀 수정해야 할 부분이 있음.

ㅇ jQuery 일정 등록 기능 추가

   - 해당 셀에서 마우스 클릭하면 일정 등록 추가 화면 팝업

   - 등록된 일정에 마우스를 클릭하면 삭제 여부 문의 및 삭제 처리

   - 코드를 좀 더 보완해야 할 듯....

ㅇ 음력 및 간지 지원 (음력 지원 DB 활용)

ㅇ 대체공휴일 코드 추가

    - 어린이날, 설날, 추석 대체공유일 코드

ㅇ 기념일 등록

    - 기념일을 등록하는 코드 파일은 미 구현(DB에 직접 기록하는 방법으로 테스트)

    - 태어난 연도 이전에는 표시되지 않도록 하는 코드는 미구현


음력은 함수 lun2sol.php 파일은 만세력 달력을 찾아보니 데이터가 불일치한다.

그래서 MySQL DB 데이터 기준으로 동작되도록 코드를 수정했다.

검색해보니 고영창 만세력 코드가 있는데 이것으로 테스트는 해봤지만 이 코드에 맞춰서 테스트는 아직 안해봤다.

MySQL DB파일 사이즈가 좀 되다보니 용량이 조금 크다고 볼 수도 있다.


테이블 구조

 CREATE TABLE IF NOT EXISTS `memorials` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category` int(4) NOT NULL,
  `subject` text NOT NULL,
  `start_year` char(4) DEFAULT NULL,
  `memorial_date` varchar(4) NOT NULL,
  `dateType` tinyint(2) NOT NULL DEFAULT '0',
  `writing_date` date NOT NULL DEFAULT '0000-00-00',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

--
-- 테이블의 덤프 데이터 `memorials`
--

INSERT INTO `memorials` (`id`, `category`, `subject`, `start_year`, `memorial_date`, `dateType`, `writing_date`) VALUES
(1, 1, '홍길동 생일', '1978', '0827', 1, '2018-10-30'),
(2, 1, '이정민 생일', '1979', '1215', 1, '2018-10-30'),
(3, 1, '홍진경 생일', '1992', '0614', 0, '2018-10-30');

-- --------------------------------------------------------

--
-- 테이블 구조 `memorial_data`
--

CREATE TABLE IF NOT EXISTS `memorial_data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `relatedid` int(11) NOT NULL,
  `solar_date` date NOT NULL DEFAULT '0000-00-00',
  `lunar_date` date NOT NULL DEFAULT '0000-00-00',
  `yun` tinyint(1) NOT NULL DEFAULT '0',
  `subject` text NOT NULL,
  `category` int(4) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `relatedid` (`relatedid`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

-- --------------------------------------------------------

--
-- 테이블 구조 `tbl_events`
--

CREATE TABLE IF NOT EXISTS `tbl_events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `start` date NOT NULL,
  `end` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;



<?php
define("PHP_SELF", $_SERVER['PHP_SELF']);
error_reporting(error_reporting() & ~E_NOTICE);
if (!isset($cellh))
    $cellh = 70; // date cell height
if (!isset($tablew))
    $tablew = 650; //table width
$cellw = 130;
//---- 오늘 날짜
$thisyear = date('Y'); // 4자리 연도
$thismonth = date('n'); // 0을 포함하지 않는 월
$today = date('j'); // 0을 포함하지 않는 일

// $year, $month 값이 없으면 현재 날짜
$year = isset($_GET['year']) ? $_GET['year'] : $thisyear;
$month = isset($_GET['month']) ? $_GET['month'] : $thismonth;
$day = isset($_GET['day']) ? $_GET['day'] : $today;

//------ 날짜의 범위 체크
if (($year > 2038) or ($year < 1900))
    ErrorMsg("연도는 1900 ~ 2038년만 가능합니다.");

$last_day = date('t', mktime(0, 0, 0, $month, 1, $year)); // 해당월의 총일수 구하기

$prevmonth = $month - 1;
$nextmonth = $month + 1;
$prevyear = $nextyear = $year;
if ($month == 1) {
    $prevmonth = 12;
    $prevyear = $year - 1;
} elseif ($month == 12) {
    $nextmonth = 1;
    $nextyear = $year + 1;
}
$pre_year = $year - 1;
$next_year = $year + 1;


include_once 'dbconnect.php'; // DB 연결
include_once 'lun2sol.php';  //양력.음력 변환 인클루드

/****************** lunar_date ************************/
$predate = date("Y-m-d", mktime(0, 0, 0, $month - 1, 1, $year));
$nextdate = date("Y-m-d", mktime(0, 0, 0, $month + 1, 1, $year));

$sql = "SELECT solar_date,ganji,lunar_date,yun FROM lunar_data where solar_date between '$predate' and '$nextdate' ";
$result = mysqli_query($dbconn, $sql) or die(mysqli_error($dbconn));
while ($R = mysqli_fetch_array($result)) {
    $lunarData[] = array(0 => date("n-j", strtotime($R['solar_date'])), 1 => $R['ganji'], 2 => date("n.j", strtotime($R['lunar_date'])), 3 => date("j", strtotime($R['lunar_date'])), 4 => $R['yun']);
}
//echo '<pre>';print_r($lunarData);echo '</pre>';
/****************** lunar_date ************************/

/****************** 기념일 데이터 ************************/
// 음력 기념일을 생성하면 시작년도부터 해당 양력일자를 자동으로 생성 처리??
$sql = "SELECT category,subject,memorial_date,dateType FROM memorials";
$result = mysqli_query($dbconn, $sql);
while ($R = mysqli_fetch_array($result)) {
    if($R['dateType'] == 1){ // 음력
        //$tmp = lun2sol($year . $R['memorial_date']); // 정확도가 맞는지 확인 필요
        $lunar_temp = $year ."-".substr($R['memorial_date'],0,2)."-".substr($R['memorial_date'],2,2);
        $rsql = "SELECT solar_date,num,yun,lunar_date FROM lunar_data where lunar_date='".$lunar_temp."'";
        $rs = mysqli_query($dbconn, $rsql);
        $RS = mysqli_fetch_array($rs);
        $tmp = strtotime($RS[0]);
        if(substr($RS[0],0,4) !== $year){ // 음력 기념일이 같은 해가 아니면
            $sql = "SELECT count(relatedid) FROM memorial_data where relatedid=".$RS[1]." and solar_date='".$RS[0]."' and yun=".$RS[2]." and subject='".$R['subject']."' ";
            $rt = mysqli_query($dbconn, $sql);
            $RT = mysqli_fetch_array($rt);
            if($RT[0] == 0){ // 일치하는 데이터가 없으면
                $sql ="INSERT INTO memorial_data (relatedid,solar_date,lunar_date,yun,subject,category) ";
                $sql.="VALUES (".$RS[1].",'".$RS[0]."','".$RS[3]."','".$RS[2]."','".$R['subject']."','".$R['category']."')";
                mysqli_query($dbconn, $sql);
            }
        }
    } else { // 양력
        $tmp = strtotime($year ."-".substr($R['memorial_date'],0,2)."-".substr($R['memorial_date'],2,2));
    }
    $memorialData[] = array(0 => date("n-j",$tmp), 1 => $R['category'], 2 => $R['subject']);
}

// 음력 기념일이 같은 해에 없는 경우 테이블에 생성된 데이터를 조회 및 추가
$sql = "SELECT solar_date,subject,category FROM memorial_data where solar_date between '$predate' and '$nextdate' ";
$result = mysqli_query($dbconn, $sql);
while ($R = mysqli_fetch_array($result)) {
    $tmp = strtotime($R[0]);
    $memorialData[] = array(0 => date("n-j",$tmp), 1 => $R['category'], 2 => $R['subject']);
}

/****************** 휴일 정의 ************************/
$Holidays = Array();
$Holidays[] = array(0 => '1-1', 1 => '신정');
$Holidays[] = array(0 => '3-1', 1 => '삼일절');
$Holidays[] = array(0 => '5-5', 1 => '어린이날');
$Holidays[] = array(0 => '6-6', 1 => '현충일');
$Holidays[] = array(0 => '7-17', 1 => '제헌절');
$Holidays[] = array(0 => '8-15', 1 => '광복절');
$Holidays[] = array(0 => '10-3', 1 => '개천절');
$Holidays[] = array(0 => '10-9', 1 => '한글날');
$Holidays[] = array(0 => '12-25', 1 => '성탄절');

//$tmp = lun2sol($year . "0101");  //설날
$tmp = strtotime(Lun2SolDate($year."-01-01"));
$Holidays[] = array(0 => date("n-j", ($tmp - (3600 * 24))), 1 => '');
$Holidays[] = array(0 => date("n-j", $tmp), 1 => '설날');
$Holidays[] = array(0 => date("n-j", ($tmp + (3600 * 24))), 1 => '');

//$tmp = lun2sol($year . "0408");  //석가탄신일
$tmp = strtotime(Lun2SolDate($year."-04-08"));
$Holidays[] = array(0 => date("n-j", $tmp), 1 => '석탄일');

//$tmp = lun2sol($year . "0815"); //추석
$tmp = strtotime(Lun2SolDate($year."-08-15"));
$Holidays[] = array(0 => date("n-j", ($tmp - (3600 * 24))), 1 => '');
$Holidays[] = array(0 => date("n-j", $tmp), 1 => '추석');
$Holidays[] = array(0 => date("n-j", ($tmp + (3600 * 24))), 1 => '');

// 어린이날 대체공휴일 검사 : 어린이날은 토요일, 일요일인 경우 그 다음 평일을 대체공유일로 지정
$childdayChk = isWeekend($year."-05-05");
if($childdayChk == 0) $Holidays[] = array(0 => date("n-j", strtotime($year."-05-06")), 1 => '대체공휴일');
if($childdayChk == 6) $Holidays[] = array(0 => date("n-j", strtotime($year."-05-07")), 1 => '대체공휴일');

// 설날 대체공휴일 검사
if(isWeekend(Lun2SolDate($year."-01-01")) == 0)
    $Holidays[] = array(0 => date("n-j", strtotime(Lun2SolDate($year."-01-03"))), 1 => '');
if(isWeekend(Lun2SolDate($year."-01-01")) == 1)
    $Holidays[] = array(0 => date("n-j", strtotime(Lun2SolDate($year."-01-03"))), 1 => '');
if(isWeekend(Lun2SolDate($year."-01-02")) == 0)
    $Holidays[] = array(0 => date("n-j", strtotime(Lun2SolDate($year."-01-03"))), 1 => '');


// 추석 대체공휴일 검사
if(isWeekend(Lun2SolDate($year."-08-14")) == 0)
    $Holidays[] = array(0 => date("n-j", strtotime(Lun2SolDate($year."-08-17"))), 1 => '');
if(isWeekend(Lun2SolDate($year."-08-15")) == 0)
    $Holidays[] = array(0 => date("n-j", strtotime(Lun2SolDate($year."-08-17"))), 1 => '');
if(isWeekend(Lun2SolDate($year."-08-16")) ==0)
    $Holidays[] = array(0 => date("n-j", strtotime(Lun2SolDate($year."-08-17"))), 1 => '');

/****************** 휴일 정의 ************************/

/****************** schedule ************************/
$sql = "SELECT * FROM tbl_events where start between '$predate' and '$nextdate' ";
$result = mysqli_query($dbconn, $sql);
while ($R = mysqli_fetch_array($result)) {
    $schedule[] = array(0 => date("n-j", strtotime($R['start'])), 1 =>date("n-j", strtotime($R['end'])) ,2 => $R['title'],3 => $R['id']);
}
//echo '<pre>';print_r($schedule);echo '</pre>';
/****************** schedule ************************/

?>

<!DOCTYPE html>
<html lang="ko">
<head>
<title>PHP Calendar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    body{margin-top: 20px; }
    .all {border-width: 1;border-color: #cccccc;border-style: solid;}
    font {font-family: 굴림체;font-size: 12px;color: #505050;    }
    font.title {font-family: 굴림체;font-size: 12px;font-weight: bold;color: #2579CF;    }
    font.week {font-family: 돋움,돋움체;color: #ffffff;font-size: 8pt;    letter-spacing: -1;}
    font.holy {font-family: tahoma;font-size: 22px;color: #FF6C21;}
    font.blue {font-family: tahoma;font-size: 22px;color: #0000FF;}
    font.black {font-family: tahoma;font-size: 22px;color: #000000;}
    font.lunar {font-family: tahoma;font-size: 14px;color: #0000bb;}
    font.gangi {font-family: tahoma;font-size: 14px;color: #424242;}
    font.sblue {font-family: tahoma;font-size: 14px;color: blue;    }
    font.green {font-family: tahoma;font-size: 14px;color: green;    }
    font.red {font-family: tahoma;font-size: 14px;color: red;}
    font.num {font-family: tahoma;font-size: 14px;background-color: #DBA901;}
    font.gray {font-family: tahoma;font-size: 14px;color: #bbbbbb;}
    .main {float: left;width: 70%;border: 5px solid #ccc;background-color: #fff;m }
    .right {float: right;width: 20%;background-color: #fff;border: 5px solid #eee;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    $(".calcell").click(function(){
        var val=$(this).attr("id");
        var date = val.split('-');
        var year = date[0];
        var month = date[1];
        var day = date[2];
        var title = prompt('Event Title:');
        $.ajax({
            url : 'add-event.php',
            type : 'POST',
            data :{year:date[0],month:date[1],day:date[2],title:title},
            success : function(data){
                if(data == 1){
                    location.reload();
                } else if(data == 0) {
                    alert('등록에 실패했습니다.');
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert("arjax error : " + textStatus + "\n" + errorThrown);
            }
        });
    });

    $(".num").click(function(e){
        var val=$(this).attr("uid");
        var deleteMsg = confirm("정말 삭제하시겠습니까?");
        if(deleteMsg){
            $.ajax({
                url : 'delete-event.php',
                type : 'POST',
                data :{id:val},
                success: function (data) {
                    if(data == 1){
                        location.reload();
                    } else if(data == 0) {
                        alert('삭제에 실패했습니다.');
                    }
                }
            });
        }
    });
});
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-responsive">
  <tr align="center" >
    <td>
        <a href=<?php echo 'calendar.php?year='.$pre_year.'&month='.$month . '&day=1'; ?>>◀◀</a>
    </td>
    <td>
        <a href=<?php echo 'calendar.php?year='.$prevyear.'&month='.$prevmonth . '&day=1'; ?>>◀</a>
    </td>
    <td height="50" bgcolor="#FFFFFF" colspan="3">
        <a href=<?php echo 'calendar.php?year=' . $thisyear . '&month=' . $thismonth . '&day=1'; ?>>
        <?php echo "&nbsp;&nbsp;" . $year . '년 ' . $month . '월 ' . "&nbsp;&nbsp;"; ?></a>
    </td>
    <td>
        <a href=<?php echo 'calendar.php?year='.$nextyear.'&month='.$nextmonth.'&day=1'; ?>>▶</a>
    </td>
    <td>
        <a href=<?php echo 'calendar.php?year='.$next_year.'&month='.$month.'&day=1'; ?>>▶▶</a>
    </td>
  </tr>
  <tr class="info">
    <th style="width:14%;text-align:center;">일</td>
    <th style="width:14%;text-align:center;">월</th>
    <th style="width:14%;text-align:center;">화</th>
    <th style="width:14%;text-align:center;">수</th>
    <th style="width:14%;text-align:center;">목</th>
    <th style="width:14%;text-align:center;">금</th>
    <th style="width:14%;text-align:center;">토</th>
  </tr>
  <tr height=<?php echo $cellh;?>>

<?php
    $date = 1;
    $offset = 0;
    $ck_row = 0;
    //프레임 사이즈 조절을 위한 체크인자
    $R = array();

    while ($date <= $last_day) {
        $mday = $date;

        if ($date == '1') {
            // 시작 요일 구하기 : date("w", strtotime($year."-".$month."-01"));
            $offset = date('w', mktime(0, 0, 0, $month, $date, $year)); // 0: 일요일, 6: 토요일
            SkipOffset($offset, mktime(0, 0, 0, $month, $date, $year));
        }
        if ($offset == 0)
            $style = "holy"; // 일요일 빨간색으로 표기
        else if($offset == 6)
            $style = "holy"; // 토요일 빨간색 또는 파란색
        else
            $style = "black";

        // 법정 공휴일
        for ($i = 0; $i < count($Holidays); $i++) {
            if ($Holidays[$i][0] == "$month-$date") {
                $style = "holy";
                $mday = "$date";
                $holidata = $Holidays[$i][1];
                break;
            }
        }

        // 음력 일자 및 간지 데이터
        for ($i = 0; $i < count($lunarData); $i++) {
            if ($lunarData[$i][0] == "$month-$date") {
                if($lunarData[$i][4] == 1){ // 윤달이면
                    $lunarday = '(閏)'.$lunarData[$i][2];
                } else {
                    $lunarday = $lunarData[$i][2];
                }
                $gaingi_text = $lunarData[$i][1];
            }
        }

        // 기념일 : 결혼, 생일, 제사, 기타 등
        for ($i = 0; $i < count($memorialData); $i++) {
            if ($memorialData[$i][0] == "$month-$date") {
                $memorialdata = $memorialData[$i][2];
                break;
            }
        }

        // 사용자 일정 데이터
        $dType1 = array();
        for ($i = 0; $i < count($schedule); $i++) {
            if ($schedule[$i][0] == "$month-$date") {
                $dType1[] = array(0=>$schedule[$i][2],1=>$schedule[$i][3]);
            }
        }
      
        if ($date == $today && $year == $thisyear && $month == $thismonth) { // 오늘 날짜
            echo "<td valign=top bgcolor=#99FFFF class='calcell' id='".$year."-".$month."-".$mday."'>";
        } else {
            echo "<td valign=top class='calcell' id='".$year."-".$month."-".$mday."'>";
        }
            CalendarPrint($style,$mday,$lunarday,$gaingi_text,$holidata,$memorialdata,$dType1);
            echo "</td>\n";

        // 출력후 값 초기화
        $holidata = "";
        $memorialdata ="";

        $date++; // 날짜 증가
        $offset++;
        if ($offset == 7) {
            echo "</tr>";
            if ($date <= $last_day) {
                echo "<tr height=$cellh>";
                $ck_row++;
            }
            $offset = 0;
        }

    }// end of while

    if ($offset != 0) {
        SkipOffset((7 - $offset), '', mktime(0, 0, 0, $month + 1, 1, $year));
        echo "</tr>\n";
    }
    echo("</td>\n");

    function ErrorMsg($msg) {
        echo " <script>window.alert('$msg');history.go(-1);</script>";
        exit;
    }

    function CalendarPrint($style,$mday,$lunarday,$gaingi,$holidata='',$memorialdata='',$dType1=''){
        echo "<font class=".$style.">$mday</font><br/>";
        echo "<font class=lunar>$lunarday</font><br/>";
        echo "<font class=gangi>$gaingi</font><br/>";
        if(strlen($holidata)>0) echo "<font class=red>$holidata</font><br/>";
        if(strlen($memorialdata)>0) echo "<font class=sblue>$memorialdata</font><br/>";
        if(count($dType1)>0) { // 배열 출력
            for ($i = 0; $i < count($dType1); $i++) {
                echo "<font class=num uid=".$dType1[$i][1].">".$dType1[$i][0]."</font><br/>";
            }
        }
    }

    function SkipOffset($no, $sdate = '', $edate = '') {
        for ($i = 1; $i <= $no; $i++) {
            $ck = $no - $i + 1;
            if ($sdate)
                $num = date('n.j', $sdate - (3600 * 24) * $ck);
            if ($edate)
                $num = date('n.j', $edate + (3600 * 24) * ($i - 1));

            echo "<td valign=top><font class=gray>$num</font></td>";
        }
    }

    function Lun2SolDate($date){
        global $dbconn;
        $sql = "SELECT solar_date FROM lunar_data where lunar_date='".$date."'";
        $result = mysqli_query($dbconn, $sql);
        $R = mysqli_fetch_array($result);
        return $R[0];
    }

    function isWeekend($date){
        // 앙력 날짜의 요일을 리턴
        // 일요일 0 토요일 6
        return date("w", strtotime($date));
    }

?>
    </tr>
</table>
</div>
</body>
</html>



코드 구현 파일

calendar.zip

lunar_data.zip


참조한 사이트

- 참조한 URL을 찾게되면 추가할 예정



본 자료가 도움되었다면 000 해주세요. 좋은 글 작성에 큰 힘이 됩니다.


728x90

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

PHP 날짜와 시간 차이  (0) 2019.03.26
jQuery Select Box 선택값 제어  (0) 2019.01.05
법정공휴일  (0) 2018.11.03
PHP 달력 만들기 소스  (0) 2018.10.30
날짜 선택  (0) 2018.10.26
블로그 이미지

Link2Me

,
728x90

법정공휴일은 '관공서의 공휴일에 관한 규정'(대통령령)에 의해 공휴일이 된 날을 말한다.
법령에 따르면 법정공휴일은 일요일, 국경일, 1월 1일, 음력 1월 1일(설날)과 전후 이틀, 석가탄신일(음력 4월 8일),
어린이날(5월 5일), 현충일(6월 6일), 음력 8월 15일(추석)과 전후 이틀, 성탄절(12월 25일),
보궐선거를 제외한 각종 선거투표일 등 정부에서 수시로 정하는 날 등이다.
국경일은 ‘국경일에 관한 법률’에 의한 3ㆍ1절, 제헌절, 광복절, 개천절, 한글날을 말한다.

대체공휴일제의 도입 (안 제3조)
– 설날, 추석 연휴가 다른 공휴일과 겹치는 경우 그 날 다음의 첫 번째 비공휴일을 공휴일로 함
– 어린이날이 토요일 또는 다른 공휴일과 겹치는 경우 그 날 다음의 첫 번째 비공휴일을 공휴일로 함
(어린이날 외의 토요일은 대체공휴일에 포함되지 않는다)


음력기준으로 법정공휴일인 설날, 추석과 어린이날은 대체 공휴일을 고려하여 코딩해야 한다.



728x90
블로그 이미지

Link2Me

,
728x90

PHP로 만들어진 달력을 활용해보고자 많은 자료를 검색해봤지만 결국에는 기본적인 개념이 충실한 PHP 달력 만들기 소스코드를 좀 더 정교하게 가다듬어 정리를 하는 것이 답인 거 같다.


달력은 일정관리, 음력일정, 음력 기념일 등을 관리할 수 있어야 하므로 외국 소스를 활용하는 것은 큰 도움이 안되더라.


bootstrap 기반으로 포팅하고 약간 수정해서 정리한 걸 적어둔다.


양력기반으로 일정추가가 잘된 소스는 https://phppot.com/php/php-calendar-event-management-using-fullcalendar-javascript-library/ 를 참조하면 도움이 될 것이다.

그리고 https://www.phpzag.com/create-event-calendar-with-jquery-php-and-mysql/ 자료도 도움이 된다.



음력 기념일, 일정 등이 포함된 버전으로 만들기 위해서는 좀 더 정리가 필요하다.

음력 일정까지 정리되는 달력은 다른 소스를 가지고 수정 작업을 하고 있는 중이다.


<?php
//---- 오늘 날짜
$thisyear = date('Y'); // 4자리 연도
$thismonth = date('n'); // 0을 포함하지 않는 월
$today = date('j'); // 0을 포함하지 않는 일

//------ $year, $month 값이 없으면 현재 날짜
$year = isset($_GET['year']) ? $_GET['year'] : $thisyear;
$month = isset($_GET['month']) ? $_GET['month'] : $thismonth;
$day = isset($_GET['day']) ? $_GET['day'] : $today;

$prev_month = $month - 1;
$next_month = $month + 1;
$prev_year = $next_year = $year;
if ($month == 1) {
    $prev_month = 12;
    $prev_year = $year - 1;
} else if ($month == 12) {
    $next_month = 1;
    $next_year = $year + 1;
}
$preyear = $year - 1;
$nextyear = $year + 1;

$predate = date("Y-m-d", mktime(0, 0, 0, $month - 1, 1, $year));
$nextdate = date("Y-m-d", mktime(0, 0, 0, $month + 1, 1, $year));

// 1. 총일수 구하기
$max_day = date('t', mktime(0, 0, 0, $month, 1, $year)); // 해당월의 마지막 날짜
//echo '총요일수'.$max_day.'<br />';

// 2. 시작요일 구하기
$start_week = date("w", mktime(0, 0, 0, $month, 1, $year)); // 일요일 0, 토요일 6

// 3. 총 몇 주인지 구하기
$total_week = ceil(($max_day + $start_week) / 7);

// 4. 마지막 요일 구하기
$last_week = date('w', mktime(0, 0, 0, $month, $max_day, $year));
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style>
    font.holy {font-family: tahoma;font-size: 20px;color: #FF6C21;}
    font.blue {font-family: tahoma;font-size: 20px;color: #0000FF;}
    font.black {font-family: tahoma;font-size: 20px;color: #000000;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-responsive">
  <tr align="center" >
    <td>
        <a href=<?php echo 'index.php?year='.$preyear.'&month='.$month . '&day=1'; ?>>◀◀</a>
    </td>
    <td>
        <a href=<?php echo 'index.php?year='.$prev_year.'&month='.$prev_month . '&day=1'; ?>>◀</a>
    </td>
    <td height="50" bgcolor="#FFFFFF" colspan="3">
        <a href=<?php echo 'index.php?year=' . $thisyear . '&month=' . $thismonth . '&day=1'; ?>>
        <?php echo "&nbsp;&nbsp;" . $year . '년 ' . $month . '월 ' . "&nbsp;&nbsp;"; ?></a>
    </td>
    <td>
        <a href=<?php echo 'index.php?year='.$next_year.'&month='.$next_month.'&day=1'; ?>>▶</a>
    </td>
    <td>
        <a href=<?php echo 'index.php?year='.$nextyear.'&month='.$month.'&day=1'; ?>>▶▶</a>
    </td>
  </tr>
  <tr class="info">
    <th hight="30">일</td>
    <th>월</th>
    <th>화</th>
    <th>수</th>
    <th>목</th>
    <th>금</th>
    <th>토</th>
  </tr>

  <?php
    // 5. 화면에 표시할 화면의 초기값을 1로 설정
    $day=1;

    // 6. 총 주 수에 맞춰서 세로줄 만들기
    for($i=1; $i <= $total_week; $i++){?>
  <tr>
    <?php
    // 7. 총 가로칸 만들기
    for ($j = 0; $j < 7; $j++) {
        // 8. 첫번째 주이고 시작요일보다 $j가 작거나 마지막주이고 $j가 마지막 요일보다 크면 표시하지 않음
        echo '<td height="50" valign="top">';
        if (!(($i == 1 && $j < $start_week) || ($i == $total_week && $j > $last_week))) {

            if ($j == 0) {
                // 9. $j가 0이면 일요일이므로 빨간색
                $style = "holy";
            } else if ($j == 6) {
                // 10. $j가 0이면 토요일이므로 파란색
                $style = "blue";
            } else {
                // 11. 그외는 평일이므로 검정색
                $style = "black";
            }

            // 12. 오늘 날짜면 굵은 글씨
            if ($year == $thisyear && $month == $thismonth && $day == date("j")) {
                // 13. 날짜 출력
                echo '<font class='.$style.'>';
                echo $day;
                echo '</font>';
            } else {
                echo '<font class='.$style.'>';
                echo $day;
                echo '</font>';
            }
            // 14. 날짜 증가
            $day++;
        }
        echo '</td>';
    }
 ?>
  </tr>
  <?php } ?>
</table>
</div>

</body>
</html>


음력을 지원하는 달력의 모습


음력 달력에 대한 소스 코드 설명은 http://link2me.tistory.com/1545 를 참조하면 된다.

728x90

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

PHP 달력 소스 코드 (음력, 간지, 기념일, 일정등록)  (9) 2018.11.05
법정공휴일  (0) 2018.11.03
날짜 선택  (0) 2018.10.26
접속단말 및 IP주소  (0) 2018.06.11
PHP 글자수 줄임 표시  (0) 2018.06.09
블로그 이미지

Link2Me

,
728x90

PHP에서 날짜 선택을 깔끔하게 하는 코드를 적어둔다.


<?php
//---- 오늘 날짜
$thisyear = date("Y");
$thismonth = date("m");
$today = date("d"); // 1, 2, 3, ..., 31

//------ $year, $month 값이 없으면 현재 날짜
$year = isset($_GET['year']) ? $_GET['year'] : $thisyear;
$month = isset($_GET['month']) ? $_GET['month'] : $thismonth;
$day = isset($_GET['day']) ? $_GET['day'] : $today;

$start_date = date("Y", mktime(0, 0, 0, date("m"), date("d"), date("Y") - 1));
$end_date = date("Y", mktime(0, 0, 0, date("m"), date("d"), date("Y") + 3));
?>


<TR>
    <TD >시작날짜</TD>
    <TD colspan="2" rowspan="1">
    <select name="start_date1">
    <?php for($i=$start_date;$i<$end_date;$i++):?><option value="<?php echo $i?>"<?php if($year==$i):?> selected="selected"<?php endif?>><?php echo $i?>년</option><?php endfor?>
    </select>
    <select name="start_date2" >
    <?php for($i=1;$i<13;$i++):?><option value="<?php echo sprintf('%02d',$i)?>"<?php if($month==$i):?> selected="selected"<?php endif?>><?php echo sprintf('%02d',$i)?>월</option><?php endfor?>
    </select>
    <select name="start_date3" >
    <?php for($i=1;$i<32;$i++):?><option value="<?php echo sprintf('%02d',$i)?>"<?php if($day==$i):?> selected="selected"<?php endif?>><?php echo sprintf('%02d',$i)?>일</option><?php endfor?>
    </select>

    </TD>
</TR>

728x90

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

법정공휴일  (0) 2018.11.03
PHP 달력 만들기 소스  (0) 2018.10.30
접속단말 및 IP주소  (0) 2018.06.11
PHP 글자수 줄임 표시  (0) 2018.06.09
PHP to JSP  (0) 2018.04.28
블로그 이미지

Link2Me

,
728x90

PHP 서버와 안드로이드 클라이언트간에 연동 테스트를 하는데 결과가 표시되지 않는다.

서버를 직접 실행해서 메시지를 확인해보니...

Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given

와 같은 메시지가 나온다.


이 메시지 나오는 원인은 SQL 문의 칼럼이 잘못된 곳이 있을 경우에 나온다.

echo $sql.'<br />'; 로 결과를 화면에 찍어보고 잘못 오타가 난 칼럼 또는 칼럼에 전혀 없는 명칭을 사용하고 있지는 않는지 확인해보는 것이 좋다.

728x90
블로그 이미지

Link2Me

,
728x90

https://gist.github.com/joashp/a1ae9cb30fa533f4ad94 를 참조하여 AES 암호화, 복호화 알고리즘을 테스트 했다.


PHP에서 문자열을 암호화할 때 보다 더 강력하게 암호화할 수 있는 salt(솔트), hash 256를 사용한 AES 암호화, 복호화 알고리즘이다.

가장 중요한 것은 secret_key 를 관리하는 방법이다.

web 접속 경로상에 없도록 하거나, 다른 서버에 관리하는 것이 좋다.

아래 예제에서는 $salt 를 이용하여 생성한 값을 가지고 임의로 $secret_key 를 만들었다.


윈도우 기반 autoset9 에서는 openssl_encrypt 에러가 발생하여 리눅스 기반에서 테스트를 했다.


사용법 예제

<?php
include_once 'dbController.php';
require_once 'loginClass.php';
$c = new LoginClass();

$salt = sha1(mt_rand());
echo $salt.'<br />';
$secret_key = "f9a90bfa9e8ddd9965fecc0052e6786cf59f3131";
echo $secret_key.'<br />';
$secret_iv = substr($salt, 0, 20);
echo $secret_iv.'<br />';

$str = '안녕하세요? 홍길동입니다.';
$encrypted = $c->AES_encrypt($str);
echo $encrypted.'<br />';
echo 'encrypted message length : '.strlen($encrypted).'<br />';

$decrypted = $c->AES_decrypt($encrypted);
echo $decrypted.'<br />';
?>



Class

<?php
class DBController {
    private $host = 'localhost';
    private $database = 'test';
    private $userid = 'root';
    private $password = 'autoset';
    protected $db; // 변수를 선언한 클래스와 상속받은 클래스에서 참조할 수 있다.

    public function __construct() {
        $this->db = $this->connectDB();
        // construct 메소드는 객체가 생성(인스턴스화)될 때 자동으로 실행되는 특수한 메소드다.
    }

    function __destruct(){
        mysqli_close($this->connectDB());
        //mysqli_close($this->db);
    }

    private function connectDB() {
        $dbconn = mysqli_connect($this->host, $this->userid, $this->password, $this->database);
        mysqli_set_charset($dbconn, "utf8"); // DB설정이 잘못되어 euc-kr 로 되어 있으면 문제가 됨
        if (mysqli_connect_errno()) {
           printf("Connect failed: %s\n", mysqli_connect_error());
           exit();
        } else {
          return $dbconn;
        }
    }
}//end dbClass

?>

<?php
class LoginClass extends DBController {
    // class 자식클래스 extends 부모클래스
    // override : 부모 클래스와 자식 클래스가 같은 메소드를 정의했을 경우 자식 클래스가 우선시된다.
    // AES 암호화
    function AES_encrypt($plain_text){
        global $secret_key, $secret_iv;
        $encrypt_method = "AES-256-CBC";
        $key = hash('sha256', $secret_key);
        $iv = substr(hash('sha256', $secret_iv), 0, 16);
        $output = openssl_encrypt($plain_text, $encrypt_method, $key, true, $iv);
        return base64_encode($output);
    }

    // AES 복호화
    function AES_decrypt($encrypted_string){
        global $secret_key, $secret_iv;
        $encrypt_method = "AES-256-CBC";
        $key = hash('sha256', $secret_key);
        $iv = substr(hash('sha256', $secret_iv), 0, 16);
        $output = openssl_decrypt(base64_decode($encrypted_string), $encrypt_method, $key, true, $iv);
        return $output;
    }

}//end class LoginClass
?>


https://gist.github.com/kijin/8404004 를 참조하여 AES 암호화, 복호화를 해도 좋을 거 같다.


728x90

'Web 프로그램 > 암호화 처리' 카테고리의 다른 글

phpMyAdmin 해킹시도 흔적  (0) 2018.06.11
[PHP] SHA384 패스워드 만들기  (0) 2017.01.27
[보안] PHP AES 암호화 예제  (0) 2016.10.16
[보안] SEED PHP 사용법  (0) 2016.10.15
블로그 이미지

Link2Me

,