JSON Pada Dokumen HTML

Pada artikel sebelumnya kita telah membahas bagaimana implementasi JSON pada PHP, kali ini kita akan membahas bagaimana penerapannya pada elemen HTML.

Pada kondisi tertentu, kita perlu meletakkan data JSON pada dokumen HTML.

Biasanya terdapat dua kondisi terkait hal ini: (1) JSON data di letakkan didalam element <form> sehingga dapat di submit dengan elemen input lainnya, (2) Kita hanya perlu tempat untuk meletakkan data JSON.

Diletakkan dimana?

Pada elemen HTML, JSON dapat diletakkan di dua tempat: (1) Pada atribut elemen, (2) Didalam elemen HTML itu sendiri.

Meletakkan JSON pada atribut elemen agak merepotkan karena JSON menggunakan tanda kutip dua (“) baik untuk key dan value (dengan tipe data string), sementara elemen HTML umumnya juga menggunakan tanda kutip dua pada atributnya, misal:

<input type="hidden" value="{"title":"jagowebdev"}"/>

Model penulisan diatas akan menyebabkan kode HTML error, karena tanda kutip pembuka pada atribut value langsung tertutup oleh tanda kutip JSON.

Untuk mengatasi hal tersebut, setidaknya ada beberapa cara yang dapat kita lakukan, berikut ini tiga diantaranya:

1. JSON Pada Atribut Elemen HTML

Meletakkan data JSON pada atribut elemen HTML adalah cara paling umum digunakan, namun, apakah cara ini aman? mari kita lihat…

1.a.  Menggunakan Satu Tanda Kutip

Umumnya atribut  elemen HTML ditulis menggunakan tanda kutip dua, namun jika data atribut tersebut berupa data JSON, kita  tidak dapat menggunakan tanda kutip dua, melainkan menggunakan tanda kutip satu.

Misal kita membuat form edit dengan menyertakan data lama dalam bentuk json sebagai berikut:

<?php
$site_options = array('title' => 'Jagowebdev'
			, 'desc' => 'Jagowebdev kependekan dari "Jago Web Development"'
		);
?>
<form method="post" action="edit_user.php">
	Title : <input type="text" name="title" value="<?=@$_POST['title']?>"/>
	Description : <input type="text" name="description" value="<?=@$_POST['description']?>"/>
	<input type="hidden" name="site_options" value='<?=json_encode($site_options)?>'/>
	<input type="submit" name="submit" value="Simpan">
</form>

Perhatikan bahwa pada contoh diatas, kita menggunakan tanda kutip satu ( ‘ ) untuk value yang berisi data JSON (baris 10). Ketika dijalankan di browser, bentuk value tersebut menjadi:

<input type="hidden" name="site_options" value='{"title":"Jagowebdev","desc":"Jagowebdev kependekan dari \"Jago Web Development\"}'/>

Penggunaan tanda kutip satu merupakan bentuk valid HTML, namun bagaimana jika didalam data JSON mengandung tanda kutip satu? jika tanda kutip satu ini tidak di escape, maka akan menyebabkan error, misal:

<input type="hidden" name="site_options" value='{"title":"Jagowebdev","desc":"Jagowebdev kependekan dari 'Jago Web Development'"}'/>

Untuk mengatasi hal tersebut, maka kita perlu mengubah tanda kutip satu menjadi karakter lain seperti hexadesimal, dengan PHP, kita dapat menggunakan opsi JSON_HEX_APOS  pada fungsi json_encode()

Dengan HEX pada tanda kutip satu, bentuk data JSON menjadi:

<input type="hidden" name="site_options" value='{"title":"Jagowebdev","desc":"Jagowebdev kependekan dari \u0027Jago Web Development\u0027"}'/>

Note: Jika kita parsing data JSON tersebut (misal menggunakan fungsi json_encode pada PHP) maka karakter HEX tadi akan kembali menjadi tanda kutip satu.

JSON Pada Atribut Data

Metode di atas juga dapat digunakan ketika meletakkan data JSON pada atribut HTML lainnya, seperti atribut data. Penggunaan pada atribut data ini terkadang digunakan saat membuat custom tooltip.

Contoh:

<a href="https://jagowebdev.com" title="Jagowebdev" class="tooltip" data-tooltip='{"title"="Jagowebdev", "url"="https://jagowebdev.com", "desc"="Komunitas web developer"}'>
  Jagowebdev
</a>

1.b. Menggunakan Dua Tanda Kutip

Selain tanda kutip satu, kita tetap dapat menggunakan dua tanda kutip, namun agar tidak menyebabkan kode HTML error, kita perlu mengubah karakter HTML menjadi bentuk entitas HTML (HTML Entity).

Pada PHP, kita dapat menggunakan fungsi  htmlentites(), misal, pada contoh diatas, kita ubah kodenya menjadi berikut:

<?php
$site_options = array('title' => 'Jagowebdev'
			, 'desc' => 'Jagowebdev kependekan dari "Jago Web Development"'
		);
$data = json_encode($site_options);
?>
<form method="post" action="edit_user.php">
	Title : <input type="text" name="title" value="<?=@$_POST['title']?>"/>
	Description : <input type="text" name="description" value="<?=@$_POST['description']?>"/>
	<input type="hidden" name="site_options" value="<?=htmlentities($data)?>"/>
	<input type="submit" name="submit" value="Simpan">
</form>

Note: Sobat dapat menggunakan opsi ENT_QUOTES  untuk mengubah baik single maupun double quote, misal:  htmlentities($data, ENT_QUOTES).

Dengan fungsi htmlentities() data JSON yang kita dapatkan adalah:

<input type="hidden" name="site_options" value="{&quot;title&quot;:&quot;Jagowebdev&quot;,&quot;desc&quot;:&quot;Jagowebdev kependekan dari \&quot;Jago Web Development\&quot;&quot;}"/>

Untuk mengembalikan ke bentuk semula, kita dapat menggunakan fungsi html_entity_decode(), jika kita menggunakan opsi  ENT_QUOTES pada fungsi htmlentites(), maka kita juga harus menggunakan opsi tersebut pada fungsi html_entity_decode()

2.  JSON Pada Element HTML: Biarkan Apa Adanya

Cara kedua adalah meletakkan JSON di dalam element <textarea>. Dengan model seperti ini, data JSON dapat kita tulis apa adanya, tanpa perlu khawatir dengan tanda kutip.

Sebagai contoh, pada form HTML kita dapat meletakkan data JSON didalam elemen <textarea>, sehingga data JSON tersebut akan ikut tersubmit dengan elemen input lainnya:

<form method="post" action="option_user.php">
	Title : <input type="text" name="title" value="<?=@$_POST['title']?>"/>
	Description : <input type="text" name="description" value="<?=@$_POST['description']?>"/>
	<input type="submit" name="submit" value="Simpan">
	<textarea style="display:none"><?=json_encode($site_options)?></textarea>
</form>

Note: kita menggunakan style="display:none" untuk menyembunyikan textarea agar tidak terlihat.

atau, jika kita hanya ingin sekedar meletakkan data JSON untuk digunakan kemudian, kita dapat menggunakan elemen lain, seperti <span>, <div>, dll …

Sebagai contoh:

<span id="site-options" style="display:none">{"title":"Jagowebdev","desc":"Komunistas web developer","base_url":"https://jagowebdev.com"}</span>

Jika dibandingkan dengan metode yang lain, metode ini lebih aman dan simple, tidak perlu khawatir dengan error yang terjadi karena penggunaan tanda kutip, baik tanda kutip satu maupun dua.

3. JSON Pada Dokumen HTML: Biarkan apa adanya

Sebelumnya telah kita bahas bahwa untuk sekedar meletakkan data JSON pada elemen HTML, kita dapat meletakkannya pada atribut atau pada elemen itu sendiri.

Selain cara tersebut, terdapat alternatif lain yang dapat kita gunakan, yaitu meletakkan data JSON pada variabel javascript.

Sebagai contoh: berikut ini script membuat multi level dropdown dari database:

<?php
$query = mysqli_query($conn, 'SELECT category_id, category_name, parent FROM product_category WHERE parent != 0');

while ($row=mysqli_fetch_array($query)) {
  $data[$row['parent']][] = array('category_id' => $row['category_id'], 'category_name' => $row['category_name']);
}
echo "<script type='text/javascript'>var json=" . json_encode($data, JSON_HEX_QUOT) . "</script>";
echo site_footer(array('js/json-local-static.js'), basename(__DIR__));
?>

Jika di jalankan di browser, baris 10 akan berubah menjadi:

<script type='text/javascript'>var json={"1":[{"category_id":"2","category_name":"Music & Instruments"},{"category_id":"3","category_name":"Hobbies"},{"category_id":"4","category_name":"Computer & Internet"},{"category_id":"5","category_name":"Programming"}]}</script>

Penting: Perhatikan, bahwa pada contoh diatas, variabel json berisi data dengan format sama persis dengan JSON, namun, data tersebut bukanlah JSON melainkan objek javascript.

Kenapa?

Karena bentuknya bukan string (pada contoh diatas data tidak berada di dalam tanda kutip), sedangkan JSON adalah string;

Dengan demikian, kita tidak perlu melakukan parsing, melainkan dapat langsung menggunakannya sebagaimana objek javascript lainnya.

Penutup

Memasukkan data JSON ke dalam dokumen HTML terkadang merepotkan, untuk memastikan semuanya berjalan dengan baik, kita dapat mempertimbangkan dua hal sebagai berikut:

1. Jika data tersebut ingin di submit, maka letakkan di dalam elemen <textarea></textarea>.
2. Jika hanya perlu tempat untuk meletakkan data json, kita dapat menggunakan variable Javascript atau meletakkan data JSON pada elemen html lain seperti <span> atau <div>

Demikian pembahasan mengenai JSON pada HTML. Semoga bermanfaat.