Pendahuluan
Flash telah Anda
kenal di edisi pertama majalah ini. Database? Mungkin desainer grafis/Flash
belum banyak mengenalnya. Database adalah kumpulan dari tabel-tabel. Tabel
terdiri dari kolom dan baris, di mana
kolom biasa disebut field, sedangkan baris biasa disebut record. Ada banyak produk database
yang tersedia, seperti MS SQL Server, MySQL, Oracle, atau MS Access.
Untuk
mengintegrasikan Flash dan database dalam sebuah situs, diperlukan sebuah
penghubung, yaitu bahasa pemrograman sisi server. Ada banyak bahasa pemrograman
sisi server, seperti PHP, ASP, JSP, atau CFM.
Dalam artikel
contoh implementasi integrasi Flash dan database ini, disajikan aplikasi buku
tamu dengan Flash yang menggunakan menggunakan Flash 5, Notepad, webserver
dengan ASP, dan MS Access. Karena database yang digunakan adalah Access, maka
Anda hanya bisa mencoba aplikasi ini di Windows.
Konsep Dasar
Hal pertama yang
perlu Anda ketahui adalah bagaimana Flash membaca variabel-variabel dari sebuah
file teks. Format dari file teks yang dikenali oleh Flash sebagai variabel
adalah:
variabel1=nilai1&variabel2=nilai2&variabel3=nilai3
Cara
Flash membaca variabel dari file teks adalah dengan menggunakan Actionscript LoadVariablesNum().
Sebagai contoh, kita buat sebuah file teks dengan nama daftar.txt
yang berisi:
nama=siapa&email=siapa@dimana.com
Kemudian
buat sebuah file Flash loadvar.fla pada direktori yang sama
dengan file daftar.txt, pada frame ke-1 tambahkan
Actionscript:
LoadVariablesNum("daftar.txt", 0)
Artinya:
kita membaca variabel yang berada dalam file teks daftar.txt
pada level 0.
Jika
kita Test Movie (Ctrl-Enter), maka
layar masih polos tentunya. Pilih menu: Debug
> List Variables (Ctrl-Alt-V) maka akan muncul:
Level #0: Variabel _level0.$version = "WIN 5,0,30,0" Variabel _level0.nama = "siapa" Variabel _level0.email = "siapa@dimana.com"
Artinya,
Flash telah membaca variabel yang ada dari daftar.txt dengan
benar. Kita dapat menampilkan isi dari variabel tersebut ke dalam Flash.
Caranya, klik ikon Text Tool untuk membuat sebuah teks namanya,
kemudian klik menu Text > Options.
Rubah Static Text menjadi Dynamic
Text isi kotak variabel: dengan nama.
Jika kita Test Movie, maka teks namanya berubah menjadi siapa.
Jika kita Test Movie, maka teks namanya berubah menjadi siapa.
Selamat
mencoba untuk variabel email.
Database Buku Tamu
Silakan
Anda buat sebuah database dengan MS Access dengan nama dataku.mdb.
Kemudian buat di dalamnya sebuah tabel dengan nama BukuTamu,
dengan ketentuan:
Nama Field Tipe Data
NoUrut AutoNumber
Nama Text
Email Text
Komentar Memo
Isi
dua buah record di dalam tabel tersebut:
NoUrut Nama Email Komentar 1 Siapa siapa@dimana Komentarku yang pertama. 2 Terserah terserah@dimana.com Komentarku yang kedua
Selamat
mencoba.
Bahasa Pemrograman Sisi Server dan Database
Koneksi database dengan ASP. Upload
file dataku.mdb yang telah Anda buat ke
direktori db di webserver. Buat file bukutamu.asp—berupa
file teks—dengan Notepad seperti di bawah:
<%
Response.Expires = -1000
Set oConn = Server.createObject("ADODB.Connection")
oConn.open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" &_
Server.MapPath("\db\dataku.mdb"))
sSQL = "SELECT COUNT(*) AS Total FROM BukuTamu"
Set oRS = oConn.Execute(sSQL)
nTotal = oRS("Total").Value
Response.Write("semua=" & nTotal & "&eof=true" )
%>
Hasil output dari program ASP tersebut dapat dilihat di Gambar 1.
Menampilkan data dari database. Sekarang
ubah bukutamu.asp menjadi seperti kode di bawah
ini untuk menampilkan isi tabel BukuTamu dari database.
<%
Response.Expires = -1000
Set oConn = Server.createObject("ADODB.Connection")
oConn.open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" &_
Server.MapPath("\db\dataku.mdb"))
sSQL = "SELECT COUNT(*) AS Total FROM BukuTamu"
Set oRS = oConn.Execute(sSQL)
nTotal = oRS("Total").Value
sSQL = "SELECT * FROM BukuTamu ORDER BY NOURUT ASC"
Set oRS = oConn.Execute(sSQL)
nHitung = 0
Do While Not oRs.EOF '(nHitung < nMax) And (Not oRs.EOF)
nHitung = nHitung + 1
Response.Write("&nama" & nHitung & "=" )
Response.Write( oRS("nama") )
Response.Write("&email" & nHitung & "=" )
Response.Write( oRS("email") )
Response.Write("&komentar" & nHitung & "=" )
Response.Write( oRS("komentar") )
oRS. MoveNext
Loop
Response.Write("&semua=" & nTotal & "&eof=true" )
%>
Hasil keluaran dari program ASP tersebut dapat dilihat di Gambar 2.
Selamat. Anda telah berhasil membuat variabel dan nilainya
dari database, yang akan Anda gunakan dalam Flash.
Flash dan Bahasa Pemrograman Sisi Server
Lihat buku tamu. Buka Flash Anda, dan
buat file dengan nama bukutamu.fla seperti pada Gambar 3.
Mulai
dengan membuat Layer Aksi pada frame 1, dengan Actionscript:
eof = "false";
loadVariablesNum ("http://localhost/bukutamu.asp", 0);
Buat
layer Label, untuk memudahkan Anda. Ada 3 label frame: pada frame 1 mulai,
frame 5 baca dan frame 15 selesai.
Pada layer Aksi frame 10, tambahkan Actionscript untuk loop sampai pembacaan
data selesai:
if (eof=="true") {
gotoAndPlay ("selesai");
} else {
gotoAndPlay ("baca");
}
Pada
layer Aksi frame 15, tambahkan Actionscript:
test = "nama" + semua; //untuk melihat apakah pembacaan sudah ok
teks_nama = eval("nama" + semua);
teks_email = eval ("email" + semua);
teks_komentar = eval ("komentar" + semua);
indeks = semua;
teks_urutan= indeks + " / " + semua;
stop ();}
Timbul
pertanyaan, mengapa Actionscript di frame 10 harus ditambahkan? Hal ini
penting, karena pembacaan variabel dengan loadVariables()
lebih lambat dibandingkan dengan jalannya movie. Bisa Anda coba sendiri dengan
variabel test di atas, bila Actionscript dijalankan
tanpa adanya skrip di frame 10, maka bila di-Debug > ListVariable hasilnya test="nama".
Ini dikarenakan nilai dari variabel semua belum terbaca pada saat movie
berjalan menuju frame 15.
Buat
layer Tunggu, Anda bisa tambahkan teks misalnya "Tunggu, sedang baca
data Buku Tamu". Bisa juga teks tersebut dijadikan movie clip
agar berkedip-kedip. Teks ini diletakkan di frame1 sampai frame 14.
Buat
layer Latar, yang hanya berisi teks statis untuk judul, teksnya "Buku
Tamu", "Nama", "Email", dan "Komentar".
Anda dapat tambahkan garis-garis atau kotak warna-warni atau imej di layer ini.
Buat
layer TeksData, dan tambahkan dynamic text dengan nama variabel teks_nama,
teks_email, teks_komentar dan teks_urutan.
Variabel teks_urutan untuk menampilkan record ke
berapa dari total record. Tambahkan button kiri dan kanan untuk melihat record
sebelumnya atau selanjutnya. Anda bisa buat button sendiri atau ambil dari Window > Common Libraries.
Actionscript untuk button ke kiri:
on (release) {
if (number (indeks) > 1) {
indeks = indeks - 1;
} else {
indeks = semua;
}
teks_nama = eval ("nama" + indeks);
teks_email = eval ("email" + indeks);
teks_komentar = eval ("komentar" + indeks);
teks_urutan = (indeks + " / ") + semua;
}
Actionscript
untuk button ke kanan:
on (release) {
if (number (indeks) < number (semua)) {
indeks = number (indeks) + 1;
} else {
indeks = 1;
}
teks_nama = eval ("nama" + indeks);
teks_email = eval ("email" + indeks);
teks_komentar = eval ("komentar" + indeks);
teks_urutan = (indeks + " / ") + semua;
}
Selamat.
Anda telah dapat menampilkan buku tamu Anda! Lihat Gambar 4.
Isi buku tamu. Untuk isi buku tamu, di
Flash Anda menggunakan teks dengan opsi sebagai Input Text bukan Static
Text ataupun Dynamic Text. Sedangkan untuk ASP-nya,
dalam tutorial ini dibuat file yang berbeda, yaitu isibukutamu.asp.
Anda hanya perlu mengubah perintah SQL untuk menyimpan data. Untuk mengambil
variabel dari Flash ke ASP menggunakan perintah Request().
nama = Request("name")
email = Request("email")
komentar = Request("komentar")
sSQL= "INSERT INTO BukuTamu " &_
"(Nama, Email, Komentar) VALUES ( " &_
"'"&nama & "', '" & email &"', '" & komentar & "') "
Response.Write("eof=true")
Bisa
saja pengisian dan melihat buku tamu Anda buat dalam satu file ASP dengan
tambahan kondisi tentunya.
Actionscript
pada saat tombol SimpanData:
on (release) {
if (nama == "") {
teks_status = "Harap isi nama Anda";
gotoAndStop ("IsiData");
} else if (email == "") {
teks_status = "Harap isi email Anda";
gotoAndStop ("IsiData");
} else if (komentar == "") {
teks_status = "Harap isi komentar Anda ";
gotoAndStop ("Isi Data");
} else {
teks_status = "";
eof = "false";
todo = "sign";
loadVariables("http://localhost/isibukutamu.asp", "", "POST");
gotoAndPlay ("TungguSimpan");
}
}
Sama
halnya dalam dengan di melihat buku tamu, Anda gunakan variabel eof
untuk mengetahui apakah LoadVariables() di atas itu sudah selesai.
Bila sudah selesai Anda tinggal perintahkan movie untuk pergi ke frame label mulai
untuk membaca kembali data yang telah tersimpan.
Selamat mencoba dan semoga sukses.
Selamat mencoba dan semoga sukses.
Willy alumnus Gunadarma dan saat ini menjadi
webmaster di artistica :: gfx design. Dapat dihubungi di willy@northbatavia.net.
mw
Tidak ada komentar:
Posting Komentar