#####################################################
## 쓴이 : 카폐인(nonots@hanmail.net)
## 쓴때 : 2009-04-02 나른한 오후
## 도움 : 바다웹호스팅 http://www.badaweb.co.kr
## 제목 : phpMyAdmin 에서 DB Designer 기능 사용하기
#####################################################

1. 개요

phpmyadmin 은 많이 쓰지만 거기 있는 고급 기능들은
대부분 거의 안써왔는데.. 얼마전 한 고객이 DB ERD 구조도
보내 달라고 해서 귀찮았던 적이 있다.
원격 DB 서버를 일반적인 ERD 툴로 접속하려면 포트, 아이피 열어주고
방화벽 열어주고.. 귀찮은데.. phpmyadmin 에서 웹모드로 DB Designer
를 구현해 놓아서 편리하다.
..
어제 하루종일 인터넷 검색해봐도 허탕이었는데..
등잔밑이 어두웠다..



2. 미리 할 일

1) phpmyadmin 최신버전 설치한다. 2.5 버전 이상에서 가능하다는데
이왕이면 http://phpmyadmin.net 에서 현재 최신버전 3.1.3 이상을 다운받아 압축풀고
설치한다.


2) scripts/create_tables.sql 파일로 db 와 테이블을 생성한다.
이부분이 중요하다. 고급기능을 위해 필요한 정보를 별도 테이블에 저장해야한다.
이 파일을 보면 phpmyadmin 라는 DB 를 만들고 테이블 여러개를 생성한다.

mysql -uroot -proot_pwd < scripts/create_tables.sql

명령어로 밀어 넣은뒤, 이 DB 에 접근할 사용자
예를 들어, pma 를 추가한후 phpmyadmin 에 접근 권한을 준다.

GRANT SELECT, INSERT, DELETE, UPDATE ON `phpmyadmin`.* TO 'pma'@localhost;


3) config.sample.inc.php 파일을 config.inc.php 로 복사한다.
일반적으로 설치하듯이 직관적으로 세팅한다.
이 파일 마지막 부분에 주석처리된 아래 부분 주석 풀어준다.

....
$cfg['Servers'][$i]['controluser'] = 'pma'; // phpmyadmin DB 에 grant 된 사용자
$cfg['Servers'][$i]['controlpass'] = 'kw1934';
/* Advanced phpMyAdmin features */
$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin'; // 사용할 DB, 변경가능할듯
$cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
$cfg['Servers'][$i]['relation'] = 'pma_relation';
$cfg['Servers'][$i]['table_info'] = 'pma_table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma_column_info';
$cfg['Servers'][$i]['history'] = 'pma_history';
$cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';
....

만약 DB 에 root 권한이 없다면 phpmyadmin 이라는 DB 를 별도 생성을 못하니까,
자신의 DB 로 막바로 해도 될꺼다.
그리고 controluser, controlpass 부분도 db 사용자 와 같게 하면 될꺼 같다.
안해 봐서 모름.


4) 웹브라우저로 설치된 phpmyadmin 에 접속한후 왼쪽 메뉴에서 DB 명 하나를 클릭한 후
오른쪽 본문 상단에 보면 "Designer" 라는 메뉴가 보인다. 클릭하면 된다.
직관적으로 사용하면 된다.
결과를 PDF 파일로 저장도 된다는데 해보지는 않았음.



3. 마무리

오래전에 phpdbdesigner 라는 게 있었는데 더이상 개발이 안되어서 관심을 가지지 않았는데
알고보니 그 기능이 phpmyadmin 에 흡수되었더군요.
..
eyeOS 1.8.5 로 버전업하면서..
웹브라우저로 참 많은짓을 하는구나.. 하는 생각을..
..
나른한 오후.. 졸린다..
..
아참.. php, mysql 옛날버전(?)은 잘 안될겁니다.

#####################################################
## 쓴이 : 카폐인(nonots@hanmail.net)
## 쓴때 : 2009-04-02 나른한 오후
## 도움 : 바다웹호스팅 http://www.badaweb.co.kr
## 제목 : phpMyAdmin 에서 DB Designer 기능 사용하기
#####################################################

1. 개요

phpmyadmin 은 많이 쓰지만 거기 있는 고급 기능들은
대부분 거의 안써왔는데.. 얼마전 한 고객이 DB ERD 구조도
보내 달라고 해서 귀찮았던 적이 있다.
원격 DB 서버를 일반적인 ERD 툴로 접속하려면 포트, 아이피 열어주고
방화벽 열어주고.. 귀찮은데.. phpmyadmin 에서 웹모드로 DB Designer
를 구현해 놓아서 편리하다.
..
어제 하루종일 인터넷 검색해봐도 허탕이었는데..
등잔밑이 어두웠다..



2. 미리 할 일

1) phpmyadmin 최신버전 설치한다. 2.5 버전 이상에서 가능하다는데
이왕이면 http://phpmyadmin.net 에서 현재 최신버전 3.1.3 이상을 다운받아 압축풀고
설치한다.


2) scripts/create_tables.sql 파일로 db 와 테이블을 생성한다.
이부분이 중요하다. 고급기능을 위해 필요한 정보를 별도 테이블에 저장해야한다.
이 파일을 보면 phpmyadmin 라는 DB 를 만들고 테이블 여러개를 생성한다.

mysql -uroot -proot_pwd < scripts/create_tables.sql

명령어로 밀어 넣은뒤, 이 DB 에 접근할 사용자
예를 들어, pma 를 추가한후 phpmyadmin 에 접근 권한을 준다.

GRANT SELECT, INSERT, DELETE, UPDATE ON `phpmyadmin`.* TO 'pma'@localhost;


3) config.sample.inc.php 파일을 config.inc.php 로 복사한다.
일반적으로 설치하듯이 직관적으로 세팅한다.
이 파일 마지막 부분에 주석처리된 아래 부분 주석 풀어준다.

....
$cfg['Servers'][$i]['controluser'] = 'pma'; // phpmyadmin DB 에 grant 된 사용자
$cfg['Servers'][$i]['controlpass'] = 'kw1934';
/* Advanced phpMyAdmin features */
$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin'; // 사용할 DB, 변경가능할듯
$cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
$cfg['Servers'][$i]['relation'] = 'pma_relation';
$cfg['Servers'][$i]['table_info'] = 'pma_table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma_column_info';
$cfg['Servers'][$i]['history'] = 'pma_history';
$cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';
....

만약 DB 에 root 권한이 없다면 phpmyadmin 이라는 DB 를 별도 생성을 못하니까,
자신의 DB 로 막바로 해도 될꺼다.
그리고 controluser, controlpass 부분도 db 사용자 와 같게 하면 될꺼 같다.
안해 봐서 모름.


4) 웹브라우저로 설치된 phpmyadmin 에 접속한후 왼쪽 메뉴에서 DB 명 하나를 클릭한 후
오른쪽 본문 상단에 보면 "Designer" 라는 메뉴가 보인다. 클릭하면 된다.
직관적으로 사용하면 된다.
결과를 PDF 파일로 저장도 된다는데 해보지는 않았음.



3. 마무리

오래전에 phpdbdesigner 라는 게 있었는데 더이상 개발이 안되어서 관심을 가지지 않았는데
알고보니 그 기능이 phpmyadmin 에 흡수되었더군요.
..
eyeOS 1.8.5 로 버전업하면서..
웹브라우저로 참 많은짓을 하는구나.. 하는 생각을..
..
나른한 오후.. 졸린다..
..
아참.. php, mysql 옛날버전(?)은 잘 안될겁니다.

Prototype기반으로 만들어진 프로젝트를 jQuery로 옮기고 있습니다. jQuery로 만들어진 것을 Prototype용으로 컨버전(conversion) 하는 작업은 간간히 해 왔지만 이런 경우는 처음이네요. 위와 같은 이유들도 있겠지만 조금 더 보태자면 야속하게도 약 9개월 동안 이렇다 할 업데이트가 이루어지지 않는 것과 지금은 jQuery가 대세이기 때문이기도 합니다. 요즘 배포되는 자바스크립트 플러그인들을 보면 대부분이 jQuery기반이라 것을 눈여겨 보지 않아도 알 수 있을 정도입니다. Prototype에서 jQuery로 컨버전하는 동안 주요한 변경내역을 기록해 보았습니다. 참고로 처음에 위치한 코드가 Prototype이고 아래쪽에 위치한 것이 jQuery의 코드입니다.

DOM selector

$('element'); //=> DOM element object 

$('#element'); //=> jQuery(Array-like Object) object 



$('element'); //=> DOM element object 

$('#element').get(0); //=> DOM element object 



$('element1','element2','element3'); //=> Array 

$('#element1,#element2,#element3'); //=> jQuery object 



element.down('div.item'); //=> DOM element object 

element.children('div.item'); //=> jQuery object 



element.up('div.contents'); //=> DOM element object 

element.parent('div.contents'); //=> jQuery object 



element.up('div.container'); //=> DOM element object 

element.parents('div.container:first'); //=> jQuery object 



element.next('div.item'); //=> DOM element object 

element.next('div.item'); //=> jQuery object 



element.previous('div.item'); //=> DOM element object 

element.prev('div.item'); //=> jQuery object 



element.select('div.item'); //=> Array 

element.find('div.item'); //=> jQuery object 



$('element').select('input[type="button"]'); //=> Array 

$('#element input[type=button]'); //=> jQuery object 



$$('#element a[href=#]')[0]; //=> DOM element object 

$('#element a[href=#]')[0]; //=> DOM element object 



element.select('input.cancel', 'input.submit', 'a.close'); //=> Array 

element.find('input.cance,linput.submit,a.close'); //=> jQuery object 



element.nextSiblings('div.item'); //=> Array 

element.nextAll('div.item'); //=> jQuery object 



element.previousSiblings('div.item'); //=> Array 

element.prevAll('div.item'); //=> jQuery object

초반에 가장 이해하기 힘든것이 DOM 선택자였는데, '$'가 마치 오퍼레이터(operator) 처럼 사용되는 것은 비슷합니다. Prototype의 '$'는 보통 document.getElementById의 대역으로 사용되며, Element.prototype의 메서드들을 상속시키는 역할인 반면 jQuery의 '$'는 CSS 선택자와 동일한 룰을 가지고 있으며, Prototype의 select 메서드를 혼용하거나 $$유틸리티를 사용하는 효과가 발생합니다. 단순히 선택 방법만 틀린것이 아니라 처리방법 역시 다릅니다. jQuery의 '$'선택자에 의해 선택된 DOM 요소들은 배열화된 객체(Array-like Object)로 관리되는데 이것을 보통 'jQuery 객체'라고 부르더군요. jQuery에서 제공하는 여러 체인 메서드들은 jQuery 객체화한 다음에야 비로소 혼용될 수 있습니다. 만약, Prototype과 마찬가지로 DOM 요소를 반환하게 하려면 'jQuery 객체에 get(0)' 또는 '[0]'을 사용해야 합니다. 이 것은 더이상 체인 메서드를 사용할 수 없는 상태가 되기 때문에 '$'를 다시 호출하는 등 사용성 및 가독성을 떨어트릴 수 있으므로 가급적이면 변수에 할당하여 사용하거나 체인 메서드로 모두 처리할 것을 권장하고 있습니다.

Prototype의 'down'과 'up'에 해당하는 'children'과 'parent'메서드는 서로 차이를 보입니다. Prototype의 경우 자식/부모 노드들을 순차적으로 검색하여 발견되는 첫번째 노드를 반환하는 반면, jQuery는 첫번째 자식/부모 노드중에서 일치하는 것만을 찾아 반환합니다. 때문에 이를 대체하기 위해서는 때때로 'find'와 'parents'메서드를 혼용해야 할 필요가 있습니다.

Event

var expand = function(event) { 

  event.element(); //=> DOM element object 

event.target; //=> DOM element object 



  event.pointerX(); //=> absolute horizontal position for a mouse event 

event.clientX; //=> absolute vertical position for a mouse event 



  event.pointerY(); //=> absolute horizontal position for a mouse event 

event.clientY; //=> absolute vertical position for a mouse event 



  event.stop(); // stop bubbling 

event.stopPropagation(); // stop bubbling 

}; 


element.observe('mouseup', expand); //=> DOM element object 

element.bind('mouseup', expand); //=> jQuery object 



document.observe('dom:loaded', expand); //=> document object 

$(document).ready(expand); //=> jQuery object 



element.stopObserving('mouseup', expand); //=> DOM element object 

element.unbind('mouseup', expand); //=> jQuery object 



element.observe('click', expand); //=> DOM element object 

element.click(expand); //=> jQuery object

Prototype에 익숙한 사용자라면 bind가 눈에 띨 것입니다. jQuery에서 bind는 Prototype의 observe와 동일한 메서드로 볼 수 있습니다. 이 밖에도 jQuery는 편이성을 위해 jQuery 객체에 체인되는 이벤트 메서드들(keypress, mouseover, dblclick 등)을 제공하고 있습니다.

Element

element.remove(); //=> removed DOM element object 

element.remove(); //=> removed jQuery object 



var img = new Element('img',{src:'/images/sample.gif',id:'my-img',alt:'img'}); //=> DOM element object 

var img = $('<img src="/images/sample.gif" id="my-img" alt="img">'); //=> jQuery object 



var el= new Element('a',{href:'http://firejune.com',className:'link'}).update('ClickMe!'); //=> DOM element object 

var el = $('<a href="http://firejune.com" class="link">').html('ClickMe!'); //=> jQuery object 



element.update('<p>hello!</p>'); //=> DOM element object 

element.html('<p>hello!</p>'); //=> jQuery object 



element.insert({top:img}); //=> DOM element object 

element.prepend(img); //=> jQuery object 



element.insert({bottom:'<p>hello!</p>'}); //=> DOM element object 

element.append('<p>hello!</p>'); //=> jQuery object 



element.insert({before:el}); //=> DOM element object 

element.before(el); //=> jQuery object 



element.insert({after:'<p>hello!</p>'}); //=> DOM element object 

element.after('<p>hello!</p>'); //=> jQuery object

DOM 요소를 파싱할 때 주로 다루게 되는 메서드들입니다. jQuery에서는 DOM 요소의 선택자로 사용되는 '$'를 그대로 재사용하여 엘리먼트를 생성하는 모습은 매우 인상적입니다.

Style

element.setStyle({width: '100px'}); //=> DOM element object 

element.css({width: 100}); //=> jQuery object 



element.getStyle('width'); //=> '100px' 

element.css('width'); //=> '100px' 



element.getWidth(); //=> 100 

element.width(); //=> 100 



element.getHeight(); //=> 100 

element.height(); //=> 100 



element.hide(); //=> DOM element object 

element.hide(); //=> jQuery object 



element.show(); //=> DOM element object 

element.show(); //=> jQuery object 



element.addClassName('active'); //=> DOM element object 

element.addClass('active'); //=> jQuery object 



element.removeClassName('active'); //=> DOM element object 

element.removeClass('active'); //=> jQuery object 



element.hasClassName('active'); //=> DOM element object 

element.hasClass('active'); //=> jQuery object 



element.toggleClassName('active'); //=> DOM element object 

element.toggleClass('active'); //=> jQuery object

엘리먼트 스타일과 관련해서는 서로 비슷한 양상을 보이지만, jQuery의 경우 'css'메서드를 통해서 스타일을 부여하는 것과 값을 읽어내는 것이 동시에 이루어지고 있다는 점에서 차이가 있습니다.

Enumerable

elements.each((function(element, index) { 

  //=> DOM element object, index 

}); 

elements.each(function(index, element) { 

  //=> DOM element object, index 

}); 


elements.invoke('remove'); 

elements.remove();

배열 객체를 다루는데에는 두말할 나위 없이 jQeury가 10점 만점에 10점입니다. 단, Prototype과 달리 jQuery에서 each를 사용할 때 주의할 점은 index와 반환요소의 순서가 뒤바뀐 것 입니다.

Ajax

var form = $(formElement); 


new Ajax.Request(form.action, { 

  method: form.method, paramitors: form.serialize(), 

  onSuccess: function(transport) { 

    //=> transport object(Text or JSON or XML) 

}, 

  onFailure: function(transport) {}, 

  onComplete: function(transport) {} 

}); 


$.ajax({ 

  url: form.get(0).action, type: form.get(0).method, data: form.serialize(), 

  success: function(transport) { 

    //=> transport string or json object or xml node 

}, 

  error: function(transport) {}, 

  complete: function(transport) {} 

});

응답해더의 'content-type'에 따라 결과물을 자동으로 분석하여 반환하는 Ajax로직은 서로 닮았습니다만, jQuery의 경우는 응답결과에 따라 자료형이 변경되어 넘어오는 반면, Prototype은 transport객체에 모든 상황이 반영되어 넘어옵니다.

Effect

element.fade({duration: 0.5}); // => instance of effect 

element.fadeOut(500); //=> jQuery object 



element.appear({duration: 0.5}); // => instance of effect 

element.fadeIn(500); //=> jQuery object 



element.slideUp({duration: 0.5, afterFinish: callback}); // => instance of effect 

element.slideUp(500, callback); //=> jQuery object 



element.slideDown({duration: 0.5, afterFinish: callback}); // => instance of effect 

element.slideDown(500, callback); //=> jQuery object 



element.morph({ 

  style: 'width: 100px; height: 100px; opacity: 0.5;', 

  duration: 0.5, 

  transition: Effect.Transitions.linear, 

  afterFinish: callback 

}); // => instance of effect 



element.animate( 

  {width: 100, height: 100, opacity: 0.5}, // style properties 

500, // duration 

'linear', // easing 

callback 

); //=> jQuery object 

jQuery는 Scriptaculous의 effect.js를 포함해야 지만 가능한 몇몇 애니메이션 효과를 추가작업 없이 사용할 수 있습니다. 애니메이션 코어를 내장하고 있기 때문입니다. 1차원적인 계산에서 그치는 Scriptaculous의 transition과는 달리 jQuery의 easing은 p, n, firstNum, diff 총 4개의 인자로 구성되는 계산식은 매우 독창적인 변화를 만들어 낼 수 있는 구조를 가지고 있습니다. 그리고 jQuery에는 Scriptaculous를 대신하는 ui.js가 있습니다. 다수의 UI 컴포넌트와 효과들로 구성되어 있으며, 메서드 단위로 파일이 나뉘어 있습니다.

Browser detection

Prototype.Browser.IE; //=> true or false 

$.browser.msie; //=> true or false 



Prototype.Browser.Webkit; //=> true or false 

$.browser.safari; //=> true or false 



Prototype.Browser.Gecko; //=> true or false 

$.browser.mozilla; //=> true or false 



Prototype.Browser.Opera; //=> true or false 

$.browser.opera; //=> true or false

jQuery쪽이 더욱 간결해 보이네요.

jQuery를 사용할 때 가장 만족스러운 점은 싱글 혹은 멀티플 노드의 개념을 떨쳐 버림으로서 찾아오는 강력한 체인 메서드의 연결입니다. 익숙해 지기만하면 상당히 빠른 속도로 코딩을 작렬(?)할 수 있을 것으로 기대되지만, 역시 Prototype의 Class와 bind(Function.prototype)를 혼용한 OO 클래스 지향 코딩을 구사할 수 없다는 것이 무척이나 아쉬운 점으로 남습니다. 그래서, Prototype의 쓸만한 코드들을 훔쳐 쓰려고 마음먹고 있죠.

* 이 문서는 지속적으로 업데이트 될 예정입니다.

출처 : http://firejune.com/

10 Free CSS and HTML Admin and Backend Templates

http://speckyboy.com/2010/10/05/10-free-css-and-html-admin-and-backend-templates/

암호화에 대한 기본 상식

암호화(Encryption)의 방식에는 단방향 암호화, 대칭 암호화, 비대칭 암호화가 있다.

단방향 암호화(One-way Encryption)는 복호화할 수 없도록 하는 방식이다. 이 방식에서는 해시 알고리즘(Hash Algorithm)을 사용하는데, 이 과정을 통해 고유한 지문(Fingerprint)을 생성한다.

일반적으로, 단방향 암호화를 통해 얻은 값으로는 복호화가 불가능하다고 하는데 원문이 짧거나 일반적으로 널리 사용되는 문자열일 경우에는 무작위 값 입력을 통한 공격(Brute Force Attack)을 통해 무력화되기 쉽다.

MD5, SHA1 등이 대표적인 해시 알고리즘이다.

대칭 암호화(Symmetric Encryption)는 키(Key)를 통해 동일한 알고리즘으로 암호화/복호화를 하는 방법이다. 이 방식은 2차 세계대전 중에 암호화 기계(Enigma Machine)에 사용된 방식이다.

암호화/복호화에 필요한 키가 유출되지만 않는다면 매우 안전한 방식이다. DES, TWOFISH, GOST 등이 대표적인 알고리즘이다.

비대칭 암호화(Asymmetric Encryption)는 SSL 같은 방식이라고 하는데, 자세한 내용은 모르므로 넘어가겠다.

이 글에서는 PHP에서 대칭 암호화 방식을 통한 암호화/복호화에 대해 설명하겠다.

Mcrypt 라이브러리의 설치와 설정

PHP에서는 Mcrypt 라이브러리를 통해 대칭 암호화를 지원한다. 따라서 Mcrypt를 이용하려면 라이브러리를 추가로 설치해 주어야 한다.

http://mcrypt.sourceforge.net/에서 Mcrypt 라이브러리를 다운로드 받을 수 있으며, 윈도우 서버라면 http://files.edin.dk/php/win32/mcrypt/에서 컴파일된 라이브러리 파일을 다운로드 받아 사용할 수 있다. 작동하도록 설정하려면 php.ini의 설정을 변경해 주어야 하는데, 자세한 설정 방법은 http://www.php.net/manual/kr/book.mcrypt.php 에서 확인할 수 있다.

데비안 계열 리눅스 서버라면 터미널에서 다음의 명령어를 입력하는 것으로 Mcrypt를 설치와 설정을 완료할 수 있다.

Mcrypt를 이용한 암호화/복호화 예제

다음의 코드를 보면 쉽게 이해할 수 있다.

앞서 설명했듯, 대칭 암호화를 하기 위해서는 키가 필요하다. 이 예제에서는 $key로 "열쇠"라는 임의의 문자열을 넣었는데 실제로는 더 복잡하고 고유한 것을 사용하는 것이 좋겠다. $plainData는 암호화 할 대상을 말한다. 이 예제에서는 예로 "개인정보"라는 문자열을 넣어보았다.

mcrypt는 여러 기본 함수를 제공하는데, 그 중 이번에는 mcrypt_ecb() 함수를 이용했다. 참고로 ECB란 전자 부호표 모드(Electric CodeBook mode)의 약자다. mcrypt_ecb() 함수에는 네 가지 값을 넣어주어야 하는데, Mcrypt에서 제공하는 알고리즘 상수, 키, 암호화 할 값, 암호화/복호화를 위한 상수가 그것이다.

Mcrypt에서는 DES, TWOFISH, GOST 등 많은 알고리즘을 지원하는데 이 목록은 http://www.php.net/manual/en/mcrypt.ciphers.php에서 확인할 수 있다. 이 예제에서는 GOST 방식을 사용하기 위해 MCRYPT_GOST라는 상수를 사용했다. 또한 이 예제에서는 암호화을 할 것이므로 MCRYPT_ENCRYPT라는 상수도 넣었다.

이렇게 Mcrypt를 통해 암호화를 하면 그 결과로 바이너리(Binary) 값을 반환한다. 즉, 컴퓨터만 이해할 수 있는 2진수 데이터를 반환한다는 의미다. 따라서 브라우저는 "'ӫ�{3�ѠO#�c�ʾfBg�"와 같이 인간도, 브라우저도 이해할 수 없는 결과를 출력할 것이다.

이 문제는 base64_encode() 함수를 이용함으로써 해결할 수 있다. 결과적으로 "8UHT/jWsIopHDCUpbfJLIA=="와 같이 아스키 코드로 변환한 값을 얻을 수 있다. 이로써 암호화가 성공적으로 이루어졌다.

이제 복호화 코드를 보자.

앞서 (아스키 코드로 까지) 암호화한 결과 값을 base64_decode() 함수를 이용해 다시 바이너리 값으로 변환한다. 이 값을 다시 mcrypt_ecb() 함수를 이용해 복호화 하기 위해, 앞서 암호화하기 위해 사용했던 알고리즘의 상수인 MCRYPT_GOST, 앞서 암호화 하기 위해 사용했던 키, 바이너리로 다시 변환한 암호화 결과 값, 복호화를 위한 상수 MCRYPT_DECRYPT를 넣는다. 그 결과로 복호화 된 결과 값인 $decryptedData를 출력하면 "개인정보"라는 문자열을 얻게 된다. 이로써 복호화도 성공적으로 이루어졌다.

위의 결과를 아래와 같이 함수로 정리하면 편리하게 사용할 수 있다.

Mcrypt를 이용한 암호화/복호화를 DB 입력/조회에 적용하기

이제 암호화/복호화를 DB 입력/조회에 적용해 보겠다.

DB에는 mailing_list라는 테이블이 있고 그 안에 no, name, email, date라는 필드가 있고 no 필드는 int이며 Auto Increment, 나머지 필드는 모두 varchar라고 가정한다.

POST 값으로 다음과 같은 메일링리스트 가입 정보를 받았다고 가정하자.

이제 POST로 넘겨받은 모든 값을 암호화 해서 DB에 입력할 것이다.

이제 mailing_list 테이블의 모든 데이터를 조회해서 복호화 한 다음, 화면에 출력할 것이다.

웹개발자나 FT개발자는 기본적으로 Firefox나 Chrome을 기본 브라우져로 사용하는 경우가 많다. script내 단순 메세지 출력을 위해 사용.

자바스크립트를 사용하다 보니 디버깅시 alert으로만 하기에는 너무 고된 길이 예상되어서

책 ( jQuery Cookbook ) 을 읽다가 알게된 파이어폭스에서

제대로된 객체가 선택되었는지 확인하는 방법입니다. ㅋㅋ


왠만한 분들 다 아시겠지만;; 전 처음 안거라 신기해서 ㅋㅋ

파이어폭스 사용하여 개발하신 분이라면 다들 아시겠지만,

firebug 라고 디버그 해주는 기능을 다 아시리라 믿습니다~

모르시면
도구 > 부가기능 > 검색 해보시면 나와요~ 설치하시면 디버그 하실 수 있습니다~


이제 중요부분을 말하자면,