2010년 7월 29일 목요일

ckEditor와 ckFinder 설치 및 테스트 (php)

많은 사람들이 사용했던 FCKeditor가 3.x 버전이 되면서 CKEditor로 불리면서 배포되고 사용되고 있습니다.
FCKEditor 의 성능을 그대로 이어받고 더욱 빨라진 CKEditor의 기본적인 설치 방법을 알아보겠습니다.
다시한번 말씀드리지만 기본적인입니다.
그중에서도 PHP를 기반으로 하고 있으며 php 코드를 불러와 사용하는 설치 및 테스트 방법입니다.
보다 발전되고 최적화 되어 있는 방법은 구글링을 통해 찾아보실 수 있으실 것입니다.

1. 소스 다운로드

위의 주소로부터 소스코드를 다운로드 받습니다.
CKFinder는 CKEditor를 통해서 파일(일반 파일, 이미지, 플래쉬 파일)들을 업로드 할 때 사용됩니다. FCKEditor에서는 두 기능이 합쳐졌다고 표현들을 하시는 것을 보았는데 제 생각에는 CKFinder는 보다 기능이 업그레이드 되었고 완전히 다른 기능이라고 생각됩니다. 그리고 CKFinder의 경우 이 문서에서는 PHP 를 사용할 것이므로 위의 다운로드 URL에서 php를 선택하시면 됩니다. (php외에 ASP.net, ASP, ColdFusion을 지원합니다.)

다운로드 받은 소스를 웹에서 접근 가능한 곳에 압축을 풉니다.
본 문서의 경우 http://localhost/phpTest/include/ 아래에 ckeditor와 ckfinder라는 디렉토리 명으로 되어 있습니다.

2. 설정
CKEditor의 경우 별 다른 설정 필요없이 사용하였습니다.
이에 반해 CKEditor는 파일업로드 등의 이유로 경로 및 업로드 파일에 대한 설정을 해 주어야 합니다.
ckfinder/config.php 를 여시면 다음과 같은 php 파일이 나타날 것입니다. (길이상 주석문은 모두 제거해 주었습니다.)

<?php
function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...

// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file.

        // return false;
return true;                                // false를 true로 변경하여 upload 가능하도록 만듭니다.
                                                       // 보안상 true 보다는 주석문에 나타나는 것처럼
                                                       // 세션 변수 점검 등으로 true/false를 결정하는 것이 좋을 것입니다.
}


$config['LicenseName'] = '';
$config['LicenseKey'] = '';


// 호스트명을 뺀url 상의 경로입니다.
$baseUrl = '/phpTest/data/upload/';

// 파일 시스템 상의 절대 경로를 나타냅니다.
// $baseDir = resolveUrl($baseUrl);
// 위의 resolveUrl()이라는 메소드를 쓰는 대신 저는 아래와 같이 절대경로를 적어주었습니다.
// 이 경로는 chmod 777 로 잡혀있어야 합니다.
$baseDir = '/home/yoonani/Dropbox/works/phpTest/html/data/upload/';


$config['Thumbnails'] = Array(
'url' => $baseUrl . '_thumbs',
'directory' => $baseDir . '_thumbs',
'enabled' => true,
'directAccess' => false,
'maxWidth' => 100,
'maxHeight' => 100,
'bmpSupported' => false,
'quality' => 80);

$config['RoleSessionVar'] = 'CKFinder_UserRole';

$config['AccessControl'][] = Array(
'role' => '*',
'resourceType' => '*',
'folder' => '/',

'folderView' => true,
'folderCreate' => true,
'folderRename' => true,
'folderDelete' => true,

'fileView' => true,
'fileUpload' => true,
'fileRename' => true,
'fileDelete' => true);

$config['AccessControl'][] = Array(
'role' => '*',
'resourceType' => 'Images',
'folder' => '/Logos',

'folderView' => true,
'folderCreate' => true,
'folderRename' => true,
'folderDelete' => true,

'fileView' => true,
'fileUpload' => false,
'fileRename' => false,
'fileDelete' => false);

$config['DefaultResourceTypes'] = '';

// 업로드될 일반 파일들에 대한 설정입니다.
// url 키에 값으로 $baseUrl .files를
// directory 키에 값으로 $baseDir.files로 설정되어 있는 관계로
// $baseDir에 하위에 files 디렉토리가 있어야 합니다.
// 또한 files는 chmod 777 권한이어야 합니다.
// 이 경로를 바꾸시려면 두 값을 바꾸시면 됩니다.
// maxSize 키 값이 0으로 되어 있는데 이것은 업로드될 파일의 크기를 나타냅니다.
// 여러분들이 원하시는 값으로 나타내실 수 있으며 bytes, K, M, G 등으로 그 크기를 정할 수 있습니다.
// allowExtensions : 업로드 허용가능한 확장자입니다.
// deniedExtensions : 업로드 불가능한 확장자입니다.
$config['ResourceType'][] = Array(
'name' => 'Files', // Single quotes not allowed
'url' => $baseUrl . 'files',
'directory' => $baseDir . 'files',
'maxSize' => 0,
'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip',
'deniedExtensions' => '');


//위의 File과 동일하지만 이 곳은 이미지와 관계된 것들입니다.
$config['ResourceType'][] = Array(
'name' => 'Images',
'url' => $baseUrl . 'images',
'directory' => $baseDir . 'images',
'maxSize' => "16M",
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png,avi,iso,mp3',
'deniedExtensions' => '');


// 마찬가지로 위의 File과 동일하지만 플래쉬와 관계된 것들입니다.
$config['ResourceType'][] = Array(
'name' => 'Flash',
'url' => $baseUrl . 'flash',
'directory' => $baseDir . 'flash',
'maxSize' => 0,
'allowedExtensions' => 'swf,flv',
'deniedExtensions' => '');


// 아래는 그냥 기본값으로 두었습니다.
$config['CheckDoubleExtension'] = true;
$config['FilesystemEncoding'] = 'UTF-8';
$config['SecureImageUploads'] = true;
$config['CheckSizeAfterScaling'] = true;
$config['HtmlExtensions'] = array('html', 'htm', 'xml', 'js');
$config['HideFolders'] = Array(".svn", "CVS");
$config['HideFiles'] = Array(".*");
$config['ChmodFiles'] = 0777 ;
$config['ChmodFolders'] = 0755 ;
$config['ForceAscii'] = false;

include_once "plugins/imageresize/plugin.php";
include_once "plugins/fileeditor/plugin.php";

$config['plugin_imageresize']['smallThumb'] = '90x90';
$config['plugin_imageresize']['mediumThumb'] = '120x120';
$config['plugin_imageresize']['largeThumb'] = '180x180';



3. 사용 예제
php 방식으로 사용하는 예제입니다.

경로는 ckeditor, ckfinder는 include 디렉토리의 하위에 있으며 예제 파일들은 include와 같은 경로상에 위치합니다.

먼저 form 생성 파일입니다.

<html>
<head>
<?php
// ckeditor 경로 설정
include_once './include/ckeditor/ckeditor.php';
// ckfinder 경로 설정
include_once './include/ckfinder/ckfinder.php';

// ckEditor 객체 생성
$ckeditor = new CKEditor();
// 경로 지정
$ckeditor->basePath = '/phpTest/include/ckeditor/';
// ckeditor 객체와 ckfinder의 경로를 이용하여 ckfinder를 ckeditor에 포함시킨다.
// 소스코드를 보시면 더욱 자세한 내용을 알 수 있습니다.
CKFinder::SetupCKEditor($ckeditor, '/phpTest/include/ckfinder/');
?>
</head>
<body>
<form name="ckTest" method="POST" action="getCKtest.php">
<?php
// textarea 의 name이 editor1 이 되는 ckEditor를 포함하는 textarea 생성
$ckeditor->editor('editor1');
?>
<input type="submit" />
</form>
</body>
</html>



실행화면입니다.




먼저 웹 브라우저로 전송된 소스코드를 살펴봅시다.
다음과 같이 파란색으로 되어 있는 코드가 생성되었습니다.


<html>
<head>
</head>
<body>
<form name="ckTest" method="POST" action="getCKtest.php">
<textarea name="editor1" rows="8" cols="60"></textarea>
<script type="text/javascript">//<![CDATA[
window.CKEDITOR_BASEPATH='/phpTest/include/ckeditor/';
//]]></script>
<script type="text/javascript" src="/phpTest/include/ckeditor/ckeditor.js?t=A5AB4B6"></script>
<script type="text/javascript">//<![CDATA[
CKEDITOR.replace('editor1', { "filebrowserBrowseUrl": "\/phpTest\/include\/ckfinder\/ckfinder.html", "filebrowserImageBrowseUrl": "\/phpTest\/include\/ckfinder\/ckfinder.html?type=Images", "filebrowserFlashBrowseUrl": "\/phpTest\/include\/ckfinder\/ckfinder.html?type=Flash", "filebrowserUploadUrl": "\/phpTest\/include\/ckfinder\/core\/connector\/php\/connector.php?command=QuickUpload&type=Files", "filebrowserImageUploadUrl": "\/phpTest\/include\/ckfinder\/core\/connector\/php\/connector.php?command=QuickUpload&type=Images", "filebrowserFlashUploadUrl": "\/phpTest\/include\/ckfinder\/core\/connector\/php\/connector.php?command=QuickUpload&type=Flash" });
//]]></script>
<input type="submit" />
</form>
</body>
</html>

php 코드를 사용하여 위와 같이 웹 페이지 안에 CKEditor를 삽입하였으며 이 코드에 의해 CKFinder 역시 추가되었습니다. 이를 이미지 버튼을 눌러 확인해 보겠습니다.

다음과 같이 보조 창이 뜹니다.
여기서 서버 보기 (Browse Server) 를 클릭해 봅시다.



다음과 같은 판타스틱한 파일 업로드 상자가 나옴을 알 수 있습니다.



여기서 파일을 업로드 하고 업로드한 사진을 클릭하면 ckfinder의 config.php에서 설정한 $baseDir에 _thumnail 이란 디렉토리가 생기고 거기에 지금 보이면 썸네일 사진 또한 같이 저장됩니다.

자 이제 텍스트 상자에 입력을 마치고 서버로 값을 전송하고 그 값을 어떻게 받아오는지 봅시다.
다음은 폼으로부터 값을 전달받아 단순히 화면에 출력시키는 코드입니다.




<?php
$eData = $_POST["editor1"];
?>
<html>
<head>
</head>
<body>
<?php
echo $eData;
?>
</body>
</html>



일반 php에서 폼을 통한 값의 전달시 사용하는 방법을 그대로 따릅니다.
앞선 폼에서 이름을 editor1이라 하였으므로 editor1으로 POST로 전달된 값으로부터 받아와서 그대로 출력합니다.
다음과 같은 결과를 보여줍니다.











아주 기본적인 ckEditor, ckFinder에 대해 알아봤습니다.

제가 계속해서 사용해 보고 더욱 자세한 사항 올리도록 하겠습니다.

감사합니다.

2010년 7월 28일 수요일

ubuntu 10.04에 설치된 eclipse에 SQL Explorer 사용

SQL Explorer를 eclipse Add-On으로 설치하였는데 update sites는 다음과 같다
http://eclipsesql.sourceforge.net/
위의 주소를 Help > Install Software 메뉴에서 SQL Explorer로 추가하여 설치하였다.

그 다음으로 SQL Explorer에서 Connector로 사용할 드라이버를 잡아줘야 하는데
MySQL의 경우 jdbc connector가 필요하다 다음의 링크에서 다운받을 수 있다.
(참고 : http://www.64bitjungle.com/tech/eclipse-pdt-and-mysql-sql-explorer-plugin/)
http://dev.mysql.com/downloads/connector/j/5.1.html

다운받은 후 압축을 풀고 /usr/share/mysql/ 아래로 옮기자 (ex. $ sudo cp -r mysql-connector-java-5.1.13/ /usr/share/mysql/)

SQL Explorer Perspective를 열어 Connectors에서 새로운 연결(Connection)을 생성하는 버튼을 클릭하면 다음과 같은 Create New Connection Profile 창이 나온다.



여기서 Add/Edit Drivers를 클릭하면 다음 창이 활성화된다.


위의 그림과 같이 MySQL을 선택하고 Edit를 클릭하여 설정창을 띄우고 위에서 다운로드 받은 MySQL Connector를 설정하자.

Extra Class Path로 이동하여 Add JARs를 클릭하고 다운받은 드라이버의  jar 파일을 선택한다.


OK를 클릭하자.

그럼 처음띄운 Connection Profile 창이 뜨는 데 이 창에서 URL을 아래 그림에서 처럼

"jdbc:mysql://localhost:3306/데이터베이스명
"
으로 변경하고 로그인 정보를 입력하자.
Namedms  적절하게 자신이 원하는 대로 입력하면 된다.



이상과 같이 연결 설정을 마쳤으면 Eclipse의 Connections 창에서 방금 생성한 Connection이 생기고 이 Connection을 클릭하면 서버와 통신후 다음과 같은 Eclipse Perspective를 볼 수 있다.










Eclipse 에서 SQL Explorer를 설치하고 MySQL 과 연결하는 과정에 대해 간단하게 알아보았다.
Eclipse 에서 모든 것을 관리하는 것이 보다 용이할 거 같아 이렇게 진행하였지만 어디까지나 개인의 취향대로 작업을 진행하면 되겠다.







2010년 7월 21일 수요일

[단문] WordPress 에서 Plugin을 관리하기 위해

Manual로 다운 받아서 할 수도 있지만 웹에서 쉽게 plugin을 다운받아 설치하려면
ftp Server 를 구축하고 (sudo apt-get install vsftpd)
WordPress 소스 아래의 wp-content 를 웹서버가 쓸 수 있도록 하여야 한다.

ubuntu 10.04에서 wordpress 3.0 설치하기

먼저 apache와 PHP, MySQL을 확인해야 한다.
없을 경우 시냅틱 패키지 관리자로 설치하면 된다. (물론 shell에서 dpkg, apt-get 등을 이용해도 되고)

WordPress의 설치 요구 사항은 다음과 같다. (2.9, 3.0 기준)

웹호스팅을 위한 사양은 아래의 사양을 권장한다.
  • PHP version 5.2 or greater
  • MySQL version 5.0 or greater

요구조건을 확인할 수 있는 checklist는 다음 장소에 있다.
http://codex.wordpress.org/User:Hakre/Technical_Installation



1. mod_rewrite

위와 같은 사양을 갖춰다고 하면 mod_rewrite를 apache2에서 사용할 수 있도록 하여야 하는데 ubuntu에 패키지 매니저로 설치한 apache의 경우 설정파일은 /etc/apache2 에 위치한다.
그리고 mod_rewrite는 기본적으로 설치되는데 so 파일의 경로는 /usr/lib/apache2/modules/mod_rewrite.so 이다.
이를 apache2.conf(httpd.conf 도 존재하나 ubuntu 에서는 apache2.conf를 기본 설정파일로 사용한다.) 파일을 직접 편집하여 사용하거나 다음과 같이 shell에서 명령어를 입력해도 된다.

$ sudo a2enmod rewrite

위와같이 입력하고 apache2를 재시작 하자.

mod_rewrite를 위한 설정 파일은 /etc/apache2/mods-available 에 "본인이 원하는 이름.conf" 저장하면 apache2.conf 가 읽어 들인다.


2. MySQL 사용자 및 DB 준비
WordPress 가 사용할 DB와 사용자를 준비한다.
예제로 사용할 MySQL 사용자는 wordpress, 암호는 1234test 이고
DB명은 wpDB 이고 Character Set은 utf8로 할 계획이다. (웹서버에서도 Default CharacterSet을 utf8로 한다.)
여기서 wordpress 사용자는 wpDB에 모든 권한을 갖도록 설정한다.

MySQL 관리자 권한으로 MySQL에 접속한다.

Shell > mysql -u root -p mysql
암호 : .......

mysql> CREATE USER 'wordpress'@'localhost' IDENTIFIED BY '1234test';
Query OK, 0 rows affected (0.00 sec)

mysql> CREATE DATABASE wpDB CHARACTER SET utf8;
Query OK, 1 row affected (0.00 sec)

mysql> GRANT ALL PRIVILEGES ON wpDB.* TO 'wordpress'@'localhost'  WITH GRANT OPTION;
Query OK, 0 rows affected (0.00 sec)

기본적인 DB 준비는 끝났다.
다음으로 넘어가자.


3. 다운로드 받은 WordPress 파일 중 최상위에 있는 wp-config-sample.php 를 wp-config.php 로 복사하자.
그리고 나서 wp-config.php 안에 있는 DB 정보와 사용자명과 암호를 지정하도록 하자.
또한 파일을 보면 각종 key 값을 지정하게 되어있는데 이 키들은 다음의 url을 방문하면 임의로 만들어 주므로 여기서 만들어준 값을 사용하자. 키 생성 url : https://api.wordpress.org/secret-key/1.1/
본인이 사용한 값은 다음과 같다.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wpDB');
 
/** MySQL database username */
define('DB_USER', 'wordpress');
 
/** MySQL database password */
define('DB_PASSWORD', '1234test');
 
/** MySQL hostname */
define('DB_HOST', 'localhost');
 
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
 
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');
 
/**#@+
 * Authentication Unique Keys and Salts.
 *
 * Change these to different unique phrases!
 * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}
 * You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again.
 *
 * @since 2.6.0
 */
define('AUTH_KEY',        'W8<&(0#ocWofuhBus!v-au0`vCC:pncm1qGOVTzHd<u-k-B1{dq84k$1+TuGA=S`');
define('SECURE_AUTH_KEY', ')ev+6kxJ*oA[!c)3lzP@7+9ZZl?i<+U)9nOTjie#*x{2=1~G:K p6K}Pd-yI#ery');
define('LOGGED_IN_KEY',   '-UZ8 &Js3/ `rV6e9|kgO>~B6y1<Civb/BW(zY2_e@?l|a8#bLi2xys.Ll+{oJ0B');
define('NONCE_KEY',       '_C!<2uu>~o_<k#b0.#NZS:|2xZ#-;$+op-9ak#- X!]buuxz,c; /<jvq%K3t{L=');



4. 웹서버가 WordPress 경로를 웹 상에서 요청받을 수 있도록 DocumentRoot로 옮기자.
여기서 본인은 하위 경로명으로 /wp/로 하고자 압축을 해제한 wordpress 디렉토리명을 wp로 변경하였다.
$ sudo mv wordpress/ /var/www/wp/


5. 웹 브라우저를 띄워 다음과 같이 입력하여 설정 파일을 브라우저 상에서 요청하자.

http://localhost/wp/wp-admin/install.php

아래와 같이 나오면 성공한 것이다.




빈칸을 본인이 원하는 대로 입력하고 아래에 있는 다음으로 진행하면 아래와 같이 성공되었다는 메세지를 볼 수 있을 것이다.



성공 메세지 아래의 Log In을 눌러 관리자로 로그인해보자.
로그인을 하고 나면 아래와 같이 관리자의 대쉬보드가 보인다.






성공적으로 설치된 것이다.

그럼 시간이 나는대로 도대체 이 녀석을 어떻게 써 먹을지 알아보자.



PS : 설명중 반말로 하여 죄송합니다. 급히 작성하다 보니....
또한 사이트들을 참고하여 작성하였으니 혹시나 잘못된 내용이 있으시면 댓글로 지적해 주세요