초간단 방명록 시리즈~!-_-

예전에 포스팅한 Zend Amf사용후기- http://mudchobo.tomeii.com/tt/398
Zend 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생기면 성공!

아...디비부터 만들어야겠군요.
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`)
);

그럼 PHP코딩해봅시다.
저같은 경우 NetBeans를 사용해서 하는데, 그게 정신건강에 좋아요-_- PHP는 NetBeans와 함께-_-
아까Web root에서 FlexGuestBook폴더를 만듭니다.
PhpClass파일을 하나 만듭니다.
GuestBookService.php
<?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);
}
}
?>

클래스에 초간단 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하는 것도 다 추가하면 아래와 같은 코드를 완성할 수 있어요.
<?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>

사용자 삽입 이미지
위에 부분 댓글인줄 알고 낚이는 사람 있겠다-_-

참고자료 : http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-a-php-class-using-flash-builder-4/
머드초보 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://mudchobo.tomeii.com/tt/rss/comment/424
  2. 플렉스시작 2009/07/06 11:54  편집/삭제  댓글 작성  댓글 주소

    플렉스로 오라클을 연동할려고하는데...보통 보면 Mysql이랑 연동하는 예제뿐인데...
    오라클이랑 연동하는 예제 하나만 만들어주시면..안될까요?
    초보라서 응용이 잘안돼네요..ㅠㅠ

    • 머드초보 2009/07/13 14:57  편집/삭제  댓글 주소

      안녕하세요!
      정확히 말하면 플렉스와 Mysql이 연동된 것이 아니라 php와 mysql이 연동이 된 것 입니다.
      php에서 oracle을 사용하는 방법을 찾으시면 될 듯합니다^^
      저도 안해봐서 잘 모르겠네요 ㅠ
      구글에서 php oracle쳐보시면 뭔가 나올 겁니다 ㅠㅠ

  3. 자바초보 2009/07/06 11:54  편집/삭제  댓글 작성  댓글 주소

    플렉스로 오라클을 연동할려고하는데...보통 보면 Mysql이랑 연동하는 예제뿐인데...
    오라클이랑 연동하는 예제 하나만 만들어주시면..안될까요?
    초보라서 응용이 잘안돼네요..ㅠㅠ

  4. EHXM 2010/02/10 18:17  편집/삭제  댓글 작성  댓글 주소

    안녕하세요. 글 잘 읽어보았습니다.

    위 처럼 작업을하고 이제 서버에 올려서 사용할때는
    BlazeDS 가 서버에 필요한 건 가요?
    아니면 Flash에서 구동이 되는 거라서 다른 서버 작업은 필요하지 않은 건가요?

    • 머드초보 2010/02/12 00:08  편집/삭제  댓글 주소

      안녕하세요~
      BlazeDS는 자바용이고, zenphp가 그 역할을 대신하는 것입니다.
      php가 서버단 언어입니다. php로 작업하시면 됩니다^^

[로그인][오픈아이디란?]
SpringFramework가 되는지 삽질하던 중 데모에 있는 샘플을 하나잡아서 convert를 시켰습니다-_-
놀랍게도 잘 되네요. 하는 도중 약간의 혈압이 상승했지만요-_-

우선 샘플주소입니다.
http://springguestbook.appspot.com

소스코드 주소입니다. trunk/SpringGuestBook입니다^^
http://my-svn.assembla.com/svn/mudchobosample

마치...그냥 앱엔진에서 제공하는 샘플이랑 같아보여서 사기를 치는 것 같지만, Model2방식의 예제입니다ㅠ

우선 하면서 가장 처음에 겪는 문제점입니다.
Your Web Application Project must be configured to use a JDK in order to use JSPs.

JSP를 쓰려면 jdk를 설정해야한다는 뜻인데요. 보통 JDK를 깔고, 이클립스를 실행하면 디폴트로 JRE가 잡혀있어요. 이걸 JDK로 추가해서 바꿔주시면 돼요.

이클립스에서 Window -> Preferences -> Java -> Installed JREs선택.
Add -> Standard VM -> JRE home에서 Directory선택해서 JDK주소를 찾으세요.
디폴트로 설치하셨다면 C:\Program Files\Java\jdk1.6.0_12 여기에 있을겁니다.
폴더만 선택하고, Finsh를 누르면 추가가 되었습니다. 체크박스를 jdk로 옮겨주세요. 그러면 저 위에 에러 안날꺼에요.

그다음으로 겪는 문제점은....-_- 앱엔진에서 지원안하는 클래스를 쓰는 곳이 있는 것 같아요.
spring mvc를 사용하려면 spring.jar하고 spring-webmvc.jar 두개만 있으면 되는데요. 이거 두개 lib폴더에 넣어놓고 서버에 디플로이 시키면
exception is java.lang.NoClassDefFoundError: javax/naming/NamingException
App engine로그를 볼 수 있는데, 거기서 로그를 보면 클래스를 찾을 수 없다고 나와요. spring-orm.jar에서 쓰는 것 같더라구요. 어차피 구글앱엔진은 jdo만 지원해서 jdo only라이브러리가 있습니다-_- 그걸로 바꿔주시면 돼요.
전 라이브러리복사할 때
spring-beans.jar, spring-context-support.jar, spring-context.jar, spring-core.jar, spring-jdbc.jar, spring-orm-jdo-only-2.5.6.jar, spring-test.jar, spring-tx.jar, spring-web.jar, spring-webmvc.jar를 복사했네요.
여기서 spring-orm-jdo-only-2.5.6.jar는 저도 어디서 받은거라.....-_-
그러고 디플로이하면 잘 됩니다.

또 한가지 문제점은 eclipse에서 제공하는 dynamic web project에서는 WEB-INF/lib에 library파일을 복사하면 자동으로 클래스를 코드힌트로 쓸 수 있는데, 이놈은 코드힌트를 할 수 없어요-_- 그래서 수동으로 추가를 해줘야해요.
프로젝트 이름에 Properties를 선택하고, Java Build Path에서 Add JARs에서 추가한 spring파일 등을 선택해서 추가해줘야 에러가 안나네요^^(이건 뭐 다른 방법이 있을 지도.....-_-저에게 최선의 방법이였다는 ㅠ)

또 JDO라는 걸 전혀 몰라서 조금 고생했는데, Hibernate같은 orm이더군요. 사실 아직도 잘 모르겠습니다. 좀 더 알아봐야할 것 같네요. orm하면 Hibernate랑 JPA밖에 없는 줄 알았는데, 뭐 디게 많네요ㅠ

또.....-_- localhost에서 Datastore테스트를 하면 war/WEB-INF/appengine-generated라는 폴더가 생겨요. 디비가 저장되는 것 같은데, 저게 있는 상태에서 디플로이하면 안돼요. 지우고 하면 됩니다.

또 이런저런 문제가 있었는데, 기억이 안나네요. 그래도 정말 대단한 것 같습니다. 대세는 클라우드-_-

참고자료
http://peterbacklund.blogspot.com/2009/04/running-spring-on-google-app-engine.html
http://groups.google.com/group/google-appengine-java/browse_thread/thread/f1a541fe52e172dd

머드초보 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://mudchobo.tomeii.com/tt/rss/comment/408
  2. 이학도 2009/05/22 10:24  편집/삭제  댓글 작성  댓글 주소

    좋은 자료 감사.^^

  3. 이학도 2009/05/22 12:07  편집/삭제  댓글 작성  댓글 주소

    svn repo는 www.assembla.com에서 돈주고 호스팅 받았어요?

    • 머드초보 2009/05/23 23:52  편집/삭제  댓글 주소

      저기assembla는 svn이랑 trac같은 개발환경을 제공하는데요.
      public공간으로 만들면 무료이고, private공간을 만들면 돈들어가요.
      다 오픈하면 무료에요 ^^

[로그인][오픈아이디란?]

간단하게 DB에 있는 방명록 정보를 가져오는 정도를 해보겠습니다.

개발환경 : NetBeans6.0 + JDK6u3 + NetBeans내장Tomcat6.0 + iBATIS 2.3.0.677 + MySQL(버전모름-_-) + Spring Framework 2.5

우선 NetBeans6.0이 있어야겠고, Plugin으로 SpringFramework Support를 설치해야합니다.
메뉴에서 Tools -> Plugins클릭하면 Available Plugins를 선택하면 Spring Framework Support가 있는데 체크해서 설치를 하도록 합시다.

그런다음 프로젝트를 생성해봅시다.
File -> New Project선택 후 Web -> Web Application을 선택하고 Server는 Tomcat밖에 사용할 줄 모르니 Tomcat을 선택합니다(GlassFish사용할 줄 아는사람은 고거 선택하고^^)Next를 클릭하고
Project Name은 SpringIbatisExample 이라고 해봅시다. Next를 하면
Framework를 선택하라고 나옵니다. Spring Framework 2.5를 선택하고 Finish를 클릭합시다.

lib를 추가해야합니다. 따로 사용할 것은 iBATIS와 MySQL Connector입니다.
iBATIS는 www.ibatis.com 에서 받으면 되구요. MySQL Connector는 NetBeans에 내장되어있습니다.
프로젝트이름에 대고 오른쪽버튼 클릭 -> Properties -> Libraries -> Add Library 선택 후
MySQL JDBC Driver를 선택해서 추가합니다.
iBATIS는 아무 폴더에 설치 후에 Add JAR로 추가합시다.
넷빈즈에 Manage Libraries에 추가해서 사용하고 싶을 때 추가하게 할 수도 있습니다.

DB URL과 ID, PW를 설정해봅시다.
WEB-INF폴더 아래 jdbc.properties파일이 있는데 보면 어떤걸 설정해야할지 알껍니다.
driverClassName에는 com.mysql.jdbc.Driver를 넣고, url, id, pw를 넣으면 됩니다.

※DB구조입니다.

CREATE TABLE `guestbook` (
`no` int(11) NOT NULL auto_increment,
`password` varchar(20) default NULL,
`name` varchar(250) default NULL,
`subject` varchar(2000) default NULL,
`content` text,
`ip` varchar(15) default NULL,
`datetime` datetime default NULL,
PRIMARY KEY (`no`)
)


간단하게 F6을 눌러서 실행되는지 확인해봅시다.
this is the /WEB-INF/jsp/index.jsp 라고 뜨면 된 것입니다.

이제 설정을 해봅시다.
Configuration Files 밑에 applicationContext.xml파일을 열어봅시다.

applicationContext.xml
<!-- ADD PERSISTENCE SUPPORT HERE (jpa, hibernate, etc) --> 요고 밑에다가 작성해봅시다.
<bean id="sqlMapClient" 
class="org.springframework.orm.ibatis.SqlMapClientFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="configLocation" value="/WEB-INF/SqlMapConfig.xml"/>
</bean>

<bean id="guestbookDao" class="com.phpschool.guestbook.db.GuestbookDaoImpl">
<property name="sqlMapClient" ref="sqlMapClient" />
</bean>

<bean name="guestbookManager"
class="com.phpschool.guestbook.service.GuestbookManagerImpl">
<property name="guestbookDao" ref="guestbookDao" />
</bean>

iBATIS에서 sqlMap을 생성하는 부분입니다. 오...3줄이면 끝나는군요.
아래는 Dao를 하나 선언해줍니다. 이 Dao는 sqlMapClient를 받습니다. 그래서 이 sqlMapClient를 통해
sql문에 접근할 수 있습니다. 그리고 그 아래에 있는 bean은 Manager입니다. Dao를 이용해서 service로직을 구현하는 부분입니다.

그러면 저기 sqlMapClient property에 있는 configLocation에 SqlMapConfig.xml파일을 만들어봅시다.
Web Pages -> WEB-INF에 대고 New -> Other하고 XML Document를 선택하고 SqlMapConfig.xml파일을 생성한 뒤 다음과 같이 씁시다.

SqlMapConfig.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE sqlMapConfig
PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"
"http://ibatis.apache.org/dtd/sql-map-config-2.dtd">

<sqlMapConfig>
<typeAlias alias="GuestbookVO" type="com.phpschool.guestbook.vo.GuestbookVO"/>

<sqlMap resource="com/phpschool/guestbook/db/MySQLGuestbook.xml" />
</sqlMapConfig>

다음과 같이 sqlMapConfig를 생성합니다. alias는 아래 resource에서 사용할 클래스 이름의 별명을 사용하게 하는 것입니다. 예를 들어 ResultClass 등에서 패키지명까지 다 입력해주어야하는데 alias를 지정해주면 클래스명만 써도 됩니다.
그리고 아래는 resource, 즉 sql들을 모아둔 xml파일입니다.
우선 제끼고 ValueObject를 만들어봅시다.
Source Packages에 대고 New -> Java Package선택 후 Package Name을 com.phpschool.guestbook.vo 라고 줘서 vo라는 패키지를 만듭시다.
그리고 New -> Java Class선택 후 Class Name을 GuestbookVo라고 합시다.

GuestbookVo.java
private int no;
private String password;
private String name;
private String subject;
private String content;
private String ip;
private Timestamp datetime;

위 까지만 타이핑하고, Alt + Ins 하면 Getter And Setter가 나오는데 선택하고 전체를 다 선택하면 자동으로 setter와 getter가 만들어집니다.

아 힘들어-_-; 다음 이시간에-_-;

머드초보 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
« Prev : 1 : 2 : 3 : 4 : Next »