PART 3
Setelah sebelumnya kita sukses memperagakan insert data ke SQLite database dan menampilkannya pada datagrid, sekarang saatnya kita mengedit data lewat datagrid, kemudian update data di SQLite database baru kemudian menampilkannya pada datagrid kembali.
Cara yang kita lakukan adalah saat kita memilih row (baris) dari datagrid, saat itu pulalah kita mengambil value dari setiap cell pada row yang kita pilih dan memasukkannya kedalam form edit.
Mudah bukan??
Nah, setelah kita masukan ke formEdit, baru kemudian kita tampilkan formEdit dan setelah itu kita eksekusi query untuk SQLite database. Bila berhasil maka kita sembunyikan formEdit dan kita refresh datagrid.
Mari kita bahas tahap demi tahap.
1.Tahap pertama, kita buat formEdit terlebih dahulu.
FormEdit ini merupakan sebuah form tempat kita akan mengedit item. Form ini berisi nama dan nomor hape serta tombol untuk menyimpan. Form ini merupakan MovieClip.
Nah, kebetulan kemarin (tutorial sebelumnya) kita telah membuat sebuah formInsert. formInsert ini adalah sebuah MovieClip. Nah, kita duplikat saja MovieClip ini. Kemudian kita edit yang diperlukan.
Lihat gambar 1:
formInsert ( kemarin namanya adalah ‘form’ saja) berada di Library berupa ‘Symbol 1’. Symbol 1 ini adalah nama MovieClip lho ya, bukan instance name.
Maka dari itu, buka library anda – klik kanan symbol 1 – kemudian pilih Duplicate.
2.Tahap kedua, edit formEdit.
Nah, setelah kita menduplicate , kita akan mendapatkan satu buah symbol baru yang mirip dengan symbol sebelumnya, kita buka aja, kemudian kita edit yang diperlukan.
Lihat gambar 2:
3.Tahap ketiga, masukan symbol hasil duplikasi tadi kedalam stage.
Saat kita melakukan duplikasi, otomatis symbol/MovieClip hasil duplikasi berada di library, untuk memunculkannya pada stage, anda harus men-drag and drop pada stage.
Lihat gambar 3:
Silahkan anda drag and drop, sesuaikan posisinya.
4.Tahap keempat, berikan instanceName.
Instance name adalah nama instance (object), bukan nama symbol di library. Berikut merupakan nama-nama yang akan kita gunakan:
Form = ‘formEdit’
Nama = ‘namaTxt’
No.Hp = ‘nohpTxt’
Update button = ‘btnUpdate’
Close button = ‘btnClose’
Ingat, form kita merupakan sebuah MovieClip, namaTxt dan nohpTxt beserta btnUpdate dan btnClose berada di dalamnya.
Sehingga untuk mendapatkan namaTxt misalnya, maka kita bisa mengetikan seperti ini.
formEdit.namaTxt.text;
begitu juga dengan no.hp:
formEdit.nohpTxt.text;
Mudah bukan?
Lihat gambar 4:
5.Tahap kelima, mari kita tambahkan buttonEdit.
Button edit ini terletak pada form utama, rencananya, saat loading, otomatis button edit ini tersembunyi / hidden, nah, saat datagrid diclick maka button edit ini muncul.
Lihat gambar 5:
Untuk membuat buttonEdit, anda tinggal drag and drop saja komponen button dari pallete (saya lebih suka menyebut pallete dari pada toolbox).
Setelah button edit tersebut dibuat, sekarang berilah instance name (disini saya menggunakan instanceName nya adalah ‘btnEdit’).
Nah, sekarang tahap GUI nya telah selesai... saatnya kita kebagian coding.
6.Tahap keenam, terlebih dahulu, mari kita sembunyikan formEdit dan tambahkan listener ke beberapa komponen button.
Lihat gambar 6:
Variable selectedID merupakan sebuah variable yang nanti kita gunakan pada saat update. btnEditData kita unvisible terlebih dahulu, begitu juga dengan formEdit.
Kita juga memberikan sebuah listener kepada btnEditData supaya saat diclick maka formEdit akan muncul. Selain itu kita juga memberikan listener kepada btnClose dan btnUpdate sesuai dengan fungsi masing-masing.
7.Tahap ke tujuh, mari kita berikan listener kepada DataGrid .
Dengan pemberian listener ini, maka saat kita meng-click row secara tidak sadar kode kita berjalan pada background.
Lihat gambar 7:
Listener Event.CHANGE, ini digunakan saat kita meng-click row pada DataGridView.
Nah, kita akan membuat object baru, kita ambil nilai dari Nama dan nilai dari PhoneNumber pada cell/row yang kita click.
Kita juga mengambil ID nya. Perhatikan kodenya, mudah dipahami bukan? Ini adalah cara mendapatkan value dari row datagrid yang kita seleksi, jarang lho di internet tutorial cara mendapatkan value seperti ini :)
8.Tahap ke delapan, kita perluas fungsi getData()
Lihat gambar 8:
Saya ingin agar pada DataGridView, nantinya terdapat ID, Nama, dan PhoneNumber, sehingga saya perluas sql querynya menjadi “SELECT * FROM persons_table”.
Kita perlu juga memiliki ID untuk setiap row, karena kita ingin meng-update row berdasarkan ID.
Tanda (*) menunjukan ‘semua’.
9.Tahap kesembilan, mari kita buat fungsi updateData().
Lihat gambar 9:
Sama seperti pada pembahasan tutorial-tutorial sebelumnya, terlebih dahulu kita perlu membuat SQLStatement.
Kemudian kita membuat sebual string sql, perhatikan var sql:String = “” di atas. Syntaks sql sama dengan syntaks mysql, kita meng-update table, kita men-set masing masing row dengan value dari formEdit.
Perhatikan juga kita memakai WHERE ID = “+selectedID; , yang berarti bahwa kita mengedit/mengupdate data hanya pada ID yang sesuai dengan yang kita pilih pada DataGridView.
Terakhir, kita memberikan SQLEvent, bila berhasil maka kita akan merefresh DataGridView kita. Gampang bukan...?
Sekian tutorial update data menggunakan Flash-Air dengan SQLite. Semoga bermanfaat. Silahkan download sourcecodenya, tersedia untuk Adobe Flash Profesional CS5 dan CS6.
PART YANG LAIN:
PART 1:FLASH AIR No.2: Select data dari table database dan menampilkannya pada grid (CRUD AIR - SQLITE) part 1
PART 2:FLASH AIR No.3: Insert Data ke dalam tabel dan menampilkannya pada Grid (CRUD AIR - SQLITE part 2)
PART 3: Halaman ini
Mari kita bahas tahap demi tahap.
1.Tahap pertama, kita buat formEdit terlebih dahulu.
FormEdit ini merupakan sebuah form tempat kita akan mengedit item. Form ini berisi nama dan nomor hape serta tombol untuk menyimpan. Form ini merupakan MovieClip.
Nah, kebetulan kemarin (tutorial sebelumnya) kita telah membuat sebuah formInsert. formInsert ini adalah sebuah MovieClip. Nah, kita duplikat saja MovieClip ini. Kemudian kita edit yang diperlukan.
Lihat gambar 1:
formInsert ( kemarin namanya adalah ‘form’ saja) berada di Library berupa ‘Symbol 1’. Symbol 1 ini adalah nama MovieClip lho ya, bukan instance name.
Maka dari itu, buka library anda – klik kanan symbol 1 – kemudian pilih Duplicate.
2.Tahap kedua, edit formEdit.
Nah, setelah kita menduplicate , kita akan mendapatkan satu buah symbol baru yang mirip dengan symbol sebelumnya, kita buka aja, kemudian kita edit yang diperlukan.
Lihat gambar 2:
3.Tahap ketiga, masukan symbol hasil duplikasi tadi kedalam stage.
Saat kita melakukan duplikasi, otomatis symbol/MovieClip hasil duplikasi berada di library, untuk memunculkannya pada stage, anda harus men-drag and drop pada stage.
Lihat gambar 3:
Silahkan anda drag and drop, sesuaikan posisinya.
4.Tahap keempat, berikan instanceName.
Instance name adalah nama instance (object), bukan nama symbol di library. Berikut merupakan nama-nama yang akan kita gunakan:
Form = ‘formEdit’
Nama = ‘namaTxt’
No.Hp = ‘nohpTxt’
Update button = ‘btnUpdate’
Close button = ‘btnClose’
Ingat, form kita merupakan sebuah MovieClip, namaTxt dan nohpTxt beserta btnUpdate dan btnClose berada di dalamnya.
Sehingga untuk mendapatkan namaTxt misalnya, maka kita bisa mengetikan seperti ini.
formEdit.namaTxt.text;
begitu juga dengan no.hp:
formEdit.nohpTxt.text;
Mudah bukan?
Lihat gambar 4:
5.Tahap kelima, mari kita tambahkan buttonEdit.
Button edit ini terletak pada form utama, rencananya, saat loading, otomatis button edit ini tersembunyi / hidden, nah, saat datagrid diclick maka button edit ini muncul.
Lihat gambar 5:
Untuk membuat buttonEdit, anda tinggal drag and drop saja komponen button dari pallete (saya lebih suka menyebut pallete dari pada toolbox).
Setelah button edit tersebut dibuat, sekarang berilah instance name (disini saya menggunakan instanceName nya adalah ‘btnEdit’).
Nah, sekarang tahap GUI nya telah selesai... saatnya kita kebagian coding.
6.Tahap keenam, terlebih dahulu, mari kita sembunyikan formEdit dan tambahkan listener ke beberapa komponen button.
Lihat gambar 6:
Variable selectedID merupakan sebuah variable yang nanti kita gunakan pada saat update. btnEditData kita unvisible terlebih dahulu, begitu juga dengan formEdit.
Kita juga memberikan sebuah listener kepada btnEditData supaya saat diclick maka formEdit akan muncul. Selain itu kita juga memberikan listener kepada btnClose dan btnUpdate sesuai dengan fungsi masing-masing.
7.Tahap ke tujuh, mari kita berikan listener kepada DataGrid .
Dengan pemberian listener ini, maka saat kita meng-click row secara tidak sadar kode kita berjalan pada background.
Lihat gambar 7:
Listener Event.CHANGE, ini digunakan saat kita meng-click row pada DataGridView.
Nah, kita akan membuat object baru, kita ambil nilai dari Nama dan nilai dari PhoneNumber pada cell/row yang kita click.
Kita juga mengambil ID nya. Perhatikan kodenya, mudah dipahami bukan? Ini adalah cara mendapatkan value dari row datagrid yang kita seleksi, jarang lho di internet tutorial cara mendapatkan value seperti ini :)
8.Tahap ke delapan, kita perluas fungsi getData()
Lihat gambar 8:
Saya ingin agar pada DataGridView, nantinya terdapat ID, Nama, dan PhoneNumber, sehingga saya perluas sql querynya menjadi “SELECT * FROM persons_table”.
Kita perlu juga memiliki ID untuk setiap row, karena kita ingin meng-update row berdasarkan ID.
Tanda (*) menunjukan ‘semua’.
9.Tahap kesembilan, mari kita buat fungsi updateData().
Lihat gambar 9:
Sama seperti pada pembahasan tutorial-tutorial sebelumnya, terlebih dahulu kita perlu membuat SQLStatement.
Kemudian kita membuat sebual string sql, perhatikan var sql:String = “” di atas. Syntaks sql sama dengan syntaks mysql, kita meng-update table, kita men-set masing masing row dengan value dari formEdit.
Perhatikan juga kita memakai WHERE ID = “+selectedID; , yang berarti bahwa kita mengedit/mengupdate data hanya pada ID yang sesuai dengan yang kita pilih pada DataGridView.
Terakhir, kita memberikan SQLEvent, bila berhasil maka kita akan merefresh DataGridView kita. Gampang bukan...?
Sekian tutorial update data menggunakan Flash-Air dengan SQLite. Semoga bermanfaat. Silahkan download sourcecodenya, tersedia untuk Adobe Flash Profesional CS5 dan CS6.
PART YANG LAIN:
PART 1:FLASH AIR No.2: Select data dari table database dan menampilkannya pada grid (CRUD AIR - SQLITE) part 1
PART 2:FLASH AIR No.3: Insert Data ke dalam tabel dan menampilkannya pada Grid (CRUD AIR - SQLITE part 2)
PART 3: Halaman ini