Membuat Guest Book dengan PHP

Guest Book sederhana dengan Flex (PHP)


Tentunya rekan rekan sudah mengetahui apa itu Guest Book bukan ?. Biasanya Guest book pada halaman web berguna untuk menyimpan komentar dari para pengunjung web. Pengunjung dapat menuliskan nama kemudian komentarnya selanjutnya aplikasi guest book ini akan menyimpan data tersebut ke server dan menampilkannya di halaman web. Jadi secara garis besar guest book ini mempunyai 2 fungsi utama :

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

Dengan project pembuatan guest book ini diharapkan kita semua dapat mengerti bagaimana menghubungkan antara mySQL, PHP dan Flex.

• 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.

Secara garis besar pembuatan aplikasi guest book dibagi atas 4 tahap yaitu :

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

2. Pembuatan Database
3. Pembuatan script PHP
4. Pembuatan interface dengan Flex

Pembuatan Database

Kita masuk ke tahap kedua yaitu pembuatan database. Database yang akan kita buat hanya terdiri dari satu table saja yaitu kita namakan saja komentar yang terdiri dari 4 field yaitu id, nama,tgl dan komentar. Untuk melakukan hal ini :

• 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)

Jika ingin membuat dengan sql statement, berikut statement nya :

CREATE TABLE komentar (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 255 ) NOT NULL ,
`komen` LONGTEXT NOT NULL , `tgl` VARCHAR( 99 ) NOT NULL
) ENGINE = MYISAM ;

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

INSERT INTO komentar (ID, nama,komen,tgl)
VALUES (
NULL , 'shelo', 'hai rekan rekan mari sama sama kita belajar flex',’31 may 2008’
) , (
NULL , 'abahrama', 'fokus pada kekuatan siasati kelemahan', ’31 may 2008’
);


Pembuatan Script PHP

Tahap selanjutnya adalah membuat script php untuk koneksi dan manipulasi database. Ada 3 script php yang akan kita buat yaitu :

• Koneksi.php fungsinya adalah untuk koneksi dengan database. Scriptnya sangat sederhana yaitu sbb :
  
  

• Select_komentar.php fungsinya untuk mengambil isi dari tabel komentar dan memformatnya dalam bentuk XML. Scriptnya sebagai berikut :
  
  \r\n";
  
  echo "\t \r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo "\t \r\n";
  
  while ($dataku=mysql_fetch_array($result))
  {
  echo "\t \r\n";
  echo"\t\t".$dataku[id]."\r\n";
  echo"\t\t".$dataku[nama]."\r\n";
  echo"\t\t\r\n";
  echo"\t\t\r\n";
  echo "\t \r\n";
  }
  
  echo "\t \r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo "\t \r\n";
  
  echo "\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 "\r\n";
  perintah ini berfungsi untuk mencetak kalimat sebagai header dari struktur XML kita. Tentu saja kata “recordset” dapat diganti dengan kata yang lain terserah rekan rekan.
  
  echo "\t \r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo"\t\teof\r\n";
  echo "\t \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 \r\n";
  echo"\t\t".$dataku[id]."\r\n";
  echo"\t\t".$dataku[nama]."\r\n";
  echo"\t\t\r\n";
  echo"\t\t\r\n";
  echo "\t \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 “
  
  
  
  1
  shelo
  
  
  
  
  eof
  eof
  eof
  eof
  eof
  
  
  
• 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 :
  
  
  
  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).
  

Tahapan terakhir dalam pembuatan guest book adalah mendesain front end dengan Flex. Ada 2 file mxml yang harus kita buat :

• 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.

Sebelum kita membedah isi dari mxml kita, saya ingin menerangkan cara men-setup project pada flex builder 3, mungkin rekan rekan sudah mengetahuinya, tp tak ada salahnya saya uraikan kembali kan ??. langkahnya sebagai berikut :

• 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.