Cascading Style Sheet (CSS)

Cascading Style Sheet merupakan sebuah bahasa script yang kegunaannya adalah untuk mengatur tampilan dokumen html, contohnya seperti pengaturan jarak antara baris, teks, warna, dan format border bahkan penampilan file gambar.

CSS dikembangkan oleh W3C, organisasi yang mengembangkan teknologi internet. Tujuannya tak lain untuk mempermudah proses penataan halaman web. Perlu diingat CSS hanyalah berupa kumpulan script yang tujuannya bukan untuk menggantikan HTML, melainkan pelengkap agar dokumen HTML bisa tampil lebih cantik dan dinamis.

Sejak awal ditemukannya CSS pada awal decade 90an, CSS terus dikembangkan dan diserap oleh web developer. Merupakan features baru dari HTML 4.0. Hal ini diperlukan setelah melihat perkembangan HTML menjadi kurang praktis karena web pages terlali banyak dibebani hal-hal ang berkaitan dengan faktor tampilan seperti font dll..

Untuk itu jika kumpulan style dikelola secara terpisah maka manajemen pages menjasi lebih mudah dan efisien. Pada prakteknya penggunaan CS ini didukung oleh hampir semua browser yang terpopuler saat ini seperti Mozila, Safari, Chrome, IE, dll.

Aturan Penggunaan CSS
Secara umum disusun oleh tiga bagian yaitu selector (elemen yang akan di definisikan), property(atribut yang akan dirubah), dan nilai perubahannya sebagaimana berikut:
Selector{property:value}
Antara property dan nilai disahkan dengan titik dua (colon) seperti contoh di bawah ini
body{color:black}
Ada beberapa cara penulisan kode CSS, cara tersebut a.l:

Style Sheet Eksternal
Dalam beberapa tutorial sering pula disebut dengan Linked CSS. Ini adalah salah satu teknik menggunakan CSS, yaitu dengan memisahkan script CSS dari dokumen HTML. Ada beberapa keuntungan yang bisa kita dapat dari teknik ini:
• Kita tidak perlu membuka dokumen HTML untuk mengedit CSS (karena telah berupa file yang terpisah)
• File CSS yang sama dapat kita gunakan untuk beberapa dokumen yang berbeda, menghemat waktu dalam proses desain web.
Sintaks kode yang digunakan tetap sama, akan tetapi dibuat pada file yang berbeda dengan HTML. Ekstensi yang digunakan harus disimpan dalam format “.css”

Style Sheet Internal
Dalam beberapa buku dan tutorial ada pula yang menyebutnya Header Style. Maksudnya berarti menuliskan script CSS pada header dokumen HTML, didalama bagian head. Definisi style dengan cara ini lebih dianjurkan karena selain lebih rapi, pendefinisian tag cukup dilakukan sekali.
Selain itu teknik ini juga digunakan bila suatu web page tertentu bersifat sangat unikm sehingga membutuhkan definisi terpisah dibandingkan dengan web page lainnya.

Style Sheet Inline
Cara penulisan CSS yang satu ini bisa digunakan pada lokasi yang sangat spesifik. Sebenarnya penggunaan CSS dengan cara ini walaupun bisa dilakukan tetaoi tidak dianjurkan. Namun bilapun perlu, anda tetap bisa menggunakan cara ini bila dokumen web page yang ingin ditampilkan unik dan berbeda dari defaultnya. Mengapa cara ini tidak dianjurkan? Karena menyebabkan file dokumen menjadi lebih besar ukurannya. Ini disebabkan karena style didefinisikan satu persatu.

Selengkapnya...

jQuery (JavaScript Library)

Semenjak dirilis pertama kali pada tahun 2006 oleh John Resig, jQuery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jQuery telah banyak digunakan oleh website-website terkemuka di dunia seperti Google, Microsoft, dll.. Dan sampai saat ini sudah tercatat jutaan website telah menggunakan jQuery. Terus makhluk apaan sih jQuery itu? Karena sama-sama masih newbie, yuk baca artikel ini…

jQuery adalah JavaScript Library  kumpulan kode/fungsi JavaScript siap pakai. Sehingga bisa mempermudah dan membantu kita mempercepat pembuatan kode JavaScript. Secara standar, apabila kita membuat kode JavaScript maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami.

Nah disinilah peran jQuery sebagai JavaScript Library, dimana kita bisa langsung memanggil fungsi yang terdapat dalam library tersebut. Jadi bisa disimpulkan jQuery menyederhanakan kode JavaScript. Hal ini sesusai dengan slogannya, “Write Less Do More”, cukup tulis sedikit tapi bisa melakukan banyak hal.

Mengapa kita lebih memilih jQuery ketimbang JavaScript Library pendahulunya seperti Prototype, Mototools, dan Dojo? Berikut beberapa alas an yang membutikan jQuery sangat powerful, antara lain:

• jQuery telah banyak digunakan oleh website-website terkemuka di dunia
• Kompatibel/cocok dengan semua browser yang popular
• Kompatibel dengan semua versi CSS
• Dokumentasi tutorial dan contoh-contohnya sangatlah lengkap
• Didukung oleh komunitas yang besar dan aktif
• Ketersediaan plugin yang sangat banyak jumlahnya
• Filenya berukuran kecil
• Open source dan free

Apa kemampuan yang dimiliki jQuery?
• Mempermudah akses dan manipulasi elemen tertentu pada dokumen
• Mempermudah modifikasi tampilan halaman web
• Mempersingkat Ajax (Asynchronous JavaScript dan XML)
• Memiliki API (Application Programming Interface)
• Meresponse interaksi dengan user
• Menyediakan fasilitas untuk membuat animasi sekelas flash dengan mudah

Selengkapnya...

JavaScript

Perkembangan JavaScript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Bahasa yang sekarang dikenal dengan nama JavaScript ini sebelumnya bernama LiveScript dan berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 (browser yang sangat popular saat itu). Awalnya bahasa ini memang sedikit banyak mendapatkan kritikan dengan alas an kurang aman, pengembangannya tergesa-gesa, serta tidak ada pesan error jika terdapat kesalahan saat penyusunan program.

Kemudian melalui kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman Java), Netscape memberikan nama JavaScript pada bahasa tersebut pada tanggal 4 Desember 1995. Pada waktu hampir bersamaan pihak Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut dengan nama Jscript di browser milik mereka sendiri Internet Explorer 3. Kini penggunaan dari Jscript sendiri masih terus dikembangkan pihak Microsoft dengan didukung oleh kebanyakan browser yang tersedia saat ini.

Java Script merupakan bahasa yang berbentuk kumpulan script yang berfungsi untuk memberikan tampilan yang tampak lebih interaktif pada dokumen web. Dengan kata lain, bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan ke dalam bahasa pemrograman web HTML, dengan mengizinkan pengeksekusian perintah-perintah pada sisi client, dan bukan sisi server. Pada hakikatnya bahasa pemrograman JavaScript berisi script yang pemasangannya terselip di sebuah dokumen HTML. Sehingga tidak membutuhkan kompilator atau penerjemah khusus untuk mengeksekusinya.

BENTUK TERAPAN JAVASCRIPT
Untuk mulai menerapkan program JavaScript dalam web nantinya, ada beberapa hal yang per;u diketahui oleh perancang web yaitu:
• Seorang perancang harus mengetahui cara menggunakan HTML dan mengedit dokumen HTML
• Seorang perancang harus menggunakan browser yang sudah mendukung pemrograman Javascript.
Dengan JavaScript sebuah halaman web akan menjasi lebih dinamis dan interaktif terhadap user karena halaman web mampu berfungsi sebagai sebuah program aplikasi yang dapat memproses masukan yang diberikan olwh user dan memberikan hasil sesuai dengan yang telah diprogramkan. Halaman web yang merupakan jawaban dari suatu permintaan user tidaklah harus di download terlebih dahulu oleh web server, melainkan dihasilka sendiri oleh JavaScript yang berada pada browser.

Oleh karenanya beban web server akan menjadi lebih ringan dan halaman web akan mejadi jauh lebih cepat merespons bahkan pada hubungan internet yang paling rendah sekalipun.

Pada prakteknya penggunaan JavaScript dalam pembuatan web yaitu dengan memasukkan program ke dalam HTML. Adapaun contoh dari script atau kode program yang menunjuk bahwa kode tersebut meriupakan script dari JavaScript adalah sebagai berikut:

<script type=”text/JavaScript”>
**kode script ditulis disini **
</script>

Kelebihan dari penggunaan JavaScript adalah:
• Lebih praktis dan mudah sebab bahasa oemrogaman JavaScript memiliki sedikit sintaks
• Koneksi cepat sebab peletakan program terdapat pada sisi client, berukuran sangat kecil, dan dapat langsung dijalankan di browser
Kekurangan dari Penggunaan JavaScript adalah:
• Pengelolaan objek dalam JavaScript sangat terbatas
• Penggunaan Script ddapat di copy langsung melalui web browser, sehingga setiap otang dapat menggunakan program JavaScript yang telah kita buat.

Selengkapnya...

XML (EXtensible Markup Language)

XML sebenarnya merupakan bahasa sebagaimana HTML yang mungkin hampir semua dari kita pernah mendengarnya bahkan mungkin sering menggunakannya. XML di desain untuk mendeskripsikan data, sedangkan HTML difokuskan untuk menampilkan data atau bagaimana data nantinya akan ditampilkan. Jadi dalam hal ini kita melihat bahwa XML dan HTML saling melengkapi. Untuk bisa memahami XML, akan lebih baik bila kita sudah mengetahui dan memahami konsep dari WWW, HTML, dan prinsip dasar membangun web.

Untuk lebih memudahkan kita dalam memahami XML, akan lebih baik bila kita menjabarkan definisi XML dalam beberapa point:
• XML didesain untuk mendeskripsikan data
• Tag XML tidak didefinsikan pada XML, karena kita harus mendifinisikannya sendiri
• XML menggunakan DTD (Document Type Definition untuk mendeskripsikan data)
• XML dan DTD didesain untuk dapat menjelaskan dirinya sendiri.

Perbedaan anatara XML dan HTML:
• XML di desain untuk membawa data
• XML tidak menggantikan HTML
• XML dan HTML di desain untuk tujuan berbeda
• XML didesain hanya untuk mendeskripsikan data dan difokuskan pada apa sebenarnya data itu.
• HTML didesain untuk menampilkan data dan bagaimana data harus terlihat.

Tag XML belum didefinisikan karenanya kita harus membuat sendiri tag-tag yang kita perlukan. Pada HTML semua tag didefinsikan dan kita hanya tinggal menggunakannya.

Ketika kita membuat suatu program HTML kita tinggal mengunakan tag standar HTML seperti <p> dan <h1>, namun dalam XML programmer dimungkinkan mendefinisikan sendiri tagnya, termasuk struktur dokumennnya sendiri. Tag dalam contoh seperti <to>, dan <from> tidak ada dalam standar XML manapun, kedua tag ini didefinisikan sendiri oleh programmer.

Dengan XML data dapat dipertukarkana awalaupun sistem yang terlibat tidak saling kompatibel. Dalam kenyataan yang sebenarnya sistem computer dan basis data menyimpan data dalam format yang masing-masing berbeda. Misalnya bila kita ingin menggunakan data bersama dalam internet, XML akan menyimpan data tersebut dalam format teks (plain text). Hal ini memudahkan pembuatan data yang sama bagi aplikasi yang berbeda.

Aturan sintaks XML sendiri sangatlah kaku. Namun bisa juga dibilang sangat sederhana. Oleh karenanya sintaks XML mudah untuk dipelajari dan dipahami. Hal ini pulalah yang mengakibatkan banyak aplikasi yang bisa membaca format dari XML dan memanipulasinya.

Berikut ini akan saya berikan sedikit sample dokumen XML :

Baris pertama menunjukkan deklarasi versi dank ode karakter yang digunakan dalam dokumen. Pada contoh ini yang digunakan mengacu pada spesifikasi 1.0 XML dan menggunakan ISO-8859-1 (Latin 1/West European) set karakter.

Baris berikutnya mendeskripsikan elemen dasar dokumen yaitu note da, empat elemen anak lainnya yang terdiri dari to, from, heading dan body. Tag XML adalah case sensitive. Sehingga sangat penting bagi kita untuk teliti dalam menuliskan tag XMLnya. Tidak seperti tag HTML yang relative lebih bebas, penggunaan tag <letter> dalam XML nantinya akan berbeda dengan tag <Letter>.

Selengkapnya...

ARSITEKTUR MODEL-VIEW-CONTROLLER

Arsitektur Model-View-Controller ini muncul pada era 70an atas pemikiran Prof. Trygve Reenskaug, seorang ahli berkebangsaan Norwegia. Dasar arsitektur ini adalah pemisahan antara logika aplikasi dengan tampilan. Dengan menggunakan pila ini diharapkan dapat meminimalisi penulisan perintah, sehingga resiko terjadinya bug bisa diminimalkan, serta meningkatkan efisiensi pembangunan aplikasi.
Pada awal implementasinya, konsep arsitektur ini hanya digunakan untuk Bahasa Smalltalk. Seiring dengan popularitasnya yang semakin menanjak, saat ini arsitektur MVC luas digunakan dalam dunia framework pemrograman baik untuk aplikasi desktop based maupun web based.

Gambaran penerapan arsitektur MVC kurang lebih sebagai berikut:
• Model bertangung jawab untuk melakukan pengelolaan data, terutama dalam database. Didalamnya biasa dituliskan perintah untuk mengambil, mengubah, menghapus, dan menambahkan data
• View merupakan “tempat” untuk meletakkan apa yang akan ditampilkan di halaman peramban (browser). Sebuah berkas view umumnya berisi kode bahasa pemrograman sisi klien (khusus untuk arsitektur client-server)
• Controller merupakan pengatur utama hubungan antara model, view, dan juga sumber daya lain yang tersedia.
Penerapan ini tidak menuntut aturan yang ketat. Banyak juga programmer yang enggan menggunakan arsitektur ini. Intinya arsitektur ini hanya berusaha untuk memudahkan kita dalam mengembangkan sebuah aplikasi.

Bahkan kita bisa menggunakan arsitektur ini tanpa sebuah elemen, misalnya saja kita ingin mengembangkan aplikasi hanya dengan model, dan view. Atau hanya dengan controller dan view, tanpa menggunakan model. Logika model dapat diletakkan di dalam sebuah controller. Begitu pula dengan View, dapat tidak kita gunakan, karena mungkin logikanya sidah kita letakkan pada model atau controller. Bagaimana? Tertarik untuk menggunakan konsep dari arsitektur ini?
Selengkapnya...

Perbedaan Framework dan CMS

Beberapa hari yang lalu ada teman yang menanyakan pada saya, apa sih bedanya antara framework dan CMS (Content Management System). Nah sekarang saya mau share sedikit pengetahuan saya tentang hal ini. Semoga saja ini bisa menambah pengetahuan anda tentang framework dan CMS

Bagi para penggemar bahasa pemrograman istilah framework tentunya tidak asing. Terjemahan secara kamus adalah rangka atau kerangka. Namun secara istilah (dalam dunia programming) dapat diartikan sebagai kumpulan kelas (class), dan fungsi (function, method) yang disusun secara sistematis berdasarkan kegunaan atau fungsionalitas tertentu untuk mempermudah pembuatan atau pengembangan suatu aplikasi. Sebagian besar framework yang beredar saat ini dibangun berdasarkan Konsep OOP (Object Oriented Programming). Beberapa contoh umum kelas yang diesediakan framework adalah kelas Session, database, dan email.

Apa manfaat yang didapatkan dari penggunaan framework? Sepanjang penggunaan saya terhadap beberapa framework saya merasakan pengerjaan terhadap suatu coding menjadi lebih mudah. Selain itu kita juga menghemat waktu kerja dan penulisan kode yang panjang. Dan lebih mudah dalam pengaturan kode-kode berkas. Berkas kode ini dapat kita susun secara sistematis sesuai dengan struktur yang ditawarkan framework.

Menggunakan framework tentunya sangatlah berbeda bila dibandingkan dengan menggunakan CMS yang banyak sekali beredar di internet saat ini, baik yang berbayar maupun yang gratisan. Beberapa contoh CMS yang bisa kita gunakan (sepengetahuan saya) seperti: Mamboo, Joomla, Drupal, Wordpress, PhpBB, ZendChart, ATutor, dll.

Umumnya penggunaan CMS lebih condong kepada pemenuhan kebutuhan pengadaan aplikasi secara instan. Begitu CMS diinstalasikan, ditambah modul, komponen, plugin, dll, kita sudah bisa langsung mengatur isi aplikasi secara kebutuhan kita, tanpa harus berurusan dengan kode, kecuali bila kita menemukan bugs pada modul atau komponen tertentu. Atau singkat kata CMS adalah suatu produk jadi yang tinggal kita implementasikan saja sesuai dengan keinginan kita.

Sementara bila kita menggunakan framework sebagai dasar aplikasi berarti kita harus menuliskan kode program, memodelkan basis data, merumuskan kebutuhan klien, merancang aplikasin serta mendesain tampilan.

Begitulah kiranya pengetahuan saya mengenai distingsi antara CMS dan Framework. Semoga saja ini bisa menambah pengetahuan anda mengenai dua hal tersebut, yang pastinya sering kali kita temukan sebagai mahasiswa IT. Bila ada readers yang memiliki pemahaman berbeda, silahkan comment, sekalian menambah pengetahuan kita bersama..Trims

Selengkapnya...

ELEMEN META dalam HTML

Seperti telah kita ketahui bahwa dalam struktur bahasa HTML terdapat dua bagian yaitu bagian head (HEADING) dan bagian body (yang menjadi isi dari dokumen HTML kita). Bagian head berisi informasi umum, atau juga disebut meta-information tentang suatu dokumen.
Elemen head berisikan beberapa buah elemen (yang bisa kita masukkan) seperti:
• title : definisi title dokumen
• base : definsi suatu referensi default kepada suatu resource eksternal
• link : definisi relasi anatara dua dokumen yang terhubung
• meta : definisi informasi meta
Namun dalam postingan ini saya hanya akan membahas elemen Meta. Kegunaan dari elemen ini adalah untuk menyediakan meta information tentang dokumen HTML kita.

Kebanyakan elemen meta digunakan untuk menyediakan informasi yang relevan untuk browser atau search engine, seperti mengalihkan pemakai surfer ke suatu alamat baru, atau menjelaskan isi dokumen. Namun, selain itu kita juga bisa menggunakan siapa yang membuat (author) dari situs tersebut, atau kita menggunakan software editor apa di dalam elemen meta tadi.

Beberapa search engine dalam World Wide Web, akan menggunakan atribut description atau keyword dari tag meta untuk mengindeks page anda

Contoh:
<!—Meta elemen ini mendefinisikan suatu deskripsi page kita-->
"<meta name=”description” content=”Tutorial on HTML, CSS, XML, dan XHTML”>"

<!—Meta elemen ini mendefinisikan suatu deskripsi keyword page kita-->
"<meta name=”keywords” content=”HTML, CSS, XML, dan XHTML”>"

Maksud dari atribut meta adalah untuk menjelaskan isi page html. Sebagai contoh, agar search engine mengetahui bahwa page kita berisi HTML, DHTML, CSS, XHTML, dengan hanya membaca meta keyword dari page kita.

Sayangnya terlalu banyak webmaster yang menggunakan tag ini hanya untuk spamming. MIsalnya seperti mengulang-ulang keyword untuk member page kita ranking yang lebih tinggi, sehingga ada search engine yang telah menghentikan penggunaan isi dari meta.

Selengkapnya...