Aku bekerja di PT. KAI (Kereta Api Indonesia) dalam salah satu projek PSO (Public Service Obligation) sebagai front-end developer. PSO digunakan oleh KAI sebagai pelaporan keuangan kepada DJKA (Direktorat Jendral Kereta Api).
Tugasku adalah membuat kode front-end untuk melakukan fetching data dari server lalu menampilkannya ke halaman menggunakan manipulasi DOM, proses ini dilakukan menggunakan framework Reactjs. Sebagian besar model visualisasi data berbentuk tabel. Aku kaget karena data yang ditampilkan bukan lagi ratusan tapi ribuan bahkan ratus-ribu. Aku perlu menjaga data dari server tampil di tampilan pada posisi yang tepat dan akurat, diperlukan integritas data. Berdasarkan IBM, integritas data adalah jaminan bahwa data akurat dan konsisten dari berbagai titik. Data yang diterima dari server akan memiliki format nama kolom yang berbeda pada visual. Usaha untuk mencapai integritas data diperlukan aksi validasi dan verifikasi.
Pentingnya Metadata
Server mungkin mengirim data dengan field bernama “amount_xyz” dengan value 893.400.000. Aku ditugaskan untuk menampilkan angka ini di kolom “Jumlah ABC” sebagai nama yang lebih mudah dipahami dibandingkan hanya “amount_xyz”. Bentuk kode html yaitu
<table>
<thead>
<th>
<td>Jumlah ABC</td>
</th>
</thead>
<tbody>
<tr>
<td>Rp. 893.400.000</td>
</tr>
</tbody>
</table>Pada baris kode diatas hanya menampilkan angka dan telah dilakukan modifikasi sehingga sulit untuk melakukan verifikasi karena tidak punya makna apapun selain angka saja. Mengandalkan console.log untuk validasi akan membutuhkan waktu lama dan tidak akurat karena tidak terikat pada data yang sebenarnya.
Bagaimana caranya menampilkan informasi tentang data, tersembunyi dan hanya developer yang tahu? Datang Metadata sebagai solusi.
Metadata berfungsi untuk memberikan informasi konteks pada data tanpa mengorbankan visual, berguna bagi developer untuk dilakukan test dan validasi. Untuk memberikan konteks pada data, kita bisa gunakan metadata dalam kode HTML. Metadata tidak akan tampil pada tampilan browser melainkan tersedia melalui inspector browser. Bagi developer maupun mesin sangat suka metadata karena memberikan informasi tambahan selain data itu sendiri.
Metadata sudah lama digunakan dan sering digunakan oleh search engine dan program untuk memahami website lebih dalam. Sebagai Contoh meta data pada website adalah
<html>
<title>Website</title>
<meta name="description" value="This website about anything" />
<meta http-equiv="refresh" content="3;url=https://example.com" />
</html>Metadata adalah konsep yang memberikan konteks pada data, bisa diimplementasi pada hampir semua data. Seperti database “produk”, biasanya ada metadata “tanggal dibuat”, “tanggal diubah”, “dibuat oleh siapa”, dll. Itu semua adalah metadata.
Metadata Menggunakan Tag Data dan Property
HTML memiliki tag data yang dapat digunakan untuk menampilkan konten tetapi dapat dibaca oleh mesin/komputer dengan mudah, selain itu tambahkan property global yang tersedia seperti itemprop, itemref dan itemid untuk metadata yang lebih lengkap.
<data value="893400000" itemprop="amount_xyz">
Rp. 893.400.000
</data>Tag data berisi data-asli yang diterima oleh browser tanpa modifikasi apapun sehingga mudah melakukan validasi dan verifikasi data. Hanya perlu pengecekan pada property pada HTML.
Table Headers Id
Kolom td harus dipastikan berada pada headers yang tepat, gunakan table headers id untuk menghubungkan cell dan headers berdasarkan id headers.
<table>
<thead>
<tr>
<th rowspan="2" id="h">Homework (ID = h)</th>
<th colspan="3" id="e">Exams (ID = e)</th>
<th colspan="3" id="p">Projects (ID = p)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="e1" headers="e">1 (ID = e1)</th>
<th id="e2" headers="e">2 (ID = e2)</th>
<th id="ef" headers="e">Final (ID = ef)</th>
<th id="p1" headers="p">1 (ID = p1)</th>
<th id="p2" headers="p">2 (ID = p2)</th>
<th id="pf" headers="p">Final (ID = pf)</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</tbody>
</table>
IDs of headers of the last clicked cell: <output>none</output>.
Kenapa ini penting? apabila tabel punya puluhan kolom dan ratusan baris, akan sulit untuk inspeksi dan validasi setiap sel sudah berada pada kolom dan baris yang tepat. Dengan Headers id ini akan otomatis link pada header dengan id yang sama, inspector browser menyediakan link untuk menuju header yang dimaksud.
Tag Date time
Format waktu berbeda dari data asli, tidak jarang data waktu disimpan dalam format timestamp, atau format ISO. Sedangkan data waktu di tampilkan berdasarkan lokasi pengguna. Verifikasi data akan menjadi lebih sulit jika tidak ditambahkan metadata pada HTML. Kita bisa gunakan tag <time> untuk menyimpan metadata
<time datetime="2018-07-07">July 7</time>Simpan data asli dari server pada property datetime, dan tampilkan data sesuai lokasi user didalam tag time. Dengan begitu, kita bisa validasi dan verifikasi data dengan mudah.
Kesimpulan
Metadata adalah data tentang data, atau konteks dari data. Penggunaan yang tepat dapat mempermudah developer dalam menjaga integritas data dan juga memungkinkan untuk melakukan auto testing. Aku telah mengguakan metode ini sehingga pengecekan data menjadi lebih mudah dan mendeteksi kesalahan lebih cepat. Semoga tulisan ini bermanfaat, terima kasih telah membaca.