Tujuan Pembelajaran :

Materi Pembelajaran :

BAGIAN. 1

DOM Manipulation

• Definisi dan Struktur DOM Manipulation 

DOM merupakan singkatan dari Document Object Model, DOM adalah object model standar bagi XML dan HTML yang memiliki sifat platform independent. Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat. Nah, saat proses render file HTML berlangsung, browser akan membuat DOM atau model objek dokumen yang merupakan model berorientsi objek dari struktur logicnya.

Objek dari dokumen tersebut menyediakan sekumpulan fungsi serta data atau atribut yang dapat dimanfaatkan ketika membuat program Javascript. Hal inilah yang dimaksud dengan API (Applicatio Programming Interface). 

Sebenarnya, DOM tidak hanya ada di Javascript saja namun juga terdapat pada bahasa pemrograman lain.

Di tingkat paling dasar, situs sebuah web terdiri atas dokumen HTML serta CSS. Browser membuat representasi dokumen yang biasa disebut dengan DOM (Document Object Model). Dokumen tersebut memungkinkan Javascript dapat mengakses serta memanipulasi elemen dan juga style situs web. Model ini diatur dalam struktur ojek serta mendefinisikan:

1. Properties dan event elemen HTML

2. Elemen HTML sebagai objek

3. Method guna mengakses elemen HTML

Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML yang dapat diilustrasikan dengan bentuk pohon seperti di bawah ini:

Struktur seperti pohon ini akan memudahkan Anda dalam memakai elemen tertentu. Elemen-elemen di atas disebut node. Tidak hanya elemen, namun atribut elemen dan teks juga memiliki node tersendiri, yaitu attribute-node untuk atribut elemen dan text- node untuk teks.

• Sejarah DOM

Sejarah perkembangan Dom menurut wikipedia adalah W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.

• Metode DOM

1. Finding HTML Elements

2. Changing HTML Elements

3. Adding and Deleting Elements

4. Adding Events Handlers

• Penggunaan DOM

1. Metode penggunaan DOM dengan document().

2. Metode penggunaan Event Handler

Event handler adalah penanganan keadaan dari browser atau input yang dimasukkan oleh pengguna. Kita bisa mendapatkan tombol keyboard atau mouse yang ditekan atau perubahan pada browser dan isinya.

BAGIAN. 2

API & REST API

Bagi seorang programmer pasti sudah tidak asing lagi dalam mendengar nama REST API. API (Application Programming Interface) adalah suatu kumpulan subroutine, protokol komunikasi, tools, dan fungsi untuk membuat sebuah perangkat lunak. Mudahnya, API adalah fungsi yang dapat dipanggil atau dijalankan oleh program lain sehingga dapat menghubungkan antara server dengan perangkat yang digunakan oleh user. Jadi, untuk mendapatkan suatu database dari suatu perusahaan diperlukan API untuk mengambil data tersebut hingga sampai kepada user.

• Definisi API

API adalah singkatan dari Application Programming Interface yaitu sebuah software yang memungkinkan para developer untuk mengintegrasikan dan mengizinkan dua aplikasi yang berbeda secara bersamaan untuk saling terhubung satu sama lain..

Tujuan penggunaan dari API adalah untuk saling berbagi data antar aplikasi yang berbeda tersebut, Tujuan penggunaan API lainnya yaitu untuk mempercepat proses pengembangan aplikasi dengan cara menyediakan sebuah function yang terpisah sehingga para developer tidak perlu lagi membuat fitur yang serupa.

Istilah “API” sebetulnya tidak ada hubungannya dengan hal-hal yang berkaitan dengan web, karena istilah tersebut sudah ada sebelum web. Hal Ini semacam dikooptasi yang berarti “pemanggilan web service”. Tapi secara tradisional, Pengertian API bukan seperti itu. Tapi lebih berkaitan dengan fungsi-fungsi yang disediakan oleh Sistem Operasi.

API adalah singkatan dari Application Programming Interface. API sendiri merupakan interface yang dapat menghubungkan satu aplikasi dengan aplikasi lainnya. Dengan kata lain, peran API adalah sebagai perantara antar berbagai aplikasi berbeda, baik dalam satu platform yang sama atau pun lintas platform.

1. Private 

Jenis yang pertama adalah private API. API ini dirancang untuk meningkatkan solusi dan servis dalam suatu organisasi. Developer internal dapat menggunakan API ini untuk mengintegrasikan sistem atau aplikasi TI perusahaan, membangun sistem baru atau aplikasi yang berhubungan dengan pelanggan dengan memanfaatkan sistem yang ada. Walaupun aplikasi tersedia untuk umum, interface tetap tersedia hanya untuk mereka yang bekerja langsung dengan API publisher. Strategi private ini memungkinkan perusahaan mengontrol penggunaan API sepenuhnya. Contohnya API dari back-end untuk menyampaikan informasi ke front-end melalui website.

2. Public

Public API juga dikenal sebagai developer atau eksternal, API ini tersedia untuk pengembang pihak ketiga. Program public API memungkinkan untuk meningkatkan brand awareness dan mendapatkan sumber revenue tambahan kalau dijalankan dengan benar. Ada dua jenis API public yaitu open sources (gratis) dan komersial. Open API menyarankan bahwa semua fitur API bersifat publik dan dapat digunakan tanpa syarat dan ketentuan yang membatasi.

Misalnya, Anda dapat membangun aplikasi yang menggunakan API tanpa persetujuan jelas dari supplier API atau biaya lisensi wajib. API dan semua dokumentasi yang berkaitan harus tersedia secara terbuka dan dapat digunakan secara bebas untuk membuat dan menguji aplikasi. Pengguna API komersial perlu membayar biaya langganan atau menggunakan API dengan cara pay as you go. Cara yang dilakukan oleh publisher adalah dengan menawarkan uji coba gratis sehingga pengguna dapat mengevaluasi API sebelum mebeli untuk berlangganan.

3. Partner

Partner API dipublish secara terbuka tetapi dishare dengan partner bisnis yang telah menandatangani perjanjian dengan publisher. Ada aturan khusus yaitu hanya user yang sudah memiliki izin yang dapat menggunakan interface. Kasus yang sering ditemukan dalam API partner adalah integrasi antara dua pihak. Perusahaan yang memberikan akses ke data kepada partnernya mendapatkan keuntungan dari revenue tambahan. Saat yang bersamaan, perusahaan dapat memantau aset digital yang digunakan, memastikan apakah solusi pihak ketiga yang menggunakan API perusahaan memberikan user experience yang layak dan dapat mempertahankan identitas perusahaan di aplikasi.

4. Composite

Composite API merupakan API yang menyimpan data dari berbagai server atau hosting dalam satu tempat. Tentunya, hal tersebut sangat menghemat waktu bagi pengguna. Itu karena pengguna bisa mendapatkan berbagai jenis data hanya dalam sekali akses.

• Pengenalan dan Penerapan API

Seperti yang sudah disebutkan sebelumnya, bahwa API (Application Programming Interface) merupakan interface yang berisi sekumpulan fungsi yang dapat dijalankan oleh program lain dengan berbagai jenis penerapan. Berikut contoh penerapan API

1. Bahasa pemrograman : Penerapannya dalam membuat koneksi ke database MySQL menggunakan dua API yang berbeda di bahasa pemrograman PHP. Selain itu, API juga dapat mengakses elemen pada DOM di bahasa pemograman Javascript.

2. Library and framework

3. Sistem Operasi : Penerapannya dapat dalam bentuk base service, graphic device interface, dan user interface.

4. Web API atau web service : Penerapannya dibuat dalam bentuk REST (Representational State Transfer) dan SOAP (Simple Object Access Protocol). Selain itu, dapat diterapkan dalam sebuah sistem perangkat lunak yang dibuat untuk mendukung interaksi antara dua aplikasi yang berbeda melalui jaringan (umumnya menggunakan jaringan HTTP Protocol). Web service dapat membuat aplikasi yang memiliki perbedaan bahasa, teknologi, dan sistem operasi sehingga web service dapat dijadikan bahan untuk membuat REST API.

• Fungsi API

API dapat menyederhanakan dan mempercepat pengembangan software atau aplikasi. Ternyata, API memberikan berbagai kemudahan bagi developer.

1. Pengembangan aplikasi menjadi lebih cepat dan efektif dengan proses integrasi antara dua aplikasi.

2. Beban kerja server menjadi lebih ringan karena tidak perlu menyimpan semua data.

3. Pembuatan aplikasi yang kompleks tetapi lebih fungsional.

Salah satu contohnya adalah pada aplikasi Gojek yang tidak perlu membuat interface maps, tetapi dapat dengan mengintegrasikan Google Maps API dan pengguna bisa mengakses data peta dan lokasi dalam satu aplikasi saja.

• Fitur API
  

Banyak sekali Fitur yang bisa kamu gunakan saat memanfaatkan Web API dalam mengembangkan aplikasi kamu, Software ini akan membantu kamu dalam mempercepat development aplikasi kamu. Apa saja fitur yang tersedia :

1. Mendukung fungsi CRUD yang bekerja melalui HTTP protocol dengan melalui method GET, POST, PUT dan DELETE2. Memiliki response Accept Header dan HTTP status code

2. Mendukung banyak format teks, Seperti JSON, XML atau format apapun yang kamu inginkan, Akan tetapi kebanyakan digunakan ke dalam format JSON. Kamu juga bisa menggunakan MediaTypeFormatter untuk melakukan kustom.

3. Mendukung fitur MVC seperti routing, controllers, action results, filter, model, IOC container, dll.

4. Web API dapat berjalan di Apache atau web server lainnya yang didukung sesuai bahasa pemrograman yang digunakan.

5. Dukungan otomatis untuk OData. Oleh karena itu dengan menempatkan atribut [Queryable] baru pada metode pengontrol yang mengembalikan IQueryable, klien dapat menggunakan metode untuk komposisi query OData.

• Pembahasan REST API

Sebelumnya sudah dijelaskan tentang API, lalu bagaimana dengan REST API? REST API dapat dikatakan sebagai salah satu bentuk gaya arsitektural perangkat lunak yang didalamnya mendefinisikan beberapa aturan untuk membuat web service. REST API berisi aturan atau batasan yang dapat membatasi programmer untuk mengakses atau melakukan tindakan-tindakan tertentu pada sebuah database. Jika API adalah penghubung, maka REST yang membuat aturan sesuai keinginan programmer dalam merancang web service. Mudahnya, terdapat request dan response pada data yang dikirimkan ataupun yang diterima. Data yang digunakan dalam REST API umumnya berupa JSON.

Sifat-sifat REST API (Representational State Transfer)

1. Gaya perancangan

2. Stateless

3. Dibuat oleh Roy Fielding

4. Protokolnya selalu menggunakan HTTP

5. Memungkinkan interaksi antar mesin (mesin-mesin) dengan perilaku yang berbeda

Sebagai contoh, ilustrasinya adalah pada saat user membuka browser dan mencari suatu site seperti youtube.com maka ini artinya user mengirimkan request dengan metode GET ke server youtube sehingga server menerima respon berupa HTML. Jika site dari youtube sudah terbuka maka terdapat response yang dikirimkan oleh server yang berasal dari API. Kasus kedua adalah ketika ada form username dan password dalam membuka suatu site maka artinya user mengirimkan request dalam bentuk metode POST sehingga nanti server akan memberi response dan menyajikan data yang diinginkan oleh user.

Berikut adalah cara membuat ilustrasi REST API

1. User mengirimkan request dengan data yang diinginkan

2. User mengirimkan request dan mengubah data menjadi JSON ke REST Server

3. REST Server menerima response berupa JSON beserta kode status dan mengirimkannya ke server (kode status : 200 success, 404 not found, 500 server eror, dan masih banyak lagi. Kode status digunakan untuk mengetahui apakah request yang dikirimkan oleh user sudah benar atau belum)

4. Server menerima dari REST Server dan mengubah respon menjadi HTML

Perangkat yag digunakan oleh user disebut dengan client sehingga pada saat client bertemu dengan server maka dapat disebut sebagai REST Client. Rest Client dapat berupa smartphone, cloud, dan smart home.

• API berdasar Penggunaan

1. API Database

API database memungkinkan komunikasi antara aplikasi dan sistem manajemen database. Developer bekerja dengan basis data dengan menulis query untuk mengakses data, mengubah tabel dan lain-lain.

API database drupal 7 memungkinkan pengguna untuk menulis query untuk basis data yang berbeda, baik kepemilikan maupun sumber terbuka seperti Oracle, MongoDB, MySQL, CouchDB dan MSSQL.

Contoh lainnya adalah ORDS database API yang ada pada Oracle REST Data Services.

2. API Sistem Operasi

API ini menentukan bagaimana aplikasi menggunakan resources dan sistem operasi. API pada tingkat sistem operasi membantu aplikasi melakukan komunikasi satu sama lain dengan layer dasar dan mengikuti protokol dan spesifikasi tertentu.

Setiap OS memiliki kumpulan API misalnya Windows API atau Linux API. Apple menyediakan referensi API untuk macOS dan iOS dalam dokumentasi developernya.

API untuk membuat aplikasi untuk sistem operasi desktop macOS disertakan dalam developer tools Cocoa.

3. API Remote

API remote dapat menentukan standar interaksi untuk aplikasi berjalan pada mesin yang berbeda. Dengan kata lain, satu produk aplikasi mengakses resources yang terletak di luar device.

Karena dua aplikasi remote terhubung melalui jaringan komunikasi yang berupa internet, sebagian besar API remote ditulis berdasarkan standar website.

Java Database Connectivity API dan Java Remote Method Invocation API adalah dua contoh API remote.

4. API Website

Jenis API ini adalah yang paling umum. API website menyediakan resources yang dapat dibaca mesin dan transfer fungsionalitas antara sistem berbasis website yang mewakili klien dan server.

API ini mengirimkan permintaan dari aplikasi website dan respon dari server menggunakan HTTP (Hypertext Transfer Protocol).

Developer dapat menggunakan API website untuk memperluas fungsionalitas aplikasi atau website mereka.

• Alasan menggunakan API
  

Berikut alasan mengapa memilih Web API :

1. Web API bersifat Open Source

2. Saat kamu membutuhkan Web Service dan tidak perlu SOAP, maka ASP.NET Web API adalah solusi dan pilihan terbaik.

3. Web API dapat digunakan untuk membangun Layanan HTTP sederhana, non-SOAP di atas WCF message pipeline.

4. Konfigurasi yang mudah dan tidak seperti pada layanan WCF REST.

5. Pembuatan Service dengan API Web cukup sederhana, Berbeda dengan Layanan WCF REST, pembuatan service menjadi cukup sulit.

6. Berdasarkan HTTP sehingga mudah untuk didefinisikan, mengekspos dan mengkonsumsi dengan cara RESTful.

7. Berdasarkan arsitektur RESTful yang ringan dan bagus untuk perangkat yang memiliki bandwidth terbatas seperti ponsel pintar.

• Manfaat menggunakan API

API diperlukan untuk membuat koneksi antar fungsi aplikasi untuk menangani data dari proses yang telah ditentukan.

1. Kemudahan integrasi: API dapat disematkan dengan semua jenis aplikasi perangkat lunak, sehingga dapat dengan mudah diintegrasikan dengan aplikasi dan fungsi antara situs web yang berbeda.

2. Kurangi upaya pengembangan perangkat lunak: Menggunakan API mengurangi upaya pengembangan, pengembang dapat menerapkan API Google Maps untuk memberikan lokasi toko yang tepat kepada pengunjung situs web. Dengan demikian, Anda tidak akan mengembangkan aplikasi pelacakan lokasi berbasis GPS dari awal. Sebagai gantinya, Anda menggunakan API dari aplikasi yang ada di situs web atau aplikasi web Anda. Pendekatan ini adalah cara yang lebih efisien dan hemat biaya untuk mencapai fungsionalitas yang diperlukan.

3. Keamanan: API menyediakan gerbang komunikasi yang aman untuk berbagai komponen aplikasi untuk berinteraksi dan bertukar data.

• Arsitektur API

1. RPC

RPC membantu komunikasi antara klien dan server dan bisa dilakukan dengan konsep yang simple.

 XML-RPC dan JSON-RPC

2. REST atau Representational State Transfer

Kelebihan dari REST pada arsitektur API adalah ketika mengembangkan aplikasi tidak membutuhkan coding. Bentuk data dari REST adalah JSON sehingga aplikasi akan lebih ringan.

3. SOAP

SOAP menggunakan data berupa XML sehingga bisa menyimpan data dalam bentuk dokumen.

• Definisi REST API

REST (REpresentational State Transfer) merupakan gaya arsitektural perangkat lunak yang di dalamnya mendefinisikan aturan-aturan untuk membuat web service. REST ini berbentuk JSON object data. Yang dapat mempermudah client untuk melakukan parsing data dan tergolong lebih ringan. 

Rest API (juga dikenal sebagai Restful API) adalah Application Programming Interface yang sesuai dengan batasan gaya arsitektur Rest dan memungkinkan interaksi dengan layanan web Restful. Rest adalah singkatan dari Representational State Transfer yang diciptakan oleh ilmuwan komputer Roy Fielding.

REST API sendiri merupakan salah satu arsitektur dari API. Lalu REST atau Representational State Transfer ini memiliki keunggulan dalam pemakaiannya karena kemudahannya. Kemudahan tersebut berupa adanya coding yang tidak terlalu panjang dan ribet. 

Kemudian data yang ada di dalam REST API ini dalam bentuk JSON (Javascript Object Notation) sehingga mobilitas data lebih cepat.  Biasanya juga data – data yang ada bisa dalam bentuk XML dan YAML. Dalam REST API ini memiliki ketergantungan pada bagian tertentu seperti pengkodean bahkan fungsi khusus. 

• Definisi RESTful API

RESTful API bersifat Stateless, yang artinya tidak adanya state dalam sebuah aplikasi. Sifat stateless membuat setiap request HTTP dilakukan secara terisolasi, server tidak menyimpan state apapun mengenai sesi dari client, setiap request dari client harus berisi semua informasi yang dibutuhkan server termasuk informasi otentikasi, dan stateless merupakan salah satu syarat untuk membuat RESTful API.

Jadi, dapat disimpulkan bahwa dalam membuat sebuah RESTful API terdapat beberapa syarat, yaitu sebagai berikut.

1. Menggunakan HTTP method yang benar (GET, PUT, POST, DELETE)

2. ENDPOINTS yang digunakan berupa kata benda

3. Bersifat stateless

4. Menggunakan REST secara benar

RESTful API sendiri merupakan penerapan dari Application Programming Interface (API). Kemudian di dalamnya memiliki beberapa komponen yang berjumlah 4 dan sangat penting. Komponen tersebut, yaitu :

1. URL Design 

Nantinya akan terdapat pengaksesan memakai protokol HTTP ( Hypertext Transfer Protocol). Kemudian pengembang aplikasi akan mudah mengerti karena terdapat nama dan struktur URL yang sangat baik. Penamaan dan struktur URL yang konsisten akan menghasilkan API yang baik dan mudah untuk dimengerti developer. URL API biasa disebut endpoint dalam pemanggilannya.

2. HTTP Verbs 

Dalam melakukan request terdapat beberapa metode yang digunakan agar nantinya server paham dengan permintaan client. 

3. HTTP Response Code 

HTTP Response Code adalah kode standarisasi dalam menginformasikan hasil request kepada client. Secara umum terdapat 3 kelompok yang biasa kita jumpai pada RESTful API yaitu :

• 2XX : adalah response code yang menampilkan bahwa request berhasil.

• 4XX : adalah response code yang menampilkan bahwa request mengalami kesalahan pada sisi client.

• 5XX : adalah response code yang menampilkan bahwa request mengalami kesalahan pada sisi server.

Setiap request yang dilakukan client akan menerima data response dari server, response tersebut biasanya berupa data XML ataupun JSON. Setelah mendapatkan data response tersebut barulah client bisa menggunakannya dengan cara memparsing data tersebut dan diolah sesuai kebutuhan.

• Definis HTTP Method

Hypertext Transfer Protocol adalah sebuah jalan atau cara komunikasi dapat terjalin antara client dengan server.Dalam HTTP Method REST yang sering digunakan atara lain:

GET : Untuk metode yang pertama yaitu GET. Metode ini termasuk yang paling mudah dan tidak ribet. Nantinya GET akan melakukan tugasnya dalam mendapatkan data atau informasi yang ada. Sehingga sangat perlu adanya metode ini sebagai kunci keberhasilan dalam setiap prosesnya nanti. 

POST : Untuk metode selanjutnya yaitu POST. Merupakan metode HTTP yang nantinya berfungsi dalam membuat data baru. Kemudian data tersebut dimasukan ke dalam body saat proses request. 

PUT : Berikutnya metode HTTP yaitu PUT. Nantinya metode ini akan berfungsi dalam melakukan pembaruan data resource. Melakukan pembaruan ini sangat penting agar proses – proses yang sedang berlangsung bisa terselesaikan dengan baik. 

DELETE : Metode berikutnya yaitu DELETE yang nantinya akan berfungsi dalam menghapus data – data tertentu dalam resource. Mudahnya yaitu pada metode ini akan menghapus atau menghilangkan beberapa sumber daya tertentu di URL tersebut. 

PATCH : Salah satu metode ini hampir sama dengan PUT yang nantinya berfungsi dalam pembaruan data yang sudah ada. Namun terdapat sedikit perbedaan yaitu PATCH hanya melakukan pembaruan beberapa field dalam sebuah record dan tidak semua field seperti PUT.

OPTIONS : Metode ini nantinya akan berfungsi sebagai cara untuk mendapatkan operasi yang didukung resource dari server. 

• Cara REST APIs bekerja

API secara eksplisit memanfaatkan metodologi HTTP yang ditentukan oleh protokol RFC 2616. Permintaan ke API bisa menggunakan GET untuk mengambil sumber daya, PUT untuk mengubah status atau memperbarui sumber daya, yang dapat berupa objek, file, atau blok, POST untuk membuat sumber daya itu, dan DELETE untuk menghapusnya.

API dapat dikatakan “RESTful” jika memiliki fitur berikut :

Client – server : Client menangani front end dan server menangani back end dan keduanya dapat diganti secara independen satu sama lain.

Stateless : Tidak ada data klien yang disimpan di server ketika ada permintaan dan status sesi disimpan di klien.

Cacheable : Klien dapat men-cache respon (seperti browser yang men-cache elemen statis halaman web) untuk meningkatkan kinerja.

• Perbedaan antara API, REST API, dan RESTful API

API adalah sebuah software yang mengintegrasikan antara aplikasi yang kita buat dengan aplikasi yang lain. Tujuan pembuatannya yaitu untuk saling berbagi data antar aplikasi yang sudah diintegrasikan tersebut.

Sedangkan REST API merupakan salah satu dari desain arsitektur yang terdapat di dalam API itu sendiri. Dan cara kerja dari RESTful API yaitu REST client akan Melakukan akses pada data/resource pada REST server dimana masing-masing resource. Atau data/resource tersebut akan dibedakan oleh sebuah global ID atau URIs (Universal Resource Identifiers).

Jadi, Nantinya data yang diberikan oleh REST server itu bisa berupa format text, JSON atau XML. Dan saat ini format yang paling populer dan paling banyak digunakan adalah format JSON.

Selain materi di atas, silahkan teman-teman wajib juga mempelajari referensi berikut untuk lebih paham mengenai API dan Rest API.

• https://makinrajin.com/blog/rest-api-adalah/

• https://medium.com/jagoanhosting/perbedaan-antara-api-rest-api-dan-restful-api-6a66d655a6c2

• https://www.mas-software.com/blog/api-adalah-jenis-arsitektur#2-fungsi-api