Cara Mengembalikan Kondisi Codingan ke Commit Sebelumnya

Cara Mengembalikan Kondisi Codingan ke Commit Sebelumnya

Cara Mengembalikan Kondisi Codingan ke Commit Sebelumnya



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.
Cara Menjumlahkan Nilai yang Ada Di Dalam Array Pada JavaScript

Cara Menjumlahkan Nilai yang Ada Di Dalam Array Pada JavaScript

Cara Menjumlahkan Nilai yang Ada Di Dalam Array Pada JavaScript


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 Nodejs Bagian 1 – Cara Mudah Install Node.js di Windows 10

Belajar Nodejs Bagian 1 – Cara Mudah Install Node.js di Windows 10

Belajar Nodejs Bagian 1 – Cara Mudah Install Node.js di Windows 10

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. 

Belajar Install dan Menggunakan Bootstrap

Belajar Install dan Menggunakan Bootstrap

Belajar Install dan Menggunakan Bootstrap

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!