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.

Advertisements

.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.

Siapa Bilang Membuat Web Susah??

Dulu membuat website merupakan sebuah proses yang panjang dan melelahkan, dari mulai penentuan tema awal untuk apa website dibuat, penentuan design atau designing tampilan website, programming atau coding atau pembuatan code program website, yang mana bagi sebagian orang terutama bagian coding merupakan bagian yang peling menjemukan membingungkan dan membuat tidak bersemangat. Apalagi kalau sudah berhubungan dengan website dinamis, yang mana tampilan kontennya berasal dari database, udah deh beberapa orang nyerah kalau udah da databasenya gini, belum lagi soal security atau keamanan wesite. [Keamanan website bukan cuman keamanan dari form injection atau sql injection ataupun url injection, tapi semua hal mulai dari pengaturan akses file, keamanan upload file dan lain-lain merupakan elemen keamanan website.] Udah deh kalo bahas keamanan website setiap orang pasti males buat website, soalnya beribet, lama n kadang mahal.

Tapi jangan khawatir sekarang banyak solusi untuk buat website atau ngembangin website yang lumayan aman n tampilannya lumayan. Solusi yang saya maksudkan disini ada 2 yaitu solusi dengan CMS dan Framework, untuk framework udah pernah saya tulis sekilas. Disini belum akan saya lanjutkan soal framework. Sekarang kita bahas CMS atau content management system : 
Kata wikipedia :

A web content management system (WCMS or Web CMS) is content management system (CMS) software, usually implemented as a Web application, for creating and managing HTML content. It is used to manage and control a large, dynamic collection of Web material (HTML documents and their associated images). A WCMS facilitates content creation, content control, editing, and many essential Web maintenance functions. Usually the software provides authoring (and other) tools designed to allow users with little or no knowledge of programming languages or markup languages to create and manage content with relative ease of use. Most systems use a database to store content, metadata, and/or artifacts that might be needed by the system. Content is frequently, but not universally, stored as XML, to facilitate reuse and enable flexible presentation options.

Om google terjemahin buat kita :

Sebuah sistem manajemen konten web (WCMS atau Web CMS) adalah sistem manajemen konten (CMS) perangkat lunak, biasanya dilaksanakan sebagai aplikasi Web, untuk menciptakan dan mengelola HTML konten. Digunakan untuk mengelola dan kontrol yang besar, dinamis kumpulan bahan Web (HTML dokumen dan gambar yang terkait). J WCMS memfasilitasi konten penciptaan, isi kontrol, editing, dan banyak fungsi penting Web pemeliharaan.
Biasanya menyediakan perangkat lunak authoring (dan lainnya) alat-alat yang dirancang untuk memungkinkan pengguna dengan sedikit atau tanpa pengetahuan bahasa pemrograman atau bahasa markup untuk membuat dan mengatur konten dengan relatif mudah digunakan.
Kebanyakan sistem menggunakan database untuk menyimpan konten, metadata, dan / atau seni yang mungkin diperlukan oleh sistem. Konten yang sering, namun tidak universal, yang disimpan sebagai XML, untuk memfasilitasi dan mengaktifkan kembali pilihan fleksibel presentasi

Intinya dengan CMS ini kita bisa membuat website secara instan dalam waktu relatif singkat dan dengan keamanan cukup memadai (dengan catatan semua patch diaplikasikan). Adapun beberapa CMS (web) yang cukup terkenal dan banyak digunakan baik oleh personal maupun perusahaan (diambil dari wikipedia) adalah :

  1. Liferay (Java)
  2. Apache Lenya (Java Bundle)
  3. Django (Phyton) ~ populer di luar negeri
  4. Radiant (Ruby)
  5. Joomla (PHP)

saya yakin dari 5 CMS yang saya sebutkan tadi di negara kita  paling banyak adalah memakai Joomla, dikarenakan di Indonesia pemrograman yang terkenal untuk web adalah PHP.

…. (To be continue~moga sempet nglanjutin)

Framework (Software)

Diambil dari wikipedia :

A software framework, in computer programming, is an abstraction in which common code providing generic functionality can be selectively overridden or specialized by user code providing specific functionality.

Frameworks are similar to software libraries in that they are reuseable abstractions of code wrapped in a well-defined API. Unlike libraries, however, the overall program’s flow of control is not dictated by the caller, but by the framework. This inversion of control is the distinguishing feature of software frameworks.

Di translate oleh om google :

Sebuah kerangka kerja perangkat lunak, dalam pemrograman komputer, merupakan abstak kode umum yang menyediakan fungsionalitas umum dapat menimpa selektif atau khusus oleh pengguna kode menyediakan fungsionalitas tertentu.

Kerangka kerja yang mirip dengan perangkat lunak perpustakaan yang mereka reuseable abstractions kode dibungkus dalam baik ditetapkan API. Tidak seperti perpustakaan, namun secara keseluruhan program aliran kontrol tidak dictated oleh pemanggil, tetapi oleh kerangka. Ini inversi kontrol membedakan adalah fitur software kerangka.

Atau dalam bahasa manusia saya Framework adalah sebuah kumpulan skrip yang digunakan untuk membantu seorang software engineer / programmer untuk bekerja. Kumpulan ini bisa tersusun dari beberapa skrip sederhana samapai ribuan skrip yang terangkum dalam ribuan file.
Beberapa framework yang cukup dikenal dalam dunia pemrograman web (php) adalah :

  1. CakePHP
  2. CodeIgniter
  3. Symfony
  4. Kohana
  5. Zend Framework

Aslinya masih banyak framework dalam dunia pemrograman web, selain lima diatas. Ada Catalyst (untuk Perl), Fusebox (Coldfusion), Django (Python), dan lain-lain. Selengkapnya (yang terdata wikipedia) dapat dilihat disini.

comparison of 5 php frameworks on google trends
klik untuk melihat chart terbaru

Kembali php framework yang saya sebutkan diatas, untuk pertimbangan saya perlihatkan trend penggunaan, pencarian, berita, dll dari 5 framework tersebut di google trends.

Pada gambar tersebut (triwulan ke-empat 2005 sampai pertengahan triwulan ke-dua 2009) terlihat bahwa volume pencarian tentang CakePHP merupakan yang tertinggi, ini bisa berarti bahwa banyak orang yang tertarik memakai CakePHP. Sedangkan volume berita terbesar dimiliki oleh zend framework, ini bisa berarti bahwa banyak perusahaan yang mengimplementasikan atau memberitakan tentang zend framework dan terindeks oleh google. Mana yang sebaiknya anda pakai?? Silahkan pikirkan matang-matang, gambar diatas hanya salah satu ilustrasi untuk pertimbangam.