Thariqul Huda » web design http://hudatoriq.web.id Huda's Life, On The Row Tue, 13 Jan 2009 10:15:31 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Coder Gelandangan http://hudatoriq.web.id/2007/12/29/coder-gelandangan/ http://hudatoriq.web.id/2007/12/29/coder-gelandangan/#comments Sat, 29 Dec 2007 16:51:57 +0000 huda http://hudatoriq.web.id/2007/12/29/coder-gelandangan/ Coder Gelandangan

Melihat ilustrasi gambar dari sebuah tulisan di blog Full Circle Magazine, saya sempat tertawa. Ini iklan yang mencari para pemrogram web yang bersedia berpartisipasi dalam membangun sebuah ‘aplikasi impian‘ untuk majalah elektronik itu. Namun ilustrasinya menggambarkan seorang pemrogram web yang menjadi gelandangan dan memohon untuk diberi pekerjaan.

Mungkinkah suatu saat hal ini akan menjadi kenyataan?

]]> http://hudatoriq.web.id/2007/12/29/coder-gelandangan/feed/ 15 WYSIWYG Editor di Situs Web Buatan Sendiri http://hudatoriq.web.id/2007/01/07/wysiwyg-editor-di-situs-web-buatan-sendiri/ http://hudatoriq.web.id/2007/01/07/wysiwyg-editor-di-situs-web-buatan-sendiri/#comments Sun, 07 Jan 2007 09:27:01 +0000 huda http://www.hudatoriq.web.id/?p=26 Dalam membuat situs web yang dinamis, yang kontennya diharapkan dapat secara rutin diupdate, satu hal yang harus dipikirkan oleh pemrogram web ialah kemudahan pengisian konten. Ambil saja contoh, sebuah situs berita. Pemrogram web situs berita tersebut harus dapat menciptakan antarmuka yang mudah digunakan untuk memasukkan berita.

WYSIWYG/Rich Format Editor

Dengan menggunakan Content Management System, terutama yang biasa digunakan untuk pembuatan blog seperti WordPress, tentunya hal ini tidak perlu kita pikirkan lagi. Tapi, bagaimana jika kita ingin membangun script untuk situs web kita sendiri dari nol?

Untuk membuat antarmuka pengisian artikel, biasanya kita menyediakan form dengan menggunakan tag “textarea” sebagai tempat memasukkan konten berita. Dengan menggunakan tag ini, kita dapat memasukkan berita dalam bentuk plain text dengan jumlah karakter yang besar. Kita pun dapat memasukkan kode-kode HTML untuk mengatur layout, format teks, serta tipografi berita tersebut.

Namun, menggunakan sistem pengisian berita dengan tag-tag HTML tidak semudah itu. Selain tidak praktis, tidak semua orang menguasai kode HTML. Ini tentunya menjadi kendala jika kita mempercayakan orang yang tidak mengerti kode HTML untuk menjadi seorang kontributor ataupun penulis berita yang langsung diberi akses ke halaman antarmuka pengisian berita tersebut.

Salah satu solusi hal ini ialah dengan menyediakan sebuah editor WYSIWYG (What You See Is What You Get) dalam antarmuka pengisian berita di situs web kita. Dengan editor WYSIWYG ini, seorang yang hendak mengisi berita akan dihadapkan dengan form yang dilengkapi berbagai toolbar untuk melakukan pemformatan teks serta paragraf, penambahan tautan, sampai memasukkan gambar ke dalam teks. Setiap kali kita melakukan pemformatan, editor secara otomatis menambahkan atau mengurangi kode HTML di belakang layar, sedangkan yang ditampilkan kepada pengguna ialah hasil pemformatannya (Rich Text Format) atau mendekati preview tampilannya dalam halaman web. Cara inilah yang biasa diterapkan dalam CMS atau situs-situs penyedia hosting blog.

Beberapa waktu yang lalu penulis sempat mencari source code WYSIWYG editor yang bagus di internet. Di era gratisisme ini (meminjam istilah Pak Gora :)), ternyata cukup banyak tersedia source semacam itu di internet. Namun sayangnya banyak yang kurang sempurna ataupun tidak dilengkapi dokumentasi yang rapi.

Tapi ada satu source yang penulis nilai cukup, bahkan sangat bagus. Ternyata setelah berputar-putar, yang saya temukan tidak jauh dari WordPress. Source code yang penulis maksud tersebut ialah TinyMCE, sebuah editor rich text atau WYSIWYG yang digunakan dalam WordPress (CMS yang menghidupkan blog ini).

TinyMCE merupakan pustaka (library) editor WYSIWYG HTML yang berbasis Javascript. Ini membuatnya tidak terikat pada platform sistem operasi maupun web server tertentu. TinyMCE dikembangkan oleh Moxiecode Systems AB dan dapat diunduh di situs web TinyMCE atau di tempat pengunduhan kode open source terbesar – SourceForge.net.

Instalasi TinyMCE cukup mudah. Cukup dengan mengekstrak file kompresi yang diunduh dan menguploadnya ke server web kita. Kemudian kita panggil file javascript TinyMCE yang berisi fungsi-fungsi editor WYSIWYG ke dalam halaman web kita (halaman yang hendak diberi editor WYSIWYG) serta menambahkan perintah untuk menginisiasi TinyMCE.

Berikut contoh kode halaman yang dilengkapi dengan editor WYSIWYG TinyMCE:

<html>
<head>
<title>TinyMCE Test</title>
<script language=”javascript” type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”
});
</script>
</head>
<body>
<form method=”post”>
<textarea name=”content” cols=”50″ rows=”15″>This is some content that will be editable with TinyMCE.</textarea>
</form>
</body>
</html>

Kode di atas ialah kode HTML biasa yang diberi tambahan baris untuk memanggil javascript dari TinyMCE dan menginisiasinya (kode yang dicetak tebal). Lokasi file “tiny_mce.js” pada contoh di atas tentunya harus disesuaikan dengan lokasi sebenarnya file tersebut di server. Dengan adanya kode yang dicetak tebal tersebut, setiap tag “textarea” akan secara otomatis dirubah menjadi sebuah editor WYSIWYG.

Berikut preview dari kode di atas:

Preview Tampilan TinyMCE

Dengan mengubah nilai-nilai dalam perintah tinyMCE.init(), kita bisa merubah tag sasaran yang akan dirubah menjadi editor WYSIWYG, memilih theme, menambahkan tombol-tombol, sampai menambahkan plugin serta mengatur konfigurasi lainnya. Semuanya tergantung dari kebutuhan situs web Anda. Keterangan lebih lanjut mengenai ini dapat dibaca pada dokumentasi yang disertakan dalam file archive TinyMCE.

Isi text dalam tag “textarea” yang kita rubah menjadi editor WYSIWYG berisi kode-kode HTML. Untuk mengirimkannya ke server, cukup menggunakan <input type=”submit” name=”[nama_textarea]“> seperti biasa. Misalkan pada contoh di atas, kita menggantikan “[nama_textarea]” dengan “content”.

Selamat Mencoba!

]]> http://hudatoriq.web.id/2007/01/07/wysiwyg-editor-di-situs-web-buatan-sendiri/feed/ 33