머드초보의 블로그

챠팅 부분을 해봅시다. 저도 이쪽은 잘몰라서 책에도 잘 안나와 있고 해서 가장 쉬운 차트로 했습니다-_-;

우선 예매한 연령별 현황을 보도록 합시다.

자바클래스 소스를 보도록합시다.









[code]
public double[] getAgestatus() {
  Connection con = null;
  Statement stmt = null;
  ResultSet rs = null;
 
  double status[] = new double[6];
  int age = 0, avg_age = 0, count=0;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   stmt = con.createStatement();
   String query =
     "SELECT Age FROM bs_Book,bs_Member WHERE bs_Book.ID = bs_Member.ID";
   rs = stmt.executeQuery(query);
   
   while(rs.next()) {
    age = rs.getInt("Age");
    avg_age += age;
    if(age < 20)   // 연령별로 예약수를 조사
     status[0]++;
    else if(age >= 20 && age < 30)
     status[1]++;
    else if(age >= 30 && age < 40)
     status[2]++;
    else if(age >= 40 && age < 50)
     status[3]++;
    else
     status[4]++;
    count++;
   }
   status[0] = (status[0] / (double)count) * 100; // 퍼센트로 계산
   status[1] = (status[1] / (double)count) * 100;
   status[2] = (status[2] / (double)count) * 100;
   status[3] = (status[3] / (double)count) * 100;
   status[4] = (status[4] / (double)count) * 100;
  } catch (SQLException e) {
   e.printStackTrace();
   return null;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (stmt != null) try { stmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
  return status;
 }
[/code]
이부분은 프로시저인지 뭔지로 할 수도 있는데 제가 할줄몰라서 클래스에 때려박았습니다-_-;
보시면 예약리스트와 멤버리스트를 조인해서 그 예약된 id의 나이만 출력하도록 합니다.
그래서 for문을 이용해서 20대인지 30대인지 등을 파악해서 status에 저장해서 그 배열을 리턴합니다.
그 status를 리턴하면 0에는 20대미만의 수, 1에는 20대의 수 등이 들어가겠죠.

플렉스로 가봅시다-_-;

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="100%" height="100%"
 title="나이별 예매현황">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   [Bindable]
   public var agestatus:Array = new Array();
   
   public function UpdateAgestatus():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
    srv.getAgestatus();
   }
   private function resultHandler(event:ResultEvent):void {
    var array:Array = event.result as Array;
    agestatus = [
       {name: "20대미만", value: array[0]},
       {name: "20대", value: array[1]},
       {name: "30대", value: array[2]},
       {name: "40대", value: array[3]},
       {name: "50대이상", value: array[4]},
    ];
    parentApplication.viewstack.selectedChild = parentApplication.ViewAgeStatus;
   }
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:ColumnChart width="100%" height="100%" dataProvider="{agestatus}"
   showDataTips="true" >
        <mx:horizontalAxis>
         <mx:CategoryAxis dataProvider="{agestatus}" categoryField="name"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
         <mx:LinearAxis minimum="0" maximum="100" />
        </mx:verticalAxis>
        <mx:series>
         <mx:ColumnSeries dataProvider="{agestatus}"
           xField="name" yField="value" />
        </mx:series>
    </mx:ColumnChart>
</mx:Panel>

[/code]
RemoteObject를 이용해서 getAgestatus를 호출합니다. 리턴값은 배열로 받습니다.

var array:Array = event.result as Array; 이렇게 하면 배열로 받아올 수 있습니다.
뭐든지 다 잘받아오는 플렉스입니다-_-;

agestatus라는 Array에 name이라는 것에 20대미만 이런식으로 쓰고 value에는 받아온 해당 값을 넣습니다.

가장 보편적인 차트인 ColumnChart를 사용해봅시다. dataProvider는 방금전에 만든 agestatus로 하고 horizontalAxis는 가로에 나타낼 문자열을 말하는 듯합니다. 20대, 30대 이런것을 넣기위해 name속성을 적용합시다.

verticalAxis는 세로축 말하는 거 같은데 저도 잘모르겠습니다. 책보고 따라한거라 ^^
뭐 최소값과 최대값을 설정하는 거 같습니다 ^^
mx:series에 xField에는 name이고 yField는 value로 하는군요-_-; 뭐 저런식으로 하니까 되더군요-_-;

좀더 연구해봐야겠습니다 차팅은 ^^

이번엔 DataGrid를 이용해봅시다!-_-;

예약 리스트를 받아와야하기 때문에 더 쉽습니다-_-; 이 DataGrid라는 놈이 너무 강력해서-_-; 자바Bean이랑 매우 잘 맞아요!

자바측에서 List형태로 리턴하게 되면 DataGrid의 dataProvider가 알아서 다 해줍니다.
우선 자바측의 예약 취소하기 메소드를 보도록 합시다.





[code]
public int BookCancel(int[] seatnum) {
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   // 현재 요청된 변호레코드의 ID와 좌석번호, ID와 맞는 비번을 추출
   for (int i=0; i<seatnum.length; i++) {
    pstmt = con.prepareStatement("DELETE FROM bs_Book WHERE seatnum = ?");
    pstmt.setInt(1, seatnum[i]);
    pstmt.executeUpdate();
   
    pstmt = con.prepareStatement(
                "UPDATE bs_Seat SET isbooked='X' WHERE seatnum = ?");
    pstmt.setInt(1, seatnum[i]);
    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]
아 이거 배열로 처리하려고 했는데 DataGrid에서 다중선택을 할 줄 모르겠어요-_- 아는 사람 좀 가르쳐주세요!

어쨌든-_-; 한개만 넘겼다고 치고 해봅시다. 해당 좌석번호를 찾아서 bs_Book테이블에서 삭제를 하고 bs_Seat테이블에는 예약여부(isbooked)에 X로 바꿔주면 끝납니다.

이제 플렉스로 가봅시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  width="100%" height="100%" title="예약취소하기">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function bookCancel():void {
    var cancellist:Array = new Array();
    var srv:RemoteObject = new RemoteObject();
    var i:int;
    srv.destination = "booksystem";
   
    if (dg.selectedItem == null){
     Alert.show("좌석을 선택하세요!");
     return;
    }
    cancellist.push(int(dg.selectedItem.seatnum));
   
    srv.BookCancel(cancellist);
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   
   // Result Handler
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show("예약취소가 완료되었습니다.");
      parentApplication.viewstack.selectedChild = parentApplication.ViewHome;
      break;
    }
   }
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
   
   public function UpdateBookcancel():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", bookresultHandler);
    srv.addEventListener("fault", bookfaultHandler);
    srv.getBook(parentApplication.loginid);
   }
   private function bookresultHandler(event:ResultEvent):void {
    dg.dataProvider = event.result;
    parentApplication.viewstack.selectedChild=parentApplication.ViewBookCancel;
   }
   private function bookfaultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" />
 <mx:ControlBar horizontalAlign="center">
  <mx:Button label="예약취소하기" click="bookCancel()"/>
 </mx:ControlBar>
</mx:Panel>

[/code]
우선 UpdateBookcancel을 실행하게 되면 getBook함수를 호출하는데 이 함수는 예약리스트를 List객체에 받아오는 역할을 합니다.

dg.dataProvider = event.result; (dg는 DataGrid의 id)

이 결과를 그냥 dg.dataProvider에 처 넣으면 됩니다-_-; 그러면 알아서 테이블로 표시가 됩니다.

그리고 해당줄을 선택하고, 예약취소버튼을 누르면 bookCancel함수를 호출하는데 여기서 자바클래스에 있는 BookCancel함수를 호출하게 됩니다.

선택된 좌석은 dg.selectedItem.seatnum 이렇게 하면 알 수 있습니다.

예약하기부분... 머리가 딸려서 좀 고생했습니다-_-;

아....mxml에서는 반복문 못 쓰는 건가요? 버튼을 90개 만들고 싶은데 다 적을 수도 없고 해서-_-;
as에서 구현을 했습니다 ^^

우선 예약하기부분의 자바클래스를 보도록 합시다.
아 우선 DB구조를 보도록 합시다.

회원가입은 아이디, 비밀번호, 이름 등의 정보를 받아서
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"라고 써 놓으면 저 필드에는 숫자밖에 입력이 안됩니다. 좋은 정보입니다 핫핫-_-;