artikel tutorial 3

Framework: Solusi bagi Desainer Web yang Kesulitan dalam Coding

Posted: February 23rd, 2010 by sigit – Category: Web Design

Apakah desainer web harus bisa coding? Pertanyaan ini mungkin sering muncul dalam benak para desainer web. Jika Anda ingin mengetahui jawabannya dan ingin terlibat dalam diskusi mengenai pertanyaan ini silahkan membaca artikel di Jurus Grafis “Desainer Web Harus Bisa Coding?“,  artikel Elliot Jay Stocks “Web designers who can’t code“, atau artikel di blog clagnut “Why designers should and shouldn’t code“.

Apa itu Framework?

Framework dalam dunia software dapat diartikan sebagai sebuah abstraksi dimana di dalamnya terdapat kode-kode program yang menyediakan fungsi generik yang dapat dikustomisasi oleh pengguna framework sesuai dengan kebutuhannya. Penggunaan framework dapat memberikan berbagai keuntungan, misal:

• Dapat dilakukan standarisasi proses pengembangan atau development
• Developer dapat berkonsentrasi pada masalah-masalah bisnis yang spesifik
• Mencegah pekerjaan yang berulang (redundant)
• Meningkatkan produktivitas

Meski dapat memberikan keuntungan, penggunaan framework juga ada sisi negatifnya, yaitu:

• Para programmer mungkin akan menemukan batasan-batasan ketika merancang aplikasi menggunakan framework
• Kemungkinan akan menambah biaya development apabila framework yg digunakan kurang terdokumentasi dan kurang di support
• Performa dan kecepatan eksekusi

Sumber: City of Minnetrista Website

Framework Apa Saja yang Dibutuhkan Desainer Web?

XHTML/CSS Framework

XHTML/CSS Framework dapat digunakan oleh desainer web ketika membuat desain dan kemudian menterjemahkan hasil desain yang telah dibuat ke dalam code XHTML/CSS. Saat ini sudah tersedia berbagai macam XHTML/CSS Framework di antaranya 960 Grid System, Blueprint CSS, Malo, YUI Grids, YAML, Elastic, Emastic, snowdust, CSScaffold, Baseline, EZ-CSS, Unobtrusive CSS, atatonic, xCSS, The Golden Grid, dan lain-lain.

Contoh Website dengan 960 Grid System

Contoh bagaimana menggunakan XHTML/CSS Framework 960 Grid System:

view source

http://visualmagz.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/scripts/clipboard.swf print?

01	<div class="container_12">
02	<!-- Header Section -->

03	<div id="header" class="grid_12">
04	...

05	</div>
06	<!-- End of Header Section -->

07
08	<!-- Main Section -->

09	<div id="delicious" class="grid_3">
10	...

11	</div>
12	<div id="content" class="grid_6">

13	...
14	</div>

15	<div id="gallery" class="grid_3">
16	...

17	</div>
18	<!-- End of Main Section -->

19
20	<!-- Footer Section -->

21	<div id="footer" class="grid_12">
22	...

23	</div>
24	<!-- End of Footer Section -->

25

</div>

JavaScript Framework

JavaScript Framework dapat digunakan oleh desainer web ketika akan menambahkan sisi interaktivitas dalam web. Beberapa sintaks/perintah JavaScript yang rumit dan panjang, dikemas sedemikian rupa sehingga menjadi lebih sederhana bagi desainer web. Salah satu Javascript Framework yang terkenal adalah jQuery, sedangkan yang lainnya ada MooTools, The Dojo Toolkit, Google Web Toolkit, script. aculo.us, Yahoo! UI Library, dan lain-lain.

Contoh Tutorial dengan jQuery

Contoh bagaimana menggunakan JavaScript Framework jQuery:

view source

http://visualmagz.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/scripts/clipboard.swf print?

01	$(document).ready(function(){
02	$("a").toggle(function(){

03	$(".slide").animate({ height: 'hide', opacity: 'hide' }, 'slow');
04	},function(){

05	$(".slide").animate({ height: 'show', opacity: 'show' }, 'fast');
06	});

07	});
08

09	$(document).ready(function(){
10	$("a").toggle(function(){

11	$(".slide").hide('fast');
12	},function(){

13	$(".slide").show('slow');
14

15	});
16	});

PHP Framework

PHP Framework dapat digunakan oleh desainer web ketika mereka ‘terpaksa’ melakukan coding yang terkait dengan fungsionalitas web seperti akses ke basisdata, pengelolaan session, dan lain-lain. Framework ini juga menyederhanakan code yang harus ditulis oleh desainer web. Contoh PHP Framework adalah CodeIgniter, Zend Framework, Prado, CakePHP, Symfoni dan lain-lain.

Contoh Website dengan CodeIgniter

Contoh bagaimana menggunakan PHP Framework CodeIgniter:

view source

http://visualmagz.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/scripts/clipboard.swf print?

01	<?php
02

03	class Book extends Controller {
04	function Book()

05	{
06	parent::Controller();

07	}
08

09	function GetAll()
10	{

11	$this->load->model('book_model');
12	$data['query'] = $this->book_model->book_getall();

13	$this->load->view('book_view_new',$data);
14	}

15
16	function GetByID($id)

17	{
18	$this->load->model('book_model');

19	$data['query'] = $this->book_model->book_getbyid($id);
20	$this->load->view('book_view_new',$data);

21	}
22	}

23	?>
Sumber:

http://visualmagz.com/web-design/framework-solusi-bagi-desainer-web-yang-kesulitan-dalam-coding/