Seting Zen coding di Eclipse dan NetBeans

Di artikel sebelumnya, saya sudah membahas tentang zen coding. Sekarang bagaimana cara menseting Zencoding di editor favorit kita? Berikut ini adalah tutorial cara seting Zen coding di Eclipse /Aptana IDE dan Netbeans. Sebagai tambahan,  akan saya jelaskan seting di Notepad++ dan link untuk seting di Editor lain. Saya hanya memberikan panduan untuk editor free dan banyak pemakainya di indonesia. Catatan penting disini, sekarang zen coding berganti nama menjadi emmet. Anda bisa mengakses informasi lanjutan tentang zen-coding/emmet di http://emmet.io/.Syntax Zen coding bisa anda akses di https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Panduan ini bukan hanya sebatas instalasi, namun juga termasuk testing apakah zen coding sudah aktif atau belum. Untuk itu, saya akan menggunakan kode dibawah ini untuk mengecek apakah zen coding sudah sukes di install dan bisa dipakai. berikut ini adalah kode yang anda masukan untuk testing setelah instalasi plugin.

Kode yang diketik

html:5

 

hasil dari zen coding 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

 

Informasi lain tentang zen coding beserta ringkasan pemakaian kodenya bisa dibaca di link artikel sebelumnya atau langsung saja akses di http://docs.emmet.io/

 

Seting Zencoding di Eclipse/Aptana

  1. Buka eclipse, lalu masuk ke Help-> Install new Software…
  2. Tambahkan   link  http://emmet.io/eclipse/updates/di update site
  3. centang emmet for eclipse dan klik next lalu ikuti sisa intruksinya.
  4. Restart eclipse , lalu buat file kosong dengan nama demo.html
  5. coba ketikan html:5, blok teks tersebut,  lalu tekan [CTRL]+[E] . jika text code berubah seperti tampilan code diawal artikel maka instalasi sukses
emmeteclipse
cara install plugin zen coding di eclipse

Seting zen coding di Netbeans

  1. Buka netbeans, lalu masuk ke Tools-> plugin lalu klik tab Available plugin, cari plugin zen coding
  2. centang di plugin zen coding, lalu klik install, ikuti proses instalasinya , Lalu restart netbeans
  3. Untuk testing, buatlah file baru dengan nama demo.html
  4. ketikan html:5 , blok teks tersebut, lalu klik ikon [Z] di toolbar atau tekan [CTRL]+[ALT]+[N], jika sukses, kode akan berubah seperti kode hasil di awal artikel
Install zen coding plugin di netbeans
Install zen coding plugin di netbeans

Install Zen coding di Notepad++

Bagian ini adalah bonus artikel. Saat saya menginstall notepad++ terbaru, Menu Zencoding otomatis aktif, namun jika menu zencoding tidak tersedia atau anda memakai notepad Anda bisa menginstallnya di Plugin manager seperti langkah berikut

  1. Buka menu plugin->Plugin manager->show Plugin manager.
  2. Lihat di available tab. Pilih plugin emmet  atau Zen coding .
  3. klik install, jika emmet membutuhkan plugin lain, klik yes
  4. Restart Notepad++
  5. ketik html:5,  bloks teks tersebut lalu tekan [CTRL]+[E]
  6. jika sukses, maka teks tadi berubah menjadi seperti code hasil dibagian awal artikel. 

 

install plugin zen coding di editor lain

Untuk install di editor lain, silahkan baca di http://emmet.io/download/

Cara cepat Menulis Kode HTML dengan Zen Coding

Logo Zen coding
Logo Zen coding
Sebelum lebih jauh dengan zen coding, saya akan bertanya, kira kira untuk menulis manual code  struktur html dibawah ini, butuh berapa lama?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
<body>
	<h1 class="header">Tool server</h1>
	
<table>
	<tr>
		<td>No</td>
		<td>Nama</td>
		<td>Fungsi</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Linux</td>
		<td>Os server</td>
	</tr>
	<tr>
		<td>2</td>
		<td>apache</td>
		<td>Webserver</td>
	</tr>
</table>

<!-- list -->
<ul id="tool">
	<li class="item">Linux</li>
	<li class="item">Webserver</li>
	<li class="item">apache </li>
	<li class="item">mysql</li>
	<li class="item">PHP</li>
</ul>
	</body>
</html>

Jika anda menulis dengan editor web dengan fitur autocomplete sekalipun, menulis struktur kode HTML diatas tetap memakan waktu lama, itulah kenapa zen coding sangat dibutuhkan. Zen coding adalah teknik cepat menulis code HTML dan CSS secara CEPAT. Seberapa cepat? sebagai contoh, untuk menulis struktur kode html diatas, anda cukup menulis beberapa baris kode.
berikut ini adalah barisnya

html:5

Zen coding akan menulis kode secara singkat, lalu dengan memanfaatkan kombinasi keyboard tertentu misalkan di notepad++, setelah menulis kode diatas, blok lalu gunakan tombol [CTRL]+[E] dan Bingo, struktur lengkap html akan dibuatkan secara otomatis seperti kode dibawah ini. Zencoding bukan hanya jalan di notepad++, namun berjalan di hampir semua Editor /IDE untuk membuat file HTML.
Output zencoding

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

membuat header

selanjutnya tulis

h1.header

output zencodingnya adalah

<h1 class="header"></h1>

Membuat tabel

Selanjutnya untuk membuat tabel

table>tr*3>td*3

outputnya

<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

Membuat List

 ul#tool>li.item*5

Kode diatas dipakai untuk membuat ul dengan id tool, dengan 5 list dengan css class item.

<ul id="tool">
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"> </li>
	<li class="item"></li>
	<li class="item"></li>
</ul>

Syntax Lain

Zen coding punya puluhan syntax yang akan mempercepat koding HTML dan CSS. syntax lengkap bisa anda baca di

  1. https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn.
  2. http://docs.emmet.io/abbreviations/syntax/.

Dengan zen coding, anda bisa sangat cepat menulis struktur html, sejauh ini Notepad++ sudah secara default terinstall zen coding. Jika di notepad++ anda sudah ada menu Zen coding Maka teknik ini bisa langsung anda praktekan. Terus bagaimana jika belum? bagaimana kalau saya memakai editor lain? Tutorial tentang cara seting di editor lain akan saya bahas di artikel selanjutnya.

Happy Zen coding!