Frederico Knabben이 만든 CKFinder는
대개 CKEditor의 plugin으로 사용되는 편입니다만
그 자체만으로도 충분한 사용 가치가 있지요.
특히 손쉽게 자료실을 만들 수 있는데,
저는 개인적인 웹앨범으로 구성해 놓았습니다.
CKFinder를 모르는 분을 위해 간략히 설명 드리자면,
공식적인 설명 구문은 다음과 같습니다.
CKFinder - powrful and easy to use Ajax file manager for web browsers
IE나 Firefox 등의 웹브라우저로
웹서버 상의 파일들을 관리하게 해주는 Ajax 기반의 툴이지요.
자세한 사항은 공식 홈페이지를 찾아가 보십시오.
홈페이지: http://ckfinder.com/
CKEditor나 CKFinder는
그 놀라운 기능에 비례하도록 꽤나 어려운 편입니다.
공식적인 포럼을 통하여 유저 간 커뮤니티는 만들어 놨지만
대개의 오픈소스 프로그램들이 그러하듯이 그 난이도를 감당하기엔 지원이 좀 아쉽긴 하지요.
포럼: http://cksource.com/forums/
각설하고,
실제 웹앨범 만드는 것을 풀어 보지요.
웹개발 및 CKFinder에 기초적인 지식은 있다는 전제로 설명하겠습니다.
우선 웹서버에 CKFinder를 설치하고, 웹앨범에 실을 사진들도 웹서버에 올려 놓습니다.
웹앨범 경로는 자유롭게 설정하되, 사진은 하부에 images 폴더를 만들어 그 안에 넣어두십시오.
1. core/ckfinder_php5.php
웹서버 php 버전에 따라 core/ckfinder_php4.php 파일이 될 수도 있습니다.
60, 61라인을 아래와 같이 수정하세요.
return '<div style="position:absolute; background:transparent; width:100%;height:150px;top:0px;left:0px;padding:0;z-index: 2;"><iframe id="ckfinderframe" onload="blowupIframe();" style="position:absolute; background:transparent; width:100%;height:100%;top:150px;padding:0;z-index: 1;" src="' . $this->_BuildUrl() . '?'.$_REQUEST['구분값'].'" width="' . $this->Width . '" ' .
'height="' . $this->Height . '"' . $className . $id . ' frameborder="0" scrolling="no"></iframe></div>' ;
상기 코드에서 구분값은 웹앨범마다 구별이 필요할 시 인식할 수 있는 REQUEST 값입니다.
2. skins/스킨명/app.css
디폴트 스킨은 kama입니다.
맨 아래에 아래의 코드를 입력해 주십시오.
.columns_2 #sidebar_container {width:0}
3. 웹앨범 파일
웹앨범을 보여줄 파일에 아래와 같은 코드를 삽입하여 주십시오.
require_once 'CKFinder설치 절대경로/ckfinder.php';
$finder = new CKFinder();
$finder->BasePath = 'CKFinder설치 웹경로/';
$finder->Create();
?>
<style type="text/css">
body {
overflow:hidden; height: 100%;
}
</style>
<script type="text/javascript">
function blowupIframe() {
var targ = $('#ckfinderframe');
var targHeight = $(window).height()-150;
targ.css({'width' : '100%', 'height' : targHeight + 'px'});
}
</script>
4. config.php
config.php 파일은 수정사항이 좀 많습니다.
먼저 $baseUrl을 아래와 같이 변경합니다.
if(strpos($_SERVER['HTTP_REFERER'],'앨범1')!==False) $baseUrl = '앨범1 웹경로';
elseif(strpos($_SERVER['HTTP_REFERER'],'앨범2')!==False) $baseUrl = '앨범2 웹경로';
elseif(strpos($_SERVER['HTTP_REFERER'],'앨범3')!==False) $baseUrl = '앨범3 웹경로';
else $baseUrl = '기타 웹경로';
상기 예는 HTTP_REFERER 값을 이용하여 앨범을 구분하고,
각각에 대하여 별도의 폴더를 구성하고 있습니다.
이렇게 HTTP_REFERER를 통해 config를 가변적으로 설정하여 별도의 경로에서 파일 관리를 하는 것은
제가 고안해 낸 CKFinder 역사상 최초의 일입니다. -__-;
마찬가지로 $baseDir도 수정합니다.
if(strpos($_SERVER['HTTP_REFERER'],'앨범1')!==False) $baseDir = '앨범1 절대경로';
elseif(strpos($_SERVER['HTTP_REFERER'],'앨범2')!==False) $baseDir = '앨범2 절대경로';
elseif(strpos($_SERVER['HTTP_REFERER'],'앨범3')!==False) $baseDir = '앨범3 절대경로';
else $baseDir = '기타 절대경로';
그 외 AccessControl이나 ResourceType 등도 자신에 맞게 적절히 수정하세요.
자세히 설명하자면 끝도 없어서 간략하게 해야할 작업 위주로 나열만 했습니다만
HTTP_REFERER를 활용한 가변적 경로 설정이나
layer 방식의 iframe height 제어,
성능 증대를 위해 정규식을 대신한 strpos 활용 등
나름의 세세한 테크닉이 깃들어 있습니다.
기본적으로 CKFinder는 CKEditor와 함께 게시판에서 첨부파일을 올리는 기능으로 많이 사용돼 왔습니다만
위와 같이 CKFinder 자체만으로도 충분히 멋진 앨범이나 자료실을 구축할 수 있습니다.
게다가 지정한 폴더에 파일을 옮겨 놓기만 해도 자동으로 썸네일 생성하여 보기 좋게 정리해 주니
관리도 매우 수월하고요.
저는 앞으로 제 삶의 모든 사진과 동영상을 이렇게 관리해 나갈 예정입니다.
위의 작업은 모두
이 홈페이지 문향소> 삶> 결혼> 에 실제 구현돼 있는 것이니 직접 보시면 이해가 쉽겠습니다만
아쉽게도 사진은 비공개 정책이라서 보여드릴 수가 없네요. ^^;
상기의 이미지 파일로 대신하니 널리 이해를.
- achor 
