Hightlight Source Code with SyntaxHighlighter

Beberapa programmer yang membuat blog mereka sendiri terkadang ingin berbagi sesuatu tentang programming. Mereka terkadang menuliskan source code programming yang mereka gunakan untuk membuat sebuah tampilan tertentu. Dan biasanya mereka berbagi souce code secara mentah. Alih-alih menuliskan secara indah biar mudah dibaca, beberapa progammer menuliskannya agar mudah di-copy. Tidak salah sih, tetapi kadang agak sulit untuk memisahkan antara source code dengan tulisan sang programmer.

Mereka (beberapa programmer menuliskan seperti ini) :

<html>

<head><title>judul<title></head>

<body><?php echo ‘isinya’; ?></body>

</html>

Tidak seperti ini :


<html>

<head><title>judul<title></head>

<body><?php echo 'isinya'; ?></body>

</html>

Nha menurut anda (pembaca) bagaimana? Enakan dibaca yang ke-2 kan? Di contoh kedua kita bisa membaca dan membedakan dengan mudah, membaca line number, membaca code-nya, untuk copy juga mudah tinggal klik view plain maka akan tampil code-nya dalam bentuk plain, dan tinggal kita copy. Selain itu tampilan web kita jadi semakin cantik dengan adanya highlighting ini, sehingga bisa jadi semakin banyak pembaca web kita.

Jadi bagaimana menerapkannya?? Bagi mereka yang blogging di wordpress tinggal menggunakan

isi code

Untuk yang blogging di situs lain misal blogspot (setau saya belum mencantumkan highlighter ini), atau weblog yang dibikin sendiri caranya :

  1. Download SyntaxHighlighter di sini atau sini.
  2. Extract file hasil download dan upload file-file tersebut ke sebuah hosting, misal http://www.example.com/
  3. Udah deh tinggal pakai, caranya include file yang dibutuhin misal :
    <script type="text/javascript" src="scripts/shCore.js"></script>
    	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
    	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
    	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
    	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
    	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
    	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
    	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
    	<script type="text/javascript" src="scripts/shBrushJava.js"></script>
    	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
    	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
    	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
    	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
    	<script type="text/javascript" src="scripts/shBrushScala.js"></script>
    	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
    	<script type="text/javascript" src="scripts/shBrushVb.js"></script>
    	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
    	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
    	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
    
    • Pada baris pertama merupakan core script yang akan dipakai.
    • Pada baris kedua merupakan script yang akan mengatur untuk penulisan Bash.
    • Pada baris ketiga merupakan script yang akan mengatur untuk penulisan C++.
    • Pada baris selanjutnya merupakan script yang akan mengatur untuk penulisan bahasa-bahasa lain.
    • Pada 2 baris terakhir merupakan core style dan style tiap bahasa.
  4. Setelah itu tuliskan fungsi javascript yang akan membuat efek source code kita jadi ter-highlighting :
    	<script type="text/javascript">
    		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    		SyntaxHighlighter.all();
    	</script>
    
    • Dua baris diatas merupakan script konfigurasi yang akan membuat efek source code kita menjadi ter-highlighting.
  5. Terakhir tuliskan syntax source code anda dengan cara dimasukkan ke dalam tag <pre class:”brush [bahasa]”> syntax</pre>
    misal :

    function test() : String
    {
    	return 10;
    }
    

Udah deh selese….

Semoga bermanfaat….
Nb:

  • tag pre bisa diganti dengan tag lain, untuk lebih jelasnya baca di sini.
  • untuk yang make wordpress.com seperti saya bisa di liat di sini untuk lebih jelasnya.
  • kode yang otomatis terhighlight adalah kode dalam situs http://www.example.com (dalam contoh ini), kalau di subfolder href dan src harus diganti sesuai lokasi.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

.htaccess URL Rewriting

setelah pada post sebelumnya saya bercerita sekilas tentang URL rewriting dengan file .htaccess, maka pad post saya kali ini saya akan focus pada contoh file .htaccess yang akan digunakan sebagai URL  rewriting.

Langsung saja saya akan kemukakan beberapa contoh URL rewriting dengan file .htaccess :

  1. Rewrite product.php?id=12 ke product-12.html
    Untuk mengubah ekstensi sebuah file (dalam contoh saya .php) dari address bar dengan ekstensi lain merupakan sesuatu hal yang tidaklah begitu sulit. Begitu pula parameter dari dinamyc URL (?id=12) dapat kita sembunyikan dengan mudah, sehingga user yang mengakses web kita tidak menyangka bahwa sesungguhnya kita memakai skrip php. Adapun isi file .htaccess-nya untuk melakukan hal ini adalah :

    RewriteEngine on
    RewriteRule ^product-([0-9]+)\.html$ product.php?id=$1
    

  2. Rewrite product.php?id=12 ke product/ipod-nano/12.html
    Dalam menulis URL kita sangatlah disarankan untuk mencantumkan keyword ke URL kita, sehingga kemungkinan untuk mendapatkan rangking dalam pencarian lebih tinggi (baca page-rank search engine akan naik). Untuk melakukannya berikut ini contoh isi file .htaccess-nya :

    RewriteEngine on
    RewriteRule ^product/([a-zA-Z0-9_-]+)/([0-9]+)\.html$ product.php?id=$2
    

  3. Rewrite site.com/user.php?username=xyz ke site.com/xyz
    Selain poin 1, ada lagi cara agar user pengunjung web kita tidak mengetahui skrip yang kita pakai. Hal ini juga bisa juga sebagai salah satu langkah pengamanan terhadap data kita. Misal url kita user.php?id=123 dan di sit kita bisa edit user dengan id=123, kalau ada pengguna jahil dan memasukkan angka  selain id-nya dia bisa berabe kita (contoh ini hanya buat web yang pembuatnya belum tahu pembatasan akses) . Untuk itu kita perlu rewriter yang akan menghilangkan user.php?id dan dalam hal ini file .htaccess yang digunakan akan berisi :

    RewriteEngine On
    RewriteRule ^([a-zA-Z0-9_-]+)$ user.php?username=$1
    RewriteRule ^([a-zA-Z0-9_-]+)/$ user.php?username=$1
    

Demikian sekelumit tutorial pengetahuan yang bisa saya bagi, mungkin lain kali akan saya jelaskan mengenai format dan arti penulisan dari file .htaccess.

Semoga berguna….

Sumber : google.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

Tinggalkan IE 6 demi kenyamanan bersama

Beberapa hari ini aku coding beberapa aplikasi web dengan css standar v 2.1 (belum css3). Semua style berjalan baik di beberapa web browser, Opera 9.2, Firefox 3.08/v2 juga lolos, chrome 1.x. Tapi di Internet Explorer v6, yang notabene masih banyak digunakan malah tampilannya jadi acakadul. Aku merasa codingku sudah standar semua termasuk cssnya sudah standar (v 2.1). Tapi ternyata si IE 6 ini ga mau make css v2.1, yang mana sekarang merupakan standar versi css di dunia web programming.

Setelah itu selidik, punya selidik browser IE yang notabene punya raksasa software Microsoft, merupakan sebuah web browser yang sama sekali tidak mau mengikuti standarisasi yang ada. Kok bisa saya bilang gini?? Bisa donk, versi terbaru IE yaitu versi 8 (saat tulisan ini ditulis), sangat jauh dari standarisasi ACID. Apa itu ACID? ACID disini bukan ACID database, tapi ACID yang merupakan sebuah test page untuk web browser yang digunakan untuk mengetahui apakah sebuah web browser sudah sesuai dengan standarisasi yang ada.

ACID sampai saat ini sudah mencapai versi 3 yang meliputi uji :

DOM Level 2 Traversal (subtests 1-6)
DOM Level 2 Range (subtests 7-11)
Content-Type: image/png; text/plain (subtest 14, 15)
<object> handling and HTTP status codes (subtest 16)
DOM Level 2 Core (subtests 17, 21)
DOM Level 2 Events (subtests 17, 30-32)
CSS Selectors (subtests 33-40)
DOM Level 2 Style (subtest 45)
DOM Level 2 HTML (subtest 60)
DOM Level 2 Views
ECMAScript GC (subtests 26-27)
Unicode 5.0 UTF-16 (subtest 68)
Unicode 5.0 UTF-8 (subtest 70)
HTML 4.0 Transitional (subtest 71)
HTML 4.01 Strict
SVG 1.1 (subtests 74, 78)
SVG 1.1 Fonts (subtests 77, 79)
SMIL 2.1 (subtests 75-76)
ECMAScript Conformance (subtests 81-96)
Data URI scheme (subtest 97)
XHTML 1.0 Strict (subtest 98)
HTTP 1.1 Protocol
  • DOM Level 2 Traversal (subtests 1-6)
  • DOM Level 2 Range (subtests 7-11)
  • Content-Type: image/png; text/plain (subtest 14, 15)
  • <object> handling and HTTP status codes (subtest 16)
  • DOM Level 2 Core (subtests 17, 21)
  • DOM Level 2 Events (subtests 17, 30-32)
  • CSS Selectors (subtests 33-40)
  • DOM Level 2 Style (subtest 45)
  • DOM Level 2 HTML (subtest 60)
  • DOM Level 2 Views
  • ECMAScript GC (subtests 26-27)
  • Unicode 5.0 UTF-16 (subtest 68)
  • Unicode 5.0 UTF-8 (subtest 70)
  • HTML 4.0 Transitional (subtest 71)
  • HTML 4.01 Strict
  • SVG 1.1 (subtests 74, 78)
  • SVG 1.1 Fonts (subtests 77, 79)
  • SMIL 2.1 (subtests 75-76)
  • ECMAScript Conformance (subtests 81-96)
  • Data URI scheme (subtest 97)
  • XHTML 1.0 Strict (subtest 98)
  • HTTP 1.1 Protocol

Sedang pada ACID versi 2 yang diuji :

  • Alpha transparency in PNG-format image.
  • The object element.
  • data URIs.
  • Absolute, relative, and fixed CSS positioning.
  • The CSS box model.
  • CSS table formatting.
  • CSS generated content.
  • CSS parsing.
  • Paint order.
  • Hovering effects

Pada versi 1 yang diuji hanyalah soal kemampuan browser dalam menangani CSS versi 1.

Cukup bicara soal ACID, sekarang kembali ke IE 6. Sesuai judul yang saya cantumkan, saya menyarankan pengguna internet untuk meninggalkan IE 6, kenapa?? Ya tadi, sang browser dari microsoft ini hanya mampu melewati uji ACID1, adiknyaitu v7 juga hanya mampu melewati ACID1, untuk ACID2nya belum sempurna. Sedangkan yang terbaru v8, hanya mampu memberi persentase 20 dari standar. Tau deh microsoft maunya apa browsernya gitu semua.

Untuk itu saya tekankan sekali lagi, mari tinggalkan IE 6 demi kenyamanan bersama. Kenyamanan yang saya maksud adalah agar kita dapat menikmati semua fitur dan tampilan website secara maksimal. Kasihan juga jika suatu saat anda masih memakai IE6, padahal web yang anda kunjungi menggunakan CSS v2. Iya ga masalah soal tampilan, tapi bagaimana kalau ada tombol yang hilang (kalau tombolnya ga penting si ga masalah, tapi kalau tombol transaksi??) gara-gara tidak kompatibelnya CSS dengan browser?? Mau menyalahkan programmer, bisa. Tetapi biasanya sang programmer dah mewanti-wanti dengan tulisan “Best view with x browser in AxBpx”. Jadi salah siapa??

Nb: Untuk programmer juga harus tahu cara mengatasinya, salah satunya dengan conditional css, suatu saat insyaallah saya akan bahas.

Semoga bermanfaat…

~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

######################################################

Referensi :

Search Engine Friendly URL

Search engine friendly url adalah sebuah metode untuk membuat URL atau alamat website yang kita miliki menjadi sebuah alamat yang mudah untuk di-index oleh mesin pencari semacam google, sehingga rangking web yang kita miliki bisa berada di atas. Metode search engine friendly url (SEF) ini hanyalah salah satu cara untuk meningkatkan peringkat website kita dalam daftar pencarian, masih ada metode lain seperti backlink, meta, atau yang lainnya.

Dalam SEF seperti yang telah saya utarakan sebelumnya metodenya adalah dengan mengubah alamat web kita yang tadinya susah untuk di-index, menjadi semakin mudah di-index oleh search engine. Pada prinsipnya kemampuan search engine dalam membaca tidaklah jauh beda dengan manusia. Walau tak sesempurna manusia tetapi beberapa faktor pembacaan oleh search engine hampir sama dengan manusia. Misalnya pada url, search engine dan manusia sama-sama bakal lebih mudah membaca url seperti ini :


http://www.contoh.com/aksi/metode/parameter

daripada seperti ini :


http://www.contoh.com/index.php?act=aksi&met=metode&par=parameter

Nah, pada contoh pertama merupakan contoh SEF, sedang contoh kedua bukan merupakan url SEF. Metode yang digunakan untuk membuat SEF istilahnya adalah url rewriting, untuk melakukannya dibutuhkan sebuah file .htaccess file ini adalah sebuah file yang otomatis akan me-redirect atau menolak suatu request [utamanya http request] yang menuju website kita. File .htaccess ini hanya bisa berjalan saat mod_rewrite [apache] dari web server aktif. Untuk melihat apakah mod_rewrite [apache] aktif atau tidak caranya mudah. Yaitu buat sebuah file php dan isi file tersebut dengan kode dibawah ini :


<?

phpinfo();

?>

setelah itu simpan file tersebut misal dengan nama info.php, dan disimpan di (misal)


/path/to/file [root folder atau folder apa saja yang merupakan bagian kita ]

kemudian buka file tersebut lewat browser, misal


http://www.path.com/to/file/info.php

dan lihat disitu apakah ada mod_rewrite, kalau ada, selamat anda bisa memakai SEF dengan .htaccess. Adapun contoh file .htaccess adalah :


Options +FollowSymLinks
Options -Indexes
DirectoryIndex index.php
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L,QSA]

isi file .htaccess ini merupakan serangkaian command kepada server yang biasanya juga terdapat di httpd.conf.

Semoga berguna….

~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

Firefox Add-Ons yang sebaiknya anda tahu

Setelah beberapa kali jalan-jalan di internet dan terakhir kali jalan-jalan ke website teman di plurk, yaitu  mbak maya dan bang andri, saya jadi kepikiran untuk menulis sebuah post tentang firefox add-ons yang sebaiknya diketahui dan dimanfaatkan oleh seorang web developer (sebagai seorang developer hati saya tergugah untuk berbagi).

Firefox Add-on(s) adalah sekumpulan aplikasi kecil tambahan semacam plugin yang digunakan untuk memperkuat, mempermudah, mempersingkat, dan sebagainya selama kita berelancar dan bekerja dengan Firefox. Apa saya bilang bekerja? YA bekerja, bakerja dengan firefox bukanlah hal yang aneh, sekarang hampir sebagian orang (terutama IT) bisa dipastikan bekerja dengan firefox, entah bekerjanya berupa kirim-terima email, jual beli lewat internet (sebagai info saya lagi ngerjain modul payment lewat paypal buat salah satu perusahaan/firma hukum), bisa juga blogging for money.

Untuk developer sediri bekerja dengan firefox bisa berarti bugging atau mencari bug atau error dari aplikasi yang dia buat. Bug atau error tersebut bisa berupa kesalahan tampilan, kesalahan dalam logika proses, bahkan bisa juga kesalahan dalam pemrosesan data yang nantinya bisa digunakan sebagai celah bagi para cracker.

Nah untuk itu kita bisa memakai beberapa Add-ons firefox yang bisa membantu dalam bugging. Misalnya (yang saya pakai) :

  • Web developer : yang biasanya aku pakai buat checking form element, hidden filed, images, dsb.
  • firebugs : walau mungkin di add-on sebelumnya fitur editing script dah ada tapi buat ngoprek script aku nyaman pakai ini (bisa buat hack lho, kapan-kapan aku cerita :mrgreen: )

Selain dua add-ons diatas, masih banyak lagi add-ons yang bisa kita gali. Oh ya, saya juga memakai add-ons ini lho :

  • Fireshot : untuk membuat screenshot dari web yang kita buat (sayangnya cuman buat windows adanya, di linus saya memakai WebShots).
  • Zotero :add-on yang berfungsi seperti perpustakaan (bagus banget buat research).

Fiuh, capek juga ngetik segini. Dah dulu ah, kapan-kapan aku cerita tentang firebugs atau add-on lain.

Semoga bermanfaat…

~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

how to change your plurk theme

Plurk adalah sebuah jaringan social network yang cukup dikenal, dengan mekanisme website hampir seperti twitter tetapi dengan tampilan jauh beda dari twitter membuat saya lebih memilih plurk sebagai jaringan interaksi (bisa dibilang pengganti yahoo messenger chat).

Di plurk, kita dapat mengganti theme sesuka kita caranya :

  • Klik link edit yang berada di sebelah kiri atas, sehingga muncul pop-up.
  • Klik tab customize profile  pada pop-up, udah deh ubah judul dan theme sesuai selera kita.
  • Bahkan untuk lebih menarik kita dapat menggunakan css sebagai styler.

Berikut ini contoh css yang saya gunakan untuk merubah theme plurk saya, sehingga dominan warna hitam :


body, html {
     background: transparent;
     background-color:black;
     background-repeat: repeat;
     color: white;
}
#alert_beacon{
     color: green;
}
#timeline_holder, #dashboard_holder {
     background: transparent;
     background-color: black;
     background-repeat: repeat;
}
#top_bar a, #top_login a, #dashboard_holder a, #footer a {
     color: white;
}
.plurkaction, #toggle_tab li.tt_selected, #plurk-dashboard{
     background: #000000;
     color:#fff;
     border: 5px solid #222;
}
#input_big{
     color: white !important ;
     background-color:black;
}  

Untuk lebih jelas tentang theme di pluk dapat dibaca di :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Semoga berguna.

Regards,

 

Quantro a.k.a Royyan A.