앞 강좌에서 제가 말하길 이번시간에 최근 게시물을 플래시로 뽑아 뿌려주는걸 강의할 생각이였는데, 그 보다더 더 좋은 발상이 떠 올라 순서를 바꾸게 되었네요. 최근게시물 뽑아오는건 이번강의 주제만 잘 마스터 하신다면 제가 따로 설명하지 않아도 나름대로의 생각으로 최근게시물 정도는 쉽게 플래시와 연동시켜 뿌려줄수 있을거라 생각합니다.



제로보드와 플래시가 연동된 샘플게시판 보기 글과 이미지를 업로드후  테스트해보세요.



이번에 배워볼것은....
제로보드 리스트가 보여지는 부분에서 해당 제목(아이콘이나 기타링크로 따로 둘수도 있음) 클릭시 지금까지 늘 그래왔던것 처럼 일반 제로보드의 view.php 페이지를 열어 HTML형식으로 내용을 보여주는것이 아니라, 해당내용은 물론 첨부된 이미지 파일까지도 임의로 제작된 플래시에서 보여주는 방식입니다.
이 강의만 잘 이해하고 제로보드와의 연동관계만 잘 마스터 하신다면 제로보드를 가지고, 자기만의 아주 독창적인 형식의 게시판을 표현할수 있을거라고 감히 장담할수 있습니다.
그 활용범위는 제로보드와 연동된 갤러리 게시판, 시나 좋은 글을 주제로 한 게시판, 개인 사진앨범, 편지, 방문자가 제로보드에서 작성한 게시물을 원하는 사람에게 플래시 메일로 전송하기.......... 기타등등... 과 같이 아주 무궁무진하겠더군요.
우선 이번시간에는 어떤식으로 제로보드의 DB에서 원하는 데이터를 가져다가 또 어떤식으로 플래시파일로 전달하여 읽어줄껀지에대한(첫 강의 참조) 그 원리에 대하여 간단한 실전 예제를 통하여 알아보도록 하겠습니다.


1. 먼저 상단의 첨부파일(sturdy_exercise.zip (309.9 KB))실전예제를 다운받아 압축을 풀어줍니다.


2. 압축을 풀어보면  PHP문서 3개, FLA파일 2개가 있는데 PHP문서는 제일먼저 게시판리스트에서 게시물클릭시 플래시로 내용을 뿌려주고자 하는 게시판 스킨이 있는 폴더에 몽땅 넣어준뒤, 에디터 프로그램(저는 에디터프로그램이용하였기에 강의 진행은 에디터프로그램 위주로 설명하겠습니다. ^^;)이나 메모장으로 열어주고, FLA파일은 자신의 플래시 프로그램 버젼(MX나 MX2004)에 맞는 파일 하나 선택하여 열어줍니다.
※ PHP 파일을 먼저 올린후 작업하는 이유는 웹상에서 실시간 편집, 수정, 저장이 가능함으로(에디터플러스나 기타 에디터 프로그램) 오류나 문제점을 최대한 빨리 찾아 수정이 가능하여 그렇습니다. 따라서, 메모장을 이용하여 배우실분들은 해당파일 수정후 업로드하여도 상관없습니다.


3. 이제 제일먼저 PHP 파일중 "db_conn.php"파일에보면 아래 그림처럼
$db_hosting = "localhost";
$db_id = "아이디입력";
$db_pw = "패스워드입력";
$db_name = "DB NAME입력";
에 자신의 디비 정보를 각각 입력하고 파일을 저장(업로드) 하여줍니다.



4. db_conn.php을 수정하였으면, "flash_view_data.php"파일을 열어보세요. 그곳에는 아래처럼 크게 두 분류의 구문들로 구분이 되는데 먼저 노란 배경의 구문은, 자신의 해당 게시물의 DB에서 해당 정보 (이번, 실전예제에서는 제목, 내용, 이름, 글쓴날짜를 뽑아 뿌려줄것임.)를 뽑아오는 과정이고, 두번째로 파란 배경의 구문들은 디비에서 뽑아온 데이타를 플래시로 보내주기위하여 함수를 생성하여 뿌려주는 과정입니다. 앞선 첫번째 강의를 잘 이해하신 분들은 '아~ 이거구나'하실거에요. 그게 아니면 앞선 강좌의 완성예제중 TXT파일을 열어서 비교해 보시면 디비에서 데이타를 가져오는 과정만 추가됐을뿐 나머지는 똑 같다라는걸 알 수 있을겁니다.



5. 그럼 이제 4번 과정(flash_view_data.php)에서 어떤 식으로 데이타를 가져와 또 어떤식으로 뿌려지는지 확인해 보도록 하겠습니다.
자신의 제로보드 "skin폴더"에서 "list_main.php"파일을 열어줍니다.
list_main.php 문서의 최상단 <? 와  ?>사이에 아래 그림처럼
$go_view= "{ a Href="javascript:void(window.open('$dir/flash_view_data.php?id=$id&no=$data[no]','','width=490,height=630,scrollbars=no,toolbars=no'))"}";
※ { 와 } 는 실제로 < 와 >입니다.
을 추가시켜줍니다. 그리고, 중간쯤에보면(스킨마다 조금씩 위치가 다름) <?=$subject?>을 찾아서 그 뒤에 <?=$go_view?>[테스트]을 추가시켜 줍니다.
※ Key Point:제로보드를 사용하고 계신분들 대부분은 아시겠지만.... 상단의 $dir/flash_view_data.php?id=$id&no=$data[no] 를 잘보시면 링크(함수)의 값이 고정적이지 않고 상대적다는걸 알수있는데, 그 이유는 해당 게시물마다 디비에 저장된 테이블 no가 다르기 때문입니다. 쉽게말해, 게시물의 리스트에서 어떤 게시물을 클릭하였냐에 따라 자연적으로 view.php 페이지에서는 list페이지에서 넘어온 값을 디비로 보내어, 다시 디비에서는 해당 테이블 no에 해당하는 정보를 view.php페이지에 보내어 보여주는 거죠. 플래시에서도 역시 이러한 원리들을 이용하는 거죠. 쉽게설명할려 했는데 어렵나요? ^^;



6. 이제 해당 게시판의 LIST(전체목록) 페이지로 가보면 각 게시물의 제목 옆에 [테스트]가 달려 있는 것이 보일겁니다. 그중 아무거나 하나 클릭해보세요.



7. 그림처럼 해당 게시물에 해당하는 내용들이 좌라락~ 보이시나요?
이제 설명 안드려도 아시겠죠? 왜 앞선 강의에서 그러한 예제를 배웠었는지....^^
다시 설명드리자면 이번시간에 우리가 디비에서 뽑아오고자하는 글의 제목은 &title= 로 지정하였고, 글의 내용은 &memo= , 이름은 &name= , 글쓴날짜는 &date= 로 각각 지정되어있다는걸 알 수 있습니다.



8. 내용들이 잘 보여지는것을 확인하셨으면 이제다시, 에디터 프로그램(메모장)으로 가서 flash_view.php 파일을 열어서, 쫘악~ 한번 훑어 보세요. 그중 가장 중점적으로 보셔야 할 부분이 두곳있는데, 첫번째 $url = "id=$id%26no=$data[no]"; 은 5번 과정에서 장대하게 설명드렸듯 해당 게시물의 리스트에서 넘겨온(유저가 해당 게시물중 하나를 클릭하였을때 전달된 값) 고정적인링크값이아닌 유동적인 링크 값을 지정한 부분이고 아래의  embed 사이 src="sturdy.swf?board_data= <?=$url?>" 에 지정된것은 위에서 지정된 그 값을 다시 board_data= 라는 값으로 플래시 파일로 전달하기위하여 지정된 것입니다.
※Key Point: $url = "id=$id%26no=$data[no]"; 를 잘 보시면 아시겠지만 원래 HTML상에서는 id=$id&no=$data[no]와 같이 중간에 %26이아닌 &를 써야되는게 정상적이고 그래야 또 그 값이 정상적으로 전달됩니다. 하지만 플래시에서는 또 다릅니다. &가 붙어 버리면 뭐든지 독립된 또 하나의 함수로 인식하여 &가 붙은 앞까지만 보여지게 되는 것이죠. 그래서 &라는 값을 함수로 인식하지 못하도록, &라는 값을 escape 언어로 바꾸어 플래시로 보내어 주는것이죠.
&이왜에도 조금후에 테스트 해보면 아시겠지만 "<" 라던가 ">" 와같은 문자가 턱 하니 나와버리면 그 뒤의 내용들을 플래시에서 전달 받지 못하게 되버립니다. 이러한 문제점을 해결하기 위해선 일일이 그 특수 문자들을 escape로 바꾸어 보내어 주던지, 플래시에서, 액션 스크립트를 써서, 몇몇 특수 문자들을 불러올때 일괄 적으로 바꾸어 다시 전달하도록 하는 방법이있습니다.
각 문자들의 escape값을 알려면 플래시에서 새로운 문서를 하나 열고
액션창에 아래와 같이 입력후(& escape언어를 알고자하는 문자 입력) 미리보기(Ctrl+Enter)하여 확인하시면 그 값을 알수 있습니다.
x = escape("&");
trace(x);



9. 이제 플래시에서 버젼에 맞는 fla 파일을 열고 액션 레이어 창으로 이동하여 액션창을 활성화 시켜줍니다. 플래시에서는 앞선 강의에서 모두 배운 내용이기에 간략한 설명위주로 넘어갈께요.^^;
액션중 _root.url="/제로보드 폴더명/skin/폴더명/" 에 flash_view.php가 업로드 되어있는 경로로 지정하여줍니다.
※Key Point: 여기서 또 중요한 꼭 알아두어야할 부분이 두가지 있는데, 하나는 flash_view_data.php?"+_root.board_data 부분입니다.
이것은 _root.board_data 를 자세히 보시면 아시겠지만, flash_view.php에 정의 되어있던걸 알수있나요? 그러니깐 이 부분이 왜 중요하냐면, flash_view.php문서에서 플래시로 넘겨온 board_data 라는 값을 다시 flash_view_data.php로 보내어 그 정보에 해당하는 데이타를  flash_view_data.php가 디비에서 가져와 다시 플래시에서는 문서화됀 즉, &title=,  &memo=.... 와 같은 형식으로 함수화된 값을 받아오겠끔 하는 것이죠. 그래도 이해 안됄라나....ㅡㅡㅋ

그리고 두번째 중요한 부분은 cache_random="+Math.random()*9999 라는 부분입니다.
일반 웹 문서에서 읽혀진 Html에 포함된 모든 파일들 (이미지나 플래시 파일, 스트리밍 파일을 제외한 미디어 파일등)을 일정시간동안 인터넷 임시 폴더에 저장시켜두었다가 그 시간안에 다시 그 웹 페이지에 접속하면 다시, 웹 서버에서 정보를 가져오는것이 아니라 자신의 컴퓨터 C: 드라이버에 있는 인터넷 임시 폴더에서 보여주는 것이죠. 이것이 무어가 문제냐면, 디자이너라면 누구나 경험 하셨을 겁니다. 분명 플래시 파일을 수정후 웹 서버에 덮어쓰기 하였는데도, 새로고침해보면 수정 전의 플래시 파일이 보여지는 것을요. 그래서 일반적인 주소뒤에 &붙어 &cache_random="+Math.random()*9999 와 같이 0~9999 까지의 가상의 웹 문서를 만들어 주는거죠. 이렇게 하면 게시물의 정보가 수정되어 저장되었는데도, 임시폴더에서 다시 수정전 문서를 읽어올 확률은 없다는 거죠.
또, 어떤 분들의 질문에 대비해서 플래시에서는 경로와 같은곳에 &대신 %26와 같이 escape언어로 바꾸어야 되는것 아니냐는 분들도 계실지 모르겠는데, 외부에서 가져오는것이아닌 플래시파일내에서 정의될때에는 상관 없답니다.^^;



10. 이제 각각의 텍스트필드에 앞선강좌에서 설명 드렸듯 아래 각각에 해당하는 그림들을 참조하여, 텍스트필드에 해당하는 Instance Name과 Variable를 입력하여 줍니다.
날짜의 텍스트필드 값을 입력합니다.



11. 글의 제목에 해당하는 텍스트필드 값을 입력합니다.



12. 글쓴 날짜에 해당하는 텍스트필드 값을 입력합니다.



13. 글의 내용에 해당하는 텍스트필드 값을 입력후 SWF파일의 자동생성을 위하여 미리보기(Ctrl+Enter)후 저장하고 만들어진 swf파일의 파일명을 "Flash_View_01.swf"이라고 지정하고,  PHP파일 3개가 있는 같은 skin폴더에 업로드 시켜줍니다.



14. 이제 리스트 페이지에서 글의 제목 클릭시 플래시 창을 열어주기 위하여, 에디터 프로그램에서
자신의 제로보드 "skin폴더"에서 "list_main.php"파일로 이동하거나 다시 열어줍니다. 5.번 과정에서 상단에 입력하였던
$go_view= "{ a Href="javascript:void(window.open('$dir/flash_view_data.php?id=$id&no=$data[no]','','width=490,height=630,scrollbars=no,toolbars=no'))"}";
에서 flash_view_data.php을 flash_view.php로 지정합니다.
$go_view= "{ a Href="javascript:void(window.open('$dir/flash_view.php?id=$id&no=$data[no]','','width=490,height=630,scrollbars=no,toolbars=no'))"}";
요렇게요.
※ { 와 } 는 실제로 < 와 >입니다.




15. 이제 제로보드와 플래시를 연동시켜 게시물의 리스트에서 제목 클릭시 플래시로 해당 정보를 보여주는 과정이 끝났습니다. 해당게시물의 리스트로 이동하여 제목옆 [테스트]를 클릭해여 정상적으로 작동하는지 확이해 보시길 바랍니다.




지금까지 다소 복잡할 수도, 지루할수도 있는 강좌 따라 하시느라고 고생들 하셨구요.
다음시간에는 제가 샘플로 만든 게시판처럼 첨부화된 이미지를 플래시화 시켜 자동으로 뿌려주는 방법과, 리스트란에서 방문자에게 선택권을주어, 각각 다른테마로 제작된 여러가지 플래시VIEW파일을 이용하여 보여주는방법, 생성된 플래시(제목, 내용, 글쓴이, 첨부이미지포함)를 원하는 사람에게 메일로 발송하고 기타.... 플래시 VIEW페이지에서 연출해낼수 있는 여러가지 방법들에 대하여 제 임의대로 틈틈히 또 강의해 드리도록 하겠습니다.
이번이 제로보드와 플래시 연동의 두번째 강의이긴하지만,  반응이 제 기대만큼 크지는 않네요.^^;
기대가 너무 컷나.....ㅠ.ㅠ
그래도 제 강의를 보고 열심히 내공을 쌓으시는 분들이 점점 늘어날꺼라는 소박한 기대를 가지고 꾸준히 끊임없이 알려드리도록 하겠습니다.