Apa Itu Exception dan Thread Pada Java

Apa Itu Exception dan Thread Pada Java

Apa Itu Exception dan Thread Pada Java

Ngulik Kode - Exception adalah suatu kejadian yang terjadi pada saat program sedang berjalan yang dapat mengganggu proses eksekusi program. Exception dapat terjadi karena berbagai alasan, seperti kesalahan input, file yang tidak ditemukan, atau masalah jaringan. Exception harus dihandle dengan benar agar program dapat terus berjalan dengan lancar dan tidak terjadi crash. 


Java menyediakan kelas-kelas yang dapat digunakan untuk menangani exception, seperti try-catch dan throws. Dengan menggunakan try-catch, kode yang memiliki potensi terjadinya exception dapat dikelilingi dengan blok try, dan blok catch akan menangani exception yang terjadi. Misalnya:



Selain itu, Java juga menyediakan kelas throws yang dapat digunakan untuk menandai bahwa suatu method mungkin akan menimbulkan exception. Jika method tersebut tidak menangani exception yang terjadi, maka exception tersebut harus ditangani oleh method yang memanggilnya. Misalnya:



Thread adalah suatu proses yang berjalan pada sistem operasi yang dapat dijadikan sebagai bagian dari suatu program. Thread dapat membantu meningkatkan performa aplikasi dengan mengelola beberapa proses secara bersamaan (multithreading). Setiap thread memiliki prioritas yang dapat digunakan untuk mengatur urutan eksekusi thread pada sistem operasi. 


Java menyediakan kelas Thread yang dapat digunakan untuk membuat dan mengelola thread. Untuk membuat thread, Anda dapat meng-extend kelas Thread atau mengimplementasikan interface Runnable. Kemudian, Anda dapat membuat objek thread dan memanggil method start() untuk memulai eksekusi thread. Misalnya:



Anda juga dapat mengatur prioritas thread dengan menggunakan method setPriority(). Prioritas thread dapat bernilai antara 1 sampai 10, dengan 1 sebagai prioritas terendah dan 10 sebagai prioritas tertinggi. Misalnya:


Demikian penjelasan tentang exception dan thread di Java. Semoga membantu! Sebagai tambahan, ada beberapa hal yang perlu diperhatikan dalam mengelola exception dan thread di Java:

  1. Jangan menggunakan exception sebagai bagian dari logika program. Exception harus dihandle dengan benar dan tidak boleh digunakan sebagai cara untuk mengontrol alur program. 
  2. Selalu gunakan finally untuk membersihkan resource yang sudah tidak dibutuhkan setelah exception terjadi. Misalnya, jika Anda menggunakan file atau koneksi database, pastikan untuk menutupnya setelah exception terjadi. 
  3. Jangan membuat thread secara berlebihan. Setiap thread yang dibuat akan menambah beban pada sistem operasi, sehingga terlalu banyak thread akan menurunkan performa aplikasi. 
  4. Gunakan thread dengan bijak. Misalnya, jika Anda membuat aplikasi GUI, gunakan thread untuk mengelola proses yang berjalan di latar belakang agar tidak mengganggu interaksi pengguna dengan aplikasi. 
  5. Selalu berhati-hati saat menggunakan thread. Pastikan untuk mengelola akses ke resource yang dibagi oleh beberapa thread dengan benar agar tidak terjadi konflik. 

Dengan memahami dan mengelola exception dan thread dengan baik, Anda dapat membuat aplikasi Java yang lebih handal dan stabil. Selamat mencoba!
Menggabungkan (Merge) Array di JavaScript

Menggabungkan (Merge) Array di JavaScript

Menggabungkan (Merge) Array di JavaScript



Ngulik Kode - Banyak cara untuk menggabungkan array pada JavaScript. Kalian bisa menggunakan cara yang panjang ataupun yang pendek. Okay, akan saya tunjukkan beberapa cara tersebut pada artikel ini.
Ketika bekerja dengan array di JavaScript, ada kasus dimana kalian ingin menggabungkan banyak array sekaligus. Contoh, array dengan data-data yang berhubungan datang dari sumber yang berbeda dan kalian ingin menggabungkannya menjadi satu array.

Kalian bisa menggabungkannya dengan berbagai cara.

1. Menggunakan Spread Operator pada JavaScript


Menggunakan operator ini pada arrays, kalian bisa menggabungkan nilai dalam array sekaligus.


Pada variabel merged, kita membuat array baru dan kemudian digabungkan menggunakan titik tiga kali (...) diikuti variable array1 kemudian array2. Sekarang kalian lihat di console kalian, hasil dari variabel array adalah gabungan dari variabel array1 dan array2.


Kalian juga bisa menggunakan operator ini untuk beberapa array:



Pada variabel merged kali ini, kita memanggil variable array3, kemudian array2, dan yang terakhir array1.


2. Menggunakan Array.concat pada JavaScript


Kalian bisa menggunakna metode concat array untuk menggabungkan nilai dalam array dengan nilai baru untuk membuat array baru.


Nilai ini bisa berupa angka, string, boolean, object, atau array.


Method ini menerima parameter sebagai berikut:



Dengan menjadikan array sebagai parameter, kalian bisa menggabungkan array yang sudah ada dengan array yang akan digabungkan untuk membuat array baru. Contohnya seperti ini:



Seperti yang kalian lihat, isi dari array1 digabungkan dengan isi dari array2 untuk menjadi array baru yang dimasukkan ke varibel merged.


Kalian juga bisa menggunakan beberapa paramter untuk digabungkan:



Pada contoh ini, kita menggunakan metode concat pada array3 yang berarti isi dari array3 adalah nilai yang pertama digabungkan dalam array.


Untuk paramater, kita memanggil array2 dahulu, yang berarti isi dari array2 berada setelah array3, dan kemudian diikuti isi dari array1.


3. Menggunakan Array.push pada JavaScript


Metode push array digunakan untuk push(add) nilai baru ke akhir dari isi array.



Dengan menggunakan metode ini, kalian dapat menambahkan (selanjutnya saya sebut push) sebuah array baru ke array yang sudah ada untuk membuat proses penggabungan.



Di sini, kita menggunakan perulangan for untuk mengulang nilai dari array2, dan setiap pengulangan, kita push nilai pada indeks ke array1.


Diakhir perulangan, kalian lihat isi dari array1 sekarang berubah, yaitu ditambahkan isi dari array2.


Selain memakai cara perulangan, kalian juga bisa menggunakan spread operator untuk metode push. Metode push menerima beberapa parameter yang dipisah dengan koma, kalian bisa menambahkan array lain di metode ini, dan mereka akan ter-push semua ke array yang menggunakan metode push.



Kalian juga bisa melakukan metode ini pada beberapa array:


Di sini, kita panggil metode push pada array3, lalu menambahkan array2 dengan spread operator, dan kemudian diikuti array1 sebagai parameter yang akan dipush ke array3.


Penutup


Pada artikel kali ini kalian sudah mempelajari cara menggabungkan array di JavaScript. Diantara ketiga ini, kalian paling suka pakai cara yang mana nih?


Jangan lupa share ya. Supaya ilmu yang sudah kalian pelajari tidak lupa.


Happy Coding!

Merubah Format Angka Menjadi Mata Uang (Currency) di JavaScript

Merubah Format Angka Menjadi Mata Uang (Currency) di JavaScript

Merubah Format Angka Menjadi Mata Uang (Currency) di JavaScript

Ngulik Kode - Saat kalian bekerja dengan data dari API, kalian akan mendapatkan data ini dalam beberapa format umum. Misalnya, jika kalian sedang membangun toko online atau e-commerce, kalian mungkin memiliki data seperti harga.


Data harga ini bisa berupa angka umum seperti 17500 atau angka lainnya seperti contoh di bawah ini:



Kalian tidak ingin memasukkan angka langsung ke aplikasi atau halaman web kalian karena akan sulit dipahami oleh user.

Bahkan jika kalian menambahkan tanda mata uang, itu tidak menyelesaikan masalah karena kalian ingin menambahkan koma dan desimal di posisi yang benar. Kalian juga ingin setiap output harga berdasarkan mata uang dengan format yang tepat.

Misalnya, 25750 akan menjadi Rp.25.750,00 (Rupiah) atau $25,750.00 (US Dollar) dan seterusnya, tergantung pada mata uang yang kalian tentukan. Dan kalian dapat mengonversi angka-angka ini menjadi mata uang menggunakan metode Intl.NumberFormat() dalam JavaScript.

Berikut adalah contohnya:



Pada artikel ini, saya akan membantu kalian untuk memahami setiap opsi di atas, apa yang dilakukan codingan tersebut, dan cara menggunakan metode ini dengan benar untuk memformat angka sebagai mata uang.


Cara Menggunakan Intl.NumberFormat() Untuk Memformat Angka Sebagai Mata Uang

Kalian bisa menggunakan konstruktor Intl.NumberFormat() untuk membuat objek Intl.NumberFormat yang menggunakan pemformatan angka yang sensitif, seperti format mata uang.

Konstruktor ini mengambil dua parameter utama, locale dan options. Keduanya opsional.


Perhatikan bahwa Intl.NumberFormat() dapat dipanggil dengan atau tanpa new. Keduanya akan membuat instance Intl.NumberFormat baru.


Ketika kalian menggunakan konstruktor Intl.NumberFormat() tanpa menambahkan locale atau option apapun, maka hanya akan memformat angka dengan menambahkan koma.


Kalian tidak mau pemformatan angka biasa seperti di atas. Kalian ingin memformat angka-angka ini sebagai mata uang, sehingga mengembalikan simbol mata uang dengan pemformatan yang tepat tanpa harus digabungkan secara manual.


Argumen Pertama: Locales


Locale adalah parameter opsional yang dapat diteruskan sebagai string. Ini mewakili wilayah geografis, politik, atau budaya tertentu. Itu hanya memformat angka berdasarkan lokal dan bukan pemformatan mata uang.



Kalian akan melihat bahwa angka atau harga sekarang diformat berdasarkan locale.


Argumen Kedua: Options(Style, Currency, dll.)


Ini adalah parameter utama dan kalian bisa menggunakannya untuk memformat mata uang. Ini adalah objek JavaScript yang menyimpan parameter lain seperti:

  • style: kalian menggunakan ini untuk menentukan jenis pemformatan yang kalian mau. Ini mengambil nila-nilai seperti desimal, mata uang, dan unit. Pada artikel ini, kalian akan menggunakan pemformatan mata uang.
  • currency: option lain adalah currency. Kalian bisa menggunakan option ini untuk menentukan mata uang yang kalian ingin format, seperti 'IDR', 'USD', 'GBP', 'EUR', dan masih banyak. Ini juga akan membantu memberikan simbol pada posisi yang sesuai berdasarkan locale.


Ada opsi lain yang mungkin akan jarang kalian gunakan, yaitu useGrouping, yang mana digunakan untuk menggabungkan angka dengan koma (atau titik untuk beberapa locale). Ini adalah boolean, secara default sudah diset ke true. Ini kenapa output kalian memiliki sebuah koma atau titik pada artikel ini. (seperti Rp 150.000,00)



Option lain adalah maximumSignificantDigits. Kalian bisa gunakan ini untuk membulatkan variabel price kalian berdasarkan jumlah digit signifikan yang telah kalian tentukan. Contoh, ketika kalian set nilainya ke 3, 150.000,00 akan menjadi 150.000



Penutup


Sekarang kalian sudah mempelajari cara memformat angka menjadi mata uang tanpa menggunakan library. Keren!


Semoga artikel ini bermanfaat dan kalian juga bisa banget share artikel ini ke siapapun ya. Bagi-bagi ilmu supaya kalian juga ngga lupa sama ilmunya. Terima kasih!

Mengatasi Error dan Bug pada Aplikasi dengan Cara Kembali ke Commit Sebelumnya dalam Git

Mengatasi Error dan Bug pada Aplikasi dengan Cara Kembali ke Commit Sebelumnya dalam Git

Mengatasi Error dan Bug pada Aplikasi dengan Cara Kembali ke Commit Sebelumnya dalam Git

Ngulik Kode - Git adalah tools yang sangat powerful dan version control system yang sangat populer di kalangan developer. Begitulah cara developer dan tim teknis berkolaborasi dan bekerja sama dalam project. 

Tapi, apa yang terjadi jika kalian secara tidak sengaja meng-commit sebuah file dan menyadari bahwa kalian seharusnya tidak melakukannya karena file tersebut masih ada yang salah? 

Tidak perlu khawatir karena Git memungkinkan kalian untuk membatalkan kesalahan tersebut dan kembali ke versi sebelumnya dari project kalian. 

Salah satu fitur Git yang paling membantu adalah kemampuan untuk membatalkan perubahan yang kalian buat pada project dari waktu ke waktu. 

Pada artikel kali ini, kita akan mempelajari cara membatalkan perubahan di Git tergantung pada status repository Git kalian.

Cara Mengembalikan Perubahan Local Unstaged Changes di Git

Katakanlah kalian sedang mengerjakan di lokal kalian. Kalian membuat dan menyimpan beberapa perubahan ke file secara lokal, tetapi kalian ingin membuangnya.

Saat kalian belum melakukan perubahan tersebut, kalian belum menggunakan perintah git add.

Dalam hal ini, kalian perlu menggunakan perintah git restore. Perintah git restore akan terlihat seperti ini:
git restore filename

Jadi, katakanlah kalian memiliki file README.md dan kalian secara tidak sengaja menulis dan menyimpan beberapa teks yang ingin kalian buang.

Pertama kalian bisa menggunakan perintah git status untuk melihat status repository Git kalian.

On branch main

Your branch is up to date with 'origin/main'.


Changes not staged for commit:

  (use "git add <file>..." to update what will be committed)

  (use "git restore <file>..." to discard changes in working directory)

modified:   README.md


no changes added to commit (use "git add" and/or "git commit -a")

 Inilah cara kalian membatalkan perubahan pada file README.md:

git restore README.md

Kemudian kalian dapat menggunakan git status lagi untuk memeriksa status repository:

On branch main

Your branch is up to date with 'origin/main'.


nothing to commit, working tree clean

Sekarang, kalian telah berhasil membuang perubahan terbaru dan kembali ke versi commit-an yang terakhir dari project kalian.

Cara Mengembalikan Perubahan Local Staged Changes di Git

Sebuah file akan masuk ke staged ketika kalian telah menggunakan perintah git add.

Jadi, katakanlah kalian membuat beberapa perubahan pada file README.md secara lokal, kalian menggunakan perintah git add, dimana itu akan masuk ke staged changes, dan kemudian kalian menyadari bahwa teks tersebut mengandung beberapa kesalahan.

Pertama, jalankan git status untuk memastikan kalian telah menambahkan filenya ke staged changes (artinya kalian telah menggunakan git add):
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
modified:   README.md

Seperti yang kalian lihat dari output git status di atas, kalian dapat menggunakan perintah berikut untuk membatalkan perubahan kalian:

git restore --staged filename

Perintah ini akun menghapus file yang berada staged changes, tetapi akan tetap menyimpan perubahan yang ada di file kalian.

Jalankan git status lagi:

On branch main

Your branch is up to date with 'origin/main'.


Changes not staged for commit:

  (use "git add <file>..." to update what will be committed)

  (use "git restore <file>..." to discard changes in working directory)

modified:   README.md


no changes added to commit (use "git add" and/or "git commit -a")

Sekarang, untuk membuang perubahan yang kalian buat dan mengembalikan file ke konten aslinya, gunakan:

git restore README.md

Dan jalankan git status lagi:

On branch main

Your branch is up to date with 'origin/main'.


nothing to commit, working tree clean

Sekarang, perubahan yang kalian buat telah hilang dan file dikembalikan ke versi commit awal.

Cara Mengembalikan Perubahan Local Committed Changes di Git

Katakanlah kalian membuat perubahan pada file, lalu kalian tambahkan ke staged changes dengan perintah git add, dan kalian meng-commit file tersebut dengan perintah git commit.

Ini berarti bahwa commit hanya ada secara local dan belum dipush ke remote repository.

Pertama, gunakan git status untuk memeriksa apakah kalian meng-commit sebuah file:
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

Selanjutnya, jika kalian ingin membatalkan commit terkahir di local kalian, gunakan perintah git log:

Commit terbaru akan memiliki commit hash (serangkaian angka dan karakter yang panjang) dan (HEAD -> main) di akhir - ini adalah commit yang ingin kalian batalkan.

Commit kedua hingga terakhir memiliki commit hash dan (origin/main) di akhir - ini adalah commit yang ingin kalian pertahankan dan commit yang kalian push ke remote repository. Setelah itu, gunakan perintah berikut untuk membatalkan commit:

git reset --soft HEAD~

Sekarang, mari kita gunakan git log lagi.

Kalian akan melihat commit hash, dan (HEAD -> main, origin/main) di akhir.

Commit terakhir yang kalian buat tidak lagi menjadi bagian dari riwayat repository dan telah dihapus.

Perintah di atas mengembalikan semuanya ke versi file sebelum commit yang tidak disengaja atau salah dan telah mengembalikan satu commit.

Mari kita periksa git status lagi. 

On branch main

Your branch is up to date with 'origin/main'.


Changes to be committed:

  (use "git restore --staged <file>..." to unstage)

modified:   README.md

Perlu diingat bahwa meskipun perintah git reset --soft HEAD~ membatalkan commit terbaru kalian, tapi tetap menyimpan perubahan yang kalian buat.

Cara Mengembalikan Perubahan Public Committed Changes di Git

Bagaimana jika kalian membuat perubahan pada file, lalu kalian masukkan ke staged dengan git add, meng-commitnya dengan perintah git, dan push ke remote repository dengan git push - tapi kalian sadar bahwa kalian seharusnya tidak meng-commit file itu sejak awal?

Apa yang kalian lakukan?

Pertama, kalian gunakan git status untuk memeriksa status repository git:
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Pada bagian atas, kalian melihat bahwa setiap commit memliki commit hash, dimana itu adalah serangkaian angka dan karakter yang panjang.

Untuk melihat versi pendek dari commit hash, gunakan perintah berikut:

git log --oneline

Dengan perintah git log, kalian bisa memerikan commit mana yang ingin kalian kembalikan.

Katakan commit terakhir kalian memiliki commit hash bb3ccf4, yang mana diikuti (HEAD -> main, origin/main), dan pesan commit seperti "commit README.md file".

Untuk mengembalikan commit yang spesifik, gunakan perintah berikut:

git revert bb3ccf4 --no-edit

 Perintah diatas akan mengembalikan perubahan karena membuat commit baru dan mengembalikan file tersebut ke keadaan sebelumnya, seolah tak pernah berubah.

Yang terakhir, gunakan git push untuk push perubahan ke remote branch.

Setelah kalian melakukannya, kalian akan melihat pesan commit yang sama seperti yang sebelumnya tapi dengan kata revert didepannya, seperti 'Revert "commit README.md file"'.

Ingatlah bahwa riwayat commit akan menampilkan kedua commit secara terpisah:

Revert "commit README.md file"

@johndoe

johndoe committed 9 minutes ago


commit README.md file

@johndoe

johndoe committed 16 minutes ago 

Kesimpulan

Dan begitulah. Kalian sekarang sudah tau caranya untuk membatalkan perubahan di Git. Semoga artikel ini bermanfaat untuk kalian. Terima kasih telah membaca dan jangan lupa bagikan juga ke teman-teman kalian!

 

Proyek Android GudangKita Bagian 4 – Membuat fitur Login & Register berbasis Firebase Authentication Beserta Implementasi Shared Preference

Proyek Android GudangKita Bagian 4 – Membuat fitur Login & Register berbasis Firebase Authentication Beserta Implementasi Shared Preference

Proyek Android GudangKita Bagian 4 – Membuat fitur Login & Register berbasis Firebase Authentication Beserta Implementasi Shared Preference

Ngulik Kode - Assalamu’alaikum teman-teman kembali lagi di Artikel Admin TokoCoding - MuhFikriH, kali ini kita akan melanjutkan Aplikasi GudangKita Part keempat. Di sesi kali ini, Admin akan membantu kalian bagaimana caranya membuat fitur autentikasi Login maupun Register.

A. Font

Font adalah representasi grafis dari teks yang dapat menyertakan jenis huruf, ukuran titik, berat, warna, atau desain yang berbeda. Font memiliki banyak sekali jenis, dan untuk seri pembelajaran kali ini kita akan menggunakan salah satu jenis font yang sudah terkenal yaitu "Poppins". Okey untuk mempersingkat waktu, mari kita masuk ke materi.

1. Download Font

Untuk pertama-tama, silahkan kalian download Font "Poppins" di situs-situs kesayangan kalian, jika belum menemukan nya, kalian bisa mengunduh nya disini. Setelah itu, ganti nama file setiap font tersebut menggunakan huruf kecil.

2. Buat folder "font"

Buka project android kalian, lalu di menu samping kiri, klik kanan pada menu "res" selanjutnya pilih "New" -> "Android Resource Directory".


3. Nama folder

Selanjutnya akan muncul dialog, isi form tersebut dengan ketentuan seperti dibawah ini :
Directory name    : "font"
Resource type      : "font"
Source set            : "main"


4. Sukses menambahkan font

Jika tidak ada error, maka kalian sudah berhasil menambahkan font pada aplikasi kalian.


B. Splash Screen

Ubah code di halaman SplashScreenActivity.java menjadi seperti dibawah ini. 
(Penjelasan ada didalamnya)


C. Register

Buat 1 Activity baru dengan nama RegisterActivity.java beserta layoutnya dengan nama activitiy_register.xml 

1. activity_register.xml

Ubah code di file activity_register.xml menjadi seperti dibawah ini. Untuk asset-assetnya kalian bisa mengunduhnya di Github saya disini


2. RegisterActivity.java

Ubah code di file RegisterActivity.java menjadi seperti dibawah ini. 
(Penjelasan ada di dalamnya)



D. DataHelper berbasis Shared Preference

Jika anda membutuhkan sekumpulan data dengan tipe key-value yang ingin anda simpan dalam aplikasi mobile, anda dapat menggunakan SharedPreferences API. Data dalam SharedPreferences akan disimpan dalam sebuah file yang mengandung key-value secara berpasangan. Setiap file ini dikelola oleh Android framework yang aksesnya dapat diatur secara private atau dibagikan.

Selain digunakan untuk penyimpanan data sederhana, pemanfaatan SharedPreferences digunakan juga untuk menyimpan pengaturan aplikasi. Dengan ini pengguna dapat mengatur aplikasi sesuai dengan keinginan.

Dalam kasus kali ini, kita akan menyimpan data email pengguna ke dalam aplikasi kita agar kita dapat mengetahui pengguna mana yang sedang login dan juga untuk memeriksa apakah pengguna ini harus melakukan transaksi login atau tidak. Langsung saja berikut code beserta penjelasan di dalamnya.


Langkah yang harus dilakukan adalah :

1. Buat package baru dengan klik kanan pada folder project -> New -> Package

2. Beri nama package "helpers"

3. Buat file Java baru dengan nama DataHelper.java

4. Paste code berikut :


E. Login 

Buat 1 Activity baru dengan nama LoginActivity.java beserta layoutnya dengan nama activitiy_login.xml

1. activity_login.xml

Ubah code di file activitiy_login.xml menjadi seperti dibawah ini. Untuk asset-assetnya kalian bisa mengunduhnya di Github saya disini


2. LoginActivity.java

Ubah code di file RegisterActivity.java menjadi seperti dibawah ini. (Penjelasan ada di dalamnya)


Jika semua tutorial di seri ini sudah kalian lakukan, silahkan coba jalankan aplikasi kalian. Coba fitur Register lalu Login, jika ada error silahkan tanya pada kolom komentar. Jika berjalan lancar, maka kalian sudah berhasil membuat fitur Autentikasi berbasis Firebase pada aplikasi kalian.

Baik teman-teman sekian dulu tutorial GudangKita kali ini. Jika ada saran, kritik, atau pertanyaan silahkan tinggalkan pada kolom komentar ya. Semoga ilmunya bermanfaat, terima kasih dan maaf bila ada salah kata. Di artikel berikutnya kita akan belajar mendapatkan data dari Database pada Firebase kita. Sampai jumpa di artikel berikutnya.
Proyek GudangKita Bagian 3 – Tutorial Mengaktifkan Fitur Realtime Database dan Authentication pada Google Firebase

Proyek GudangKita Bagian 3 – Tutorial Mengaktifkan Fitur Realtime Database dan Authentication pada Google Firebase

Proyek GudangKita Bagian 3 – Tutorial Mengaktifkan Fitur Realtime Database dan Authentication pada Google Firebase

Ngulik Kode - Assalamu’alaikum teman-teman kembali lagi di Artikel Admin TokoCoding - MuhFikriH, kali ini kita akan melanjutkan Aplikasi GudangKita Part ketiga. Di sesi kali ini, Admin akan membantu kalian bagaimana caranya mengaktifkan Authentication dan Realtime Database pada Firebase agar kalian bisa membuat fitur Login & Register menggunakan Authentication dari Firebase, sekaligus membuat aplikasi berbasis CRUD dengan memanfaatkan Realtime Database dari Firebase.

A. Authentication User

Firebase Authentication adalah metode untuk membuat dan mengelola pengguna yang login menggunakan alamat email dan sandi. Firebase Authentication juga menangani pengiriman email reset sandi. Simpelnya fitur Firebase ini yang akan kita gunakan untuk menangani fitur Sign In maupun Registrasi akun pengguna.


1.  Buka dashboard projek Firebase lalu klik "Authentication"



2.  Selanjutnya klik tombol "Get Started"


3.  Selanjutnya klik pada pilihan "Email/Password


4.  Aktifkan fitur Authentication menggunakan Email/Password dengan cara klik Radio Buton "Enable" lalu klik tombol "Save"


Konfigurasi fitur Authentication sudah selesai, selanjutnya kita akan mengkonfigurasi fitur Realtime Database.

B. Realtime Database.

Realtime Database adalah database NoSQL yang di-hosting di cloud dan dapat digunakan untuk menyimpan dan menyinkronkan data antar pengguna secara real time. Fitur Firebase yang satu ini akan kita gunakan untuk media penyimpanan data fitur CRUD pada aplikasi kita.

1.  Buka dashboard project Firebase kalian, lalu klik "Realtime Database" setelah itu klik tombol "Create Database"


2.  Pilih lokasi Database kalian
Admin merekomendasikan kalian memilih lokasi database di "Singapore" agar lokasi cloud database tidak terlalu jauh dari negara kita sehingga dapat meningkatkan performa pada aplikasi kita.


3.  Selanjutnya pilih "Start In Test Mode" dan klik tombol "Enable".


4.  Selanjutnya, ubah rules pada database kita 
Rules yang admin gunakan dibawah ini memungkinkan untuk setiap orang dapat mengubah isi database kita dan sebenarnya memiliki resiko yang cukup tinggi, namun admin tetap melanjutkan nya karena berhubung aplikasi yang kita buat kali ini hanya untuk pembelajaran.


Konfigurasi fitur Realtime Database sudah selesai.

Baik teman-teman untuk tutorial GudangKita Part 3 sudah selesai sampai sini, jika ada pertanyaan bisa kalian tanyakan pada kolom komentar. Begitu juga jika ada kritik dan saran. Di tutorial berikutnya kita akan mulai untuk membuat fitur Login & Registrasi pada aplikasi kita.

Terima kasih sudah membaca tutorial ini, sampai jumpa di sesi berikutnya.
Tips dan Trik: Cara Mudah Menghitung Jumlah Nilai dalam Array dengan JavaScript untuk Membuat Aplikasi yang Lebih Baik

Tips dan Trik: Cara Mudah Menghitung Jumlah Nilai dalam Array dengan JavaScript untuk Membuat Aplikasi yang Lebih Baik

Tips dan Trik: Cara Mudah Menghitung Jumlah Nilai dalam Array dengan JavaScript untuk Membuat Aplikasi yang Lebih Baik


Ngulik Kode - Dalam tutorial kali ini kita akan belajar 2 cara menjumlahkan nilai pada array di JavaScript.

  1. Menggunakan for Loop
  2. Menggunakan method reduce()
Bagaimana cara menjumlahkan Array pada JavaScript?

Contoh 1 - Menggunakan for Loop untuk menjumlahkan Array di JavaScript
for Loop adalah metode perulangan yang bisa kita gunakan untuk menjumlahkan array. Kita dapat menggunakannya untuk menambahkan semua angka dalam array dan menyimpannya pada variabel JavaScript.

Penjelasan: 
Pada line 1 kita akan membuat variabel berupa array yang berisi angka-angka, angkanya bebas terserah kalian ya. Kita buat lagi variabel dibawah line 1, kita isi saja nilainya 0. 

Nah pada line 3 ini kita akan melakukan perulangan hingga memenuhi kondisi yang telah dibuat menggunakan metode for Loop. for Loop ini memiliki tiga ekspresi.
for (ekspresi 1; ekspresi 2; ekspresi 3) {
    // kode yang akan dieksekusi
}

Ekspresi 1 diisi dengan nilai dari variabel. Ekspresi 1 akan dieksekusi hanya satu kali.

Ekspresi 2 ini adalah kondisi. Jika kondisi di dalam ekspresi ini benar, maka pengulangan akan berjalan, jika salah maka perulangan akan gagal/tidak berjalan.

Ekspresi 3 akan memperbarui nilai dari Ekspresi 1 jika kondisi dari Ekspresi ke 2 ini benar.

Perulangan ini akan terus berjalan hingga kondisi dalam Ekpresi ke 2 ini bernilai false atau salah.

Pada line 3 di ekpresi 1 kita membuat variabel i dengan nilai 0, lalu ekspresi 2 kita mengkondisikan apabila nilai dari variabel i kurang dari panjang angka yang ada dalam variabel array di line 1, maka ekspresi 3 akan menjalankan penambahan (++) pada variabel i yang ada di ekspresi 1.

Di line 4, yaitu apa yang akan kita ulang hingga memenuhi hasil. Disini kita akan mengulang variabel sum pada line 2 hingga mendapatkan nilai yang kita inginkan. Operator += pada line 4 sama saja seperti sum = sum + array[i]. Artinya nilai sum akan terus bertambah sesuai hingga memenuhi kondisi dari ekspresi 2.

sum = 0 + array[0];

//output: 1

sum = 1 + array[1];

//output: 3

sum = 3 + array[2];

//output: 6

sum = 6 + array[3];

//output: 10

sum = 10 + array[4];

//output: 15

Nah, sudah ketemu diakhir ekspresi ke 2 karena nilai i sudah sama dengan panjang dari variabel array dan hasil akhir jika kita log nilai dari variabel sum adalah 15.

 

Contoh 2 - Menggunakan method reduce() untuk menjumlahkan Array di JavaScript
Kalian dapat menggunakan metode reduce() dalam JavaScript untuk menemukan atau menghitung jumlah array angka.

metode reduce() dalam JavaScript menjalankan fungsi reducer yang ditentukan pada setiap value array yang menghasilkan nilai single output, contoh:

Penjelasan:
Pada line 1 kita membuat variabel berupa array berisi angka-angka, angkanya bebas terserah kalian.
Lalu pada line 4 kita membuat variabel yang berguna untuk menyimpan nilai dari hasil reduce kita. Kemudian kita panggil variabel array bersamaan dengan method reduce, array.reduce(callbackFn, initialValue).

Method reduce() ini memiliki beberapa parameter, tapi saya tidak akan menjelaskan semuanya. Kita akan memakai 3 parameter saja seperti pada contoh di atas.
reduce(function(previousValue, currentValue)) {
    //kode yang akan dieksekusi
}, initialValue);
previousValue adalah nilai yang dihasilkan dari panggilan sebelumnya ke callback function.
currentValue adalah nilai dari elemen saat ini.
initalValue (optional) jika initialValue ini ditentukan, maka ini akan jadi nilai untuk previousValue. Jika nilai initialValue tidak ditentukan, maka previousValue akan menggunakan nilai awal dari variable array di line 1 dan currentValue menggunakan nilai ke 2 pada variabel array di line 1.

Cukup sampai disini untuk pembahasan mengenai cara menjumlahkan nilai yang ada di dalam array pada JavaScript. Semoga artikel ini bermanfaat. Jangan lupa bagikan artikel ini ke teman-teman kalian. Jika kalian bingung atau mendapatkan error silahkan komentar dibawah.
Cara Cek Nilai Array Sama Atau Tidak Dengan Array yang Lain Pada JavaScript

Cara Cek Nilai Array Sama Atau Tidak Dengan Array yang Lain Pada JavaScript

Cara Cek Nilai Array Sama Atau Tidak Dengan Array yang Lain Pada JavaScript

Ngulik Kode - Pada tutorial kita kali ini, kita akan belajar bagaimana mengecek jika sebuah array berisi nilai dari array yang lain pada javascript. Saya menemukan sintaks yang pendek nan ringkas ini untuk mencocokkan semua atau beberapa nilai antara dua Array atau apakah nilai tersebut ada di dalam Array yg lain.

Kita akan menggunakan operator some dan operator includes. Ini adalah salah satu cara yang mudah dan cepat untuk memeriksa apakah suatu nilai dalam array ada di dalam array yang lain. Oke langsung saja ke contohnya.


Contoh 1:

Operator OR akan mencari apakah ada nilai array2 di dalam array1. Cara ini akan mengembalikan nilai TRUE jika salah satu nilai dalam array tersebut sama.

Contoh 2:
Operator AND akan mencari apakah semua elemen array2 ada di dalam array1. Cara ini akan mengembalikan nilai TRUE jika semua nilai dalam array tersebut sama.

Bagaimana? Sangat simple bukan? Semoga artikel ini bermanfaat. Jangan lupa bagikan juga ke teman-teman kalian ya. Jika ada kebingungan silahkan bertanya di kolom komentar.
Belajar JavaScript - Membuat Validasi Password

Belajar JavaScript - Membuat Validasi Password

Belajar JavaScript - Membuat Validasi Password



Ngulik Kode - Keamanan akun sangatlah penting. Sebagai developer kita bisa membuat akun user lebih aman salah satunya dengan membuat password user dengan kombinasi yang unik. Pada artikel kali ini kita akan membuat contoh validasi password menggunakan JavaScript. 

Sekarang buka kode editor kalian masing-masing, di sini saya akan menggunakan Visual Studio Code.

Buatlah dahulu sebuah folder yang berisi file html, css, dan js yang nanti akan kita gunakan. Kita akan menggunakan file index untuk file html, style untuk css dan script untuk javascriptnya.


Kita buat dahulu form input password dan validasinya di index.html


Jika saya jalankan, maka hasilnya akan seperti ini:

Lalu kita styling di style.css supaya lebih menarik, di sini kita akan gunakan font Poppins dan styling untuk form passwordnya.


Kalian save, maka tampilannya akan seperti di bawah ini


Sekarang kita akan tambah icon mata di dalam form password untuk hide and show password. Pertama kita tambah dulu link CDN dari Font Awesome supaya bisa memakai icon dari Font Awesome. Tambahkan kode ini di index.html di atas element title


Lalu kita tambah styling untuk icon show password, tambah kode css ini di file style.css


Sekarang tampilannya akan seperti ini


Sudah ada icon matanya, tapi itu belum berfungsi apa-apa. Sekarang kita akan tambahkan fungsi javascript di script.js. Kita akan import dulu file script.js di index.html. Tambahkan kode berikut di akhir element sebelum </body>


Lalu kita tambahkan kode JavaScript berikut ke script.js


Maka hasilnya akan seperti ini


Sekarang kita akan buat styling untuk validasinya dan juga menambahkan matanya menjadi silang jika show password.


Setelah itu kita tambahkan function javascript untuk validasi passwordnya. Pertama kita tambahkan functionnya di element input dahulu dengan melempar parameter sebuah value yaitu berupa text yang kita ketik di form password nantinya


Lalu terakhir kita buat function checkPassword di script.js dengan menerima parameter yang tadi kita lempar di index.html. Disini kita juga akan menggunakan regular expression untuk membuat validasi password sesuai yang kita buat di index.html


Dan hasil akhirnya akan seperti ini✨


Saya lampirkan keseluruhan kodenya di bawah ini ya



Kita sudah sampai dipenghujung artikel. Bagaimana? Mudah atau susah? Jika ada error silahkan komentar di bawah ya. Semoga bermanfaat dan kalian menyukainya. Jangan lupa bagikan ilmu ini ke yang lainnya juga ya!


Perbedaan Hashing dan Encryption

Perbedaan Hashing dan Encryption

Perbedaan Hashing dan Encryption

 

Ngulik Kode - Dalam dunia programing sering kali kita mendengar istilah "hashing" & "encryption", lalu apa sebenernya itu? dan apakah memiliki perbedaan?


Hashing

Hashing adalah mekanisme pengamanan satu arah sebuah data, artinya setelah data tersebut di hashing kita tidak bisa membukanya kembali, study case yang sering menggunakan metoda hashing adalah ketika kita menyimpan password kedalam database, kenapa menggunakan hashing? untuk mencegah owner applikasi ataupun pihak yang mampu membobol database kita mengetahui password para pengguna aplikasi kita, walaupun sebenernya result hashing bisa ditemukan bila mana pengguna password kita menggunakan password yang mudah ditebak, 

Misal seperti ini : 



Artinya bilamana database kita di bobol oleh pihak yang tidak berwenang (hacker) dan dia mengambil semua data identitas pengguna, salah satunya (username & password) dan mencoba membuat program pencocokan nilai hashing dengan plain text data random yang di input dan menghasilkan result yang sama seperti di database. artinya dia sudah berhasil mengetahui password pengguna aplikasi kita, di sebabkan plain text data password pengguna sangat mudah ditebak seperti gambar di atas. maka dari itu dibuatlah standard strong, middle, low dalam pembuatan sebuah password ketika registrasi account pengguna. untuk mencegah terjadinya hal tersebut.


Nah dari sini sebenernya kita belajar bahwa untuk apa pihak tidak berwenang membuat sebuah program pencocokan tersebut dengan menginputkan random plain text. karena sebenernya hashing tersebut tidak bisa di buka secara langsung, artinya jika plain text tersebut sangat strong butuh berapa lama dia bisa mencocokan hasil hashing tersebut? bagaimana jika penggunak membuat sebuah data plain text seperti ini sebelum di hashing system -> 2021#$akuSayangCil0k$, butuh berapa lama untuk mendapatkan hashing yang cocok? mungkin bisa ratusan tahun!


Encryption

Encryption adalah mekanisme pengamanan sebuah data dimana ketika data tersebut telah selesai di encrypt, itu bisa kita buka tanpa harus melakukan pencocokan hinga ratusan tahun teman-teman hehe, lalu bagaimana membukanya?

Mekanisme membuka hasil encrypt dinamakan sebagain decryption namun menggunakan suatu kunci yang kita sebut sebagai private key/secret key/password, tentunya key tersebut bersifat rahasia, artinya yang mengetahui adalah pihak yang melakukan encryption data dan decryption data tersebut.

Lalu tujuannya untuk apa? melindungi data tersebut dari pihak ketiga.

Mari kita lihat metode sederhana encryption :



Saya menggunakan password : hanyakitayangtahu
Result Hashing :
48+sRrFkffdIn8T2dAdhKNTxxhbIeDep4rYf5IfFsmRglWfypXnU/JGad5mcKR86wLwnVnA1ERJqoT2r7DJic9i1bNb6Cr7mwA4dKlhvJCzqxLpSFJD9kJ+nSd4/Eacz

Lalu bagaimana membuka hasil encryption (decrypt) tersebut tanpa harus membuat program pencocokan seperti saat menggunakn metoda hashing?
kita hanya perlu melakukan proses decryption dengan memasukan nilai password yang sama ketika melakukan encryption, maka akan seperti ini :



Cukup mudah bukan melakukan decryption ketika kita mengetahui password key nya?

Mudah sekali, namun password key ini aka sangat sekali bersifat rahasia artinya pihak ketiga tidak akan pernah bisa membuka data encryption tersebut, ini akan membuat pihak ketiga menyerah dan tak ingin membuang waktunya untuk membukan encryption data tersebut, mungkin akan membutuhkan ribuan tahun lamanya bilamana pihak ketiga tidak pernah mengetahui password key kita, namun akan dengan mudah bahkan cukup hitungan detik membukanya jika pihak ketiga mengetahui nya.

Case encrypt decrypt biasanya digunakan untuk pengiriman message data yang sangat rahasia melalui jaringan.

Conclusion

Hashing dan Encryption memiliki perbedaan perilaku pengamanan sebuah data.

Hashing metoda satu arah sedangkan encryption metoda dua arah, 
artinya data hasil hashing tidak bisa di buka kembali, sedangkan data hasil encryption bisa di buka kembali namun perlu mengetahui private key,secret key/password untuk membukanya.

Rumus hashing dan Encryption pun pastinya berbeda. hashing hanya mengandalkan formula fixed tanpa ada kombinasi password seperti layaknya metode encryption.

Begitu banyak metode dan rumus formula dalam melakukan hashing dan encryption data, ilmu yang membahas hal tersebut dinamakan kriptografi ini adalah bagian ilmu tertinggi dalam bidang komputer dan pastinya tidak mudah untuk di pelajari.


Referensi Tools Encryption :

https://www.gillmeister-software.com/online-tools/text/encrypt-decrypt-text.aspx

Referensi Tools Hashing :

https://emn178.github.io/online-tools/sha256.html 




Belajar Node.js Bagian 1: Cara Mudah Install Node.js di Windows 10 untuk Pemula

Belajar Node.js Bagian 1: Cara Mudah Install Node.js di Windows 10 untuk Pemula

Belajar Node.js Bagian 1: Cara Mudah Install Node.js di Windows 10 untuk Pemula

Ngulik Kode - Halo semuanya, balik lagi bersama saya dalam tutorial belajar node js bagian 1 yaitu cara install node.js di windows 10, lalu apa saja yang perlu disiapkan untuk menginstall node.js ini ?

Mari sama-sama kita ikuti langkah-langkahnya seperti dibawah :

1. Langkah-Langkah Install Node.js

Bagian ini adalah tahapan-tahapan untuk menginstall node.js pada windows 10, ikuti langkah-langkahnya agar teman-teman bisa berhasil menginstallnya : 
  1. Buka halaman resmi dari node.js untuk mendownload installer yang kita inginkan, karena disini saya mencontohkan dengan menggunakan windows jadi pilihnya yang "Windows Installer".

    Atau biasanya juga halaman websitenya sudah membaca sistem operasi yang kita gunakan, seperti gambar berikut, lalu kita pilih LTS


  2. Kemudian akan langsung ke download sesuai dengan bit pada kebutuhan laptop teman-teman.


  3. Kemudian jalankan installer Node.js.msi yang telah kita didownload lalu klik accept lecense agreement lalu klik next.


  4. Tentukan lokasi installasi yang kita inginkan, bisanya langsung next aja karena windows akan mengarahkan secara default folder installasinya.


  5. Pada custom setup kita langsung next aja.


  6. Install dependencies, dengan mencentang "Automatically install the necessary tools. ...", kemudian next.


  7. Klik "install" untuk memulai proses instalasi



    Catatan: Pada bagian ini biasanya instalasi akan membutuhkan privilese sebagai Administrator, maka langsung klik "Yes" apabila muncul opsi untuk meminta izin Admin untuk melakukan instalasi.

  8. Selamat Installasi Selesai.

2. Pastikan Node.js Yang Kita Install Sudah Benar

Kemudian teman-teman coba buka command prompt, lalu ketikkan perintah seperti berikut, untuk melihat versi dari Node.js yang telah terinstall di komputer/laptop teman-teman. Ketikkan seperti berikut : 
node -v

Dan perintah untuk menjalankan melihat versi npm yang terinstall di komputer/laptop teman-teman dengan mengetikkan seperti berikut :

npm -v 

Jika Node.js telah terinstall dengan benar maka akan tampil seperti gambar berikut : 


3. Update Versi npm


npm adalah package manager pada JavaScript atau Node.js, Sebagai tahap akhir instalasi Node.js pada windows 10 ini tidak lupa kita akan mengupdate versi npm. Instalasi npm ini walaupun satu pake dengan instalasi Noje.js, tetapi tidak terupdate secara otomatis ke versi terbarunya, sekalipun kita menginstall Node.js dengan versi terbaru.

Sehingga, kita harus tetap mengupdate versi terlebih dahulu agar versi yang kita gunakan yang terbaru. Berikut ini contoh perintah untuk mengupdate npm dengan menggetikan command pormpt seperti berikut :

npm install npm --global

Kemudian cek kembali versi npm teman-teman dengan menggetikkan perintah berikut, lalu bandingkan dengan versi sebelumnya 

npm -v 

Berikut output hasil update npm di command prompt :



npm berhasil terupdate dari versi 8.11.0 ke 8.17.0

Selamat mencoba, semoga teman-teman dapat berhasil dan semoga bermanfaat, sampai bertemu pada tulisan-tulisan saya berikutnya. 

Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Ngulik Kode - Bagi kalian yang sudah pernah membuat web pasti pernah mendengar css framework satu ini. Bootstrap adalah salah satu css framework yang populer di kalangan front end developer. Karena mudah digunakan, konsisten, dan juga responsive. Hingga saat artikel ini dibuat, Bootstrap ini sudah sampai versi 5.2.

Oke mari kita mulai cara menggunakan bootstrap pada halaman web kita.


Install Bootstrap

Ada dua cara untuk menginstall bootstrap

Yang pertama, kita bisa menggunakan NPM (Node Package Manager)


Yang kedua, kita bisa menggunakan CDN (Content Delivery Network)



Untuk artikel kali ini kita akan menggunakan cara yang kedua.


Mari kita eksekusi

Buatlah folder dahulu untuk file html kalian


 Lalu buka code editor kalian di dalam folder yang sudah kalian buat tadi. Karena di sini saya menggunakan Visual Studio Code, maka saya akan masuk ke dalam folder yang sudah saya buat, lalu saya klik kanan dan klik Open With Code


Maka tampilannya akan seperti ini


Lalu kita buat file html kita di dalam folder tersebut dan ketikkan template html seperti di bawah ini :




Lalu tambahkan kode bootstrap yang akan kita gunakan via CDN


Nah dari sini kita sudah bisa menggunakan component dari bootstrap. Mari kita coba membuat navbar dari bootstrap.

Kode dibawah ini adalah component navbar dari bootstrap, coba kalian copy ke code editor kalian di file yang tadi kalian buat ya.



Jadi keseluruhan kode kita akan seperti di bawah ini



Untuk cek hasil di browser, kalian save dulu filenya dengan menekan CTRL + S. Lalu buka file explorer di direktori file html kalian berada. Klik kanan > Pilih Open With > Pilih browser yang kalian gunakan.



Maka akan terbuka hasil dari file html kita tadi


 Ada cara lain untuk membuka hasil file html kita tadi dengan cara yang lebih mudah dan tampilannya langsung berubah setelah kita save filenya. Yaitu, menggunakan extension Live Server di Visual Studio Code.


Kalian bisa langsung install extension ini dan nanti akan muncul simbol Go Live di Status Bar bawah VS Code sebelah kanan


Kalian Klik Go Live dan nanti tampil browser kalian dengan hasil yang kita kerjakan tadi, tetapi dengan link yang berbeda. Link sekarang sudah menggunakan IP dan Port.


Sekarang perubahan yang terjadi di kode kalian akan langsung berubah juga dibrowser.

Untuk pembahasan Bootstrap kali ini saya rasa cukup sampai di sini. Semoga artikel kali ini bermanfaat dan kalian menyukainya. Bagikan artikel ini dan beri komentar di bawah apa yang ingin dibahas selanjutnya ya!