Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, August 2, 2022

Apa Itu Shadow DOM?

Shadow DOM dapat mengisolasi sebagian struktur DOM di dalam komponen sehingga tidak dapat disentuh dari luar komponen atau nodenya. Singkatnya kita bisa sebut Shadow DOM sebagai “DOM dalam DOM”. Bagaimana ia bekerja? Perhatikan ilustrasi berikut:

Shadow DOM dapat membuat DOM Tree lain terbentuk secara terisolasi melalui host yang merupakan komponen dari regular DOM Tree (Document Tree). Shadow DOM Tree ini dimulai dari root bayangan (Shadow root), yang dibawahnya dapat memiliki banyak element lagi layaknya Document Tree.
Terdapat beberapa terminologi yang perlu kita ketahui dari ilustrasi di atas:
  • Shadow host : Merupakan komponen/node yang terdapat pada regular DOM di mana shadow DOM terlampir pada komponen/node ini.
  • Shadow tree : DOM Tree di dalam shadow DOM.
  • Shadow boundary : Batas dari shadow DOM dengan regular DOM.
  • Shadow root : Root node dari shadow tree.
Kita dapat memanipulasi elemen yang terdapat di dalam shadow tree layaknya pada document tree, namun cakupannya selama kita berada di dalam shadow boundary. Dengan kata lain, jika kita berada di document tree kita tidak dapat memanipulasi elemen bahkan menerapkan styling pada elemen yang terdapat di dalam shadow tree. Itulah mengapa shadow DOM dapat membuat komponen terenkapsulasi
Untuk melampirkan Shadow DOM pada elemen penggunaan sangat mudah, yaitu dengan menggunakan properti attachShadow pada elemen-nya seperti ini:

  1. // Shadow Host

  2. const divElement = document.createElement("div");

  3.  

  4.  

  5. // element yang berada di dalam Shadow DOM

  6. const headingElement = document.createElement("h1");

  7. headingElement.innerText = "Ini merupakan konten di dalam shadow DOM";

  8.  

  9.  

  10. // Melampirkan shadow root pada shadow host

  11. // Mengatur mode shadow dengan nilai open

  12. const shadowRoot = divElement.attachShadow({mode: "open"});

  13.  

  14.  

  15. // Memasukkan element heading ke dalam shadow root

  16. shadowRoot.appendChild(headingElement);

  17.  

  18.  

  19. // Memasukkan elemen shadow host ke regular DOM

  20. document.body.appendChild(divElement);



  1. <!DOCTYPE html>

  2. <html>

  3.  <head>

  4.    <meta charset="utf-8">

  5.    <meta name="viewport" content="width=device-width">

  6.    <title>Shadow DOM Basic Usage</title>

  7.  </head>

  8.  <body>

  9.  <script src="main.js"></script>

  10.  </body>

  11. </html>


Jika kita lihat pada browser, maka struktur HTML yang akan dihasilkan adalah seperti ini:

2020031020442138d22cf8f4814aacc795f563c3015892.png
Dan struktur DOM tree yang terbentuk akan tampak seperti ini:
20200310204452a9e4788ac5f7f206c20debfa0bc87524.png
Dalam penggunaan attachShadow() kita melampirkan objek dengan properti mode yang memiliki nilai ‘open’. Sebenarnya terdapat dua opsi nilai yang dapat digunakan dalam properti mode, yaitu “open” dan “closed”. 
Menggunakan nilai open berarti kita memperbolehkan untuk mengakses properti shadowRoot melalui elemen yang melampirkan Shadow DOM. 

  1. divElement.attachShadow;


properti shadowRoot mengembalikan struktur DOM yang berada pada shadow tree.
20200310204643a7a1f999761eaf74f9476e50013bb373.gif
Namun jika kita menggunakan nilai closed maka properti shadowRoot akan mengembalikan nilai null

  1. const shadowRoot = divElement.attachShadow({mode: "closed"});

  2. divElement.shadowRoot // null;


Hal ini berarti kita sama sekali tidak dapat mengakses Shadow Tree selain melalui variabel yang kita definisikan ketika melampirkan Shadow DOM.

  1. const shadowRoot = divElement.attachShadow({mode: "closed"});

  2. divElement.shadowRoot // null;

  3. shadowRoot // # shadow-root (closed)


2020031020483296ef7fce493fd7c0528697c3fa03565b.gif
Karena Shadow DOM terisolasi dari document tree maka element yang terdapat di dalamnya pun tidak akan terpengaruh oleh styling yang berada diluar dari shadow root-nya.

  1. <!DOCTYPE html>

  2. <html>

  3.  <head>

  4.    <meta charset="utf-8">

  5.    <meta name="viewport" content="width=device-width">

  6.    <title>Shadow DOM Basic Usage</title>

  7.    <style>

  8.        h1 {

  9.          color: red;

  10.        }

  11.    </style>

  12.  </head>

  13.  <body>

  14.    <h1>Ini merupakan konten yang berada di Document tree</h1>

  15.    <script src="main.js"></script>

  16.  </body>

  17. </html>



  1. // Shadow Host

  2. const divElement = document.createElement("div");

  3.  

  4.  

  5. // element yang berada di dalam Shadow DOM

  6. const headingElement = document.createElement("h1");

  7. headingElement.innerText = "Ini merupakan konten di dalam shadow DOM";

  8.  

  9.  

  10. // Melampirkan shadow root pada shadow host

  11. // Mengatur mode shadow dengan nilai open

  12. const shadowRoot = divElement.attachShadow({mode: "open"});

  13.  

  14.  

  15. // Memasukkan element heading ke dalam shadow root

  16. shadowRoot.appendChild(headingElement);

  17.  

  18.  

  19. // Memasukkan elemen shadow host ke regular DOM

  20. document.body.appendChild(divElement);



Jika dilihat pada browser maka hasilnya akan seperti ini:

20200310205023649403bfa8d61e879afc65f4a050c502.png
Berdasarkan hasil di atas, styling hanya akan diterapkan pada elemen <h1> yang berada di document tree. Sedangkan elemen <h1> yang berada pada shadow dom tidak akan terpengaruh dengan styling tersebut. Lantas, bagaimana caranya kita melakukan styling pada Shadow DOM?
Kita dapat melakukannya dengan menambahkan template <style> di dalam shadowRoot.innerHTML.  Contohnya seperti ini:

  1. // menetapkan styling pada Shadow DOM

  2. shadowRoot.innerHTML += `

  3.  <style>

  4.    h1 {

  5.      color: green;

  6.    }

  7.  </style>

  8. `;


Maka element <style> tersebut akan berada di dalam shadow tree dan akan berdampak pada elemen yang ada di dalamnya.
20200310205206823dcc0fb3c6ef38cb5e0a7563f0590d.png

Monday, August 1, 2022

Apa itu Web API?

Web APIs

Pada pengenalan modul ini kita sudah paham bagaimana AJAX dapat menampilkan informasi yang dinamis pada aplikasi kita. Namun kita belum mengetahui dari mana sumber data tersebut berasal? Bagaimana cara mengaksesnya? Untuk menjawab itu semua, mari berkenalan dengan Web API.

Web API (Application Programming Interface) merupakan interface yang disediakan oleh penyedia data agar data yang ia miliki dapat dimanfaatkan dengan mudah pada banyak aplikasi, baik itu aplikasi web, mobile, desktop ataupun lainnya.
Penyedia data yang telah membangun Web API memiliki keuntungan karena proses pengembangan aplikasi menjadi lebih efisien. Mengapa? Karena cukup dengan satu Web API, data dapat dikonsumsi pada berbagai macam platform seperti yang sudah disebutkan di atas.
2020031322462248e1afa1ef73e3da2e43e6f7bcfb5c7a.png

Pada ilustrasi di atas, Web API bekerja menggunakan salah satu pola standar yaitu REST (Representational State Transfer). Pola inilah yang saat ini banyak digunakan karena simpel dan mudah dipelajari daripada pola yang lainnya. Jenis data yang diterima atau dikirimkan pada pola REST dapat berupa format text, JSON atau XML.
Pola REST hampir sepenuhnya menggunakan HTTP dalam transaksi datanya. Sehingga untuk berkomunikasi dengan Web API ini, client (aplikasi) harus membuat HTTP request pada endpoint (URL) yang telah ditentukkan. Biasanya penyedia data juga menetapkan HTTP Request Method yang berbeda pada setiap endpoint-nya.
Terdapat banyak tipe/method dalam melakukan HTTP Request, namun terdapat 4 (empat) method penting yang biasanya digunakan pada Web API dalam melakukan transaksi data.
  • GET : Digunakan untuk mengambil informasi dari Web API.
  • POST : Digunakan untuk menambahkan data.
  • PUT : Digunakan untuk mengubah data.
  • DELETE : Digunakan untuk menghapus data.
Setelah client membuat HTTP request pada Web API, maka Web API akan mengembalikan HTTP response. Pada response terdapat status kode yang menunjukkan apakah request yang kita lakukan berhasil atau gagal. Berikut beberapa status kode yang dapat dihasilkan dari HTTP Response pada Web API.
  • 200 (OK) : Request berhasil dipenuhi oleh server (Web API).
  • 400 (Bad Request) : Server tidak mengerti request yang dikirimkan client.
  • 401 (Unauthorized) : Request membutuhkan authorization.
  • 403 (Forbidden) : Server mengerti request dari client namun menolak untuk memprosesnya karena request tersebut tidak boleh dilakukan.
  • 404 (Not Found) : Resource yang client minta, tidak ditemukan.
  • 500 (Server Error) : Server mengalami kendala untuk memproses request.
Banyak penyedia data yang menyediakan Web API secara cuma-cuma atau dapat dikonsumsi umum. Namun ada juga penyedia data yang membangun Web API yang hanya digunakan untuk keperluan internal saja. Biasanya jika kita mengakses Web API yang sifatnya private, kita akan terhalangi oleh CORS (cross-origin resource sharing

CORS

Sebelum kita mencoba langkah-langkah mengakses Web API, ada hal yang harus kita ketahui terlebih dahulu perihal keamanan. Dalam transaksi menggunakan Web API menggunakan AJAX kita dapat melihat request yang dibuat dan response yang dihasilkan melalui Network tabs pada DevTools.
20200313224809099128c193bbc451d3759397de0d6025.png
Hal tersebut disebabkan AJAX diproses pada sisi client sehingga pengguna dapat leluasa untuk melihat dan mengontrolnya. Maka dengan alasan keamanan ketika kita melakukan AJAX baik menggunakan dengan XHR atau Fetch, kita hanya diperbolehkan melakukan request dari domain yang sama.
Contoh jika kita ingin mengakses API yang bersumber dari google.com/api maka kita sebagai client perlu menjadi google.com. Jika kita berasal dari domain yang berbeda, contohnya bing.com maka kita tidak dapat menggunakan AJAX pada google.com/api. Hal ini dikenal sebagai same-origin policy.
Namun jika memang Web API tersebut diperbolehkan untuk dikonsumsi umum berarti penyedia data harus menerapkan teknologi yang dinamakan CORS (Cross-Origin Resource Sharing) pada server-nya. 
Server yang menyediakan Web API menggunakan CORS dapat digunakan secara umum dan mengelakkan kebijakan same-origin guna mengakses informasi yang ada di dalamnya

Test a Web API using Postman

Apa yang perlu Anda lakukan sebelum mencoba Web API menggunakan AJAX? Untuk mempelajari atau menguji sebuah Web API, developer menggunakan tools yang bernama Postman. Postman adalah GUI API Caller yang dapat membuat HTTP Request dengan method yang lengkap seperti GETPOSTPUTDELETE dan lainnya.
Postman merupakan tools yang sangat cocok untuk menguji sebuah Web API karena terdapat fungsi yang relatif lengkap sebagai API caller dalam melakukan HTTP Request. Pada Postman kita dapat menetapkan parameter dan mengirimkan data pada body atau header request dengan mudah, tanpa memerlukan kode.
Postman tersedia secara gratis dan dapat berjalan pada sistem operasi Windows, Linux maupun MacOS. Untuk mendapatkan aplikasi Postman, kita bisa mengunduhnya melalui https://www.postman.com.
202003132250278ee3046b28571ea08248c18a8e7417bf.png
Setelah mengunduhnya, silakan Anda pasang aplikasi postman pada komputer. Saat  selesai Anda bisa langsung membukanya.
2020031322505168bdc63b88a0a8016d0fa0f2e4aa6520.png
Ketika pertama kali membuka aplikasi Postman, kita perlu login atau registrasi untuk memiliki akun. Setelah berhasil login, berikut tampilan pada halaman utamanya:
20200313225118a91df05b0a17ef9fc809985aa27a71b6.png
Untuk melakukan sebuah HTTP Request kita dapat memilih menu “create a request” yang tersedia pada halaman tersebut.
20200313225142ca222609d25b934d654c583a6ad2bdae.png
Kemudian untuk mengirimkan request kita tentukan dulu endpoint (request URL) mana yang akan kita tuju pada kolom yang sudah tersedia. Kita akan mencoba melakukan request pada Web API dengan endpoint berikut: https://web-server-book-dicoding.appspot.com/list
202003132252316324bd0c0171af9c247588f079a45e08.png
Setelah mengisikan request URLnya coba kita tekan tombol “Send”. Maka respon yang akan didapatkan adalah daftar buku dalam bentuk JSON.
202003132252561d2ed5fd42e7c2b84d25fe56b9c32f5a.png
Jika penyedia data menyediakan Web API secara terbuka atau dapat diakses  umum, biasanya ia akan membuat sebuah dokumentasi cara penggunaan API. Di sana kita dapat menemukan informasi endpoint mana saja yang dapat kita akses, method apa saja yang diperlukan, ataupun format atau struktur seperti apa yang perlu diterapkan untuk mengirim data. Dokumentasi tersebut sangatlah penting karena melalui itulah seorang developer jadi tahu bagaimana ia bisa memanfaatkan Web API tersebut.
Dokumentasi dari Web API yang kita gunakan pada contoh di atas dapat kita lihat pada tautan berikut https://web-server-book-dicoding.appspot.com/.
20200313225338bb74016a898e8187cf6da8c639a2b667.png
Dari dokumentasi tersebut kita menjadi tahu ternyata kita dapat menambahkan data buku baru dengan mengakses endpoint /add. Di sana juga kita bisa melihat method, headers, serta body apa yang perlu kita terapkan dalam melakukan request tersebut. Sehingga kita dapat mencobanya pada pada Postman.
202003132254066304010fc29b90c06fd0f8993840fefe.png
Anda juga bisa mencoba fungsi lain seperti menghapus atau mengubah data buku melalui Web API tersebut. Jika Anda masih belum terbiasa dengan Postman, terdapat artikel yang cukup bagus sebagai panduan menggunakan Postman untuk Pemula. https://www.guru99.com/postman-tutorial.html