Memperluas HTML dengan Membuat Tag Kustom

() translation by (you can also view the original English article)

Dalam tutorial ini saya akan tunjukkan pada Anda betapa mudahnya memperluas bahasa HTML dengan menggunakan tag-tag custom. Berbagai tag kustom bisa digunakan untuk mengimplementasikan beragam perilaku (behavior), jadi penggunaannya adalah cara yang memudahkan untuk menulis lebih sedikit kode dan membuat dokumen HTML Anda lebih sederhana.

Apa Itu Tag HTML Kustom?

Sebagai contoh, dengan HTML Anda menggunakan tag <b>, untuk menampilkan teks cetak tebal. Jika Anda butuh daftar, Anda bisa menggunakan tag <ul> dengan tag anak <li> untuk tiap item di list. Tag-tag tersebut diinterpretasikan oleh peramban dan bersama dengan CSS menentukan bagaimana ditampilkannya konten suatu halaman web dan bagaimana perilaku konten tiap-tiap bagian.

Terkadang penggunaan satu tag HTML saja tidaklah cukup untuk fungsionalitas yang dibutuhkan dalam aplikasi web. Biasanya hal ini diselesaikan dengan menggunakan berbagai tag HTML berikut JavaScript dan CSS, tetapi solusi semacam ini tidaklah begitu elegan.

Solusi yang lebih elegan adalah dengan menggunakan tag kustom—pengidentifikasi yang dilingkupi dengan tanda <> dan diinterpretasikan oleh peramban unuk menampilkan fungsionalitas yang diharapkan. Sama seperti tag HTML, kita harus bisa menggunakan tag HTML kustom beberapa kali dalam satu halaman, dan kita juga harus bisa membuat atribut tag dan sub tag untuk membantu fungsionalitas tag kustom. Mari kita lihat satu contohnya!

Contoh #1: Membuat Tag HTML Kustom Gravatar

Mari membuat tag kustom yang akan menampilkan gambar Gravatar untuk alamat email tertentu. Tag ini akan kita namai <codingdude-gravatar>, dan kita akan memasukkan alamat email sebagai atribut yang dinamai email.

Anda bisa memberi nama tag kustom dengan apa saja sesuai keinginan, tetapi satu hal yang harus diperhatikan adalah bahwa dalam contoh ini nama tag kustomnya dimulai dengan codingdude-. Yang terbaik adalah dengan menggunakan prefiks semacam ini untuk tag kustom Anda agar terhindar dari konflik penamaan dengan tag kustom lainnya. Sangat penting juga untuk tidak menggunakan nama tag yang sudah didefinisikan oleh HTML.

Untuk mengimplementasikan dan menguji tag kita, ada beberapa hal yang perlu dibuat terlebih dahulu:

Satu folder untuk menyimpan file-file proyek; kita beri nama folder ini gravatar-custom-tag.
Satu file HTML index.html di dalam folder gravatar-custom-tag. File ini akan berisi kode-kode HTML.
Satu file JS codingdude-gravatar.js di dalam folder gravatar-custom-tag. File ini berisi kode JavaScript yang mengimplementasikan tag kustom.

Mari menyunting file index.html dan menjadikan kontennya terlihat sebagaimana berikut:

<html>
    <head>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: 
    <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>
</body>
</html>

Jika kita memuat index.html di peramban saat ini, hasilnya tidak akan semengesankan itu karena kode untuk tag kustom belum diimplementasikan:

Satu hal yang harus diperhatikan adalah bahwa peramban sangatlah pemaaf, jadi Anda bisa memiliki tag tak dikenal dalam suatu dokumen dan peramban akan sekedar mengabaikannya. Agar tag kustom Gravatar benar-benar bisa menampilkan gambar untuk email, sebelumnya harus dipahami cara kerja Gravatar.

Gravatar bekerja dengan menerjemahkan alamat email ke URL suatu gambar PNG yang telah dipilih pengguna. Penerjemahannya dilakukan dengan memperhitungan tanda MD5 alamat email. URL gambar Gravatar akan terlihat seperti ini: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png Maka pertama kali kita membutuhkan fungsi untuk memperhitungkan hash MD5 dari suatu string. Untuk itu kita akan menggunakan library sumber terbuka yang akan ditambahkan ke file index.html seperti ini:

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" />
</body>
</html>

Sekarang mari kita lanjutkan ke implementasi tag kustom. Harus dilakukan implementasi kode yang mula-mula mengidentifikasi tag kustom di dokumen kemudian kita akan mengimplementasikan fungsionalitas tag kustomnya. Ini semua akan masuk ke file codingdude-gravatar.js dan akan tampak seperti ini:

function customTag(tagName,fn){
  document.createElement(tagName);
  //find all the tags occurrences (instances) in the document
  var tagInstances = document.getElementsByTagName(tagName);
  	//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function codingdudeGravatar(element){
		//code for rendering the element goes here
		if (element.attributes.email){
			//get the email address from the element's email attribute
			var email = element.attributes.email.value;
			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
			element.innerHTML = "<img src='"+gravatar+"'>";
		}
}	

customTag("codingdude-gravatar",codingdudeGravatar);

Dengan melihat kodenya, kita akan mengetahui fungsi customTag() yang menemukan terjadinya tag kustom berdasarkan nama (parameter tagName) dan mengeksekusi fungsionalitas yang terhubung dengan tag kustom tersebut (melalui parameter fn).

Panggilan document.createElement(tagName) penting bagi sejumlah peramban (khususnya IE) untuk menginformasikan peramban bahwa kita akan menggunakan tag kustom bernama tagName, jika tidak tag tersebut mungkin tidak bekerja.

Parameter fn adalah fungsi yang mengimplementasikan apa yang seharusnya dilakukan oleh tag kustom. Dalam hal ini, fn adalah codingdudeGravatar(). Fungsi ini berperan sebagai parameter referensi ke elemen tag kustom. Jika tag kustom memiliki atribut yang disebut email maka tag itu akan memasukkan nilai ke fungsi md5() dari library sumber terbuka kita. Hasilnya kemudian digunakan untuk membuat URL gambar Gravatar, yang ditambahkan melalui elemen <img> di dalam elemen tag kustom kita.

Baris terakhir skrip akan memanggil fungsi customTag() dengan nama tag kustom serta fungsi implementasi yang terkait. Fungsi tag kustom bisa digunakan kembali untuk jenis tag kustom apa saja; Anda hanya diharuskan mengimplementasikan fungsi yang melaksanakan apa yang Anda inginkan.

Sekarang, jika kita memuat file index.html dalam suatu peramban, kita akan melihat Gravatar untuk email saya:

Contoh #2: Tag HTML Kustom Tingkat Lanjut untuk Menggambar Diagram Lingkaran

Dalam contoh kita sebelumnya, kita menyaksikan implementasi tag HTML kustom yang sangat sederhana. Anda bisa menggunakan pendekatan yang sama untuk mengimplementasikan tag kustom apa saja yang Anda inginkan.

Mari kita lihat cara mengimplementasikan tag kustom yang lebih canggih, yang bisa digunakan untuk menggambar diagram lingkaran. Mari membuat file-file yang dibutuhkan untuk tag kustom ini:

Membuat suatu folder dan beri nama piechart-custom-tag. Ini akan menjadi folder proyeknya.
Di dalam folder piechart-custom-tag, buatlah suatu file HTML dan beri nama index.html. File ini akan berisi kode HTML.
Buat juga file JavaScript codingdude-piechart.js yang akan berisi implementasi tag kustom kita.

Tag kustom sangat sering digunakan sebagai wrapper untuk berbagai fungsionalitas. Dalam hal ini, kita akan menggunakan tag <codingdude-piechart> sebagai wrapper untuk menggambar diagram lingkaran. Jika Anda melewatkan tutorial saya tentang Bagaimana Menggambar Diagram dengan JavaScript dan HTML5 Canvas, mungkin Anda ingin melihatnya terlebih dahulu. Kita akan menggunakan kode dari tutorial itu dan menggunakan fungsionalitasnya dalam tag kustom kita.

Jadi suntinglah file codingdude-piechart.js dan tambahkan fungsi berikut ini dari tutorial tersebut:

drawLine()
drawArc()
drawPieSlice()
Piechart()

Sekarang mari menyunting file index.html dan menempatkan tag kustom untuk menggambar diagram lingkaran seperti ini:

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

Tujuannya di sini adalah mengatur lebar dan panjang diagram lingkaran dengan menggunakan atribut width dan height. Atribut colors mengatur warna yang digunakan untuk potongan diagram lingkaran.

Sebagaimana disebutkan sebelumnya, tag kustom ini sedikit lebih kompleks karena kita akan menggunakan sub-tag untuk tag kustom ini. Kita akan menggunakan sub-tag <codingdude-data> di sini untuk mengatur data bagi diagramnya. Sekarang mari kita lihat cara mengimplementasikan kode tersebut untuk tag kustom ini.

Sunting file codingdude-piechart.js dan berdasarkan fungsi yang diambil dari tutorial diagram lingkaran, letakkan kode berikut ini:

//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and HTML5 Canvas
//...
function customTag(tagName,fn){
  document.createElement(tagName);
        //find all the tags occurrences (instances) in the document
        var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function PiechartTag(element){
    //add the canvas where to draw the piechart
    var canvas = document.createElement("canvas"); 
    //get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);
    
    //get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");
    
    //load the chart data from the <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
        //remove the data sub-tags
        chartDataElements[i].parentNode.removeChild(chartDataElements[i]);
    }
  
    //call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}

customTag("codingdude-piechart",PiechartTag);

Fungsi customTag() sama dengan yang digunakan di Contoh#1. Implementasi tag kustom <codingdude-piechart> diwadahi dalam fungsi PiechartTag(). Fungsi ini menangani aspek-aspek berikut:

Fungsi tersebut membuat elemen <canvas> untuk tempat menggambar diagramnya, dan menambahkannya ke dalam tag kustom. Lebar dan panjang kanvas diambil dari atribut tag kustom.
Fungsi tersebut mencari atribut colors elemen dan mentransformasikannya menjadi array warna yang digunakan untuk potongan diagram lingkaran.
Fungsi tersebut memuat elemen-elemen <codingdude-data> satu per satu dengan struktur data yang dimasukkan ke dalam diagram lingkaran. Karena elemen-elemen memiliki konten teks, peramban akan merender-nya dan konten teks akan ditampilkan. Kita tidak menginginkan itu, buang saja elemennya setelah mengambil datanya.
Terakhir, kita akan memanggil konstruktor Piechart() dengan opsi yang disyaratkan dan memanggil fungsi draw() untuk menggambar diagram lingkarannya.

Jika Anda memuat index.html, Anda bisa melihat bahwa tag kustomnya di-render sebagai diagram lingkaran dan semestinya terlihat seperti ini:

The custom tag is rendered as a pie chart

Dan inilah diagram lingkaran yang cantik. Mengubah atribut <codingdude-data> akan mengubah diagram lingkarannya. Teknik tag kustom yang sama digunakan juga untuk pengembangan Infographic Charts & Graphics HTML Tags Library dari CodeCanyon.

Infographic charts and graphics HTML tags library — Library Diagram dari CodeCanyon

Library tersebut berisi tag-tag kustom yang tidak hanya untuk diagram lingkaran saja, tetapi juga untuk diagram garis, diagram batang, dan jenis diagram lainnya.

Penutup

Dalam tutorial ini, kita telah melihat dua contoh cara membuat tag kustom HTML bagi dua fungsionalitas yang berbeda. Dengan menggunakan fungsi customTag(), Anda bisa dengan mudah mengembangkan tag kustom Anda sendiri.

Jika Anda menikmati tutorial ini, kami juga memiliki sejumlah besar tutorial tentang HTML5 dan teknologi-teknologi terkait, jadi jangan ragu untuk mempelajarinya juga.