머드초보의 블로그

우선 MySQL에 DB가 있어야겠죠?
[code]
CREATE TABLE `Member_List` (
  `ID` varchar(10) NOT NULL,
  `Password` varchar(10) NOT NULL,
  `Name` varchar(10) NOT NULL,
  `Age` int(2) NOT NULL,
  `Sex` varchar(2) NOT NULL,
  `Tel` varchar(12) NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr COMMENT='회원 멤버 리스트입니다.';

INSERT INTO `Member_List` (`ID`, `Password`, `Name`, `Age`, `Sex`, `Tel`) VALUES
('mudchobo', '1234', '성종천', 25, '남', '01000000000'),
('k1011606', '1234', '강현욱', 24, '남', '01000000000'),
('shs8326', '1234', '성현식', 58, '남', '01000000000'),
('jor0737', '1234', '조옥렬', 49, '여', '01000000000'),
('boazzang', 'boalove', '보아짱', 30, '여', '0100000000'),
('webserv', 'babo', '웹서비스', 45, '남', '01000000000'),
('child', 'ggoma', '꼬마', 15, '여', '01000000000'),
('mudcosdf', '1234', '성종텬', 99, '남', '01000000000');
[/code]
자바클래스를 작성해봅시다.

그리고 blazeds프로젝트에 WebContent/WEB-INF/lib에 mysqlconnector넣는거 잊지마세요 ^^

blazeds프로젝트 아래 Java Resources: src부분에서 패키지를 만듭시다.
flex.member라는 패키지를 만들고, MemberVo라는 클래스를 생성해봅시다.
[code]
package flex.member;

public class MemberVo {
 String id;
 String password;
 String name;
 int age;
 String sex;
 String tel;
 
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }
 public String getSex() {
  return sex;
 }
 public void setSex(String sex) {
  this.sex = sex;
 }
 public String getTel() {
  return tel;
 }
 public void setTel(String tel) {
  this.tel = tel;
 }
}
[/code]
위와 같은 bean을 만듭시다.

그리고 DB와 연동하는 놈인 MemberService라는 클래스를 만들어봅시다.
[code]
package flex.member;

import java.util.ArrayList;
import java.util.List;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import flex.member.MemberVo;
public class MemberService {
 public List<MemberVo> getElements() throws SQLException {
  long startTime = System.currentTimeMillis();
  try {
   Class.forName("com.mysql.jdbc.Driver");
  } catch (ClassNotFoundException e) {
  }
  Connection con = null;
  List<MemberVo> list = new ArrayList<MemberVo>();
  String sql = "SELECT * FROM Member_List";
  try {
   String url = "jdbc:mysql://MYSQL디비주소/db이름";
   con = DriverManager.getConnection(url, "db계정id", "db계정비밀번호");
   PreparedStatement stmt = con.prepareStatement(sql);
   ResultSet rs = stmt.executeQuery();
   while (rs.next()) {
    MemberVo mb = new MemberVo();
    mb.setId(rs.getString("Id"));
    mb.setPassword(rs.getString("Password"));
    mb.setName(rs.getString("Name"));
    mb.setAge(rs.getInt("Age"));
    mb.setSex(rs.getString("Sex"));
    mb.setTel(rs.getString("Tel"));
    list.add(mb);
   }
  } catch (SQLException e) {
   e.printStackTrace();
  } finally {
   try {
    con.close();
   } catch (Exception ignored) {
   }
  }
  System.out.println("Service execution time: "
    + (System.currentTimeMillis() - startTime));
  return list;
 }
}
[/code]
다 만들었으면 config를 수정해야해요.
blazeds프로젝트아래 WebContent/WEB-INF/flex/remoting-config.xml를 열어봅시다. service태그 안에 추가합시다.
[code]
<destination id="member"> 
  <properties>  
   <source>flex.member.MemberService</source> 
  </properties>
 </destination>
[/code]
이제 다 완성되었어요. export를 해야죠. Overwrite existing file에 체크를 하고, 톰캣디렉토리/webapp/blazeds.war를 선택합니다.
Finish를 클릭하고 톰캣을 가동시켜줍시다.

이제 Flex Builder로 갑시다. 여기서 이제 저 MemberService클래스에 있는 getElements()메소드를 불러올꺼에요.
New Project에서 Flex Project를 선택합니다.
Project name은 BlazedsTest라고 하고 Web application선택, Application server type은 J2EE로 선택하고 다음!
Server location에서 User default ~~~ 어쩌구 체크해제하구 blazeds로 설정합시다.
Root folder는 톰캣디렉토리/webapps/blazeds를 선택
Root URL은 http://localhost:8080/blazeds/
Context root는 blazeds
Validate Configuration클릭해서 제대로 되면 돼요(톰캣이 가동되어 있어야 돼요 ^^)
가볍게 Finish를 눌러줍시다 ^^

BlazedsTest.mxml에 이렇게 작성합시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script> 
  <![CDATA[  
   import mx.rpc.events.ResultEvent;  
   import mx.rpc.events.FaultEvent;  
   import mx.rpc.remoting.RemoteObject;  
   import mx.controls.Alert;     
   private var startTime:Number;      
   private function resultHandler(event:ResultEvent):void{       
    dg.dataProvider = event.result;  
   }     
   
   private function faultHandler(event:FaultEvent):void{       
    mx.controls.Alert.show("실패 메세지 : " + event.fault.message);  
   }     
   
   private function retrieve():void  {  
    var srv:mx.rpc.remoting.RemoteObject = new RemoteObject();  
    srv.destination = "member";      
    startTime = new Date().time;  
    srv.getElements();       
    srv.addEventListener("result",resultHandler);  
    srv.addEventListener("fault",faultHandler);  
   }    
   
   private function logResult():void  {  
    if (startTime > 0)   {   
     log.text = "" + (new Date().time - startTime) + " milliseconds"; 
    } 
   }   
  ]]>
 </mx:Script>  
 
 <mx:Panel title="AS를 이용한 RemoteObject예" width="100%" height="100%"> 
  <mx:DataGrid id="dg" width="100%" height="100%"                 
      updateComplete="logResult()"/>  
  <mx:ControlBar>   
   <mx:Button label="데이터 가져오기" click="retrieve()"/>  
   <mx:Label id="log"/>  
  </mx:ControlBar>
 </mx:Panel>
</mx:Application>
[/code]
그런다음 실행하면 아래와 같은 창이 뜨고 Button클릭하면 끝입니다.

회원가입은 아이디, 비밀번호, 이름 등의 정보를 받아서
RemoteObject를 통해 Join메소드를 호출하기만 하면 끝입니다 ^^

그냥 값만 넘겨주면 자바클래스에서 처리를 합니다.













[code]
public int Join(String id, String pwd, String name, int age, String sex, String tel)
{
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
 
  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);

   // 입력한 ID와 같은 ID를 추출(이미있는 id인지 확인위함)
   pstmt = con.prepareStatement("SELECT id FROM bs_Member WHERE id = ?");
   pstmt.setString(1, id);
   rs = pstmt.executeQuery();
   if (rs.next()) {
    return 2;
   } else {
    // 신규등록을 위해 INSERT문을 이용해 DB에 삽입
    pstmt = con.prepareStatement(
                "INSERT INTO bs_Member (id, pwd, name, age, sex, tel) " +
                "VALUES (?, ?, ?, ?, ?, ?)");
    pstmt.setString(1, id);
    pstmt.setString(2, pwd);
    pstmt.setString(3, name);
    pstmt.setInt(4, age);
    pstmt.setString(5, sex);
    pstmt.setString(6, tel);
    pstmt.executeUpdate();
    return 1;
   }
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
이미 있는 ID인지 확인을 위해 검사해서 ID가 있으면 2를 리턴, 없으면 DB에 삽입 후에 1을 리턴합니다.

FLEX로 가봅시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" xmlns:comp="*" backgroundColor="#c0c0c0" backgroundAlpha="0.7"
creationComplete="initWindow()">
 
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function initWindow():void {
    joinwindow.x = this.width / 2 - 150;
    joinwindow.y = this.height / 2 - 200;
   }
   
   private function RequestJoin():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    /*
     아이디 길이등의ㅣ 검사문-_-; 귀찮아서-_-;
    */
   
    if (sextext.text == "남" || sextext.text == "여"){
     srv.Join(
       idtext.text, pwtext.text,
       nametext.text, agetext.text, sextext.text, teltext.text);
    } else {
     Alert.show("남 또는 여 라고 입력하세요!");
     return;
    }
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show("가입에 성공했습니다.");
      idtext.text = "";
      pwtext.text = "";
      nametext.text = "";
      agetext.text = "";
      sextext.text = "";
      teltext.text = "";
      visible = false;
      break;
     case 2 :
      Alert.show("ID가 이미있습니다.");
      break;
    }
   }
   
   private function faultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:TitleWindow id="joinwindow" width="300" height="300"
layout="absolute" title="회원가입하기">
  <mx:Label x="72.5" y="35" text="ID "/>
  <mx:Label x="72.5" y="61" text="PW"/>
  <mx:Label x="70.5" y="87" text="이름"/>
  <mx:Label x="70.5" y="113" text="나이"/>
  <mx:Label x="70.5" y="139" text="성별"/>
  <mx:Label x="70.5" y="167" text="전화"/>
  <mx:TextInput id="idtext" x="103.5" y="33" width="112"/>
  <mx:TextInput id="pwtext" x="103.5" y="59" width="112"
displayAsPassword="true"/>
  <mx:TextInput id="nametext" x="103.5" y="85" width="112"/>
  <mx:TextInput id="agetext" x="103.5" y="111" width="112" restrict="0-9"/>
  <mx:TextInput id="sextext" x="103.5" y="137" width="112"/>
  <mx:TextInput id="teltext" x="103.5" y="165" width="112"/>
  <mx:Button x="79.5" y="193" label="가입신청" click="RequestJoin();"/>
  <mx:Button x="157.5" y="193" label="취소" click="visible=false"/>
 </mx:TitleWindow>
</mx:Canvas>

[/code]
가입신청버튼을 클릭하면 RequestJoin()을 호출합니다. 이것은 RemoteObject를 통해 Join메소드를 호출합니다. 그리고 리턴값에 따라 1이면 성공, 2이면 이미 id가 있다고 알려줍니다. 텍스트박스를 다 초기화하고 visible을 false로 바꿔 창을 다시 로그인창으로 바꿉니다.

아 그리고 agetext를 보면 restrict="0-9"라고 써 놓으면 저 필드에는 숫자밖에 입력이 안됩니다. 좋은 정보입니다 핫핫-_-;

플렉스 세션에 대한 예제가 별로 없어서 찾기 힘들었는데 그냥 서블릿세션처럼 쓰면 되는 것이더군요-_-;

우선 플렉스세션을 만들어야하는데 서버측 프로그래밍할 때 그냥 FlexSession쓸라고하면 에러납니다. LCDS깔 때 있는 flex.war파일에 포함되어있는 jar파일을 서버측 프로그래밍 할 때 즉 컴파일할 때 필요합니다.

저는 작업할 때 Flex Builder2랑 Eclipse랑 두개 띄워놓고 작업합니다-_-;
자바 프로그래밍 하기 위해서 Eclipse에서 세션을 만들어봅시다.

우선 Dynamic Web Project로 프로젝트를 하나 만듭니다.

그리고 필요한 jar파일을 넣어야합니다. flex.war가 디플로이 되면 WEB-INF\LIB폴더에 JAR파일이 있는데 여기서 message관련된거 이클립스에서 만든 프로젝트 lib에다가 복사합니다(사실 잘 몰라서 다 복사했습니다-_-;)
flex-messaging.jar, flex-messaging-common.jar, flex-messaging-opt.jar, flex-messaging-req.jar ^^

[code]
package flex.session;

import flex.messaging.FlexSession;
import flex.messaging.FlexContext;

public class SessionRO {

 public void setSession(String id) {
  FlexSession session = FlexContext.getFlexSession();
  session.setAttribute("id", id);
  System.out.println("세션설정성공");
 }
 
 public String getSession() {
  FlexSession session = FlexContext.getFlexSession();
  String id = session.getAttribute("id").toString();
  System.out.println("세션가져오기성공");
  return id;
 }
 
 public void removeSession() {
  FlexSession session = FlexContext.getFlexSession();
  session.invalidate();
 }
}
[/code]
간단합니다. setSession은 세션을 설정(로그인시)하는 것이고, getSession은 세션을 가져오는 것이고(있으면!), removeSession은 세션을 삭제(로그아웃시)하는 것입니다.

근데 문제점은 이놈을 테스트하려면 {was}/webapp/flex/WEB-INF/classes/에 복사해놓고 mxml이나 as에서 밖에 테스트를 못합니다-_-; jsp에서 테스트를 하려니 안되더군요 ^^ 꽤 고생했습니다-_-;

아 그리고 DB구조는 이렇게 되어있습니다.
[code]
CREATE TABLE `bs_Member` (
  `id` varchar(20) NOT NULL,
  `pwd` varchar(20) default NULL,
  `name` varchar(20) default NULL,
  `age` int(10) unsigned default NULL,
  `sex` varchar(20) default NULL,
  `tel` varchar(20) default NULL,
  PRIMARY KEY  (`id`)
)
[/code]

로그인 메소드를 보도록 합시다.
[code]
public int Login(String id, String pw) {
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
 
  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
        
   pstmt = con.prepareStatement("SELECT pwd FROM bs_Member WHERE id = binary(?)");
   pstmt.setString(1, id);
   rs = pstmt.executeQuery();
   rs.last();
   int rowCount = rs.getRow();
   rs.beforeFirst();

   if(rowCount != 0) {
    rs.next();
    if(pw.equals(rs.getString("pwd"))) {
     return 1;
    } else {
     return 2;
    }
   }
   else {
    return 3;
   }
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
bs_Member테이블에서 로그인한 id가 있는지 검사를 하고 id가 있으면 3를 리턴하고, 없으면 비밀번호가 같은지 검사하고 같으면 1을 리턴하고, 틀리면 2를 리턴합니다. 플렉스 as에서 1을 받으면 성공이라고 뿌리고 이런식으로 했습니다.

자 그러면 flex에서 보도록 합시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" xmlns:comp="*" backgroundColor="#c0c0c0"
backgroundAlpha="0.7" creationComplete="initWindow()">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function initWindow():void {
    loginwindow.x = this.width / 2 - 150;
    loginwindow.y = this.height / 2 - 150;
   }
   
   private function RequestLogin():void {
    var srv:RemoteObject = new RemoteObject();
    loginbtn.enabled = false;
    joinbtn.enabled = false;
    srv.destination = "booksystem";
   
    srv.Login(idtext.text, pwtext.text);
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "session";
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show(idtext.text + "님 환영합니다.");
      srv.addEventListener("result", sessionresultHandler);
      srv.addEventListener("fault", sessionfaultHandler);
      srv.setSession(idtext.text);
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
     case 2 :
      Alert.show("비밀번호가 틀립니다.");
      pwtext.text = "";
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
     case 3 :
      Alert.show("ID가 없습니다.");
      pwtext.text = "";
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
    }
   }
   private function faultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
    loginbtn.enabled = true;
    joinbtn.enabled = true;
   }
   
   private function sessionresultHandler(event:ResultEvent):void {
    parentApplication.loginid = idtext.text;
    parentApplication.infota.text = idtext.text + "님 방가방가!";
    idtext.text = "";
    pwtext.text = "";
    visible = false;
   }
   
   private function sessionfaultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 
 <mx:TitleWindow id="loginwindow" width="300" height="200" layout="absolute"
   title="M.C the MAX공연 예매 시스템에 오신 것을 환영합니다.">
  <mx:Label x="64.5" y="35" text="ID : "/>
  <mx:Label x="64.5" y="65" text="PW : "/>
  <mx:TextInput id="idtext" x="103.5" y="33" width="112"/>
  <mx:TextInput id="pwtext" x="103.5" y="63" width="112"
displayAsPassword="true" enter="RequestLogin();"/>
  <mx:Button id="loginbtn" x="64.5" y="93" label="로그인"
width="73" click="RequestLogin();"/>
  <mx:Button id="joinbtn" x="145.5" y="93" label="회원가입"
click="parentApplication.showJoin();"/>
 </mx:TitleWindow>
</mx:Canvas>
[/code]
id, pw를 입력하고 엔터 또는 로그인버튼을 클릭하게 되면 RemoteObject를 통해서 Login메소드를 호출하게 됩니다. 호출을 해서 성공적으로 리턴하면 resultHandler함수에 리턴값을 받아 그 리턴값에 따라 Alert을 해줍니다. 로그인을 성공해버리면 setSession을 통해 세션을 설정합니다.

이게 다군요-_-; 로그인을 성공하게 되면 자기자신은 visible을 false로 바꿔버립니다. 그래서 뒤에 있는 실제 메뉴를 건드릴 수 있게 했죠-_-; 아....진짜 이따구로도 가능하다는 것을 보여주는군요.