본 플러그인은 jQuery를 이용하여, 인풋 타입의 대표적인 사용법 가운데 두가지인 TYPE="CHECKBOX" / TYPE="RADIO" 를 위와 같은 이미지 형태로 꾸밀 수 있도록 돕는 플러그인입니다.

기본적인 용법은

$(document).ready(function() {
  // ":not([safari])" is desirable but not necessary selector
  $('input:checkbox:not([safari])').checkbox();
  $('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
  $('input:radio').checkbox();
});

의 형태로 구성되고요,

찬찬히 보시면 아시겠지만, 공통원리는 사실상..
$(input:radio) 의 value값이 0이나 1이냐에 따라 라디오버튼을 대체하는 이미지를 넣어라 <- 하는 것과
$(input:checkbox) 의 value값이 null이냐 아니냐에 따라 체크박스의 대체이미지를 넣는 정도의 작업입니다.

다만, 일일이 소스코딩을 하기가 다소 귀찮은 부분이 있는 것 또한 무시할 수 없으므로
본 플러그인을 사용함으로서 보다 간편하게 작업을 진행할 수 있다는 이점이 있죠..

사용을 위해서는 jQuery 라이브러리 1.2 버전 이상 (1.3 호환)을 사용하셔야 하며
이벤트 명령으로는 현재까지 "check", "uncheck", "disable", "enable" 이 지원됩니다.

아래 소스코드 압축파일내에는, 본 플러그인을 구동하기 위한 모든 파일들이 포함되어 있으므로  필요하신 분들은 다운받아 사용해 보시기 바랍니다. (데모페이지도 포함되어 있습니다)



소스코드 다운로드
http://jquery-checkbox.googlecode.com/files/jquery-checkbox.1.3.0b1.zip
Posted by 동원삼치

MYSQL 자동백업

 | APACHE
2009/09/21 18:49
 
--------------- 웹서버의 자동 실행할 스크립트 작성 -------------
/root아래에 backup.sh 이라는 파일을 만들어 놓고 백업 명령어를 다음과 같이 주었다.

#!/bin/bash
/usr/local/mysql/bin/mysqldump -uroot -p***** mysql > mysql_db_bak_$(date +%Y%m%d).sql
/usr/local/mysql/bin/mysqldump -uyanemone -p***** yanemone > yanemone_db_bak_$(date +%Y%m%d).sql
mv *.sql /backup
tar cvfpz /backup/html_bak.tar.gz /var/www/html
tar cvfpz /backup/yanemone_html_bak.tar.gz /home/yanemone/public_html
tar cvfpz /backup/dichang_html_bak.tar.gz /home/dichang/public_html

find /backup -ctime +3 -exec rm -f {} \;



---------------- 백업 서버의 자동실행 스크립트 작성 -------------------

백업 서버에서는 웹서버가 생성한 자료를 가져 오기만 하면 된다.

#! /bin/bash

rsync -avz 211.57.173.129::SU1/ /backup

/usr/local/mysql/bin/mysqldump -uroot -pxxxx mysql> king_mysql_db_backup_$(date +%Y%m%d).sql
/usr/local/mysql/bin/mysqldump -uyanemone -pxxxx yanemone> king_yanemone_db_backup_$(date +%Y%m%d).sql

find /backup -ctime +3 -exec rm -f {} \;

tar xvfpz /backup/htm*.gz /backup
tar xvfpz /backup/yanemone_html*.gz /backup

cp -r /backup/var/www/html/* /var/www/html
cp -r /backup/home/yanemone/public_html/* /home/yanemone/public_html

원문참조 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=14007&sca=&sfl=wr_subject%7C%7Cwr_content&stx=db+%C0%DA%B5%BF+%B9%E9%BE%F7&sop=and
Posted by 동원삼치

 

위자드닷컴(http://www.wzd.com) 또는 구글아이(http://googlei.co.kr) 와 같은 개인형 시작페이지들을
구성하는 기본 요소는 아무래도 파싱(Parsing)과 레이어드래그 의 두가지가 아닐까 하는데요

위 두가지를 모두 만족시켜주는 GNU 기반의 jQuery 소프트웨어도 있어서 오늘은 이를 소개해 보고자 합니다.

이름은 INettuts 입니다.



INettuts의 기본 레이아웃은 위자드닷컴이나 구글아이와 마찬가지로 3렬 구분 형태를 지니고 있습니다.
사용자의 취향에 따라 각 레이어들의 위치를 드래그하여 변경할 수도 있고, 타이틀의 이름들을 변경할
수도 있습니다. (물론 한글도 가능합니다)

어떤 XML 혹은 RSS를 파싱하느냐에 따라 다르겠지만, 사실상 구조적인 측면만을 놓고 보았을 때는
INettuts 만으로도 위자드닷컴이나 구글아이가 제공하는 모든 기능을 100% 구현하는 것이 가능합니다.

구조 외적인 측면에는 대개.. 파싱해올 소재거리에 대한 "허가" 의 여부라던가, 디자인적인 부분이겠죠.

INettuts 를 제작한 이 또한 디자이너가 아닌 프로그래머인 관계로 이를 기반하여 다양한 버전의 INettuts 가
나오기를 바라는 마음으로 소스를 공개배포하고 있는 것으로 알고 있으니 혹시 이러한 툴을 통하여
사업을 생각하거나, 또는 개인적인 목적 하의 시작페이지를 만들고자 하는 프로그래머라면..
시간있을대 만지작하며 놀기도 좋습니다..

덧붙이는 이야기로는.. 상업적인 사용은 저작자 허락에 의해 가능하다 하고요,
(솔직히 살짝 뜯어보고 나면.. 굳이 저작자의 허락을 안맡아도 될만한 자체툴을 만들 수도 있습니다;;)

실제 "유저" 의 커스터마이징한 내용은 쿠키로 저장하고 있기 때문에, 하드청소할때면 꼭 주의하시길 바랍니다.

여담이지만, 경우에 따라서는 로그인 시스템을 만들어서 쿠키가 아닌, DB에 커스터마이징 내용을 저장하는
것도 어떨까 싶네요.

INettuts의 데모페이지 :
http://james.padolsey.com/demo/tut-inettuts-with-cookies/

iNettuts 소스다운로드
http://james.padolsey.com/demo/tut-inettuts-with-cookies/source.zip

당연한 소리지만.. jQuery 라이브러리가 반드시 필요합니다.

Posted by 동원삼치
테이블의 행이 바뀔때 마다, 미리 지정해 놓은 두가지 배경색을 입힐 수 있는 방법은 사실상 jQuery말고도
여러가지 방법이 있게 마련입니다.

대표적으로 php에서는 if($i%1) 의 True / False 에 따라 "짝수행일때, 홀수행일때" 를 구분하는 방법을 사용하기도 하지만,
이를 보다 편리하게 할 수 있는 방법은 jQuery의 기본명령 속에서 찾아볼 수 있습니다.

바로 odd 와 even 을 참조하는 것입니다.

아래에 임시로 만들어 놓은 소스를 에디터에 붙여넣고 실행해 보시면 원하는 결과를 얻을 수 있을 것입니다.
(단, jQuery 라이브러리의 경로는 바꿔주십시오)

<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){ //html 로딩이 완전히 끝난 뒤에 스크립트를 실행합니다
     $('table tr:odd').addClass('style1'); //테이블의 홀수행에는 style1 스타일을 덧씌웁니다.
     $('table tr:even').addClass('style2'); //테이블의 홀수행에는 style1 스타일을 덧씌웁니다.
});
</script>
<style>
table {border:1px solid #555;}
.style1 {BACKGROUND: #ccc;} //홀수행에 덧씌울 스타일입니다.
.style2 {BACKGROUND: #eee;} //짝수행에 덧씌울 스타일입니다.
</style>
</head>
<body>
     <table>
          <tr><td>첫번째TD</td></tr>
          <tr><td>두번째TD</td></tr>
          <tr><td>세번째TD</td></tr>
          <tr><td>네번째TD</td></tr>
     </table>
</body>

결과 :

첫번째TD
두번째TD
세번째TD
네번째TD


만약 해당 테이블의 최상단행에 구분명과 같은 형식을 사용하고자 한다면 이를 따로 구분시키기 위해
<thead> 와 <tbody> 를 각각 선언할 필요가 있는데 이럴 때는 다음과 같은 방법을 사용합니다.

<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
     $('table tbody tr:odd').addClass('style1'); //tbody를 추가로 선언합니다
     $('table tbody tr:even').addClass('style2'); //tbody를 추가로 선언합니다
});
</script>
<style>
table {border:1px solid #555;}
.style1 {BACKGROUND: #ccc;}
.style2 {BACKGROUND: #eee;}
</style>
</head>
<body>
     <table>
          <thead>
               <tr><th>번호</th><th>내용</th></tr>
          </thead>
          <tbody>
               <tr><td>1</td><td>첫번째TD</td></tr>
               <tr><td>2</td><td>두번째TD</td></tr>
               <tr><td>3</td><td>세번째TD</td></tr>
               <tr><td>4</td><td>네번째TD</td></tr>
          </tbody>
     </table>
</body>

결과 :

번호 내용
1 첫번째TD
2 두번째TD
3 세번째TD
4 네번째TD

즉, 최상단의 구분명이 삽입되어 있는 행(THEAD)은 건드리지 않고, 내용에 해당하는 행(TBODY)에만
스타일을 입히는 것이 가능합니다.

jQuery 의 편리함을 느낄 수 있는 부분들은 대개 "규칙적인 반복성" 을 띄는 경우에 속한 경우가 많습니다.

단순히 위의 테이블 스타일링 하나만을 갖고 jQuery의 편리성을 논하기는 어불성설일 수도 있겠지만,
차후에 소개할, 테이블작업의 꽃이라고도 불리우는 "테이블정렬" 을 보시게 되면.. 위와 같은 스타일링의
진가를 확인하실 수 있으리라 생각합니다.
Posted by 동원삼치
대개 PHP로 게시판을 만든다거나, 최근게시물을 뽑아온다거나 하는 등의 작업을 할 때면
정해놓은 가로크기(wIdth) 보다 글자수가 많은 경우 이를 잘라주어야 하는 경우를 만날 때가 많습니다.

여기서 보편적으로 사용하는 몇가지 명령으로는

1. strlen  - 글자수를 계산해서
2. substr - 정해놓은 값만큼 자르거나
3. mb_substr - UTF-8의 경우는 mb_명령을 붙여서 자른 후에
4. echo ".." - 쩜쩜과 같은 텍스트를 마지막에 붙여넣어라

하는 4단계의 작업을 거치고는 하죠.

이를 귀찮게 생각한 나머지 일부 PHP개발자들은 글자수를 원하는대로 자를수 있는 갖가지의
Function 을 만들어서 사용해오곤 했으나.. PHP5 버전부터는 이러한 불편함을 한번에 해결해 줄수 있는
명령이 새로이 추가된 바 있으니.. 이 명령이 바로 mb_strimwidth 라 할 수 있겠습니다.

string mb_strimwidth ( string $str , int $start , int $width [, string $trimmarker [, string $encoding ]] )

위 구문이 php.net의 기본 구문이나. 이를 쉽게 풀어보면 아래와 같습니다.

mb_strimwidth('텍스트','시작위치','끝위치',"끝에붙일말","언어코드");

간략하게 기술해놓은 아래의 예제를 보시면 더욱 쉽게 이해하실 수 있습니다.

$text = '가나다라마바사';
$strim = mb_strimwidth($text, '0', '5', '...', 'utf-8');
echo $strim;

결과 = 가나다라마...

UTF-8로 정의된 $text의 값을 0번째 뒤부터 5번째 글자까지 자르고, 마지막에 ... 를 붙이는 일괄작업을 이 mb_strimwidth 명령 하나만으로 간편하게 지정할 수 있습니다.


$text = '가나다라마바사';
$strim = mb_strimwidth($text, '2', '6', '..', 'utf-8');
echo $strim;

결과 = 다라마바..

UTF-8로 정의된 $text의 값을 2번째 뒤부터 6번째 글자까지 자르고, 마지막에 .. 을 붙입니다.

대개 euc-kr로 정의된 문자는 한글 1자를 총 2개의 글자수를 가진 것으로 인식하기 때문에
보다 정확한 처리를 위해서라면 utf-8 로 변수값을 정의하는 것이 유리하다고 할 수 있습니다.

echo strlen("가나다"); => 6
echo mb_strlen("가나다"); => 3

따라서 PHP5 버전 이상의 환경이 구축된 서버를 이용하여 한글 자르기와 관련한 작업을 한다면
UTF-8을 기본언어셋으로 설정하여 mb_strimwidth 명령을 통해 작업의 간편화를 도모하시는 것이
여러모로 유리하다고 할 수 있겠죠?
Posted by 동원삼치

BLOG main image
by 동원삼치

카테고리

전체 (15)
HTML (1)
JQUERY (7)
PHP (3)
APACHE (3)
JAVASCRIPT (1)

글 보관함