http://mudchobo.tomeii.com/tt/318

새로운 버전에서 방식이 바뀌었습니다.

여기위에것을 보고 하세요 ^^

우연히 지돌스타님 블로그를 구독하다가 좋은 정보가 있어서 보고 있었습니다.
Flex에서 db와 연동하는 좋은 드라이버가 있다는 정보입니다.
http://blog.jidolstar.com/312


그래서 제가 삽질해봤습니다-_-;

보통 DB랑 연동하려면 JAVA, PHP, ASP 등 다른 언어와 연동이 필요합니다.
근데 이 asSQL이라는 것을 이용하면 그냥 Flex단에서 DB와 연결해줍니다.
우선 asSQL을 받아봅시다.
http://code.google.com/p/assql/
여기서 오른쪽에 보면 2.0.1버전용과 3.0.0버전용이 있습니다.
저는 Flex3으로 할 것이기에 3.0.0을 받아보도록 하겠습니다. assql_Beta2_Flex3.0.0.swc
DB에는 이런 테이블과 이런 데이터가 있다고 합시다.

[code]
CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `description` varchar(255) default NULL,
  `price` decimal(15,2) default NULL,
  PRIMARY KEY  (`id`),
  KEY `products_description` (`description`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr;

INSERT INTO `products` (`id`, `description`, `price`) VALUES
(1, 'Lamp', 469.80),
(2, 'Table', 3502.62),
(3, 'Chair', 1061.12);
[/code]
그럼 플렉스 빌더를 실행합니다.
File -> New -> Flex Project 선택합니다. Project name은 FlexMysqlTest 라고 합시다.
Web application선택하고, Application server type은 None으로 하고 Finish 선택!

libs폴더가 있는데요. 아까 받은 assql_Beta2_Flex3.0.0.swc 파일을 libs폴더에 복사합니다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="init();" width="400" height="400">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import com.maclema.mysql.events.MySqlErrorEvent;
   import com.maclema.mysql.events.MySqlEvent;
   import mx.collections.ArrayCollection;
   import com.maclema.mysql.ResultSet;
   import com.maclema.mysql.Statement;
   import com.maclema.mysql.Connection;
 
   [Bindable]  
   private var ac:ArrayCollection;
   private var con:Connection;
   private var st:Statement;
     
   private function init():void {
    con = new Connection("DB주소", 3306,
      "DB아이디", "DB비밀번호", "DB이름");
    con.addEventListener(Event.CONNECT, onConnect);
    con.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);
    con.connect();
   }
   
   private function onConnect(e:Event):void {
        st = con.createStatement();
        st.addEventListener(MySqlEvent.RESULT, onResult);
        st.addEventListener(MySqlEvent.RESPONSE, onResponse);
        st.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);
 
    st.executeQuery("SELECT id, description, price FROM products");
   }
   
   private function onResult(event:MySqlEvent):void {
    //FOR SELECT
    var resultset:ResultSet = event.resultSet;
    ac = resultset.getRows();
   }
   
   private function onResponse(event:MySqlEvent):void {
    //FOR INSERT, UPDATE, etc.
   }
   
   private function onError(event:MySqlErrorEvent):void {
    Alert.show(event.text);
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{ac}"/>
 
</mx:Application>
[/code]
소켓을 이용해서 하는거라 connect를 호출하고 연결한 뒤 소켓으로 막 보내는 것 같아요.
어쨌든 저렇게 하면 되네요. 참 쉽죠?(밥로스 버전-_-)

INSERT, UPDATE 와 SELECT는 이벤트가 서로 틀립니다.
INSERT,UPDATE는 RESPONSE고, SELECT는 RESULT네요 ^^

사용자 삽입 이미지


 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 지돌스타 2008.04.03 00:06  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎㅎ 잘봤습니다.
    좋은 글 감사해요~ ^^

  2. BlogIcon 검쉰 2008.04.03 09:47  댓글주소  수정/삭제  댓글쓰기

    phpmyadmin 같은 mysql 관리툴 하나 만들어주세요! ㅋ

  3. 펄렁거스 2008.04.04 17:42  댓글주소  수정/삭제  댓글쓰기

    좋은 예제 감사합니다. 한동안 이것 저것 해봤는데 잘 안됬었는데
    한방에 되는군요...

    그런데.. 한글이 깨지는데 이건 어떻게 처리 해야 하나요?

    • 머드초보 2008.04.07 08:16  댓글주소  수정/삭제

      보면 flex는 무조건 utf8로 보내게 되어있습니다.
      만약 mysql서버가 euc-kr로 되어있다면 euc-kr로 보내야겠죠.
      보면 저 드라이버는 utf8로 보내게 되어있습니다.
      그래서 저걸 euc-kr로 보내려면 driver소스를 수정해야합니다.
      Connection클래스에서
      //packet.writeUTFBytes(data);
      packet.writeMultiByte(data, "euc-kr";);
      저렇게 하면 euc-kr로 보내게 됩니다.

      그리고 ResultSet에서
      //return data.readUTFBytes(data.bytesAvailable);
      return data.readMultiByte(data.bytesAvailable, "euc-kr";);
      데이터를 받을 때 보면 UTF로 받는데 euc-kr로 받아주면됩니다.

      근데 해보니까 친구서버에서는 잘 되는데 제 로컬에 있는 서버에서는 안되더군요.
      그래서
      st.executeQuery("SET NAMES 'utf8'";);
      저렇게 강제적으로 utf8로 만들고 날리면-_-;
      Response로 받는데 거기서 다시 select를 해보시면 됩니다-_-;

      결론은..아직 불안전한 드라이버같습니다 ㅠ

  4. 펄렁거스 2008.04.07 12:05  댓글주소  수정/삭제  댓글쓰기

    아 감사합니다. ㅠㅠ
    이런저런 연구를 해봐야 겠네요...

    알려주신데로 st.executeQuery("SET NAMES 'utf8'";);
    로 해결 보았습니다..

    감사해요 ^^

    • 머드초보 2008.04.07 12:38  댓글주소  수정/삭제

      근데 친구서버는 SET NAMES안해도 되던데 이상하네-_-;
      아 그리고 친구말로는 DB접속정보가 SWF에 포함되기 때문에
      보안상 위험하다고 합니다.
      그래서 접속정보만 따로 빼서 보안처리를 해야할 듯 합니다.
      방문해주셔서 감사해요 ^^

  5. BlogIcon 쉭스 2008.04.08 18:54  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사요~
    콕콕 찝은.. 이런 좋은 정보가.. 역시...ㅋㅋ
    요새 여기 자주 들르네용~ 히히~

    - 한글닉네임의 압박이..;;ㅎ

    • 머드초보 2008.04.08 23:05  댓글주소  수정/삭제

      정보가 도움이 되셨다니 다행이네요 ^^
      방문해주셔서 감사해요 ^^

  6. 2008.04.19 10:35  댓글주소  수정/삭제  댓글쓰기

    혹시 crud예제는 없나요?

    • 머드초보 2008.04.21 08:01  댓글주소  수정/삭제

      다 만들면 되죠 ^^
      st.addEventListener(MySqlEvent.RESPONSE, onResponse);
      이렇게 이벤트리스너를 추가하면, delte나 update, insert하면 저 이벤트함수로 들어가게 돼요. ^^

  7. 찌노 2008.05.09 09:46  댓글주소  수정/삭제  댓글쓰기

    크~ 지돌스타님 블로그 타고 왔어욤..; 이래 친절하게 예제를 만들어서 오픈해주시다니..
    감사합니당 ~ ^^ 많은 도움이 되었습니닷..!

  8. 만성피로 2008.05.13 11:29  댓글주소  수정/삭제  댓글쓰기

    머드초보님 안녕하세요~
    올려주신 자료 잘보고 해보고싶은 욕망에 DB에 테이블 생성하고 컬럼 추가한뒤에
    Flex에서 똑같이 프로젝트 생성한뒤에 실행을 시켜 보았습니다.
    그런데 "SQL Error #0:Error #2031" 에러가 뜨네용
    mxml파일에서 쿼리를 Select해서 ID와 PASS 와 이름 불러오는것은알겠는데
    어떤 데이타베이스를 쓰는지 가령
    mysql데이타베이스인지 Flex라는 데이타베이스를 생성했을때 Flex데이타베이스를 어떻게사용하는지
    알려주시기 바랍니다~~
    코딩에서 보면 어디에도 어떤 데이타베이스를 사용하는지를 찾을수가 없네요...개초보에 설움..흑흑

    부탁드리겠습니다~~

    • 머드초보 2008.05.14 08:24  댓글주소  수정/삭제

      con = new Connection("DB주소", 3306,
      "DB아이디", "DB비밀번호", "DB이름";);
      커넥션을 만들 때 여기다가 입력하면 됩니다.
      DB주소는 jdbc:막이런거 ^^
      db아이디는 아이디고, 비밀번호는 비밀번호고,
      db이름은 db이름쓰시면 됩니다 ^^

  9. 만성피로 2008.05.15 10:13  댓글주소  수정/삭제  댓글쓰기

    아...머드초보님 답변감사합니다....
    그런데 제가
    con = new Connection("jdbc:mysql//localhost:3306/flex",3306,
    "admin","jpaWkd", "flex";);
    admin이 디비아이디이고 jpaWkd가 DB패스워드 flex가 DB이름입니다.
    그런데 에러가 아직두 나네용..흑흑
    jdbc:mysql//localhost:3306/flex가 의심스러운데 흑흑..
    질문드리면서도 X팔려서 흑흑
    답변좀 해주시기 바래요 흑흑

  10. 만성피로 2008.05.15 10:16  댓글주소  수정/삭제  댓글쓰기

    API 살펴보니...이런식인데
    Connection () constructor

    public function Connection(host:String, port:int, username:String, password:String = null, database:String = null)
    흑흑...죽고싶퍼 캬악~

  11. 만성피로 2008.05.15 10:39  댓글주소  수정/삭제  댓글쓰기

    으흐흐...미쳐가는중 ㅋㅋ
    Google의 example가 있더라고용
    con = new Connection("localhost", 3306, "root", "password", "database name";);
    그래서 똑같이 저도 localhost로 불렀는데 데이타가 불러와지질않네요...흠흠...
    이건 머 에러메세지가 뜨질않으니 손을 어디서 대야하는지 몰겠네용..
    1.DB생성여부
    2.DB쿼리
    일단 이두개는 확실한데 말이죠 ㅎㅎ

    • 머드초보 2008.05.16 08:25  댓글주소  수정/삭제

      음 왜그러지-_-;
      localhost말고 ip로 한번 넣어보세요 ^^
      저도 왜그런지 모르겠네요 ㅠㅠ

  12. 오리대장 2008.06.21 05:38  댓글주소  수정/삭제  댓글쓰기

    언뜻보면은 와 유용하겠다 생각들다가도 조금만 생각해보면...
    보안문제때문에 사실상 쓰지도못할거같네요 ㅜ.ㅜ'
    보안문제와 좀더체계적인 뭔가가 필요한데...

    • 머드초보 2008.06.22 20:28  댓글주소  수정/삭제

      아네 그렇죠 ^^ swf파일이 완벽하게 디컴파일이 되다보니-_-;
      게다가 소켓통신으로 하는것 같아서 보안상 참 안 좋은 것 같아요.
      DB연동은 JAVA와 함께-_-;

  13. BlogIcon atom 2008.08.18 04:30  댓글주소  수정/삭제  댓글쓰기

    안녕하세요... 어떻게 검색하다.. flex와 mysql이 연동되는 글을 찾았는데 들어 오게 되었네요...

    정말 좋은 자료 인것 같아요..

    그런데 제가 이번에 flex를 처음 해보는거라 잘몰라서요.

    위의 예제 처럼 실행이랑 DB가져 오는건 아주 잘되는것 같아요...

    하지만 DB에서 가져온 arraycollection에 들어 있는 내용을 어떻게 가져와 사용을 하는지 모르겠습니다..

    datagrid는 그냥 ar에 있는걸 그대로 dataprovider에 넣어 주니 바로 나오던데 다른 list나 label이나 이런곳에 가져다 쓸려니 잘 안되더라구요..

    어떻게 하면 되는지 좋은 자료를 얻어 가는데 또 염치 없이 물어 보게 되네요..*^^*

    부탁드립니다.. 아~ 그리고 한글이 디비에 있는걸 가져오는게 위에 적혀 있는게 하는 건지 잘 이해가 가지 않네요..

    • 머드초보 2008.08.19 08:31  댓글주소  수정/삭제

      안녕하세요!
      ArrayCollection은 배열인데요. label에 사용하시려면 그냥 ac변수에서 해당 값을 접근할 수 있어요. getItem인가? 그런 메소드가 있는데 그걸로 해당 Object로 접근해서 원하는 값에 접근하면 돼죠. 그걸 이용해서 사용하시면 되구요.
      ArrayCollection에 관련된 API나 예제를 찾아보시면 금방 이해하실 수 있을 겁니다 ^^
      java에서 List같은 놈이죠.

  14. BlogIcon atom 2008.08.19 22:56  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~~! 우선 답변 감사합니다.

    저도 머드초보님이 이야기 하신데로 해보았습니다. 하지만 되지 않네요... 댓글 보기 전 글을 남길때 다 해보고 남긴거라서..

    <mx:Label x="31" y="301" width="285" height="47"
    text="{ac.getItemAt(0).toString()}"/>

    이렇게 하니 [object Object] 이렇게만 나오던데..ㅋㅋㅋ

    위의 예제에 맨끝에 출력에 label하나 붙여서 나타내었어요..

    어떻게 해야 할까요?ㅠㅠ 이걸로 이틀이란 시간을 보내니.. 힘드네요..

    • 머드초보 2008.08.19 23:09  댓글주소  수정/삭제

      getItemAt()메소드는 배열의 0번째의 Object를 가져오는 겁니다.
      Object를 toString()해버리면 당연히 그렇게 나옵니다.
      해당 Object에 대한 속성값을 나타내면 되죠.
      {ac.getItemAt(0).description} 이런식으로 사용하면 됩니다.
      저위의 예제를 따라하셨다면 description, id, price속성이 있을껍니다.
      디버깅해보시면 알 수 있습니다 ^^

  15. BlogIcon atom 2008.08.20 00:39  댓글주소  수정/삭제  댓글쓰기

    감사합니다.. 점을 찍었을때 나오지 않아서 되지 않는 줄 알았는데 되네요..

    C#에서는 점을 찍으면 나오는데.. flex는 처음 접해서 잘 몰랐습니다.

    정말 감사합니다.

    • 머드초보 2008.08.20 08:23  댓글주소  수정/삭제

      어떤값이 들어갈지 모르니 점찍으면 안나와요 ^^
      아 그리고, Flex단에서 db연동은 보안상 위협(?)을 느낄 수 있습니다-_-;
      DB는 JAVA나 서버단 언어에서 하도록 하는게 좋습니다 ^^

  16. 동그라미 2008.08.23 04:29  댓글주소  수정/삭제  댓글쓰기

    실행을 하면
    st.addEventListener(MySqlEvent.RESULT, onResult);
    st.addEventListener(MySqlEvent.RESPONSE, onResponse);
    st.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);

    에서 1061: 정의되지 않은 메서드 addEventListener을(를) 정적 유형 com.maclema.mysql:Statement의 참조를 통해 호출했습니다. 라고 하는데 무엇이 문제일까요...T_T

    • 머드초보 2008.08.25 08:31  댓글주소  수정/삭제

      음....이상하네요.
      혹시...그 assql swc파일은 넣으셨는지요?
      없다고 나오는 것보니 라이브러리가 없는 것 같은데요.
      도움이 되지 못해서 죄송해요 ㅠ

  17. keril 2008.09.02 21:46  댓글주소  수정/삭제  댓글쓰기

    저도 동그라미님이랑 같은 오류가납니다
    머드초보님께서 말씀하신 assql_Beta2_Flex3.0.0.swc 는 없구요
    대신 asSQL-Beta2.7.swc 을 받았는데 여기에는 addEventListener메소드가 없나봐요
    이걸 어케해야할지 ㅜㅜ

    • keril 2008.09.02 22:00  댓글주소  수정/삭제

      애궁 제가 문제제기하구 해결까지했네요
      해결이라긴뭐하지만 assql_Beta2_Flex3.0.0.swc 을 제대로 구해서 넣으니 되더군요
      버전다른 엄한걸받아서 피봤네요 ^^

      무슨이유인지는 모르지만 다운로드 목록에서 assql_Beta2_Flex3.0.0.swc
      이 없어진듯 합니다.

      여기저기 기웃거린 결과 렉스님의 블로그에 링크목록이 있더군요 주소 올립니다...
      http://blog.naver.com/rojinsong?Redirect=Log&logNo=50030139861
      불펌이에요 ^^;;

    • 머드초보 2008.09.02 23:23  댓글주소  수정/삭제

      아....뭔가 코딩방식이 바뀌었나보군요.
      새로운 버전이 나왔는데 그걸로 다시 예제를 작성해봐야겠습니다.
      감사해요 ^^

  18. keril 2008.09.02 23:56  댓글주소  수정/삭제  댓글쓰기

    거의 다된줄알구 좋아했는데 마지막에 뭔가 틀어졌네요 ㅎ

    run을하면 새창에서 SQL Error #0: Error #2031: 소켓 오류입니다. URL: jdbc:mysql://localhost/aa
    이라는 메세지가 나와요 ㅜㅜ
    mysql-connector 도 제대로 받아서 C:\Program Files\Java\jdk1.6.0_07\jre\lib\ext 경로로 잘 넣어줬는데 더이상 뭐가 잘못된건지 짐작도 가지않아요 ㅜㅜ

    도움 부탁드립니다

    • 머드초보 2008.09.03 08:45  댓글주소  수정/삭제

      그건 mysql설정문제 인 듯 싶습니다 ^^
      mysql은 포트를 1521을 사용하는데
      mysql://localhost:1521/aa 를 해보면 될 것 같기도하고-_-;
      암튼, 저 주소를 못찾는 것 같아요 ^^

    • 머드초보 2008.09.03 09:17  댓글주소  수정/삭제

      아그리고, 예제를 보니 코딩방식이 바뀐게 맞네요.
      Statement에 addListener를 하는게 아니라
      token을 만들어서 하는 듯 하네요.
      좀 더 봐야겠네요 ^^

    • keril 2008.09.03 15:08  댓글주소  수정/삭제

      3.0버전은 날려버리고 mysql설치부터 다시 삽질해봐야겠어요 ㅋ

      mysql://localhost:1521/aa 로 바꿔서 해봐도 역시 같은 메세지가 나옵니다 ^^

    • 머드초보 2008.09.03 18:59  댓글주소  수정/삭제

      아 mysql의 버전이 낮아서 일 수도 있겠네요.
      저는 테스트할 때 5.0에서 했습니다.
      그리고, 새로운 버전asSQL2.7Beta용으로 예제를 만들어봤습니다.
      참고해주세요 ^^
      mysql버전을 올리고 다시 해보세요 ^^

  19. 천천히가자 2010.03.12 09:48  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.. 머드초보님..
    글 잘보았습니다. 따라해서 실행까지 잘되었는데요..
    한가지 문제점이 있어서 질문 좀 드릴게요
    리눅스(CentOS)와 파이어폭스 환경에서는 db접속이 안되네요...
    con = new Connection("DB주소", 3306,
    "DB아이디", "DB비밀번호", "DB이름";);
    con.addEventListener(Event.CONNECT, onConnect); <== 요기에서 db연결을 성공적으로 하면
    onConnect라는 함수로 가야되느데.. onConnect함수로 넘어가지를 안습니다. db접속이 안되어서 그런거 같은데요..
    이상한것은 윈도우 환경의 익스플로러랑, 윈도우 환경의 파이어폭스에서는 db에 접속하여 정보를 잘 가지고 옵니다. 리눅스환경의 파이어폭스에서만 접속이 안되네요..
    혹시나 asSQL로 db에 바로 접속하여 가져오는 것이 리눅스에서는 안되는 것인가요??
    db는 mysql5 입니다.

    • 머드초보 2010.03.20 13:24  댓글주소  수정/삭제

      일단 flash에서 직접 소켓을 연결해서 mysql로 가져오기 때문에 mysql포트가 닫혀있으면 아마 가져올 수 없을겁니다.
      그 문제가 아니라면 잘 모르겠습니다 ㅠㅠ

  20. FLEX초보 2015.05.06 19:00  댓글주소  수정/삭제  댓글쓰기

    안녕하세요

    머드님 덕분에 많이배우고 있는데요~

    위와 같은 방식으로 하면 보안상에 문제가 많지요?

    XML방식으로 가져와서 FLEX 애플리케이션에서 display 해주는 방식은 없을까요?ㅠㅠ

    flex 어렵네여 ㅠㅠ