by ahmadfathihadi | Nov 9, 2010 | Article, Code for Joy
Setelah sekian lama saya menghilang mengarungi pekerjaan baru sebagai Facebook Developer, kini saya kembali mendokumentasikan sebagian pengalaman saya didalam blog ini. Pada dasarnya development aplikasi menggunakan platform facebook cukup mudah bagi yang sudah terbiasa dengan API.
Lalu apa sih tujuannya menggunakan facebook platform ?. Bisa diibaratkan begini, pada suatu website. Anggap saja website ini(blog.fathihadi.net), siapa sih yang mau registrasi user ?. ini kalau satu website, bagaimana kalau banyak website ? apa anda mau terus-menerus registrasi user untuk setiap website ?. Sedangkan anda sudah pasti punya account Facebook(hari gini gak punya facebook ?). kenapa tidak pakai account facebook saja untuk semua website ?, toh sudah banyak friend, dan aktifitas disana.
Nah dengan menggunakan API yang sudah disediakan oleh facebook, anda dengan mudah dapat menarik data User sesuai Permission(izin) yang di berikan oleh user. Ada izin untuk mempost sesuatu di wall user secara langsung, biasa dikenal dengan permission publish_stream.

Facebook Publish to Wall
Lebih lengkap mengenai permission ada di sini http://developers.facebook.com/docs/authentication/permissions
Lalu sekarang kita perlu mengatahui yang disebut access token, apa itu access token ?. Coba bayangkan jika kita sedang berada di sebuah halaman website, sedangkan informasi anda berada di website lain, tetapi ada sudah login pada website dimana informasi anda berada. Dengan menggunakan oath authentication, anda akan diberikan sebuah access token, dimana access token bisa ditukar dengan informasi, dibandingkan anda harus login dimana user dan password anda dipertaruhkan.
Facebook API dapat digunakan untuk :
- Website
- Mobile Application
- Application on Facebook.com
Yang harus anda perhatikan dari awal adalah memilih render method. Facebook menyediakan dua jenis render method, jika anda akan membuat aplikasi web yang menggunakan CSS serta Javascript atau justru mengintegrasikan dengan jQuery, silahkan gunakan iFrame. Namun jika anda akan membuat aplikasi sederhana yang tidak menggunakan css serta javascript, silahkan gunakan FBML. Apa sih bedanya ?, suatu saat akan saya bahas khusus mengenai perbedaannya.
Sekarang kita akan membahas lebih dalam mengenai, FBML, API, dan FQL.
FBML
FBML merupakan singkatan dari Facebook Markup Language , hal menarik bagi saya pada awalnya, karena kita bisa dengan mudah mendapatkan informasi dan tampilan yang telah disediakan oleh facebook dengan mudah. Seperti apa sih contohnya ?
<fb:name uid="12345" /> // akan menghasilkan nama sesuai uid yang tertera.
<fb:profile-pic uid="12345" linked="true" /> // akan menghasilkan tag html <img/> dengan property src foto dari uid yang tertera.
Semuanya sudah terdokumentasi lengkap di http://developers.facebook.com/docs/reference/fbml/. Namun yang perlu anda perhatikan adalah render method yang anda pilih. Tidak semua FBML dapat berjalan jika anda memilih iFrame, bahkan anda harus menggunakan XFBML jika anda menggunaan iFrame. Berikut contoh penggunaan FBML pada iFrame :
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="<URL for post invite action, see fb:request-form docs for details>"
method="POST"
invite="true"
type="XFBML"
content="This is a test invitation from XFBML test app
<fb:req-choice url="see fb:req-choice docs for details."
label="Ignore the Facebook test app!" />
">
</fb:request-form>
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to use Facebook." />
</fb:fbml>
</script>
</fb:serverFbml>
FQL
FQL merupakan singkatan dari Facebook Query language. Satu hal lagi yang menarik dari facebook, kita dapat menggunakan gaya query hampir sama seperti SQL. Namun berbeda dengan SQL, pada FQL kita hanya dapat menggunakan satu table pada clause WHERE, Misalkan :
SELECT name FROM user WHERE uid = me();
Contoh FQL diatas akan memberikan kita hasil nama dari user yang sedang login.
Untuk melakukan subquery kita dapat menggunakan keyword IN, namun subquery tidak dapat mengakses variable yang berada diluar skope, misalkan :
SELECT uid, name, pic_square FROM user WHERE uid = me() OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me());
Saat ini Facebook baru mensuport beberapa fungsi dalam FQL, yaitu now(), strlen(), substr(), strpos() dan me().
Bagaimana dengan informasi lainnya, kita tinggal memilih table dan field yg kita inginkan. Untuk list lengkapnya bisa dibuka di http://developers.facebook.com/docs/reference/fql/
API
API yang disediakan facebook cukup banyak, Mulai dari Graph API hingga Flash SDK. Masing-masing keterangan bisa dibaca sesuai topic masing-masing API yang digunakan. Berdasarkan pengalaman saya, untuk pengembagan aplikasi facebook pada Website dan Application Facebook(apps.facebook.com), lebih baik anda menggunakan JavaScript SDK dengan Old REST API/Graph API.
Saya akan memberikan sedikit kunci pemahaman menggunakan Graph API maupun Old REST API disini.
Masing-masing memiliki cara yang berbeda untuk inisialisasi awal.
Pada Graph API(jika kita menggunakan PHP) :
$facebook = new Facebook(array(
'appId' => $fbconfig['appid'],
'secret' => $fbconfig['secret'],
'cookie' => true,
));
//Facebook Authentication part
$session = $facebook->getSession();
$loginUrl = $facebook->getLoginUrl(
array(
'canvas' => 1,
'fbconnect' => 0,
'req_perms' => 'email,offline_access,publish_stream,status_update'
)
);
$fbme = null;
if (!$session) {
echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
exit;
}
else {
try {
$uid = $facebook->getUser();
$fbme = $facebook->api('/me');
$token = $session['access_token'];
} catch (FacebookApiException $e) {
echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
exit;
}
}
Pada Old REST API(PHP SDK) :
$facebook = new Facebook(API_KEY, SECRET);
$facebook->set_user($uid, $sessID);
Contoh pada Old Rest API untuk mendapatkan seluruh isi dari Album User :
$albums = $facebook->api_client->photos_getAlbums($uid, NULL);
Contoh pada Graph API untuk mendapatkan Seluruh isi dari Album User :
curl -F ‘access_token=…’ \
https://graph.facebook.com/me/albums
sebelumnya kita sudah membicarakan mengenai apa itu access token.
Semua hal yang berkaitan mengenai Facebook API, sudah terdokumentasi lengkap di http://developers.facebook.com/docs/.
Kedepannya saya akan lebih banyak memberikan contoh, showcase, serta tips dan trik untuk facebook development. Owh ya, tidak lupa saya ucapkan terima kasih kepada Dhub Digital yang memberikan saya pengalaman terhadap Facebook Development.
by ahmadfathihadi | Nov 8, 2010 | Article

(mt) Media Temple
Setelah trauma bertahun-tahun(alay) karena hosting lama saya sering mengalami masalah, akhirnya saya memutuskan untuk berpindah ke lain hati. Tentunya anda akan bingung kenapa saya berpaling dari hosting yang lama, berikut beberapa hal yang sudah terjadi :
- Seluruh hosting terkena serangan malware.
- Sering sekali Down.
- Masa Down time yang cukup lama.
- RTO.
- Harddisk server terbakar ! -> ini yang paling sulit diterima.
- Dan hal-hal lainnya yang membuat tidak nyaman.
Lalu apa itu media temple (mt)?
Media Temple, Inc adalah sebuah perusahaan web hosting dan service virtual yang bermarkas di Los Angeles, California. Ada beberapa hal yang membuat saya untuk lebih memilih media temple dibandingkan hosting yang lain, yaitu :
- (mt) memiliki commercial dan backup power.
- Heat Rejection
- Fire Suppression, Dry pipe
- Beberapa client yang cukup besar seperti Adobe, Starbuck, Sony, Toyota, Qantas, VW, Warner Bros, Tech Crunch, Diesel, Rip Curl, abc, nbc, dll, silahkan cek di http://mediatemple.net/company/clients/
Ketika pertama kali tahu bahwa Adobe hosting di (mt), wah gak mau kalah sama Adobe,hehe walau paket hosting yang dipilih berbeda jauh
. ya setidaknya ibarat rumah satu komplek lah 
Ada beberapa macam jenis hosting yang disediakan oleh (mt) seperti :
- (gs) Grid-Hosting – $20/month | Great for: Small Businesses, Newbies, Devs, Designers
- (dv) Dedicated Virtual – starting at $50/month | Great for: Multi-Domain, Intermediate, Devs, Designers
- (dvp) Nitro – $750/month | Great for: Big traffic, big projects, single tenant needs
- (ve) Server – starting at $30/month | Great for: Devs, Admins, Linux geeks, Root Access, SaaS
- (cx) Complex Hosting – please contact (mt)
So bagi teman-teman yang sedang berencana mencari hosting, dengan penuh semangat saya merekomendaikan (mt). Oh iya ada satu hal yang pastinya sangat bermanfaat untuk para pembaca, disini saya akan memberikan sebuah kupon yang bisa dipakai untuk mendapatkan diskon 20%
Coupon Code : ‘retailmenot’
by ahmadfathihadi | Jun 7, 2009 | Adobe, Article, Code for Joy
Flash XML Graphics (FXG) adalah sintax untuk medefinisikan grafik dalam Flex. Mungkin bagi anda yang pernah membaca artikel saya mengenai degrafa yang berjudul “Degrafa untuk Pemula” di http://www.indonesianflexcommunity.org/tutorial-flex/41-design/91-degrafa-untuk-pemula , anda akan mudah dalam memahami FXG.
Sebenarnya FXG dibuat agar para designer bisa bekerja terpisah dengan developer. Maksudnya ?, ya maksud saya adalah dengan menggunakan tools seperti Adobe Photoshop CS4, Illustrator CS4 and Fireworks CS4, kita akan bisa merubahnya kedalah format FXG dan bisa dipakai dalam aplikasi Flex kita. Namun sayangnya format FXG bisa digunakan menggunakan Flex 4 SDK dan termasuk dalam bagian spark . Maaf ya 
Anda bisa menggunakan FXG element langsung didalam sintax MXML ataupun berdiri sendiri sebagai Custom Component.
Contoh :
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<mx:Panel title="Ellipse" height="247" width="279" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" x="259" y="154">
<s:Graphic x="0" y="0">
<s:Ellipse height="100" width="250">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:entries>
<s:GradientEntry color="0x1c64a7"/>
<s:GradientEntry color="0x114371"/>
</s:entries>
</s:RadialGradient>
</s:fill>
<s:filters>
<mx:DropShadowFilter/>
</s:filters>
</s:Ellipse>
</s:Graphic>
</mx:Panel>
</s:Application>

Ellipse FXG
FXG bisa berada dalam file *.mxml dan *.fxg dengan syarat berada didalam tag <Graphic>
Tidak hanya itu, kita juga bisa menggunakan tag <Library> dan <Definition>, yang berfungsi semacam deklarasi FXG yang nantinya bisa kita pakai dengan memanggil namanya.
Contoh :
<?xml version="1.0" encoding="utf-8"?>
<!-- Ahmad Fathi Hadi/FXGLibraryExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Library>
<fx:Definition name="EllipseFathi">
<s:Graphic x="0" y="0">
<s:Ellipse height="100" width="250">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:entries>
<s:GradientEntry color="0x1c64a7"/>
<s:GradientEntry color="0x114371"/>
</s:entries>
</s:RadialGradient>
</s:fill>
<s:filters>
<mx:DropShadowFilter/>
</s:filters>
</s:Ellipse>
</s:Graphic>
</fx:Definition>
</fx:Library>
<mx:Panel title="Library Example" height="314" width="528" layout="absolute" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" x="93" y="31">
<fx:EllipseFathi x="0" y="0"/>
<fx:EllipseFathi x="255" y="105"/>
<fx:EllipseFathi x="0" y="105"/>
<fx:EllipseFathi x="255" y="0"/>
</mx:Panel>
</s:Application>

FXG Library Example
Mungkin dengan anda melihat contoh kode yang saya berikan, anda bisa mengerti maksud saya. (^_^)
Well, mungkin sekian dari saya untuk penjelasan singkat mengenai FXG.
by ahmadfathihadi | Apr 6, 2009 | Adobe, Article, Share
Saya yakin anda semua sudah mengenal Adobe PDF yang biasa anda buka dengan aplikasi PDF Reader yaitu Adobe Acrobat Reader. Banyak orang hanya memanfaatkan teknologi PDF sebagai suatu format untuk e-book, jika anda masih beranggapan seperti itu, mmm KELAUT AJA DEH ! atau mungkin anda termasuk orang yang tidak mengikuti perkembangan teknologi. hehehe, maaf.
Adobe PDF schema mengizinkan anda untuk membuat aplikasi, form, calculation, bahkan BarCode. ya ini tidak bohong loch. Tool yang digunakan adalah Adobe LiveCycle Designer. Sebenarnya saya sudah tau dari 2 tahun yang lalu, namun baru ingat untuk membuat cuplikan kecil mengenai tool ini setelah melihat-lihat isi Program Files yang ada di Laptop milik ibu saya.

Adobe Cs4 Master Collection
Terdapat satu buah aplikasi bernama Adobe LiveCycle Designer, OK, mari kita buka . . . . .

Adobe Livecycle Designer ES
Saya rasa Adobe LiveCycle Designer, termasuk aplikasi yang mudah dipelajari karena anda hanya tinggal mendrag component yang anda inginkan dan kemudian merubah nilai attributnya, kecuali satu, yaitu script untuk programmingnya. Pdf Scheme cukup familiar bagi anda yang sudah terbiasa dengan XML, anda hanya tinggal mempelajari FormCalc atau JavaScript untuk programming language-nya.
Kita lihat XML schema yang dihasilkan untuk sebuah component Drop Down List :
<field name=”DropDownList1″ y=”3.175mm” x=”6.35mm” w=”62mm” h=”9mm”>
<ui>
<choiceList>
<border>
<?templateDesigner StyleID aped3?>
<edge stroke=”lowered”/>
</border>
<margin/>
</choiceList>
</ui>
<font typeface=”Myriad Pro”/>
<margin topInset=”1mm” bottomInset=”1mm” leftInset=”1mm” rightInset=”1mm”/>
<para vAlign=”middle”/>
<caption reserve=”25mm”>
<font typeface=”Myriad Pro”/>
<para vAlign=”middle”/>
<value>
<text>Pilihan Hari</text>
</value>
</caption>
<items save=”1″>
<text>Senin</text>
<text>Selasa</text>
<text>Rabu</text>
<text>Kamis</text>
<text>Jumat</text>
<text>Sabtu</text>
<text>Minggu</text>
</items>
</field>
Ya, asik banget kan. . .
Anda bisa lihat pada gambar dibawah ini, ternyata anda tidak usah lagi membuang waktu untuk membuat program dengan bahasa pemrograman tertentu seperti JAVA atau Visual Basic, karena anda cukup mendesain aplikasi yang anda inginkan, kemudian memberikannya sedikit bumbu masak, dan eng ing eng, jadilah masakan yang anda inginkan.

Adobe Livecycle Designer - Preview Pdf
Tekhnologi PDF saat ini sudah mampu untuk membuat aplikasi, form, dsb, membuat banyak perusahaan diluar negeri merubah teknologi mereka untuk beberapa aplikasi kecil, seperti Registration Form yang selama ini mereka buat menggunakan HTML, kini menjadi PDF. dikarenakan kemampuan PDF saat ini yang sudah melebihi kemampuan HTML.
Silahkan download file yang sudah saya buat untuk membuktikan bahwa PDF sudah tidak lagi sekedar format E-Book. Download Disini dan disini
by ahmadfathihadi | Mar 12, 2009 | Article, Share

Gantengin ++
Bingung dengan logo ini ?, Logo ini saya buat sebagai simbol untuk usaha saya sekarang. Gantengin ++ adalah suatu suatu usaha untuk memperbaikin kondisi saat ini, bukan hanya masalah Kegantengan,hahaha (Kesannya seperti buruk rupa).
Sadarkah anda ? :
- Berapa Jumlah Jerawat dan Flex yang ada di wajah anda ?
- Kuatkah anda melakukan aktifitas yang membutuhkan tenaga lebih ?
- Tegakkah dada anda ? (Tidak Bongkok) ?
- Bagaimana kondisi kesehatan anda, Penyakit apa yang sedang diderita ?
- Rajinkah anda beribadah ?
- Apa sifat buruk anda ?
Nah, sebenarnya masih banyak lagi. Melihat pertanyaan diatas, anda mungkin bertanya “Kenapa saya tiba-tiba memikirkan hal tersebut ?”. Well, jadi gini, berapa umur anda sekarang ?, misalkan 19/20 misalnya. Kapan mau nikah ?, 25/27 misalnya. Yakin sudah layak nikah ?, nah, masih ada beberapa tahun lagi untuk memperbaikinya, ya anggap saja sebagai persiapan. (^_^). Jangan jadikan ini tertawaan loch, banyak orang yang baru menikah, kemudian menyesal kenapa dia tidak mempersiapkan dirinya selama ini. Misalnya, anda jarang olahraga selama ini, sehingga membuat anda kurang fit/lemah setelah berkeluarga. Kira-kira malu ga sama istri ?, ih payah nih, masa cowo nga kuat si gitu doang (Angkat barang misalnya, jangan berfikir negatif dulu yah) dan lain lain. Gimana ?, itu saja baru dari satu faktor, yaitu olahraga, masih banyak lagi loch.
Ok, kembali kediri saya, sebagai seorang Assisten Lab yang merangkap sebagai AUGM, pastinya jarang berolahraga, bahkan tidak pernah. Tidur selalu malam, biasanya jam 2/3 malam, dan bangun jam 7an. Buruk banget yah !. Belum selesai, udah gitu mulai berjerawat dan meninggalkan Bekas atau Flex.
Mumpung masih ada waktu beberapa tahun, saya mempunyai program kerja yang bisa memperbaiki keadaan saya sekarang.
Menyembuhkan Jerawat :
- Meminum ramuan Fermentasi tradisional Mesir, 1 minggu 2 kali sehabis bangun tidur.
- Mencuci muka sehari 4 kali dengan sabun khusus perawatan wajah.
- Mencuci muka setelah selesai beraktifitas yang membuat wajah kotor, seperti terkena asap knalpot.
- Mengurangi sentuhan tanggan dengan wajah
NB : Untuk ramuan yang saya bicarakan, bisa email ke ahmadfathihadi@gmail.com untuk mengetahui resepnya !
Olahraga :
- PushUp minimal 30 kali setelah selesai mandi dan berpakaian, dilanjutkan olahraga yang lain selama 15 menit.
- Mengutamakan tangga dibanding lift jika hanya 4 lantai.
- Makan sayur dan buah diperbanyak !, terutaman wortel
Penyakit :
- Dilarang makan telur, cokelat, kacang, ikan asin, Kratingdaeng.
- Kurangi, teh dan kopi.
Ibadah :
- Lebih rajin mengaji.
- Solat sunnah digalakkan kembali.
Sifat Buruk :
- Emosi kalau kelaparan !, solusinya ya kontrol emosi, alhamdulillah sudah berjalan dengan efektif
- Pelan-pelan kalau naik motor. usahakan jangan lebih dari 100 km/h.
- Utamakan orang lain, baru diri sendiri.
Ayo, mari koreksi diri anda, mumpung masih ada banyak waktu !
oh iya, jika anda telah selesai membaca tulisan ini, maka seharusnya anda mengoreksi diri anda, dan memasang logo gantengin ++. (more&hellip
by ahmadfathihadi | Mar 9, 2009 | Adobe, Article

Flex-SEO
Dulu sebelum Google belum mampu mengindex Flash Content. Banyak orang yang beranggapan bahwa Flash/Flex tidak cocok untuk SEO (search engine optimization). Kini Google sudah mengupdate engine searchingnya dengan kemampuan mengindex Flash. Hal ini dinyatakan google dalam blognya, yaitu di http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html.
Nah, berarti mulai sekarang anda tidak perlu khawatir dengan masalah SEO pada Flash/Flex. tidak ada satu trik-pun yang diperlukan untuk membuat Aplikasi Flash/Flex anda bisa di Crawl oleh google. namun saya menyarankan untuk pada Flex Developer agar menggunakan 2 bantuan dibawah ini, yaitu :
UrlKit dapat membantu kita dalam DeepLinking, sehingga anda bisa mengexpose url pada Flex Application yang anda buat. sedangkan RiaTrax adalah Flex Component yang berfungsi untuk event Tracking kepada Google Analytics. Menarik Bukan ?, penggunaanya pun cukup mudah, anda hanya perlu mendownload projeknya dari googlecode, kemudian mulai menggunakannya. Contohnya banyak bertebaran di Internet.
Intinya, jika anda ingin Flex Application yang anda buat menjadi sangat SEO, anda wajib menggunakan UrlKit dan RiaTrax. (more&hellip