Flash CS6 dan SQLite database

Pada tutorial ini kita akan memperagakan CRUD (Create, Read, Update, Delete) menggunakan sqlite.Sebagai media penampil, kita akan menggunakan komponen bawaan dari Flash yaitu DataGrid.

Database portable SQLite, yaitu sebuah flash file database yang sangat efisien sebagai tempat penyimpan data dalam komputer. Database ini bersifat portable, sehingga client tidak perlu repot install database, run database dan lain sebagainya.

Persiapan

• Pastikan Publish Target nya adalah Air, disini saya menggunakan Air 3.2 for desktop.
• Untuk setting publish ini anda dapat melihat properties window anda.

Selanjutnya kita akan membuat tampilan terlebih dahulu.

Untuk membuat DataGrid, Anda hanya perlu drag and drop komponen DataGrid. 

Kemudian DataGrid ini kita berikan instance name adalah ‘DataGridView’.

SQLite database

Pada tahap ini kita akan membuat database menggunakan SQLite Browser.(download).

Kita akan membuat sebuah database ‘MenuMakanan.db’, dengan nama table ‘menu_table’ yang berisi beberapa kolom yaitu ‘ID’, ‘Nama’, ‘Harga’.
Dengan menggunakan SQLite Browser Anda dapat langsung membuatnya dengan mudah.
Jika Anda sudah menginstal DB Browser for SQLite.

• Buka DB Browser for SQLite.

• Pada panel DB Browser for SQLite > klik New Database.
• Pada kotak dialog Choose a Filename to save under > file name: MenuMakanan > Save.
• Pada kotak dialog Edit table definition > ketik menu_table.

• Klik Add fields > tentukan;
• Name : ID
• Type   : INTEGER
• PK      : Centang

• Untuk Menambah baris Makanan dan Harga, Klik Add fields lalu ikuti langkah seperti diatas.
• Klik OK untuk mengakhiri pembuatan tabel.

Mengisi Tabel

• Pada panel DB Browser for SQLite > klik Browse Data.
• Pada Kolom ID = 1, Makanan = Ayam Bakar, Harga = Rp. 15.000 dan seterusnya

Isi tabel sesuai dengan keinginan Anda, atau Anda dapat melakukan perubahan pada kesempatan yang lain.

Dalam Latihan ini, saya ingin Anda fokus pada bagaimana cara menampilkan isi tabel yang berada dalam database, dapat ditampilkan pada DataGrid yang Anda buat pada Flash.

ActiocScripts

• Buka panel Actions (f9)
• Klik keyframe 1 untuk memilihnya.
• Tempel/paste kode dibawah ini ke panel Actions.

import flash.data.SQLConnection; import flash.data.SQLResult; import flash.events.SQLErrorEvent; import flash.events.SQLEvent; import flash.filesystem.File; import flash.events.Event; import flash.data.SQLStatement; import fl.data.DataProvider; ////Memanggil database///// var selectStmt:SQLStatement; var conn:SQLConnection = new SQLConnection(); loadDb(); function loadDb():void{ status.text ="Loading database..."; conn.addEventListener(SQLEvent.OPEN, openHandler); conn.addEventListener(SQLErrorEvent.ERROR, errorHandler); var folder:File = File.applicationDirectory; var dbFile:File = folder.resolvePath("MenuMakanan.db"); conn.open(dbFile); } function openHandler(event:SQLEvent):void { status.text += "\nLoading database success "; getData(); } function errorHandler(event:SQLErrorEvent):void { status.text = event.error.message; status.text += event.error.details; } function getData():void{ status.text += "\nLoading data..."; selectStmt = new SQLStatement(); selectStmt.sqlConnection = conn; var sql:String = "SELECT Harga, Nama FROM menu_table"; selectStmt.text = sql; selectStmt.addEventListener(SQLEvent.RESULT, getDataSuccess); selectStmt.addEventListener(SQLErrorEvent.ERROR, getDataError); selectStmt.execute(); } function getDataSuccess(e:SQLEvent):void{ var result:SQLResult = selectStmt.getResult(); DataGridView.dataProvider = new DataProvider(result.data); status.text += "\nLoading data success"; } function getDataError(e:SQLErrorEvent):void{ status.text += e.error.message; }

Kode XML

• Pada menu File > pilih New.
• Pada kotak dialog New Document > pilih ActionScript File.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <application xmlns="http://ns.adobe.com/air/application/3.2"> <id>MenuMakanan</id> <filename>MenuMakanan-getData</filename> <description/> <!-- To localize the description, use the following format for the description element.<description><text xml:lang="en">English App description goes here</text><text xml:lang="fr">French App description goes here</text><text xml:lang="ja">Japanese App description goes here</text></description>--> <name>MenuMakanan-getData</name> <!-- To localize the name, use the following format for the name element.<name><text xml:lang="en">English App name goes here</text><text xml:lang="fr">French App name goes here</text><text xml:lang="ja">Japanese App name goes here</text></name>--> <copyright/> <initialwindow> <content>MenuMakanan-getData.swf</content> <systemchrome>standard</systemChrome> <transparent>false</transparent> <visible>true</visible> <fullscreen>false</fullScreen> <aspectratio>portrait</aspectRatio> <rendermode>auto</renderMode> <maximizable>false</maximizable> <minimizable>true</minimizable> <resizable>false</resizable> </initialWindow> <icon/> <customupdateui>false</customUpdateUI> <allowbrowserinvocation>false</allowBrowserInvocation> <versionnumber>1.0</versionNumber> </application>

Jangan lupa untuk menyimpan file ActionScript pada folder yang sama dengan file kerja Flash.

• Pada menu File > pilih Save.
• Pada kotak dialog Save > kotak input File name: ketik MenuMakanan.
• Kembali ke file Flash.
• Tekan Ctrl+Alt+Enter untuk melihat hasilkerja.

Semoga Sukses!!!.






File Kerja, download.