Tutorial Flex Java iBatis MySQL

© Erick Costanio
Persiapan
 Flex Builder
 Netbeans
 Mysql Server
 apache-tomcat-6.0.18.zip
 blazeds.war
 ibatis-2.3.3.720.jar
 mysql-connector-java-5.0.8-bin.jar

Sudah ada di lab

Belum ada di lab

Mengaktifkan Apache Tomcat (1)
 Extract apache-tomcat-6.0.18.zip
 Copy ke drive anda, mis : C:\
 Setting JAVA_HOME : My Computer 

Properties  Advance  Evironment variables

 Klik new pada System variables
 Isi dengan :
variables name : JAVA_HOME
variable value : C:\Program Files\Java\jdk1.6.0_11\
Mengaktifkan Apache Tomcat(2)
 Masuk ke C:\apache-tomcat-6.0.18\bin
 Double click startup.bat seperti gambar

dibawah :
Mengaktifkan Apache Tomcat(3)
 Pastikan tampilan start up tomcat seperti
screen dibawah ini (Tomcat is running..)
Deploy Blazeds ke Tomcat
 Rename blazeds.war menjadi flexjava.war
 Buka http://localhost:8080/manager/html

 Pertama kali anda akan menemukan error :

 Ikuti petunjuk slide berikutnya..

 Buka file :
C:\apache-tomcat-6.0.18\conf\tomcat-users.xml
 Overwrite isinya menjadi :
<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
<role rolename="manager"/>
<user username= "admin" password= "admin" roles="manager"/>
</tomcat-users>

 Restart tomcat (Ctrl+C) kemudian ulangi slide ke-4

 Buka http://localhost:8080/manager/html, kemudian
login ulang dengan username : admin & password
admin.
Deploy Blazeds ke Tomcat (2)

 Browse file flexjava.war

 Setelah itu klik deploy

 Pastikan flexjava bernilai true

Create Web Project
 Buat Project Baru di flex builder
 File  New  Other  General  Project.
 Perhatikan location disesuaikan dengan directory
tomcat anda

 Finish
 Pastikan Struktur project seperti ini :
Create Flex Project
 Buka Flex Builder 3  New flex project  Isi nama
project : MyContact
 Pilih Application server type : J2EE  next

 Isi Root folder sesuai dengan direktori tomcat

 Klik next, setelah itu coba jalankan aplikasi
MyContact. Pastikan app berjalan di
http://localhost:8080
Testing Flex dan Java (1)
 Buatlah sebuah Kelas Java di edit plus
bernama Contact.java
public class Contact
{
public String hello(String name){
return "Hai "+name;
}
}

 Compile dan copy hasil compile

Contact.java yaitu Contact.class ke
flexjava  WEB-INF  classes
Testing Flex dan Java (2)
 Buka file remoting-config.xml, tambahkan
xml berikut :
<destination id="contactService">
<properties>
<source>Contact</source>
</properties>
</destination>

 Reload flexjava di tomcat

Testing Flex dan Java (3)
Buka file MyContact.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

private function resultHello(event:ResultEvent):void{

var a:String = event.result as String;
Alert.show(a);
}
]]>
</mx:Script>
<mx:RemoteObject id="roContact" destination="contactService">
<mx:method name="hello" result="resultHello(event)"/>
</mx:RemoteObject>
<mx:TextInput id="textInput"/>
<mx:Button label="click me" click="roContact.hello(textInput.text)"/>
</mx:Application>

Run MyContact Application

Create database
 Buatlah sebuat database bernama dbContact,
Setalah itu buat sebuah tabel bernama contact
dengan field – field :

 Insert tabel contact dengan beberapa data.

 insert into contact values (1, "Erick", "Costanio", "costanio@yahoo.com");
 insert into contact values (2, "Budi", "Susanto", "budi@yahoo.com");
Testing Java, IBatis, MySql (1)
 Buka IDE Netbeans
 File  New Project  JavaApplication  klik

next  Isi ProjectName : ContactBackend 

uncheck create main class Finish
Testing Java, IBatis, MySql (2)
 Add JAR/Folder…
Open File :
- ibatis-2.3.3.720.jar
- mysql-connector-java-5.0.8-bin.jar
Testing Java, IBatis, MySql (3)
Buatlah Struktur Seperti berikut :
Contact.java
public class Contact {
private int id;
private String firstName;
private String lastName;
private String email;
}

Setelah itu klikkanan, refactor  encapsulate

fields  select All  refactor
Contact.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap
PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
"http://ibatis.apache.org/dtd/sql-map-2.dtd">

<sqlMap namespace="Contact">
<!--- Showing all data of table -->
<select id="selectAll" resultClass="Contact">
select * from contact
</select>

</sqlMap>
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>
<settings useStatementNamespaces="true"/>
<transactionManager type="JDBC">
<dataSource type="SIMPLE">
<property name="JDBC.Driver" value="com.mysql.jdbc.Driver"/>
<property name="JDBC.ConnectionURL"
value="jdbc:mysql://localhost:3306/dbContact"/>
<property name="JDBC.Username" value="root"/>
<property name="JDBC.Password" value=""/>
</dataSource>
</transactionManager>
<sqlMap resource="Contact.xml"/>
</sqlMapConfig>
SqlMapService.java
import com.ibatis.common.resources.Resources;
import com.ibatis.sqlmap.client.SqlMapClient;
import com.ibatis.sqlmap.client.SqlMapClientBuilder;
import java.io.Reader;

public class SqlMapService {

protected SqlMapClient sqlMapClient;

public SqlMapService() throws Exception{

Reader reader =
Resources.getResourceAsReader("SqlMapConfig.xml");
sqlMapClient =
SqlMapClientBuilder.buildSqlMapClient(reader);
}
}
ContactService.java
import java.io.IOException;
import java.sql.SQLException;
import java.util.*;

public class ContactService extends SqlMapService{

public ContactService() throws Exception{

super();
}

public List<Contact> selectAll() throws IOException,SQLException{

List<Contact> contacts =
(List<Contact>)sqlMapClient.queryForList("Contact.selectAll",null);
return contacts;
}
}
TestClient.java
import java.util.List;

public class TestClient {

public static void main(String[] args) {

try {
ContactService cs = new ContactService();
List<Contact> list = cs.selectAll();
for (Contact c : list) {
System.out.print(" " + c.getId());
System.out.print(" " + c.getFirstName());
System.out.print(" " + c.getLastName());
System.out.print(" " + c.getEmail());
System.out.println("");
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
Testing Java, IBatis, MySql (4)
 Coba jalankan File TestClient.java
 Caranya klik kanan, run file atau (Shift + F6)

 Jika dilayar anda menampilkan semua daftar

contact berarti aplikasi berjalan sukses
 Copy file class & xml yang ada di project netbeans.

 Paste ke flexjava  WEB-INF  classes

 Perhatikan Struktur project di flexjava
sekarang
 Tambahkan file ibatis-2.3.3.720.jar dan
mysql-connector-java-5.0.8-bin.jar di :
flexjava  WEB-INF  lib
 Ganti remoting config Contact di flexjava 
WEB-INF  flex  remoting-config.xml
menjadi ContactService

<destination id="contactService">
<properties>
<source>ContactService</source>
</properties>
</destination>
Terakhir kembali ke myContact (Flex Project)
Buka file MyContact.mxml. Ganti dengan source berikut :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

[Bindable]
private var arr:ArrayCollection;

private function resultHello(event:ResultEvent):void{

arr = event.result as ArrayCollection;
}
]]>
</mx:Script>
<mx:RemoteObject id="roContact" destination="contactService">
<mx:method name="selectAll" result="resultHello(event)"/>
</mx:RemoteObject>
<mx:DataGrid dataProvider="{arr}"/>
<mx:Button click="roContact.selectAll()" label="show all contact" />
</mx:Application>
Test Aplikasi
 Click tombol show all contact untuk menampilkan seluruh
isi tabel contact

 Sampai sekarang kita hanya melakukan query select.

 Selanjutnya akan dicoba insert, delete dan update
Insert Contact (1)
 Tambahkan source code berikut di :
Contact.xml

<insert id="insert" parameterClass="Contact">

insert into contact
values(#id#,#firstName#,#lastName#,#email#);
</insert>
Insert Contact (2)
 Tambahkan method berikut di ContactService.java

public void insert(Contact contact) throws

IOException,SQLException{
sqlMapClient.insert("Contact.insert",contact)
}
Insert Contact (3)
 Tambahkan kode berikut di TestClient.java

Contact c = new Contact();

c.setId(3);
c.setFirstName("Budiman");
c.setLastName("Salim");
c.setEmail("budiman@gmail.com");
cs.insert(c);
System.out.println("Insert Berhasil");

 Jalankan TestClient, Jika sudah berhasil

lakukan copy file class dan xml seperti pada
slide 22.
Insert Contact (4)
 kembali ke MyContact (Flex Project)
 Tambahkan sebuah file action script bernama Contact.as

package
{
[Bindable]
[RemoteClass(alias="Contact")]
public class Contact
{
public var id:uint;
public var firstName:String;
public var lastName:String;
public var email:String;
}
}
Insert Contact (5)
Terakhir ubah MyContact.mxml dengan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

[Bindable]
private var arr:ArrayCollection;
private function resultSelectAll(event:ResultEvent):void{
arr = event.result as ArrayCollection;
}
private function resultInsert(event:ResultEvent):void{
roContact.selectAll();
}
private function faultInsert(f:String):void{
Alert.show(f);
}
private function insert():void{
var c:Contact = new Contact();
c.id = uint(Number(tiId.text));
c.firstName = tiFirstName.text;
c.lastName = tiLastName.text;
c.email = tiEmail.text;
roContact.insert(c);
}
]]>
</mx:Script>
Insert Contact (5) Cont..
<mx:RemoteObject id="roContact" destination="contactService">
<mx:method name="selectAll" result="resultSelectAll(event)"/>
<mx:method name="insert" result="resultInsert(event)" fault="faultInsert(event.fault.faultString)"/>
</mx:RemoteObject>
<mx:DataGrid id="dataGrid" dataProvider="{arr}" creationComplete="roContact.selectAll()"/>
<mx:VBox>
<mx:Form defaultButton="{insertButton}">
<mx:FormItem label="ID">
<mx:TextInput id="tiId" text="{dataGrid.selectedItem.id}"/>
</mx:FormItem>
<mx:FormItem label="FIRST NAME">
<mx:TextInput id="tiFirstName" text="{dataGrid.selectedItem.firstName}"/>
</mx:FormItem>
<mx:FormItem label="LAST NAME">
<mx:TextInput id="tiLastName" text="{dataGrid.selectedItem.lastName}"/>
</mx:FormItem>
<mx:FormItem label="EMAIL">
<mx:TextInput id="tiEmail" text="{dataGrid.selectedItem.email}"/>
</mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button id="insertButton" label="insert" />
<mx:Button id="updateButton" label="update" />
<mx:Button id="deleteButton" label="delete" />
</mx:HBox>
</mx:VBox>

<mx:NumberValidator source="{tiId}" property="text" integerError="Enter Integer value"

domain="int" trigger="{insertButton}" triggerEvent="click" valid="insert()"/></mx:Application>
Insert Contact (Finish)
 Run application :
Update & Delete Contact (1)
 Tambahkan source code berikut di :
Contact.xml

<update id="update" parameterClass="Contact">

update contact set firstName = #firstName#,
lastName=#lastName#, email=#email#
where id=#id#
</update>

<delete id="remove" parameterClass="int">

delete from contact where id=#id#
</delete>
Update & Delete Contact (2)
 Tambahkan method berikut di ContactService.java

public int update(Contact contact) throws

IOException,SQLException{
return
sqlMapClient.update("Contact.update",contact);
}

public int remove(int id) throws

IOException,SQLException{
return sqlMapClient.delete("Contact.remove",id);
}
Update & Delete Contact (3)
 Tambahkan kode berikut di TestClient.java

Contact c = new Contact();

c.setId(3);
c.setFirstName("BudimanUpdate");
c.setLastName("SalimUpdate");
c.setEmail("budiman@gmail.com");
if(cs.update(c) != 0 ){
System.out.println("Update Berhasil");
}

if(cs.remove(3) != 0){
System.out.println("Delete Berhasil");
}

 Jalankan TestClient, Jika sudah berhasil lakukan copy file class dan xml seperti
pada slide 22.
Update & Delete Contact (4)
 Buka MyContact.mxml
 Tambahkan method update dan remove di <mx:RemoteObject>

<mx:method name="update" result="resultUpdate(event)" />

<mx:method name="remove" result="resultRemove(event)" />

 Tambahkan method resultUpdate dan resultRemove di <mx:Script>

private function resultUpdate(event:ResultEvent):void{
var row:uint = event.result as uint;
Alert.show("update "+row+" record");
roContact.selectAll();
}

private function resultRemove(event:ResultEvent):void{

var row:uint = event.result as uint;
Alert.show("delete "+row+" record");
roContact.selectAll();
}
Update & Delete Contact (4)
Cont..
 Tambahkan method resultUpdate dan resultRemove di <mx:Script>
private function insert():void{
var c:Contact = new Contact();
c.id = uint(Number(tiId.text));
c.firstName = tiFirstName.text;
c.lastName = tiLastName.text;
c.email = tiEmail.text;
roContact.insert(c);
}

private function update():void{

var c:Contact = new Contact();
c.id = uint(Number(tiId.text));
c.firstName = tiFirstName.text;
c.lastName = tiLastName.text;
c.email = tiEmail.text;
roContact.update(c);
}
Update & Delete Contact (5)
 Terakhir tambahkan method update() dan
remove() untuk updateButton dan
deleteButton

Run
appication