Database Manager With Adobe Air AS3(Cari Data)

Lihat Demo

Melanjutkan tutorial yang sebelumnya Database Manager With Adobe Air AS3kali ini kita akan mempelajari bagaiman mencari suatu data,... pada dasarnya kita hanyalah mencari data dari xml dengan bantuan RegExp berikut tutorialnya

Tahap ke Tujuh

Buatlah Textinput component beri instance name search_nm kemudian buatlah sebuah button beri instance name bt_search dan buat lagi combocomponent beri lagi instance name search_sex

Tahap ke Delapan

Penulisan Script As3

buka panel action dan tambahkan kan script berikut pada script yang saya telah posting di tutorial yang sebelumnya Database Manager With Adobe Air AS3

search_nm.text = "Cari Nama";

 search_sex.dataProvider = new DataProvider([{label:"Semuanya",data:"Any"},{label:"Pria",data:"L"},{label:"Wanita",data:"P"}]);

 var pattern_nm:RegExp;
 //fungsi
 bt_search.addEventListener(MouseEvent.CLICK, search);

 function search(MouseEvent):void
 {
  caridata = [];

  pattern_nm = new RegExp(search_nm.text.toUpperCase());

  for (var n:int = 0; n<semuadata.length; n++)
  {
   if ((pattern_nm.test(semuadata[n].nm) || search_nm.text=="")&&(semuadata[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any"))
   {
    caridata.push(semuadata[n]);
   }
  }
  updateGrid();
 }

dan untuk mengaktifkan combo component

tambahkan script ini

search_sex.addEventListener(Event.CHANGE, klamin);

 function klamin(evtk:Event)
 {
  caridata = [];

  for (var k:int = 0; k <semuadata.length; k++)
  {
   if ((semuadata[k].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any"))
   {
    caridata.push(semuadata[k]);
   }
  }
  updateGrid();
 }

full script nya jadi seperti ini

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

mulai();
function mulai()
{
 var kolom_nama:DataGridColumn = new DataGridColumn("Nama");
 myGrid.addColumn(kolom_nama);

 var kolom_phone:DataGridColumn = new DataGridColumn("Telpon");
 myGrid.addColumn(kolom_phone);

 var kolom_alamat:DataGridColumn = new DataGridColumn("Alamat");
 myGrid.addColumn(kolom_alamat);


 var kolom_jnisklmin:DataGridColumn = new DataGridColumn("Sex");
 myGrid.addColumn(kolom_jnisklmin);
 kolom_jnisklmin.width = 50;


 var semuadata:Array = [];
 var caridata:Array = [];

 var prosesload:URLLoader = new URLLoader();
 var isidata:XML = new XML();

 var loader:Loader = new Loader();
 prosesload.addEventListener(Event.COMPLETE, readXML);
 prosesload.load(new URLRequest("http://rickonada.tk/tool/upload/dataxmlmanager.php"));

 function readXML(event:Event):void
 {
  isidata = new XML(event.target.data);
  for each (var usr in isidata.databasemanager)
  {
   semuadata.push({nm: usr.nama.toUpperCase(), phone: usr.phone, sex: usr.sex, almt: usr.alamat, des : usr.description,gmbr : usr.gambar});
  }
  caridata = semuadata.concat();
  updateGrid();
 }
 function updateGrid():void
 {
  myGrid.dataProvider = new DataProvider ();

  for (var i:int = 0; i<caridata.length; i++)
  {
   myGrid.addItem({no: i,Nama: caridata[i].nm, Telpon: caridata[i].phone, Alamat: caridata[i].almt, Sex: caridata[i].sex});
   outpField.text = "Selamat Datang \n";//nama awal
   outpField.appendText("Klik pada Tabel untuk melihat detail \n");
   var prosesgambar:URLRequest = new URLRequest("http://rickonada.tk/tool/upload/photo.jpg.png");
   loader.load(prosesgambar);
   wadah.addChild(loader);
   loader.x = 0;
   loader.y = 0;
  }
 }
 myGrid.addEventListener(Event.CHANGE, info);

 function info(evt:Event)
 {

  outpField.text = "Nama: " + caridata[evt.target.selectedItem.no].nm + "\n";
  outpField.appendText(caridata[evt.target.selectedItem.no].des + "\n");
  wadah.removeChild(loader);
  var prosesgambar:URLRequest = new URLRequest(caridata[evt.target.selectedItem.no].gmbr);
  loader.load(prosesgambar);
  wadah.addChild(loader);
  loader.x = 0;
  loader.y = 0;
 }
 //fungsi cari
 search_nm.text = "Cari Nama";

 search_sex.dataProvider = new DataProvider([{label:"Semuanya",data:"Any"},{label:"Pria",data:"L"},{label:"Wanita",data:"P"}]);

 var pattern_nm:RegExp;
 
 bt_search.addEventListener(MouseEvent.CLICK, search);

 function search(MouseEvent):void
 {
  caridata = [];

  pattern_nm = new RegExp(search_nm.text.toUpperCase());

  for (var n:int = 0; n<semuadata.length; n++)
  {
   if ((pattern_nm.test(semuadata[n].nm) || search_nm.text=="")&&(semuadata[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any"))
   {
    caridata.push(semuadata[n]);
   }
  }
  updateGrid();
 }
 
 //fungsi combo
search_sex.addEventListener(Event.CHANGE, klamin);

 function klamin(evtk:Event)
 {
  caridata = [];

  for (var k:int = 0; k <semuadata.length; k++)
  {
   if ((semuadata[k].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any"))
   {
    caridata.push(semuadata[k]);
   }
  }
  updateGrid();
 }

}

By Ricko nada di Pustaka Flash terima kasih telah membaca :) Database Manager With Adobe Air AS3(Cari Data)

Database Manager With Adobe Air AS3(klik Data)

Melanjutkan tutorial yang sebelumnya Database Manager With Adobe Air AS3 terhenti karna seseorang yang meminta bantuan dari pustaka flash untuk memperbaiki aplikasi yang dibuat dengan flash as3,..kali ini pustaka flash akan memberi tutorial untuk ketika data diklik akan memunculkan keterangan dari data tersebut

Lihat Demo

Tahap Ke lima

import lah sebuah komponent teks area dan beri instancename outpField

Penulisan Script As3

kita hanya perlu menambahkan script ini setelah script pada tutorial sebelumnya

myGrid.addEventListener(Event.CHANGE, info);

 function info(evt:Event)
 {

  outpField.text = "Nama: " + caridata[evt.target.selectedItem.no].nm + "\n";
  outpField.appendText(caridata[evt.target.selectedItem.no].des + "\n");
  
 }

Tahap Ke enam

Lantas bagaimana jika kita ingin menambahkan image, terlebih dahulu buat sebuah movieclipth kosong dan beri instance namenya wadah dan tambahkan script berikut

var prosesgambar:URLRequest = new URLRequest(caridata[evt.target.selectedItem.no].gmbr);
loader.load(prosesgambar);
wadah.addChild(loader);
loader.x = 0;
loader.y = 0;

maka full script kita menjadi seperti ini

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

mulai();
function mulai()
{
 var kolom_nama:DataGridColumn = new DataGridColumn("Nama");
 myGrid.addColumn(kolom_nama);

 var kolom_phone:DataGridColumn = new DataGridColumn("Telpon");
 myGrid.addColumn(kolom_phone);

 var kolom_alamat:DataGridColumn = new DataGridColumn("Alamat");
 myGrid.addColumn(kolom_alamat);


 var kolom_jnisklmin:DataGridColumn = new DataGridColumn("Sex");
 myGrid.addColumn(kolom_jnisklmin);
 kolom_jnisklmin.width = 50;


 var semuadata:Array = [];
 var caridata:Array = [];

 var prosesload:URLLoader = new URLLoader();
 var isidata:XML = new XML();

 var loader:Loader = new Loader();
 prosesload.addEventListener(Event.COMPLETE, readXML);
 prosesload.load(new URLRequest("http://rickonada.tk/tool/upload/dataxmlmanager.php"));

 function readXML(event:Event):void
 {
  isidata = new XML(event.target.data);
  for each (var usr in isidata.databasemanager)
  {
   semuadata.push({nm: usr.nama.toUpperCase(), phone: usr.phone, sex: usr.sex, almt: usr.alamat, des : usr.description,gmbr : usr.gambar});
  }
  caridata = semuadata.concat();
  updateGrid();
 }
 function updateGrid():void
 {
  myGrid.dataProvider = new DataProvider ();

  for (var i:int = 0; i<caridata.length; i++)
  {
   myGrid.addItem({no: i,Nama: caridata[i].nm, Telpon: caridata[i].phone, Alamat: caridata[i].almt, Sex: caridata[i].sex});
   outpField.text = "Selamat Datang \n";//nama awal
   outpField.appendText("Klik pada Tabel untuk melihat detail \n");
   var prosesgambar:URLRequest = new URLRequest("http://rickonada.tk/tool/upload/photo.jpg.png");
   loader.load(prosesgambar);
   wadah.addChild(loader);
   loader.x = 0;
   loader.y = 0;
  }
 }
 myGrid.addEventListener(Event.CHANGE, info);

 function info(evt:Event)
 {

  outpField.text = "Nama: " + caridata[evt.target.selectedItem.no].nm + "\n";
  outpField.appendText(caridata[evt.target.selectedItem.no].des + "\n");
  wadah.removeChild(loader);
  var prosesgambar:URLRequest = new URLRequest(caridata[evt.target.selectedItem.no].gmbr);
  loader.load(prosesgambar);
  wadah.addChild(loader);
  loader.x = 0;
  loader.y = 0;
 }

}

By Ricko nada di Pustaka Flash terima kasih telah membaca :) Database Manager With Adobe Air AS3(klik Data)

Database Manager With Adobe Air AS3(Load data)

Melanjutkan tutorial Database Manager With Adobe Air AS3 pada tutorial sebelumnya Kali ini saya akan mencoba menampilkan data pada flash

biar gak penasaran dengan apa yang akan kita buat terlebih dahulu lihat cuplikan demonya

Live demonya

Demo Database Manager With AS3

atau jika live demo diatas tidak tampil bisa klik

Lihat Demo

Tahap Ketiga

buatlah sebuah dokument baru seperti gambar di bawah ini dan pilih Air

New Dokument

kemudian pada layer 1 buat 2 frame, pada frame kedua drag sebuah dataGrid component beri nama myGrid

Tahap Keempat

Penulisan Script As3

saatnya menulis script untuk load data dan ditampilkan pada data grid component

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

mulai();
function mulai()
{
 var kolom_nama:DataGridColumn = new DataGridColumn("Nama");
 myGrid.addColumn(kolom_nama);

 var kolom_phone:DataGridColumn = new DataGridColumn("Telpon");
 myGrid.addColumn(kolom_phone);

 var kolom_alamat:DataGridColumn = new DataGridColumn("Alamat");
 myGrid.addColumn(kolom_alamat);


 var kolom_jnisklmin:DataGridColumn = new DataGridColumn("Sex");
 myGrid.addColumn(kolom_jnisklmin);
 kolom_jnisklmin.width = 50;


 var semuadata:Array = [];
 var caridata:Array = [];

 var prosesload:URLLoader = new URLLoader();
 var isidata:XML = new XML();

 var loader:Loader = new Loader();
 prosesload.addEventListener(Event.COMPLETE, readXML);
 prosesload.load(new URLRequest("http://rickonada.tk/tool/upload/dataxmlmanager.php"));

 function readXML(event:Event):void
 {
  isidata = new XML(event.target.data);
  for each (var usr in isidata.databasemanager)
  {
   semuadata.push({nm: usr.nama.toUpperCase(), phone: usr.phone, sex: usr.sex, almt: usr.alamat, des : usr.description,gmbr : usr.gambar});
  }
  caridata = semuadata.concat();
  updateGrid();
 }
 function updateGrid():void
 {
  myGrid.dataProvider = new DataProvider ();

  for (var i:int = 0; i<caridata.length; i++)
  {
   myGrid.addItem({no: i,Nama: caridata[i].nm, Telpon: caridata[i].phone, Alamat: caridata[i].almt, Sex: caridata[i].sex});
  }
 }
}

Sistem kerja script ini sama dengan load xml pada artikel sebelumnya,. anda bisa membaca kembali disini : Integrasi xml dan flash as3

By Ricko nada di Pustaka Flash Terima kasih telah membaca Database Manager With Adobe Air AS3(Load data)

Database Manager With Adobe Air AS3(Persiapan)

Memulai tutorial Database Manager With Adobe Air AS3 ada baiknya kita terlebih dahulu mempersiapkan perlengkapan apa yang kita perlukan saat mendesain Database Manager With Adobe Air AS3

1. Adobe Flash (minimal CS4) karna kita akan berkerja dengan Adobe Air
2. Wamp atau Xamp (atau boleh juga virtual Mysql sejenis)atau boleh juga jika anda ingin langsung menggunakan secara online
3. EDITOR TeksDisini saya Menggunakan Notepad++ anda bisa menggunakan Dreamweaver atau yang lainnya
4. Paint Sebagai pengedit gambar ,... disini saya menggunakan Paint.Net
5. Perlengkapan tambahan Cemilan dan rokok jika diperlukan hehe :)

biar gak penasaran dengan apa yang akan kita buat berikut cuplikan demonya

Live demonya

Demo Database Manager With AS3

Tahap Pertama

Saya asumsikan anda telah membuat tabel database,Untuk tutorial ini saya menggunakan tabel dengan sql Dump seperti ini :

CREATE TABLE IF NOT EXISTS `databasemanager` (
  `nama` varchar(100) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `sex` varchar(1) NOT NULL,
  `description` text NOT NULL,
  `alamat` text NOT NULL,
  `gambar` text NOT NULL,
  PRIMARY KEY (`nama`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `databasemanager`
--

INSERT INTO `databasemanager` (`nama`, `phone`, `sex`, `description`, `alamat`, `gambar`) VALUES
('Ricko nada (ADMIN)', '085263411099', 'L', 'Programer flash yang biasa aja,..', 'pasaman sumatera barat', 'http://rickonada.tk/tool/upload/images/thumbnail_ricko.jpg'),
('PEPI SOFYARNI.', '-', 'P', 'Mungkin cuma si phy yang tau apa yang dipikirkan si phy ..... hehehe', 'Pesisir selatan', 'http://rickonada.tk/tool/upload/images/thumbnail_yphykk.jpg'),
('CUPRA BANDARI', '-', 'P', 'Teman terbaikku (Admin) meskipun Aku(Admin) tak pernah dianggap baik', 'Lampung', 'http://rickonada.tk/tool/upload/images/thumbnail_si_cupra(mbak).jpg'),
('HANIF WIRAWAN', '-', 'L', 'teman kuliah', 'Pasaman', 'http://rickonada.tk/tool/upload/images/thumbnail_Hanif.jpg');

Tahap Kedua

Menggenerate Data Tabel to Xml karna kita sadari tutorial untukk as3 lebih banyak menggunkan load xml dan agar lebih mudah ditampilkan pada flash saya menngunakan script Php berikut dan saya beri nama dataxmlmanager.php

<?php
header('Expires: Mon, 26 Jul 2012 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
 
$server = "localhost";
$username = "root";
$password = "";
$database = "namadbkamu";


mysql_connect($server, $username, $password);
mysql_select_db($database);

$namaTabel = "databasemanager";

header('Content-Type: text/xml');

$query = "SELECT * FROM $namaTabel ORDER BY nama";

$hasil = mysql_query($query);
$jumField = mysql_num_fields($hasil);

echo "<?xml version='1.0'?>";
echo "<data>";
while ($data = mysql_fetch_array($hasil))
{
   echo "<".$namaTabel.">";
   for ($i=0; $i<=$jumField-1; $i++)
   {
      $namaField = mysql_field_name($hasil, $i);
      echo "<".$namaField.">".$data[$namaField]."</".$namaField.">";
   }
   echo "</".$namaTabel.">";
}
echo "</data>";
?>

Dan jika di klik akan menghasilkan tampilan sebagai berikut

Demo Database Manager With AS3

Persiapan kita telah selesai selanjutnya kita akan pelajari bagaimana cara meload data pada flash di postingan berikutnya

Update 23 juli 2012 : Untuk melanjutkan tutorial Database Manager With Adobe Air AS3 pada tahap insert ,edit dan delet maka kita memerlukan penambahan script php insert,edit,dan delet berikut scripthnya:

PHP INSERT DATA BARU

berikut scripthnya dan beri nama insert.php

<?php
//lakukan koneksi ke MySQL
$server = "localhost";
$username = "root";
$password = "";
$database = "namadbkamu";
mysql_connect($server, $username, $password);
mysql_select_db($database);


$pagenama = $_POST['namamu'];
$pagetext = $_POST['ket'];
$pagepicture = $_POST['fotoku'];
$pagephon = $_POST['tlpn'];
$pagesex = $_POST['klmin'];
$pagealmt = $_POST['home'];

$masuk =mysql_query("INSERT INTO databasemanager  VALUES('$pagenama','$pagephon','$pagesex','$pagetext','$pagealmt','$pagepicture')");
?>

PHP UBAH DATA

berikut scripthnya dan beri nama update.php

<?php
//lakukan koneksi ke MySQL
$server = "localhost";
$username = "root";
$password = "";
$database = "namadbkamu";

mysql_connect($server, $username, $password);
mysql_select_db($database);


$pagenama = $_POST['namamu'];
$pagetext = $_POST['ket'];
$pagepicture = $_POST['fotoku'];
$pagephon = $_POST['tlpn'];
$pagesex = $_POST['klmin'];
$pagealmt = $_POST['home'];

$sql =mysql_query("UPDATE databasemanager SET nama='$pagenama', phone='$pagephon', sex='$pagesex' , description='$pagetext', alamat='$pagealmt', gambar='$pagepicture' WHERE nama='$pagenama'");

if($sql){
echo "phpConfirm=Sukses " ;
}
?>

PHP HAPUS DATA

berikut scripthnya dan beri nama hapus.php

<?php
//lakukan koneksi ke MySQL
$server = "localhost";
$username = "root";
$password = "";
$database = "namadbkamu";

mysql_connect($server, $username, $password);
mysql_select_db($database);

// membaca ID dari data yang akan dihapus
$nama= $_POST['nama'];
mysql_query("DELETE FROM databasemanager WHERE nama='$nama'");

?>

Disini terlihat bahwa saya memisahkan semua file php,, gunanya hanya agar terlihat jelas bagian scriptnya,.. jika anda ingin meringkas semua php menjadi 1 file anda bisa mempergunakan sistem case dan GET

By Ricko nada di Pustaka FlashTerima kasih telah membaca Database Manager With Adobe Air AS3(Persiapan)

Database Manager With Adobe Air AS3

Alhamdulillah,... akhirnya selesai juga membuat sebuah database Manager,.. yang Pustaka flash coba desain dan kembangkan dalama beberapa hari ini...,..guna mempermudah pengisian data dalam database,.. hasil akhir.. berbentuk aplikasi dekstop dengan adobe air,... yang dapat dipergunakan tanpa menggunakan browser

berikut Live demonya

Demo Database Manager With AS3

Fungsi nya hanya untuk mempermudah dalam pengisian data pada database,..jika seandainya anda mempunyai data pada database,...Database Manager ini delengkapi form,.. insert,Update,delet juga upload image dengan tipe file jpg dan jpeg,... dan Database Manager ini juga dapat anda manfaatkan untuk mengupdate produk online anda,..

dan untuk tutorial pembuatannya bisa anda ikuti step by step... di postingan berikutnya

By Ricko nada di Pustaka Flash Terima kasih telah membaca Database Manager With AS3