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.

Opera 10.00 Beta First Run

Setelah beberapa waktu aku mencoba opera 10.00 Alpha, ternyata sekarang telah keluar versi betanya. Dalam klaimnya versi Beta memiliki banyak kelebihan dibanding browser lain. Bahkan diklaim lebih cepat dari browser-browser lain (saya telah coba sekitar 2 harian tanpa turbo mode dan memang bener). Beberapa fitur yang opera baru ini unggulkan antaranya :

  1. Turbo Mode
    Dari awal walaupun tanpa turbo mode emang opera sudah termasuk browser yang cepat terutama buat download-download, ini dikarenakan di dalam engine browsernya terdapat engine downloader terutama downloader torrent. Sedangkan pada versi 10.00 ini mereka menggunakan engine baru + presto rendering engine (milik opera) yang diklaim bisa membuat koneksi beberapa kali lebih cepat inilah yang disebut turbo mode. Untuk mengaktifkannya tinggal munculin status bar (view >> toolbar >> status bar), abis tu klik kanan di pojok kiri status bar muncul menu, pilih configure turbo mode. Nah tinggal kita setting turbo modenya :

    • Automatic
      Berarti bahwa opera akan secara otomatis akan mengaktifkan turbo mode jika koneksi kita melambat.
    • On
      Berarti bahwa opera akan mengaktifkan turbo mode baik koneksi kita melambat maupun tidak.
    • Off
      Berarti bahwa opera akan menonaktifkan turbo mode.
  2. Elegan Tabbed Browsing
    Ya, tampilan tab browsernya keliatan keren. Lebih elegan dibanding versi-versi sebelumnya.
  3. Better Speed Dial
    Better speed dial? Bener banget, soalnya sekarang kita bisa setting banyaknya square untuk speed dial serta kita juga bisa ubah background speed dial-nya sesuka kita.

Dan masih ada beberapa fitur baru lainnya. Tapi disamping banyaknya kelebihan yang ada, ada satu hal yang bener-bener membuat saya ga begitu suka versi ini. Di laptop saya (ga tau tempat yang lain), saat saya menutup opera dalam keadaan masih terkoneksi dan setelah itu saya buka lagi lain waktu, halaman-halaman yang dulu saya buka seakan-akan minta untuk di save sebagai txt. Padahal kalau browser lain halaman yang lalu akan langsung muncul sebagai halaman normal.

Semoga bermanfaat….

Nb:

  • Opera 10.00 Beta adalah  100 % ACID compliance (sangat sesuai standar)
  • Opra 10.oo Beta saya adalah Build 1551, dengan Identification : Opera/9.80 (Windows NT 5.1; U; en) Presto/2.2.15 Version/10.00

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

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.

Irene in My Head

Akhirnya setelah beberapa lama ga nyambangin situsnya ELI, kemarin aku mampir ke sana. Ternyata mereka udah ngeluarin album kedua, yang secara suka rela mereka bagikan kepada kita. ELI atau everybody loves irene merupakan sebuah band indonesia, namun dengan kebanyakan lirik lagu mereka berbahasa inggris. Untuk alirannya sepertinya mereka lebih suka menyebut diri mereka Trip Hop, ini bisa dilihat dari bagian header website mereka yang bertuliskan Trip Hop Band from Indonesia.

Mereka telah mengeluarkan dua album yang bisa di download gratis, untuk album pertama mereka ada beberapa lagu yang bagus bahkan masuk OST dari film Gerbang13 – ‘Crop Circle Me’, DTK (Dunia Tanpa Koma) – Memento Mori dan Re-Evolution. Untuk album kedua ini saya cuplik track pertamanya :

Title : No One Here’s Alone

We all live and will die so don’t you cry
Nothing you have to hide coz I’m here by your side

We all live and will die so don’t you cry
Let’s take a ride till you satisfied don’t just keep it inside your heart

We all live and will die so don’t you cry
Nothing you have to hide coz I’m here by your side

We all live and will die so don’t you cry
Let’s take a ride till you satisfied don’t just keep it inside your heart

They can’t punish us only god we trust
So grab my hand we’ll fight till end

We all live and will die so don’t you cry
Don’t just sit and feel the pain and shall our memory will remain

Untuk bisa mendapatkannya lagu-lagu mereka, kunjungi :

Semoga bermanfaat….

Nb: Judul post aku buat gitu soalnya setelah ngedenger lagu mereka kata-kata irene sang vokalis, menginspirasi ide-ideku.

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

Regard, 

 

Quantro a.k.a Royyan Azizi..

Prita Mulyasari – RS. Omni – UU. ITE

tulisan ini merupakan COPAS dari blog mbak maya, di link ini :

Mungkin inilah salah satu bentuk kepedulian dan rasa solidaritas sebagai sesama perempuan, saya berusaha menulis apa yang terjadi dan, antara Prita Mulyasari dan RS. Omni Intl Tangerang serta UU no.11 tahun 2008 tentang Informasi dan Transaksi Elektronik (UU-ITE).

Dari tulisan di ruang Surat Pembaca detikcom, kini Prita harus mendekam di Penjara Wanita Tangerang sejak 13 Mei 2009. Prita adalah seorang Ibu Rumah Tangga yang memiliki  anak yang masih balita, Khairan dan Ranarya. Bahkan anaknya yang kedua, Ranarya,  masih membutuhkan ASI. Haruskan Prita dihukum seberat itu, sampai harus terpisah dengan suami dan anak-anaknya…???

Apa yang ditulis Prita, baik di Email maupun di SurPem detikcom, adalah satu bentuk kritik  mengenai kesalahan yang telah dilakukan oleh pihak Rumah Sakit Omni. Mengacu pada tulisan om Nukman, RS. Omni tidak seharusnya melayangkan gugatan yang akhirnya membuat Prita harus bermalam di ruang tahanan. Karena apa yang sudah ditulis Prita, seyogyanya menjadi sebuah cambuk dan pembelajaran untuk peningkatan pelayanan.

Kasus Prita ini mengingatkan saya dengan kejadian kemarin, senin 1 Juni 2009, ketika saya mengirimkan email ke Surat Pembaca di Okezone. Memang beda kasusnya, tapi ada kesamaan jalur yang saya tempuh. Yaitu pengiriman surat elektronik. Tapi Alhamdulillah. pihak Indovision langsung menanggapi dan menghubungi saya secara langsung, dan masalah dapat teratasi. Padahal, saya sudah berencana, kalau sampai saya pulang kantor belum juga ada tanggapan dari Indovision, kemungkinan besar saya akan menyebarkan keluhan saya tersebut ke media yang lain.

Menurut beberapa tulisan, Prita terbukti melanggar Pasal 27 ayat 3 Undang-Undang Nomor 11 Tahun 2008 tentang Informasi dan Transaksi Elektronik, yang isinya, “Setiap orang dengan sengaja dan tanpa hak mendistribusikan dan/atau mentransmisikan dan/atau membuat dapat diaksesnya informasi elektronik dan/atau dokumen elektronik yang memiliki muatan penghinaan dan/atau pencemaran nama baik.”

Soal nama baik?

Bagaimana sebuah Rumah Sakit, atau lembaga / instansi manapun mengaharapkan nama baik, ketika dirinya tidak memberikan pelayanan yang baik terhadap konsumennya. Nama baik akan seiring jalan
membuntuti nama sebuah lembaga / instansi ketika ia memberikan pelayanan terbaik buat konsumennya, tanpa memandang asal-usul, latar belakang dan kepribadian si konsumen. Kenapa saya berikan tambahan ini, karena memang terkadang para pemilik jasa, hanya akan memberikan pelayanan terbaik terhadap orang-orang yang memiliki jabatan, pangkat dan kekayaan. Terhadap mereka yang tidak memilikinya, pemilik jasa akan memberikan layanannya secara ala kadar.

Lalu, bagaimana tentang kebebasan mengeluarkan pendapat? Bukankah yang ditulis Prita (dan saya) di Surat Pembaca adalah sebuah bentuk dan cara mengeluarkan pendapat? Begitupun denga sarana Blog/Weblog, Milis, Social Media dan media-media lain.

Yaaa.. saya hanya bisa berdoa dan berharap, agar semua pihak bisa bermusyawarah dengan hati tenang, berpikir dengan logis, bersikap bijak dan membuat keputusan dengan tepat dan adil buat semua pihak.

Buat Prita, sabar ya Bu…
Allah tidak tidur.
We here for you….

MARI KITA DUKUNG BU PRITA DEMI KEADILAN DAN KEMANUSIAAN!!!

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 :