Enun Solutions

Interaksi Manusia dan Komputer (IMK) - Latihan Pertemuan 3

2021-04-20T20:54:00.001+07:00

Latihan Pertemuan 3

1. Kombinasi warna terbaik untuk latar belakang warna merah adalah…
a. Biru, Hitam, Hijau

b. Kuning, putih, hitam

c. Putih, biru, cyam

   d. Merah, kuning, biru

2. Echoic pada memori penyaring manusia digunakan untuk menerima rangsangan berupa…

   a. Sentuhan
   b. Penglihatan
   c. Suara
   d. Perasa

3. Kecepatan kinerja yang tinggi, tingkat kesalahan yang rendah dan kepuasan yang tingggi dapat dihasilkan jika :

a. Pemakai masih pemula sehingga tidak keberatan

menunggu waktu yang lama.
b. Selalu ada hiburan yang menarik perhatuan pada setiap

layer.

c. Ada umpan balik yang jelas tentang kemajuan kearah

solusi.

d. Pemakai sabar dan berlatar belakang budaya yang

cenderung lambat.

4. Sehubungan dengan motivasi bagi faktor-faktor manusia dalam perancangan, manakah dari pernyataan-pernyatan berikut yang harus diperhatikan oleh perusahaan yang mengembangkan pengendali lalu lintas udara :
a. Biaya perlu ditekan agar rendah, meski kehandalan

sedikti dikorbankan.
b. Waktu pelatihan yang lama tidak menjadi masalah asal

kinerja pemakai cepat dan bebas kesalahan.

c. Perancangan system sulit, perancang harus membuat

system transparan sehingga pemakai mudah terserap

dalam bidang-bidang tugasnya.

d. Kecepatan kinerja penting tetapi kesalahan operator

      ditoleransi.

5. Dari jenis pekerjaan mana yang memberikan beban paling besar pada tangan, pergelangan tangan, jari jemari dan lengan?
   a. Pemasukan data
   b. Pekerjaan interaktif
   c. Akuisisi data
   d. Pengolahan kata.

6. Dari jenis pekerjaan mana yang memberikan beban paling besar pada kognitif, persepsi yang tinggi serta beban otot yang rendah?
   a. Pemasukan data
   b. Pekerjaan interaktif
   c. Akuisisi data
   d. Pengolahan kata

7. Dalam perancangan antarmuka pemakai, apa yang dapat kita lakukan untuk mengakomodasi expert frequent user?
   a. Meningkatkan kepercayaan diri dengan memudahkan

pemakai dengan melakukan task sederhana.
b. Sering memberikan pertanyaan dan pesan-pesan berarti

seperti “are you sure you want exit this program?”
c. Perlu melindungi pemakai dari kemungkinan kesalahan

karena coba-coba menjelajah sendiri.

d. Menyediakan shortcuts, singkatan-singkatan, makro agar

tugas dapat diselesaikan dengan lebih cepat.

Soal diatas mengandung jawaban yang kalimat berwarna merah, Jawaban di atas kami tidak bertanggung jawab benar atau tidaknya. Terimakasih sudah berkunjung.

Jumlah Kasus Virus Corona di Indonesia Jadi 14.749 per 12 Mei 2020, Tambah 484

2020-05-13T08:10:00.000+07:00

Kasus virus corona (Covid-19) di Indonesia kembali bertambah pada Selasa (12/5/2020).

Hingga Selasa (12/5/2020) sore, terdapat penambahan sebanyak 484 orang.

Sehingga total kasus virus corona di Indonesia menjadi 14.749 orang, seperti dilansir TribunTernate.com dari KompasTV.

Sejauh ini, pemerintah mengumumkan penambahan pasien sembuh ada 182, total ada 3.063 orang dinyatakan sembuh.

Sedangkan untuk pasien yang meninggal dunia ada 16 orang hingga sore ini total menjadi 1.007 orang.

Updata Corona Global per Selasa (12/5/2020) Siang

Per Selasa (12/5/2020) pukul 12:32 WIB hari ini, situs gisanddata.maps.arcgis.com mencatat total kasus Covid-19 terkonfirmasi di seluruh dunia ada 4.177.584 kasus.

Sejauh ini, tercatat sudah ada sepuluh negara yang memiliki jumlah kasus Covid-19 terkonfirmasi di angka lebih dari 100.000, 200.000, bahkan melebihi angka 1.000.000.

Sepuluh negara tersebut juga jumlah kasus Covid-19 terkonfirmasi-nya melebihi China.

Belanda Temukan Antibodi yang Mampu Tangkal Virus Corona!

2020-05-10T16:57:00.001+07:00

News, Enun Solutions - Peneliti Utrecht University, Erasmus Medical Centre Belanda dan Harbour BioMed dilaporkan telah menemukan antibodi monoclonal yang memblokir infeksi virus corona baru penyebab Covid-19.

Antibodi yang bernama 47D11 ini akan menyerang protein mahkota di tubuh Covid-19. Mahkota berduri inilah yang menempel pada sel manusia, kemudian memasukkan materi genetik guna berkembang biak di tubuh inangnya.

Antibodi ini mengikat pada enzim ACE2 yang diidentifikasi sebagai reseptor Covid-19 ketika menyerang tubuh manusia. Antibodi ini pun sudah berhasil menetralkan Covid-19 dalam percobaan pada tikus.

"Penelitian ini dibangun berdasarkan penemuan yang dilakukan oleh tim kami di masa lalu untuk mengangkat virus SARS yang muncul pada 2002-2003," ujar Profesor Berend-Jan Bosch dari Utrecht University yang memimpin penelitian ini, seperti dilansir dari DailyMail, Jumat (8/5/2020).

Penemuan ini telah dipublikasikan dalam Nature Communications. Penelitian ini masih perlu penelitian lebih lanjut untuk menemukan efektivitas dan dosis yang cocok untuk manusia.

"Masih banyak pekerjaan yang diperlukan untuk menilai apakah antibodi ini dapat melindungi atau mengurangi keparahan penyakit corona pada manusia," ujar Jingsong Wang, pendiri dan CEO Harbour BioMed.

Antibodi Monoclonal telah merevolusi pengobatan kanker dengan obat-obatan seperti Keytruda dari Merck & Co dan Herceptin dari Roche Holding AG

Source : https://www.cnbcindonesia.com/

Belajar Babel Loader Javascript ES6

2020-05-03T21:23:00.000+07:00

Apa itu babel atau babel.js? Babel merupakan sebuah transpiler yang bertugas untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks yang dapat didukung penuh oleh seluruh browser.

JavaScript merupakan bahasa pemrograman yang berkembang sangat pesat. Komunitasnya besar, dan tiap tahun selalu terdapat versi yang baru.

Namun perkembangan yang pesat tadi ternyata membutuhkan waktu yang lama untuk diadaptasi oleh browser atau Node.js. Lalu jika kita ingin mencoba sintaks terbaru di JavaScript apakah kita perlu menunggu hingga seluruh browser berhasil mengadaptasi pembaharuan tersebut? Tentu tidak!

Dengan babel Anda dapat menuliskan sintaks JavaScript versi terbaru tanpa khawatir memikirkan dukungan pada browser. Karena babel akan mengubah sintaks yang kita tuliskan menjadi kode yang dapat diterima browser.

Jika Anda penasaran bagaimana cara babel bekerja, babel menyediakan sebuah playground yang dapat kita manfaatkan untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks lama. Untuk mencobanya, silakan Anda buka tautan berikut: https://babeljs.io/repl.

Pada playground tersebut kita juga dapat memilih preset yang kita inginkan. Secara default preset akan mengarah ES2015 (ES6).

Anda sudah tahu sekilas mengenai babel. Nah pada webpack kita juga dapat menggunakan babel dalam bentuk loader.

Walaupun webpack secara standarnya dapat memproses berkas JavaScript tanpa perlu bantuan loader, namun proses tersebut tidak mengubah sintaks yang kita tuliskan.

Artinya jika kita menuliskan sintaks JavaScript modern, maka kita akan menemukannya juga pada berkas bundle.js.

Walaupun saat ini Google Chrome dan Mozilla Firefox sudah mendukung penulisan sintaks ES6, namun setidaknya kita perlu sedikit peduli terhadap dukungan browser lama seperti Internet Explorer atau browser versi lama lainnya.

Untuk menggunakan babel pada webpack sebagai loader, kita perlu memasang tiga package menggunakan npm pada devDependencies.

Yang pertama package @babel/core, yang kedua babel-loader, dan yang ketiga @babel/preset-env.


npm install @babel/core babel-loader @babel/preset-env --save-dev

Package @babel/core merupakan package inti yang harus dipasang ketika kita hendak menggunakan babel, baik pada webpack maupun tools yang lain.

Package babel-loader merupakan package yang diperlukan untuk menggunakan babel sebagai loader pada webpack.

Yang terakhir package @babel/preset-env merupakan package preset yang akan kita gunakan untuk membantu babel-loader dalam melakukan tugasnya.

@babel/preset-env merupakan preset cerdas yang memungkinkan kita menggunakan sintaks JavaScript terbaru tanpa menetapkan secara spesifik sintaks JavaScript versi apa yang kita gunakan.

Berkas package.json akan tampak seperti ini setelah memasang ketiga package tersebut:


{

  "name": "webclock",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.4.1",

    "moment": "^2.24.0"

  },

  "devDependencies": {

    "@babel/core": "^7.8.4",

    "@babel/preset-env": "^7.8.4",

    "babel-loader": "^8.0.6",

    "css-loader": "^3.4.2",

    "style-loader": "^1.1.3",

    "webpack": "^4.41.6",

    "webpack-cli": "^3.3.11"

  }

}

Setelah berhasil memasang ketiga package tersebut, langkah selanjutnya kita dapat gunakan babel-loader dan preset-nya pada webpack configuration.


const path = require("path");

 

module.exports = {

    entry: "./src/index.js",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js"

    },

    mode: "production",

    module: {

        rules: [

            /* style and css loader */

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            },

            /* babel loader */

            {

                test: /\.js$/,

                exclude: "/node_modules/",

                use: [

                    {

                        loader: "babel-loader",

                        options: {

                            presets: ["@babel/preset-env"]

                        }

                    }

                ]

            }

        ]

    }

}

Ketika menerapkan rule untuk berkas .js, jangan lupa untuk menetapkan properti exclude dengan nilai “/node_modules/”.

Apa artinya? Dengan menetapkan properti exclude itu berarti kita mengecualikan webpack untuk memproses berkas .js yang berada pada folder “node_modules”.

Hal ini dapat meminimalisir proses yang tidak diperlukan, sehingga mempercepat proses build pada proyek kita.

Lalu pada penerapan babel-loader juga kita menggunakan properti options dengan menetapkan properti presets di dalamnya. Pada properti presets kita tetapkan preset (dalam bentuk array literas) yang sudah kita pasang menggunakan npm, yaitu @babel/preset-env.

Setelah menggunakan babel loader pada webpack configuration, mari kita coba build dan buka kembali berkas bundle.js.

Maka kode yang kita tuliskan dalam ES6 akan diubah dalam sintaks yang dapat diterima oleh seluruh browser.

Bahkan pada berkas bundle tersebut dipastikan sudah tidak terdapat lagi sintaks yang dituliskan menggunakan ES6.

Namun walaupun sintaksnya sudah diubah, proyek akan tetap berjalan normal seperti biasanya.

Contoh:

https://github.com/dicodingacademy/a163-bfwd-labs/tree/207-webclock-webpack-using-loader

Contoh Menggunakan API Dan Fetch di dalam Web Sederhana

2020-04-29T19:42:00.000+07:00

Apakah Anda sudah berhasil menerapkan Fetch dalam menampilkan data dari API TheSportDB? Jika belum, yuk kita lakukan bersama-sama!

Pada dokumentasi API menyebutkan bahwa, untuk mendapatkan daftar klub olahraga kita dapat menggunakan target url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal

Sebelum menuliskan langsung pada proyek dengan fetch, biasakan ketika hendak mengkonsumsi API biasakan untuk mencobanya menggunakan aplikasi Postman terlebih dahulu. Jika target url tersebut diakses melalui Postman dengan GET Request, maka akan menghasilkan response dengan struktur JSON yang tampak pada tab Body.

Pada response JSON yang dihasilkan menampung satu key dengan nama teams yang memiliki value berupa sebuah array. Di dalam array tersebut menampilkan banyak data terkait klub olahraga yang memiliki nama Arsenal. Kita dapat memanfaatkan key strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa inggris.

Lantas untuk mencari data team berdasarkan kata kunci lain kita dapat mengubah kata “Arsenal” menggunakan kata kunci yang kita inginkan, misalnya “Barcelona”. Sehingga melakukan request terhadap url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Barcelona akan menghasilkan response JSON dengan informasi klub olahraga terkait “Barcelona”.

Cukup mudah bukan untuk menggunakan API tersebut?

Nah, Setelah memahami cara penggunaan API-nya, sekarang mari kita mulai tuliskan fungsi fetch pada proyek Club Finder. Langkah awal buka kembali proyek Club Finder pada text editor yang Anda gunakan.

Kemudian buka berkas data-source.js pada src -> script -> data -> data-source.js. Kita refactor fungsi searchClub dengan menghapus seluruh logika yang ada di dalamnya, kemudian tuliskan fungsi fetch seperti ini:


class DataSource {

   static searchClub(keyword) {

       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

   }

}

 

export default DataSource;

Seperti yang sudah kita ketahui, fungsi fetch() akan mengembalikan promise resolve jika request berhasil dilakukan. Maka untuk menangani respon dari request yang dibuat, kita gunakan .then() yang di dalamnya berisi variabel response sebagai response object yang didapat.


class DataSource {

   static searchClub(keyword) {

       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

       .then(response => {

          

       })

   }

}

 

export default DataSource;

Kemudian di dalam blok then tersebut, kita ubah nilai response menjadi JSON dengan memanggil method response.json().


class DataSource {

   static searchClub(keyword) {

       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

       .then(response => {

           return response.json();

       })

   }

}

 

export default DataSource;

Karena method response.json() juga mengembalikan nilai promise, maka untuk mendapatkan nilai yang dibawa oleh resolve kita perlu menambahkan .then lainnya (chaining promise). Di dalam .then yang kedua ini, berikan parameter dengan nama responseJson (penamaan variabel tidaklah baku, namun gunakan penamaan yang menunjukkan arti dari nilai variabelnya).


class DataSource {

   static searchClub(keyword) {

       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

       .then(response => {

           return response.json();

       })

       .then(responseJson => {

          

       })

   }

}

 

export default DataSource;

responseJson merupakan nilai JSON yang dihasilkan dari perubahan object response dalam bentuk JSON melalui method .json() tadi.

Di dalam block .then yang kedua, kita kembalikan (return) dengan nilai promise resolve dengan membawa nilai jsonResponse.teams jika nilai array tidak null. Namun jika teams bernilai null, maka kembalikan dengan nilai promise reject dengan membawa nilai “${keyword} is not found”.


class DataSource {

   static searchClub(keyword) {

       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

       .then(response => {

           return response.json();

       })

       .then(responseJson => {

           if(responseJson.teams) {

               return Promise.resolve(responseJson.teams);

           } else {

               return Promise.reject(`${keyword} is not found`);

           }

       })

   }

}

 

export default DataSource;

Simpan perubahan tersebut dan jalankan aplikasi dalam mode development menggunakan perintah:


npm run start-dev

Setelah proyek terbuka, lakukan pencarian dengan keyword apapun yang Anda mau, di sini kita contohkan dengan “Barcelona”.

Yah, data yang ditampilkan undefined. Mengapa bisa demikian? Ini disebabkan karena kita belum menyesuaikan key berdasarkan response yang didapat dari public API. Kita harus menggunakan key strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa inggris.

Ketiga key tersebut kita tetapkan pada berkas src -> script -> component -> club-item.js. Lebih tepatnya pada fungsi render.


render() {

       this.shadowDOM.innerHTML = `

           <style>

                ……..

           </style>

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

Kita ubah properti this._club.fanArt menjadi this._club.strTeamBadge, this._club.name menjadi this._club.strTeam, dan this._club.description menjadi this._club.strDescriptionEN.

Sehingga fungsi render akan menjadi seperti ini:


render() {

       this.shadowDOM.innerHTML = `

           <style>

               * {

                   margin: 0;

                   padding: 0;

                   box-sizing: border-box;

               }

               :host {

                   display: block;

                   margin-bottom: 18px;

                   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

                   border-radius: 10px;

                   overflow: hidden;

               }

              

               .fan-art-club {

                   width: 100%;

                   max-height: 300px;

                   object-fit: cover;

                   object-position: center;

               }

              

               .club-info {

                   padding: 24px;

               }

              

               .club-info > h2 {

                   font-weight: lighter;

               }

              

               .club-info > p {

                   margin-top: 10px;

                   overflow: hidden;

                   text-overflow: ellipsis;

                   display: -webkit-box;

                   -webkit-box-orient: vertical;

                   -webkit-line-clamp: 10; /* number of lines to show */

               }

           </style>

           <img class="fan-art-club" src="${this._club.strTeamBadge}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.strTeam}</h2>

               <p>${this._club.strDescriptionEN}</p>

           </div>`;

   }

Simpan kembali perubahan kode yang dituliskan kemudian lakukan pencarian kembali pada aplikasi Club Finder. Seharusnya sekarang aplikasi sudah bisa menampilkan data dengan baik.

Voila! Anda sudah berhasil menerapkan Fetch pada proyek Club Finder.

Contoh Hasil Akhirnya bisa di klik disini

Contoh Ajax Menggunakan Fetch

2020-04-29T18:39:00.000+07:00

Seperti yang sudah kita ketahui, fetch memanfaatkan promise dalam melakukan tugasnya, sehingga network request yang dibuat menggunakan fetch akan selalu berjalan asynchronous.

Penggunaan dasar dari fetch tampak seperti ini:

Network request dilakukan pada saat fungsi fetch() tereksekusi.


fetch("https://web-server-book-dicoding.appspot.com/list")

Jika request berhasil diproses oleh server, fungsi fetch() akan mengembalikan promise resolve dan membawa response object di dalamnya. Namun nilai response yang dibawa resolve belum sebagai data JSON yang kita butuhkan, melainkan informasi mengenai response itu sendiri, seperti status code, target url, headers, dsb. Maka dari itu, untuk mendapatkan data JSON yang dibutuhkan, kita perlu mengubah response object ke dalam bentuk JSON dengan memanggil method .json().


fetch("https://web-server-book-dicoding.appspot.com/list")

 .then(response => {

   return response.json();

 })

Method .json() juga mengembalikan nilai Promise, sehingga kita membutuhkan chaining promise dengan menambahkan .then() untuk mendapatkan data JSON yang sesungguhnya.


fetch("https://web-server-book-dicoding.appspot.com/list")

 .then(response => {

   return response.json();

 })

 .then(responseJson => {

   console.log(responseJson);

 })

Lalu jangan lupa juga untuk menambahkan block catch() pada akhir chaining promise untuk menangani apabila rejected promise terjadi baik karena fungsi fetch() atau json().


fetch("https://web-server-book-dicoding.appspot.com/list")

 .then(response => {

   return response.json();

 })

 .then(responseJson => {

   console.log(responseJson);

 })

 .catch(error => {

   console.log(error);

 });

Karena fetch memanfaatkan promise, kita bisa memanfaatkan async/await jika Anda lebih suka dengan gaya penulisan synchronous.

Promise


fetch("https://web-server-book-dicoding.appspot.com/list")

 .then(response => {

   return response.json();

 })

 .then(responseJson => {

   console.log(responseJson);

 })

 .catch(error => {

   console.log(error);

 });

async/await


async function getBooks() {

 try {

   const response = await fetch("https://web-server-book-dicoding.appspot.com/list");

   const responseJson = await response.json();

   console.log(responseJson);

 } catch (error) {

   console.log(error);

 }

}

 

getBooks();

Advanced Fetch Usage

Fungsi fetch() dapat menerima dua buah parameter di dalamnya. Selain menetapkan target URL, kita juga dapat memberikan options untuk menetapkan method, header, body, dsb pada request yang akan dijalankan. Namun penerapan options ini bersifat pilihan. Tidak wajib.

Penggunaan fetch() tanpa menerapkan options akan membuat GET request sederhana yang ditujukkan pada targetUrl. Hal tersebut sama seperti yang sudah kita lakukan sebelumnya. Lantas kapan kita perlu menerapkan options pada penggunaan fetch? Berikut beberapa kasus saat kita memerlukannya.

Changing Request Method

Untuk membuat POST request ataupun method request lainnya kita perlu menerapkan options dengan properti method di dalamnya.


fetch("https://web-server-book-dicoding.appspot.com/add", {

 method: "POST"

})

Nilai dari properti method dituliskan dalam bentuk string, contohnya “POST”, “PUT”, “DELETE”, dsb. Nilai default dari properti ini adalah “GET”, sehingga jika kita membuat GET Request, kita tidak perlu menetapkan nilai method secara eksplisit.

Set Header Property

Untuk menambahkan request header dengan fetch kita gunakan properti headers pada options. Contohnya, untuk menambahkan properti Content-Type dengan nilai application/json pada headers kita dapat melakukannya dengan seperti ini:


fetch("https://web-server-book-dicoding.appspot.com/add", {

 method: "POST",

 headers: {

   "Content-Type": "application/json"

 }

})

Tentu kita juga dapat menetapkan lebih dari satu properti pada headers. Contohnya kita tambahkan lagi properti X-Auth-Token dengan nilai 12345.


fetch("https://web-server-book-dicoding.appspot.com/add", {

 method: "POST",

 headers: {

   "Content-Type": "application/json",

   "X-Auth-Token": "12345"

 }

})

Set Data to Body Request

Untuk mengirimkan data pada body request kita gunakan properti body pada options, contohnya seperti ini:


fetch("https://web-server-book-dicoding.appspot.com/add", {

 method: "POST",

 headers: {

   "Content-Type": "application/json",

   "X-Auth-Token": "12345"

 },

 body: JSON.stringify({

   id: 10,

   title: "Edensor",

   author: "Andrea Hirata"

 })

})

Sama seperti XHR, data yang dikirimkan melalui body request perlu diubah menjadi JSON String terlebih dahulu.


body: JSON.stringify({

   id: 10,

   title: "Edensor",

   author: "Andrea Hirata"

})

Contoh kode di atas dapat Anda temukan pada tautan berikut https://repl.it/@dicodingacademy/163-06-AJAX-Fetch-Advanced?lite=true

Anda bisa coba lakukan POST Request menggunakan Fetch dengan menjalankan potongan kode tersebut.

Contoh Dasar Ajax Menggunakan XMLHttpRequest

2020-04-29T02:58:00.000+07:00

XMLHttpRequest atau XHR merupakan objek yang tersedia pada browser yang digunakan untuk membuat HTTP Requests menggunakan JavaScript. Karena namanya kita mungkin beranggapan bahwa XHR hanya mendukung format data XML, tetapi nyatanya saat ini XHR dapat digunakan oleh banyak format, bukan hanya XML.

Walaupun sekarang terdapat cara yang lebih modern yaitu menggunakan fetch, namun masih ada kok beberapa developer yang menggunakan XHR dalam melakukan HTTP Request. Alasannya karena alasan dukungan browser tua atau suatu fitur yang tidak bisa fetch lakukan seperti tracking upload progress.

Basic Usage

XMLHttpRequest dapat berjalan secara synchronous maupun asynchronous. Namun kebanyakan kasus HTTP Request sebaiknya asynchronous.

Contoh penggunaan dasar dari XMLHttpRequest adalah seperti ini:

Langkah awal untuk menggunakan XMLHttpRequest adalah dengan membuat instance baru dari objek XMLHttpRequest seperti ini:


const xhr = new XMLHttpRequest();

Lalu pada instance dari objek tersebut (xhr) kita tentukan callback function ketika request berhasil (onload) dan ketika request gagal (onerror).


xhr.onload = function () {

    console.log(this.responseText);

}

xhr.onerror = function () {

    console.log("Ups something error")

}

Di dalam callback function tersebut, nilai dari this merupakan XHR objek. Sehingga this.responseText akan memiliki nilai response (dalam bentuk text) dari server. Ingat karena pada callback function tersebut nilai this merupakan XHR objek, kita tidak dapat menggunakan gaya arrow function dalam menuliskan callback function-nya.


xhr.onload =  () => {

    // akan menyebabkan error, karena arrow function tidak memiliki this.

    console.log(this.responseText);

}

Selanjutnya kita tentukan HTTP Method dan URL yang dituju dengan menggunakan method .open()


xhr.open("GET", "https://api-to-call.com/endpoint");

Nah, langkah akhir adalah mengirimkan request yang sudah kita konfigurasi di atas menggunakan method .send().


xhr.send();

Sehingga seluruh kode dalam penggunaan dasar dari XMLHttpRequest dengan contoh target url berikut https://web-server-book-dicoding.appspot.com/list adalah seperti ini:


const xhr = new XMLHttpRequest();

 

xhr.onload = function () {

 console.log(this.responseText)

}

xhr.onerror = function () {

 console.log("Ups something error")

}

 

xhr.open("GET", "https://web-server-book-dicoding.appspot.com/list");

xhr.send();

Coba Anda copy dan paste kode di atas dan jalankan pada console devTools. Jika request berhasil, Anda akan mendapatkan data dalam bentuk JSON String. Data tersebut bisa Anda olah menjadi JavaScript objek dengan mengubahnya menggunakan method JSON.parse().


JSON.parse(this.responseText)

Anda juga bisa mencoba menjalankan potongan kode di atas pada repl.it melalui tautan berikut: https://repl.it/@dicodingacademy/163-06-AJAX-XHR-basic?lite=true

Header and Body Request using XHR

Sebelumnya kita sudah belajar bagaimana cara menggunakan dasar XMLHttpRequest dalam membuat sebuah GET Request. Lalu bagaimana jika kita ingin menggunakan method POST dan menetapkan properti pada Header ? Lalu bagaimana cara mengirimkan data pada body HTTP Request? Yuk kita bahas permasalahan tersebut satu per satu.

Set Header Property

Dalam menggunakan Web API tidak selamanya kita hanya menggunakan GET request saja, terutama ketika request yang kita inginkan bertujuan mengubah atau menambahkan data. Web API biasanya meminta kita untuk melakukannya dengan method POST atau PUT. Tak jarang juga Web API meminta kita untuk menetapkan properti tertentu pada request header untuk menunjukkan credential yang kita miliki. Request tersebut sudah pernah kita coba ya menggunakan Postman. Tapi bagaimana ya caranya jika menggunakan XHR?

Untuk menetapkan properti pada request header, Anda dapat gunakan method setRequestHeader() pada instance XMLHttpRequest setelah menetapkan method .open(). Method tersebut menerima dua parameter. Parameter pertama merupakan nama properti dan parameter yang kedua adalah nilai yang akan ditetapkan pada properti tersebut. Sehingga untuk menetapkan properti Content-Type dengan nilai application/json pada request kita dapat melakukannya dengan cara:


const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

Kita dapat menetapkan properti pada request header sebanyak yang kita perlukan


const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("X-Auth-Token", "12345")

Cukup mudah bukan?

Set Data to Body Request

Lalu untuk menetapkan data pada body request, lakukanlah pada method .send() dari instance XMLHttpRequest. Contohnya untuk mengirimkan data JSON String pada body request, begini caranya:


const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("X-Auth-Token", "12345")

 

const book = {

 id: 10,

 title: "Edensor",

 author: "Andrea Hirata"

}

 

xhr.send(JSON.stringify(book));

Sebenarnya tidak hanya JSON format yang dapat dikirimkan melalui body, pada situs MDN menyebutkan bahwa kita dapat mengirimkan dokumen yang sudah ter-serialized sebelum dikirim, atau data lain yang terdaftar pada Fetch spec seperti Blob, BufferSource, FormData, URLSeachParam, ReadableStream atau USVString object.

Contoh kode di atas dapat Anda temukan pada tautan berikut https://repl.it/@dicodingacademy/163-06-AJAX-XHR-Header-and-Body?lite=true. Anda bisa coba lakukan POST Request dengan menjalankan potongan kode tersebut

Hasil Akhir Cek :
https://github.com/dicodingacademy/a163-bfwd-labs/tree/302-dicoding-books-xhr

Apa Itu JSON?

2020-04-29T02:20:00.000+07:00

Setelah kita mengetahui apa itu Web API dan cara pengujiannya menggunakan Postman, sekarang saatnya kita mempelajari suatu format yang biasa digunakan dalam transaksi data menggunakan Web API, yaitu JSON.

Jauh pada materi sebelumnya, atau jika Anda sudah mengikuti kelas Belajar Dasar Pemrograman Web, tentunya Anda sudah mengenal dan menggunakan JSON bukan? Pada materi kali ini kita akan membahas JSON lebih detail lagi.

JSON sendiri adalah singkatan dari JavaScript Object Notation. JSON merupakan format yang sering digunakan dalam pertukaran data. Saat ini JSON banyak diandalkan karena formatnya berbasis teks dan relatif mudah dibaca.

Bukan hanya JavaScript, walaupun memiliki nama JavaScript Object Notation, format JSON ini dapat digunakan oleh hampir semua bahasa pemrograman yang ada. Jika Anda belajar fundamental dalam membangun aplikasi Android pada kelas Dicoding, baik menggunakan Kotlin ataupun Java, Anda akan berhadapan dengan JSON untuk transaksi datanya.

Lalu seperti apa sebenarnya rupa JSON ini? Struktur JSON dapat terbentuk dari 2 (dua) literal data, yakni objek dan array.


{

    "error": false,

    "message": "success",

    "books": [

        {

            "id": 1,

            "title": "Laskar Pelangi",

            "author": "Andrea Hirata"

        },

        {

            "id": 2,

            "title": "Filosofi Kopi",

            "author": "Dewi Lestari"

        },

        {

            "id": 3,

            "title": "Clean Code",

            "author": "Robert C Martin"

       }

   ]

}

Data yang merupakan objek pada JSON selalu diawali dengan tanda { (buka kurung kurawal) dan diakhiri dengan tanda tutup kurung kurawal } (tutup kurung kurawal). Sedangkan array pada JSON selalu diawali dengan tanda [ (buka kurung siku) dan diakhiri dengan tanda ] (tutup kurung siku).

Struktur dari JSON juga menggunakan format key: value untuk menampilkan datanya. Contoh di atas “error” merupakan key dan false merupakan value. Penulisan JSON hampir identik dengan JavaScript objek. Namun key pada JSON selalu dituliskan di dalam tanda “ “ (kutip dua).


{ "message": "success" }

Pada JSON value kita dapat menetapkan nilai dengan berbagai tipe data, di antaranya:

String
Number
Object
Array
Boolean
Null

Using JSON in JavaScript

Setelah mengenal rupa, struktur dan penulisan JSON, selanjutnya bagaimana cara menggunakan JSON pada JavaScript? Sama seperti menggunakan objek JavaScript biasa!


const data = {

 "error": false,

 "message": "success",

 "books": [

   {

     "id": 1,

     "title": "Laskar Pelangi",

     "author": "Andrea Hirata"

   },

   {

     "id": 2,

     "title": "Filosofi Kopi",

     "author": "Dewi Lestari"

   },

   {

     "id": 3,

     "title": "Clean Code",

     "author": "Robert C Martin"

   }

 ]

};

 

console.log(`Error? ${data.error}`);

console.log("Daftar Buku: ");

data.books.forEach((book, index) => {

 console.log(`${index + 1}. ${book.title} (${book.author})`);

})

 

/* output

Error? false

Daftar Buku:

1. Laskar Pelangi (Andrea Hirata)

2. Filosofi Kopi (Dewi Lestari)

3. Clean Code (Robert C Martin)

*/

Kita bisa mengakses data JSON objek menggunakan tanda titik setelah variabel yang menampungnya. Contoh cara mengakses data dengan key books seperti:


data.books

Namun jika key terdiri dari karakter yang tidak dapat digunakan dalam penamaan variabel seperti white space, dash, slash atau yang lainnya, datanya dapat kita askes melalui indexing seperti ini:


const data = {

  ....,

 "book list": [

  ......

 ]

};

 

data["book list"].forEach((book, index) => {

 console.log(`${index + 1}. ${book.title} (${book.author})`);

})

 

/* output

Daftar Buku:

1. Laskar Pelangi (Andrea Hirata)

2. Filosofi Kopi (Dewi Lestari)

3. Clean Code (Robert C Martin)

*/

Seperti yang sudah kita ketahui, JSON ini biasanya digunakan untuk transaksi data ke/dari web server. Ketika transaksi data berlangsung, data tersebut selalu dalam bentuk string.

Contoh JSON yang dihasilkan oleh Web Server
Nah untuk mengelola data JSON dalam bentuk string pada JavaScript, kita perlu melakukan parse dengan menggunakan global object JSON. Terdapat dua method penting dalam global object JSON, yang pertama parse() dan yang kedua stringify().

Method JSON.parse() digunakan untuk mengubah JSON dalam bentuk String menjadi objek JavaScript. Contohnya seperti ini:


const jsonString = `{

 "error": false,

 "message": "success",

 "books": [

   {

     "id": 1,

     "title": "Laskar Pelangi",

     "author": "Andrea Hirata"

   },

   {

     "id": 2,

     "title": "Filosofi Kopi",

     "author": "Dewi Lestari"

   },

   {

     "id": 3,

     "title": "Clean Code",

     "author": "Robert C Martin"

   }

 ]

}`;

 

const data = JSON.parse(jsonString);

 

data.books.forEach((book, index) => {

 console.log(`${index + 1}. ${book.title} (${book.author})`);

})

 

/* output

Daftar Buku:

1. Laskar Pelangi (Andrea Hirata)

2. Filosofi Kopi (Dewi Lestari)

3. Clean Code (Robert C Martin)

*/

Lalu method JSON.stringify() memiliki fungsi sebaliknya. Yaitu mengubah JavaScript objek dalam bentuk JSON string. Contohnya seperti ini:


const data = {

 error: false,

 message: "success",

 books: [

   {

     "id": 1,

     "title": "Laskar Pelangi",

     "author": "Andrea Hirata"

   },

   {

     "id": 2,

     "title": "Filosofi Kopi",

     "author": "Dewi Lestari"

   },

   {

     "id": 3,

     "title": "Clean Code",

     "author": "Robert C Martin"

   }

 ]

};

 

const jsonString = JSON.stringify(data);

console.log(jsonString);

 

/* output:

{"error":false,"message":"success","books":[{"id":1,"title":"Laskar Pelangi","author":"Andrea Hirata"},{"id":2,"title":"Filosofi Kopi","author":"Dewi Lestari"},{"id":3,"title":"Clean Code","author":"Robert C Martin"}]}

*/

Apa itu Web API?

2020-04-29T02:19:00.000+07:00

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.

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.

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 GET, POST, PUT, DELETE 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.

Setelah mengunduhnya, silakan Anda pasang aplikasi postman pada komputer. Saat selesai Anda bisa langsung membukanya.

Ketika pertama kali membuka aplikasi Postman, kita perlu login atau registrasi untuk memiliki akun. Setelah berhasil login, berikut tampilan pada halaman utamanya:

Untuk melakukan sebuah HTTP Request kita dapat memilih menu “create a request” yang tersedia pada halaman tersebut.

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

Setelah mengisikan request URLnya coba kita tekan tombol “Send”. Maka respon yang akan didapatkan adalah daftar buku dalam bentuk JSON.

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/.

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.

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

Apa Itu Webpack?

2020-04-29T01:00:00.000+07:00

What is Webpack?

Pada dasarnya webpack merupakan module bundler untuk aplikasi JavaScript modern. Ketika webpack dijalankan pada proyek kita, di belakang layar webpack akan mengobservasi module apa saja yang kita gunakan dan membuat modul-modul tersebut dibungkus menjadi satu berkas (atau lebih).

Ilustrasi diambil dari https://webpack.js.org/

Dengan menggunakan Webpack kita dapat leluasa menggunakan module yang saling bergantungan. Webpack akan menggabungkan seluruh module yang digunakan baik itu modul yang kita tuliskan sendiri atau module yang kita dapatkan melalui NPM menjadi static assets yang siap digunakan pada tahap produksi.

Webpack pertama kali dirilis pada tanggal 10 Maret 2012. Sebelum ada webpack sebenarnya sudah terdapat tools lain yang serupa seperti Browserify. Disamping sebagai module bundler, Browserify sejatinya memiliki tujuan sebagai tools yang dapat membawa node package apapun agar dapat berjalan pada browser (kita dapat melihat tujuan dari namanya “Browserify”).

Secara tidak langsung ia perlu berperan sebagai module bundler. Sebabnya, ketika menggunakan node package, tentu package tersebut terpisah dari kode yang kita tuliskan sendiri. Untuk menggabungkannya, Node.js menggunakan perintah require(). Dengan menggunakan browserify ini, perintah require() tersebut dapat kita gunakan pada browser (melalui transpiling).

Dari segi konsep, browserify dan webpack sangatlah berbeda. Namun kita dapat mengkategorikan keduanya sebagai module bundler. Kelebihan webpack dibandingkan dengan browserify yaitu webpack dapat memproses berkas/module lain diluar JavaScript seperti TypeScript, Sass tanpa bantuan task runner seperti Grunt atau Gulp.

Sekitar awal tahun 2014 hingga pertengahan tahun 2015 browserify ini populer digunakan oleh developer. Hingga pada akhir tahun 2015 webpack-lah yang menggantikan kepopulerannya. Saat ini webpack sudah menyentuh versi 4 dengan mengusung kemampuan zero configuration-nya.

Core Concepts

Untuk lebih memahami bagaimana webpack bekerja, ketahui dulu core concepts yang ada pada webpack.

Terdapat 5 (lima) konsep penting dalam webpack yang perlu kita ketahui sebelum menggunakan webpack itu sendiri. Dari 5 (lima) konsep tersebut kita tahu bagaimana perilaku dari webpack ketika ia dijalankan. Berikut penjelasan singkat dari kelima konsep tersebut:

Entry : Titik awal di mana webpack akan menganalisa berkas dan membentuk dependency graph.
Output : Berkas bundel yang dihasilkan dari berkas-berkas yang dianalisis webpack berdasarkan entry point.
Loaders : Transformation tools pada webpack, yang akan memproses setiap berkas selain JavaScript atau JSON yang kita impor menjadi format yang dapat digunakan ke tahap produksi.
Plugin : Digunakan untuk melakukan tugas seperti optimasi bundel, management aset dan sebagainya.
Mode : Kondisi yang digunakan webpack sebagai acuan optimasi apa saja yang harus diterapkan dalam melakukan tugasnya. Dalam mode kita dapat menetapkan nilai production, development ataupun none

Entry

Entry atau entry point merupakan modul pertama yang akan dianalisa oleh webpack ketika ia dijalankan. Melalui entry point inilah webpack akan membentuk dependency graph. Webpack akan mencari tahu modul lain yang digunakan pada entry point dan menggabungkannya menjadi satu static assets.

Pada webpack 4 standarnya nilai entry point akan ditempatkan pada ./src/index.js. Namun kita dapat menetapkan lokasi yang berbeda dengan mengatur properti entry pada berkas webpack configuration (webpack.config.js). Contohnya:


module.exports = {

  entry: './path/to/my/entry/file.js'

};

Kode di atas merupakan cara cepat dalam penulisan properti entry. Sebenarnya entry dapat berupa objek seperti ini:


module.exports = {

  entry: {

    main: './path/to/my/entry/file.js'

  }

};

Kita bisa memanfaatkan objek sebagai nilai entry ketika terdapat banyak entry point yang ingin kita tetapkan.


module.exports = {

  entry: {

    app: './src/app.js',

    adminApp: './src/adminApp.js'

  }

}

Output

Output merupakan salah satu properti yang terdapat pada webpack configuration. Properti ini berfungsi untuk memberitahu webpack di mana dan bagaimana lokasi static assets yang telah dibundel harus disimpan dan diberi nama. Standarnya lokasi penyimpanannya berada pada dist -> main.js. Lokasi dist merupakan lokasi standar untuk menyimpan berkas yang dihasilkan oleh webpack.

Kita dapat mengkonfigurasi bagian output ini melalui properti output pada webpack.config.js seperti contoh berikut ini:


const path = require('path');

 

module.exports = {

  entry: './path/to/my/entry/file.js',

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'my-first-webpack.bundle.js'

  }

};

Pada contoh di atas, kita menggunakan output.filename dan output.path properties untuk memberitahu webpack penamaan dan lokasi static assets yang sudah dibundel. Pada contoh di atas juga kita dapat melihat modul path yang diimpor menggunakan Node.js module. Modul tersebut merupakan modul standar pada Node.js yang digunakan untuk memanipulasi lokasi berkas. Untuk memahami lebih dalam mengenai module path silakan cek https://nodejs.org/api/path.html

Jika kita menetapkan lebih dari satu entry point, kita perlu menggunakan substitution untuk memastikan berkas yang dihasilkan webpack memiliki nama unik.


module.exports = {

  entry: {

    app: './src/app.js',

    search: './src/search.js'

  },

  output: {

    filename: '[name].js',

    path: __dirname + '/dist'

  }

};

 

// webpack akan menghasilkan: ./dist/app.js, ./dist/search.js

Properti output memiliki banyak fitur dalam proses konfigurasinya. Jika Anda ingin belajar lebih dalam seputar penggunaannya, silakan cek dokumentasi webpack berikut: https://webpack.js.org/configuration/output/

Loaders

Dalam melaksanakan tugas, sejatinya Webpack hanya mengenali berkas JavaScript dan JSON. Namun melalui loaders webpack dapat memproses berkas berformat lain seperti css, sass, pug, jsx atau yang lainnya. Loaders merupakan sebuah transformation tools pada webpack yang akan memproses setiap berkas selain JavaScript atau JSON yang kita impor menjadi format yang dapat digunakan ke tahap produksi.

Jika pada build tools lain seperti Gulp atau Grunt, loaders ini seperti “task”. Task ini sangat membantu dalam menangani proses front-end building. Loader dapat mengubah berkas bahasa pemrograman lain seperti TypeScript ke JavaScript. Yang paling spesial dari loader ini kita dapat melakukan import berkas .css langsung pada entry point layaknya berkas JavaScript pada dependency graph.

Kemampuan impor pada modul apapun (contohnya .css) merupakan fitur spesifik dari webpack yang mungkin tak akan kita jumpai pada module bundler atau task runner lain. Alhasil, kita dapat lebih leluasa lagi alias tak terbatas dengan tipe berkas dalam menggunakan module pada webpack.

Untuk menetapkan loaders kita gunakan properti module.rules pada webpack configuration (webpack.config.js). Di dalamnya terdapat dua high level properties yaitu test, dan use. Berikut penjelasan singkatnya:

Properti test merupakan tipe berkas yang akan ditransformasikan.
Properti use merupakan loader mana yang akan digunakan untuk mentransformasikan berkas tersebut.

Belum terbayang bagaimana penggunaannya? Berikut contoh konfigurasi dari properti loader:


module.exports = {

  module: {

    rules: [

      { test: /\.css$/, use: 'css-loader' }

    ]

  }

};

Konfigurasi di atas memiliki properti module.rules dan menetapkan properti test dan use di dalamnya. Konfigurasi seperti ini layaknya kita memberitahu “Hey webpack compiler! Ketika Anda bertemu dengan berkas .css yang dihubungkan menggunakan import atau require statement, gunakanlah css-loader untuk mengubahnya sebelum membungkusnya ke dalam bundle”.

Banyak sekali loader yang dapat kita gunakan pada webpack configuration. Namun loader tersebut tidak disertakan langsung ketika kita menggunakan webpack. Jika kita ingin menggunakan loader katakanlah css-loader, maka kita perlu memasang package loader tersebut melalui npm.


npm install css-loader --save-dev

Contoh sebelumnya merupakan cara ringkas ketika kita menetapkan loader agar mudah dibaca. Melalui module.rules sebenarnya kita dapat menetapkan banyak loader, namun dalam penulisannya kita perlu menetapkan loader tersebut secara eksplisit seperti ini:


module.exports = {

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    }

}

Dalam menuliskan banyak loader dalam satu rule, urutan deklarasi loader tersebut sangat berpengaruh. Loader akan tereksekusi dengan urutan dari bawah ke atas. Pada contoh di atas eksekusi akan dimulai dari css-loader, lalu dilanjutkan oleh style-loader.

Dengan menuliskan loader secara eksplisit seperti ini, kita juga dapat dengan mudah menambahkan konfigurasi pada loader yang digunakan melalui properti options. Contohnya:


module.exports = {

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader",

                        options: {

                            // memasukkan style dengan tag <style> di bawah dari element <body> 

                            insert: "body"

                        }

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    }

}

Untuk melihat loader apa saja yang dapat kita manfaatkan pada webpack dan konfigurasi apa saja yang dapat diterapkan pada masing-masing loadernya, kita dapat melihatnya secara lengkap pada dokumentasi resmi webpack melalui tautan berikut: Webpack Loaders Documentation

Plugin

Plugin pada webpack digunakan untuk melakukan tugas seperti optimasi bundel, management aset dan sebagainya. Dengan adanya plugin ini, webpack menjadi lebih fleksibel. Plugin merupakan tulang punggung dari webpack. Bahkan webpack sendiri dibangun menggunakan sistem plugin yang sama seperti yang kita lakukan pada webpack configuration.

Webpack Plugin merupakan sebuah JavaScript objek yang dibangun menggunakan JavaScript class yang di dalamnya terdapat method apply dengan satu argument bernama compiler. Kita dapat membuat webpack plugin sederhana dengan cara seperti ini:

ConsoleLogOnBuildWebpackPlugin.js


const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

 

 

class ConsoleLogOnBuildWebpackPlugin {

  constructor(options) {

    this.options = options;

  }

 

 

  apply(compiler) {

    compiler.hooks.run.tap(pluginName, compilation => {

      console.log(this.options.message);

    });

  }

}

 

 

module.exports = ConsoleLogOnBuildWebpackPlugin;

Ketika kita menggunakan plugin tersebut pada webpack configuration, ia akan mencetak nilai this.options.message pada console ketika proses build pada webpack berjalan.

Untuk saat ini jangan terfokus pada cara membuat plugin di webpack. Alih-alih, fokuslah pada bagaimana ia digunakan pada webpack configuration. Karena plugin merupakan objek dan kita mungkin menyimpan konfigurasi ketika ia dibuat, maka dalam membuat objek plugin kita perlu menggunakan keyword new seperti ini:


const ConsoleLogOnBuildWebpackPlugin = require("./console-log-on-build-webpack-plugin.js");

 

module.exports = {

    plugins: [

    new ConsoleLogOnBuildWebpackPlugin({

        message: "The webpack build process is starting!"

    })

    ]

}

Banyak plugin baik standar webpack atau pihak ketiga yang dapat kita manfaatkan pada webpack. Karena itulah kita tidak perlu fokus pada bagaimana membuat plugin. Untuk menggunakan plugin standar webpack, kita dapat mengaksesnya melalui objek webpack seperti ini:


const webpack = require("webpack"); // dibutuhkan untuk mengakses built-in plugins

 

module.exports = {

    plugins: [

    new webpack.ProgressPlugin()

    ]

}

Namun, untuk menggunakan beberapa plugin (di luar plugin standar yang disediakan) kita perlu memasangnya terlebih dahulu melalui npm. Contohnya plugin yang banyak digunakan untuk membuat berkas HTML pada webpack adalah html-webpack-plugin. Untuk memasangnya kita gunakan perintah berikut:


npm install html-webpack-plugin --save-dev

Setelah memasangnya kita dapat menggunakannya pada webpack configuration seperti ini:


const HtmlWebpackPlugin = require('html-webpack-plugin'); //dipasang via npm

 

module.exports = {

  plugins: [

        new HtmlWebpackPlugin({

            template: "./src/index.html",

            filename: "index.html"

        })

    ]

};

Pada contoh di atas, melalui html-webpack-plugin webpack akan menghasilkan berkas HTML untuk proyek kita dan memasukkan berkas yang sudah dibundel.

Mode

mode merupakan salah satu properti yang terdapat pada webpack configuration. Dengan memberikan mode dengan nilai development, production atau none, kita dapat melakukan optimasi pada webpack berdasarkan mode yang kita kehendaki. Jika kita tidak menetapkan nilai pada properti mode, secara default akan bernilai production.


module.exports = {

    mode: 'production'

};

Nilai mode juga dapat kita tetapkan melalui CLI argument seperti berikut:


webpack --mode development

Kita dapat melakukan optimasi pada webpack berdasarkan mode yang kita kehendaki karena tiap properti pada webpack configuration menyesuaikan pada modenya. Misalkan, jika kita menggunakan mode development, kita dapat menggunakan properti devtool, cache, atau properti development lainnya pada webpack configuration.


module.export = {

    mode: 'development',

    devtool: 'eval',

    cache: 'true'

}

Properti devtool atau cache tentu tidak dapat kita gunakan dalam mode production, tetapi kita dapat memanfaatkan properti-properti yang terdapat pada production. Begitu juga ketika kita menetapkan mode none. Untuk lebih lengkapnya, properti apa saja yang dapat kita manfaatkan di masing-masing modenya, silakan cek tautan berikut: Webpack Configuration Mode.

Jika kita ingin mengubah perilaku webpack berdasarkan nilai mode di dalam webpack.config.js, kita fungsi alih-alih objek.


const config = {

  entry: './app.js'

  //...

};

 

module.exports = (env, argv) => {

 

  if (argv.mode === 'development') {

    config.devtool = 'source-map';

  }

 

  if (argv.mode === 'production') {

    //...

  }

 

  return config;

};

Atau kita dapat menggunakan flag --config pada scripts berkas package.json untuk menetapkan berkas webpack configuration yang berbeda pada tiap modenya.


"scripts": {

    "build:prod": "webpack --config webpack.prod.js",

    "build:dev": "webpack --config webpack.dev.js",

}

Using Webpack

Setelah mengetahui apa itu webpack dan seperti apa core concepts-nya, mungkin sebagian dari kita masih bingung jika belum mencobanya langsung. Untuk itu mari kita coba terapkan webpack pada proyek WebClock yang sudah kita buat sebelumnya. Karena pada proyek tersebut kita masih menggunakan tag <script> dalam menggunakan package yang terpasang menggunakan npm.

Sebelum melanjutkan ke materi selanjutnya. Pastikan Anda ikuti instruksi pada modul Node Package Manager hingga proyek WebClock menghadirkan tampilan seperti ini:

Belum ada tampilan demikian? Yuk baca kembali modul pada Node Package Manager dan ikuti instruksi di sana. Untuk Anda yang sudah sampai tahap tersebut, ayo kita gunakan webpack mulai dari cara memasangnya.

Installing Webpack

Memasang webpack pada proyek kita sama seperti kita memasang package JQuery atau Moment.js. Namun webpack ini dipasang pada devDependencies karena sejatinya ia hanya digunakan selama proses pengembangan saja.

Untuk memasang webpack silakan buka proyek Anda. Pada terminal kita tuliskan perintah berikut:


npm install webpack --save-dev

npm install webpack-cli --save-dev

Atau kita dapat menyingkat perintah tersebut dalam penulisan satu baris seperti ini:


npm install webpack webpack-cli --save-dev

Setelah berhasil memasang package webpack dan webpack-cli, maka kita dapat melihat kedua package tersebut pada devDependencies di berkas package.json.

Mengapa kita membutuhkan dua package dalam memasang webpack? Apa fungsi package webpack dan webpack-cli? Package webpack merupakan package inti dari webpack itu sendiri. Sedangkan package webpack-cli merupakan package yang digunakan untuk membantu kita menjalankan webpack melalui sebuah perintah (Command Line Interface). Pada CLI juga kita dapat memberikan argumen seperti menetapkan berkas webpack config, atau mode dalam proses build.

Untuk menjalankan webpack kita perlu menambahkan script dengan perintah webpack pada package.json seperti ini:


"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "http-server .",

    "build": "webpack"

},

Kita bisa menghapus script yang lainnya karena sudah tidak akan kita gunakan lagi. Sehingga sekarang berkas package.json akan tampak seperti ini:


{

  "name": "webclock",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.4.1",

    "moment": "^2.24.0"

  },

  "devDependencies": {

    "webpack": "^4.41.6",

    "webpack-cli": "^3.3.11"

  }

}

Lalu untuk menjalankan script build, kita gunakan perintah berikut:


npm run build

Namun untuk saat ini jika menjalankan script build akan terjadi eror seperti ini:

Dari pesan berikut, kita dapat menyimpulkan bahwa ketika kita tidak/belum menetapkan webpack configuration, nilai entry standarnya akan berlokasi pada src -> index.js.


ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Dicoding\Desktop\WebClock'

Untuk itu mari kita sesuaikan dengan membuat folder src dan memindahkan index.js pada folder tersebut. Sehingga struktur proyeknya akan tampak seperti ini:

Lalu coba kita jalankan kembali script build, maka hasilnya akan tampak seperti ini:

Pada struktur proyek kita juga terlihat terdapat folder baru dengan nama dist, di mana di dalamnya terdapat berkas main.js yang merupakan hasil bundel dari entry point src -> index.js.

Jika kita buka berkas tersebut, akan tampil banyak kode yang sulit kita baca. Jangan khawatir mengenai kode yang dihasilkan webpack itu. Namun jika dilihat pada akhir kodenya, kita akan menemukan kode asli yang kita tulis.

Karena kita sudah menggunakan webpack untuk membundel module. Kita dapat menggunakan perintah import pada src -> index.js dalam menggunakan package npm.


import $ from "jquery";

import moment from "moment";

 

const displayTime = () => {

    moment.locale("id");

    $(".time").text(moment().format("LTS"));

    $(".date").text(moment().format("LL"));

};

 

const updateTime = () => {

    displayTime();

    setTimeout(updateTime, 1000)

};

 

updateTime();

Kemudian pada index.html, kita dapat menggantikan seluruh tag <script> yang ada dengan satu tag <script> yang ditujukan pada dist -> main.js.


<!DOCTYPE html>

<html>

    <head>

        <title>Clock Web</title>

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <div class="clock">

            <span class="time"></span>

            <span class="date"></span>

        </div>

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

    </body>

</html>

Lalu kita build ulang proyek dengan menjalankan perintah:


npm run build

Setelah build selesai dan menghasilkan berkas dist -> main.js yang baru, proyek WebClock seharusnya sudah bisa berjalan dengan baik ketika kita membuka berkas index.html.

Creating configuration files

Sebelumnya kita menggunakan webpack dengan zero configuration. Apa artinya? Kita dapat menggunakan webpack tanpa membuat berkas webpack configuration sama sekali. Zero configuration ini fitur baru dari webpack 4. Namun kekurangan dalam zero configuration adalah kita tidak dapat menyesuaikan konfigurasi yang kita inginkan ketika menggunakan webpack. Katakanlah jika kita perlu menggunakan sebuah loader atau plugin, tentu dengan zero configuration kita tidak dapat menggunakannya.

Kita dapat membuat berkas webpack configuration dengan membuat berkas JavaScript baru dengan nama webpack.config.js pada root folder proyek kita.

Nama berkas tersebut merupakan nama standar bagi berkas webpack configuration. Kita dapat menetapkan nama lain sesuka kita namun kita perlu menambahkan argument --config pada webpack CLI. Kita akan mencoba hal ini nanti. Saat ini kita fokus dulu bagaimana cara menuliskan sintaks pada berkas webpack configuration.

Pada materi sebelumnya kita sudah mengenal konsep inti dari webpack ini. Ada entry, output, loader, plugins dan mode. Kelima konsep inti tersebut dapat menentukan perilaku webpack dalam melaksanakan tugasnya. Untuk konfigurasi awal, kita tetapkan terlebih dahulu entry dan output pada webpack configuration. Caranya dengan tambahkan kode berikut pada berkas webpack.config.js.


const path = require("path");

 

module.exports = {

    entry: "./src/index.js",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js"

    }

}

Pada nilai entry walaupun kita menetapkannya namun tidak ada nilai yang berbeda seperti nilai standar yaitu src -> index.js. Namun pada nilai output, kita mengubah penamaan berkas hasil bundel dari main.js (nilai standar) menjadi bundle.js. Sehingga ketika kita jalankan kembali script build.


npm run build

Maka akan terdapat berkas bundel baru bernama bundle.js.

Namun kita juga masih dapat melihat berkas main.js yang merupakan berkas lama hasil proses build sebelumnya. Kita dapat menghapusnya karena sudah tidak digunakan lagi. Namun jangan lupa mengubah target berkas JavaScript yang dilampirkan pada index.html menjadi bundle.js.


<!DOCTYPE html>

<html>

    <head>

        <title>Clock Web</title>

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <div class="clock">

            <span class="time"></span>

            <span class="date"></span>

        </div>

        <script src="./dist/bundle.js"></script>

    </body>

</html>

Jika kita membuka index.html maka akan tampil hasil yang sama seperti sebelumnya. Karena memang kita tidak melakukan apapun selain mengubah nama hasil bundel dari main.js (nilai standar) menjadi bundle.js.

Pada saat proses bundle, coba kita lihat pada Terminal. Terdapat warning yang menunjukkan bahwa kita tidak menetapkan mode pada berkas webpack configuration.

Jika kita tidak menetapkan nilai pada properti mode maka nilai standar akan diterapkan, yakni nilai production. Namun daripada kita membiarkan properti mode ini tidak memiliki nilai, sebaiknya kita tetapkan saja nilai modenya. Untuk saat ini, kita tetapkan properti mode dengan nilai production.


const path = require("path");

 

module.exports = {

    entry: "./src/index.js",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js"

    },

    mode: "production"

}

Lalu coba jalankan kembali script build. Maka warning mengenai properti mode tidak akan muncul pada Terminal saat proses build berjalan.

“Sebenarnya kita juga dapat melihat warning lain yang menunjukkan ukuran bundle.js sudah melampaui batas. Kita bisa lihat sendiri dengan membuka berkas bundle.js. Di sana kita akan menemukan banyak sekali kode yang dihasilkan dibandingkan dengan sebelumnya.
Hal ini disebabkan kode yang kita tulis memiliki ketergantungan (dependencies) terhadap package JQuery dan Moment. Sehingga package tersebut perlu dibundel juga pada berkas bundle.js. karena itulah berkas bundle.js menjadi bengkak ukurannya.
Ini merupakan salah satu alasan mengapa sebaiknya kita hindari penggunaan package pihak ketiga yang kita bawa hingga tingkat production. Membengkaknya berkas bundle.js, tentu akan berdampak terhadap performa web yang kita bangun nantinya.”

Using Loader

Pada penjelasan core concepts kita sudah tahu bahwa dengan loader, webpack dapat memproses berkas selain JavaScript. Dengan adanya loader kita dapat menggunakan CSS sebagai modul dan ikut terbundel bersama berkas bundle.js. Sehingga kita tidak perlu lagi menerapkan tag <link> pada index.html.

Style and CSS Loader

Untuk menggunakan CSS modul pada webpack, kita membutuhkan dua buah loader. Yang pertama css-loader dan yang kedua style-loader. css-loader merupakan loader untuk memproses berkas dengan format .css. Sedangkan style-loader merupakan loader yang digunakan untuk membuat styling dapat diterapkan secara modular dengan menggunakan import statement.

Untuk menggunakan kedua loader tersebut, langkah pertama adalah memasangnya melalui npm dengan perintah:


npm install style-loader css-loader --save-dev

Setelah berhasil, pada berkas webpack.config.js kita tambahkan properti module.rules dan isikan nilai loader seperti ini:


const path = require("path");

 

module.exports = {

    entry: "./src/index.js",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js"

    },

    mode: "production",

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    }

}

Setelah menambahkan loader pada webpack.config.js, sekarang kita dapat melakukan impor berkas CSS menggunakan import statement layaknya berkas JavaScript.

Namun sebelum itu, pindahkan terlebih dahulu berkas style.css agar lebih rapi ke dalam direktori baru dengan lokasi src -> style -> style.css. Sehingga struktur proyek akan tampak seperti ini:

Lalu pada berkas index.js, lakukan impor berkas style.css pada awal baris kodenya.


import "./style/style.css";

Maka keseluruhan kode pada index.js akan tampak seperti ini:


import "./style/style.css";

import $ from "jquery";

import moment from "moment";

 

const displayTime = () => {

    moment.locale("id");

    $(".time").text(moment().format("LTS"));

    $(".date").text(moment().format("LL"));

};

 

const updateTime = () => {

    displayTime();

    setTimeout(updateTime, 1000)

};

 

updateTime();

Dengan begitu kita tidak membutuhkan lagi tag <link> pada index.html dalam melampirkan stylesheet pada berkas style.css. Kita hapus tag <link> berikut:


<link rel="stylesheet" href="style.css">

Sehingga keseluruhan kode pada index.html akan tampak seperti ini:


<!DOCTYPE html>

<html>

    <head>

        <title>Clock Web</title>

    </head>

    <body>

        <div class="clock">

            <span class="time"></span>

            <span class="date"></span>

        </div>

        <script src="./dist/bundle.js"></script>

    </body>

</html>

Setelah itu coba jalankan kembali script build untuk menghasilkan berkas bundle.js yang baru dan buka index.html pada browser. Seharusnya proyek WebClock menampilkan hasil yang sama seperti sebelumnya.

Selamat! Itu artinya, Anda berhasil menerapkan styling dengan cara modular menggunakan webpack loader. Jika Anda lihat pada berkas bundle.js saat ini, kita dapat menemukan styling yang dituliskan.

Hal inilah mengapa styling dapat diterapkan tanpa harus menggunakan tag <link> pada berkas index.html.

Babel Loader

Kita sudah berhasil menggunakan dan merasakan manfaat dari style-loader dan css-loader. Namun sebenarnya masih banyak loader lain yang tak kalah pentingnya untuk diterapkan pada webpack. Salah satunya adalah babel-loader.

Mungkin sebagian dari kita sudah ada yang mengetahui apa itu babel atau babel.js? Babel merupakan sebuah transpiler yang bertugas untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks yang dapat didukung penuh oleh seluruh browser.

JavaScript merupakan bahasa pemrograman yang berkembang sangat pesat. Komunitasnya besar, dan tiap tahun selalu terdapat versi yang baru. Namun perkembangan yang pesat tadi ternyata membutuhkan waktu yang lama untuk diadaptasi oleh browser atau Node.js. Lalu jika kita ingin mencoba sintaks terbaru di JavaScript apakah kita perlu menunggu hingga seluruh browser berhasil mengadaptasi pembaharuan tersebut? Tentu tidak!

Pada playground tersebut kita juga dapat memilih preset yang kita inginkan. Secara default preset akan mengarah ES2015 (ES6).

Anda sudah tahu sekilas mengenai babel. Nah pada webpack kita juga dapat menggunakan babel dalam bentuk loader. Walaupun webpack secara standarnya dapat memproses berkas JavaScript tanpa perlu bantuan loader, namun proses tersebut tidak mengubah sintaks yang kita tuliskan. Artinya jika kita menuliskan sintaks JavaScript modern, maka kita akan menemukannya juga pada berkas bundle.js.

Untuk menggunakan babel pada webpack sebagai loader, kita perlu memasang tiga package menggunakan npm pada devDependencies. Yang pertama package @babel/core, yang kedua babel-loader, dan yang ketiga @babel/preset-env.


npm install @babel/core babel-loader @babel/preset-env --save-dev

Package @babel/core merupakan package inti yang harus dipasang ketika kita hendak menggunakan babel, baik pada webpack maupun tools yang lain.

Package babel-loader merupakan package yang diperlukan untuk menggunakan babel sebagai loader pada webpack.

Yang terakhir package @babel/preset-env merupakan package preset yang akan kita gunakan untuk membantu babel-loader dalam melakukan tugasnya. @babel/preset-env merupakan preset cerdas yang memungkinkan kita menggunakan sintaks JavaScript terbaru tanpa menetapkan secara spesifik sintaks JavaScript versi apa yang kita gunakan.

Berkas package.json akan tampak seperti ini setelah memasang ketiga package tersebut:


{

  "name": "webclock",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.4.1",

    "moment": "^2.24.0"

  },

  "devDependencies": {

    "@babel/core": "^7.8.4",

    "@babel/preset-env": "^7.8.4",

    "babel-loader": "^8.0.6",

    "css-loader": "^3.4.2",

    "style-loader": "^1.1.3",

    "webpack": "^4.41.6",

    "webpack-cli": "^3.3.11"

  }

}

Setelah berhasil memasang ketiga package tersebut, langkah selanjutnya kita dapat gunakan babel-loader dan preset-nya pada webpack configuration.


const path = require("path");

 

module.exports = {

    entry: "./src/index.js",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js"

    },

    mode: "production",

    module: {

        rules: [

            /* style and css loader */

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            },

            /* babel loader */

            {

                test: /\.js$/,

                exclude: "/node_modules/",

                use: [

                    {

                        loader: "babel-loader",

                        options: {

                            presets: ["@babel/preset-env"]

                        }

                    }

                ]

            }

        ]

    }

}

Ketika menerapkan rule untuk berkas .js, jangan lupa untuk menetapkan properti exclude dengan nilai “/node_modules/”. Apa artinya? Dengan menetapkan properti exclude itu berarti kita mengecualikan webpack untuk memproses berkas .js yang berada pada folder “node_modules”. Hal ini dapat meminimalisir proses yang tidak diperlukan, sehingga mempercepat proses build pada proyek kita.

Setelah menggunakan babel loader pada webpack configuration, mari kita coba build dan buka kembali berkas bundle.js. Maka kode yang kita tuliskan dalam ES6 akan diubah dalam sintaks yang dapat diterima oleh seluruh browser.

Bahkan pada berkas bundle tersebut dipastikan sudah tidak terdapat lagi sintaks yang dituliskan menggunakan ES6.

Namun walaupun sintaksnya sudah diubah, proyek akan tetap berjalan normal seperti biasanya.

Webpack Dev Server

Saat ini setiap terjadi perubahan kode pada proyek, Anda perlu melakukan build ulang untuk melihat hasilnya. Tak peduli perubahan tersebut bersifat mayor ataupun hanya sekadar ganti warna saja. Karena untuk melihat perubahan terbaru kita juga perlu memperbaharui berkas bundle.js. Tentu sangat merepotkan bukan?

Untunglah webpack menyediakan fitur live-reloading yang dapat mempercepat proses pengembangan menggunakan Webpack Dev Server. Dengan ini kita dapat melihat perubahan secara langsung tanpa harus menjalankan ulang perintah build.

Untuk menggunakan Webpack Dev Server langkah pertama adalah kita pasang package webpack-dev-server pada devDependencies menggunakan npm.


npm install webpack-dev-server --save-dev

Setelah berhasil memasangnya, kita tambahkan script start-dev dengan perintah “webpack-dev-server” pada package.json.


"scripts": {

    "build": "webpack",

    "start-dev": "webpack-dev-server"

  }

Mari kita jalankan script start-dev dengan perintah:


npm run start-dev

Setelah menjalankan perintah di atas, pada terminal kita dapat melihat alamat localhost:8080. Alamat tersebut digunakan untuk melihat proyek yang sedang kita kembangkan pada browser.

Webpack Dev Server secara standar memiliki fitur live-reloading. Artinya setiap terjadi perubahan terhadap assets yang digunakan (HTML, CSS, atau JS) dan menyimpan perubahannya (save), ia akan melakukan melakukan proses compiling ulang dan menampilkan hasil perubahan langsung pada browser.

Namun jika kita lihat proses compiling memakan waktu yang cukup lama bukan? Pada contoh gif di atas, butuh setidaknya 5 detik untuk Webpack Dev Server menampilkan perubahan terbaru pada browser. Mengapa bisa demikian?

Hal tersebut terjadi karena kita menggunakan mode production dalam menjalankan Webpack Dev Server. Ketika menggunakan mode production maka webpack melakukan bundling module seoptimal mungkin sehingga proses membutuhkan waktu lebih lama dibandingkan dengan mode development. Selain itu, pada webpack configuration kita menggunakan babel-loader. Proses compiling yang lama akan terasa lebih lama lagi karena kita harus melalui proses transpiling kode JavaScript melalui babel-loader.

Solusinya, pisahkan webpack configuration untuk development dan production.

Untuk menghentikan service webpack-dev-server, gunakan kombinasi ctrl + c pada terminal yang digunakan. Ingatlahbahwa sebaiknya kita hentikan service webpack-dev-server setiap kali ingin melakukan perubahan pada berkas webpack configuration.

Configuration Environment

Tujuan dari development dan production memanglah berbeda. Pada tahap development webpack akan menerapkan konfigurasi yang selalu optimal untuk mempercepat proses perubahan pada browser (hot reloading). Sedangkan pada proses production kita ingin fokus terhadap optimasi bundling dan kompatibilitasnya pada browser. Karena perbedaan fokus tersebut sebaiknya kita memisahkan konfigurasi antara keduanya.

Namun jika berpatokan pada bagan di atas, antara keduanya terdapat konfigurasi umum (common) seperti entry, output, style-loader, css-loader dan HtmlWebpackPlugin. Untuk menghindari penulisan berulang, kita dapat menggunakan tools yang bernama webpack-merge yang berfungsi untuk menggabungkan konfigurasi umum dengan konfigurasi unik tiap environment-nya.

Using webpack-merge

Untuk menggunakan webpack-merge langkah awal adalah dengan memasang package tersebut pada devDependencies menggunakan NPM.


npm install webpack-merge --save-dev

Kemudian kita buat berkas webpack konfigurasi baru dengan nama webpack.common.js.

Di dalam berkas tersebut kita tuliskan konfigurasi umum yang digunakan pada setiap environment baik itu production atau development.


const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

 

module.exports = {

    entry: "./src/index.js",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js"

    },

    module: {

        rules: [

            /* style and css loader */

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    },

    /* plugin */

    plugins: [

        /* HTML Webpack Plugin */

        new HtmlWebpackPlugin({

            template: "./src/template.html",

            filename: "index.html"

        })

    ]

}

Kemudian kita buat 2 (dua) berkas webpack configuration baru dengan nama webpack.prod.js dan webpack.dev.js.

Kemudian pada masing-masing berkasnya, tuliskan kode berikut:

webpack.prod.js


const merge = require("webpack-merge");

const common = require("./webpack.common.js");

 

 

module.exports = merge(common, {

    mode: "production",

    module: {

        rules: [

            /* babel loader */

            {

                test: /\.js$/,

                exclude: "/node_modules/",

                use: [

                    {

                        loader: "babel-loader",

                        options: {

                            presets: ["@babel/preset-env"]

                        }

                    }

                ]

            }

        ]

    }

})

webpack.dev.js


const merge = require("webpack-merge");

const common = require("./webpack.common.js"); 

 

 

module.exports = merge(common, {

    mode: "development",

})

Di dalam berkas webpack.common.js kita sudah menetapkan nilai entry, output beberapa loader, dan plugin yang nilainya digunakan pada kedua environment. Sehingga kita tidak perlu menetapkannya lagi pada masing-masing berkas konfigurasi environment-nya.

Perhatikan juga bahwa kita menggunakan merge() dari package webpack-merge, untuk memasukkan konfigurasi umum pada konfigurasi tiap environment-nya.


module.exports = merge(common, … )

Setelah menetapkan konfigurasi umum dan konfigurasi pada tiap environment, mari ubah perintah script build dan start-dev pada package.json menjadi seperti ini:


"scripts": {

    "build": "webpack --config webpack.prod.js",

    "start-dev": "webpack-dev-server --config webpack.dev.js"

}

Dengan menambahkan flag --config [config-files] pada script build dan start-dev, maka Anda dapat secara leluasa menghapus berkas webpack.config.js karena memang sudah tidak digunakan lagi. Sehingga pada proyek WebClock hanya terdapat 3 (tiga) berkas webpack configuration.

Coba kita jalankan kembali script start-dev ya. Seharusnya fitur live-reloading akan berjalan lebih cepat.

Apa Itu Shadow DOM?

2020-04-28T23:02:00.000+07:00

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:

Sumber: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

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:

main.js


// Shadow Host

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

 

 

// element yang berada di dalam Shadow DOM

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

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

 

 

// Melampirkan shadow root pada shadow host

// Mengatur mode shadow dengan nilai open

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

 

 

// Memasukkan element heading ke dalam shadow root

shadowRoot.appendChild(headingElement);

 

 

// Memasukkan elemen shadow host ke regular DOM

document.body.appendChild(divElement);

index.html


<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

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

   <title>Shadow DOM Basic Usage</title>

 </head>

 <body>

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

 </body>

</html>

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

Dan struktur DOM tree yang terbentuk akan tampak seperti ini:

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.


divElement.attachShadow;

properti shadowRoot mengembalikan struktur DOM yang berada pada shadow tree.

Namun jika kita menggunakan nilai closed maka properti shadowRoot akan mengembalikan nilai null.


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

divElement.shadowRoot // null;

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


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

divElement.shadowRoot // null;

shadowRoot // # shadow-root (closed)

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.

index.html


<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

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

   <title>Shadow DOM Basic Usage</title>

   <style>

       h1 {

         color: red;

       }

   </style>

 </head>

 <body>

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

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

 </body>

</html>

main.js


// Shadow Host

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

 

 

// element yang berada di dalam Shadow DOM

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

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

 

 

// Melampirkan shadow root pada shadow host

// Mengatur mode shadow dengan nilai open

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

 

 

// Memasukkan element heading ke dalam shadow root

shadowRoot.appendChild(headingElement);

 

 

// Memasukkan elemen shadow host ke regular DOM

document.body.appendChild(divElement);

Jika dilihat pada browser maka hasilnya akan seperti ini:

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:


// menetapkan styling pada Shadow DOM

shadowRoot.innerHTML += `

 <style>

   h1 {

     color: green;

   }

 </style>

`;

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

Belajar Membuat Custom Element Dan Shadow DOM Dasar di Javascript

2020-04-28T22:06:00.000+07:00

Ihsan Magazine - Kali ini kita akan mencoba belajar membuat Custom Element dasar di Javascript, apa itu Custom Element? Gampang nya Custom Element seperti kita Membuat Tag HTML baru untuk Front End Developer.

Bisa untuk memperluas elemen bawaan HTML, dan masih banyak lagi, dasarnya menggunakan\ Elements global digunakan untuk mendefinisikan elemen khusus dan mengajarkan tag baru pada browser.

Panggil customElements.define() dengan nama tag yang ingin Anda buat dan class JavaScript yang memperluas HTMLElement dasar.

Selengkapnya Baca Disini

Kali ini Study Kasus dengan ClubFinder.zip

Jika kita telaah dengan seksama, pada proyek Club Finder terdapat 4 (empat) bagian yang berpotensi untuk dijadikan custom element, yaitu:

App Bar : Komponen di posisi atas yang menunjukkan identitas atau nama dari aplikasi web.
Search Bar : Komponen yang terdiri dari elemen <input> dan <button> dan berfungsi untuk melakukan pencarian club sesuai dengan input pengguna.
Club List : Komponen yang berfungsi untuk menampung data dari hasil pencarian, kemudian menampilkannya dalam bentuk list.
Club Item : Komponen yang menampilkan data individual club yang diberikan dari club list. Komponen ini terdiri dari gambar, nama, dan deskripsi singkat club.

Solution: Membuat app-bar Component

Apakah Anda berhasil menerapkan custom element pada proyek Club Finder? Jika belum, mari kita lakukan bersama-sama. Kita mulai dari komponen termudah terlebih dahulu yaitu App Bar.

Agar mengelola berkas pada proyek jadi lebih mudah, kita perlu membuat folder baru dengan nama “component” di dalam folder src -> script.

Folder ini akan menampung berkas JavaScript yang digunakan dalam membuat custom element.

Lalu di dalam folder component, buat berkas JavaScript baru dengan nama “app-bar.js”. Kemudian kita buat class dengan nama AppBar yang mewarisi sifat HTMLElement.


class AppBar extends HTMLElement {

  

}

Kemudian di dalam body block classnya, kita implementasi method connectedCallback dan membuat fungsi render.


class AppBar extends HTMLElement {

   connectedCallback(){

 

   }

 

   render() {

      

   }

}

Seperti yang sudah kita ketahui, connectedCallback() akan terpanggil ketika element telah diterapkan pada DOM. Jika kita ingin element ini ketika diterapkan langsung melakukan rendering maka kita dapat memanggil fungsi this.render() di dalam connectedCallback.


class AppBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

 

   render() {

 

   }

}

Lalu pada fungsi render, kita tuliskan kode yang berfungsi untuk menampilkan elemen yang dibutuhkan pada melalui properti this.innerHTML. Apa saja yang dibutuhkan? Kita bisa melihatnya pada berkas index.html.


<header>

       <div id="appBar" class="app-bar">

           <h2>Club Finder</h2>

       </div>

</header>

Di dalam elemen <header> terdapat elemen <div> yang menerapkan class “app-bar”. Nah kita copy element di dalam app-bar, dan paste untuk dijadikan nilai pada this.innerHTML di fungsi render().


class AppBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.innerHTML = `<h2>Club Finder</h2>`;

   }

}

Lalu di akhir berkas app-bar.js, jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.


class AppBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.innerHTML = `<h2>Club Finder</h2>`;

   }

}

 

customElements.define("app-bar", AppBar);

Dengan begitu kita dapat mengubah penerapan app-bar pada index.html dengan menggunakan tag <app-bar>.


<header>

      <app-bar></app-bar>

</header>

Terakhir, agar kode pada berkas app-bar.js tereksekusi, impor berkas app-bar.js pada berkas app.js, seperti ini:


import "./src/script/component/app-bar.js";

Tuliskan kode tersebut pada awal berkas app.js, sehingga keseluruhan kode pada berkasnya akan tampak seperti ini:


import "./src/script/component/app-bar.js";

import main from "./src/script/view/main.js";

 

document.addEventListener("DOMContentLoaded", main);

Kemudian coba kita buka proyeknya menggunakan local server. Inilah tampilan hasilnya:

Oops, tampilan App Bar tampak berantakan. Kita perlu memperbaiki css yang digunakan pada elemen App Bar sebelumnya. Buka berkas appbar.css lalu ubah selector-nya dari .app-bar menjadi app-bar.


app-bar {

   padding: 16px;

   width: 100%;

   background-color: cornflowerblue;

   color: white;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

Lalu lihat kita lihat hasilnya.

Yah, kini teks “Club Finder” tidak tampak karena background element tidak bekerja dengan baik. Kenapa begini yah? Pasalnya, custom element standarnya merupakan inline element, sehingga tidak akan mengisi panjang lebar parent element-nya. Solusinya adalah dengan mengubah sifat inline pada custom element menjadi block dengan cara menambahkan properti display dengan nilai block pada selector app-bar.


app-bar {

   display: block;

   padding: 16px;

   width: 100%;

   background-color: cornflowerblue;

   color: white;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

Dengan begitu tampilan kita berhasil membuat custom element <app-bar> dengan baik!

Membuat search-bar Component

Pembuatan elemen <search-bar> lebih sedikit rumit dari pembuatan komponen sebelumnya, karena di dalam komponen search bar terdapat element <input> dan <button>. Kombinasi kedua element tersebut digunakan dalam mencari data club. Sebisa mungkin kita membuat custom element <search-bar> sehingga mempermudah kala menggunakan komponen tersebut.

Mari kita mulai dengan membuat berkas JavaScript baru dengan nama search-bar.js. Kemudian di dalamnya kita membuat class SearchBar dengan mewarisi sifat HTMLElement.


class SearchBar extends HTMLElement {

  

}

Kemudian kita implementasi method connectedCallback dan membuat fungsi render.


class SearchBar extends HTMLElement {

   connectedCallback(){

 

   }

  

   render() {

      

   }

}

Lalu panggil fungsi render() di dalam connectedCallback().


class SearchBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

  

   render() {

 

   }

}

Di dalam fungsi render kita ambil elemen yang dibutuhkan untuk ditampilkan dari berkas index.html.


<div id="search-container" class="search-container">

   <input placeholder="Search football club" id="searchElement" type="search">

    <button id="searchButtonElement" type="submit">Search</button>

</div>

Agar mudah, copy seluruh kode tersebut dan paste untuk dijadikan nilai this.innerHTML di dalam fungsi render.


class SearchBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

  

   render() {

       this.innerHTML = `

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

   }

}

Karena di dalam elemen ini terdapat <button> yang harus memiliki sebuah event ketika ia ditekan, maka kita harus menyediakan setter. Gunanya untuk menetapkan fungsi event agar dapat mudah diterapkan dari luar class SearchBar.


class SearchBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

  

   set clickEvent(event) {

       this._clickEvent = event;

       this.render();

   }

 

   render() {

       this.innerHTML = `

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

   }

}

Lalu kita terapkan this._clickEvent sebagai event pada element <button> dengan cara menuliskan kode berikut pada akhir fungsi render():


this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

Sehingga kode pada fungsi render akan tampak seperti ini:


render() {

  this.innerHTML = `

    <div id="search-container" class="search-container">

       <input placeholder="Search football club" id="searchElement" type="search">

       <button id="searchButtonElement" type="submit">Search</button>

    </div>`;

 

   this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

}

Dengan begitu nantinya kita dapat mudah dalam clickEvent pada SearchBar yang digunakan di berkas main.js.

Pada berkas main.js juga kita memanfaatkan value dari element <input> untuk mendapatkan kata kunci pencarian club. Agar mudah mendapatkan nilai value dari elemen <input> yang terdapat pada search bar, kita buat fungsi getter yang mengembalikan nilai value dari elemen <input> tersebut.


get value() {

   return this.querySelector("#searchElement").value;

}

Sehingga keseluruhan kode yang terdapat berkas search-bar.js akan terlihat seperti ini:


class SearchBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

  

   set clickEvent(event) {

       this._clickEvent = event;

       this.render();

   }

 

   get value() {

       return this.querySelector("#searchElement").value;

   }

 

   render() {

       this.innerHTML = `

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

 

       this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

   }

}

Lalu di akhir berkasnya, jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.


class SearchBar extends HTMLElement {

   connectedCallback(){

       this.render();

   }

  

   set clickEvent(event) {

       this._clickEvent = event;

       this.render();

   }

 

   get value() {

       return this.querySelector("#searchElement").value;

   }

 

   render() {

       this.innerHTML = `

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

 

       this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

   }

}

 

customElements.define("search-bar", SearchBar);

Yeay, pembuatan custom element sudah selesai. Sekarang saatnya kita menggunakannya! Pertama ubahlah struktur html yang membentuk komponen pencarian dengan menggunakan tag <search-bar>. Silakan buka berkas index.html kemudian ubah kode berikut:


<div id="search-container" class="search-container">

    <input placeholder="Search football club" id="searchElement" type="search">

    <button id="searchButtonElement" type="submit">Search</button>

</div>

Menjadi seperti ini:


<search-bar></search-bar>

Setelah itu, buka berkas src -> script -> view -> main.js dan sesuaikan kode binding elemen berikut:


const searchElement = document.querySelector("#searchElement");

Dengan mengubah selector-nya menjadi “search-bar”.


const searchElement = document.querySelector("search-bar");

Lalu kita tidak membutuhkan deklarasi variabel buttonSearchElement karena sekarang kita dapat mengakses button pada komponen pencarian melalui searchElement. Jadi silakan hapus deklarasi variabel berikut:


const buttonSearchElement = document.querySelector("#searchButtonElement");

Kemudian kita sesuaikan kembali penerapan event click pada komponen pencarian dengan mengubah kode berikut:


buttonSearchElement.addEventListener("click", onButtonSearchClicked);

Menjadi:


searchElement.clickEvent = onButtonSearchClicked;

Terakhir, karena berkas main.js perlu kode pada berkas search-bar.js tereksekusi, kita lakukan impor berkas search-bar.js pada berkas main.js, seperti ini:


import '../component/search-bar.js';

Tuliskan kode tersebut pada awal berkas main.js, sehingga keseluruhan kode pada berkasnya akan tampak seperti ini:


import '../component/search-bar.js';

import DataSource from '../data/data-source.js';

 

const main = () => {

   const searchElement = document.querySelector("search-bar");

   const clubListElement = document.querySelector("#clubList");

 

   const onButtonSearchClicked = async () => {

       try {

           const result = await DataSource.searchClub(searchElement.value);

           renderResult(result);

       } catch (message) {

           fallbackResult(message)

       }

   };

 

   const renderResult = results => {

       clubListElement.innerHTML = "";

       results.forEach(club => {

           const { name, fanArt, description } = club;

           const clubElement = document.createElement("div");

           clubElement.setAttribute("class", "club");

 

           clubElement.innerHTML = `

               <img class="fan-art-club" src="${fanArt}" alt="Fan Art">

               <div class="club-info">

                   <h2>${name}</h2>

                   <p>${description}</p>

               </div>`;

 

           clubListElement.appendChild(clubElement);

       })

   };

 

   const fallbackResult = message => {

       clubListElement.innerHTML = "";

       clubListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`;

   };

 

   searchElement.clickEvent = onButtonSearchClicked;

};

 

export default main;

Kemudian coba kita buka proyeknya menggunakan local server kemudian lakukan pencarian dengan menggunakan kata kunci “Arsenal”. Hasilnya adalah tampilan berikut:

Solution: Membuat club-list dan club-item Component

Custom element selanjutnya yang perlu kita buat adalah <club-list> dan <club-item>. Masih ingat mengenai Nested Custom Element? Nah dalam membuat kedua custom element ini kita akan menggunakan custom element di dalam custom element. Atau biasa disebut dengan nested custom element.

Mari kita awali dengan membuat dua berkas JavaScript baru dengan nama “club-list.js” dan “club-item.js” pada src -> script -> component.

Membuat <club-list> element

Langkah pertama kita buat custom element <club-list> terlebih dahulu. Pada berkas club-list.js, kita buat class ClubList dengan mewarisi sifat HTMLElement.


class ClubList extends HTMLElement {

  

}

Kemudian kita buat 2 (dua) fungsi di dalamnya yaitu setter clubs, dan render.


class ClubList extends HTMLElement {

   set clubs(clubs) {

 

   }

 

   render() {

      

   }

}

Fungsi set clubs digunakan untuk menetapkan properti this._clubs pada class ini. Nantinya properti tersebut akan digunakan pada fungsi render dalam membuat custom element <club-item>.


set clubs(clubs) {

     this._clubs = clubs;

     this.render();

}

Kemudian di dalam fungsi render, kita lakukan proses perulangan dengan menggunakan forEach pada this._clubs. Pada setiap iterasinya kita akan mendapatkan individual club dan pada saat itu juga kita buat custom element <club-item>. Pada tiap elemen <club-item> dibuat sebagai child dari element <club-list> ini. Hasilnya. fungsi render akan tampak seperti ini:


render() {

       this.innerHTML = "";

       this._clubs.forEach(club => {

           const clubItemElement = document.createElement("club-item");

           clubItemElement.club = club

           this.appendChild(clubItemElement);

       })

}

Perlu satu fungsi lagi pada custom element ini, yaitu fungsi untuk menangani ketika hasil pencarian mengalami kegagalan atau tidak ditemukkan. Maka dari itu mari kita buat fungsi dengan nama renderError() dengan satu buah parameter yang merupakan pesan eror/alasan yang perlu ditampilkan.


renderError(message) {

 

}

Untuk template html yang akan ditampilkan, kita dapat copy dari fungsi fallbackResult pada berkas src -> script -> view -> main.js.


clubListElement.innerHTML = "";

clubListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`;

Lalu paste pada fungsi renderError() dan ubah clubListElement.innerHTML menjadi this.innerHTML.


renderError(message) {

       this.innerHTML = "";

       this.innerHTML += `<h2 class="placeholder">${message}</h2>`;

}

Pada akhir berkas club-list.js jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.


customElements.define("club-list", ClubList);

Oh ya! Karena pada berkas ini kita menggunakan elemen <club-item> yang nanti akan dituliskan pada berkas club-item.js, maka kita perlu melakukan impor berkas club-item.js di berkas ini.


import './club-item.js';

Sehingga sekarang keseluruhan kode yang terdapat pada berkas ini akan tampak seperti ini:


import './club-item.js';

 

class ClubList extends HTMLElement {

   set clubs(clubs) {

       this._clubs = clubs;

       this.render();

   }

 

   renderError(message) {

       this.innerHTML = "";

       this.innerHTML += `<h2 class="placeholder">${message}</h2>`;

   }

 

   render() {

       this.innerHTML = "";

       this._clubs.forEach(club => {

           const clubItemElement = document.createElement("club-item");

           clubItemElement.club = club

           this.appendChild(clubItemElement);

       })

   }

}

 

customElements.define("club-list", ClubList);

Pembuatan element <club-list> selesai! Sekarang kita lanjut dengan membuat elemen <club-item>.

Membuat <club-item> element

Pada berkas club-item.js, kita buat class ClubItem dengan mewarisi sifat HTMLElement.


class ClubItem extends HTMLElement {

  

}

Kemudian kita buat fungsi setter club dan fungsi render.


class ClubItem extends HTMLElement {

   set club(club) {

 

   }

 

   render() {

      

   }

}

Fungsi setter club berfungsi untuk menetapkan nilai club ke properti this._club yang nantinya akan digunakan pada fungsi render untuk menampilkan data individual club hasil pencarian. Sehingga kita sesuaikan kode di dalam fungsi setter club menjadi seperti ini:


class ClubItem extends HTMLElement {

   set club(club) {

       this._club = club;

       this.render();

   }

 

   render() {

 

   }

}

Lalu kita copy template html yang berada pada fungsi renderResult di berkas src -> script -> view -> main.js.


clubElement.innerHTML = `

         <img class="fan-art-club" src="${fanArt}" alt="Fan Art">

           <div class="club-info">

              <h2>${name}</h2>

              <p>${description}</p>

           </div>`;

Kemudian paste template html pada this.innerHTML melalui fungsi render().


class ClubItem extends HTMLElement {

   set club(club) {

       this._club = club;

       this.render();

   }

 

   render() {

       this.innerHTML = `

           <img class="fan-art-club" src="${fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${name}</h2>

               <p>${description}</p>

           </div>`;

   }

}

Lalu kita sesuaikan kembali properti-properti yang digunakan pada html template, menjadi seperti ini:


class ClubItem extends HTMLElement {

   set club(club) {

       this._club = club;

       this.render();

   }

 

   render() {

       this.innerHTML = `

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

}

Karena pada this._club inilah properti dari objek club disimpan.

Kemudian pada akhir berkas club-item.js jangan lupa untuk definisikan custom element yang kita buat agar dapat digunakan pada DOM.


class ClubItem extends HTMLElement {

   set club(club) {

       this._club = club;

       this.render();

   }

 

   render() {

       this.innerHTML = `

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

}

 

customElements.define("club-item", ClubItem);

Dengan begitu elemen <club-item> sudah siap digunakan.

Menggunakan <club-list> element

Setelah membuat kedua custom element yang dibutuhkan, sekarang saatnya kita menggunakannya!

Silakan buka berkas index.html, kemudian ubah penerapan club list menggunakan elemen <div> berikut:


<div id="clubList"></div>

Menjadi:


<club-list></club-list>

Selanjutnya buka berkas src -> script -> view -> main.js. Kita sesuaikan kembali selector pada saat melakukan binding clubListElement. Ubah kode berikut:


const clubListElement = document.querySelector("#clubList");

Menjadi:


const clubListElement = document.querySelector("club-list");

Lalu kita sesuaikan juga kode yang terdapat di dalam fungsi renderResult. Hapus seluruh logika yang ada di dalam fungsi tersebut.


const renderResult = results => {

       clubListElement.innerHTML = "";

       results.forEach(club => {

           const { name, fanArt, description } = club;

           const clubElement = document.createElement("div");

           clubElement.setAttribute("class", "club");

 

           clubElement.innerHTML = `

               <img class="fan-art-club" src="${fanArt}" alt="Fan Art">

               <div class="club-info">

                   <h2>${name}</h2>

                   <p>${description}</p>

               </div>`;

 

           clubListElement.appendChild(clubElement);

       })

};

Kita cukup menggantinya dengan seperti ini:


const renderResult = results => {

     clubListElement.clubs = results;

};

Sesuaikan juga kode yang terdapat pada fungsi fallbackResult, karena kita sudah membuat fungsi renderError() pada ClubList, maka penggunaanya cukup dilakukan seperti ini:


const fallbackResult = message => {

       clubListElement.renderError(message);

};

Karena kita menggunakan elemen <club-list> pada berkas main.js, maka kita perlu melakukan impor berkas club-list.js pada berkas main.js.


import '../component/club-list.js';

Dengan begitu keseluruhan kode pada berkas main.js akan tampak seperti berikut:


import '../component/club-list.js';

import '../component/search-bar.js';

import DataSource from '../data/data-source.js';

 

const main = () => {

   const searchElement = document.querySelector("search-bar");

   const clubListElement = document.querySelector("club-list");

 

   const onButtonSearchClicked = async () => {

       try {

           const result = await DataSource.searchClub(searchElement.value);

           renderResult(result);

       } catch (message) {

           fallbackResult(message)

       }

   };

 

   const renderResult = results => {

       clubListElement.clubs = results;

   };

 

   const fallbackResult = message => {

       clubListElement.renderError(message);

   };

 

   searchElement.clickEvent = onButtonSearchClicked;

};

 

export default main;

Sekarang kita coba buka proyeknya menggunakan local server lalu tekan tombol pencarian. Voila, inilah tampilan hasilnya:

Ops, tampilan daftar club tampak berantakan. Kita perlu menyesuaikan styling-nya juga. Jadi silakan buka berkas src -> style -> clublist.css. Kemudian ubah seluruh selector #clubList menjadi club-list dan selector .club menjadi club-item.


club-list {

   margin-top: 32px;

   width: 100%;

   padding: 16px;

}

 

club-list > .placeholder {

   font-weight: lighter;

   color: rgba(0,0,0,0.5);

   -webkit-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

}

 

club-item {

   margin-bottom: 18px;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

   border-radius: 10px;

   overflow: hidden;

}

 

club-item .fan-art-club {

   width: 100%;

   max-height: 300px;

   object-fit: cover;

   object-position: center;

}

 

.club-info {

   padding: 24px;

}

 

.club-info > h2 {

   font-weight: lighter;

}

 

.club-info > p {

   margin-top: 10px;

   overflow: hidden;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   -webkit-line-clamp: 10; /* number of lines to show */

}

Kemudian tambahkan juga properti display dengan nilai block pada selector club-list dan club-item.


club-list {

   display: block;

   ….

}

 

….

 

club-item {

   display: block;

   ….

}

 

….

Sehingga keseluruhan kode pada berkas clublist.css akan tampak seperti ini:


club-list {

   display: block;

   margin-top: 32px;

   width: 100%;

   padding: 16px;

}

 

club-list > .placeholder {

   font-weight: lighter;

   color: rgba(0,0,0,0.5);

   -webkit-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

}

 

club-item {

   display: block;

   margin-bottom: 18px;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

   border-radius: 10px;

   overflow: hidden;

}

 

club-item .fan-art-club {

   width: 100%;

   max-height: 300px;

   object-fit: cover;

   object-position: center;

}

 

.club-info {

   padding: 24px;

}

 

.club-info > h2 {

   font-weight: lighter;

}

 

.club-info > p {

   margin-top: 10px;

   overflow: hidden;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   -webkit-line-clamp: 10; /* number of lines to show */

}

Sekarang kita coba buka kembali proyek club finder dengan menggunakan local server. Seharusnya kini semuanya sudah berjalan dengan baik.

Langkah dari ketiga solution ini bisa Anda temukan juga pada repository berikut:

https://github.com/dicodingacademy/a163-bfwd-labs/tree/109-club-finder-custom-element-solution

Shadow DOM

Menerapkan Shadow DOM pada Proyek Club Finder

Kita mulai dari <app-bar> component yuk. Pertama kita buka dulu proyek club finder dengan text editor yang kita gunakan.

Kemudian buka berkas script -> component -> app-bar.js, buat constructor dari class tersebut dan di dalamnya kita tetapkan shadow root seperti ini:


class AppBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.innerHTML = `<h2>Club Finder</h2>`;

   }

}

 

customElements.define("app-bar", AppBar);

Karena kita sudah menerapkan Shadow DOM pada AppBar, jangan lupa pada fungsi render(), kita ubah this.innerHTML menjadi this.shadowDOM.innerHTML.


class AppBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.shadowDOM.innerHTML = `<h2>Club Finder</h2>`;

   }

}

 

customElements.define("app-bar", AppBar);

Kemudian buka berkas style -> appbar.css dan pindahkan (cut) seluruh kode yang ada pada berkas tersebut.


app-bar {

   display: block;

   padding: 16px;

   width: 100%;

   background-color: cornflowerblue;

   color: white;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <h2> pada fungsi render() di berkas app-bar.js seperti ini:


class AppBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.shadowDOM.innerHTML = `

       <style>

           app-bar {

               display: block;

               padding: 16px;

               width: 100%;

               background-color: cornflowerblue;

               color: white;

               box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

           }

       </style>

       <h2>Club Finder</h2>`;

   }

}

 

customElements.define("app-bar", AppBar);

Coba kita simpan perubahan yang diterapkan kemudian lihat perubahannya pada browser.

Ups, pada browser kita dapat melihat title yang ditampilkan pada <app-bar> tampak berantakan. Untuk menanganinya, kita perlu menyesuaikan kembali style yang diterapkan pada custom element menjadi seperti ini:


class AppBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

 

   render() {

       this.shadowDOM.innerHTML = `

       <style>

           * {

               margin: 0;

               padding: 0;

               box-sizing: border-box;

           }

           :host {

               display: block;

               width: 100%;

               background-color: cornflowerblue;

               color: white;

               box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

           }

           h2 {

               padding: 16px;

           }

       </style>

       <h2>Club Finder</h2>`;

   }

}

 

customElements.define("app-bar", AppBar);

Pada perubahan styling tersebut kita menambahkan


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

 }

Yang digunakan untuk menghilangkan seluruh margin dan padding standar yang diterapkan pada element html. Dan kita juga mengubah pengaturan box-sizing menjadi border-box.

Lalu kode pada kode styling lainnya juga kita melihat bahwa selector app-bar digantikan dengan :host. Apa itu :host? Selector :host merupakan selector yang digunakan untuk menunjuk element :host yang menerapkan Shadow DOM. Pada host kita tidak dapat mengatur padding sehingga kita perlu memindahkannya pada elemen <h2>.

Setelah melakukan perubahan tersebut simpan (save) kembali perubahannya dan lihat hasilnya pada browser, seharusnya <app-bar> sudah ditampilkan dengan baik.

Karena kita sudah tidak membutuhkan lagi berkas src -> styles -> appbar.css, kita dapat menghapus berkas tersebut.

Jangan lupa untuk menghapus import css tersebut pada src -> styles -> style.css.


@import "clublist.css";

@import "searchbar.css";

 

* {

   padding: 0;

   margin: 0;

   box-sizing: border-box;

}

 

body {

   font-family: sans-serif;

}

 

main {

   width: 90%;

   max-width: 800px;

   margin: 32px auto;

}

Menerapkan Shadow DOM pada Search Bar

Setelah berhasil menerapkan Shadow DOM pada App Bar, selanjutnya kita terapkan Shadow DOM pada search bar. Silakan buka berkas src -> script -> component -> search-bar.js, kemudian buat constructor dan terapkan Shadow DOM di dalamnya.


class SearchBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

  

   set clickEvent(event) {

       this._clickEvent = event;

       this.render();

   }

 

   get value() {

       return this.querySelector("#searchElement").value;

   }

 

   render() {

       this.innerHTML = `

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

 

       this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

   }

}

 

customElements.define("search-bar", SearchBar);

Sama seperti yang kita lakukan pada component App Bar, kita ubah this.innerHTML menjadi this.shadowDOM.InnerHTML pada fungsi render().


class SearchBar extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   connectedCallback(){

       this.render();

   }

  

   set clickEvent(event) {

       this._clickEvent = event;

       this.render();

   }

 

   get value() {

       return this.querySelector("#searchElement").value;

   }

 

   render() {

       this.shadowDOM.innerHTML = `

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

 

       this.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

   }

}

 

customElements.define("search-bar", SearchBar);

Selain itu juga kita ubah pemanggilan this.querySelector menjadi this.shadowDOM.querySelector pada fungsi render() dan get value().


class SearchBar extends HTMLElement {

 

 ..........

 

   get value() {

       return this.shadowDOM.querySelector("#searchElement").value;

   }

 

   render() {

      .........

       this.shadowDOM.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);

   }

}

 

 

...........

Kemudian buka berkas src -> styles -> searchbar.css, pindahkan (cut) seluruh kode yang terdapat pada berkas tersebut.


.search-container {

   max-width: 800px;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

   padding: 16px;

   border-radius: 5px;

   display: flex;

   position: sticky;

   top: 10px;

   background-color: white;

}

 

.search-container > input {

   width: 75%;

   padding: 16px;

   border: 0;

   border-bottom: 1px solid cornflowerblue;

   font-weight: bold;

}

 

.search-container > input:focus {

   outline: 0;

   border-bottom: 2px solid cornflowerblue;

}

 

.search-container > input:focus::placeholder {

   font-weight: bold;

}

 

.search-container >  input::placeholder {

   color: cornflowerblue;

   font-weight: normal;

}

 

.search-container > button {

   width: 23%;

   cursor: pointer;

   margin-left: auto;

   padding: 16px;

   background-color: cornflowerblue;

   color: white;

   border: 0;

   text-transform: uppercase;

}

 

@media screen and (max-width: 550px){

   .search-container {

       flex-direction: column;

       position: static;

   }

 

   .search-container > input {

       width: 100%;

       margin-bottom: 12px;

   }

 

   .search-container > button {

       width: 100%;

   }

}

Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <div> pada fungsi render() di berkas search-bar.js seperti ini:


class SearchBar extends HTMLElement {

 

 .........

 

   render() {

       this.shadowDOM.innerHTML = `

       <style>

       .search-container {

           max-width: 800px;

           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

           padding: 16px;

           border-radius: 5px;

           display: flex;

           position: sticky;

           top: 10px;

           background-color: white;

       }

      

       .search-container > input {

           width: 75%;

           padding: 16px;

           border: 0;

           border-bottom: 1px solid cornflowerblue;

           font-weight: bold;

       }

      

       .search-container > input:focus {

           outline: 0;

           border-bottom: 2px solid cornflowerblue;

       }

      

       .search-container > input:focus::placeholder {

           font-weight: bold;

       }

      

       .search-container >  input::placeholder {

           color: cornflowerblue;

           font-weight: normal;

       }

      

       .search-container > button {

           width: 23%;

           cursor: pointer;

           margin-left: auto;

           padding: 16px;

           background-color: cornflowerblue;

           color: white;

           border: 0;

           text-transform: uppercase;

       }

      

       @media screen and (max-width: 550px){

           .search-container {

               flex-direction: column;

               position: static;

           }

      

           .search-container > input {

               width: 100%;

               margin-bottom: 12px;

           }

      

           .search-container > button {

               width: 100%;

           }

       }

       </style>

       <div id="search-container" class="search-container">

           <input placeholder="Search football club" id="searchElement" type="search">

           <button id="searchButtonElement" type="submit">Search</button>

       </div>

       `;

    .......

   }

}

 

customElements.define("search-bar", SearchBar);

Simpan perubahan yang dilakukan kemudian lihat hasilnya pada browser.

Komponen Search Bar tampak normal dan berfungsi dengan baik sehingga kita tidak perlu menyesuaikan lagi styling-nya.

Karena kita sudah tidak membutuhkan lagi berkas src -> styles -> searchbar.css, kita dapat menghapus berkas tersebut.

Jangan lupa untuk menghapus import css tersebut pada src -> styles -> style.css.


@import "clublist.css";

 

* {

   padding: 0;

   margin: 0;

   box-sizing: border-box;

}

 

body {

   font-family: sans-serif;

}

 

main {

   width: 90%;

   max-width: 800px;

   margin: 32px auto;

}

Menerapkan Shadow DOM pada Club List dan Club Item

Terakhir kita terapkan Shadow DOM pada komponen club list dan club item. Silakan buka berkas src -> script -> component -> club-list.js, kemudian buat constructor dan terapkan Shadow DOM di dalamnya.


import './club-item.js';

 

class ClubList extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   set clubs(clubs) {

       this._clubs = clubs;

       this.render();

   }

 

   renderError(message) {

       this.innerHTML = "";

       this.innerHTML += `<h2 class="placeholder">${message}</h2>`;

   }

 

   render() {

       this.innerHTML = "";

       this._clubs.forEach(club => {

           const clubItemElement = document.createElement("club-item");

           clubItemElement.club = club

           this.appendChild(clubItemElement);

       })

   }

}

 

customElements.define("club-list", ClubList);

Kemudian ubah seluruh kode this.innerHTML menjadi this.shadowDOM.innerHTML dan this.appendChild menjadi this.shadowDOM.appendChild.


import './club-item.js';

 

class ClubList extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   set clubs(clubs) {

       this._clubs = clubs;

       this.render();

   }

 

   renderError(message) {

       this.shadowDOM.innerHTML = "";

       this.shadowDOM.innerHTML += `<h2 class="placeholder">${message}</h2>`;

   }

 

   render() {

       this.shadowDOM.innerHTML = "";

       this._clubs.forEach(club => {

           const clubItemElement = document.createElement("club-item");

           clubItemElement.club = club

           this.shadowDOM.appendChild(clubItemElement);

       })

   }

}

 

customElements.define("club-list", ClubList);

Kemudian buka berkas src -> styles -> clublist.css dan pindahkan (cut) kode styling dengan selector club-list > .placeholder


club-list > .placeholder {

   font-weight: lighter;

   color: rgba(0,0,0,0.5);

   -webkit-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

}

Lalu tempel (paste) pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <h2> fungsi renderError() di berkas club-list.js seperti ini:


import './club-item.js';

 

class ClubList extends HTMLElement {

 

 .........

 

   renderError(message) {

       this.shadowDOM.innerHTML = `

       <style>

           club-list > .placeholder {

               font-weight: lighter;

               color: rgba(0,0,0,0.5);

               -webkit-user-select: none;

               -moz-user-select: none;

               -ms-user-select: none;

               user-select: none;

           }

       </style>

       `;

       this.shadowDOM.innerHTML += `<h2 class="placeholder">${message}</h2>`;

   }

 

 .......

}

 

customElements.define("club-list", ClubList);

Hapus child selector (>) beserta kombinatornya, sisakan .placeholder sebagai selector dari styling tersebut. Sehingga kode pada berkas ini seluruhnya tampak seperti:


import './club-item.js';

 

class ClubList extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   set clubs(clubs) {

       this._clubs = clubs;

       this.render();

   }

 

   renderError(message) {

       this.shadowDOM.innerHTML = `

       <style>

           .placeholder {

               font-weight: lighter;

               color: rgba(0,0,0,0.5);

               -webkit-user-select: none;

               -moz-user-select: none;

               -ms-user-select: none;

               user-select: none;

           }

       </style>

       `;

       this.shadowDOM.innerHTML += `<h2 class="placeholder">${message}</h2>`;

   }

 

   render() {

       this.shadowDOM.innerHTML = "" ;

       this._clubs.forEach(club => {

           const clubItemElement = document.createElement("club-item");

           clubItemElement.club = club

           this.shadowDOM.appendChild(clubItemElement);

       })

   }

}

 

customElements.define("club-list", ClubList);

Simpan perubahan tersebut dan lihat hasilnya pada browser, tampilan dari daftar club akan sangat berantakan.

Tenang kita akan memperbaikinya dengan beranjak ke berkas src -> script -> component -> club-item.js.

Pada berkas tersebut buat sebuah constructor dan terapkan Shadow DOM di dalamnya.


class ClubItem extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   set club(club) {

       this._club = club;

       this.render();

   }

 

   render() {

       this.innerHTML = `

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

}

 

customElements.define("club-item", ClubItem);

Seperti biasa jangan lupa untuk mengubah this.innerHTML menjadi this.shadowDOM.innerHTML ya.


class ClubItem extends HTMLElement {

 

   constructor() {

       super();

       this.shadowDOM = this.attachShadow({mode: "open"});

   }

 

   set club(club) {

       this._club = club;

       this.render();

   }

 

   render() {

       this.shadowDOM.innerHTML = `

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

}

 

customElements.define("club-item", ClubItem);

Selanjutnya buka kembali berkas src -> styles -> clublist.css dan pindahkan styling berikut:


club-item {

   display: block;

   margin-bottom: 18px;

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

   border-radius: 10px;

   overflow: hidden;

}

 

club-item .fan-art-club {

   width: 100%;

   max-height: 300px;

   object-fit: cover;

   object-position: center;

}

 

.club-info {

   padding: 24px;

}

 

.club-info > h2 {

   font-weight: lighter;

}

 

.club-info > p {

   margin-top: 10px;

   overflow: hidden;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   -webkit-line-clamp: 10; /* number of lines to show */

}

Tempel pada nilai this.shadowDOM.innerHTML dengan dibungkus oleh element <style> tepat sebelum element <img> pada fungsi render() di berkas club-item.js seperti ini:


class ClubItem extends HTMLElement {

 

 .......

 

   render() {

       this.shadowDOM.innerHTML = `

           <style>

               club-item {

                   display: block;

                   margin-bottom: 18px;

                   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

                   border-radius: 10px;

                   overflow: hidden;

               }

              

               club-item .fan-art-club {

                   width: 100%;

                   max-height: 300px;

                   object-fit: cover;

                   object-position: center;

               }

              

               .club-info {

                   padding: 24px;

               }

              

               .club-info > h2 {

                   font-weight: lighter;

               }

              

               .club-info > p {

                   margin-top: 10px;

                   overflow: hidden;

                   text-overflow: ellipsis;

                   display: -webkit-box;

                   -webkit-box-orient: vertical;

                   -webkit-line-clamp: 10; /* number of lines to show */

               }

           </style>

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

}

 

......

Sesuaikan kembali selector pada styling tersebut menjadi seperti ini:


class ClubItem extends HTMLElement {

 

  .....

 

   render() {

       this.shadowDOM.innerHTML = `

           <style>

               * {

                   margin: 0;

                   padding: 0;

                   box-sizing: border-box;

               }

               :host {

                   display: block;

                   margin-bottom: 18px;

                   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

                   border-radius: 10px;

                   overflow: hidden;

               }

              

               .fan-art-club {

                   width: 100%;

                   max-height: 300px;

                   object-fit: cover;

                   object-position: center;

               }

              

               .club-info {

                   padding: 24px;

               }

              

               .club-info > h2 {

                   font-weight: lighter;

               }

              

               .club-info > p {

                   margin-top: 10px;

                   overflow: hidden;

                   text-overflow: ellipsis;

                   display: -webkit-box;

                   -webkit-box-orient: vertical;

                   -webkit-line-clamp: 10; /* number of lines to show */

               }

           </style>

           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

           <div class="club-info">

               <h2>${this._club.name}</h2>

               <p>${this._club.description}</p>

           </div>`;

   }

}

 

........

Simpan perubahan tersebut dan lihat pada browser, seharusnya tampilan daftar tim sudah kembali normal.

Oh ya, sebelum beranjak kita buka kembali berkas src -> styles -> clublist.css. Di sana masih terdapat satu rule styling berikut:


club-list {

   display: block;

   margin-top: 32px;

   width: 100%;

   padding: 16px;

}

Jangan hapus rule styling tersebut karena kita masih menggunakannya untuk mengatur jarak daftar liga yang ditampilkan. Namun sebaiknya kita pindahkan rule styling tersebut pada berkas src -> styles -> style.css.


@import "clublist.css";

 

* {

   padding: 0;

   margin: 0;

   box-sizing: border-box;

}

 

body {

   font-family: sans-serif;

}

 

main {

   width: 90%;

   max-width: 800px;

   margin: 32px auto;

}

 

club-list {

   display: block;

   margin-top: 32px;

   width: 100%;

   padding: 16px;

}

Dengan begitu kita dapat leluasa menghapus berkas clublist.css dan menghapus @import pada berkas style.css.

Selamat! Kita sudah berhasil menerapkan Shadow DOM pada seluruh custom element yang digunakan di proyek Club Finder. Sampai ketemu di materi selanjutnya ya!

Langkah dari solution ini bisa Anda temukan juga pada repository berikut: https://github.com/dicodingacademy/a163-bfwd-labs/tree/110-club-finder-shadow-dom-solution

Contoh Nested Custom Element Di Javascript

2020-04-28T19:13:00.000+07:00

Ketika menggunakan custom element, mungkin terdapat keadaan di mana kita membutuhkan custom element berada di dalam custom element lain. Contohnya, banyak website saat ini yang menampilkan data berupa list, entah itu daftar artikel ataupun item belanja.

Biasanya setiap daftar yang ditampilkan ditampung dalam sebuah container <div>. Kemudian item yang sama ditampilkan secara berulang dengan data yang berbeda pada container tersebut.

Web component dapat memudahkan dalam mengorganisir daftar item yang ditampilkan dalam bentuk list menggunakan container. Caranya kita membuat dua custom element yatu container, dan itemnya. Container digunakan untuk menampung elemen item di dalamnya. Selain itu pada container juga data (array) diberikan. Nantinya container-lah yang akan membuat elemen item di dalamnya berdasarkan data yang diberikan.

Belum terbayang seperti apa? Berikut contohnya:

index.html


<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

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

   <title>repl.it</title>

   <link href="style.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

   <script src="script.js" type="module"></script>

 </body>

</html>

script.js


import "./article-list.js";

import articles from "./articles.js";

 

 

const articleListElement = document.createElement("article-list");

articleListElement.articles = articles;

 

 

document.body.appendChild(articleListElement);

article-list.js


import "./article-item.js"

 

 

class ArticleList extends HTMLElement {

 set articles(articles) {

   this._articles = articles;

   this.render();

 }

 

 

 render() {

   this._articles.forEach(article => {

     const articleItemElement = document.createElement("article-item");

     // memanggil fungsi setter article() pada article-item.

     articleItemElement.article = article;

     this.appendChild(articleItemElement);

   })

 }

}

 

customElements.define("article-list", ArticleList);

article-item.js


class ArticleItem extends HTMLElement {

 set article(article) {

   this._article = article;

   this.render();

 }

 

 

 render() {

   this.innerHTML = `

    <img class="featured-image" src="${this._article.featuredImage}">

    <div class="article-info">

        <h2><a href="${this._article.id}">${this._article.title}</a></h2>

        <p>${this._article.description}</p>

    </div>

  `;

 }

}

 

 

customElements.define("article-item", ArticleItem);

articles.js


const articles = [

 {

   id: 1,

   title: "Lorem Ipsum Dolor",

   featuredImage: "https://i.picsum.photos/id/204/536/354.jpg",

   description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

 

 

 },

 {

   id: 2,

   title: "Lorem Ipsum Dolor",

   featuredImage: "https://i.picsum.photos/id/209/536/354.jpg",

   description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

 

 

 },

 {

   id: 3,

   title: "Lorem Ipsum Dolor",

   featuredImage: "https://i.picsum.photos/id/206/536/354.jpg",

   description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

 

 

 },

 {

   id: 4,

   title: "Lorem Ipsum Dolor",

   featuredImage: "https://i.picsum.photos/id/212/536/354.jpg",

   description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

 

 

 }

]

 

 

export default articles;

style.css


* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  

  body {

    padding: 16px;

  }

  

  article-list {

    display: block;

    max-width: 800px;

    margin: 0 auto;

  }

  

  article-item {

    display: block;

    margin-bottom: 18px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    border-radius: 10px;

    overflow: hidden;

  }

  

  article-item > .featured-image {

    width: 100%;

    max-height: 300px;

    object-fit: cover;

    object-position: center;

  }

  

  article-item > .article-info {

    padding: 24px;

  }

  

  article-item > .article-info > p {

    margin-top: 10px;

  }

Pada kode di atas kita bisa melihat bahwa terdapat dua buah custom component yaitu <article-list> dan <article-item>. Pada article-list.js terdapat fungsi setter articles yang berfungsi untuk menyimpan nilai articles pada properti this._articles.


 set articles(articles) {

   this._articles = articles;

   this.render();

 }

Kemudian properti tersebut digunakan pada fungsi render() untuk ditampilkan satu persatu melalui <article-item>.


render() {

   this._articles.forEach(article => {

     const articleItemElement = document.createElement("article-item");

     // memanggil fungsi setter article() pada article-item.

     articleItemElement.article = article;

     this.appendChild(articleItemElement);

   })

 }

Dengan begitu, untuk menampilkan data pada script.js akan lebih mudah. Kita tidak perlu melakukan proses perulangan lagi di sana karena proses tersebut langsung dilakukan ketika menggunakan element <article-list>. Kita cukup memberikan nilai array yang akan ditampilkan.


import "./article-list.js";

import articles from "./articles.js";

 

const articleListElement = document.createElement("article-list");

articleListElement.articles = articles;

 

document.body.appendChild(articleListElement);

Semakin mudah kita menggunakan sebuah element maka akan semakin baik bukan? Walaupun terlihat agak sedikit merepotkan dalam membuatnya, perlu Anda ingat bahwa web component ini bersifat reusable. Artinya, jika kita ingin membuat komponen serupa, kita tidak perlu membuatnya dari awal.

Dengan menjalankan kode di atas, maka hasilnya akan tampak seperti ini:

Cara Membuat Callback Function di Javascript

2020-04-28T00:37:00.000+07:00

Hal yang membuat bingung ketika kita bekerja dengan synchronous dan asynchronous program adalah bagaimana menangani suatu nilai yang didapatkan secara asynchronous pada program yang berjalan secara synchronous.

Contohnya seperti kode berikut:


const getCake = () => {

 let cake = null;

 console.log("Sedang membuat kue, silakan tunggu ....")

 setTimeout(() => {

   cake = "Kue Selesai!"

 }, 3000)

 return cake;

}

 

const cake = getCake();

console.log(cake);

 

/*output:

Sedang membuat kue, silakan tunggu ....

null

*/

Jika kita melakukan hal seperti ini untuk mencetak nilai cake yang sesungguhnya, maka hal tersebut tidak akan pernah terjadi. Karena seperti yang sudah kita ketahui fungsi setTimeout() tidak akan menghentikan JavaScript untuk mengeksekusi kode yang ada selanjutnya. Jadi fungsi getCake() akan selalu mengembalikan nilai null, karena kode return cake akan dieksekusi terlebih dahulu dibandingkan dengan cake = “Kue Selesai!”. Kode asynchronous perlu disusun dengan cara yang berbeda dari synchronous code. Cara paling dasar adalah dengan menggunakan callback function.

Apa itu callback function? Mari kita bayangkan kembali melalui pandangan dunia nyata. Kita menunggu pesanan kopi datang di meja kita tapi , pada saat itu juga kita tidak bisa berada terus di tempat itu karena ada urusan mendadak. Pada kasus ini mungkin terdapat dua aksi yang bisa kita lakukan:

(Synchronous) Kita tetap menunggu di meja hingga kopi itu datang dan kemudian meninggalkan kedai kopi.
(Asynchronous) Kita meminta tolong kepada teman kita untuk menerima kopi itu, dan bertemu nanti untuk memberikan kopinya. Sehingga kita tidak perlu menunggu untuk meninggalkan kedai kopi.

Nah pada JavaScript, teman kita berperan layaknya callback function. Ia diperintahkan pada sebuah fungsi asynchronous kemudian akan dipanggil/digunakan ketika tugas itu selesai.

Bagaimana cara melakukannya? Yang pertama kita tambahkan parameter dengan nama callback pada fungsi asynchronous.


const getCake = callback => {

 let cake = null;

 console.log("Sedang membuat kue, silakan tunggu ....")

 setTimeout(() => {

   cake = "Kue Selesai!";

 }, 3000)

 return cake;

}

Kemudian kita panggil/gunakan callback yang diisikan dengan data yang akan dibawa (cake) ketika task selesai dilakukan.


setTimeout(function() {

   cake = "Kue Selesai!";

   callback(cake);

 }, 3000)

Setelah menggunakan callback, fungsi tidak perlu lagi mengembalikan nilai. Sehingga kita bisa hapus kode return cake;. Sehingga keseluruhan fungsi akan tampak seperti ini:


const getCake = callback => {

 let cake = null;

 console.log("Sedang membuat kue, silakan tunggu ....")

 setTimeout(() => {

   cake = "Kue Selesai!";

   callback(cake);

 }, 3000)

}

Kemudian untuk menggunakan fungsi getCake, kita ubah kode dari:


const cake = getCake();

console.log(cake);

Menjadi:


getCake(cake => {

 console.log(cake);

})

Sehingga ketika dijalankan akan sesuai dengan harapan kita.


const getCake = callback => {

 let cake = null;

 console.log("Sedang membuat kue, silakan tunggu ....")

 setTimeout(() => {

   cake = "Kue Selesai!";

   callback(cake);

 }, 3000)

}

 

getCake(cake => {

 console.log(cake);

})

 

/* output:

Sedang membuat kue, silakan tunggu ....

---- setelah 3 detik ----

Kue Selesai!

*/

Callback Hell

Kita sudah mengetahui bahwa callback dibutuhkan untuk mendapatkan nilai yang berasal dari asynchronous function. Lantas bagaimana jika terdapat proses satu sama lain yang saling bergantungan? Contohnya, untuk membuat kue tahapan yang perlu kita lakukan adalah:

Mempersiapkan bahan
Membuat adonan
Menyiapkan adonan ke cetakan
Memanggang adonan

Tahapan tersebut sangat tergantung satu sama lain. Kita tidak bisa memanggang adonan sebelum membuat adonannya, dan kita tidak bisa membuat adonan tanpa mempersiapkan bahannya terlebih dahulu. Jika seluruh tahapan tersebut berjalan secara synchronous, mungkin kita bisa melakukanya seperti ini:


function makeACake(...rawIngredients) {

 const ingredients = gatheringIngredients(rawIngredients),

 dough = makeTheDough(ingredients),

 pouredDough = pourDough(dough),

 cake = bakeACake(pourDough),

 console.log(cake);

}

Namun jika fungsi-fungsi tersebut berjalan secara asynchronous, maka kita akan membuat yang namanya callback hell. Callback hell terjadi karena banyak sekali callback function yang bersarang karena saling membutuhkan satu sama lain, sehingga kode akan tampak seperti ini:


function makeACake(...rawIngredients) {

 gatheringIngredients(rawIngredients, function(ingridients) {

   makeTheDough(ingridients, function(dough) {

     pourDough(dough, function(pouredDough) {

       bakeACake(pouredDough, function(cake) {

         console.log(cake);

       });

     });

   });

 });

}

Melihat kode seperti ini saja, kepala jadi pusing. Terbayang sulitnya memelihara kode ini di masa yang akan datang.

Lantas apa solusi agar kita dapat menghindari callback hell? Salah satunya adalah dengan menggunakan Promise.


function makeACake(...rawIngredients) {

 gatheringIngredients(rawIngredients)

 .then(makeTheDough)

 .then(pourDough)

 .then(bakeACake)

 .then(console.log);

}

Dengan Promise, kita dapat meminimalisir callback hell dan mengubahnya menjadi kode yang sangat mudah dibaca. Bahkan dengan kode seperti itu, non-developer pun dapat mengerti apa maksud dari kode tersebut

Cara Membuat Fungsi setTimeout didalam Javascript

2020-04-28T00:06:00.000+07:00

Fungsi setTimeout() merupakan cara yang paling mudah untuk membuat kode kita dijalankan secara asynchronous.

Fungsi ini menerima dua buah parameter.

Pertama adalah fungsi yang akan dijalankan secara asynchronous, dan kedua adalah nilai number dalam milisecond sebagai nilai tunggu sebelum fungsi dijalankan. Contoh penggunaannya adalah seperti ini:


console.log("Selamat datang!");

setTimeout(() => {

 console.log("Terimakasih sudah mampir, silakan datang kembali!")

}, 3000)

console.log("Ada yang bisa dibantu?")

Jika kita hanya mengenal program secara synchronous, maka kita dapat membayangkan hasilnya memiliki urutan sebagai berikut:

Mencetak -> Selamat datang!
Menunggu selama tiga detik
Mencetak -> Terima kasih sudah mampir, silakan datang kembali!
Mencetak -> Ada yang bisa dibantu?

Namun nyatanya setTimeout() tidak akan menghentikan JavaScript untuk melakukan eksekusi kode pada baris berikutnya. Sehingga urutannya menjadi seperti berikut:

Mencetak -> Selamat datang!
Mencetak -> Ada yang bisa dibantu?
Menunggu selama tiga detik
Mencetak -> Terimakasih sudah mampir, silakan datang kembali!

Jika kode tersebut dijalankan, maka akan menampilkan output sebagai berikut:

Static Method didalam Class Javascript

2020-04-27T23:55:00.000+07:00

Seluruh kendaraan pasti butuh yang namanya perawatan bukan? Jika iya, tentu kita perlu membuat method repair untuk memperbaiki kendaraan tersebut.

Dalam analogi dunia nyata, ketika kendaraan mengalami kerusakan maka kendaraan tersebut akan diperbaiki di bengkel (factory), sehingga kita perlu membuat class baru yang berperan sebagai factory, sebutlah class tersebut VehicleFactory. Di dalam kelas VehicleFactory terdapat satu method repair() yang dapat menerima banyak kendaraan sebagai parameternya.


class Vehicle {

  constructor(licensePlate, manufacture) {

      this.licensePlate = licensePlate;

      this.manufacture = manufacture;

      this.engineActive = false;

  }

   /*

  kode lainnya

  */

}

 

/* kode lainnya dalam pembuatan class Car, 

Motorcycle, dsb. */

 

 

class VehicleFactory {

 repair(vehicles) {

    vehicles.forEach(vehicle => {

      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)

    })

  }

}

Untuk mengakses method dari class, sejauh ini kita perlu membuat instance dari classnya terlebih dahulu. Sehingga untuk memanggil repair(), kita perlu membuat instance dari class VehicleFactory


const johnCar = new Car("H121S", "Honda", 4);

const tomMotor = new Motorcycle("GF121J", "Yamaha", 2);

const dimasCar = new Car("TA1408K", "Tesla", 4);

 

/* Membuat instance untuk memanggil fungsi repair */

const vehicleFactory = new VehicleFactory();

vehicleFactory.repair([johnCar, tomMotor, dimasCar]);

 

/* output:

Kendaraan H121S sedang melakukan perawatan

Kendaraan GF121J sedang melakukan perawatan

Kendaraan TA1408K sedang melakukan perawatan

*/

Kode tersebut berjalan sesuai harapan namun tidak efektif. Mengapa? Karena kita perlu membuat instance untuk sekedar memanggil satu fungsi dari class-nya tersebut. Membuat instance adalah membuat sebuah objek baru yang terbentuk melalui blueprint sehingga membutuhkan memori ekstra. Jika kita dapat mengakses method tersebut tanpa melalui instance mengapa tidak? Pada kasus inilah kita membutuhkan sebuah static method. Static method merupakan method yang tidak dapat dipanggil oleh instance dari class, namun dapat dipanggil melalui class-nya sendiri.

Pada ES6 class kita dapat membuat static method dengan menambahkan keyword static sebelum deklarasi method-nya:


class Vehicle {

  constructor(licensePlate, manufacture) {

      this.licensePlate = licensePlate;

      this.manufacture = manufacture;

      this.engineActive = false;

  }

   /*

  kode lainnya

  */

}

 

/* kode lainnya dalam pembuatan class Car, 

Motorcycle, dsb. */

 

class VehicleFactory {

 static repair(vehicles) {

    vehicles.forEach(vehicle => {

      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)

    })

  }

}

Kemudian untuk memanggil methodnya kita bisa panggil melalui class Vehicle kemudian repair().

Seluruh kendaraan pasti butuh yang namanya perawatan bukan? Jika iya, tentu kita perlu membuat method repair untuk memperbaiki kendaraan tersebut. Dalam analogi dunia nyata, ketika kendaraan mengalami kerusakan maka kendaraan tersebut akan diperbaiki di bengkel (factory), sehingga kita perlu membuat class baru yang berperan sebagai factory, sebutlah class tersebut VehicleFactory. Di dalam kelas VehicleFactory terdapat satu method repair() yang dapat menerima banyak kendaraan sebagai parameternya.


class Vehicle {

  constructor(licensePlate, manufacture) {

      this.licensePlate = licensePlate;

      this.manufacture = manufacture;

      this.engineActive = false;

  }

   /*

  kode lainnya

  */

}

 

/* kode lainnya dalam pembuatan class Car, 

Motorcycle, dsb. */

 

 

class VehicleFactory {

 repair(vehicles) {

    vehicles.forEach(vehicle => {

      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)

    })

  }

}

Untuk mengakses method dari class, sejauh ini kita perlu membuat instance dari classnya terlebih dahulu. Sehingga untuk memanggil repair(), kita perlu membuat instance dari class VehicleFactory


const johnCar = new Car("H121S", "Honda", 4);

const tomMotor = new Motorcycle("GF121J", "Yamaha", 2);

const dimasCar = new Car("TA1408K", "Tesla", 4);

 

/* Membuat instance untuk memanggil fungsi repair */

const vehicleFactory = new VehicleFactory();

vehicleFactory.repair([johnCar, tomMotor, dimasCar]);

 

/* output:

Kendaraan H121S sedang melakukan perawatan

Kendaraan GF121J sedang melakukan perawatan

Kendaraan TA1408K sedang melakukan perawatan

*/

Pada ES6 class kita dapat membuat static method dengan menambahkan keyword static sebelum deklarasi method-nya:


class Vehicle {

  constructor(licensePlate, manufacture) {

      this.licensePlate = licensePlate;

      this.manufacture = manufacture;

      this.engineActive = false;

  }

   /*

  kode lainnya

  */

}

 

/* kode lainnya dalam pembuatan class Car, 

Motorcycle, dsb. */

 

class VehicleFactory {

 static repair(vehicles) {

    vehicles.forEach(vehicle => {

      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)

    })

  }

}

Kemudian untuk memanggil methodnya kita bisa panggil melalui class Vehicle kemudian repair().

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

2020-04-27T23:43:00.000+07:00

Dalam gambaran dunia nyata, banyak objek yang berbeda tetapi punya kesamaan atau kemiripan tertentu.

Contohnya mobil dengan motor memiliki banyak kesamaan karena objek tersebut merupakan kendaraan. Mobil merupakan kendaraan darat begitu juga dengan motor. Mungkin yang membedakan objek tersebut adalah jumlah roda dan kapasitas penumpang yang dapat ditampung.

Sama halnya pada OOP, beberapa objek yang berbeda bisa saja memiliki kesamaan dalam hal tertentu. Di situlah konsep inheritance atau pewarisan harus diterapkan. Pewarisan dapat mencegah kita melakukan perulangan kode. Untuk lebih memahaminya lihatlah contoh bagan pada sebuah kelas berikut:

Pada bagan di atas kita dapat lihat class Car, Motorcycle, Plane, dan Helicopter memiliki banyak properti yang sama seperti lisencePlate, manufacture, dan engineActive. Kemudian memiliki beberapa method yang sama seperti startEngines(), info(), dan parking().

Jika kita ubah diagram class Car di atas menjadi sebuah kode maka kode tampak seperti ini:


class Car {

    constructor(licensePlate, manufacture, wheels) {

        this.licensePlate = licensePlate;

        this.manufacture = manufacture;

        this.wheels = wheels;

        this.engineActive = false;

    }

    

    startEngines() {

        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);

    }

    

    info() {

        console.log(`Nomor Kendaraan: ${this.licensePlate}`);

        console.log(`Manufacture: ${this.manufacture}`);

        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);

    }

    

    droveOff() {

        console.log(`Kendaraan ${this.licensePlate} melaju!`)

    }

    

    openDoor() {

        console.log(`Membuka pintu!`)

    }

    

    parking() {

        console.log(`Kendaraan ${this.licensePlate} parkir!`);

    }

}

Tidak ada masalah dengan kode tersebut, tetapi jika kita akan membuat kelas lainnya seperti Motorcycle, Plane, dan Helicopter maka kita harus menuliskan properti dan method yang sama secara berulang.

Dengan teknik inheritance, kita bisa mengelompokkan properti dan method yang sama. Caranya dengan membuat sebuah kelas baru yang nantinya akan diturunkan sifatnya pada class lain:

Ketika class Vehicle telah dibuat, kelas lainnya dapat melakukan extends pada kelas tersebut untuk mewarisi sifatnya. Dalam pewarisan, class Vehicle dapat disebut sebagai super atau parent class. Kelas yang mewarisi sifat dari parent class disebut dengan child class.

Pada JavaScript jika kita ingin mewariskan sifat class, lakukan dengan keyword extends seperti berikut:


class ChildClass extends ParentClass {

    

}

Sebagai contoh mari kita buat class Vehicle yang nantinya akan kita gunakan sebagai parent class.


class Vehicle {

    constructor(licensePlate, manufacture) {

        this.licensePlate = licensePlate;

        this.manufacture = manufacture;

        this.engineActive = false;

    }

    

    startEngines() {

        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);

    }

    

    info() {

        console.log(`Nomor Kendaraan: ${this.licensePlate}`);

        console.log(`Manufacture: ${this.manufacture}`);

        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);

    }

    

    parking() {

        console.log(`Kendaraan ${this.licensePlate} parkir!`);

    }

}

Kemudian kita bisa membuat class Car sebagai child class dari Vehicle.


class Car extends Vehicle {

   constructor(licensePlate, manufacture, wheels) {

       super(licensePlate, manufacture);

       this.wheels = wheels;

   }

 

   droveOff() {

     console.log(`Kendaraan ${this.licensePlate} melaju!`);

   }

 

   openDoor() {

     console.log(`Membuka pintu!`);

   }

}

Dengan begitu selain properti dan method yang terdapat di dalamnya, class Car juga dapat mengakses seluruh properti dan method yang terdapat pada class Vehicle.


class Vehicle {

   constructor(licensePlate, manufacture) {

       this.licensePlate = licensePlate;

       this.manufacture = manufacture;

       this.engineActive = false;

   }

  

   startEngines() {

       console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);

   }

  

   info() {

       console.log(`Nomor Kendaraan: ${this.licensePlate}`);

       console.log(`Manufacture: ${this.manufacture}`);

       console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);

   }

  

   parking() {

       console.log(`Kendaraan ${this.licensePlate} parkir!`);

   }

}

 

class Car extends Vehicle {

   constructor(licensePlate, manufacture, wheels) {

       super(licensePlate, manufacture);

       this.wheels = wheels;

   }

 

   droveOff() {

     console.log(`Kendaraan ${this.licensePlate} melaju!`);

   }

 

   openDoor() {

     console.log(`Membuka pintu!`);

   }

}

 

const car = new Car("H121S", "Honda", 4);

car.startEngines();

 

/* output:

Mesin kendaraan H121S dinyalakan!

*/

Oiya pada constructor class Car, kita melihat penggunaan super(), apa itu maksudnya? Keyword super digunakan untuk mengakses properti dan method yang ada pada induk class ketika berada pada child class. Jadi super(lisencePlate, manufacture) di atas berarti kita mengakses constructor dari parent class dan mengirimkan lisencePlate, dan manufacture sebagai data yang dibutuhkan olehnya agar objek (instance) Car berhasil dibuat.

Penggunaan super sangat berguna ketika kita hendak menjalankan method overriding pada method parent. Contohnya kita akan melakukan method overriding pada method info() dengan menambahkan informasi jumlah roda pada mobil, maka kita dapat melakukannya dengan seperti ini:


class Car extends Vehicle {

   constructor(licensePlate, manufacture, wheels) {

       super(licensePlate, manufacture);

       this.wheels = wheels;

   }

 

   droveOff() {

     console.log(`Kendaraan ${this.licensePlate} melaju!`);

   }

 

   openDoor() {

     console.log(`Membuka pintu!`);

   }

 

   /* overriding method info dari parent class */

   info() {

     super.info();

     console.log(`Jumlah roda: ${this.wheels}`);

   }

}

 

const johnCar = new Car("H121S", "Honda", 4);

johnCar.info();

 

/* output:

Nomor Kendaraan: H121S

Manufacture: Honda

Mesin: Inactive

Jumlah roda: 4

*/

Dalam melakukan pewarisan kelas, tidak ada tingkatan yang membatasinya. Maksudnya, kita dapat mewariskan sifat kelas A pada kelas B, lalu kelas B mewarisi sifatnya kembali pada kelas C dan selanjutnya. Sama halnya dengan Nenek kita mewarisi sifatnya kepada orang tua kita kemudian orang tua kita mewarisi sifatnya kepada kita.

Sehingga jika dilihat dari bagan sebelumnya, class tersebut masih bisa dikelompokkan kembali menjadi seperti ini:

Cara Menambahkan Method didalam Class Javascript

2020-04-27T23:21:00.000+07:00

Untuk menambahkan method pada class, kita juga cukup menuliskannya pada body class, tidak perlu melalui prototype seperti menggunakan constructor function.


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

    

    startEngines() {

        console.log("Mesin dinyalakan");

        this.enginesActive = true;

    }

    

    info() {

        console.log(`Manufacture: ${this.manufacture}`);

        console.log(`Color: ${this.color}`);

        console.log(`Engines: ${this.manufacture ? "Active" : "Inactive"}`);

    }

}

 

const johnCar = new Car("Honda", "Red");

 

johnCar.startEngines();

johnCar.info();

 

 

/* output:

Mesin dinyalakan

Manufacture: Honda

Color: Red

Engines: Active

*/

Dengan menggunakan class, walaupun kita menuliskan method pada body class, namun method tersebut tetap berada pada prototype chain miliki instance yang terbuat. Kita bisa melihat bagaimana objek yang dibuat menggunakan class pada console browser

Property Accessor didalam Object Class Javascript

2020-04-27T23:17:00.000+07:00

Melalui objek class kita juga dapat mengubah nilai properti seperti ini:


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

}

 

const johnCar = new Car("Honda", "Red");

console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: Red

 

johnCar.color = "White"; // Mengubah nilai properti color menjadi white

 

console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: White

Dengan class kita juga dapat mengimplementasi getter/setter sebuah properti menjadi sebuah method seperti ini:


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this._color = color;

        this.enginesActive = false;

    }

    

    get color() {

        return `Warna mobile ${this._color}`;

    }

    

    set color(value) {

        console.log(`Warna mobil diubah dari ${this._color} menjadi ${value}`);

        this._color = value;

    }

}

 

const johnCar = new Car("Honda", "Red");

console.log(johnCar.color); // output -> Warna Mobil: Red

johnCar.color = "White"; // Mengubah nilai properti color menjadi white

console.log(johnCar.color); // output -> Warna Mobil: White

Perhatikan juga ketika kita menerapkan getter/setter pada properti class. Kita perlu mengubah atau membedakan penamaan properti aslinya dengan property accessor yang kita buat. Berdasarkan code convention yang ada kita perlu mengubah properti asli class-nya dengan menambahkan underscore di depan nama propertinya (_color). Tanda underscore berfungsi sebagai tanda bahwa properti _color tidak sebaiknya diakses langsung, namun harus melalui property accessor (getter/setter)

Cara Membuat Instance di Dalam Class Javascript

2020-04-27T23:04:00.000+07:00

Setelah kita membuat class pada JavaScript, lantas bagaimana cara membuat instance dari class tersebut?

Tapi sebelumnya, apa itu instance? Instance merupakan objek yang memiliki properti dan method yang telah ditentukan oleh blueprint-nya (class), atau singkatnya adalah objek yang merupakan hasil realisasi dari sebuah blueprint.

Sama seperti constructor function, untuk membuat instance dari class pada ES6 kita gunakan keyword new.


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

}

 

const johnCar = new Car("Honda", "Red");

Pembuatan class menggunakan ES6 lebih ketat dibandingkan dengan constructor function, di mana dalam pembuatan instance wajib menggunakan keyword new. Jika kita tidak menuliskannya, maka akan terjadi error seperti ini:


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

}

 

const johnCar = Car("Honda", "Red");

 

/* error:

TypeError: Class constructor Car cannot be invoked without 'new'

*/

Kita juga dapat membuat banyak instance dari class yang sama, dan tentunya objek yang kita buat memiliki karakteristik (properti dan method) yang sama. Walaupun sama, namun nilai dari propertinya bersifat unik atau bisa saja berbeda. Contohnya seperti ini:


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

}

 

const johnCar = new Car("Honda", "Red");

const adamCar = new Car("Tesla", "Black");

 

console.log(johnCar.manufacture);

console.log(adamCar.manufacture);

 

/* output:

Honda

Tesla

*/

Variabel johnCar dan adamCar merupakan sebuah objek dari Car. Tentu keduanya akan memiliki properti manufacture, color, dan enginesActive. Namun pada output kita melihat bahwa nilai dari properti kedua objek tersebut berbeda, karena kita dapat memberikan nilai yang berbeda pada saat objeknya dibuat.

Constructor didalam Javascript

2020-04-27T23:03:00.000+07:00

Deklarasi class menggunakan ES6 memiliki sifat yang sama seperti pembuatan class menggunakan function constructor (seperti contoh sebelumnya).

Namun alih-alih menggunakan function constructor dalam menginisialisasi propertinya, class ini memisahkan constructornya dan ditempatkan pada body class menggunakan method spesial yang dinamakan constructor.


class Car {

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

}

constructor biasanya hanya digunakan untuk menetapkan nilai awal pada properti berdasarkan nilai yang dikirimkan pada constructor. Namun sebenarnya kita juga dapat menuliskan logika di dalam constructor jika memang kita memerlukan beberapa kondisi sebelum nilai properti diinisialisasi.

Kita juga melihat penggunaan this pada constructor. Konteks dalam class, keyword this merujuk pada instance dari class tersebut. Sehingga this dapat digunakan untuk mengelola properti yang terdapat pada instance.

Apa Itu Class di Javascript?

2020-04-27T22:54:00.000+07:00

Dalam paradigma Object-Oriented Programming (OOP), class merupakan sebuah blueprint yang dapat dikembangkan untuk membuat sebuah objek.

Blueprint ini merupakan sebuah template yang di dalamnya menjelaskan seperti apa perilaku dari objek itu (berupa properti ataupun method).

Paradigma OOP selalu digambarkan dengan kehidupan nyata. Visualisasi di atas mencontohkan gambaran umum OOP di mana terdapat sebuah blueprint kucing, nilai yang dimiliki kucing, dan kemampuan yang dapat dilakukan olehnya.

Dalam OOP blueprint tersebut dikenal dengan class (kelas), nilai yang dimiliki olehnya dikenal dengan properti, kemampuan yang dimilikinya dikenal sebagai behaviour/method dan realisasi dari sebuah blueprint tersebut disebut instance.

Dalam dunia pemrograman khususnya dalam paradigma OOP, kita sering membuat banyak objek dengan jenis yang sama. Dengan membuat blueprint ini kita dapat mengurangi duplikasi kode dalam membuat objek yang serupa

Kebanyakan bahasa pemrograman memanfaatkan class dalam penerapan paradigma OOP. Pada JavaScript tidak ada konsep class murni bahkan hingga saat ini. Namun bukan berarti kita tidak bisa menerapkan paradigma OOP sepenuhnya.

Seperti yang kita ketahui, class pada OOP merupakan sebuah blueprint. Jika berbicara mengenai blueprint, JavaScript memiliki konsep untuk membuatnya tanpa melalui class. Konsep tersebut adalah prototype. Sejak awal developer menggunakan konsep ini dalam menerapkan paradigma OOP di JavaScript.

Walaupun dapat menggantikan class, konsep prototype tidak serupa dengan class pada bahasa lain. Terlebih pada penulisan sintaknya. Hal ini menjadikan banyak developer kebingungan khususnya developer yang dasarnya dari bahasa class basis (seperti Java, C++, C#, Swift, etc.). Meskipun banyak juga developer yang merasa bahwa class tidak diperlukan pada JavaScript, namun fitur class ini tetap menjadi salah satu yang dikembangkan pada ECMAScript 6.

A Class Before ES6

Sebelum ES6, Hal yang paling mendekati dengan class yaitu membuat sebuah objek menggunakan constructor function dan keyword new, lalu untuk menambahkan method kita gunakan konsep prototype.


function Car(manufacture, color) {

    this.manufacture = manufacture;

    this.color = color;

    this.enginesActive = false;

}

 

Car.prototype.startEngines = function () {

    console.log('Mobil dinyalakan...');

    this.enginesActive = true;

};

 

Car.prototype.info = function () {

    console.log("Manufacture: " + this.manufacture);

    console.log("Color: " + this.color);

    console.log("Engines: " + (this.enginesActive ? "Active" : "Inactive"));

}

 

var johnCar = new Car("Honda", "Red");

johnCar.startEngines();

johnCar.info();

 

/* output: 

Mobil dinyalakan...

Manufacture: Honda

Color: Red

Engines: Active

*/

Pada kode di atas Car merupakan constructor function yang akan membuat instance Car baru setiapkan kode new Car() dieksekusi. Melalui Car.prototype, method startEngines() dan carInfo() diwarisi pada setiap instance Car yang dibuat, sehingga johnCar (sebagai instance Car) dapat mengakses kedua method tersebut.

Teknik dasar ini yang digunakan dalam membuat class di JavaScript sebelum ES6.

“Mengapa method pada instance harus disimpan pada prototype atau __proto__ ? Mengapa tidak disimpan pada constructor sama seperti properti?
Alasannya adalah jika kita menyimpan method pada constructor maka method tersebut akan selalu dibuat ketika instance dibuat. Ini bukan pendekatan yang baik karena jika method memiliki kode yang banyak, maka akan memakan memori yang banyak.
Sedangkan jika menggunakan prototype, method hanya dibuat satu kali. Dan method tersebut diwarisi kepada setiap instance yang dibuat.”

ES6 Classes

Dengan hadirnya class pada ES6, pembuatan class di JavaScript menjadi lebih mudah dan juga penulisannya mirip seperti bahasa pemrograman lain berbasis class. Pembuatan class pada ES6 menggunakan keyword class itu sendiri kemudian diikuti dengan nama class-nya.


class Car {

    

    // Sama seperti function constructor

    constructor(manufacture, color) {

        this.manufacture = manufacture;

        this.color = color;

        this.enginesActive = false;

    }

    

    // Sama seperti Car.prototype.startEngine

    startEngines() {

        console.log('Mobil dinyalakan...');

        this.enginesActive = true;

    }

    

    // Sama seperti car.prototype.info

    info() {

        console.log(`Manufacture: ${this.manufacture}`);

        console.log(`Color:  ${this.color}`);

        console.log(`Engines: ${this.enginesActive ? "Active" : "Inactive"}`);

    }

    

}

 

const johnCar = new Car("Honda", "Red");

johnCar.startEngines();

johnCar.info();

 

 

/* output: 

Mobil dinyalakan...

Manufacture: Honda

Color: Red

Engines: Active

*/

Jika Anda terbiasa dengan bahasa pemrograman berbasis class, pasti penulisannya sangat serupa bukan?

Walaupun dari segi sintaksis pembuatan class antara keduanya cukup berbeda, namun perilaku dari objek yang dibuat dengan keduanya sama.

Inilah mengapa class pada ES6 hanya sebuah syntactic sugar dari konsep prototype yang sudah ada.

“Ketika kita hendak membuat sebuah constructor function ataupun class. Secara code convention (aturan penulisan), gunakan CamelCase dalam penamaannya. Contohnya Car daripada car, SportCar daripada sportCar atau Sportcar

Contoh Penggunaan Default Parameters Di Javascript

2020-04-27T22:41:00.000+07:00

Dengan menggunakan default parameters, nilai pada parameter tidak akan menghasilkan undefined walaupun kita tidak memberikan nilai ketika fungsi tersebut dipanggil. Default parameter dapat digunakan pada regular function ataupun arrow function.

Berikut contoh dari penggunaan default parameter:

Regular Function


function sayHello(name = "Stranger", greet = "Hello") {

    console.log(`${greet} ${name}!`);

}

 

sayHello("Dimas", "Hai");

sayHello();

 

/* output:

Hai Dimas!

Hello Stranger!

*/

Arrow Function


const sayHello = (name = "Stranger", greet = "Hello") => console.log(`${greet} ${name}!`);

 

 

sayHello("Dimas", "Hai");

sayHello();

 

 

/* output:

Hai Dimas!

Hello Stranger!

*/

Pada contoh di atas, kita menggunakan tanda assignment (=) untuk menetapkan parameter name dengan nilai default “Stranger”, dan parameter greet dengan nilai default “Hello”. Hal ini sangat berguna ketika kita memanggil fungsi sayHello() tanpa menetapkan nilai parameter di dalamnya, karena walaupun kita tidak menetapkan nilainya, kedua parameter tersebut tidak akan menghasilkan undefined.

Penggunaan This dalam Arrow Function di Javascript

2020-04-27T22:37:00.000+07:00

Perbedaan karakteristik dari arrow function dan regular function selanjutnya ada pada penggunaan keyword this. Penjelasan dari this sendiri menyusul di materi class. Namun kita akan bahas sedikit mengenai ini untuk menggambarkan perbedaan ketika this digunakan oleh arrow function dan regular function.

Jika sebuah regular function dipanggil dengan menggunakan keyword new. Maka nilainya akan menjadi objek, contohnya:


function People(name, age, hobby) {

    this.name = name;

    this.age = age;

    this.hobby = hobby;

}

 

const programmer = new People("John", 18, ["Coding", "Read book", "Ping-pong"]);

 

console.log(programmer.name);

console.log(programmer.age);

console.log(programmer.hobby);

 

/* output:

John

18

[ 'Coding', 'Read book', 'Ping-pong' ]

*/

Objek yang dibuat menggunakan function dengan keyword new, sama halnya seperti kita membuat objek seperti menggunakan objek literals { }.


const programmer = {

    name: "John",

    age: 18,

    hobby: ["Coding", "Read book", "Ping-Pong"]

}

 

console.log(programmer.name);

console.log(programmer.age);

console.log(programmer.hobby);

 

/* output:

John

18

[ 'Coding', 'Read book', 'Ping-pong' ]

*/

Pada objek, this keyword mengembalikan nilai objeknya sendiri. this dapat digunakan untuk mengelola properti pada objeknya. Namun jika fungsi dipanggil tanpa menggunakan keyword new, this akan memiliki nilai global object (Window jika di browser).

Sedangkan fungsi yang dibuat dengan menggunakan gaya arrow tidak akan pernah memiliki nilai this, yang artinya kita tidak pernah bisa membuat objek menggunakan arrow function. Jika kita menggunakan this pada arrow function maka nilai this tersebut merupakan nilai objek di mana arrow function itu berada.

Perhatikan kedua contoh kode berikut:

Regular Function


function People(name, age, hobby) {

    this.name = name;

    this.age = age;

    this.hobby = hobby;

}

 

 

// menambahkan introMyself ke People

People.prototype.introMyself = function () {

    // this -> People

    setTimeout(function() {

       // this -> ??

        console.log(`Hello! Nama saya ${this.name}, umur saya ${this.age}.`)

        console.log(`Hobby saya adalah ${this.hobby}`)

    }, 300)

}

 

 

const programmer = new People("John", 18, ["Coding", "Read book", "Ping-pong"]);

programmer.introMyself();

 

 

/* output:

Hello! Nama saya undefined, umur saya undefined.

Hobby saya adalah undefined

*/

Arrow Function


function People(name, age, hobby) {

    this.name = name;

    this.age = age;

    this.hobby = hobby;

}

 

 

// menambahkan introMyself ke People

People.prototype.introMyself = function () {

    // this -> People

    setTimeout(() => {

        // this -> People

        console.log(`Hello! Nama saya ${this.name}, umur saya ${this.age}.`)

        console.log(`Hobby saya adalah ${this.hobby}`)

    }, 300)

}

 

 

const programmer = new People("John", 18, ["Coding", "Read book", "Ping-pong"]);

programmer.introMyself();

 

 

 

 

/* output:

Hello! Nama saya John, umur saya 18.

Hobby saya adalah Coding,Read book,Ping-pong

*/

Fungsi yang dituliskan di dalam setTimeout() dipanggil tanpa new. Itu berarti nilai dari this jika digunakan di dalam fungsi tersebut adalah global object. Itulah mengapa output akan menghasilkan nilai undefined ketika properti name, age, dan hobby dipanggil.

Berbeda ketika kita menuliskan arrow function di dalam setTimeout(), nilai this memiliki nilai objek sesuai dengan konteksnya (People). Arrow function akan sangat berguna untuk kasus seperti ini

Regular function vs Arrow Function Javascript

2020-04-27T22:32:00.000+07:00

Regular function dapat berupa function declaration atau function expression, namun arrow function hanya berupa function expression saja. Itu sebabnya arrow function memiliki nama lengkap “arrow function expressions”.

Regular function


// function declaration

function sayHello(greet) {

    console.log(`${greet}!`);

}

 

 

// function expression

const sayName = function (name) {

    console.log(`Nama saya ${name}`)

}

Arrow function


// function expression

const sayHello = greet => console.log(`${greet}!`);

const sayName = name => console.log(`Nama saya ${name}`);

Karena arrow function merupakan sebuah expression, maka ia hanya dapat digunakan untuk disimpan pada variabel (seperti contoh kode di atas), sebagai argumen pada sebuah fungsi, dan sebagai nilai dari properti objek.

Stored in Variable


const sayName = name => console.log(`Nama saya ${name}`);

Passed as An Argument


["Dimas", "Widdy", "Buchori"].forEach(name => console.log(`Nama saya ${name}`));

Stored in Object Property


const user = {

    introduce: name => console.log(`Nama saya ${name}`)

}