• Fungsi untuk input komentar ( nama pengunjung dan komentarnya )
• Fungsi untuk menampilkan komentar yang ada dalam format tabel atau list

• MySQL berfungsi untuk penyimpanan database, tentunya rekan rekan bisa menggunakan teknologi yang lain seperti Sql server,Oracle, dlsb. Dalam contoh ini kita coba pakai MySQL
• PHP berfungsi sebagai back end dan bertanggung jawab untuk :
  • Melakukan koneksi ke database
  • Mengirimkan instruksi sql statement ke database (insert dan select) untuk menambah mengambil data
  • Memformat hasil query (data) ke bentuk XML yang nantinya akan dibaca oleh flex. Sebagai informasi dalam contoh  ini masih menggunakan XML , sebenarnya ada metode yang lebih cepat yaitu dengan remoting server menggunakan AMFPHP, cuma saat ini masih saya pelajari, mungkin di lain kesempatan akan saya bahas lagi dengan menggunakan AMFPHP.
• Flex berfungsi sebagai front end aplikasi dalam hal ini yang tampak oleh user di browser nya.

1. Persiapan yang meliputi :

• Instalasi flex builder 3, bisa download versi trialnya di http://www.adobe.com, kemudian untuk lisensi versi educational (free) dapat mengunjungi http://www.flex-registration.com, lisensi ini diberikan untuk instansi pendidikan. Kita cukup memasukkan data pribadi kemudian image hasil scan kartu indentitas yang menerangkan bahwa kita bekerja di instansi pendidikan (bisa kartu NIM, kartu pegawai atau surat dari sekolah), seminggu kemudian kode lisensi akan dikirim lewat email.
• Instalasi XAMPP , bisa didownload di http://www.xampp.com

• Buka web browser, lalu ketikkan alamat http://localhost atau http://127.0.0.1
• Masuk ke menu PhpMyadmin
• Buat database baru dengan nama maslo (namanya terserah rekan rekan)
• Kemudian buat tabel baru dengan nama kometar dengan struktur sebagai berikut :
  • ID :  int , auto increment, primary key
  • Nama : varchar (255)
  • Komen : longtext
  • Tgl : varchar(99)

• Untuk keperluan pengetesan, isi tabel komentar dengan beberapa record
• Berikut contoh statement untuk insert record. Kita bisa melakukannya dari menu insert pada PhpMyadmin.

• Koneksi.php fungsinya adalah untuk koneksi dengan database. Scriptnya sangat sederhana yaitu sbb :
  
  <?
  mysql_connect("localhost","root","");
  mysql_select_db("maslo");
  ?>

• Select_komentar.php fungsinya untuk mengambil isi dari tabel komentar dan memformatnya dalam bentuk XML. Scriptnya sebagai berikut :
  
  <?php
      include 'koneksi.php';
      $result = mysql_query(stripslashes("select id,nama,komen,tgl from komentar order by id desc "));
  
      echo "<recordset>\r\n";
  
      echo "\t <komentar>\r\n";
      echo"\t\t<id>eof</id>\r\n";
      echo"\t\t<nama>eof</nama>\r\n";
      echo"\t\t<tgl>eof</tgl>\r\n";
      echo"\t\t<komen>eof</komen>\r\n";
      echo "\t </komentar>\r\n";
  
      while ($dataku=mysql_fetch_array($result))
      {
          echo "\t <komentar>\r\n";
          echo"\t\t<id>".$dataku[id]."</id>\r\n";
          echo"\t\t<nama>".$dataku[nama]."</nama>\r\n";
          echo"\t\t<tgl><![CDATA[".$dataku[tgl]."]]></tgl>\r\n";
          echo"\t\t<komen><![CDATA[".$dataku[komen]."]]></komen>\r\n";
          echo "\t </komentar>\r\n";
      }
  
      echo "\t <komentar>\r\n";
      echo"\t\t<id>eof</id>\r\n";
      echo"\t\t<nama>eof</nama>\r\n";
      echo"\t\t<email>eof</email>\r\n";
      echo"\t\t<tgl>eof</tgl>\r\n";
      echo"\t\t<komen>eof</komen>\r\n";
      echo "\t </komentar>\r\n";
         
      echo "</recordset>\r\n";      
      ?>

• Penjelasan script diatas :
  
  include 'koneksi.php';
  perintah ini berfungsi untuk memanggil script koneksi.php untuk melakukan koneksi ke database
  
  $result = mysql_query(stripslashes("select id,nama,komen,tgl from komentar order by id desc "));
  perintah ini mengirimkan sql statement yaitu perintah untuk mengambil isi tabel. Saya tidak akan membahas lebih mendalam mengenai sql statemen karena fokus kita bukan kesitu. Namun bagi rekan rekan yang ingin mempelajari sql statemen bisa cari tutorialnya di internet.
  
  echo "<recordset>\r\n";
  perintah ini berfungsi untuk mencetak kalimat <recordset> sebagai header dari struktur XML kita. Tentu saja kata “recordset” dapat diganti dengan kata yang lain terserah rekan rekan.
  
  echo "\t <komentar>\r\n";
      echo"\t\t<id>eof</id>\r\n";
      echo"\t\t<nama>eof</nama>\r\n";
      echo"\t\t<tgl>eof</tgl>\r\n";
      echo"\t\t<komen>eof</komen>\r\n";
  echo "\t </komentar>\r\n";
  baris ini berfungsi untuk mencetak data kosong (dummy data) ( lho koq... mungkin membingungkan). Berdasarkan pengalaman saya, jika ternyata tabel yang kita select tidak ada isinya (kosong) maka xml yang kita hasilkan juga akan kosong, nah hal ini membuat aplikasi flex kita akan error, nah untuk men siasati nya kita taruh data kosong pada permulaan struktur xml kita (bingung kan ...???). Ini hanya akal akalan saya saja, mungkin ada cara lain yang lebih cerdik dari ini. Jika rekan rekan ada yang punya cara lain , saya akan sangat senang jika diberitahu.
  
  while ($dataku=mysql_fetch_array($result))
      {   echo "\t <komentar>\r\n";
          echo"\t\t<id>".$dataku[id]."</id>\r\n";
          echo"\t\t<nama>".$dataku[nama]."</nama>\r\n";
          echo"\t\t<tgl><![CDATA[".$dataku[tgl]."]]></tgl>\r\n";
          echo"\t\t<komen><![CDATA[".$dataku[komen]."]]></komen>\r\n";
          echo "\t </komentar>\r\n"; }
  baris ini berfungsi untuk melakukan perulangan record by record dan menuliskan ke dalam struktur XML. Untuk mengambil isi record menggunakan perintah .$dataku[id]. [id] adalah nama field. Yang aneh disini adalah statement “<![CDATA[“. Seperti telah dibahas sebelumnya bahwa flex mendukung syntax xml versi e4x, nah ini yang membedakan antara xml yang biasa dengan xml versi e4x. Dalam versi e4x kita bisa menampilkan tulisan atau karakter yang mengandung format html ( syntax <>,</>) kalau xml versi biasa belum bisa. Biasanya kita gunakan “<![CDATA[“ untuk field field long text atau tanggal.
  
  echo "\t <komentar>\r\n";
      echo"\t\t<id>eof</id>\r\n";
      echo"\t\t<nama>eof</nama>\r\n";
      echo"\t\t<tgl>eof</tgl>\r\n";
      echo"\t\t<komen>eof</komen>\r\n";
  echo "\t </komentar>\r\n";
  baris ini berfungsi untuk mencetak data kosong (dummy data) ( lho koq...??). Sama seperti statement untuk mencetak baris kosong di awal struktur xml, kalau yang ini diakhir struktur. Nantinya baris kosong ini akan dihapus pada aplikasi flex jadi kata eof tidak akan tampil. Hal ini hanya untuk mensiasati supaya tidak keluar error message ketika tabelnya kosong. Agar lebih jelas berikut gambaran  format xml kita :
      <header>
          <dummy data>
          <isi data>
          .
          .
          .
          <isidata>
          <dummy data>
      <footer>
  
  echo "</recordset>\r\n";
  baris ini sebagai footer dari struktur xml kita. Kata “recordset” bisa diganti namun harus sama dengan header dari xml kita. Dalam hal ini tadi kita memakai “recordset”. Jadi jika rekan memakai kata <tukul> di awal maka di akhirnya juga harus </tukul>.
  

• Mungkin agak bingung baca penjelasan diatas, namun “bingung” merupakan proses dari belajar jadi kita semua pasti akan merasakannya. Untuk mengetes script tadi, cukup buka browser dan ketikkan alamat dimana script tsb berada. Kalau menggunakan xampp harus berada di bawah folder htdocs (c:\program files\xampp\htdocs). Harusnya jika semua berjalan dengan baik maka pada browser akan tampil tulisan
  eof eof eof eof eof 2 abahrama 1 shelo eof eof eof eof eof
      untuk melihat struktur xml yang dihasilkan, bisa dilihat di source nya (pada firefox, klik kanan view page source, pada ie klik kanan view source). Strukturnya adalah sebagai berikut :
  
  <recordset>
       <komentar>
          <id>eof</id>
          <nama>eof</nama>
          <email>eof</email>
          <tgl>eof</tgl>
          <komen>eof</komen>
       </komentar>
       <komentar>
          <id>2</id>
          <nama>abahrama</nama>
          <tgl><![CDATA[]]></tgl>
          <komen><![CDATA[fokus pada kekuatan siasati kelemahan]]></komen>
       </komentar>
       <komentar>
          <id>1</id>
          <nama>shelo</nama>
          <tgl><![CDATA[]]></tgl>
          <komen><![CDATA[hai rekan rekan mari sama sama kita belajar flex]]></komen>
       </komentar>
       <komentar>
          <id>eof</id>
          <nama>eof</nama>
          <email>eof</email>
          <tgl>eof</tgl>
          <komen>eof</komen>
       </komentar>
  </recordset>
  
• Nah jika sudah tampil seperti diatas , selamat untuk anda karena telah satu langkah lebih dekat dalam mengenal flex yaitu berkenalan dengan XML.
• Script yang ketiga adalah insert_komentar.php isinya sebagai berikut :
  
  
  <?php
      include 'koneksi.php';
  $result = mysql_query(stripslashes("insert into komentar(nama,tgl,komen) values('".$_POST ["nama"]."','".$_POST["tgl"]."','".$_POST["komen"]."')"));
  
  ?>
  
  
  penjelasannya :
  
  include 'koneksi.php'
  perintah ini berfungsi untuk memanggil script koneksi.php untuk melakukan koneksi ke database
  
  
  $result = mysql_query(stripslashes("insert into komentar(nama,tgl,komen) values('".$_POST ["nama"]."','".$_POST["tgl"]."','".$_POST["komen"]."')"));
  
  perintah ini untuk mengirimkan sql statement insert atau menambahkan record baru ke dalam table. Yang perlu diperhatikan disini perintah $_POST ["nama"] . perintah tersebut untuk mengambil parameter yang dikirim oleh aplikasi (dalam hal ini flex) yang perlu diingat adalah nama parameter nya harus sama persis (case sensitif) antara yang ada di script php dengan yang ada di flex (nanti kita akan bahas).
  

• Simple_gbook.mxml : ini adalah file utama aplikasi kita
• Comment_renderer.mxml : ini adalah component yang digunakan sebagai renderer pada control tile list yang berfungsi untuk menampilkan data.

• Pilih File | new | Flex project
• Isi project name , misalnya simple_gbook.
• Secara default flex builder akan menyimpan project yang kita buat di folder my documents\Fex builder 3. namun jika kita mau menyimpan di tempat lain , un check option use default location, kemudian browse folder yang kita kehendaki.
• Klik next
• Selanjutnya kita diminta men set output folder. Secara default output folder akan dibuat di dalam folder project kita. Karena project ini menggunakan php maka output folder harus di set ke dalam folder program files/xampp/htdocs.
• Klik browse, pilih folder c:\program filed\xampp\htdocs. Buatlah folder baru dengan cara klik tombol make new folder. Namakan folder baru tersebut misalnya gbook.
• Untuk menjalankan project kita setelah dibuild, harus dari browser, kemudian ketik alamat web server kita yaitu http://127.0.0.1/gbook/simple_gbook.html, jangan jalankan program dari menu run project karena saya jamin pasti akan error.

• Bagian coding untuk visual component : yaitu coding untuk membuat layout interface untuk component component yang tampak pada design view. Coding ini merupakan hasil generate otomatis dari design view. Misalnya jika kita menaruh komponen textinput pada layar design view, maka pada source viewnya akan secara otomatis tertulis <mx:TextInput />.  Komponen yang dipakai pada project ini yaitu :
  • Applicationcontrolbar
  • LinkBar
  • ViewStack
  • Tilelist
  • Hbox dan Vbox, FormHeading dan Formitem

                    <mx:itemRenderer>

                            <mx:Component>

                                     <ns1:comment_renderer/>

                           </mx:Component>

                   </mx:itemRenderer>

</mx:TileList>

komponen TileList berfungsi mirip seperti listbox atau datagrid. Dengan TileList kita bisa melayout data yang akan kita tampilkan secara horizontal maupun vertical dengan cara men set property coloumcount dan rowcount , dalam contoh ini kita membuat secara vertical sehingga coloumncount nya kita set 1. kemudian ada <mx:itemrenderer>. Itemrenderer adalah komponen yang akan di tampilkan secara repeat oleh tilelist (di render). Secara default itemrenderer di Tilelist seperti di listbox atau combo box hanya bisa menampilkan satu item misalnya nama. Sedangkan disini kita akan menampilkan 3 item yaitu nama, tanggal dan komentar oleh karena itu kita akan membuat custom componen sebagai itemrender nya. Kita namakan custom component tersebut comment_renderer (nanti akan kita bahas).

Untuk bisa menampilkan data maka tilelist harus diset dataprovider nya. Untuk itu  kita pakai arraycollection, cara kerjanya sama seperti array yang membedakan arraycollection seperti tabel dalam database jadi ada baris dan field. Dataprovider yang digunakan kita namakan arr_komen akan kita bahas di bagian script. Untuk menset dataprovider, kita pakai  metode binding expresion yaitu dengan cara mensertakan tanda braket (“{}”) . jadi cara menulisnya dataProvider="{arr_komen}".

• ·         Bagian coding untuk non visual component yaitu coding yang kita buat tidak akan nampak pada design view. Adapun koding non visualnya yaitu  

<mx:HTTPService  id="load_comment" url="select_komentar.php" method="POST" useProxy="false" result="onkomen(event)" showBusyCursor="true"/>

<mx:HTTPService  id="add_comment" url="insert_komentar.php" method="POST" useProxy="false">

       <mx:request xmlns="">

               <nama>{txtnama.text}</nama>

                           <tgl>{tgl}</tgl>

                           <komen>{txtkomen.text}</komen>

        </mx:request>

•  
  • Untuk mengambil data : yaitu mengakses script select_komentar.php. jika script yang kita akses ada data yang dikembalikan (xml result) maka pada event result (terpicu jika komponen httpservice selesai menerima data dari server) harus diarahkan ke fungsi yang kita buat (dalam hal ini fungsi yang kita buat bernama onkomen).
  • Untuk menyimpan data yaitu mengakses script insert_komentar.php. karena script php ini menggunakan parameter maka kita pakai komponen <mx:request>. Yang harus diperhatikan adalah nama parameter dari <mx:request> harus sama dengan yang ada di script php (case sensitive).

• Bagian yang terakhir adalah coding untuk actionscript berada dibawah tag <mx:script>. Bagian ini juga ada 3 bagian yaitu :
  • Bagian untuk deklarasi referensi modul , diawali dengan statement import
  • Bagian untuk deklarasi variable. Ada 2 bentuk deklarasi yaitu :
    • Bindable variable yaitu variable yang digunakan menggunakan binding expression. Maksudnya binding adalah jika nilai dari variable berubah maka otomatis variable atau komponen yang dibinding ke variable ini akan berubah juga nilainya. Untuk membuat suatu variable menjadi bindable sertakan statement [Bindable] didepan deklarasi variable.
    • Non Bindable variable.
  • Bagian function yang berisi nama nama fungsi yang akan dijalankan. Disini kita buat 3 fungsi yaitu :
    • Initapp() : fungsi ini dipanggil ketika aplikasi selesai diload/didownload ditaruh di event creationcomplete pada tag <application>. Isinya  hanya meng execute httpservice (perintah send).
    • Fungsi onkomen dipanggil ketika httpservice loadcomment selesai menerima hasil dari server. Fungsi ini mengisi arraycollection dengan data xml dari server. Cara pengisiannya cukup dengan statement arr_komen =event.result.recordset.komentar; statement recordset.komentar tergantung pada struktur xml yang kita hasilkan dari script php kita.
    • Fungsi addcomment berfungsi untuk menambah komentar baru. Hal yang dilakukan adalah :
      • Mengecek apakah nama diisi atau tidak
      • Mengenerate tanggal saat ini
      • Mengeksekusi httpservice add_comment
      • Mengisi data yang baru ke arraycollection (arr_komen)
      • Merubah tampilan ke bentuk read comment

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox paddingLeft="5" paddingRight="5" xmlns:mx="http://www.adobe.com/2006/mxml" width="344" height="129" backgroundColor="#8E8A8A" borderStyle="none" borderThickness="2" borderColor="#050900">

      <mx:Label text="{data.nama}" fontWeight="bold"  />

      <mx:Label text="{data.tgl}" fontStyle="italic"/>

      <mx:TextArea text="{data.komen}" width="100%"   textAlign="left" wordWrap="true" editable="false" backgroundColor="#9B9494" height="62" dropShadowEnabled="true"/>