떠들어 보세요

jQuery 이미지 롤링 조금 발전 시킨 버젼을 추가해 봅니다. 롤링이란 키워드가 일일 방문의 절대 다수로 이뤄지고 있기 때문에 지난 번 포스팅 했던 내용에 좀더 살을 붙이고 쓰임새가 좀더 있는 넘으로 즉 끌어 붙이만으로 나름 동작하는 버젼으로 발전 시켜서 혹시라도 이용할 사람들에게 조금이라도 보탬이 되고자 몇자 적어 봅니다.

개선된 내용

1. 링크 기능 추가(접힌 부분의 클릭 시 넓어지기, 넓혀진 부분의 클릭 시 링크로 이동)
2. 이미지 갯수를 li 요소의 갯수로 대체
3. 가려지는 시간과 보여지는 시간차로 인한 스크립트 오류 수정
4. 하나의 파일에서 내용 확인 가능하도록 완성된 html 로 수정

아직 해결하지 않은 부분

1. 이미지의 크기가 현재 코드에 부합하는 크기일꺼란 보장이 없다. 현재 코드 상으로는 넓이 350을 기준으로 이미지를 슬라이딩 하게 해놓은 상태이다. 즉 적용하고자 하는 부분에서 이미지 크기가 350 보다 크거나 작다면 원하는 크기의 이미지 크기로 코드를 수정해 주어야 한다. 
2. 가려지는 부분의 크기 역시 현재 80px 으로 고정된 상태이다. 이미지 넓이가 350px 인게 4개라고 했을 때 최조 보여지는 부분의 크기가 590px 이여야 한다. 600px 섹션에 뭔가를 꽉 체우려면 여분의 크기를 82.5로 제어해 주어야 한다. 즉 현재 80 으로 세팅된 부분을 82.5 또는 이미지의 갯수 크기에 따라 다르게 세팅해 주어야 한다는 점이다. 만약 350px 넓이에서 이미지가 롤링만 되길 원한다면 80 으로 표시된 부분을 0 으로 고쳐 주어야 한다. 내가 최초 원했던 컨셉은 뒤편의 이미지들이 삐죽이 보이게 하는 것이었습니다.

아래 고쳐진 코드를 하나의 html 로 묶어서 보기 좋게 다시 편집해 두었습니다.

최종 소스 확인

2011/11/24 - [뭐하는데/이따위로 만든다] - jQuery 롤링(Rolling) 이미지 처리

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

웹사이트 만들때 입력 폼을 그리는 일은 은근히 짜증나는 일인 것 같다. 단순 문자열 입력만 받으면 좋으련만 세상은 내가 생각하는 것만큼 단순하지도 않고 원하는 데이타 형태도 제 가각이니 말이다. 또 그 요소들의 배치나 배열 형태나 기타 적용될 CSS 까지 고민하기 시작하면 정말이지 갑갑한 일이 되기 쉬운것이 폼 디자인이라 생각한다. 그런데 나만 그런 생각을 가지고 있는게 아니었나보다. 이런 불편을 조금이라도 해소하고자 배색과 폼 요소 문자열, 문장, 날짜 기타 등등 10여가지 요소에 대한 입력 html 을 생성해 주는 사이트가 있네요... 일단 어지러운 폼을 보다 깔끔하게 만들 수 있다는 장접이 있습니다. 여러분도 이용해 보세요. 생각 보다 깔끔한 html 과 보기 부담스럽지 않은 입력 화면을 쉽게 만들 수 있습니다. 뭐 날짜 입력 부분이나 맘에 않드는 요소도 약간 있긴 하지만 그런 부분은 적당히 고치면 되고 일단 기본 폼이 있어야 고치는 것도 쉬우니가요... 

http://www.phpform.org/  

1. 기본 색상 선택
   
   
   
    
    
2. 요소 선택
   
   
     
   
3. 완료 화면
   
   
   
    
   
4. 미리보기 화면
   
   
   

 
 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

내 생애 php 란걸 하게 될 날이 있을까 싶었는데... 이게 왠일인지 php 란 넘으로 사이트까지 만들어 버렸다. 초고속 속성반으로 1달 채 않되는 시간의 학습기간으로 두달간의 삽질 끝에 이런 허접한 글을 적을 정도까지 와 버렸다. 솔직히 두어달 동안 삽질하며 익힌 것들이 아까워서 좀 자랑질 하려는 마음에 몇 자 남겨 보는 것이다. 짧은 학습 기간만큼이나 실력은 미약하고 php 란 언어를 배웠다기 보다는 cakephp 란 MVC 프레임웍에 대해 조금 익숙해진 정도이다. MVC 란 프레임웍이 워낙에 명료 하다보니 PHP 생초짜인 나도 쉽게 따라 붙을 수 있었고 어느 정도 규모가 되는 사이트도 쉽게 이어갈 수 있었던 것 같다. 물론 같이 작업했던 동료들의 노고도 잊어선 않되겠지만, 그래두 내가 제일 잘 났어...ㅋㅋㅋ 내가 제일 잘 났어... 내가 제일 잘 났어...ㅋㅋㅋ
깔대기란게 그냥 되는 것이 아니구나... 참 민망하네...

일단 cakephp  란 것은 http://cakephp.org 란 곳에서 다운 받아 사용하면 되고 설치가 목적이 아니므로 설치는 알아서들 하시길. 현재 2.0.4 버젼이 올라와 있네요. 내가 사용한건 1.3 버젼이었는데 개발 중간에 버젼업이 되어서 그냥 1.3 만으로 만족하면 쓰기로 해버렸습니다. 다음에 또 사용하게 된다면 바로 2.0을 이용해서 만들면 될 것입니다. 이미 1.3 으로 서비스 사이트에서 2.0 으로 버젼을 올리는 건 그리 쉬운 일이 아닌 것 같아 아직은 고려하지 않고 있습니다. 2.0 에서 달라진 여러 규칙이 1.3 과 호환 되지 않을 것 같은 두려움과 더블어 폴더 구조가 바뀌어서 약간의 혼란이 있기도 합니다. php 를 앞으로 얼마나 사용하게 될지도 모르는 마당에 연구해가며 공부까지 할 생각은 없기에 당장은 1.3 으로 만족하며 잘 사용하려고 합니다.

MVC 프레임웍 하면 제일 먼저 떠오르는 건 ORM인데 ruby on rails 란 프레임웍에서 제공했던 디비 관련 일련의 작업을 객체화(?) 시켜주는 편리함 때문입니다. 웹 관련 개발을 하면서 데이타 전송이나 입출력 시 제일 골치 아픈 문제 중에 하나가 이름 맞추기 였는데 C#, Java 같은 컴파일 언어들은 미리 선언이라도 하고 개발 툴에서 인텔리센스라도 지원해 주지만(Java 는 없었나...) 스크립트 언어들은 그 지원이 너무 미약하여 변수명에 대한 오류가 나면 l, I 같은 눈에 잘 않보이는(대문자 i, 소문자 L) 같은게 잘못되기라도 하면 어쩌구 저쩌구 개발에 맞는 폰트 사용이 어쩌구 저쩌구 부터 타이핑 하지 말고 마우스 클릭으로 카피하라는 둥 머 이래 저래 많은 헛소리들을 하곤 했죠. 어쨌거나 디비 관련 변수의 이름 맞추기는 참으로 많은 문제를 일으키던 넘 중에 하나였습니다.(물론 내 허접함도 한몫 하긴 했겠지만...)
cakephp 란 놈도 php 로 구현된 것들 중 rails 란 프레임웍에 가장 가깝다는 놈이기 때문에 비슷한 ORM 기능을 제공하고 있습니다. 모델에서 find 란 method 를 제공하고 다양한 조건과 경우에 대비하여 데이타 출력을 용이하도록 도와 주고 있습니다. 단순한 형태의 Member 란 테이블을 생성하고 그 데이타를 가져오는 경우입니다. 내 생애 mySql 과 친해지는 것도 그다지 바라던 바는 아니었으나 이젠 나름 익숙해 지려고 합니다. 난 원래 MS SQL 이 주요 밥벌이 였는데...그립다. MS SQL

delimiter $$
CREATE TABLE `Member` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(128) NOT NULL COMMENT '회원이메일 주소',
  `name` varchar(32) NOT NULL,
  `password` varchar(45) NOT NULL COMMENT '회원 비밀 번호',
  `memberStatus` int(11) NOT NULL DEFAULT '1' COMMENT '회원상태(1:정상,10:탈퇴..)',
  `member_grade` int(11) DEFAULT '1' COMMENT '회원 등급\n1: guest(미인증)\n2: 일반 회원\n4:\n8:\n16:\n32: \n32768 : 관리자',
  `img_url` varchar(128) DEFAULT '/img/Common/guest.gif' COMMENT '회원 기본 이미지 URL',
  PRIMARY KEY (`id`),
  UNIQUE KEY `id_UNIQUE` (`id`),
  UNIQUE KEY `MemberEmail_UNIQUE` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=64 DEFAULT CHARSET=utf8 COMMENT='회원 기본 정보'$$

DB 의 테이블과 매칭하는 부분이 모델입니다.

<?php

class Member extends  AppModel
{
var $name = 'Member';
var $useTable = 'Member';
var $validate = array(
'MemberId' => array(
'notempty' , 
'email' => array('rule'=>array('email',true)  , 'message' => 'Email 형식이 아닙니다.' ))
);
}
?>

테이블 명과 일치하는 파일명으로 위와 같은 모델을 만들어 줍니다. php 란 것이 스크립트 언어다 보니 특정 폴더, 접미어, 대소문자 등에 민감(?)합니다. 되도록 테이블 설계 때 사용한 이름과 어긋나지 않도록 잘 매칭해 주는 것이 필요합니다. 모델은 app/models 폴더 밑으로 클래스명과 동일한 파일명으로 만들어 주는 것이 중요합니다.

모델을 만들었으면 그 데이타를 이용하는 컨트롤을 만들어 볼 차례입니다. 컨트롤 역시 app/controllers 폴더 밑으로 만들어 줘야 하며,  원하는 이름 뒤로 _controller.php 를 꼭 붙여 줘야 합니다. cakphp 가 정상적으로 설치되었다면 테스트 경로로 접근했을 때 아래 그림과 같은 오류 페이지를 확인 할 수 있습니다. 지금 저의 경우는 localhost 란 서버에서 Member 란 컨트롤로 연결을 시도한 경우가 되겠습니다. 친절하지 않은 디자인으로 Missing Controller 란 메시지를 보여주고 Error :  MemberController could not be found 라고 하네요.

에러 메시지에서 알려주는 데로 app/controllers/member_controller.php 란 파일을 만들어 줘야 합니다. 그러나 Member 란 이름이 아까 우리가 만들었던 Member 란 모델과 겹치게 되므로 MemberInfo 로 만들도록 하겠습니다. 궂이 MemberInfo 란 이상한 이름을 쓰는 까닭은 cakephp 란 넘의 작동 원리 때문에 그렇습니다. 처음에 무지하게 카멜 표기법을 사용하면서 고생을 심하게 했는지라... cakephp 에서 이름을 매칭할 때 대문자는 _소문자로 처리해 버립니다. 즉 우리가 MemberInfo 란 컨트롤을 만들게 된다면 실제 그 파일명은 member_info_controller.php 로 만들어야 한다는 뜻입니다. 아래 그림은 MemberInfo 란 컨트롤로 접근한 결과 화면입니다. 역시 아직 컨트롤이 만들어지기 전이므로 에러 화면이 나타나지만 두번째 빨간 네모의 내용을 유의해서 위의 에러 화면과 비교해 보시면 그 차이점을 아실 수 있을 것입니다. 대문자 스스로 변환시키는거 참 골치 아픕니다. 

자 그럼 에러 메시지가 시키는 데로 app\controllers\member_info_controller.php 파일을 생성합니다.
그 내용은 

<?php
class MemberInfoController extends AppController {
var $name = 'MemberInfo';
}
?>

보통 액션이 따로 없는 경우는 index 가 기본 액션이 됩니다. 따라서 다음과 같이 기본 액션을 생성해 줍니다. 기본 액션에 대해서는 app/config/routes.php 에서 라우팅을 설정해 주는 것으로 변경이 가능합니다.

<?php
class MemberInfoController extends AppController {
var $name = 'MemberInfo';

function index()
{
}
}
?>

여기까지 만들어졌다면 다시 브라우져를 확인해 봅니다. MemberInfo 란 테이블을 찾네요 헐. 컨트롤과 모델이 저런식으로 암묵적 관계를 가지고 있었다니. 내가 Member 란 이름으로 컨트롤을 만들었다면 Member 란 모델과 자동으로 연결되는게 아닌가라고 생각 할 수도 있으나, 지난 두어달의 삽질 결과 모델명과 겹치는 컨트롤명은 항상 좀 애매한 문제를 일으켰다. 그러니 분리 해서 사용하는게 좀더 현명한 방법이다.

자 이제 에러 메시지에 대한 수정 작업을 해보도록 하자.

<?php
class MemberInfoController extends AppController
{
var $name='MemberInfo';
var $helpers = array('Html','Form','Ajax','Paginator'=>array('html'=>'Html'));
var $components = array('RequestHandler','Session');
var $uses = array(
'Member'
);
function index()
{
}
}
?>

어떤 컨트롤이든 사용할 모델이 필요하니 $uses 를 이용해서 사용할 모델을 연결해 주자. 여기서 우리가 사용하는 php 란 언어가 거의 모든 대부분의 데이타 형태를 배열로 사용함을 알 수 있다.(다시 한번 주지 하자면 난 php 전문가가 아니다. 전문가 되고 싶지도 않다.)
두가지 사항이 늘었다. $helpers, $uses, $components 이 것들이 뭐하냐는 것이냐면 using, import, include 머 다양한 이름으로 소개 될 수 있는 것들이다. 즉 이 컨트롤에서 cakephp 에서 제공하는 여러가지 기능 중에 필요한 기능을 추가해 사용하려는 것이다. RequestHandler 는 get, post 등의 여러 방법으로 넘어온 데이타 처리 및 json 같은 데이타 형식 등 웹에서 일어나는 다양한 처리 형태를 처리 할 수 있도록 커버 해주는...Paginator 는 리스트이지의 페이징을 쉽게 해주는 머 그런 역할을 한다. 
컨트롤까지 만들어졌다면 위와 같은 화면을 보게 될 것이다. View 를 만들어 달라는 이야기다. 폴더 위치를 정확히 확인 하고 확장자에 유의 해서 파일을 생성하자. php 가 아니라 ctp 로 되어 있다.
이제 파일이 만들어 졌으면  아래 이미지와 같은 멋 없는 화면을 보게 될 것이다. index.ctp 파일에 "이제 만들어 졌습니다." 라고 썼을 경우에 말이다.


지금까지 만든 것은 그 흐름을 이해하기 위해 하나씩 적용해 본 것이다. 처음 cakephp 란 걸 사용하기로 했을 때 설치 부터 첫 페이지 만들기까지 너무 많은 고생을 해서 그 첫 시작을 줄여 주고자 간단한 안내 페이지를 만들어 봤다. 

이제 다음엔 이 촌스런 디자인을 벗어 버리도록 app/view/layout 에서 디자인 된 템플릿을 만들고 디자인이 적용된 웹사이트 답게 생긴 모습으로 바꿔 보도록 하자.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.