DEV Community: Hadi Hidayat Hammurabi

Memanfaatkan Promise.all()

Hadi Hidayat Hammurabi — Mon, 20 Jan 2025 16:03:19 +0000

Menunggu beberapa proses asynchronous dengan 1 kali await.

Hal menarik yang disediakan oleh Javascript salah satunya adalah kita dapat melakukan proses secara tidak sinkron (asynchronous) sehingga tidak terjadi saling tunggu antar proses. Dalam praktiknya, proses asynchronous ini digunakan untuk proses-proses yang waktu tunggunya tergantung pada hal di luar proses itu sendiri, seperti koneksi internet, kecepatan penyimpanan, dll. Contoh proses yang dapat dilakukan secara asynchronous:

Query database
Mengambil data dari web lain (HTTP Request)
Menulis/membaca isi file
Mengirim email

Menjalankan Fungsi Secara Asynchronous

Setiap proses yang asynchronous, di Javascript, umumnya dilakukan dengan memanfaatkan fungsi. Adapun fungsi adalah kumpulan aktivitas tertentu untuk memenuhi suatu kebutuhan, contoh fungsi penjumlahan untuk menjumlahkan, fungsi shutdown untuk mematikan komputer (mungkin saja ada ya 😅).

Mendefinisikan Fungsi

Mendefinikan fungsi yang asynchronous dapat dilakukan dengan menambah kata async saat pembuatan fungsi, selebihnya sama seperti fungsi biasa.

Contohnya kita akan melakukan proses kirim email secara asynchronous, dapat didefinisikan seperti ini:

async function kirimEmail(tujuan, judul, isi) {
  // mengirim email
  // ...
}

atau bila menggunakan arrow function:

const kirimEmail = async (tujuan, judul, isi) => {
  // mengirim email
  // ...
}

Memanggil Fungsi

Saat fungsi diatas kita panggil, secara otomatis fungsi akan dijalankan secara asynchronous yang artinya tidak saling tunggu.

Contoh:

kirimEmail('contoh1@email.com', 'Tes 1 Email', 'Halo. Ini saya lagi ngetes.');
kirimEmail('contoh2@email.com', 'Tes 2 Email', 'Halo. Ini saya lagi ngetes.');
kirimEmail('contoh3@email.com', 'Tes 3 Email', 'Halo. Ini saya lagi ngetes.');

Dari contoh di atas, seluruh proses kirim email, dilakukan secara berurutan namun mengabaikan kapan harus selesai. Jadi saat proses lain di jalankan, maka akan disusul proses berikutnya tanpa menunggu berhentinya proses tersebut.

Apabila kita membutuhkan data atau sengaja menunggu proses yang asynchronous, dapat dilakukan dengan menambah await saat pemanggilan fungsi.

Contoh:

await kirimEmail('contoh1@email.com', 'Tes 1 Email', 'Halo. Ini saya lagi ngetes.');
await kirimEmail('contoh2@email.com', 'Tes 2 Email', 'Halo. Ini saya lagi ngetes.');
await kirimEmail('contoh3@email.com', 'Tes 3 Email', 'Halo. Ini saya lagi ngetes.');

Dari contoh di atas, tiap proses akan ditunggu hingga selesai. Keadaan ini terjadi biasanya bila ada data yang kita butuhkan untuk proses yang selanjutnya sehingga harus menunggu proses sampai mendapatkan data tersebut.

Promise.all()

Dengan Promise.all, kita dapat memanggil dan menunggu beberapa fungsi asynchronous menjadi satu kesatuan.

Memanggil Fungsi

Pemanggilan fungsi-fungsi asynchronous dengan Promise.all dapat dilakukan dengan contoh sebagai berikut.

await Promise.all([
  kirimEmail('contoh1@email.com', 'Tes 1 Email', 'Halo. Ini saya lagi ngetes.'),
  kirimEmail('contoh2@email.com', 'Tes 2 Email', 'Halo. Ini saya lagi ngetes.'),
  kirimEmail('contoh3@email.com', 'Tes 3 Email', 'Halo. Ini saya lagi ngetes.'),
]);

Dari contoh di atas, kita menunggu ketiga proses pengiriman email yang hasilnya baik berhasil maupun gagal akan menjadi kesatuan yaitu dalam bentuk array.

Sifat-Sifat

Berikut ini sifat-sifat Promise.all:

fungsi asynchronous yang akan dijalankan, diletakkan secara bersamaan dalam sebuah array;
seluruh fungsi yang dimasukkan akan menjadi kesatuan, mulai dari dijalankan hingga mendapatkan hasil;
karena menjadi kesatuan, seluruh proses akan ditunggu hingga selesai, terutama saat kita menggunakan await;
bila terjadi error pada salah satu proses, maka seluruh proses akan error.

Lebih lengkap dapat ditemukan di dokumentasi Promise.all dari MDN.

Penutup

Menggunakan Promise.all sangat menguntungkan, setidaknya kita cukup 1 kali menulis await 😂 dan juga bila kita ingin seluruh proses berhenti saat salah satunya terjadi error. Tetapi, kalau kita ingin tetap melanjutkan proses meskipun terjadi error pada proses tertentu, kita akan bahas di artikel berikutnya.

Terima kasih sudah baca. Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Cara Aman Mengakses Data pada Object

Hadi Hidayat Hammurabi — Mon, 20 Jan 2025 15:54:29 +0000

Terhindar dari masalah karena data null dengan cara yang Javascript banget

Cara aman saat mengakses data pada object di Javascript sangat penting dilakukan agar aplikasi dapat bertahan dengan kondisi data yang tidak sesuai. Teknik ini pada dasarnya dilakukan dengan menghindari masalah karena data null.

Perhatian!!!

Agar dapat memahami tulisan ini dengan baik, diperlukan pengetahuan tentang nilai truthy dan falsy pada Javascript.

Kasus

Sering kali saat menulis kode, kita perlu mengambil data yang ada pada object. Katakan kita punya sebuah object pegawai, lalu kita perlu untuk mengambil data status nya.

Jika ada, maka tulis status tersebut.

Jika tidak ada, maka tulis "magang".

Sebagai ilustrasi, kira-kira kodenya begini.

const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan tampil

Alex Under adalah pegawai tetap

Masalah dan Solusi Ke-1

Sekarang kita kurangi isi object-nya jadi begini.

const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan tampil

undefined adalah pegawai undefined

Di sini masih aman, semuanya masih bisa jalan dan gak ada error. Cuman datanya memang ditampilkan undefined, jadi terlihat aneh.

Untuk mengatasi masalah ini, kita bisa tambahkan if-else seperti ini.

const pegawai = {
};

if (!pegawai.nama) {
  pegawai.nama = 'Seorang Pegawai';
}

if (!pegawai.status) {
  pegawai.status = 'magang';
}

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan tampil

Seorang Pegawai adalah pegawai magang

Kita dapat memberi nilai default pada data sehingga jika data tidak tersedia, maka nilai default tersebut yang akan digunakan.

Bonus

Supaya lebih singkat, bisa dibuat seperti ini.

const pegawai = {
};

pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Masalah dan Solusi Ke-2

Gimana kalau object-nya gak ada (null) ?

const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan error dong kayak gini

Uncaught TypeError: Cannot read properties of null (reading 'nama')

Di sini sudah masalah, aplikasi berhenti karena ada error dikarenakan kita mengambil data nama dan status dari sebuah object yang bernilai null. Akhirnya, aplikasi akan crash dan berhenti.

Untuk mengatasi masalah ini, kita bisa menggunakan teknik mantap seperti berikut.

const pegawai = null;
const pegawaiSafe = pegawai || {};

if (!pegawaiSafe.nama) {
  pegawaiSafe.nama = 'Seorang Pegawai';
}

if (!pegawaiSafe.status) {
  pegawaiSafe.status = 'magang';
}

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

Maka tidak ada error dan akan tampil

Seorang Pegawai adalah pegawai magang

Bonus

Supaya lebih singkat, bisa dibuat seperti ini.

const pegawai = null;

const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

Atau seperti ini.

const pegawai = null;

const pegawaiSafe = pegawai || {};
pegawaiSafe.nama = pegawaiSafe.nama || 'Seorang Pegawai';
pegawaiSafe.status = pegawaiSafe.status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

Nahhh...

Sekarang aplikasi kita gak crash lagi horeeee ahahahaa...

Penutup

Dengan menerapkan solusi-solusi di atas, kita akan terhindar dari masalah null pada object terutama object yang menerima isian dari luar, seperti user input, database, service pihak ketiga, dll.

Terima kasih sudah baca.

Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Mengubah Log pada Nginx Menjadi Mudah di Kelola

Hadi Hidayat Hammurabi — Mon, 31 May 2021 15:25:59 +0000

Nginx merupakan web server yang umum digunakan untuk melayani kebutuhan web, seperti web server untuk web statis, menjadi loadbalancer, dll. Pada penggunaannya, Nginx mencatat segala akses dan error yang terjadi. Setiap akses akan disimpan sebagai access.log dan error sebagai error.log. Karena banyaknya akses dan error yang kemungkinan terjadi, maka akan semakin banyak pula yang dicatat dalam log sehingga kita perlu membuat log agar mudah diolah.

Membuat dan menggunakan Log Format pada Nginx, dapat dibaca lebih lanjut di artikel ini.

JavaScript Tips #1: Menunggu beberapa proses asynchronous dengan Promise.all()

Hadi Hidayat Hammurabi — Sat, 29 May 2021 09:47:17 +0000

Query database
Mengambil data dari web lain (HTTP Request)
Menulis/membaca isi file
Mengirim email

Selengkapnya baca di:
https://hadihammurabi.hashnode.dev/javascript-tips-1-menunggu-beberapa-proses-asynchronous-dengan-promiseall

Terima kasih sudah baca.
Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Apa itu Frontend?

Hadi Hidayat Hammurabi — Mon, 01 Feb 2021 16:03:41 +0000

Rasanya temen-temen sudah akrab ni sama istilah ini. Ya, memang lagi ngetren. Pada pembahasan sebelumnya juga sudah kita bahas secara mendasar. Sekarang, mari kita bahas lebih lanjut...

Pengertian

Sebenernya frontend ini adalah aplikasi yang berhadapan langsung dengan pengguna. Kalau di desktop berarti aplikasi desktop biasa, kayak .exe gitu. Kalau di perangkat mobile ya berarti .apk. Kalau di web, berarti halaman web itu sendiri.

Teknologi

Ketiga contoh frontend di atas, bisa dibuat dengan teknologi yang berbeda-beda. Kalau desktop, bisa pakai Java atau Python. Kalau mobile, bisa pakai Java, Kotlin, atau Dart. Kalau web, bisa pakai HTML, Javascript, dan CSS.

Ciri khas frontend, yaitu pengguna dapat berinteraksi langsung dengan aplikasi. Nah ini sudah jelas berarti aplikasinya adalah frontend.

Kebanyakan, istilah frontend ini dipakai untuk frontend web. Kalau desktop sama mobile sudah punya sebutan sendiri soalnya wehehehe...

Frontend web

Kalau gitu, kita fokus yang ke web-weban ya. Biar umum.

Seperti sudah disebutkan di atas, teknologi yang bisa digunakan untuk membuat frontend web. Mari kita tuliskan perannya:

HTML (Hypertext Markup Language) Gunanya untuk membuat struktur dokumen web.
CSS (Cascading Stylesheet) Bisa kita pake untuk memperindah dokumen web.
Javascript Nah di sini kita ngoding wehehehe... Kalau butuh aksi-aksi yang mendukung daya interaktif web, bisa pake ini nih.

Semakin maju teknologi, termasuk frontend, sekarang sudah banyak sekali tools yang bisa ngebantu kita untuk membuat frontend ini. Kalau temen-temen mau lihat apa aja, bisa klik di sini nih, ada banyak.

Penutup

Dasar-dasar pengetahuan mengenai frontend cukup sampai di sini. Berikutnya kita akan ke sesi koding. Belum tau akan mulai dari mana, yang jelas salah satu dari 3 teknologi frontend di atas.

Terima kasih sudah baca.
Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Perbedaan Frontend dengan Backend

Hadi Hidayat Hammurabi — Sat, 23 Jan 2021 08:57:49 +0000

Istilah frontend dan backend ini sedang populer beberapa tahun belakangan, bersamaan dengan popularitas arsitektur berbasis REST API.

Pada pembahasan sebelumnya, temen-temen sudah paham ni apa itu REST API. Sekarang, kita bahas 2 bagian utama dari REST API, yaitu frontend dan backend.

Frontend

Frontend bertugas menampilkan interface (antarmuka) kepada pengguna agar aplikasi mudah digunakan. Bagian inilah yang berhadapan langsung dengan pengguna, mulai dari menerima input, menampilkan data, bahkan bisa saja hanya sekadar aksesoris.

Bila sebuah aplikasi diibaratkan restoran, maka frontend ini merupakan resepsionis dan kasir. Tugasnya menyambut dan menerima pesanan pelanggan, kemudian meneruskan pesanan tersebut ke dapur agar permintaan pelanggan dapat disiapkan.

Backend

Backend bertugas memproses data yang dikirimkan dari frontend dan juga menyediakan data untuk ditampilkan oleh frontend. Bagian ini tidak perlu dilihat oleh pengguna (walaupun sebenarnya bisa saja), karena ruang lingkup tugasnya memang di belakang. Biasanya, alur-alur bisnis, perhitungan, penyimpanan data, di lakukan di bagian backend ini.

Bila kembali pada analogi yang sebelumnya, backend dapat diibaratkan sebagai koki yang bertugas membuat dan menyediakan makanan yang dipesan oleh pelanggan. Tentunya pelanggan tidak perlu melihat bagaimana koki bekerja. Kemudian, penyajian akan dilakukan kembali oleh resepsionis atau pelayan.

Penutup

Pada pembahasan ini, diharapkan temen-temen semua dapat mengerti apa itu frontend dan backend secara istilah dan apa bedanya. Pada materi berikutnya, kita akan bahas lebih detail untuk masing-masing bagian tersebut, sampai ke teknis-teknisnya.

Terima kasih sudah baca.
Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Apa itu REST API?

Hadi Hidayat Hammurabi — Mon, 18 Jan 2021 16:36:40 +0000

Istilah REST API sedang populer, naik daun, dan memang sering diterapkan oleh berbagai tim programmer. Kalau temen-temen belum tau ini apa, tenang, ada banyak orang di seluruh dunia juga sedang mempelajarinya. Informasi bagus agar temen-temen gak merasa sendirian ahahaha...

Oke, masuk ke materi.

Pengertian

REST API ini tu arsitektur dalam pengembangan aplikasi yang memisahkan bagian tampilan (frontend) dengan alur bisnis (backend) dan pengiriman datanya melalui jalur HTTP.

Keuntungan

Nahhh... Ini beberapa keuntungan kalau kita menerapkan REST API nih.

Kode lebih mudah dikelola karena frontend dan backend dibuat terpisah.
Lebih mudah mencari akar masalah saat terjadi error. Kalau error di frontend ya cari aja di situ, begitu juga dengan backend, jangan cari yang bukan tempatnya ya ahahaha...
Kalau kita ber-tim, pembagian tugas jadi lebih mudah.
Karena menggunakan protokol HTTP, REST API jadi lebih familiar bagi kebanyakan orang. Kan banyak orang udah pada tau cara pakai si HTTP ini. Minimal, saat mengunjungi website.

Kekurangan

Kalau sudah tau untungnya apa, sekarang kita perlu tau kekurangannya ni, supaya kita bisa antisipasi hal-hal yang tak diinginkan. Jadi ini nih kekurangannya.

Kode yang dikelola jadi lebih banyak. Kalau biasanya cuma 1 projek aja, sekarang jadi 2 projek (frontend dan backend).
Tidak disarankan untuk solo player (sendirian). Semakin banyak yang dikelola, semakin banyak yang diatur, dan semakin banyak pula yang harus dilakukan. Kasian kamu kalau sendirian 😊

Saya sejauh ini menerapkan REST API dengan hati riang-gembira.
- @hadihammurabi

Komunikasi Data pada REST API

Nahhh... Kalau temen-temen tertarik untuk menerapkan REST API, berarti harus ngerti ni gimana caranya berkirim data antara frontend dengan backend. Kita lanjuuuttt yaaa...

|-------------|                 |-------------|
|  Frontend   |  <-- HTTP -->   |   Backend   |
|-------------|                 |-------------|

Jadi untuk proses pengambilan data, frontend mengakses sebuah URL yang ada di backend, kemudian backend akan mengirimkan datanya sebagai respon. Pada dasarnya, sama seperti kita mengunjungi halaman web, kita lakukan request, kemudian webnya tampil.

Terus, kalau frontend mau kirim data, juga sama-sama mengakses URL yang ada di backend. Hanya saja kali ini dengan menyertakan data yang dikirim. Misal di frontend, usernya mau login, terus frontend kirim data ini ke backend.

Sebetulnya, cara kerjanya sesimpel ini.

Penutup

Karena baru pengenalan, jadi segini dulu ya pembahasan tentang REST API. Di artikel-artikel selanjutnya, kita bahas lagi lebih detail. Bahkan sampai koding kalau bisa.

Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Berkenalan Dengan Javascript

Hadi Hidayat Hammurabi — Sat, 16 Jan 2021 15:59:18 +0000

Javascript merupakan bahasa pemrograman yang berjalan di web browser. Tugasnya, membuat halaman web menjadi lebih interaktif, seperti menampilkan pesan popup, jendela input, dan lainnya. Yang dapat dilakukan Javascript sangat beragam, mulai dari:

mengubah warna tombol,
mengubah gambar latar belakang (background),
menampilkan atau menyembunyikan elemen,
mengambil data dari halaman web lain,
dan banyak lagi.

Info: Javascript merupakan satu-satunya bahasa pemrograman yang dapat berjalan di web browser modern saat ini.

Sumber:
Taman Kode-Kode - Pengertian Javascript

Ubuntu Server Hardening

Hadi Hidayat Hammurabi — Tue, 05 Jan 2021 04:03:42 +0000

Hardening pada sistem operasi berbasis Linux merupakan kegiatan yang bertujuan untuk memperkuat keamanan dengan mengatur akses-akses yang diizinkan, seperti pengaturan akses user, menutup akses dari luar untuk layanan terbatas, dll.

Kali ini kita akan praktik hardening dengan menggunakan Ubuntu Server. Karena tulisan ini bertujuan untuk berbagi kepada temen-temen semua, sekaligus mendokumentasikan setup server saya yang baru saja terinstalasi.

Menambah User

Hardening pertama yang akan kita lakukan adalah membuat user baru. Hal ini diperlukan karena beberapa alasan, yaitu:

Saat pertama kali Ubuntu Server terinstalasi, kita hanya mendapatkan user root yang bila jatuh ke tangan orang lain, maka kita tidak dapat mencegah hal-hal di luar keinginan kita. Maka dari itu, kita perlu mengurangi penggunaan user root sehingga mengurangi kemungkinan orang lain melihat kita melakukan akses, terutama saat memasukkan password.
Dengan menggunakan user selain root, kita juga mengurangi kemungkinan kesalahan dalam melakukan aksi.

Menambah user di Ubuntu Server dapat dilakukan dengan menggunakan perintah berikut:

# adduser <username>

Contoh:

# adduser hammurabi

Setelah itu, isikan password, nama lengkap, dan informasi lainnya. Setelah selesai, maka user baru tersebut sudah bisa digunakan.

Agar lebih pasti, bisa kita coba untuk masuk ke Ubuntu Server dengan menggunakan user yang baru saja kita buat. Hal ini dapat dilakukan dengan menjalankan perintah berikut:

# login

Kemudian masukkan username dan password user baru. Bila berhasil, maka kita akan masuk sebagai user tersebut.

Mendaftarkan User Sebagai `sudo`

Karena kita tidak akan menggunakan user root lagi, sekarang kita perlu mengatur agar user memiliki izin untuk mengakses hal-hal terkait sistem, seperti menginstalasi aplikasi, membaca file di sistem, dll.

Mendaftarkan user sebagai sudo dapat dilakukan dengan menggunakan perintah:

# usermod -aG sudo <username>

Contoh:

# usermod -aG sudo hammurabi

Agar lebih pasti, kita dapat mengecek apakah user kita sudah terdaftar sebagai sudo dengan menggunakan perintah:

# groups <username>

Contoh:

# groups hammurabi

Bila tertulis sudo berarti user kita sudah termasuk user dengan akses sudo.

Sekarang, hardening untuk tahap user akses, sudah selesai, kalau temen-temen mau nambah lagi, bisa coba untuk mematikan akses root supaya aman. Kalau saya, cukup dengan jarang menggunakannya saja.

DEV Community: Hadi Hidayat Hammurabi

Memanfaatkan Promise.all()

Menjalankan Fungsi Secara Asynchronous

Mendefinisikan Fungsi

Memanggil Fungsi

Promise.all()

Memanggil Fungsi

Sifat-Sifat

Penutup

Cara Aman Mengakses Data pada Object

Perhatian!!!

Kasus

Masalah dan Solusi Ke-1

Bonus

Masalah dan Solusi Ke-2

Bonus

Penutup

Mengubah Log pada Nginx Menjadi Mudah di Kelola

JavaScript Tips #1: Menunggu beberapa proses asynchronous dengan Promise.all()

Apa itu Frontend?

Pengertian

Teknologi

Frontend web

Penutup

Perbedaan Frontend dengan Backend

Frontend

Backend

Penutup

Apa itu REST API?

Pengertian

Keuntungan

Kekurangan

Komunikasi Data pada REST API

Penutup

Berkenalan Dengan Javascript

Ubuntu Server Hardening

Menambah User

Mendaftarkan User Sebagai sudo

Mendaftarkan User Sebagai `sudo`