PART 1: Select Data CRUD SQLITE dengan Flash Air
Pada tutorial Flash Air sebelumnya kita telah membahas bagaimana cara menyimpan data dalam Flash secara Offline. Akhirnya kita menggunakan sebuah database portable SQLite, yaitu sebuah flash file database yang sangat efisien sebagai database penyimpan data dalam komputer. Database ini portable, sehingga client anda tidak perlu repot install database, run database dan lain sebagainya.
Pada tutorial berikut ini kita akan memperagakan CRUD (Create, Read, Update, Delete) data pada sqlite. Dan untuk pembahasan pertama ini kita hanya akan memaparkan untuk select data / read data saja sedangkan untuk update dan delete akan kita bahas pada tutorial berikutnya.
Sebagai media, kita akan menggunakan komponen bawaan dari Flash yaitu DataGrid.
Mari kita akan membahasnya sambil praktek tahap demi tahab.
0.Tahap persiapan, pastikan anda memiliki Adobe Flash dan SQLite Browser (optional).
Adobe Flash mutlak anda miliki untuk belajar praktek Actionscript, saat tutorial ini dibuat saya menggunakan Adobe Flash CS6 profesional.
Untuk SQLite Browser saya berikan optional karena ini hanya digunakan untuk membantu saja. Saya ingin membuat database dan tabel serta kolom kolom yang ada pada tabel dengan SQLite Browser ini, tidak membuat on the fly dengan actionscript seperti pada tutorial sebelumnya.
Mengingat SQLite itu portable dan flat, software ini tidak mutlak anda miliki. Bila anda ingin download SQLite Browser, anda dapat membuka link SourceForge pada: http://sqlitebrowser.sourceforge.net
Lihat gambar 0:
1.Tahap pertama, buatlah sebuah project flash baru atau project air baru.
Pastikan Publish Target nya adalah Air, disini saya menggunakan Air 3.2 for desktop.
Untuk setting publish ini anda dapat melihat properties window anda.
Lihat gambar 1:
Selain melalui properties window, anda dapat juga mengedit target melalui publish setting.
Lihat gambar 1.1:
2.Tahap kedua, buatlah tampilan GUI nya terlebih dahulu.
Lihat gambar 2:
Untuk membuat DataGrid , anda hanya perlu drag and drop DataGrid component dari window component. Kemudian dataGrid ini kita berikan instance name adalah ‘DataGridView’.
Kemudian kita juga men-drag and drop komponen textArea, kemudian kita berikan instance name ‘status’.
Untuk menampilkan window component, bila belum tertampil, anda dapat mengklik ( Menu atas pilih Window --- Component)
Lihat gambar 2.1:
3.Tahap ketiga, mari buat SQLite database kita.
Untuk membuatnya, anda dapat menggunakan SQLite Browser yang telah kita sampaikan di awal.
Saya akan membuat sebuah database ‘ContactBook.db’, kemudian saya akan membuat sebuah table ‘person_table’ yang berisi beberapa kolom yaitu ‘ID’, ‘Nama’, ‘PhoneNumber’.
Dengan menggunakan SQLite Browser anda dapat langsung membuatnya tanpa mengetikan kode satu huruf pun. :) Kita tidak akan membahas bagaimana cara membuatnya di SQLite Browser. Anda dapat mencobanya sendiri, sangat mudah sekali.
Berikut adalah screenshot hasil akhir pembuatan database, tabel, dan kolom.
Lihat gambar 3:
Gambar berikut merupakan screenshot pembuatan tabel ‘person_table’ dan penambahan kolom – kolom.
Lihat gambar 4:
Gambar berikut merupakan screenshot saat kita memasukan data.
Lihat gambar 5:
4.Tahap keempat, mari kita kembali ke Adobe Flash dan melihat project Air kita dan mulai memasukan package yang dibutuhkan.
Mari kita buat layer baru tempat dimana kita akan mengetikan kode actionscript.
Yang harus kita ketikan terlebih dahulu adalah mengimport package-package yang berhubungan dengan project kita.
Lihat gambar 6:
Ingat, kita menggunakan DataProvider package sebagai dataSource untuk DataGrid komponen kita nantinya.
5.Tahap kelima, kita akan membuat variable – variable yang kita butuhkan.
Lihat gambar 7:
Kita sementara hanya membuat 2 buah variable, yaitu selectSmt yang merupakan class SQLStatement dan variable conn yang merupakan class dari SQLConnection.
6.Tahap keenam, mari kita membuat fungsi – fungsi yang kita gunakan.
Kita akan membuat sebuah fungsi yang akan langsung dieksekusi saat program berjalan, saya akan menamakan fungsi ini dengan nama loadDb();
Lihat gambar 8:
Pada fungsi loadDb() ini kita terlebih dahulu menambahkan sebuah text “loading database...” ke komponen textArea yang telah kita beri instance name dengan ‘status’ tadi.
Kemudian kita memberikan sebuah SQLEvent untuk conn, yaitu pada saat berhasil meng-open koneksi kita memberikan sebuah fungsi handler yaitu openHandler().
Begitu juga saat error sql connection, kita memberikan sebuah fungsi handler yaitu errorHandler();
Fungsi berikutnya sudah kita bahas pada tutorial sebelumnya, kita akan mencari file database kita. Tadi kita sudah membuat sebuah file database yaitu misalnya ContactBook.db. Sebaiknya kita menyimpan dulu project air ini ke folder yang sama dengan letak file database.
Ingat, saya menggunakan open(dbFile) bukan openAsync(dbFile). Karena saya ingin memakai synchronous (berurutan) bukan asynchronous (bersamaan). Tentang ini juga sudah kita bahas pada tutorial sebelumnya.
7.Tahap ketujuh, kita harus meng-eksekusi fung loadDb() saat program diload.
Untuk melakukannya, kita dapat memanggil fungsi loadDb() langsung.
Lihat gambar 9:
Mudah bukan?
8.Tahap kedelapan, kita harus membuat fungsi openHandler() dan errorHandler()
Pada fungsi loadDb(), kita memberikan sebuah event saat berhasil konek ke database, fungsi tersebut adalah openHandler(). Serta bila error kita juga memberikan fungsi errorHandler().
Berikut merupakan screenshot dua fungsi diatas.
Lihat gambar 10:
Nah, bila koneksi berhasil, maka kita terlebih dahulu memberikan teks “loading database succsess” ke komponen textArea yang kita berikan nama “status” tadi. Setelah itu kita akan memanggil fungsi getData();
Bila terjadi error maka kita juga akan menampilkan errornya pada “status”.
9.Tahap kesembilan, sekarang kita buat fungsi getData();
Pada tahap sebelumnya, bila kita berhasil konek database, maka kita memanggil fungsi openHandler() nah didalamnya ada fungsi getData();
Berikut merupakan screenshot fungsi tersebut.
Lihat gambar 11:
Terlebih dahulu kita akan menambahkan text “loading data..” kedalam textArea “status”. Setelah itu, karena kita ingin ngeksekusi query sql, kita perlu membuat variable baru yaitu “selectStmt” yang berupakan class SQLStatement.
Kemudian kita ketikan query, kita berikan dua buah event pada proses eksekusi query yaitu getDataSuccess() dan getDataError().
getDataSuccess() digunakan saat proses eksekusi berhasil. Sedangkan getDataError() dieksekusi saat terjadi error.
10.Tahap kesepuluh, mari kita buat fungsi getDataSuccess() dan getDataError().
Lihat gambar 12:
Pada fungsi getDataSuccess() kita membuat variable “result” yang merupakan class “SQLResult”. Class ini dapat diidentifikasi oleh Adobe Flash setelah anda mengimport package SQLResult.
Masih ingatkah dengan komponen dataGrid kita? Di awak kita telah memberikan sebuah nama “DataGridView” pada komponen dataGrid kita. Sekarang kita akan mensetting properties “dataProvider” nya dengan data hasil eksekusi sql tadi.
Mudah bukan?
Nah, pasti anda tidak akan mengira ternyata hanya sepuluh tahab ini saja.:) mudah mudahan bermanfaat dan saya yakin bila anda mau membaca dan mencoba pasti sangat mudah sekali pemrograman Flash ini.
Berikut saya sediakan kode full nya dan saya sediakan juga source code yang dapat anda download (Adobe Flash Profesional CS6, CS5)
0.Tahap persiapan, pastikan anda memiliki Adobe Flash dan SQLite Browser (optional).
Adobe Flash mutlak anda miliki untuk belajar praktek Actionscript, saat tutorial ini dibuat saya menggunakan Adobe Flash CS6 profesional.
Untuk SQLite Browser saya berikan optional karena ini hanya digunakan untuk membantu saja. Saya ingin membuat database dan tabel serta kolom kolom yang ada pada tabel dengan SQLite Browser ini, tidak membuat on the fly dengan actionscript seperti pada tutorial sebelumnya.
Mengingat SQLite itu portable dan flat, software ini tidak mutlak anda miliki. Bila anda ingin download SQLite Browser, anda dapat membuka link SourceForge pada: http://sqlitebrowser.sourceforge.net
Lihat gambar 0:
1.Tahap pertama, buatlah sebuah project flash baru atau project air baru.
Pastikan Publish Target nya adalah Air, disini saya menggunakan Air 3.2 for desktop.
Untuk setting publish ini anda dapat melihat properties window anda.
Lihat gambar 1:
Selain melalui properties window, anda dapat juga mengedit target melalui publish setting.
Lihat gambar 1.1:
2.Tahap kedua, buatlah tampilan GUI nya terlebih dahulu.
Lihat gambar 2:
Untuk membuat DataGrid , anda hanya perlu drag and drop DataGrid component dari window component. Kemudian dataGrid ini kita berikan instance name adalah ‘DataGridView’.
Kemudian kita juga men-drag and drop komponen textArea, kemudian kita berikan instance name ‘status’.
Untuk menampilkan window component, bila belum tertampil, anda dapat mengklik ( Menu atas pilih Window --- Component)
Lihat gambar 2.1:
3.Tahap ketiga, mari buat SQLite database kita.
Untuk membuatnya, anda dapat menggunakan SQLite Browser yang telah kita sampaikan di awal.
Saya akan membuat sebuah database ‘ContactBook.db’, kemudian saya akan membuat sebuah table ‘person_table’ yang berisi beberapa kolom yaitu ‘ID’, ‘Nama’, ‘PhoneNumber’.
Dengan menggunakan SQLite Browser anda dapat langsung membuatnya tanpa mengetikan kode satu huruf pun. :) Kita tidak akan membahas bagaimana cara membuatnya di SQLite Browser. Anda dapat mencobanya sendiri, sangat mudah sekali.
Berikut adalah screenshot hasil akhir pembuatan database, tabel, dan kolom.
Lihat gambar 3:
Gambar berikut merupakan screenshot pembuatan tabel ‘person_table’ dan penambahan kolom – kolom.
Lihat gambar 4:
Gambar berikut merupakan screenshot saat kita memasukan data.
Lihat gambar 5:
4.Tahap keempat, mari kita kembali ke Adobe Flash dan melihat project Air kita dan mulai memasukan package yang dibutuhkan.
Mari kita buat layer baru tempat dimana kita akan mengetikan kode actionscript.
Yang harus kita ketikan terlebih dahulu adalah mengimport package-package yang berhubungan dengan project kita.
Lihat gambar 6:
Ingat, kita menggunakan DataProvider package sebagai dataSource untuk DataGrid komponen kita nantinya.
5.Tahap kelima, kita akan membuat variable – variable yang kita butuhkan.
Lihat gambar 7:
Kita sementara hanya membuat 2 buah variable, yaitu selectSmt yang merupakan class SQLStatement dan variable conn yang merupakan class dari SQLConnection.
6.Tahap keenam, mari kita membuat fungsi – fungsi yang kita gunakan.
Kita akan membuat sebuah fungsi yang akan langsung dieksekusi saat program berjalan, saya akan menamakan fungsi ini dengan nama loadDb();
Lihat gambar 8:
Pada fungsi loadDb() ini kita terlebih dahulu menambahkan sebuah text “loading database...” ke komponen textArea yang telah kita beri instance name dengan ‘status’ tadi.
Kemudian kita memberikan sebuah SQLEvent untuk conn, yaitu pada saat berhasil meng-open koneksi kita memberikan sebuah fungsi handler yaitu openHandler().
Begitu juga saat error sql connection, kita memberikan sebuah fungsi handler yaitu errorHandler();
Fungsi berikutnya sudah kita bahas pada tutorial sebelumnya, kita akan mencari file database kita. Tadi kita sudah membuat sebuah file database yaitu misalnya ContactBook.db. Sebaiknya kita menyimpan dulu project air ini ke folder yang sama dengan letak file database.
Ingat, saya menggunakan open(dbFile) bukan openAsync(dbFile). Karena saya ingin memakai synchronous (berurutan) bukan asynchronous (bersamaan). Tentang ini juga sudah kita bahas pada tutorial sebelumnya.
7.Tahap ketujuh, kita harus meng-eksekusi fung loadDb() saat program diload.
Untuk melakukannya, kita dapat memanggil fungsi loadDb() langsung.
Lihat gambar 9:
Mudah bukan?
8.Tahap kedelapan, kita harus membuat fungsi openHandler() dan errorHandler()
Pada fungsi loadDb(), kita memberikan sebuah event saat berhasil konek ke database, fungsi tersebut adalah openHandler(). Serta bila error kita juga memberikan fungsi errorHandler().
Berikut merupakan screenshot dua fungsi diatas.
Lihat gambar 10:
Nah, bila koneksi berhasil, maka kita terlebih dahulu memberikan teks “loading database succsess” ke komponen textArea yang kita berikan nama “status” tadi. Setelah itu kita akan memanggil fungsi getData();
Bila terjadi error maka kita juga akan menampilkan errornya pada “status”.
9.Tahap kesembilan, sekarang kita buat fungsi getData();
Pada tahap sebelumnya, bila kita berhasil konek database, maka kita memanggil fungsi openHandler() nah didalamnya ada fungsi getData();
Berikut merupakan screenshot fungsi tersebut.
Lihat gambar 11:
Terlebih dahulu kita akan menambahkan text “loading data..” kedalam textArea “status”. Setelah itu, karena kita ingin ngeksekusi query sql, kita perlu membuat variable baru yaitu “selectStmt” yang berupakan class SQLStatement.
Kemudian kita ketikan query, kita berikan dua buah event pada proses eksekusi query yaitu getDataSuccess() dan getDataError().
getDataSuccess() digunakan saat proses eksekusi berhasil. Sedangkan getDataError() dieksekusi saat terjadi error.
10.Tahap kesepuluh, mari kita buat fungsi getDataSuccess() dan getDataError().
Lihat gambar 12:
Pada fungsi getDataSuccess() kita membuat variable “result” yang merupakan class “SQLResult”. Class ini dapat diidentifikasi oleh Adobe Flash setelah anda mengimport package SQLResult.
Masih ingatkah dengan komponen dataGrid kita? Di awak kita telah memberikan sebuah nama “DataGridView” pada komponen dataGrid kita. Sekarang kita akan mensetting properties “dataProvider” nya dengan data hasil eksekusi sql tadi.
Mudah bukan?
Nah, pasti anda tidak akan mengira ternyata hanya sepuluh tahab ini saja.:) mudah mudahan bermanfaat dan saya yakin bila anda mau membaca dan mencoba pasti sangat mudah sekali pemrograman Flash ini.
Berikut saya sediakan kode full nya dan saya sediakan juga source code yang dapat anda download (Adobe Flash Profesional CS6, CS5)
PART YANG LAIN:
PART 1: Halaman ini
PART 2: FLASH AIR No.3: Insert Data ke dalam tabel dan menampilkannya pada Grid (CRUD AIR - SQLITE part 2)
PART 3: FLASH AIR No.4: Update/edit data dan menampilkannya pada DataGrid (CRUD AIR - SQLITE part 3)