CKFinder를 활용한 웹앨범 제작 방법

Name

achor

( 2011-05-24 19:10:17 Hit: 11308 Vote: 30 )

Homepage

http://empire.achor.net

File #1

110524_ckfinder.jpg (64.2 KB) Download : 308

Category

웹개발

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

본문 내용은 5,066일 전의 글로 현재의 관점과 다를 수 있습니다.

Post: https://achor.net/board/blog/3
Trackback: https://achor.net/tb/blog/3

Please log in first to leave a comment.

achor Empire	CKFinder 한글파일명 문제 해결 방법 지난 포스팅에서 CKFinder를 활용하여 웹앨법이나 자료실 만드는 법을 살펴 보았습니다. http://empire.achor.net/blog/3 추가적으로, Windows 계열의 서버에서 php 버전의 CKFinder를 이용할 시 한글 문제로 고생하시는 분들이 많아 해결책을 포스팅 합니다. 과거 FCKEditor 시절부터 Windows 계열의 서버에서는 한글 파일 문제가 쉽지 않았기에 직접 소스코드를 수정하는 등의 다양한 방법이 있었지만 대...	2011-06-02 01:07:46

Tag

CKFinder, 웹앨범, 사진, PHP, CKEditor, 웹개발

- PHP: Smart Phone User Agent (2010-04-17 20:28:19)	- 사진: 무료 클라우드를 통한 최적 데이터 백업 방법 (2015-05-31 16:58:42)

- 사진: 프로필 사진 (2020-07-12 04:46:04)	- 사진: 송강호와의 촬영 (2009-04-26 17:18:12)

- 사진: ~2002 특별한 사진들 (2002-12-28 14:55:26)	- PHP: 소셜 로그인 (2016-09-11 03:54:15)

- 사진: 언뜻 본 하늘 (2003-10-29 04:14:28)	- 웹개발: 모바일 블로그 수정 (2015-05-03 23:29:14)

- 웹개발: 모바일 블로그 오픈 (2015-03-09 01:10:19)	- 웹개발: 오랜만의 개발 (2012-02-26 01:55:36)