My First Flex Project

Two weeks ago, Vises, my work mate is busy creating something. I made an attention of what he busy for, and I found that he is recreating an absence application that I have made 6 months ago. I have created this absence application using Java Swing as a client and J2EE with Spring Framework as its server. I made this application because the HRD and Finance division of my office wanted me to create an application that able to log staff absences, so the finance division can pay the meal allowance for the staff based on its log every day.

The unique thing of this friend activity is, he tried to rebuild this absence application by using Adobe Flex. Well, I was interested with this Adobe Flex, my interest is more to Adobe Flex ability to create a pretty GUI design. By using Adobe Flex Builder, the making of design a GUI application is just simple drag and drop. It looks like creating a GUI application in Java by using the Netbeans and its Matisse Builder plug in. Actually there’s a little disappoint of mine, when I’m using Netbeans to create a Java GUI application. Sometimes the release build of my Java GUI application is not appropriate with the design of development. After seeing this Adobe Flex, I thought I should change my presentation layer of an application especially Desktop Application by using this Adobe Flex.

For about one weeks and three days, I search reference and then try to use this Adobe Flex as a presentation layer of my created application. And indeed, I have found that I easier to use Adobe Flex as a presentation layer of my application. And its looks like that I will decide to use Adobe Flex as a presentation layer of applications that I will create in the future.

Adobe Flex supported 3 Remote Application methods, which is:

1.    RPC Method (Remote Procedure Call).

2.    HTTP Service Method (read Web Application return using XML format).

3.    Web Service Method.

From those methods, the most preferred method of mine is the second method which is HTTP Service method. Adobe Flex can read a Web Application XML formatted return value, and then the value can be inserted into components that exist on Adobe Flex framework.

And I thought, because I have searched for about one week and three days about this Adobe Flex, it has to be at least one application that I can make using this Adobe Flex framework. Hmmm…… I thought what simple application that I can make with my limited knowledge of this Adobe Flex Framework. I got an idea; I will create a simple RSS Reader application. Why should RSS Reader? I thought a RSS reader is XML formatted, so it will be easier to make, because I don’t have to design the XML format for my first simple Flex application.

And after one day in front of my laptop try to create this application, finally my First Adobe Flex project created. Here are screenshot of my Flex RSS Reader Application.

Picture-1:

rssreader-tab1Picture-2:

rssreader-tab2

Let me try to describe here about the concept of my flex RSS Reader application. This RSS Reader application has 2 tabs. The first tab is RSS Reader, this is the main function of this application as it’s seen on picture-1, while the 2nd tab contains an form that have functions that can manage RSS link to be added, updated, or deleted by using this tab as it’s seen on picture -2.

On screenshot of picture-1, we can see there’s a combo box that user can choose, from what resource of the news that he would like to read. When user clicks one of the sources from the combo box, this application will try to request RSS Feeder to a link that became a value data on the combo box. After all the result of the request done, this application will automatically load the result of news items to Data Grid component on RSS List Panel, and when one of the news item on Data Grid component clicked by the user, this application will also automatically load the short description of the news to Text Area component on the Description panel. When user interest to read the full article of the news that selected, user can click Read This button. When this button clicked, then the default browser of user’s computer will show and directly open the page containing the news that he would love to read.

While on the screenshot of picture-2, is a view of RSS Entry tab, which on this tab, user can manage the sources of the RSS Reader on this application. When user wants to add a new source of RSS Feeder, he just needs to enter each text boxes on Add RSS Entry Panel and then click Add button. And when he needs to update or delete one of sources that already loaded on Data Grid on the Listed RSS Entry panel, all he needs is just click the item on the Data Grid and the application will automatically fill up the text boxes on the Edit RSS Entry panel, and then he click the update or delete button depends on what he want to do with the source item. And then we also can see on the both picture there’s an Exit button on the right top of the form. The function of this button is to close this Flex RSS Reader application.

This simple Flex RSS Reader application actually has a Back-End Application that I have created using PHP and MySQL Database. The Back-End Application will produce a web page XML Formatted result containing a list of RSS Reader sources that stored on MySQL Database table. Just because I don’t understand yet about how to use the property file on Flex Development, I do hardcode to write a link of this RSS Reader Back-End Application.  The Link of this RSS Reader Back-End Application is: http://localhost/flex_xml_lab/rss/rss_feeder.php. If you are interested of this application, then you also have to create this RSS Reader Back-End Application, and the link must be same with above Back-End Link that I have hardcode on this application.

And the XML formatted result that produced by the Back-End Application must have a pattern below:

 

<rss_list>
     <RSS>
        <RSS_ID>1</RSS_ID>
        <label>Detik</label>
        <data>http://rss.detik.com/index.php/detikcom</data>
     </RSS>
     <RSS>
         <RSS_ID>2</RSS_ID>
         <label>Detik Inet (local sample)</label>
         <data>http://localhost/flex_xml_lab/rss/rss_detikinet.xml</data>
     </RSS>
     <RSS>
        <RSS_ID>3</RSS_ID>
        <label>Google News (local sample)</label>
        <data>http://localhost/flex_xml_lab/rss/rss_google.xml</data>
     </RSS>
     <RSS>
        <RSS_ID>10</RSS_ID>
        <label>Detik Inet</label>
        <data>http://www.detikinet.com/feed</data>
     </RSS>
     <RSS>
         <RSS_ID>11</RSS_ID>
         <label>Antara Terkini</label>
         <data>http://www.antara.co.id/rss/news.xml</data>
     </RSS>
     <RSS>
         <RSS_ID>12</RSS_ID>
         <label>Antara Sains Dan Teknologi</label>
         <data>http://www.antara.co.id/rss/tek.xml</data>
      </RSS>
</rss_list>

 

On the Back-End Application, I made a table on MySQL Database named flex_project and the table name is rss_feeder, and the detail of the table shown below:

desc_rss_feeder

Or you also can make the table with this MySQL Syntax:

 

CREATE TABLE `rss_feeder` (
  `RSS_ID` int(100) NOT NULL AUTO_INCREMENT,
  `RSS_NAME` varchar(100) NOT NULL,
  `RSS_LINK` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`RSS_ID`)
);

 

And then, to create a Back-End Application using php, I have created a simple PHP CRUD (Create, Read, Update, and Delete) application to do select, insert, update, and delete database operation on to the table. I simplified this Back-End Application by creating only one php file. And the interaction between the database and php file can be recognized by a parameter named action for each database operation. I choose HTTP GET methods for interaction between a PHP and Flex RSS Reader Application, so the each database operation on the php file can be executed by detail below:

·      Action Read rss_feeder

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=read

·      Action Insert rss_feeder

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=add&rss_name=[name_of_rss_source]&rss_link=[link_of_rss]

·      Action Edit rss_reader

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=add&rss_id=[id_of_rss]&rss_name=[name_of_rss_source]&rss_link=[link_of_rss]

·      Action Delete rss_reader

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=delete&rss_id=[id_of_rss]

To accommodate above methods, then I created one php file only, and the source of the php file is below:

 

<?php
//define database paramater
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "9mtouche9" );
define( "DATABASE_NAME", "flex_project" );
$conn = mysql_connect(DATABASE_SERVER,DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//define HTTP GET paramater
$action = $_GET['action'];
$return="";
//action read
if($action=="read"){
    $query = "select * from rss_feeder";
    $res = mysql_query($query);
    //return list of rss link
    $return = "<rss_list>";
         while ($result = mysql_fetch_object($res)) {
                   $return .="<RSS>
              <RSS_ID>$result->RSS_ID</RSS_ID>
              <label>$result->RSS_NAME</label>
              <data>$result->RSS_LINK</data>
              </RSS>";
         }
    $return .= "</rss_list>";
    mysql_close();
}
//action add
if($action=="add"){
    $rss_name = $_GET['rss_name'];
    $rss_link = $_GET['rss_link'];
    $query = "insert into rss_feeder(RSS_NAME,RSS_LINK) values('$rss_name','$rss_link')";
    $res = mysql_query($query);
    //$result = mysql_fetch_row($res);
    //return list of rss link
    $return = "<action_result>";
       if($res){
         $return .= "true";
       }else{
         $return .= "false";
       }
    $return .= "</action_result>";
}
//action edit
if($action=="edit"){
    $rss_id = $_GET['rss_id'];
    $rss_name = $_GET['rss_name'];
    $rss_link = $_GET['rss_link'];
    $query = "update rss_feeder set RSS_NAME='$rss_name', RSS_LINK='$rss_link' where RSS_ID='$rss_id'";
    $res = mysql_query($query);
    //$result = mysql_fetch_row($res);
    //return list of rss link
    $return = "<action_result>";
       if($res){
         $return .= "true";
       }else{
         $return .= "false";
       }
    $return .= "</action_result>";
}
//action delete
if($action=="delete"){
    $rss_id = $_GET['rss_id'];
    $query = "delete from rss_feeder where RSS_ID='$rss_id'";
    $res = mysql_query($query);
    //$result = mysql_fetch_row($res);
    //return list of rss link
    $return = "<action_result>";
       if($res){
         $return .= "true";
       }else{
         $return .= "false";
       }
    $return .= "</action_result>";
}
//print out result
print($return);
?>

 

 

On the script, indeed there’s another action instead read, another action also return XML formatted result, just because the return of another action is boolean type, so let’s just ignore it.

That’s it, a short description of this simple RSS Reader application that I have made by using Adobe Flex. I’m quite satisfied, because this Adobe Flex is so easy to design and to create a GUI application. And for the result the output of the GUI is prettier than Java Swing Application. And for the release build, Adobe Flex Builder has also owned it by using wizard, it’s really simple at least for me.

And for you, who wants to learn or maybe modified and learning together with me, below is the sources link of My First Flex Project

1.    RSS Reader Source (Zip File)

2.    PHP Back-End Application

3.    MySQL source file.

And Please feel free to rebuild and modify with your own need and desired, and don’t forget to give back your comment through this post.

 

Menteng, March 7th 2009.

I hope this will helpful

 

Josescalia

Implementasi metode HTTP GET dan HTTP POST pada PHP

Dalam web development, sering kali kita menemui komunikasi satu atau dua file web untuk mendapatkan suatu hal yang kita inginkan. Yang saya sebut komunikasi satu atau dua file dalamweb ini biasanya terbentuk atas satu form dan satu lagi merupakan validasi atau sebuah fileyang menjadi form sekaligus menjadi validator. Misal: form untuk submission guest book, atauform untuk submission login suatu aplikasi web. Dalam pengembangannya komunikasi satu atau dua form ini kemudian menjadi semakin canggih dengan masuknya teknologi ajax (Asynchronous JavaScript and XML).

Kali ini kita hanya akan membahas teknik dasar komunikasi form dalam web development, dan kali ini kita juga akan menggunakan php sebagai referensi pembahasan komunikasi form. Kita tidak akan membahas ajax kali ini, mungkin lain waktu kita akan membahas ajax dalam kesempatan yang lain.

Pada dasarnya komunikasi form dalam web development menggunakan beberapa metode. Diantaranya adalah, Metode GET, PUT, POST, DELETE, CONNECT, TRACE. Kali ini kita akan membahas dua metode yang sering dipakai dalam komunikasi form dalam web aplikasi, yaitu metode GET dan metode POST Kedua metode ini mempunyai keunggulan dan kekurangan masing-masing. Pemilihan antara dua metode ini bergantung pada kebutuhan kita nantinya dalam mengembangkan suatu aplikasi webGambar 1 :

METODE HTTP GET :

Secara praktikal metode ini mengambil paramater-parameter yang terlihat nyata pada urlketika satua atau dua buah form berinteraksi, untuk kemudian paramater-parameter tersebut menjadi suatu syarat untuk menjalankan suatu proses dalam form validasinya. Kita dapat menemui metode get ini dalam suatu web aplikasi ketika kita mendapati dalam url seperti contoh berikut : http://www.mysite.com/login.php?uid=1234568Angka 1234568 itu adalah nilai dari paramater uid yang dilemparkan oleh form. Jadi bisa disimpulkan bahwa dalam suatu web aplikasi jika parameter dan nilainya dapat terlihat secara jelas dalam url maka komunikasi yang terjadi menggunakan metode http get.

Bagaimana cara php dalam mengimplementasikan metode http get ini ? Ok kita akan mencoba melakukan percobaan kecil dengan menggunakan dua buah file. File pertama sebagai form-nya dan file kedua sebagai validasinya. Perhatikan file pertama dibawah ini sebagai formnya, file : form1.html 

kemudian perhatikan validator dari form keduanya validate.php,

Jika kita ingin menjalankan aplikasi kecil tersebut kita bisa menjalankan file form1.htm dan tampilannya akan menjadi seperti ini, Gambar 1:

jika kita isi masing-masing text box tersebut kemudian kita tekan tombol masuk maka terjadilah komunikasi dua form tersebut dan demikian hasil yang bisa kita dapat, Gambar 2:

Ok sekarang kita bahas saja aplikasi kecil ini :

Pada form1.html kita dapat melihat pada baris <form method=”get” action=”validate.php”> pada baris ini kita bisa melihat bahwa form yang kita gunakan menggunakan metode get dan form tujuan atau form validatornya adalah validate.php. Yang harus kita pahami adalah jika kita ingin menggunakan metode http get pada web aplikasi kita, maka form yang kita definisikan menggunakan metode get seperti diatas. Sementara tampilan pada web aplikasi kita adalah standar html biasa dengan dua input, dimana yang satu merupakan berupa text dan satu lagi berupa password, dan sebuah tombol sebagai sebuah trigger komunikasi dua form tsb.

Kemudian kita akan melihat bagaimana php menangani metode get ini dalam programmingnya pada barisan kode pada file validate.php. Sebelumnya coba kita perhatikan gambar 2, pada url yang ada pada gambar tersebut terdapat tulisan seperti ini : ……/validate.php?user=mojo&pass=mojo99, begitulah cara kerja metode http getsemua paramater dan nilai parameter tersebut ditampilkan dalam url sehingga kita bisa melihat secara jelas parameter dan nilai dari parameter tsb, sesuatu menyembul dalam benak anda ? Ok nanti kita bahas sesuatu yang menyembul tsb.

Sekarang perhatikan cara php menangani komunikasi 2 file tsb, masing-masing nilai parameter diinisialisasikan kepada sebuah variabel dengan cara seperi ini:

  $user = $_GET[“user”];

$pass = $_GET[“pass”];

lalu kemudian mencetak 2 variabel yang sudah terisi nilainya tersbut ke dalam layar dengan cara seperti ini :

   echo “$user………

dimana $user adalah variabel untuk diisi nilai yang ditangkap dengan cara $_GET[“user”] dan $pass yang ditangkap dengan cara $_GET[“pass”]. User dan pass yang ada dalam tanda kurung [] adalah parameter yang dilempar dari form1.html. Jadi demikianlah cara php menangani komunikasi form yang menggunakan metode http get.

Selaras dengan sesuatu yang tadi mungkin menyembul dalam benak anda, kita perhatikan bahwa berbahaya sekali metode http get ini jika kita terapkan dalam web aplikasi kita, user akan dengan gampang melihat nilai-nilai dan parameter-parameter yang terlempar dari komunikasi form dalam web aplikasi kita. Hal inilah yang dapat menyebabkan seseorang mengeksploitasi suatu web dengan cara menginjeksi url yang ada.

Banyak developer web aplikasi masih tetap menggunakan metode http get ini, dan usaha dari mereka untuk menjaga keamanan web yang mereka buat ini adalah dengan cara meng-enkripsi url yang tampil, baik parameter maupun nilai dari parameter yang ada. Keamanan ini biasanya dibuat berlapis-lapis dengan menggunakan metode enkripsi string dari mulai sha, base64, md5, dan metode-metode enkripsi yang lain, atau mungkin metode enkripsi yang mereka buat sendiri.

METODE HTTP POST:

Sekarang kita akan melangkah pada metode http selanjutnya yaitu metode http post, untuk mendapatkan gambaran tentang metode yang satu ini langusng saja kita lihat dua form diatas yang kita modifikasi sedikit. sehingga menjadi seperti ini:

dan ini adalah validate2.php yang juga kita rubah sedikit dari file validate.php di atas: file : validate2.php


kemudian kita jalankan aplikasi tsb dengan cara membuka form2.html, setelah kita masukkan text-text yang tersedia, kemudian kita klik tombol masuk maka akan kita dapati hasil seperti gambar berikut, gambar 3:

adakah perbedaan antara gambar 2 dan gambar 3 disana? Yup, benar ada perbedaan yang terjadi pada dua gambar tersebut, pada gambar 3 kita tidak melihat ada paramater-paramater dan nilai-nilainya tercetak disana, namun hasil cetakan pada body halaman web tetap sama. Demikianlah metode http post, metode ini tidak akan mencetak paramater-parameter dan nilai dari paramater tersebut dalam url, sehingga beberapa developer merasa bahwa metode ini lebih aman dari pada metode http get.

Dari sisi kode, pada form2.html perbedaan terjadi hanya pada baris <form method=”post” action=”validate2.php”> ini saja, untuk membuat sebuah form dimana kita akan memakai metode http post, intinya kita hanya mengganti nilai dari method menjadi post saja. Sementara dalam form validatornya dalam hal ini validate2.php kita cukup merubah $_GET menjadi $_POST saja, sebab memang beginilah cara php menangani komunikasi form yang menggunakan metode http post.

Sekarang tinggal anda menyimpulkan sendiri lebih aman mana ketika kita menggunakan metode http dalam membuat komunikasi form dalam sebuah web aplikasi. Dari sana anda juga yang akan dapat menarik kesimpulan apa keuntungan dan kerugian jika kita menggunakan salah satu metode http tersebut dalam web aplikasi kita. Sepanjang semua jawaban dapat anda pertanggungjawabkan secara benar dan masuk akal, maka anda akan selalu benar dalam argumentasi anda. Terima kasih dan Semoga Bermanfaat….!!!

Menteng, 21 September 2008

JOSESCALIA

Membuat Email Bomber dengan PHP

Tahukah kita bahwa ada sebuah fungsi dalam PHP yang mungkin bisa kita gunakan untuk membuat email bomber. Dimana dalam pengertian saya email bomber ini adalah suatu program yang mem-fraud (membanjiri) email seseorang dengan email-email yang tidak bermanfaat sama sekali. Fungsi tersebut adalah mail dengan detail sintaksisnya adalah :
klik untuk memperbesar
Parameter fungsi tersebut sudahlah jelas buat kita bahwa string to mengarah kepada siapa kita akan mengirim email ini, dalam hal ini saya istilahkan target, dan string subject adalah tema email yang akan kita kirimkan dan string message adalah isi email yang akan kita kirimkan kepada target kita.

Konsep email bomber ini cukup sederhana hanya dengan hanya menaruh fungsi mail ini ditengah looping maka jadilah email bomber yang kita inginkan. Biar lebih menarik kita jadikan jumlah looping-nya dinamis. Secara logikanya jumlah looping menjadi sebuah input-an yang akan kita masukkan nilainya ke dalam sebuah variabel, sehingga kita dapat mengontrol berapa banyak email yang mau kita kirimkan ke target. Kita akan membuat file html biasa yang akan kita jadikan form untuk meng-input parameter-parameter yang dibutuhkan, dan sebuah mail engine yang nantinya akan berfungsi mengirimkan email-email tersebut ke target.

Oleh karena type dari fungsi mail ini adalah boolean yang akan mengembalikan nilai true atau false, kita bisa menggunakannya sebagai info ke-user apakah berhasil atau tidak kita mengirimkan email tsb kepada target.

OK kita langsung saja:

1. buat form inputan dengan halaman HTML sederhana.

klik untuk memperbesar

Keterangan :

  • form yang menjadi engine-nya adalah mail_engine.php maka kita masukkan ke dalam variabel html action (action=”mail_engine.php”) dan form ini menggunakan method POST dimana semua variabel yang didefinisikan akan dilempar(post) ke mail_engine.php
  • select -> option kita jadikan suatu pilihan berapa kali user ingin mem-bom email orang ini.

2. Kita buat halaman ke-2 yaitu mail_engine.php

Keterangan :

  • Semua post-ingan akan kita masukkan dalam masing-masing variabel, yaitu variabel $address, $subject, $message, dan $spam. Variabel $spam inilah yang akan menampung nilai jumlah email yang akan kita kirimkan ke target.
  • Dapat kita lihat diatas fungsi mail ini kita taruh dalam blok looping for($i=0; $i<=$spam; $i++), di sini mail akan mengirim sebanyak nilai yang dimasukkan pada variabel $spam.

Demikianlah cara mempergunakan fungsi email dalam php untuk kita jadikan email bomber, semoga bermanfaat.