“Gimana sih caranya mengambil data dari MySql ke dalam Flash?”
Pertanyaan inilah yang sering saya dapat dari temen temen di messagebox fb maupun di email. Hem, Flash emang bener-bener luas jangkauannya mulai dari game, animasi, software desktop, hape, webdev, sampai pada database MySql . Sebetulnya banyak sekali tutorial di MediaTutorial yang sudah membahas tentang pertanyaan ini, tapi karena dibundled dengan project jadi seakan-akan tidak ada tutorial ini di MeTu.
Note: Tutorial ini juga membahas tentang crossdomain (Sanbox security flash) untuk akses data antar domain satu dengan domain lain.
Perlu diperhatikan bahwa dalam tutorial ini kita akan membuat ‘class’, jadi kita tidak meletakan kode dengan click kanan -> actions pada frame, melainkan membuat sebuah package class. Anda pun dapat melakukan dengan insert actions pada frame menggunakan kode yang sama dengan sedikit penyesuaian. Hem, saya lebih suka pakai package class meskipun terkadang perlu berpikir keras untuk bisa menjadikan class ini bekerja di stage. :’(
Hem, sebelum lanjut saya juga perlu cerewet sedikit, pada tutorial ini mungkin agak sedikit panjang, karena kita akan benar benar menghandle error dari URLLoader dan URLRequest. Jadi kita akan tahu bila Security Sanbox tidak mengizinkan akses data, kita akan tahu bila file tidak ditemukan di server, dan kita juga akan tahu bila database server error.
OK, Mari kita mulai, coba perhatikan screenshot dibawah ini:
Ini merupakan isi dari source code kita, saya telah menyediakan ‘table_data_sql.sql’ yang dapat anda import ke dalam database sebagai sampel data. Anda pun dapat membaca ‘@ReadMe-CaraInstall.txt’ untuk bagaimana menginstall simple app ini.
‘ClassGetMySql.as’ merupakan class kita. Class inilah yang mengatur semua coding actionscript.
‘configuration_mysql.php’ berisikan autentikasi database yang didalamnya terdapat username, password, database, dan host dari MySql kita.
‘configuration_url.xml’ berisikan sebuah domain untuk data yang ingin diakses. Domain ini kita masukan kedalam sebuah tag xml ‘base_url’. Sebetulnya tanpa domainpun sudah bisa, tapi penggunaan domain dalam base_url ini nanti akan sangat mempermudah kita dalam membuat aplikasi-aplikasi selanjutnya terutama bila ingin merubah nama domain.
‘process.php’ merupakan sebuah file yang mengambil data dari database kemudian mengconvertnya kedalam xml.
Perlu diperhatikan bahwa actionscript bekerja dengan Extensible Markup Language yang disebut dengan XML. Jadi data anda yang ada didalam database akan bisa diparsing dalam actionscript bila data tersebut telah dalam bentuk XML. Maka dari itu, kita menggunakan php untuk mengambil data dari MySql database kemudian diconvert ke XML.
#BREAK;
/*hem, pasti akan jadi tutorial yang panjang kalo dibikin teks ginian*/
#CONTINUE;
Mari kita mulai dengan membuat sebuah .fla file dan berikan ActionScript3 sebagai format scriptnya. Seperti yang sudah saya bilang di awal, kita akan menggunakan Class saja, sehingga terlebih dahulu anda harus membuat sebuah Class untuk stage/fla yang sudah anda buat tadi, lihat gambar berikut:
Jangan lupa untuk menyimpan terlebih dahulu file .fla dan .as nya, :)
Perhatikan ClassGetMySql.as kita berikut ini:
Nah, ini adalah class kita , ingat class dalam actionscript berada dalam bentuk package. Ok, kita akan break sebentar, kita tinggalkan Class kita ini. Terlebih dahulu mari kita bahas file-file .php kita.
==================================================================================
‘configuration_mysql.php’ berisikan data untuk login ke database, coba perhatikan kode berikut ini:
Configuration_mysql.php
Inti dari ‘configuration_mysql.php’ di atas adalah bila kita gagal konek ke database, atau gagal menyeleksi database, maka akan mereturn sebuah file xml yang nantinya dapat kita parsing dalam Actionscript.
==================================================================================
Configuration_url.xml
‘configuration_url.xml’ merupakan file xml yang berisi pengaturan base_url. Saya menamakannya base_url saja. Pada base url ini, nanti kita bisa mensetting domain tempat script kita dijalankan.
==================================================================================
Process.php
Anda dapat memanggil dengan ‘process.php’ saja, atau bisa juga ‘process.php?sort=alamat&filter=karanganyar’ dan lain lain sesuai kreatifitas anda. Secara default, process.php akan mengeksekusi query:
query = "SELECT * FROM `data_anggota` ORDER BY `nama` ASC";
jadi sebetulnya kita tidak perlu menggunakan sort dan filter, tetapi sebagai contoh saya perlu menyertakannya dalam process.php ini.
Setelah mengeksekusi query, maka hasil dari data didalam database MySql dikonvert kedalam XML, seperti pada hasil akhir dari process berikut ini:
Oke, sampai disini saya harap tidak bingung dengan file file php dan xml yang baru saja kita bahas. Tidak ada kode yang susah pada file-file diatas. Dan pasti semuanya mudah dibaca. Kita tidak akan membahas kode php/xml disini, karena kita akan menitik beratkan pada Class Actionscript kita.
Sekarang mari kita lanjut membahas ClassGetMySql.as ,
Perhatikan gambar ClassGetMySql.as yang telah dimodifikasi berikut ini:
Pada Class ini, kita membuat 7 buah fungsi yang dapat anda lihat dengan awalan ‘public function’ di atas. Public function ClassGetMySql merupakan constructor dari Class kita. Disusul di sana fungsi yang lain diantaranya sebagai berikut:
/////////////////////
Tracing(txt){}
loadConfigurationUrl(){}
loadConfigurationSuccess(e:Event):void{}
generateItem(){}
generateItemSuccess(e:Event){}
IOerrorHandler(event:IOErrorEvent):void{}
Selain 7 fungsi ini, kita juga membuat beberapa variable (diawali dengan public var) yang akan kita gunakan dalam fungsi. Juga kita harus mengimport Class bawaan Actionscript lain sesuai dengan variable dan kebutuhan fungsi.
*[PENTING] :: Cara kerja dari Class ini adalah loadConfigurationUrl() -> loadConfigurationSuccess() -> generateItem() > generateItemSuccess()
Simple bukan, fungsi Tracing() hanyalah untuk menampilkan text dan fungsi IOErrorHandler() untuk konfirmasi saat error event.
OK, Mari kita kupas fungsi ini satu persatu :)
1.)loadConfigurationUrl(){}
Sama seperti yang saya bilang diatas, sebenarnya anda dapat langsung memasukan url/domain kedalam process, tapi untuk memudahkan merubah url, maka disini saya membuat sebuah configuration_url.xml yang akan diload oleh fungsi ini. Lihat gambar:
Kita akan mencoba untuk meload ‘configuration_url.xml’, bila berhasil kita akan mengeksekusi loadConfigurationUrlSuccess(), bila gagal kita memanggil IOerrorHandler(). Sebelum 2 fungsi ini dieksekusi, saya juga menggunakan handler untuk SecurityError. Terkadang URLReques-URLLoader gagal mengambil sebuah file karena Security Sanbox. Apakah Security SanBox itu?? Kita akan membahasnya di akhir tutorial ini. :)
2.)loadConfigurationSuccess(){}
Segera setelah Event.COMPLETE pada fungsi loadConfigurationUrl() tercapai, maka otomatis fungsi loadConfigurationSuccess ini dieksekusi. Tidak ada yang istimewa dari fungsi ini. Kita hanya mengambil base_url dari fungsi sebelumnya. Setelah base_url kita dapatkan, segera kita akan memanggil fungsi generateItem(). Lihat gambar:
3.)generateItem(){}
Setelah kita mendapatkan ‘base_url’, kita akan mencoba melakukan process dengan memanggil ‘process.php’. File inilah yang akan men-generate kode xml untuk dapat diparsing dalam Actionscript. Hasil akhir dari generate xml dapat anda lihat pada contoh xml diatas. Lihat gambar:
4.)generateItemSuccess(){}
Pada fungsi sebelumnya (generateItem()), kita hanya memanggil process.php yang akan mengambil data dari MySql kemudian mengconvertnya kedalam XML. Setelah semua terconvert dan terloading, maka generateItemSuccess() pun dieksekusi. Fungsi ini akan mengambil item dari XML yang telah terloading tadi. Lihat gambar:
Perhatikan pada looping -> for each(var resultXML:XML in xmlData.personal){} , di sini kita akan mengambil data xml dari ‘personal tag’. Pada looping inilah kita dapat melakukan apa saja terhadap data item yang telah kita loading. :)
SIMPLE BUKAN??
=================================================================================
SANBOX SECURITY, apa itu sandbox security?
Nah, saat kita mendevelop sebuah aplikasi yang berhubungan dengan ‘server’ dan memakai URLLoader – URLRequest pasti akan bingung dengan error dan error yang tidak jelas. Bila server kita adalah localhost, kemudian file fla kita berada di D:/ maka tidak masalah saat process IO (Input-Output). Tapi coba anda bayangkan bila file process.php kita tidak di localhost melainkan berada di server online misalnya http://mediatutorial.web.id/process.php, mungkinkah kita bisa/diizinkan untuk mengambil data dari domain itu??
Atau contoh lain, misalnya swf anda beradi di domain jhono.com, kemudian process.php berada di mediatutorial.web.id, mungkinkah swf di jhono.com dapat mengambil data dari meditutorial.web.id???
Inilah kenapa Adobe merancang flash player dengan sebuah security koneksi antar domain dengan nama SandBox Security. Intinya secara default flash player tidak mengizinkan transfer/ambil data antar domain yang berbeda untuk alasan keamanan kecuali domain target / domain tujuan telah disetting sedemikian untuk diambil datanya dari domain lain.
Lalu bagaimana supaya kita dapat transfer dan kirim data antar domain?
Simple , gunakan saja crossdomain.xml dan upload ke domain tujuan. Crossdomain inilah yang digunakan flash player untuk mengecek allow access pada domain tujuan. Berikut merupakan contoh dari crossdomain:
crossdomain.xml
Dengan menggunakan allow-access-from domain = “*”, maka domain tujuan ini akan dapat diakses antar domain manapun TERMASUK DIAKSES DARI KOMPUTER LOCAL , terutama saat membuat aplikasi fla. Anda dapat mensetting agar beberapa domain saja yang diizinkan dengan menggantinya seperti ini:
<allow-access-from domain="http://domain1.com" />
<allow-access-from domain="http://domain2.com" />
<allow-access-from domain="http://domain3.com" />
Dan lain lain.
CONTOH:
Hem, saya punya 2 buah file process.php, anda bisa mencobanya setelah anda download source code tutorial ini. Manakah yang bisa diakses??
1)Dengan crossdomain = http://structurecore.xtreemhost.com/1_demo/syahrul_center/crossdomain_ada/process.php
2)Tanpa crossdomain = http://structurecore.xtreemhost.com/1_demo/syahrul_center/crossdomain_tak_ada/process.php
Moga moga bermanfaat untuk yang masih pemula dalam URLLoader URLRequest :) ,
Hem, sebelum lanjut saya juga perlu cerewet sedikit, pada tutorial ini mungkin agak sedikit panjang, karena kita akan benar benar menghandle error dari URLLoader dan URLRequest. Jadi kita akan tahu bila Security Sanbox tidak mengizinkan akses data, kita akan tahu bila file tidak ditemukan di server, dan kita juga akan tahu bila database server error.
OK, Mari kita mulai, coba perhatikan screenshot dibawah ini:
Ini merupakan isi dari source code kita, saya telah menyediakan ‘table_data_sql.sql’ yang dapat anda import ke dalam database sebagai sampel data. Anda pun dapat membaca ‘@ReadMe-CaraInstall.txt’ untuk bagaimana menginstall simple app ini.
‘ClassGetMySql.as’ merupakan class kita. Class inilah yang mengatur semua coding actionscript.
‘configuration_mysql.php’ berisikan autentikasi database yang didalamnya terdapat username, password, database, dan host dari MySql kita.
‘configuration_url.xml’ berisikan sebuah domain untuk data yang ingin diakses. Domain ini kita masukan kedalam sebuah tag xml ‘base_url’. Sebetulnya tanpa domainpun sudah bisa, tapi penggunaan domain dalam base_url ini nanti akan sangat mempermudah kita dalam membuat aplikasi-aplikasi selanjutnya terutama bila ingin merubah nama domain.
‘process.php’ merupakan sebuah file yang mengambil data dari database kemudian mengconvertnya kedalam xml.
Perlu diperhatikan bahwa actionscript bekerja dengan Extensible Markup Language yang disebut dengan XML. Jadi data anda yang ada didalam database akan bisa diparsing dalam actionscript bila data tersebut telah dalam bentuk XML. Maka dari itu, kita menggunakan php untuk mengambil data dari MySql database kemudian diconvert ke XML.
#BREAK;
/*hem, pasti akan jadi tutorial yang panjang kalo dibikin teks ginian*/
#CONTINUE;
Mari kita mulai dengan membuat sebuah .fla file dan berikan ActionScript3 sebagai format scriptnya. Seperti yang sudah saya bilang di awal, kita akan menggunakan Class saja, sehingga terlebih dahulu anda harus membuat sebuah Class untuk stage/fla yang sudah anda buat tadi, lihat gambar berikut:
Jangan lupa untuk menyimpan terlebih dahulu file .fla dan .as nya, :)
Perhatikan ClassGetMySql.as kita berikut ini:
Nah, ini adalah class kita , ingat class dalam actionscript berada dalam bentuk package. Ok, kita akan break sebentar, kita tinggalkan Class kita ini. Terlebih dahulu mari kita bahas file-file .php kita.
==================================================================================
‘configuration_mysql.php’ berisikan data untuk login ke database, coba perhatikan kode berikut ini:
Configuration_mysql.php
Inti dari ‘configuration_mysql.php’ di atas adalah bila kita gagal konek ke database, atau gagal menyeleksi database, maka akan mereturn sebuah file xml yang nantinya dapat kita parsing dalam Actionscript.
==================================================================================
Configuration_url.xml
‘configuration_url.xml’ merupakan file xml yang berisi pengaturan base_url. Saya menamakannya base_url saja. Pada base url ini, nanti kita bisa mensetting domain tempat script kita dijalankan.
==================================================================================
Process.php
Anda dapat memanggil dengan ‘process.php’ saja, atau bisa juga ‘process.php?sort=alamat&filter=karanganyar’ dan lain lain sesuai kreatifitas anda. Secara default, process.php akan mengeksekusi query:
query = "SELECT * FROM `data_anggota` ORDER BY `nama` ASC";
jadi sebetulnya kita tidak perlu menggunakan sort dan filter, tetapi sebagai contoh saya perlu menyertakannya dalam process.php ini.
Setelah mengeksekusi query, maka hasil dari data didalam database MySql dikonvert kedalam XML, seperti pada hasil akhir dari process berikut ini:
Oke, sampai disini saya harap tidak bingung dengan file file php dan xml yang baru saja kita bahas. Tidak ada kode yang susah pada file-file diatas. Dan pasti semuanya mudah dibaca. Kita tidak akan membahas kode php/xml disini, karena kita akan menitik beratkan pada Class Actionscript kita.
Sekarang mari kita lanjut membahas ClassGetMySql.as ,
Perhatikan gambar ClassGetMySql.as yang telah dimodifikasi berikut ini:
Pada Class ini, kita membuat 7 buah fungsi yang dapat anda lihat dengan awalan ‘public function’ di atas. Public function ClassGetMySql merupakan constructor dari Class kita. Disusul di sana fungsi yang lain diantaranya sebagai berikut:
/////////////////////
Tracing(txt){}
loadConfigurationUrl(){}
loadConfigurationSuccess(e:Event):void{}
generateItem(){}
generateItemSuccess(e:Event){}
IOerrorHandler(event:IOErrorEvent):void{}
Selain 7 fungsi ini, kita juga membuat beberapa variable (diawali dengan public var) yang akan kita gunakan dalam fungsi. Juga kita harus mengimport Class bawaan Actionscript lain sesuai dengan variable dan kebutuhan fungsi.
*[PENTING] :: Cara kerja dari Class ini adalah loadConfigurationUrl() -> loadConfigurationSuccess() -> generateItem() > generateItemSuccess()
Simple bukan, fungsi Tracing() hanyalah untuk menampilkan text dan fungsi IOErrorHandler() untuk konfirmasi saat error event.
OK, Mari kita kupas fungsi ini satu persatu :)
1.)loadConfigurationUrl(){}
Sama seperti yang saya bilang diatas, sebenarnya anda dapat langsung memasukan url/domain kedalam process, tapi untuk memudahkan merubah url, maka disini saya membuat sebuah configuration_url.xml yang akan diload oleh fungsi ini. Lihat gambar:
Kita akan mencoba untuk meload ‘configuration_url.xml’, bila berhasil kita akan mengeksekusi loadConfigurationUrlSuccess(), bila gagal kita memanggil IOerrorHandler(). Sebelum 2 fungsi ini dieksekusi, saya juga menggunakan handler untuk SecurityError. Terkadang URLReques-URLLoader gagal mengambil sebuah file karena Security Sanbox. Apakah Security SanBox itu?? Kita akan membahasnya di akhir tutorial ini. :)
2.)loadConfigurationSuccess(){}
Segera setelah Event.COMPLETE pada fungsi loadConfigurationUrl() tercapai, maka otomatis fungsi loadConfigurationSuccess ini dieksekusi. Tidak ada yang istimewa dari fungsi ini. Kita hanya mengambil base_url dari fungsi sebelumnya. Setelah base_url kita dapatkan, segera kita akan memanggil fungsi generateItem(). Lihat gambar:
3.)generateItem(){}
Setelah kita mendapatkan ‘base_url’, kita akan mencoba melakukan process dengan memanggil ‘process.php’. File inilah yang akan men-generate kode xml untuk dapat diparsing dalam Actionscript. Hasil akhir dari generate xml dapat anda lihat pada contoh xml diatas. Lihat gambar:
4.)generateItemSuccess(){}
Pada fungsi sebelumnya (generateItem()), kita hanya memanggil process.php yang akan mengambil data dari MySql kemudian mengconvertnya kedalam XML. Setelah semua terconvert dan terloading, maka generateItemSuccess() pun dieksekusi. Fungsi ini akan mengambil item dari XML yang telah terloading tadi. Lihat gambar:
Perhatikan pada looping -> for each(var resultXML:XML in xmlData.personal){} , di sini kita akan mengambil data xml dari ‘personal tag’. Pada looping inilah kita dapat melakukan apa saja terhadap data item yang telah kita loading. :)
SIMPLE BUKAN??
=================================================================================
SANBOX SECURITY, apa itu sandbox security?
Nah, saat kita mendevelop sebuah aplikasi yang berhubungan dengan ‘server’ dan memakai URLLoader – URLRequest pasti akan bingung dengan error dan error yang tidak jelas. Bila server kita adalah localhost, kemudian file fla kita berada di D:/ maka tidak masalah saat process IO (Input-Output). Tapi coba anda bayangkan bila file process.php kita tidak di localhost melainkan berada di server online misalnya http://mediatutorial.web.id/process.php, mungkinkah kita bisa/diizinkan untuk mengambil data dari domain itu??
Atau contoh lain, misalnya swf anda beradi di domain jhono.com, kemudian process.php berada di mediatutorial.web.id, mungkinkah swf di jhono.com dapat mengambil data dari meditutorial.web.id???
Inilah kenapa Adobe merancang flash player dengan sebuah security koneksi antar domain dengan nama SandBox Security. Intinya secara default flash player tidak mengizinkan transfer/ambil data antar domain yang berbeda untuk alasan keamanan kecuali domain target / domain tujuan telah disetting sedemikian untuk diambil datanya dari domain lain.
Lalu bagaimana supaya kita dapat transfer dan kirim data antar domain?
Simple , gunakan saja crossdomain.xml dan upload ke domain tujuan. Crossdomain inilah yang digunakan flash player untuk mengecek allow access pada domain tujuan. Berikut merupakan contoh dari crossdomain:
crossdomain.xml
Dengan menggunakan allow-access-from domain = “*”, maka domain tujuan ini akan dapat diakses antar domain manapun TERMASUK DIAKSES DARI KOMPUTER LOCAL , terutama saat membuat aplikasi fla. Anda dapat mensetting agar beberapa domain saja yang diizinkan dengan menggantinya seperti ini:
<allow-access-from domain="http://domain1.com" />
<allow-access-from domain="http://domain2.com" />
<allow-access-from domain="http://domain3.com" />
Dan lain lain.
CONTOH:
Hem, saya punya 2 buah file process.php, anda bisa mencobanya setelah anda download source code tutorial ini. Manakah yang bisa diakses??
1)Dengan crossdomain = http://structurecore.xtreemhost.com/1_demo/syahrul_center/crossdomain_ada/process.php
2)Tanpa crossdomain = http://structurecore.xtreemhost.com/1_demo/syahrul_center/crossdomain_tak_ada/process.php
Moga moga bermanfaat untuk yang masih pemula dalam URLLoader URLRequest :) ,
UPDATE 2 November 2012
XAMPP 1.8.0 keatas!
Terkadang tanpa disadari process.php tidak bisa jalan, saat preview di Adobe Flash kita mendapatkan output bahwa xml not well formed, , sehingga flash quiz kita error.
Untuk anda pengguna Xampp 1.8.0 keatas, pasti akan mendapatkan error saat ingin membuka http://localhost/folder/process.php
dan akan mendapatkan tampilan row code dibrowser misalnya seperti ini:
\n"; $sort = isset($_GET['sort'])?$_GET['sort']:''; $query = 'SELECT * FROM `quiz_data_siswa` ORDER BY `id` ASC'; switch($sort){ case 'no_induk': $query = "SELECT * FROM `quiz_data_siswa` ORDER BY `no_induk` ASC"; break; case 'nama': $query = "S..... dan seterusnya
solusinya adalah, coba ganti <? dengan <?php , :)
XAMPP 1.8.0 keatas!
Terkadang tanpa disadari process.php tidak bisa jalan, saat preview di Adobe Flash kita mendapatkan output bahwa xml not well formed, , sehingga flash quiz kita error.
Untuk anda pengguna Xampp 1.8.0 keatas, pasti akan mendapatkan error saat ingin membuka http://localhost/folder/process.php
dan akan mendapatkan tampilan row code dibrowser misalnya seperti ini:
\n"; $sort = isset($_GET['sort'])?$_GET['sort']:''; $query = 'SELECT * FROM `quiz_data_siswa` ORDER BY `id` ASC'; switch($sort){ case 'no_induk': $query = "SELECT * FROM `quiz_data_siswa` ORDER BY `no_induk` ASC"; break; case 'nama': $query = "S..... dan seterusnya
solusinya adalah, coba ganti <? dengan <?php , :)