Aplikasi Buku Tamu dengan Flash

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.

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.

Gb 1. Contoh hasil skrip ASP yang melakukan koneksi database dan menampilkan jumlah record

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.

Gb 2. Contoh hasil skrip ASP yang menampilkan data dari database

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.

Gb 3. bukutamu.fla

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.

Gb 4. bukutamu.swf

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.

Willy alumnus Gunadarma dan saat ini menjadi webmaster di artistica :: gfx design. Dapat dihubungi di willy@northbatavia.net.

mw