tutorial flex java ibatis mysqlV1.2

7/23/2019 tutorial flex java ibatis mysqlV1.2

1/43

Erick Costanio


2/43

` 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


3/43

` 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\


4/43

` Masuk ke C:\apache-tomcat-6.0.18\bin

` Double click startup.bat seperti gambardibawah :


5/43

` Pastikan tampilan start up tomcat seperti screen

dibawah ini (Tomcat is running..)


6/43

` Rename blazeds.war menjadi flexjava.war

` Buka http://localhost:8080/manager/html` Pertama kali anda akan menemukan error :

` Ikuti petunjuk slide berikutnya..


7/43

` Buka file :

C:\apache-tomcat-6.0.18\conf\tomcat-users.xml` Overwrite isinya menjadi :

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

` Buka http://localhost:8080/manager/html, kemudian loginulang dengan username : admin & password admin.


8/43

` Browse file flexjava.war` Setelah itu klik deploy

` Pastikan flexjava bernilai true


9/43

` Buat Project Baru di flex builder

`

File

New

Other

General P

roject.` Perhatikan location disesuaikan dengan directory tomcat

anda

` Finish

` Pastikan Struktur project seperti ini :


10/43

` Buka Flex Builder3 New flex project Isi namaproject : MyContact

` Pilih Application server type : J2EE next

` Isi Root folder sesuai dengan direktori tomcat

` Klik next, setelah itu coba jalankan aplikasiMyContact.Pastikan app berjalan di

http://localhost:8080


11/43

` Buatlah sebuah Kelas Java di edit plus bernama

Contact.javapublic class Contact{

public String hello(String name){

return "Hai "+name;}

}

` Compiledan copy hasil compile

Contact.java yaitu Contact.class ke

flexjava WEB-INF classes


12/43

` Buka file remoting-config.xml, tambahkan xml

berikut :

Contact

` Reload flexjava di tomcat


13/43

` Buka file MyContact.mxml

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);

}

]]>

` Run MyContact Application


14/43

` Buatlah sebuat database bernama dbContact,Setalah itu buat sebuah tabel bernama contactdengan field field :

` Insert tabel contact dengan beberapa data. insert into contact values (1, "Erick", "Costanio", "[email protected]");

insert into contact values (2, "Budi", "Susanto", "[email protected]");


15/43

` Buka IDE Netbeans

` File NewProject JavaApplication klik next Isi ProjectName : ContactBackend uncheck

create main class Finish


16/43

` Add JAR/FolderOpen File :

- ibatis-2.3.3.720.jar

- mysql-connector-java-5.0.8-bin.jar


17/43

Buatlah StrukturSeperti berikut :


18/43

public class Contact {

private int id;

private String firstName;private String lastName;

private String email;

}

Setelah itu klikkanan, refactor encapsulate fields

select All refactor


19/43

select * from contact


20/43


21/43

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);

}

}


22/43

import java.io.IOException;

import java.sql.SQLException;

import java.util.*;

public class ContactService extends SqlMapService{

public ContactService() throws Exception{

super();

}

public List selectAll() throws IOException,SQLException{

List contacts =(List)sqlMapClient.queryForList("Contact.selectAll",null);

return contacts;

}

}


23/43

import java.util.List;

public class TestClient {

public static void main(String[] args) {

try {

ContactService cs = new ContactService();

List 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();

}

}

}


24/43

` Coba jalankan File TestClient.java

`

Caranya klik kanan, run file atau (Shift +F6)

` Jika dilayar anda menampilkan semua daftar

contact berarti aplikasi berjalan sukses


25/43

` Copy file class & xml yang ada di project netbeans.

` Paste ke flexjava WEB-INF classes


26/43

` Perhatikan Struktur project di flexjava sekarang


27/43

` Tambahkan fileibatis-2.3.3.720.jardan mysql-

connector-java-5.0.8-bin.jardi : flexjavaW

EB-INF lib


28/43

` Ganti remoting config Contact di flexjava WEB-

INF flex remoting-config.xmlmenjadi

ContactService

ContactService


29/43

Terakhir kembali ke myContact (FlexProject)Buka file MyContact.mxml. Ganti dengan source berikut :

import mx.collections.ArrayCollection;



[Bindable]

private var arr:ArrayCollection;

private function resultHello(event:ResultEvent):void{

arr = event.result as ArrayCollection;

}

]]>


30/43

` Click tombol show all contact untuk menampilkan seluruhisi tabel contact

` Sampai sekarang kita hanya melakukan query select.

` Selanjutnya akan dicoba insert, deletedan update


31/43

` Tambahkan source code berikut di : Contact.xml

insert into contact

values(#id#,#firstName#,#lastName#,#email#);


32/43

` Tambahkan method berikut di ContactService.java

public void insert(Contact contact) throws

IOException,SQLException{

sqlMapClient.insert("Contact.insert",contact)

}


33/43

` Tambahkan kode berikut di TestClient.java

Contact c = new Contact();

c.setId(3);

c.setFirstName("Budiman");

c.setLastName("Salim");

c.setEmail("[email protected]");

cs.insert(c);

System.out.println("Insert Berhasil");

` Jalankan TestClient, Jika sudah berhasil lakukancopy file class dan xml seperti pada slide22.


34/43

` kembali ke MyContact (FlexProject)` 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;}

}


35/43

` Terakhir ubah MyContact.mxml dengan kode berikut :

import mx.rpc.events.FaultEvent;import mx.collections.ArrayCollection;



[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);

}

]]>


36/43


37/43

` Run application :


38/43

` Tambahkan source code berikut di : Contact.xml

update contact set firstName = #firstName#,

lastName=#lastName#, email=#email#

where id=#id#

delete from contact where id=#id#


39/43

` Tambahkan method berikut di ContactService.java

public int update(Contact contact) throwsIOException,SQLException{

return

sqlMapClient.update("Contact.update",contact);

}

public int remove(int id) throws

IOException,SQLException{

return sqlMapClient.delete("Contact.remove",id);

}


40/43

` Tambahkan kode berikut di TestClient.java

Contact c = new Contact();

c.setId(3);c.setFirstName("BudimanUpdate");

c.setLastName("SalimUpdate");

c.setEmail("[email protected]");

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 sepertipada slide22.


41/43

` Buka MyContact.mxml Tambahkan methodupdate dan remove di

Tambahkan methodresultUpdate dan resultRemove di 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();

}


42/43

Tambahkan method resultUpdate dan resultRemove di

private function insert():void{


c.id = uint(Number(tiId.text));c.firstName = tiFirstName.text;



roContact.insert(c);

}

private function update():void{


c.id = uint(Number(tiId.text));

c.firstName = tiFirstName.text;



roContact.update(c);

}


43/43

` Terakhir tambahkan methodupdate() dan

remove() untuk updateButton dan deleteButton

` Run

appication

Documents

tutorial flex java ibatis mysqlV1.2