Monday, December 26, 2011

Dojo toolkit


Jadi, ini adalah sedikit referensi tentang Dojo Toolkit yang akan saya gunakan.
Disini saya hanya akan mencoba beberapa cara memanfaatkan Dojo

Dojo yang mana?

Dojo toolkit adalah javascript framework yang menyediakan library yang cukup banyak. Dibagi menjadi 3 bagian penting, yaitu Dojo core, base, Dijit, DojoX.
Dojo base adalah bagian library yang mengatur tentang hal dasar pada dojo, dan harus dipanggil setiap kali kita akan menggunakan Dojo toolkit, bisa dikatakan ini adalah library wajib. Fungsi yang terdapat di base ini adalah fungsi ajax, fungsi penting dojo, dan DOM.
Dojo core menyediakan fungsi untuk parsing widget, efek animasi tingkat lanjut, drag ‘n drop. I18n, history handling, dll. Core ini menggunakan dojo base, namun dalam penggunaannya, hanya terdapat sedikit perbedaan saja.
Dijit, sebuah kata singkat dari Dojo Widget, memokuskan (katadasar:fokus) pengembangannya untuk tampilan, menyimpan library untuk container(set layout), form, dialog, text editor, calendar, color palette, dll.
DojoX, disebut juga Dojo eXtension atau eXperimental, disimpan library fungsi yang belum pantas disimpan di paket utama base/core atau Dijit, namun tidak jarang juga library DojoX merupakan kombinasi penggunaan kedua library tersebut.
Jadi kira-kira begitulah Dojo yang akan kita kenal, namun itu tadi hanya sedikit penjelasan saja. Untuk mengenal dojo lebih lanjut, ada baiknya kita langsung ke bagian praktek: Initializing Dojo
Initializing Dojo… 
Selamat datang di dunia Dojo, tempat dimana ajax, efek, dan DOM javascript tidak perlu dipelajari dengan susah payah. Bagaimanapun juga, sebelum digunakan kita harus mendapatkan Dojo toolkit terlebih dahulu. Untuk mendapatkannya, kita bisa klik disini, ambil release terbaru (saat ini dibuat release sudah mencapai 1.7.1), amannya download release src, agar isinya lengkap dengan building tools, dan jangan lupa juga jika perlu download demo sample, juga docs-nya. Agar kita tidak perlu lagi mencari petunjuk di internet. :)
Instalasi
Sebenarnya kita tidak memerlukan webserver untuk menjalankan Dojo, namun pada beberapa kasus, webserver memang diperlukan. Jadi dapatkan paket webserver (xampp, lamp) dan install di sistem kita…
Setelah itu jangan lupa ekstrak dojo library yang tadi kita dapatkan di folder htdocs, agar nanti dapat digunakan dengan bebas…
Penempatan (Persetujuan)
Menempatkan dojo sebetulnya bisa dimanapun kehendak kita, namun hal ini menjadi penting pada saat pemanggilan file… Agar seragam, marilah kita simpan ini di htdocs\dojo, lalu kita akan memulai belajar di direktori htdocs\cobadojo.
Memulai Dojo
Untuk memulai dojo, saya menggunakan notepad++ dan google chrome, mengingat keduanya memiliki power dan tetap ringan :)
Untuk itu, coba untuk membuat file baru di direktori utama kita (htdocs\cobadojo) dengan nama dojo_pertama.html dengan isi file sebagai berikut.


<html>
<head>
<title>percobaan pertama dojo</title>
<link rel="stylesheet" type="text/css" href="../dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="../dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="../dojo/dojo/dojo.js"></script>
<script type="text/javascript" language="javascript">
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<div style="position:relative;top:10px;left:10px;width:80%;">
<button dojoType="dijit.form.Button" id="myButton">
Pencet saya!
<script type="dojo/method" event="onClick">
alert('button sudah ditekan!');
</script>
</button>
</div>
</body>
</html>

Semuanya sebenarnya hanyalah html biasa, perbedaannya akan saya jelaskan pada beberapa baris saja.
Baris 4-5 adalah baris import css yang akan digunakan, sebenarnya bisa lebih sederhana lagi.
Baris 6-10 adalah baris konfigurasi dojo, kita menggunakan variabel parseOnLoad: true (biasanya digunakan untuk memroses dijit)
Baris 11, baru kita memanggil file dojo yang sebenarnya. (path tentunya sudah disesuaikan dengan persetujuan awal penempatan)
Baris 12-14 menjelaskan bahwa pada kali ini kita membutuhkan library button yang asalnya dari dijit (dijit.form.Button)
Baris 16, menetapkan bahwa isi body menggunakan class tundra yang sudah di-import di css.
Baris 18-23 membuat button dijit dengan id myButton dan menampilkan kata “Pencet saya!” dengan script yang sudah ditentukan, yaitu menampilkan peringatan “button sudah dipencet!”
Mencoba Dialog
Tampilan seperti kotak dialog maupun tooltips tentunya berhubungan dengan tampilan, maka dari itu library ini adalah bagian dari Dijit. Untuk memanggil dialog ataupun tooltips, yang kita perlukan adalah beberapa tambahan pada script dojo_pertama.html. Ada baiknya kita gandakan file dojo_pertama.html menjadi dojo_dialog.html dengan isi sebagai berikut.


<html>
<head>
<title>percobaan dialog dojo</title>
<link rel="stylesheet" type="text/css" href="../dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="../dojo/dijit/themes/tundra/tundra.css" />

<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="../dojo/dojo/dojo.js"></script>
<script type="text/javascript" language="javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
</script>
</head>
<body class="tundra">
<div style="position:relative;top:10px;left:10px;width:80%;">
<button dojoType="dijit.form.Button" id="myButton">
Pencet saya!
<script type="dojo/method" event="onClick">
dijit.byId("dialog1").show();
</script>
</button>
</div>
<div dojoType="dijit.Dialog" id="dialog1" title="hai"draggable="false">
ini isi dialog
</div>
</body>
</html>
Selamat mencoba




semoga bermanfaat

Tag Tag dalam HTML5

Berikut Tag Tag Dalam Html5
Disusun berdasarkan abjad
TagDeskripsi
<!–…–>mendefinisikan komentar
<!DOCTYPE>mendefinisikan jenis document
<a>mendefinisikan hyperlink
<abbr>mendefinisikan ringkasan/singkatan
<acronym>tidak di dukung di html5
<address>mendefinisikan alamat
<applet>tidak di dukung di html5
<area>mendefinisikan area
<article>Newmendefinisikan artikel
<aside>Newmendefinisikan content selain content halaman
<audio>Newmendefinisikan audio
<b>mendefinisikan text tebal
<base>mendefinisikan url dasar untuk semua link pada halaman
<basefont>tidak di dukung di html5
<bdo>mendefinisikan arah tampilan text
<big>tidak di dukung di html5
<blockquote>mendefinisikan kutipan
<body>mendefinisikan element body
<br>mendefinisikan baris baru
<button>mendefinisikan document button/tombol
<canvas>Newmendefinisikan
Document grafis
<caption>mendefinisikan document table caption
<center>tidak di dukung di html5
<cite>mendefinisikan kutipan
<code>mendefinisikan text kode komputer
<col>mendefinisikan atribut untuk kolom table
<colgroup>mendefinisikan kolom table
<command>Newmendefinisikan perintah tombol
<datalist>Newmendefinisikan dropdown list
<dd>mendefinisikan definisi deskripsi
<del>mendefinisikan text yang di hapus
<details>Newmendefinisikan suatu elemen
<dialog>Newmendefinisikan dialog (conversation)
<dfn>mendefinisikan definition term
<dir>tidak di dukung di html5
<div>mendefinisikan bagian dalam suatu document
<dl>mendefinisikan daftar
<dt>mendefinisikan istilah
<em>mendefinisikan text rapat
<embed>Newmendefinisikan external content
<fieldset>mendefinisikan fieldset
<figure>Newmendefinisikan isi media, dan keterangan
<font>tidak di dukung di html5
<footer>Newmendefinisikan bagian footer
<form>mendefinisikan formulir
<frame>tidak di dukung di html5
<frameset>tidak di dukung di html5
<h1> sampai <h6>mendefinisikan header
<head>mendefinisikan informasi tentang document
<header>Newmendefinisikan sebuah header untuk bagian suatu halaman
<hgroup>Newmendefinisikan informasi tentang bagian sebuah document
<hr>mendefinisikan garis horisontal
<html>mendefinisikan document html
<i>mendefinisikan text italic
<iframe>mendefinisikan inline sub frame
<img>mendefinisikan gambar
<input>mendefinisikan input
<ins>mendefinisikan text yang disisipkan
<keygen>Newmendefinisikan sebuah kunci yang dihasilkan dalam bentuk
<kbd>mendefinisikan text keyboard
<label>mendefinisikana label untuk form
<legend>mendefinisikan judul di fieldset
<li>mendefinisikan list
<link>mendefinisikan refrensi sumber
<map>mendefinisikan peta gambar
<mark>Newmendefinisikan text yang ditandai
<menu>mendefinisikan daftar menu
<meta>mendefinisikan meta information
<meter>Newmendefinisikan ukuran yang sudah di tetapkan
<nav>Newmendefinisikan navigation link
<noframes>tidak di dukung di html5
<noscript>mendefinisikan bagian noscript
<object>mendefinisikan sebuah object
<ol>mendefinisikan daftar angka
<optgroup>mendefinisikan grup pilhan
<option>mendefinisikan drop-down option
<output>Newmendefinisikan beberapa jenis output
<p>mendefinisikan paragraph
<param>mendefinisikanparameter untuk sebuah objeck
<pre>mendefinisikan text ke format awal
<progress>Newmendefinisikan kemajuan suatu tugas apapun
<q>mendefinisikan kutipan pendek
<rp>Newdigunakan untuk menentukan apakah browser mendukung ruby
<rt>Newmenjelaskan tentanf penngunaan ruby
<ruby>Newmendefinisikan ruby annotations.
<s>tidak di dukung di html5
<samp>mendefinisikan sample computer code
<script>mendefinisikan script
<section>Newmendefinisikan section
<select>mendefinisikan selectable list
<small>mendefinisikan text kecil
<source>Newmendefinisikan media resources
<span>mendefinisikan bagian dalam sebuah document
<strike>tidak di dukung di html5
<strong>mendefinisikan text pekat/tebal
<style>mendefinisikan style untuk css
<sub>mendefinisikan subscripted text lawan pangkat
<sup>mendefinisikan superscripted text pangkat
<table>mendefinisikan table
<tbody>mendefinisikan table body
<td>mendefinisikan table cell
<textarea>mendefinisikan text area
<tfoot>mendefinisikan table footer
<th>mendefinisikan table header
<thead>mendefinisikan table header
<time>Newmendefinisikan date/time
<title>mendefinisikan judul document
<tr>mendefinisikan baris table
<tt>tidak di dukung di html5
<u>tidak di dukung di html5
<ul>mendefinisikan daftar
<var>mendefinisikan variable
<video>Newmendefinisikan video
<xmp>tidak di dukung di html5
Keterangan*
  • Tag-tag diatas saya ambil dari w3school.com
  • Yang di beri tanda merah adalah tag baru(hanya di html5), dimana tag tadi tidak ada di html 4
  • Tag-tag baru tadi belum support di semua browser
  • Yang di beri warna biru adalah tag html yang tidak support di html5
Yang diatas adalah tag-tag html5 atribut-atributnya belum disertakan. kita itu tidak mesti pelajarin semua tag tag dalam html karena tidak semua tag-tag itu digunakan digunakan dalam sebuah website, apalagi hanya blog heheheheeeee. yang penting itu adalah kita ngerti cara penulisan tag dan atributnya. kita juga harus bisa membedakan mana yang bisa dan tidak bisa ditambahkan kedalam sebuah tag, dan tag-tag mana saya yang bisa serta tidak bisa ditambahkan kedalam tag lain.
Contoh html salah
<img src="url-gambar"><table>ini-membentuk-table</table></img>
Keterangan
  • Dilihat dari penulisan htmlnya, sama sekali tidak salah
  • Namun pada penempatan tagi, itu salah
  • Apakah mungkin, didalam sebuah gambar dapat dimasukan table?

Yoooow mungkin cuma itu dulu, besok- besok akan saya lanjutkan lagi_





semoga bermanfaat