Tag Archives: FRDB

[FRDB Project] 03 – view.php 와 플래시 액션스크립트

그간 이래저래 공연도 끼어있고 해서 1,2번 포스트가 올라오던 시점에 비해 업데이트가 늦어졌다.
하지만 시간의 간극이 워낙 크다보니, 그 사이에 놀고 있지만은 않았다는 사실을 증명하듯.
의외로 꽤나 많은 부분에서 진척이 이루어졌다.

대망의 디자인 업데이트 된 페이지뷰가 등장하기 전에 몇가지 업데이트 사항을 기록하고자 한다.

1. menu.swf

[Flash] /attachment/1313033471.swf



- 별다른 설명이 필요 없는. 언제나 레이아웃 상단에 위치할 메인메뉴 네비게이션

* 동그라미에서 막대가 되는 애니메이션은 프레임을 이용했고, 각각의 메뉴가 독립적으로 동작하는 부분은 액션스크립트를 통한 프레임 액션 함수- MovieClip.prevFrame() MovieClip.nextFrame() -들을 이용하여 구현
* 동그라미에서 막대로 변하는 심볼은 하나지만, 각각에 대응하는 메뉴이름들은 전부 각각의 이름(접미어 _m) 으로 개별 등록되어 있고 액션스크립트를 통해 동적으로 등록- MovieClip.attachMovie() 후 일괄적으로 위치 배치 & 회전
* 동적으로 등록된 각각의 메뉴이름들은 재생된 프레임 비율을 계산하여, 등록된 Color 객체의 setRGB 메소드를 통해 밝기 변경
* 무비클립의 Tint 속성을 통해 개별 메뉴의 색 구분
* 각각의 메뉴에 대응하는 링크/타겟 배열을 두어 링크 관리를 용이하게 구현

※ 각각의 메뉴 무비클립 : menu01 ~ menu16 / 메뉴이름 동적연결 이름 (linkage name) menu01_m ~ menu16_m
[#M_menu.swf 액션스크립트 소스 - level0 (열기)|menu.swf 액션스크립트 소스 - level0 (닫기)|

(Language : javascript)


  1. // 본 파일은 소스코드 작성당시 파일이라 링크는 정확하지 않음


  2. var linkArray = new Array(


  3.       "http://minsangk.com/kid/test/02.html",


  4.       "http://minsangk.com/kid/test/03.html",


  5.       "http://minsangk.com/kid/test/04.html",


  6.       "http://naver.com",


  7.       "http://naver.com",


  8.       "http://naver.com",


  9.       "http://naver.com",


  10.       "http://minsangk.com/kid/test/08.html",


  11.       "http://minsangk.com/kid/test/10.html",


  12.       "http://pds6.egloos.com/pds/200711/08/03/12.bord2.html",


  13.       "http://pds7.egloos.com/pds/200711/08/03/11.bord1.html",


  14.       "http://minsangk.com/kid/test/09.html",


  15.       "http://pds7.egloos.com/pds/200711/08/03/13.bord3.html",


  16.       "http://pds7.egloos.com/pds/200711/08/03/14.bord5.html",


  17.       "http://cafe.naver.com/frdb",


  18.       "http://cafe.daum.net/kicha"


  19.       );


  20.  


  21. var targetArray = new Array(


  22.       "_self",


  23.       "_self",


  24.       "_self",


  25.       "_self",


  26.       "_self",


  27.       "_self",


  28.       "_self",


  29.       "_self",


  30.       "_self",


  31.       "_self",


  32.       "_self",


  33.       "_self",


  34.       "_self",


  35.       "_self",


  36.       "_blank",


  37.       "_blank"


  38.       );


  39.  


  40. headerTitle.onRelease = function()


  41. {


  42.  getURL("http://minsangk.com/kid/test/01.main(1).htm","_self");


  43. }


_M#]
[#M_menu.swf 액션스크립트 소스 - button_proto (열기)|menu.swf 액션스크립트 소스 - button_proto (닫기)|
(Language : javascript)


  1. stop();


  2.  


  3. // 최초 1회 실행


  4. if (count == undefined) {


  5.  // 각각의 메뉴 이름 동적으로 등록


  6.  this.attachMovie(this._name + "_m", this._name + "_m", this.getNextHighestDepth());


  7.  


  8.  // 등록된 메뉴 이름 무비클립의 재배치 / 회전


  9.  menuName = this[this._name + "_m"];


  10.  menuName._x = 9;


  11.  menuName._y = 54;


  12.  menuName._rotation = -49.5;


  13.  


  14.  count=1;


  15. }


  16.  


  17. // 메뉴 이름의 Color 객체 생성


  18. menuName_color = new Color(menuName);


  19. menuName_color.setRGB(0×000000);


  20.  


  21. // 롤오버-아웃시 rollover 변수의 값 토글


  22. this.onRollOver = function()


  23. {


  24.  rollover = true;


  25. }


  26.  


  27. this.onRollOut = function()


  28. {


  29.  rollover = false;


  30. }


  31.  


  32. this.onEnterFrame = function()


  33. {


  34.  if (rollover)


  35.  {


  36.   // 현재 프레임이 최종 프레임이 아니면 순방향 재생


  37.   if (this._currentframe != this._totalframes) {


  38.    this.nextFrame();


  39.   }


  40.   // 재생이 종료 되었을 경우 stop


  41.   else {


  42.    stop();


  43.   }


  44.  }


  45.  // 이외의 경우 역방향 재생


  46.  else


  47.  {


  48.   this.prevFrame();


  49.  }


  50.  


  51.  // 재생된 프레임 비율을 계산하여 setRGB 매개변수 포맷으로 변환


  52.  color_int = int ( (this._currentframe-1) / (this._totalframes-1) * 255 );


  53.  color_0x = “0x” + color_int.toString(16) + color_int.toString(16) + color_int.toString(16);


  54.  


  55.  // 메뉴 이름에 링크되어 생성된 Color 객체에 색 지정


  56.  menuName_color.setRGB(color_0x);


  57. }


  58.  


  59. // 클릭 시 해당되는 주소/타겟 으로 링크


  60. this.onRelease = function()


  61. {


  62.  linkIndex = Number(this._name.substr(4,2)) -1;


  63.  getURL(_root.linkArray[linkIndex],_root.targetArray[linkIndex]);


  64. }

_M#]
후배님이 디자인한 내용을 초안으로 최대한 노가다 작업을 아껴보고자 액션스크립트를 사용했다. 동적으로 연결되는 메뉴이름 무비클립들의 밝기를 일괄조정 하는 작업에서, 과도한 시스템 자원 낭비를 방지하기 위해  colorTransform 클래스를 안 쓰고 오로지 Color 객체의 setRGB 메소드만 사용했다. 왜 액션스크립트에는 변수를 포맷팅해서 출력해주는 함수가 없는가-_- 찾다찾다 gg치고 그냥 내가 하려하다보니 좀 난잡한 코드를 만든 감이 없잖아 많은듯-_- 어쨌든 구현에는 성공했다. 프레임 액션은 이것말고도 참 여러모로 쓸모가 많은 코드인듯 싶네. 여기 말고도 현재 제작중인 플라곤 홈페이지의 메인메뉴 네비게이션도 똑같은 방식으로 구현되어 있다. 그것도 그렇고 여기 이 녀석도 그렇고 어쨌든 메뉴 네비의 첫 구상을 내가 하지 않은 경우, 액션스크립트를 통해 자연스러운 애니메이션을 구현하다보면 결국 결론은 프레임 액션으로 귀결되는 것 같다. AS1.0 시절의 노가다성 프레임질에 AS2.0 을 통한 고급스러운 뒷마무리- 라는 느낌을 주는 기술. 어쨌거나 좀 더 화려하고 직관적인, 그러면서도 시스템 효율을 최대한으로 이끌어내는데에 참 유용한 기술인 것만은 분명하다. (다만 구현이 그렇다는 것이고, 구현 후에 수정하려면 여러모로 귀찮아진다는 것 때문에 본인은 별로 선호하지 않을뿐)


2. view.php

http://minsangk.com/frdb/view.php
- idx 파라미터를 넘겨받아 지정된 자료를 테이블로 출력하는 파일

* 구성된 레이아웃대로 각각의 필드를 출력
* 사업상황(state 필드) 의 내용에 따라 1:1 대응되는 신호등 이미지 출력
* 관련노선(linkingIDX 필드) 의 내용을 구분자(|)를 기준으로 explode 하고, 해당 idx 의 노선명을 쿼리 전송받아 각각의 링크를 가진 문자열로 출력
* 목록으로 되돌아가는 버튼 폼
* list.php 코드에 해당 인덱스를 매개변수로 하여 view.php 를 호출하는 하이퍼링크를 추가
 - <a href=”./view.php?idx=??”>

이건 후배님이 하고 있는 페이지 디자인의 초안이 나오면 들어가려고 계획된 것이었는데, 후배님의 PPT 발표 예정 상황과 겹쳐 하루만에 초고속 날림-_- 제작되었다. (그런데 중요한건 PPT 발표가 미뤄져서 이 녀석은 아직 미공개 상태라는거) 다른 페이지와 마찬가지로 CSS 가 눈꼽만큼만 사용된 극도의-_- 코드위주 페이지이지만 어쨌든 계획된 내용에서 필요한 부분으로 체크된 내용은 전부 구현되었다고 보아도 좋다. 관련자료 필드 추가가 이뤄지면 또 한번의 코드 수정은 불가피하겠지만, 그 외의 부분은 (디자인을 제외하고) 거의 완성 단계다.

워낙 오랜만에 다시 손 댄 PHP 코드라 내가 짜놓은 녀석들이 낯설어 보여 약간의 고생은 했지만, 요즘 과외 때문에 비슷한 구성과 색다른 문법을 지닌 JSP 를 공부하고 있는것이 나름의 상승 작용을 한 것 같은 느낌이다. PHP 코딩능력이 한결 좋아져서 이제 50라인 정도는 그냥 머릿속에 생각한 대로 옮기면 불필요한 중간 확인 과정을 거칠 필요 없이 작성이 가능해졌다.


3. 지역별분류.swf

[Flash] /attachment/1170838957.swf


- 입력된 DB 를 지역분류별로 출력하는 링크 네비게이션

* 각각의 조각지도를 롤오버 하면 최대 알파치로 진해지고, 롤아웃하면 다음 롤오버 액션에 상관없이 부드럽게 최소 알파치로 변경
X 각각의 조각지도에 대응하는 리스트 출력
(list.php 에서 각각의 상황에 맞는 vMode 추가가 이뤄지는대로 링크 예정)

※ 각각의 조각 지도 무비클립 : sub1 ~sub7

[#M_지역별분류.swf 액션스크립트 소스 - level0 (열기)|지역별분류.swf 액션스크립트 소스 - level0 (닫기)|
(Language : javascript)


  1. // sub (조각지도) 의 갯수


  2. AmountOf_sub = 7;


  3.  


  4. // 특정 링크 선택 변수(roll), 알파 변화 가속도(acc), 최대 알파치(maxAlpha), 최소 알파치(minAlpha) 초기화


  5. roll = 0;


  6. acc = 0.1;


  7. maxAlpha = 100;


  8. minAlpha = 40;


  9.  


  10. // 각각의 sub 가  롤오버되면 roll 변수에 sub 의 인덱스 저장


  11. for(var i =1; i<=AmountOf_sub; i++)


  12. {


  13.  this["sub"+i].onRollOver = function()


  14.  {


  15.   roll = substring(this._name,4,1);


  16.  }


  17.  this["sub"+i].onRollOut = function()


  18.  {


  19.   roll = 0;


  20.  }


  21. // 각각의 sub 를 최소 알파치로 초기화


  22.  this["sub"+i]._alpha = minAlpha;


  23. }


  24.  


  25. this.onEnterFrame = function()


  26. {


  27. // 선택된 sub 는 최대 알파치로 가속, 나머지 sub 는 최소 알파치로 가속


  28.  for(var i =1; i<=AmountOf_sub; i++)


  29.  {


  30.   if(i == roll) {


  31.    this["sub"+i]._alpha += (maxAlpha – this["sub"+i]._alpha)*acc;


  32.   }


  33.   else {


  34.    this["sub"+i]._alpha += (minAlpha – this["sub"+i]._alpha)*acc;


  35.   }


  36.  }


  37. }


_M#]
지도의 출처는 아마도 네이버가 아닐까 싶은데- 후배님이 손수 비트맵 파일을 따서 각각의 조각지도를 PNG 로 저장했고. 나는 그 파일을 받아 Magic Wand 툴로 투명 부분의 Shape 를 삭제해 심볼화했다. 군대 행정반에서부터 시작된 액션스크립트 2.0 공부는 사실상 이러한 스타일의 부드러운 메뉴 네비게이션을 구현하기 위해서 였다고 해도 과언이 아닐 거다. 이제는 그 코드 구현이 어느 정도 머릿속에 확고히 자리 잡아 어떠한 형식이라도 가장 간결한 형태로 코딩하는 방법을 찾았고. 위 코드는 대략 그 모든 조건이 최적화 되어 있다. 이 블로그에 구현될 메뉴 네비도 대략적으로는 이런 형식에서 크게 벗어나지 않는 형태가 될 듯. 문제는 노력과 시간. 일단 머릿속에 대강의 디자인과 구성이 들어가 있으니, FRDB 프로젝트가 끝나는대로 작업 시작이다-.-.- 그때쯤이면 넘치도록 뛰어난 후배님의 디자인 센스를 마구마구 부려먹는거다. 하하-.-.-


4. 수도권노선도.swf

 

[Flash] /attachment/1118899035.swf


- FRDB 에 DB화 되어 등록된 자료 중 수도권 분류 노선들과 1:1 매칭되는 수도권 노선도 플래시 파일

* 어느 위치에서나 토글(toggle) 방식으로 이동과 정지가 가능
* 화면 중앙을 중심으로 좌우상하 이동 폭에 따라 노선 이미지의 상하좌우 검색이 가능
* 노선 이미지의 경계선을 인식하여 유효범위가 오버플로우 되지 않음
* 등록된 노선을 오버마우스 하면 블러 필터를 통해 하이라이트 됨
* 등록된 노선을 배열로 관리하여 삽입, 수정, 삭제가 용이하게 구성
(위 파일은 현재 인천지하철 3개 노선만 등록되어 있음)
X 로드 매개변수로(GET Method) idx 를 입력받아 특정 노선을 하이라이트 시키고 그 위치로 전체 노선도를 위치시킴
(이건 조만간에 구현 예정 -_-_-)

※ 전체 노선도 무비클립 : mc_all / 각각의 노선 무비클립 : mc_all.sub?? (물음표 자리에 해당 노선의 idx)


[#M_수도권노선도 swf 액션스크립트 소스 - level0 (열기)|수도권노선도 swf 액션스크립트 소스 - level0 (닫기)|
(Language : javascript)


  1. // 노선도 이미지 전체 사이즈


  2. allWidth = 3100;


  3. allHeight = 2311;


  4.  


  5.  


  6. // 노선도 이미지 전체 사이즈


  7. allWidth = 3100;


  8. allHeight = 2311;


  9.  


  10. // 캔버스 전체 사이즈


  11. canvasWidth = 930;


  12. canvasHeight = 693;


  13.  


  14. // 이동 가속도, 이동/정지 모드 초기화


  15. acc = -0.05;


  16. _root.moveMode = false;


  17.  


  18. if(idx) {


  19. // idx 관련 구현 소스 들어갈 자리


  20. }


  21.  


  22. // 이동/정지 모드 토글


  23. mc_all.all.onRelease = function() {


  24.  if(_root.moveMode) {


  25.   _root.moveMode = false;


  26.  }


  27.  else {


  28.   _root.moveMode = true;


  29.  }


  30. }


  31.  


  32. this.onEnterFrame = function()


  33. {


  34. // 이동 모드일 때-


  35.  if (_root.moveMode == true) {


  36. // 화면 중앙을 중심으로 노선도의 좌우 이동


  37.   scrollStepX = (_root._xmouse - canvasWidth/2) *acc;


  38.   scrollStepY = (_root._ymouse - canvasHeight/2) *acc;


  39.  


  40. // 이미지 오버플로우 방지 if문


  41.   if(mc_all._x+scrollStepX >= canvasWidth-allWidth && mc_all._x+scrollStepX <= 0) {


  42.    mc_all._x += scrollStepX;


  43.   }


  44.   if(mc_all._y+scrollStepY >= canvasHeight-allHeight && mc_all._y+scrollStepY <= 0) {


  45.    mc_all._y += scrollStepY;


  46.   }


  47.  }


  48. }


  49.  


  50. // 블러 필터 클래스 import


  51. import flash.filters.BlurFilter;


  52.  


  53. // 관련 노선의 idx 를 배열로 등록


  54. var subListArray = new Array ( "93","95","96");


  55.  


  56. // 블러 필터 객체 생성


  57. var blur:BlurFilter = new BlurFilter(4,4,3);


  58.  


  59. // 관련 노선 필터 적용 (적용된 상태에서 알파값으로 하이라이트/노멀 상태 변경)


  60. for(var i in subListArray)


  61. {


  62.  this["sub"+subListArray[i]]._alpha=0;


  63.  this["sub"+subListArray[i]].filters=[blur];


  64.  


  65.  this["sub"+subListArray[i]].onRollOver = function()


  66.  {


  67.   this._alpha = 80;


  68.  }


  69.  


  70.  this["sub"+subListArray[i]].onRollOut = function()


  71.  {


  72.   this._alpha = 0;


  73.  }


  74. }

_M#]
후배님 수업시간에 누군가의 한마디 때문에 만들어야만 했던 녀석. 아마 그 학생은 이게 얼마나 힘든 작업인지 자기가 말하면서도 몰랐을 거다, 젠장 -_- 그 덕에 후배님의 피를 깎는 노가다와 본인의 머리털을 쥐어뜯는 노력이 만나 완성되었다. 지역별분류.swf 와 마찬가지로 후배님이 저 수많은 노선들을 손수 하나하나 포토샵으로 따서 PNG 로 저장해주었고, 나는 다시 그걸 Magic Wand 로 손보아 각각의 idx로 심볼화. 일단은 스크립트부터 완성시키느라 인천지하철 3개 노선 외에 나머지는 파일은 있으나 등록되어 있지 않은 상태. 지역별분류.swf 보다 몇배는 더 고심하고 고민하고 삽질해야 했던 스크립트였다. 이제 수십개의 관련 노선들을 추가하고 그 노선에 대응하는 idx 를 찾아 링크하고 각각의 노선 색깔에 맞는 하이라이트 컬러를 조정하고 등등의 노가다성 작업만 넘치도록 남았구나. 아아-_-_-



다음 FRDB Project 포스트는 이전 포스트에서 예고한 바와 같이 후배님이 제작중인 페이지 디자인을 중점적으로 소개해 보겠다. 아직은 이것저것 손 볼 것이 좀 많아 매 수업시간마다 있는 발표 과제 위주로 구성을 하다보니 전체적인 페이지 디자인의 윤곽이 흐릿해진 감이 있지만. PHP 코드 부분이나 중간중간 페이지를 빛내주는(ㅋ;) 플래시 액션스크립트가 어느 정도 궤도에 올랐으니, 조만간 페이지 디자인도 깔끔하게 이 무대에서 데뷔할 날이 올 것이다.


그런데,
소주 두어병 먹고 들어온 상태에서 내가 이런 포스트를 두드리게 될 줄 몰랐다. 요 아래 포스트는 우울해 죽을려고 하더니, 이렇게 신나게 이런 얘기를 떠들고 있는 것 보면. 나 그런대로 체질상 이게 맞는 거 같기도 하고. 에이, 모르겠네. 그냥 하는동안은 참 재밌었고, 해놓고 보니 꽤나 뿌듯하고. 두드리는대로 즉각적으로 결과가 튀어나오는 웹프로그래밍과 액션스크립트는 어쨌거나 참 매력 있는 녀석.

감당할 수 있는만큼만 최선을 다하면 그것도 참 열심히 사는 한 방법인데, 왠지 나란 인간은 그래서는 만족을 잘 못해버린다. 그래서 몰아놨다가 가끔 한번씩 스스로를 확 옥죄어버리면 늘 감당할 수 없을만큼 최선을 다해버리고 마는거다.

아, 참, 인생 좀 피곤하게 살아, 나도.

[FRDB Project] 02 – 서서히 살을 붙여나간다

가을공연 준비와 겹쳐 진행하는 터라 진도가 그다지 빠르지는 않은 듯 싶다.
현재까지 모든 파일을 다 합쳐 500 라인 정도.
밤새는 날이 늘어갈 수록 코드 라인은 점차 길어지고, 코드 라인이 길어지는데에 비례하여 밤새는 날도 늘어간다.
고작 500 라인 넘어갔다고 슬슬 정신이 오락가락 하기 시작.
몇십만라인의 코드를 누비는 프로 프로그래머들은 대체 뭐하는 인간들이야? -.-

뭐 어디서 체계적으로 배운 장사가 아닌지라, 중요 코드마다 주석을 다는 습관 따위 예전부터 없었는데.
기르고 있다. 아니 길러야 한다. -_-
급속한 체력고갈로 인해 두시간 전에 짠 코드를 두고 이해불능 상태에 빠지는 경우가 종종 발생.
이젠 누가 시키지 않아도 알아서 주석문을 주렁주렁 매달고 있다.

오늘 매단 주석 중에 가장 마음에 드는 것은 역시 요거-.-


///////////////////////////////////////////////////////// CREDITS /////////////////////////////////////////////////////////
// FRDB (Future Railroad DataBase) Project
// programmed by MinsangK ( Minsang Kim / Inha Univ. The College of Information & Communication Engineering 03 )
// designed    by Kid       ( Yeon-Jung Im / Inha Univ. The College of Computer Engineering 06 )
// 2007. Autumn

사실 이런건 다 만들고 해도 늦지 않은데, 그냥 기분상 -.-

http://minsangk.com/frdb/list.php

이제는 이 링크 하나만 타고 들어가면, 현재 제작 중인 모든걸 볼 수 있다.
골조공사가 마무리되고 슬슬 공구리-_-질에 들어갔단 징조 -.-
어쨌든 여기 공개된 것은 전부 완벽히 작동한다. (혹시 에러나면 리플 달아줘- 바로 수정들어가게-)

이제부턴 특정파일이 어떤 역할을 하는지에 대한 구분이 서서히 모호해지고 있다.
특히 가장 중심이 되는 write.php 와 list.php 는 현재 상호작용하고 있는 페이지만 각각 2,3개씩.
이 기본 코드들로 인클루드 되는 다른 파일들도 서서히 살을 찌우고 있는 상태.
특히 frdbProperty.php 는 따로 만든 보람을 느낄만큼 덩치가 커졌음 -.-


[#M_frdb_property.php|close|
(Language : php)


  1. <?PHP


  2.  


  3. // FRDB Property


  4. // : 각 필드 속성 관련 상수 배열 정의


  5.  


  6. $property_region = Array("서울,인천,경기,수도권", "대전,충청,전북권", "대구,경북권", "광주,전남권", "부산,울산,경남권", "강원권", "제주권");


  7. $property_state = Array("설계", "계획", "구상", "시공", "개통", "완공");


  8. $property_attribute = Array("신설", "연장", "복선전철화", "이설", "전철화", "차량기지이전");


  9. $property_standardEC = Array("AC", "DC");


  10. $property_standardSign = Array("ATC", "ATS", "ATO", "AGT", "무인자동운전");


  11. $property_standardVehicle = Array("통근형대형전동차", "모노레일", "화물열차", "직통열차", "일반열차", "7호선전동차", "경전철(무인자동운전)", "경전철(지하)", "고무차륜AGT(무인자동궤도시스템)", "SLRT(신형노면경전철)", "도시형자기부상열차");


  12. $property_standardWiring = Array("단선","복선","2복선");


  13.  


  14. // 리스트에서 보여줄 필드 선택


  15. $properties = Array("chk", "admin", "idx", "region", "kind", "name", "state", "attribute", "section", "distance", "standardEC", "standardEV", "standardSign", "standardVehicle", "standardWiring", "linkingIDX", "reference", "date");


  16. $vMode_admin = Array("0","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1");


  17. $vMode_linkingIDX = Array("1","0","1","1","1","1","0","0","0","0","0","0","0","0","0","1","0","1");


  18.  


  19. ?>

_M#]

그러니까 모든 속성이 다 배열로 들어가있다. ($property_속성)
각 속성의 이름도 배열로 정의 ($properties)
거기에 더해 리스트에 지정된 보여주기모드($vMode) 에 따라 어떤 속성을 보여줄 건지 지정하는 것도 배열이다.
저렇게 나란히 배치해 놓은 덕분에 linkingIDX (관련노선정보) 입력폼 제작이 한결 쉬워진거다. 물론 그럴려고 한 짓이다, 이게.
vMode_모드속성 이 “1″로 지정될 경우 그 필드를 보여주고 “0″이면 숨기는 것.

어쨌든 이게 최근 작업 중에 가장 난이도 있었고 골치 아팠던 작업이었다.
그냥 코딩 자체가 어려웠다기보다 이걸 어떻게 구현할지 머릿속에 구상하는 시간이 더 오래걸렸다.
그러느라 피운 담배가 한갑은 될걸? -_-
어쨌든 그 담배 한갑으로 헐어버린 목구멍만큼이나 완벽한 보상으로,
다음번 작업부턴 이런 식의 구성이 자주 나올 거다.
나중에 view.php 제작에도 아주아주 대단히 요긴하게 쓰일 예정.

* 이전 포스트에서 ‘더 할 일’이라고 이름 붙인 것들 중 그간의 작업으로 해낸 것들과 못 한 것들 리스트


http://minsangk.com/frdb/write.php
X – 예외사항처리(자바스크립트)
O – 수정 모드시 attribute 필드 이하로 쿼리 받기
O – 입력 모드와 수정 모드 시 스타일/메세지 구분
O – linkingIDX 입력 폼 (이건 따로 페이지 만들어서)
X – openingTime, progress 테이블 입력 폼

http://minsangk.com/frdb/action.php

O – linkingIDX 페이지 연계
O – 체크박스 예외사항처리 (str_)
X – openingTime, progress 테이블 연계 쿼리전송


http://minsangk.com/frdb/list.php

X – openingTime, progress 테이블 연계 쿼리전송
(이건 view.php 에 들어갈 기능으로 재편)
O – linkingIDX 페이지 연계
O – 체크박스 선택 필드 구분 출력
X – state 필드 내용별 신호등 img 출력
X – 관련 필드 span
(마지막 두개는 view.php 에 들어갈 기능으로 재편)


일단 제일 크게 남은 일은 progress(진행상황) 와 openingTime(개통시기) 을 테이블로 따로 만들어 입력폼과 연계시키는 작업.
테이블 구성은 어느 정도 머릿속에-_- 있고 가장 무시무시했던 frdb_base 테이블을 무난히 마쳐가는 단계니 큰 어려움은 없을 것으로 예상.
관리자 로그인폼과 action.php 를 동작시킬때 쿠키로 관리자 로그를 확인하는 과정은 뭐 급할 거 없으니 천천히 할 생각임.

여기까지만 완성되면 DB 관리적 측면에서의 모든 구성이 마무리된다.
그럼 또 어떤 측면이 있느냐, 하면. 바로 사용자적 측면.
DB도 모두 갖춰져있고 관리자 모드의 추가/편집/삭제/목록 이 모두 구현되어 있으니, 크게 어려울 건 없을 듯 싶다.
(다음 포스트에서, 아 이런 젠장 뭐가 어려울 게 없어 힘들어 죽겠구만- 이런거 쓸 듯 싶지만, 어쨌든)
그러나 사용자적 측면의 view, search 폼들은 페이지 디자인의 레이아웃이 잡힌 다음에야 들어갈 수 있으니,
아마도 다음 혹은 다다음 포스트 중에 연정씨가 디자인하고 있는 페이지들의 윤곽을 공개할 듯.

공연이 이제 2주 남은 터라, 다음 포스트는 언제 올릴지 모르겠다.
할 일이 산더미로 쌓여있으니만큼 일단은 코딩이 먼저지 포스팅은 나중이거든?
그래도 포스팅을 꾸준히 하는 이유는 연정씨의 PPT 에 도움을 주기 위해서이기도 하고, 내 작업의 참고노트가 되기 때문이기도 하다.
최근 작업 내내 포스트를 참고하며 해야 될 일을 참고하고 그 링크를 직접 두드리는 수고를 덜었다.
이 정도면 훌륭한 블로거 아냐? (대다수가 못 알아들을 말을 조낸 장황하게 쓴다고 욕하는 소리가 여기까지 들린다-.-)

서서히 정신이 혼미해지는 시간.
내일은 계획표고 뭐고 되는대로 푹 자고 일어나 다시 시작하자.
요새 잠을 너무 못 잤더니 이래저래 신체적 정신적 리듬이 모두 엉망이다.
쉽게 갈 수 있는 길을 어렵게 가면서도, 이게 그냥 뭐. 나 스스로 주체 안되게 움직이는 것. 누구 장난 마냥.

다시 달리자!-.-

frdb_base.gif

[FRDB Project] 01 – 골조공사쯤 완료-

꽤 오래전 포스트 중에 후배와 같이 하는, (아니 하게 된 -.-.-) 프로젝트에 대해 쓴 게 있었는데,
노트에서만 해오던 모든 공론을 끝내고 이번 주말부터 본격 코딩에 돌입했다.

FRDB 란 Future Railroad Data Base 의 약자로서,
교통평론가로 활동하고 계시는 한우진님이 끔찍스러울 정도로 엄청난 수고와 노력을 들여 만드신 페이지의 이름.
말이 DB지 실제로 (보다 정확히는 공학 용어로) DB화는 하나도 되어 있지 않고,
전부 수작업으로 편집된 HTML 로 이루어져 있었음.

미래철도DB – http://frdb.new21.org

이걸 진정한 DB 로 만드는 거다. 아우; -_-

현재는 DB 테이블과 이를 운용하고 시험하는 기초 코드들이 완성 단계에 있음.


사용자 삽입 이미지
PHPMyAdmin 에서 본 현재 데이터베이스 구성 (frdb_base)


http://minsangk.com/frdb/write.php
입력, 수정 폼
 (어차피 테스트 자료니까 아무거나 막 입력하는건 환영-_- 하지만 삭제는 하지마)

* 더 할 일
 - 예외사항처리(자바스크립트)
 - 수정 모드시 attribute 필드 이하로 쿼리 받기
 - 입력 모드와 수정 모드 시 스타일/메세지 구분
 - openingTime, progress 테이블 입력 폼
 - linkingIDX 입력 폼 (이건 따로 페이지 만들어서)


http://minsangk.com/frdb/action.php
입력, 수정, 삭제 쿼리전송 (얘는 모드 지정 안하면 작동 안한다-.-)


* 더 할 일
 - openingTime, progress, linkingIDX 테이블/페이지 연계 쿼리전송
 - 체크박스 예외사항처리 (str_)


http://minsangk.com/frdb/list.php
테이블 레이아웃 목록
(수정/삭제 가능)


* 더 할 일
 - openingTime, progress, linkingIDX 테이블/페이지 연계
 - 체크박스 선택 필드 구분 출력
 - state 필드 내용별 신호등 img 출력
 - 관련 필드 span

그 외에도…

dbInfo.php
DB 접속 정보

myLib.php
내가 수시로 만들어대는 PHP 함수 라이브러리

js_frdb.js
역시 나 필요할 때마다 만들어대는 JS 함수 라이브러리

frdbProperty.php
각 필드 속성 (배열)

css_frdb.css
전체 페이지를 포괄하는 스타일시트 파일 (현재는 아무것도 없다)
엇, 그러고보니 연결도 안 해놨네; 내일 하자;



위에 ‘더 할 일’ 이라고 적어놓은건 정말 지금 당장 해야 될 일이고, 실제로는 이보다 할일이 훨씬 더 많다.
큰 틀로만 보아도, 후배가 해야 할 CSS 페이지 디자인, 플래시 노선 뷰어
후배와 같이 하는 조원들이 해야 할 DB 입력 등등 어쨌든 한 학기를 올인할만한 가치가 있는-_- 규모의 프로젝트.

현재시각 AM 05:00
겨우 이 정도 코딩하면서 핀 담배가 한갑반이고, 마신 물이 4병.
나한테 프로그래밍의 재능은 없는 거 같다 -_-
(이런, 무슨 새벽 5시에 자학이냐)

그래도 재미를 느끼고 미칠 수 있다.
어쨌든 난 코드를 두드릴 때 가장 멋진 녀석이 되는 거다.

하지만, 그렇다고 해도 내일부턴 5시까지 두드리진 말자 -_-

종종 올라올 포스트들로 진행상황 보고하겠음 -.-
같이 기대를 가지고 지켜봐주시오 -.-