Skip to content

Cara Melakukan Debug Console, Javascript dan AJAX di Google Chrome

25 April 2010

Bagi web developer, tool seperti firebug merupakan sebuah keharusan. Namun sangat disayangkan firebug ini hanya nyaman jika digunakan dari browser firefox. Lalu bagaimana dengan browser lain yang tidak support dengan firebug ? Mau tidak mau kita harus mengoptimalkan menggunakan tool debugging bawaan browser tersebut. Google chrome adalah salah satunya.

Sedikit flashback, berawal dari intensifnya melakukan coding ExtJS, ternyata Engine Javascript Firefox (Trace Monkey) lambat sekali. Semakin besar program ExtJS yang dibuat semakin berat rasanya. Berbeda jauh dengan chrome yang dibackup dengan engine V8, sangat ringan dan cepat. Lebih responsive dalam menjalankan aplikasi ExtJs.

Posting kali ini tentu saja akan membahas tool chrome ini, yang ternyata cukup mumpuni untuk beralih dari firebug. Let’s see.

Debug Console dan Javascript

  • Buka  javascript console dari menu icon control current page->developer->Javascript console atau dengan menggunakan shortcut ctrl+shift+j atau ctrl+shift+i.

Menu Developer Chrome

  • Setelah itu akan muncul layar seperti berikut

Jendela Debug Javascript

  1. Click icon script
  2. Pilih file javascript dari halaman web yang ingin kita debug pada combobox yang tersedia.
  3. Jika kita ingin melakukan debug per baris, maka click pada nomor baris untuk mengeset breakpoint. Lalu jalankan web seperti biasa dan pada saat mengeksekusi kode yang diberi breakpoint ini akan berhenti (pause) dibaris tersebut.
  4. Pada bagian ini, kita dapat melihat informasi breakpointnya yaitu scoping variable dan call stacknya.
  5. Control eksekusi code selanjutnya bisa melalui icon yang terdapat pada point nomer 5 ini. Apakah ingin melanjutkan eksekusi langsung atau baris per baris (step over).
  6. Terakhir adalah bagian console javascript, paling bawah. Console ini pun hampir sama dengan firebug hanya di chrome ini, sudah mendukung syntax hilighting, jadi lebih enak untuk bacanya. Silahkan tinggal bermain-main dengan code javascript diconsole ini.
    Pada contoh gambar diatas, breakpoint diset sesudah assign variable title. Jika kita ketik diconsole ‘title’ maka hasilnya adalah object component title.
    Tips : Untuk mencetak ke console dari kode javascript kita, chrome menggunakan fungsi console.log(), sama dengan firebug.

Debug Request Ajax

  • Buka menu Developer Tools atau dengan shortcut ctrl+shift+i.

Jendela Developer Tools

  1. Pada Jendela Developer Tools, click icon Resources. Pilih always enable pada opsi yang tersedia jika kita ingin senantiasa melakukan debug ajax pada web kita. Jika tidak, maka aktifkan temporary saja dengan memilih default Only enable for this session. Ingat mengaktifkan feature ini akan membuat load page lebih lambat, karena chrome akan mentrack resources  dari halaman web kita. Seperti css, gambar, javascript, waktu load, response time dsb.
  2. Click tombol Enable resource tracking. Halaman web akan direfresh.
  • Kemudian akan muncul jendela seperti berikut :

Jendela Debug Ajax

  1. Pilih tab xhr untuk memulai debug request Ajax.
  2. Jika kita melakukan request Ajax, maka akan terlihat dipanel sebelah kiri, ke url mana request ditujukan. Click salah satu request yang akan kita lihat.
  3. Parameter data yang dikirimkan akan terlihat di jendela header. Contoh diatas, parameter yang dikirimkan adalah edit, action, title dan code, dengan menggunakan methode request POST.
  4. Untuk melihat hasil/response dari server click tab Content.

Tips : Untuk menghentikan tracking resources ini, klik saja tanda centang biru samping kiri tulisan Sort by Response Time pada panel paling bawah jendela.

That’s all. Tampak familiar bukan ? Selebihnya tinggal kita explore feature lain dari Development Tools chrome ini, seperti Inspect element, profiling web untuk mengetahui berapa besar makan resource CPUnya dll.

Menurut gossip, Firefox versi 4 kemungkinan akan keluar dengan engine js yang lebih cepat. So, sementara ini terserah kita, apakah akan beralih dulu ke chrome untuk development sambil menunggu FF 4 keluar, atau tetap bertahan di FF versi sekarang.

Saya pribadi sih sudah jarang pakai firefox sekarang, satu-satunya alasan masih menggunakannya adalah 2 addonsnya download manager DownThemAll dan DownloadHelper, yang belum tersedia padanannya di chrome. Duh, kenapa saya jadi suka chrome ya, padahal sebelumnya i really hate that browser and love FF so much.

Ada tambahan atau pertanyaan ? Silahkan click link comment dibawah.

Selamat Mendebug :P

Extjs Tips : Membuat Multiple Row Toolbar

20 April 2010

Row Toolbar kedua dengan label tulisan

Strike to the point aja ya, intinya agar bisa mendapatkan beberapa baris toolbar caranya adalah :
1.  Buat sebuah toolbar biasa dahulu via options tbar atau bbar.
2. Tambahkan toolbar lainnya ke object container dimana toolbar pertama berada dengan option renderTo. Sebaiknya disimpan di event render, jadi pas element containernya sudah siap bisa langsung diattach tambahan toolbarnya.
3. Lakukan sinkronisasi layout toolbar supaya tidak tumpang tindih dengan methode syncSize().

myPanel = Ext.Panel({
....
tbar : {
text : 'Edit',
iconCls: 'icon-edit',
handler: function(){}
}
...
});
myPanel.on('render',function(){
new Ext.Toolbar({
renderTo: this.tbar,
items: 'Efek Sliding di JQuery' //ganti dengan item toolbar jika tidak ingin text
});
this.syncSize();
});

That’s it. Semoga bermanfaat.

Membersihkan Windows Dari Software Bajakan

16 March 2010

Mungkin gak sih, kalau kita bisa terlepas dari ketergantungan menggunakan software bajakan ?

Dengan bermodalkan kesabaran dan ulet sebenernya kita bisa kok step by step beralih menggunakan software alternatif yang gratis. Kecuali jika memang tidak ada pilihan lain selain software tersebut, yang artinya mau tidak mau kita harus merogoh kocek lebih dalam untuk membeli licensi berbayarnya atau kita tetep gunakan dengan bayangan dosa yang selalu menyertai. Nah lho ?

Kali ini saya ingin share, aplikasi gratis apa aja sih yang saya gunakan dan mungkin bisa membantu bagi yang ingin menggunakan software legal dan gratis. Eits, tapi catet ya, tidak berarti saya sendiri juga sudah terbebas sepenuhnya dari software bajakan ini lho, namun yang pasti sekarang sudah jauh lebih baik dan berusaha untuk melepaskan diri darinya :P

1. Office

Untuk aplikasi office pengganti Ms Office, saya menggunakan lotus symphony 1.3. Bisa dikatakan ini adalah openoffice dengan remake tampilan besar-besaran, sehingga software ini jauh lebih cantik dan nyaman digunakan. Tapi awas, bagi yang memorynya < 1GB sebaiknya menggunakan openoffice saja, dari pada Anda akan menggerutu karena loadingnya yang lambat :D

Tampilan Spreadsheet Symphony

Tampilan Spreadsheet Symphony

2.  Antivirus

Untuk pencegahan terhadap virus luar/internasional saya menggunakan Avira Antivir Personal, dan untuk virus lokal penjagaannya dipercayakan kepada Smadav. Keduanya bersanding dengan baik dan tidak membuat komputer jadi berat.
Bagi yang kurang suka Antivir, masih banyak alternative antivirus lain seperti avast dan comodo.
Sebagai catatan, kunci dari pemakaian antivirus sih sebenernya sesering mungkin lakukan update agar antivirus yang kita gunakan senantiasa dalam kondisi ‘fit’ untuk ‘memberantas’ virus yang masuk ke system kita.

3. Editor Grafis

Seneng retouch foto atau ngedit tampilan screenshot layar komputer ? jika ya pasti kenal dengan namanya Adobe Photoshop. Software ini memang belum ada tandingannya, bahkan saya sendiri masih kewalahan menggunakan alternatifenya yaitu GIMP, karena menunya yang masih belum familiar. Alhasil Photoshop (bajakan) masih saya gunakan, tapi untuk kasus khusus saja.
Alternatif lainnya saya lebih suka menggunakan Paint.NET. Tampilan mirip photoshop dan cukup ringan.

Tampilan Aplikasi Paint.NET

Untuk menginstall aplikasi Paint.NET ini, kita harus install dahulu .NET Runtime, karena aplikasi ini dibuat dengan platform .NET.

Selain itu, untuk software gambar vector saya mulai belajar menggunakan Inkscape, yang merupakan alternative software adobe illustrator dan corel draw.

Tampilan Aplikasi Inkscape

4. IDE (Integrated Development Environment)

Karena saya coding dengan C#, menurut saya hanya SharpDevelop saja yang bisa mendekati IDE .NET nya microsoft. Meskipun microsoft mengeluarkan versi express-nya yang free, namun tetap tidak bisa digunakan untuk komersil. Belum terbayang kalau tidak ada sharpdevelop ini mungkin saya sudah tidak berminat membuat aplikasi desktop under windows. Terlebih saya sudah tidak berminat menggunakan vb 6 bajakan :P

Tampilan Aplikasi Sharpdevelop

Untuk IDE development web (PHP + Js), sudah beberapa bulan ini saya menggunakan netbeans menggantikan macromedia dreamweaver (sekarang adobe dreamweaver). Memang html designernya belum ada tandingannya, terlebih dengan integrasi code php nya yang tidak merusak preview tampilannya. Tapi meskipun dengan netbeans php yang tidak memiliki designer toh lama kelamaan akhirnya bisa juga terbiasa dengan firefox sebagai previewnya. Sedikit memakan waktu sih, karena harus sering switch. Tapi saya sudah cukup puas bisa meninggalkan dreamweaver.

Satu lagi untuk editing file langsung biasanya pakai geany, karena sudah kebiasaan dilinux saya pakai geany sebagai text editornya.

5. CD/DVD Burning

Untuk software Burning ISO atau Copy CD/DVD saya menggunakan CDBurner XP. Tampilannya simple dan cukup ringan.

Tampilan Aplikasi CD Burner XP

Seperti Paint.NET, pastikan .NET Runtime sudah terinstall dulu ya.

6. MySQL Frontend

Saya sebelumnya sangat tergantung dengan EMS MySQL Manager sebagai MySQL Frontend, terlebih karena butuh sekali feature untuk export import data dari/ke file excel. Dengan heidiSQL terpaksa harus menggunakan format csv, tapi setidaknya untuk urusan management database lainnya masih OK koq. Kecuali itu, sekali-kali saya juga menggunakan MySQL Workbench.

Itu saja sharing saya, semoga bisa menggugah kita yang masih menggunakan bajakan untuk tidak berlama-lama lagi ya dalam bajakan. Sanggup bayar lisensi, do it !  jika tidak mulailah menggunakan alternatif software gratis.

What Next : Setelah PHP dan JS Framework

14 March 2010
tags:

Posting ini bukan membahas teknologi apa yang akan trend setelah bermunculannya framework PHP maupun Javascript. Namun ini hanyalah sharing ringan saja mengenai apa yang sedang saya pikirkan, belajar apa lagi ya untuk mendukung skill web saya dalam waktu dekat ini.

Memakai framework PHP sudah, javascript juga sudah. Saya tidak mau stagnant dengan skill saya sekarang. Kecuali itu, dengan hal yang baru bisa menambah tantangan dan juga ‘membunuh’ kebosanan karena bermain dengan itu-itu saja. So what next ? setelah dipikir ada beberapa kriteria apa yang harus saya pelajari.

1. Tidak boleh jadul, alias masih ngikutin trend.
2. Learning curve tidak terlalu tinggi, kecuali mungkin jika ada waktu luang lebih banyak.
3. Bisa dipakai cepat, artinya apa yang akan dipelajari bisa digunakan langsung dilapangan. Saya mengeliminir dulu mempelajari yang sifatnya masih investasi dan akan dipakai mungkin beberapa tahun ke depan.

Berdasarkan kriteria tersebut, ada beberapa pilihan dan keputusan saya adalah :

1. Mempelajari Adobe Air.
Saya sudah cukup nyaman dengan beberapa aplikasi Air yang saya gunakan, feelnya dapet, serasa menggunakan aplikasi desktop biasa. Karena itu saya tertarik untuk bisa membuat aplikasi web berjalan di Air. Sekilas browsing how-to nya tampak tidak terlalu sulit, mungkin perlu mempelajari beberapa materi yang memang tidak ada di engine javascript browser yang biasa kita gunakan. Seperti koneksi database standalone (local).
Saya rasa potensi air ini besar sekali.

2. Mempelajari Inkscape.
Bukan ingin menjadi artist, namun mendesain web butuh juga keahlian mengolah grafis dalam mendukung estetika web yang kita buat. Mencoba sedikit bergeser  dari untaian baris code untuk menjadi lebih kreatif.

That’s all, semoga proses learningnya lancar. Bagaimana dengan Anda, share dong apa sih yang akan Anda pelajari ?

Membuat Paginasi Untuk Menampilkan List Data

14 March 2010
tags:

Pagination Result

DooPHP Framework memiliki sebuah helper untuk membuat pagination yang mudah sekali digunakan. Berikut step untuk membuat pagination :

1. Buat sebuah configurasi routing dengan sebuah paramater halaman.
Misal kita mempunyai struktur url http://localhost/article/list/1/. Maka routingnya adalah $route['*']['/article/list/:pindex'] = array(‘ArticleController’, ‘list’);
Dimana :pindex adalah nama parameter untuk page yang akan ditampilkan (page index).

2. Buat object DooPager dan panggil methode untuk membuat pagination.
Contoh misal kita mempunyai 500 article yang akan ditampilkan, dengan sekali tampil 10 article dan jumlah paging link sebanyak 10, yang berarti ada 50 halaman.

Doo::loadHelper('DooPager');
//Set text Next dan Previousnya
$pager = new DooPager(Doo::conf()->APP_URL.'article/list', 500, 10, 10,'Prev','Next');
if(isset($this->params['pindex']))
$pager->paginate(intval($this->params['pindex'])); //Set current page jika ada
else
$pager->paginate(1);
echo $pager->output;

Selain itu kita juga bisa menampilkan pagination ini dalam bentuk combobox disamping dalam bentuk link seperti diatas. Caranya yaitu dengan memangill methode showJumpMenu, sebelum methode output. $pager->showJumpMenu();

Satu lagi, untuk mengeset nama class CSS sesuai yang kita inginkan, gunakan methode setCSS().

That’s it. Sangat mudah kan ?

Koneksi multi database di Kohana 3

13 February 2010

Jika biasanya untuk membuat sebuah website kita cukup membutuhkan satu database saja, maka lain halnya jika kita membuat web aplikasi untuk intranet. Terlebih aplikasi yang akan dibuat ternyata harus membaca data dari database yang sudah ada.

Untuk melakukan koneksi ke multi database di kohana 3, lakukan langkah berikut :

1. Deklarasikan database yang ingin digunakan dengan menambahkan array config database kita ke file application/config/database.php.

Misal kita deklarasikan database dengan nama accounting dan inventory.

2. Pada constructor class model, buat instance database yang ingin digunakan.

public function  __construct() {
$this->dbaccounting = Database::instance('accounting');
//ganti nama instance sesuai nama config database
$this->dbinventory = Database::instance('inventory');
parent::__construct();
}

3.  Saat eksekusi query, pastikan kita mengirimkan variabel $this->dbaccounting ini sebagai parameter methode execute, karena jika tidak kohana akan menggunakan database default.

$results = DB::delete('jurnal_umum')->where('id', '=', $id)->execute($this->dbaccounting);

Tidak jauh berbeda dengan kohana 2 sebenernya, hanya di Kohana 3 sebagian besar sudah menjadi class factory.

$this->dbaccounting = new Database('accounting');
$this->dbinventory = new Database('iventory');

Semoga membantu, jika ada tambahan silahkan koment ya :D

Btw, gimana ya cara membuat syntax hi-light kalau pake WP gratisan…?

Tips Konversi SQL Result Menjadi JSON di PHP

11 February 2010

Beberapa dari kita mungkin membutuhkan data hasil proses server dalam format JSON. Sebagai contohnya adalah data yang direquest menggunakan ajax. Ternyata PHP sudah menyediakan fungsi untuk membuat format JSON ini, yaitu dengan fungsi json_encode.

Namun begitu, jika kita ingin langsung mengkonversi hasil dari query mysql ke format JSON, maka kita ubah dulu menjadi array untuk selanjutnya di lemparkan ke fungsi json_encode.

$result = mysql_query($query) or die(mysql_error());
$rows = array();
while($row = mysql_fetch_assoc($result)) {
$rows[] = $row;
}
echo json_encode($rows);

That’s it. Very simple.

Follow

Get every new post delivered to your Inbox.