초간단 방명록 시리즈~!-_-
예전에 포스팅한 Zend Amf사용후기-
http://mudchobo.tomeii.com/tt/398Zend Amf가 이번에 출시된 Flash Builder4 Beta에서 기능으로 포함되어있습니다. 사용하기도 더 편해졌구요. 설정 같은 것은 전혀 안해줘도 Flash Builder4가 알아서 다하네요.
우선 Flash Builder4 Beta를 설치해야합니다.(adobe.com 회원가입 후 받을 수 있음!)
New Flex Project -> Project Name은 FlexGuestBook, Application type은 Web, Server technology는 PHP!
Next하면 서버 셋팅을 해야하는데요. 우선 Apache와 Mysql깔려있다는 가정하에 진행!-_-
Server location에서 Web root는 htdocs위치, Root URL은 http://localhost.
Output folder는 냅둬도 돼요^^ 바로 Finish!
htdocs/FlexGuestBook-debug생기면 성공!
아...디비부터 만들어야겠군요.
[code]DROP TABLE IF EXISTS `mudchobo`.`guestbook`;
CREATE TABLE `mudchobo`.`guestbook` (
`idx` int(10) unsigned NOT NULL AUTO_INCREMENT,
`author` varchar(45) NOT NULL,
`content` text NOT NULL,
`date` datetime NOT NULL,
PRIMARY KEY (`idx`)
);[/code]
그럼 PHP코딩해봅시다.
저같은 경우 NetBeans를 사용해서 하는데, 그게 정신건강에 좋아요-_- PHP는 NetBeans와 함께-_-
아까Web root에서 FlexGuestBook폴더를 만듭니다.
PhpClass파일을 하나 만듭니다.
GuestBookService.php
[code]<?php
class GuestBookService {
private $connection;
private function connect()
{
$this->connection = mysqli_connect("localhost", "root", "mudchobo", "mudchobo")
or die(mysqli_connect_error());
}
public function getList()
{
$this->connect();
$sql = "SELECT * FROM guestbook order by idx desc limit 0, 10";
$result = mysqli_query($this->connection, $sql)
or die("Query failed: " . mysqli_error($this->connection));
$rows = array();
while($row = mysqli_fetch_object($result))
{
$rows[] = $row;
}
mysqli_free_result($result);
mysqli_close($this->connection);
return $rows;
}
public function insert($author, $content)
{
$this->connect();
$sql = "INSERT INTO guestbook (idx, author, content, date) VALUES (null, '" .
$author . "', '" . $content . "', now())";
$result = mysqli_query($this->connection, $sql)
or die("Query failed: " . mysqli_error($this->connection));
mysqli_close($this->connection);
}
}
?>[/code]
클래스에 초간단 insert함수와 getList()함수가 있어요. 여기서 잠깐! NetBeans6.7의 새로운 기능-_-
쿼리문의 코드힌트가 가능해요!!! idx, author, content, date가 다보여요. guestbook 테이블명도 보이는군요.
Flash Builder설명하다 튀어나온 NetBeans...-_-
뭐어쨌든, 이제 진짜 FlashBuilder로 가는거임.
FlashBuilder에서 하단에 Data/Services가 있는데요. Connect Data/Service를 클릭하면 PHP가 있는데, 클릭하고, ServiceName은 GuestBookService로 하고, Php Location은 아까 작성한 GuestBookService.php를 선택합니다.
이 과정에서 Zend Amf가 설치가 안되어있으면 설치할꺼냐고 물어봅니다. 설치해야합니다^^
설치할 때 htdocs/ZendFramework폴더에 자동으로 설치됩니다.
Finish! 그려면 services.guestbookservice패키지에 뭔가 생겼을 겁니다.
그럼 getList와 insert가 보이는데요. 리턴타입을 설정해야해서 getList에 오른쪽버튼 누르면, Configure Return Type이 있는데, Create a new custom data type에서 GuestBook을 입력하고, Finish를 하면 모든 타입이 String으로 된 Bean같은 것을 만듭니다-_-(Bean마다 타입은 지정이 안되는데, 왜그런지 모르겠음 ㅠ)
insert는 기존에 있는 타입에서 void로 고르고!^^
그럼 이제 진짜 Flex로 와서 Design모드로 바꾸고, DataGrid를 넣어봅시다.
왜 한글로 나오지...한글화가 되다 말았네-_-
데이터그리드에 대고 오른쪽 버튼을 누르면 Bind To Data라는 메뉴가 생겼습니다. 누르면 아래와 같은 메뉴가 나옵니다.
OK누르면 자동으로 코드도 입력해주네요.
예전에는 Php로 Service랑 설정파일 작성하고 그랬는데, 그럴필요가 없어요. 알아서 다 만들어주거든요.
Insert하고 getList하는 것도 다 추가하면 아래와 같은 코드를 완성할 수 있어요.
[code]<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:guestbookservice="services.guestbookservice.*">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getListResult.token = guestBookService.getList();
}
protected function btnWrite_clickHandler(event:MouseEvent):void
{
if (inputAuthor.text.length < 1)
{
Alert.show("글쓴이를 입력하세요");
return;
}
if (taContent.text.length < 1)
{
Alert.show("내용을 입력하세요");
return;
}
guestBookService.insert(inputAuthor.text, taContent.text);
inputAuthor.text = "";
taContent.text = "";
getListResult.token = guestBookService.getList();
}
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getListResult"/>
<guestbookservice:GuestBookService id="guestBookService" destination="GuestBookService" endpoint="http://localhost/PhpFlexGuestBook/gateway.php" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="GuestBookService"/>
</fx:Declarations>
<mx:DataGrid x="72" y="21" width="489" height="307" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getListResult.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="content" dataField="content" showDataTips="true" dataTipField="content"/>
<mx:DataGridColumn headerText="author" dataField="author" showDataTips="true" dataTipField="author"/>
<mx:DataGridColumn headerText="idx" dataField="idx"/>
<mx:DataGridColumn headerText="date" dataField="date"/>
</mx:columns>
</mx:DataGrid>
<mx:Label x="70" y="370" text="내용 :"/>
<s:TextArea id="taContent" x="111" y="369" width="447"/>
<s:Button id="btnWrite" x="279" y="524" label="글쓰기" click="btnWrite_clickHandler(event)"/>
<mx:Label x="59" y="344" text="글쓴이 :"/>
<s:TextInput id="inputAuthor" x="112" y="343"/>
</s:Application>[/code]
위에 부분 댓글인줄 알고 낚이는 사람 있겠다-_-
참고자료 :
http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-a-php-class-using-flash-builder-4/
그리고, flashVars를 이용해서 해야지 플래시가 캐시가 된다고 하네요.
