30 Hari Javascript-Compressed

30 Hari Javascript
Oleh: Asrul Harahap
Daftar Isi
Daftar Isi
Hari Pertama
Pengantar
Persyaratan
Persiapan
Instal NodeJS
Instal VS Code
Instal Google Chrome
Menggunakan Chrome Console
Kode Pada Chrome Console
Mengenal Javascript
Tipe Data
Number
String
Boolean
Undefined
30 Hari Javascript 1
Null
Memeriksa Tipe Data
Komentar
Variable
Hari ke Dua
Tipe Data non-Primitif
Number
Math
String
Method .length
Method .toUpperCase()
Method .toLowerCase()
Method .substr()
Method .split()
Method .trim()
Method .repeat()
Hari ke Tiga
Boolean
Operator
Assigment Operator
Operator Aritmatika
Operator Pembanding
Operator Logika
Operator Kenaikan dan Penurunan
Operator Ternary
Hari ke Empat
Percabangan
IF
IF-ELSE
IF-ELSE IF
Switch
Ternary
Hari ke Lima
Array
Ubah nilai Array
Method .concat()
Method .length
Method .indexOf()
Method .join()
Method .push()
Method .pop()
Method .unshift()
Method .shift()
Method .sort()
Method .slice()
Array Multi-dimensi
Hari ke Enam
Perulangan
For Loop
While loop
For Of
Object Literal
Cara akses objek literal
Mengubah nilai
Hari ke Tujuh
Latihan
Function
Cara Memanggil function
Void Function
Return Function
Function dengan parameter
Parameter dengan nilai default
CallBack
Hari ke Delapan
Module
Menyiapkan Proyek
Install Express Js
Membuat Web Server
Menjalankan Web Server
Hari ke Sembilan
Install Insomnia REST
Mengenal HTTP Method
Request
Response
Hari ke Sepuluh
Router
Controller
Hari ke Sebelas
Model dan Sequelize
Install Sequelize Cli
Install Sequelize
Initisalize Sequelize
Koneksi Database
Membuat Model
Migrate Model
Hari ke Dua Belas
Create
Read
Update
Delete
Hari ke Tiga Belas
Authentication
Tambah Kolom Sequelize
Register User
Token User
Authorize
Hari ke Empat Bela
Latihan
Deploy Server
Mysql Online
Heroku
Hari ke Lima Belas
Pengenalan ES6
var , const dan let
Arrow Function
Helper ES6
Module
Dasar-dasar DOM
Selector DOM
Berdasarkan ID
Berdasarkan Class
Berdasarkan Tag
Membuat element dan menambah attribute
Mengedit Element
Menghapus Element
Pada elemennya sendiri
Beri event pada selector
AddEventListener
Hari ke Enam Belas
React Js
Install React Js
WTF JSX
Component
Component class
Component function (dibahas pada materi Hooks)
Props
Mengakses Props
State
Mengubah Nilai State
Mengakses State
Hari ke Tujuh Belas
React Router DOM
Uji Router
Hari ke Delapan Belas
Persiapan React Redux
Reducer
Action
Store
Provider
Hari ke Sembilan Belas
React Hooks
useState
useRef
useEffect / lifeCycle Hooks
Konsum Redux
Hari ke Duapuluh
Input pada React
Action simpan ke database
Hari ke Duapuluh Satu
Latihan
Persiapan Deploy
Deploy
Hari ke Duapuluh Dua
Persiapan Masuk React Native
Node Js
Java Development Kit
Android Studio
Install React Native
Menjalankan React Native
Hari ke Duapuluh Tiga
React Native Dasar
Hello World!
Style
Layout
Text Input
Button
ScrollView
Hari ke Duapuluh Empat
Penggunaan UI
Menggunakan nativebase
React Router Native
Hari ke Duapuluh Lima
Icon
Redux
Hari ke Duapuluh Enam
Login
Logout
Hari ke Duapuluh Tujuh
Register
Hari ke Duapuluh Delapan
Latihan
Hari ke Duapuluh Sembilan
Publish Play Store
Persiapan Publish
Upload
Hari ke Tigapuluh
Apa selanjutnya?
Hari Pertama
Update: Minggu, 05 Januari 2020
Pengantar
Semamat bagi teman-teman yang memutuskan untuk mengikuti series pembelajaran
javascript ini, Pada series ini Anda akan belajar Javascript dari dasar hingga tingkat
menengah. Dan pada akhir series ini Anda akan diminta untuk membuat sebuah proyek
akhir, yang dikirimkan ke email talkasrul@gmail.com. Ini hanya menguji tingkat
keseriusan anda dalam mengikuti pembelajaran saja.
Untuk diskusi saya telah siapkan group Telegram (https://www.notion.so/talkasrul/30-
Hari-Javascript-
eb5661d5bedf41cbb2381c446024e32f#192031195ff6419e9c56e7416e8915b5)
Persyaratan
Untuk mengikuti series ini Anda perlu:
1. Motivasi yang tinggi
2. Laptop dengan OS apasaja (rekomendasi: Linux)
3. Koneksi Internet
4. Browser (rekomendasi: Google Chrome)
5. Teks Editor (rekomendasi: VS Code)
6. Kopi dan Snek (optional)
Persiapan
Instal NodeJS
Unduh atau download file untuk instal node js pada link ini. Silahkan download sesuai
OS Anda, disarankan mendownload nodejs dengan versi yang LTS.
Double Click file yang telah didownload dan ikuti intruksi instal nodejs hingga selesai.
Jika instal nodejs selesai dapat dicek dengan cara mengetikkan perintah ini diterminal.
node -v
Jika versi nodejs tersedia, maka dapat disimpulkan bahwa instalasi nodejs berhasil.
Instal VS Code
VS Code adalah aplikasi teks editor yang akan kita gunakan untuk menuliskan kode.
Silahkan download di sini.
Install hingga selesai, dan tampilannya seperti berikut ini.
Instal Google Chrome

Ada banyak sekali browser seperti Firefox, Opera, Edge, Internet Explorer dll, tapi saya
sangat merekomendasikan google chrome. Mungkin juga Anda sudah
menggunakannya. Bagi yang belum silahkan download di sini
Ikuti langkah demi langkah dan selesaikan instal google chrome.
Menggunakan Chrome Console

Untuk membuka Chrome Console, klik kanan pada chrome, kemudian pilih inspect.
Maka hasilnya akan seperti berikut.
Kode Pada Chrome Console

Silahkan tuliskan kode berikut untuk menguji konsol dapat digunakan dengan baik.
console.log("Belajar Bersama Asrul Dev");
Mengenal Javascript
Javascript adalah salah satu bahasa pemograman yang dapat dipakai sebagai bahasa
Backend untuk REST API atau Web Server, bisa dipakai sebagai frontend untuk web,
desktop, maupun mobile. Bahkan javascript juga bisa digunakan loh untuk robot dan
AI.
Untuk lebih jelasnya tentang javascript silahkan baca-baca di google yah. :)
Buatlah folder dengan nama 30hari sebagai tempat menyimpan file-file javascript ,js
yang kita gunakan untuk belajar. Kemudian arahkan pada terminal lalu buka VScode.
Perhatikan gambar.
Setelah Vscode terbuka maka pilih new file untuk memulai belajar.
ekstensi yang digunakan .js
Tipe Data
Saya rasa semua bahasa pemrograman pasti ada yang namanya tipe data. Berikut ini
adalah tipe data primitif JavaScript: String , Number , Boolean , Undefined , Null , dan
Symbol .
Number
Number itu adalah tipe data yang dapat diproses matematika, seperti tambah, kali,
bagi, dll.
1. Integer yaitu bilangan negatif, nol, positif: 100, 0, 25
2. Float yaitu bilangan negatif atau positif berkoma: 2.12, 3.14
String
String adalah sebuah karakter atau sekumpulan karakter yang ditulis diantara tanda
kutif tunggal atau double atau bisa juga dengan tanda backtik.
'Asrul harahap'
"Belajar Javascript"
Selamat Tahun Baru 2020
Boolean
Boolean berupa pernyataan benar atau salah dengan nilai true atau false, biasanya
digunakan untuk membandingkan atau mengecek kondisi, misal apakah hujan? bisa
true atau bisa false.
Undefined
Dalam JavaScript, jika tidak menetapkan nilai ke variabel, maka nilainya undefined .
Selain itu, jika suatu fungsi tidak mengembalikan atau return apa pun, maka nilai yang
dikembalikan adalah undefined .
Null
Null adalah nilai kosong, ini mungkin akan dibahas sesuai kasus kedepannya.
Memeriksa Tipe Data

Javascript telah menyediakan kode untuk memeriksa tipe data yaitu typeof .
contoh
console.log(typeof 2020);
console.log(typeof "Asrul Harahap");
console.log(typeof false);
Tulis contoh pada file .js kemudian simpan dan jalankan pada terminal seperti
gambar berikut.
Komentar
Terkadang kita butuh catatan pada baris kode yang kita tulis guna untuk mengingatkan
kita sebagai developer dan bukan untuk dieksekusi oleh program. Pada javascript
memiliki beberapa cara untuk membuat Komentar.
Komentar 1 baris
// Ini hanya komentar tidak dieksekusi

console.log("ini dieksekusi");
Komentar dengan beberapa baris
/**
* conversi jam ke menit
* param jam: number
*/
function hourToMinutes(hour) {
return hour * 60;
}
Variable
Variable adalah wadah yang dapat menyimpan data. Misal variabel nama berisi Asrul
Harahap.
var nama = "Asrul Harahap";

console.log(nama);
Variabel punya aturan dalam penulisan, yaitu:
1. Tidak boleh dimulai dengan angka
2. Tidak boleh menggunakan spasi
3. Tidak boleh menggunakan karakter khusus kecuali tanda dollar (\$) dan garis
bawah (\_)
Penulisan variabel diawali kaya kunci atau keyword var , let , atau const .
var alamat = "Jakarta Selatan";

let website = "<http://asrul.dev>";
const pi = 3.14;
Kapan untuk penggunaan var, let, dan const akan dibahas pada
pembahasan lainnya. Sabar yah....
Hari ke Dua
Update: Senin, 06 Januari 2020
Tipe Data non-Primitif

Kemarin kita sudah bahas beberapa jenis tipe data primitif, selain itu ada juga tipe data
referensi atau non-primitif, berdiri berdasarkan tipe data lain, yaitu:
1. Array
2. Object
3. Function
Tipe data non-primitif dapat dimodifikasi atau diubah. Kita dapat memodifikasi nilai
tipe data non-primitif setelah dibuat. Mari kita lihat dengan membuat sebuah array.
Array adalah daftar nilai data yang kiapit oleh tanda kurung siku dan dipisahkan tanda
koma. Array dapat berisi tipe data yang sama atau berbeda. Nilai array dirujuk oleh
indeks masing-masing data. Dalam indeks array JavaScript dimulai dari nol. Yaitu,
elemen pertama dari sebuah array ditemukan di indeks nol, elemen kedua di indeks
satu, dan elemen ketiga di indeks dua, dan selanjutnya.
let siswa = ["Asrul", "Anis", "Tisha", "Rifky"];

console.log(siswa[1]);
// hasilnyya: Anis
Tipe data non primitif tidak bisa dibandingkan, bahkan walau nilainya sama.
let nilai = [1, 2, 3];

let angka = [1, 2, 3];
console.log(nilai === angka);

// hasilnya: false
Array akan kita bahas nanti, untuk sekarang kita skip dahulu.
Number
Sedikit telah dibahas pada hari pertama bahwa tipe data number berupa bilangan bulat
dan pecahan atau desimal baik negatif maupun positif beserta dengan nol.
Contoh
let panjang = 30;
let lebar = 21.52;
let luas = panjang * lebar;
console.log("Luas adalah ", luas);
// Hasilnya: Luas adalah 645.6
Anda dapat melakukan operasi matematik baik bilangan desimal dengan desimal atau
dengan bilangan bulat.
Math
Pada javascript telah disediakan object Math yang berfungsi sebagai alat bantu dalam
urusan kalkulasi matematik seperti max, min, random, pow, dll.
Tabel Math
Method Keterangan
Math.PI PI adalah rasio keliling lingkaran terhadap diameternya; sekitar 3.14159.
Math.round Pembulatan nilai keangka terdekat
Math.floor Membulatkan nilai kebawah
Math.ceil Membulatkan nilai keatas
Math.min Mencari angka terkecil dari deretan angka
Math.max Kebalikan dari Math.min, mencari yang terbesar
Math.random Mencari nilai acak berupa 0 to 0.999999999...
Math.sqrt Mencari nilai akar dari angka yang didefenisikan
Untitled
Ada banyak lagi method matematik yang disediakan oleh javascript, silahkan baca di
sini
Contoh penggunaan pada soal berikut.
Jika diketahui sebuah lingkaran mempunyai diameter 14 cm. Berapakah luas lingkaran
tersebut?
Penyelesaian:
Diketahui:
d = 14cm
karena d = 2 × r maka:
r = d/2
r = 14/2
r = 7cm
Ditanyakan: Luas lingkaran?
Jawab:
Luas = π × r²
Luas = 3.14 × 7²
Luas = 154cm²
Jadi, luas lingkaran tersebut adalah 154 cm².
let d = 14;
let r = d / 2;
let luas = Math.PI * r * r;
console.log(luas);
// hasilnya: 153.93804002589985
console.log(Math.round(luas));
// hasilnya 154
Referensi pendukung untuk number baca di sini
String
Pada bagian ini kita akan perdalam lagi materi String yang telah kita bahas
sebelumnya. String didefenisikan harus menggunakan tanda kutif tunggal, dobel atau
backtik.
let nama = "Asrul Harahap";

let alamat = `Jl. Tanah Kusir II
Gang Pramuka II
Kelurahan Kebayoran Lama Selatan
Kecamatan Kebayoran Lama
Kota Jakarta Selatan
DKI Jakarta - 12240
Indonesia
`;
let pekerjaan = "Full Stack Developer";
Anda dapat menggabung dua string atau lebih yang disebut dengan string concat.
let firstName = "Asrul";

let lastName = "Harahap";
let fullName = firstName + " " + lastName;
console.log(fullName);
// hasil: Asrul Harahap
console.log(`${firstName} ${lastName}`);
// hasil: Asrul Harahap
Pada contoh ada penggunaan ${variable} ini adalah salahsatu cara menggunakan
concat string javascript yang disebut dengan template literal. Anda bebas
menggunakan cara pertama atau kedua, sesuai nyamannya Anda dalam ngoding.
Method .length
String memiliki properti .leng yang berfungsi untuk menghitung jumlah karakter pada
string.
let nama = "Anis Fikriyyah";
console.log(nama.length);
// hasil: 14
Method .toUpperCase()
toUpperCase() digunakan untuk mentranform string menjadi huruf besar semua
console.log(nama.toUpperCase());
// hasil: ANIS FIKRIYYAH
Method .toLowerCase()
Ini merupakan kebalikan dari .toUpperCase(), yaitu mentransform string menjadi huruf
kecil semua.
console.log(nama.toLowerCse());
// hasil: anis fikriyyah
Method .substr()
substr digunakan untuk mengiris atau memotong karakter, ini membutuhkan 2
argumen yaitu indeks mulai dan jumlah karakter yang diiris.

console.log(nama.substr(5, 6));
// hasil: Fikriy
Perhatikan gambar berikut
Method .split()
split ini digunakan untuk menjadikan string menjadi potongan array.
let nama = "Asrul Harahap";
console.log(nama.split(" "));
// hasil: ["Asrul", "Harahap"]
let firstName = "Asrul";
console.log(firstName.split(""));
// hasil: ["A", "s", "r", "u", "l"]
let countries = "Asrul, Anis, Tisha, Lan, Rifki";
console.log(countries.split(","));
// hasil: ["Asrul", "Anis", "Tisha", "Lan", "Rifki"]
Method .trim()
Digunakan untuk menghapus spasi berlebih diawal atau diakhir string
let nama = " Anies Baswedan ";
console.log(nama);
// hasil: Anies Baswedan
console.log(nama.trim());
// hasil: Anies Baswedan
Method .repeat()
Dari namanya sudah bisa kita tebak gunanya untuk apa, ya benar gunanya untuk
mengulang string sebanyak yang didefenisikan.
let mood = "bahagia";

console.log(mood.repeat(10));
// hasil: bahagiabahagiabahagiabahagiabahagiabahagiabahagiabahagiabahagiabahagia
Masih banyak lagi method pada string seperti indexOf, replace, dll. Anda bisa baca
selengkapnya di sini
Hari ke Tiga
Update: Selasa, 7 Januari 2020
Boolean
Boolean hanya memiliki nilai benar atau salah ( true / false ). Biasanya boolean ini
digunakan untuk membandingkan nilai menggunakan operator pembanding.
let punyaCinta = false;

let udahNikah = true;
let lebihTua = 40 > 13;
Operator
Assigment Operator
Operator ini digunakan untuk mengisi nilai pada sebuah variable. Misal variable usia
diisi dengan 25.
let usia = 25;
Perhatikan tabel berikut
Tabel Assigment Operator
Operator Contoh Penjelasan
= x = 10 x menyimpan nilai 10
+= x += 1 nilai awal x ditambahkan dengan 1 atau sama artinya dengan x = x + 1
Operator Contoh Penjelasan
-= x -= 1 nilai awal x dikurangkan dengan 1 atau sama artinya dengan x = x - 1

\*= x \*= 1 nilai awal x dikalikan dengan 1 atau sama artinya dengan x = x \* 1
/= x /= 1 nilai awal x dibagikan dengan 1 atau sama artinya dengan x = x / 1
Perhatikan contoh penggunaan assigment operator berikut.
let nilai = 19;

nilai += 20;
console.log(nilai);
// hasilnya: 39
Operator Aritmatika
Operator ini digunakan untuk proses matematik seperti tambah, kurang, kali, bagi, dll.
let bil1 = 10;

let bil2 = 5;
console.log(bil1 * bil2);
// hasil: 50
Operator Pembanding
Pada pemrograman kita dapat membandingkan dua nilai dengan operator pembanding.
Dicek dengan hasil antara benar (true) atau salah (false).
Tabel Operator Pembanding
Operator Nama Contoh

== Sama dengan x == y
=== Sangat Sama dengan x === y
!= Tidak sama dengan x != y
Operator Nama Contoh
!== Sangat tidak sama dengan x !== y
> Lebih dari x>y
< Kurang dari x<y
>= Lebih dari atau sama dengan x >= y
<= Kurang dari atau sama dengan x <= y
Perhatikan contoh operator pembanding berikut.
console.log(5 > 1);

// hasilnya: true, karena 5 lebih besar dari 1
console.log(2 <= 3);
// hasilnya: true, karena 2 lebih kecil dari 3
console.log(3 == 2);
// hasilnya: false, karena 3 tidak sama dengan 2
console.log(0 == false);
// hasilnya: true, karena 0 dianggap false dalam javascript
console.log(1 === true);
// hasilnya: false, karena tipe data berbeda
Sering ulangi agar lebih paham penggunaan operator perbandingan ini, karena dalam
pemrograman bahasa apapun ini akan sangat sering ditemui. Bahkan saya bisa bilang
bahwa yang belum dapat memahami operator ini tidak akan bisa menjadi seorang
programmer.
Operator Logika
Terdapat tiga operator yang termasuk operator logika, yaitu:
AND, jika salah satu bernilai false maka hasilnya false.
Tabel Logika AND
Nilai Kiri Nilai Kanan NIlai Kiri AND Nilai Kanan

true true true
true false false
false true false

false false false
Perhatikan tabel OR, jika salah satu bernilai true maka hasilnya true.
Tabel Logika OR

true true true
true false true
false true true
false false false
NOT, kebalikan dari nilai aslinya. Tidak true artinya false, dan sebaliknya.
Operator logika akan mengevaluasi bagian kiri kemudian mengevaluasi bagian kanan,
hasil yang di return tergantung operator yang digunakan.
console.log(5 > 3 && 10 > 5);

// hasil: true
console.log(true || 1 > 5);
// hasil: true
console.log(!true);
// hasil: false
Operator Kenaikan dan Penurunan

Ada dua tipe oparator ini yaitu: Pra naik/turun, nilai akan bertambah/berkurang
sebelum ditampilkan dan Pasca naik/turun, nilai akan bertambah/berkurang setelah
ditampilkan.
Pra
let hitung = 0;
console.log(++hitung);
// hasil: 1
console.log(hitung);
// hasil: 1
Pasca
let hitung = 0;
console.log(hitung--); // 0
console.log(hitung); // -1
Operator Ternary
Operator ini memungkinkan untuk menulis kondisi atau disebut operator percabangan.
let sedangHujan = true;

sedangHujan
? console.log("Kamu butuh payung")
: console.log("Slow aja hari cerah kok");
// hasil: Kamu butuh payung
Referensi untuk operator baca di sini
Hari ke Empat
Update: Rabu, 08 Januari 2020
Percabangan
Percabangan atau sering disebut juga dengan conditional digunakan untuk
pengambilan keputusan berdasarkan kondisi-kondisi. Secara default, javascript
menjalankan percabangan dari atas kebawah. Misal jika sudah ketemu nilai true maka
selanjutnya kode akan diabaikan oleh program.
IF
Gunakan if untuk menjalankan kode yang pada kondisi yang bernilai benar.
if (syarat) {
// Jalankan kode jika syarat terpenuhi atau bernilai benar
}
Perhatikan penggunaan if berikut
let usia = 19;

if (usia >= 18) {
console.log("Okay selamat, Anda boleh ikut");
}
// hasil: Okay selamat, Anda boleh ikut
Pada contoh, jika usia dibawah 18 maka program tidak menjalankan apa-apa.
IF-ELSE
IF-ELSE ini memungkinkan untuk menjalankan kode yang tidak sesuai dengan
persyaratan.
if (syarat) {
// Jalankan kode jika syarat terpenuhi atau bernilai benar
} else {
// Jalankan kode jika syarat tidak terpenuhi atau bernilai salah
}
Perhatikan penggunaan IF-ELSE berikut.
let usia = 10;
if (usia >= 18) {
console.log("Okay selamat, Anda boleh ikut");
} else {
console.log("Maaf nak, Anda harus menunggu beberapa tahun lagi");
}
// hasil: Maaf nak, Anda harus menunggu beberapa tahun lagi
IF-ELSE IF
Mungkin anda butuh untuk mengambil keputusan dari beberapa syarat yang diajukan,
seperti halnya kehidupan sehari-hari.
if (syarat) {
// jalankan jika syarat terpenuhi
} else if (kondisi) {
// jalankan jika syarat terpenuhi dan syarat sebelumnya tidak terpenuhi
} else {
// jalankan jika semua syarat tidak terpenuhi
}
Perhatikan penggunaan IF-ELSE IF berikut.
let angka = 0;
if (angka > 0) {
console.log(`${angka} adalah bilangan positif`);
} else if (angka < 0) {
console.log(`${angka} adalah bilangan negati`);
} else if (angka == 0) {
console.log(`${angka} adalah Nol`);
} else {
console.log(`${angka} bukanlah angka yang valid`);
}
// hasil: 0 adalah Nol
Switch
Switch adalah alternatif untuk if else . Blok case dijalankan jika nilai dalam tanda
kurung pernyataan cocok dengan case. Berhenti jika case telah terpenuhi.
switch (nilai) {
case 1:
// jalankan jika nilai sama dengan case 1
break;
case 2:
// jalankan jika nilai sama dengan case 2
break;
default:
// jalankan jika semua case salah
}
Perhatikan contoh switch berikut.
let cuaca = "berawan";

switch (cuaca) {
case "hujan":
console.log("Kamu butuh jas hujan");
break;
case "berawan":
console.log("Sedikit dingin, gunakan jaket kesayanganmu");
break;
case "cerah":
console.log("Senangnya bisa kemana saja");
break;
default:
console.log("BMKG belum update cuaca nih :(");
}
// hasil: Sedikit dingin, gunakan jaket kesayanganmu
Ternary
Ini sudah dibahas pada hari sebelumnya, Silahkan cek kembali...
Hari ke Lima
Update: Kamis, 09 Januari 2020
Array
Array dapat menyimpan banyak data dengan tipe data yang berbeda-beda. Setiap nilai
dalam array memiliki indeks dan memiliki referensi di alamat memori. Nilai dapat
diakses dengan indeks yang dimulai dari indeks ke NOL ( 0 ). Elemen terakhir adalah
panjang indeks dikurang 1.
Array ditandai dengan kurung siku []
let peliharaan = [];

let makanan = ["pisang", "susu", "indomie"];
console.log(makanan[2]);
// hasil: indomie
Ubah nilai Array

Untuk mengubah nilai array bisa menggunakan indeks kemudian beri nilai layaknya
memberi nilai pada variable.
let makanan = ["pisang", "susu", "indomie"];
// hasil: indomie
makanan[2] = "Nasi";
// hasil: Nasi
Method .concat()
Untuk menggabung dua array atau lebih bisa menggunakan concat.
let buah = ["pisang", "jeruk", "mangga", "lemon"];

let sayuran = ["Tomat", "Kentang", "Kubis", "Bawang", "Wortel"];
let isiKulkas = buah.concat(sayuran);
console.log(isiKulkas);
// hasil: ['pisang', 'jeruk', 'mangga', 'lemon', 'Tomat', 'Kentang', 'Kubis', 'Bawang', 'W
ortel']
selain pakai .concat() bisa juga menggunakan array spread (ES6).
const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// hasil: [1,2,3,4,5,6]
Method .length
Untuk mendapatkan panjang array bisa menggunakan array.length.
let siswa = ["Anis", "Asrul", "Tisha"];

console.log(siswa.length);
// hasil: 3
Method .indexOf()
Method .indexOf, digunakan untuk memeriksa apakah ada item dalam array. Jika ada, ia
mengembalikan indeks item tersebut, jika tidak ada maka mengembalikan -1 .
let isiKulkas = ["semangka", "pisang", "mangga", "apel"];

let index = isiKulkas.indexOf("semangka");
console.log(index);
// hasil: 0
if (index != -1) {
console.log("Buah tersebut ada dalam kulkas, silahkan ambil");
} else {
console.log("Buah itu belum tersedia dalam kulkas");
}
// hasil: Buah tersebut ada dalam kulkas, silahkan ambil
Method .join()
Method .join() digunakan pada array untuk menggabungkan item-item dan
menjadikannya sebagai sting. Untuk jelasnya perhatikan contoh berikut.
let mugiwara = ["Luffy", "Zorro", "Sanji", "Nami"];
console.log(mugiwara.join());
// hasil: Luffy,Zorro,Sanji,Nami
console.log(mugiwara.join(" atau "));

// hasil: Luffy atau Zorro atau Sanji atau Nami
console.log(mugiwara.join("**"));
// hasil: Luffy**Zorro**Sanji**Nami
console.log(mugiwara.join(", "));
// hasil: Luffy, Zorro, Sanji, Nami
console.log(mugiwara.join("-"));
// hasil: Luffy-Zorro-Sanji-Nami
Kalau dilihat lebih teliti lagi, parameter .join() adalah penghubung yang digunakan
setelah array itu digabung.
Method .push()
Push adalah fungsi array yang akan menambahkan nilai di belakang nilai terakhir pada
array. Layaknya sebuah antrian, push adalah orang yang mengantri selanjutnya, akan
berada di posisi paling belakang. Fungsi push akan menerima satu parameter, berupa
nilai yang akan ditambahkan.
let bialngan = [0, 1, 2, 3];

bialngan.push(4);
console.log(bialngan);
// hasil: [0, 1, 2, 3, 4]
Method .pop()
Fungsi array yang akan menghapus nilai paling belakang dari array.
let bilangan = [0, 1, 2, 3];

bilangan.pop();
console.log(bilangan);
// hasil: [0, 1, 2]
Method .unshift()
Unshift adalah fungsi array yang akan menambah nilai ke depan array (ke index 0), dan
menggeser seluruh isi array kebelakang.
let bilangan = [0, 1, 2];

bilangan.unshift(3);
// hasil: [3, 0, 1, 2]
Method .shift()
Shift adalah fungsi array yang akan menghapus nilai paling depan dari array. Fungsi
shift tidak menerima parameter apapun.
let bilangan = [3, 0, 1, 2];

bilangan.shift();
// hasil: [0, 1, 2]
Method .sort()
sesuai nama sort adalah untuk mengurutkan. Sort mengurutkan otomatis secara
ascending dan diurutkan berdasarkan unicode dari karakter. Kamu akan menemukan
masalah ini saat mengurutkan angka.
Contoh sort array dalam bentuk angka
let bilangan = [3, 5, 7, 1, 2];

bilangan.sort();
// hasil: [1, 2, 3, 5, 7]
Contoh sort array dalam bentuk huruf atau text
let siswa = ["Sani", "Anis", "Kiki", "Fahri"];

siswa.sort();
console.log(siswa);
// hasil: ['Anis', 'Fahri', 'Kiki', 'Sani']
Contoh kasus .sort() pada angka akan bermsalah jika angka lebih dari 1 digit:

bilangan.sort();
// hasil: [1, 15, 2]
Hasil dari sort di atas tidak sesuai dengan ekspektasi kita! Seharusnya [1, 2, 15] namun
yang terjadi adalah [1, 15, 2]. Hal ini karena JavaScript melakukan sort secara unicode
atau sebagai karakter, dan karena 15 diawali dengan karakter '1', maka akan dianggap
lebih awal daripada karakter '2'. Untuk menyelesaikan masalah ini, kamu perlu
menambahkan satu parameter berupa fungsi pembanding. Mungkin kamu akan sedikit
bingung dengan code dibawah ini, namun intinya adalah kita membuat satu fungsi
yang menilai apakah nilai pertama lebih kecil dari nilai kedua.

bilangan.sort(function (value1, value2) {
return value1 > value2;
});
// hasil: [1, 2, 15]
Jika menggunakan function dalam sort maka kita juga bisa membuat fungsi sort dalam
bentuk descending, perhatikan contoh berikut.

bilangan.sort(function (value1, value2) {
return value1 < value2;
});
// hasil: [15, 2, 1]
Method .slice()
Slice adalah fungsi array yang akan mengambil irisan atau potongan dari sebuah array.
.slice() menerima satu atau dua parameter. Parameter pertama adalah index irisan
diambil, dan parameter kedua adalah index irisan terakhir diambil. Jika parameter
kedua tidak didefinisikan, irisan akan diambil hingga akhir dari array.
let bilangan = [0, 1, 2, 3, 4];

let porongan = bilangan.slice(1, 3);
console.log(porongan);
// hasil: [1, 2]
let potonganLain = arr.slice(1);

console.log(potonganLain);
// hasil: [1, 2, 3, 4]
Ada banyak lagi method yang disediakan javascript untuk array seperti .map(),
.reduce(), .filter(), dan lainnya.
Kamu bisa baca tulisan saya ini https://asrul.dev/blog/memahami-map-filter-dan-
reduce
Array Multi-dimensi
Array multidimensi adalah sebuah array yang berisikan array lagi didalamnya.
Konsepnya penggunaannya sama dengan array biasa (satu dimensi), hanya saja jumlah
indeks yang digunakan saat mengakses nilai didalam array adalah sebanyak dimensi
dari array tersebut.
Contoh array multidimensi antara lain diagram kartesius dan matriks. Diagram
kartesius dan matriks adalah array multidimensi yang sama-sama membutuhkan
koordinat untuk mengakses nilai didalamnya.
let matriks = [
[1, 2],
[3, 4],
[5, 6],
];
console.log(matriks[0]);
// hasil: [1, 2]
console.log(matriks[0][1]);
// hasil: 2
let siswa = [
["Asrul Harahap", "Universitas Negeri Padang"],
["Anis Fikriyyah", "Universitas Bale Bandung"],
];
console.log(siswa[1]);
// hasil: ['Anis Fikriyyah', 'Universitas Bale Bandung']
console.log(siswa[0][1]);
// hasil: 'Universitas Negeri Padang'
Hari ke Enam
Update: Jumat, 10 Januari 2020
Perulangan
Perulangan sangat sering dilakukan dalam keehidupan sehari-hari, misalkan ibu Anis
akan mengupas kentang dalam kantong plastik sebanyak 100 buah kentang. Maka ibu
Anis akan kupas kentang pertama, selsai kupas kentang kedua, dan seterusnya hingga
ketang terakhir adalah 100.
Dalam bahasa pemograman, perulangan ini disebut dengan looping.
For Loop
for(inisial, kondisi, increment/decrement){

// eksekusi kode
}
Perhatikan contoh perulangan for berikut.
for (let i = 5; i >= 0; i--) {
console.log(i);
}
// hasil:
// 5
// 4
// 3
// 2
// 1
While loop
Looping yang tidak tentu, maksudnya selalu melakukan looping hingga syarat
terpenuhi.
let i = 0;
while (i <= 5) {
console.log(i);
i++;
}
// hasil:
// 0
// 1
// 2
// 3
// 4
// 5
For Of
let pelajaran = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
];
for (let belajar of pelajaran) {

console.log(belajar.toUpperCase());
}
// hasil:
// HTML
// CSS
// JAVASCRIPT
// REACT
// NODE
// MONGODB
Sebenarnya ada beberapa cara looping dalam javascript lainnya, anda bisa baca di sini
Object Literal
JavaScript merupakan bahasa pemrograman yang berbasis simple-object (Objek
sederhana). Objek adalah kumpulan tidak berurut yang merangkai beberapa property
dan property memiliki nama/key dan value (key-value pairs).
Objek dalam JavaScript, sama seperti banyak bahasa pemrograman lainnya, bisa
dibandingkan dengan objek dalam kehidupan nyata.
Untuk membuat sebuah object literal bisa dengan cara menuliskan kurung kurawal
(curly bracets) kemudian menuliskan nama property yang harus memiliki key dan
value.
let obj = {
key: "value",
};
Value dalam object literal selain string bisa juga dengan memasukkan value array
bahkan value object literal lainnya.
Kita bisa coba dengan kode berikut:
let asrulObj = {
id: "1221092408940001",
nama: "Asrul Harahap",
lahir: {
tempat: "Medan",
tgl: "1994-08-24",
},
favorit: [
"coding",
"membaca",
{
olahraga: ["renang", "mendaki"],
makanan: ["bakmi gm", "yosinoya"],
},
],
alamat: {
jalan: "Jl. Tanah Kusir II",
kelurahan: "Kebayoran Lama Selatan",
kecamatan: "Kebayoran Lama",
kota: "Jakarta Selatan",
provinsi: "Sumatera Utara",
kodePos: 12240,
},
};
Cara akses objek literal

Gunakan titik sesuai node data berada, perhatikan contoh sesuai objek diatas.
console.log(asrulObj.alamat.kota);
// hasil: Jakarta Selatan
console.log(asrulObj.favorit[2].makanan[1]);
// hasil: yosinoya
Mengubah nilai
Hampir sama dengan cara akses, tapi gunakan tanda sama dengan untuk memberi nilai
baru, perhatikan contoh sesuai objek diatas.
console.log(asrulObj.alamat.provinsi);
// hasil: Sumatera Utara
asrulObj.alamat.provinsi = "DKI Jakarta";

console.log(asrulObj.alamat.provinsi);
// hasil: DKI Jakarta
Untuk lebih dalam tentang objek literal baca referensi di sini
Hari ke Tujuh
Update: Sabtu, 11 Januari 2020
Latihan
1. Silahkan deklarasikan perang!
2. Cek tipe data dari "2020-01-01" , 1994 , dan Asrul Dev !
3. Buatlah variable nama dan nilainya nama anda!
4. Buatlah variable usia dan nilainya usia anda!
5. Buatlah kalimat yang menggabungkan soal 3 dan soal 4!
6. Buatlah kode untuk kocok dadu ludo yang nilainya random 1 hingga 6!
7. Hitunglah jumlah karakter Aku mencintai Javascript menggunakan koding!
8. Buatlah program untuk mengkonversi bulan angka menjadi kata, misal 1 menjadi
Januari, 2 menjadi Februari, dst!
9. Gabunglah array berikut menjadi kalimat yang bisa dibaca dengan baik, ["Aku",
"bersyukur", "atas", "semua", "rezki", "ini", "termasuk", "kamu"]
10. Ubahlah nilai dari variable a menjadi variable b, dan variable b menjadi variable a
Dilarang menambahkan variable lain
let a = 10;
let b = 8;
// hasil yang diharapkan
// a = 8
// b = 10
1. Buatlah gambar berikut menggunakan looping.
#
##
###
####
#####
######
#######
1. Buatlah perkalian berikut dengan looping!
0 x 0 = 0
1 x 1 = 1
2 x 2 = 4
3 x 3 = 9
4 x 4 = 16
5 x 5 = 25
6 x 6 = 36
7 x 7 = 49
8 x 8 = 64
9 x 9 = 81
10 x 10 = 100
1. Soal Cerita
Toko Jaya Baru yang sedang melakukan SALE ingin menghitung jumlah profit untuk
setiap jenis barang yang terjual pada hari itu.
Barang-barang SALE yang akan dihitung penjualannya:
Sepatu brand Sanji seharga 1500000 dan stock barang yang tesedia 10
Baju brand Zoro seharga 500000 dan stock barang yang tesedia 2
Sweater brand Hinata seharga 175000 dan stock barang yang tersedia 1
Function akan menerima array yang berisikan object pembeli (nama pembeli, barang
yang ingin dibeli dan jumlah barang yang dibelinya). Jika stock barang kurang dari
jumlah yang ingin dibeli oleh pembeli maka pembeli batal untuk membeli barang
tersebut.
Function hitungProfit akan mengembalikan/me-return sebuah array of object dimana
array tersebut berisi objek-objek barang dari toko Jaya Baru tersebut yang berisikan info
nama barang, siapa saja yang membeli, sisa stock barang dan total pemasukan untuk
barang tersebut
Penampakan Kode
function hitungProfit(shoppers) {
let listBarang = [ ['Sepatu Sanji', 1500000, 10],
['Baju Zoro', 500000, 2],
['Sweeter Hinata', 175000, 1]
];
// Tulis kode jawabanmu disini

}
// TEST CASES
console.log(hitungProfit([{name: 'Anis Fikriyyah', product: 'Sepatu Sanji', amount: 2}, {n
ame: 'Asrul Harahap', product: 'Sepatu Sanji', amount: 3}, {name: 'Ghazala Tisha', produc
t: 'Sweeter Hinata', amount: 2}]));
//[ { product: 'Sepatu Sanji',
// shoppers: [ 'Anis Fikriyyah', 'Asrul Harahap' ],
// leftOver: 5,
// totalProfit: 7500000 },
// { product: 'Baju Zoro',
// shoppers: [],
// leftOver: 2,
// { product: 'Sweeter Hinata',
// shoppers: [],
// leftOver: 1,
// totalProfit: 0 } ]
console.log(hitungProfit([{name: 'Anis Fikriyyah', product: 'Sepatu Sanji', amount: 8}, {n

ame: 'Asrul Harahap', product: 'Sepatu Sanji', amount: 10}, {name: 'Ghazala Tisha', produc
t: 'Sweeter Hinata', amount: 1}, {name: 'Rifki Hilman', product: 'Baju Zoro', amount: 1},
{name: 'M. Lan', product: 'Baju Zoro', amount: 1}]));
// [ { product: 'Sepatu Sanji',
// shoppers: [ 'Anis Fikriyyah' ],
// leftOver: 2,
// shoppers: [ 'Rifki Hilman', 'M. Lan' ],
// leftOver: 0,
// shoppers: [ 'Ghazala Tisha' ],
// leftOver: 0,
console.log(hitungProfit([{name: 'Anis Fikriyyah', product: 'Sepatu Naiki', amount: 5}]));

// [ { product: 'Sepatu Sanji',
// shoppers: [],
// leftOver: 10,
// shoppers: [],
// leftOver: 2,
// shoppers: [],
// leftOver: 1,
console.log(hitungProfit([]));
//[]
Kamu bisa kirim jawabannya dalam bentuk .zip pada link berikut.
https://fs23.formsite.com/TezH4N/30jsminggu1/index.html
Function
Function adalah sebuah blok kode yang disusun sedemikian rupa untuk menjalankan
sebuah tindakan.
Blok kode ini dibuat untuk dapat bisa digunakan kembali. Cara atau bentuk penulisan
function adalah
sebagai berikut:
function nama_function(parameter1, parameter2, ...) {

[Isi dari function berupa tindakan]
return [kembalian];
}
Cara Memanggil function
Untuk menjalankan function butuh dipanggil, caranya yaitu dengan menuliskan nama
function dan diikuti tanda buka tutup kurung atau disebut invoke () .
function hi() {
console.log("Hai, asrul dev!");
}
hi(); // panggil fuction hi

// hasil: Hai, asrul dev!
Void Function
Void function adah function yang tidak melakukan return atau tidak memberikan
kembalian terhadap yang memanggilnya.
function hai() {
console.log("halo!");
}
tampilkan();
Return Function
function munculkanAngkaDua() {
return 2;
}
let tampung = munculkanAngkaDua();

console.log(tampung);
// hasil: 2
Function dengan parameter
function kalikanDua(angka) {
return angka * 2;
}
let tampung = kalikanDua(5);
console.log(tampung);
// hasil: 10
Parameter dengan nilai default
function tampilkanAngka(angka = 1) {
return angka;
}
console.log(tampilkanAngka(5));
// hasil: 5
console.log(tampilkanAngka());
// hasil: 1
Anda juga dapat menampung function sebagai variable dengan sebuah bentuk function
yang dinamakan Anonymous Function.
let fungsiPerkalian = function (angkaPertama, angkaKedua) {

return angkaPertama * angkaKedua;
};
console.log(fungsiPerkalian(2, 4));
// hasil: 8
CallBack
Function yang dilewatkan sebagai parameter disebut callback.
Perhatikan kode berikut.
function sapa(nama) {
alert("Hello " + nama);
}
function prosesMenyapa(callback) {
let nama = prompt("Namamu siapa?");
callback(nama);
}
prosesMenyapa(sapa);
// hasil: Namamu siapa? ...

// Hello ...
Jelas terlihat bahwa pada function prosesMenyapa() mengirimkan function callback()
sebagai parameter, dan inilah yang disebut dengan callback. Callback sering digunakan
untuk data asyncronous sehingga data dapat ditunggu selesai baru lanjutkan program.
Hari ke Delapan
Module
Modul adalah cara untuk membagi-bagi kode menjadi beberapa file sehingga dapat
dipakai ulang. Jika kita ibaratkan dengan penulis, penulis yang baik adalah penulis yang
membagi-bagikab bukunya menjadi beberapa bab. Begitu juga dengan programmer
yang membagi-bagi kodenya menjadi beberapa module.
Perhatikan penggunaan module berikut pada file index.js dan file sapa.js .
File sapa.js
function halo(nama) {
return `Halo, ${nama}`;
}
function hi() {
return "Hi, apa kabar?";
}
module.exports = {
halo,
hi,
};
File index.js
const sapa = require("./sapa.js");
console.log(sapa.halo("Asrul Dev"));
// hasil: Halo, Asrul Dev
console.log(sapa.hi());
// hasil: Hi, apa kabar?
Perhatikan gambar berikut!
Kita telah belajar dasar-dasar javascript, sekarang saatnya kita menggunakan pelajaran
dasar tersebut untuk membangun sebuah aplikasi. Saat ini kita akan belajar backend
yaitu menggunakan express js
Menyiapkan Proyek
Proyek yang akan kita buat harus diletakkan terpisah dengan file lain, sehingga dalam 1
folder tersebut hanya ada proyek kita saja.
Pada pembelajaran series ini saya akan membuat folder proyek dengan nama express-
30-js. Setelah folder dibuat arahkan terminal ke folder tersebut dengan cara:
cd ~/Desktop/express-30-js
Folder proyek saya berada di Desktop, jika berbeda dengan saya silahkan disesuaikan.
Sehingga penampakannya seperti berikut.
Jika sudah diarahkan pada terminal, selanjutnya lakukan inisial proyek node js dengan
perintah berikut.
npm init
Proses ini dilakukan untuk membuat sebuah file package.json yang berguna untuk
mengontrol proyek node js. Berikut isi file package.json yang dihasilkan.
{
"name": "express-30",
"version": "1.0.0",
"description": "belajar expres bersama asrul.dev",
"main": "index.js",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"author": "Asrul harahap",
"license": "ISC"
}
Install Express Js
Express js adalah framework javascript tepatnya pada NodeJs yang berfungsi untuk
membantu pengembangan web dan mobile.
Install express js dengan perintah berikut:
npm install express --save
Setelah diinstall kita dapat melihat perubahan pada file package.json menjadi seperti
berikut.
{
"version": "1.0.0",
"main": "index.js",
"scripts": {
},
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
Membuat Web Server
Web server adalah perangkat lunak yang berfungsi sebagai penerima permintaan yang
dikirimkan melalui browser kemudian memberikan tanggapan permintaan dalam
bentuk halaman situs web atau lebih umumnya dalam dokumen HTML, tapi bisa juga
berupa suara, gambar, json, xml atau lainnya.
Pada proyek buatlah file baru dengan nama index.js yang isinya seperti berikut ini.
const express = require("express");

const app = express();
app.get("/", function (request, response) {

response.send("Webserver asrul.dev");
});
app.listen(5000, function () {
console.log(`Server running on http://localhost:5000`);
});
module.exports = app;
Menjalankan Web Server

Jalankan webserver pada terminal dengan perintah:
node index.js
Jelasnya perhatikan gambar berikut.
Sampai sejauh ini kita sudah belajar dan berhasil membuat webserver.
Hari ke Sembilan
Install Insomnia REST

Insomnia rest berguna untuk menguji api atau membantu kita melihat hasil atau
response dari web server yang akan dibuat sesuai endpoint.
Insomnia REST aja ing insomnia, kita mah... mungkin juga kali yah karena harus nulis
series ini hehehe...
Mengenal HTTP Method

HTTP method adalah method-method yang disediakan server sebagai sarana untuk
melakukan request terhadap server.
Berikut adalah HTTP Method:
Penggunaan Keterangan
Method
Express
GET app.get() Method GET biasanya digunakan hanya mengambil data.
Method POST digunakan untuk mengirimkan entitas ke server yang
POST app.post() ditentukan, sering menyebabkan perubahan pada keadaan atau efek
samping pada server.
PUT app.put() Method PUT menggantikan data yang ada dengan data yang dikirimkan.
DELETE app.delete() Method DELETE untuk menghapus data yang ada.
Penjelasan HTTP method bisa dibaca di sini
Request
Berdasarkan gambar dapat kita lihat bahwasanya kita atau user melakukan request
terhadap server dengan method http melalui url atau alamat server tersebut.
HTTP method yang telah dijelaskan sebelumnya dipakai sebagai pengenal untuk
mengirimkan permintaan terhadap server. Perhatikan contoh berikut.
File index.js

app.get("/", function (request, response) {

});
app.get("/cari-jodoh", function (request, response) {

response.send("Cari jodoh dengan http " + request.method);
});
app.post("/cari-jodoh", function (request, response) {

});
app.put("/cari-jodoh", function (request, response) {

});
app.delete("/cari-jodoh", function (request, response) {

});
});
Berikut hasil ketika diujicoba menggunakan Insomnia Rest.
Express telah menyediakan function atau method yang bertindak sebagai request,
berikut beberapa daftar request yang disediakan oleh express:
Properti Deskripsi
.app Referensi object pada express
Berisi informasi cookie yang dikirim, ini dapat digunakan jika menggunakan
.cookies
middleware cookie-parser
.hostname Informasi hosname web server
.ip Informasi IP server
.method HTTP Methode yang digunakan
.params Menampilkan informasi sesuai dengan nama parameter
.path Nemampilkan informasi jalur URL
.protocol Menampilkan protocol request
.query Objek yang berisi informasi query dari request yang berlangsung
Properti Deskripsi
.secure true jika request merupakan reques yang secure (digunakan pada HTTPS)
Berisi signed cookies oleh request, dapat digunakan jika menggunakan
.signedCookies
middleware cokie-parser
.xhr Bernilai true jika request adalah XMLHttpRequest
.body Berisi data yang dituliskan pada body request
.header Berisi data yang dituliskan pada header request
.baseUrl Informasi pengalamatan utama web server
.originalUrl Informasi pengalamatan request dilakukan
Contoh penggunaan .query
?nama=Asrul&umur=25
Tulis berikut pada code
app.get("/about", (req, res) => {

res.send(
"ini rute /about " + req.query.nama + " dan umurnya " + req.query.umur
);
});
Penulisan query pada request diawali dengan tanda ? setelah endpoint, dan jika ada
beberapa query dipisahkan dengan tanda & . Query memiliki key dan value, key sebelah
kiri dari tanda = dan value berada pada sebelah kanan tanda = . Perhatikan gambar
berikut.
Response
Kabalikan dari request, response adalah proses layanan yang diberikan server pada
client yang melakukan request. Sama halnya dengan request, function atau method
response sangat banyak yang disedikan oleh express.
Properti Deskripsi
.send() Mengirim dan menampilkan data string ke user
.end() Mengakhiri response server
.status() Informasi HTTP status, seperti 200, 404, dll
.json() Menjadikan response sebagai data JSON
.render() Merender file sebagai HTML
.download() Memberikan response sebagai file yang dapat diunduh
.type() Menyetting tipe response server
.redirect() Mengalihkan halaman ke halaman yang lain
contoh penggunaan .redirect()
app.get("/profile", (req, res) => {

res.redirect("/login");
});
app.get("/login", (req, res) => {

res.send("silahkan Login terlebih dahulu");
});
Hari ke Sepuluh
Router
Router adalah arah jalannya program, sehingga ketika ada request misal /login maka
router akan mengarahkan server menjalankan controller melalui /login sehingga
mendapatkan response.
Sebelumnya kita telah menggunakannya pada file index.js tetapi Bagaimana jika kita
memiliki route yang sangat banyak misal 3000 route?. Maka kita perlu organisir
rute kita agar lebih rapi dan mudah untuk dimaintenance.
Buatlah folder baru pada proyek kita dengan nama routes dan isinya file router.js .
Pindahkan kode dari file index.js yang mengandung rute ke file router.js dan
tambahkan kode untuk method .Router() sehingga seperti berikut.
File router.js
const router = require("express").Router();
router.get("/", function (request, response) {

});
router.get("/cari-jodoh", function (request, response) {

});
router.post("/cari-jodoh", function (request, response) {

});
router.put("/cari-jodoh", function (request, response) {

});
router.delete("/cari-jodoh", function (request, response) {

});
router.get("/about", (req, res) => {

res.send(
);
});
router.get("/profile", (req, res) => {

});
router.get("/login", (req, res) => {

});
module.exports = router;
Modifikasi file index.js menjadi seperti berikut.

const router = require("./routes/router.js");
app.use("/", router);
});
Jika dilakukan ujicoba pada endpoint pada materi request dan response tidak ada
perubahan, saya ucapkan selamat. :) Anda berhasil memisahkan file server dan router.
Untuk pengelompokan rute lebih spesifik lagi seperti 1 file

user.router.js hanya mengelola rute user saja, bisa Anda lakukan
dengan hal yang sama. Mungkin ini akan menjadi salah satu
challenge minggu depan.
Controller
Controller adalah proses melakukan kontrol atau logika dan komputasi pada sebuah
aplikasi sebelum dikirimkan ke user sebagai response. Disini kontrol masih bergabung
dengan router. Mari kita buat sebuah folder dengan nama controller dan buat sebuah
file dengan nama jodoh.controller.js sehingga hasilnya seperti berikut.
File jodoh.controller.js
function getJodoh(request, response) {

}
function setJodoh(request, response) {

}
function updateJodoh(request, response) {

}
function deleteJodoh(request, response) {

}
module.exports = {
getJodoh,
setJodoh,
updateJodoh,
deleteJodoh,
};
Modifikasi file router.js menjadi seperti berikut.

const jodoh = require("../controller/jodoh.controller.js");

});
router.get("/cari-jodoh", jodoh.getJodoh);
router.post("/cari-jodoh", jodoh.setJodoh);
router.put("/cari-jodoh", jodoh.updateJodoh);
router.delete("/cari-jodoh", jodoh.deleteJodoh);

res.send(
);
});

});

});
Jika hasilnya tidak berubah, saya ucapkan sekali lagi selamat Anda berhasil. :)
Hari ke Sebelas
Sebelum kita masuk ke materi database, kita siapkan tools nya dulu yah, yang
dibutuhkan selain yang sudah kita install sebelumnya adalah MySQL, biar gak ribet
installnya baik di Linux, Windows, atau Mac saya sama ratakan saja memakai XAMPP.
Bisa download disini
Jika sudah download pastikan MySQL berjalan dengan baik sehingga kita bisa membuka
database di http://localhost/phpmyadmin (mungkin sedikit berbeda dilaptop Anda,
silahkan disesuaikan), seperti berikut.
Sampai disitu, Anda sudah siap melanjutkan Express kembali.
Model dan Sequelize

Pada 30 hari javascript kita akan membuat konsep MVC dimana kita akan pisahkan
Model View dan Controller. Controller telah dibahas sebelumnya, dan saatnya sekarang
kita bahas Model.
Model yang kita gunakan memakai library dari sequelize. Sequelize adalah ORM untuk
NodeJs.
Install Sequelize Cli
Tools command line atau cli yang dapat kita gunakan melalui terminal untuk
menggenerate sequelize, maka Sequelize cli harus diinstall terlebih dahulu dengan
cara.
npm i -g sequelize-cli
Catatan: mungkin mac dan linux butuh sudo.
Install Sequelize
Pada folder proyek express-30-js install sequelize dengan cara:
npm i sequelize
Sehingga package.json seperti berikut.
{
"version": "1.0.0",
"main": "index.js",
"scripts": {
},
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"sequelize": "^5.21.3"
}
}
Initisalize Sequelize
Agar proyek dikenali menggunakan sequelize, lakukan perintah berikut.
sequelize init
Perhatikan gambar berikut.
Maka akan menghasilkan folder seeders, models, dan config.
Koneksi Database
Database yang kita gunakan adalah MySQL, untuk menjalankan mysql, sequelize
membutuhkan library tambahan yaitu mysql2 . Install dengan cara.
npm i mysql2
Sehingga file package.json menjadi seperti berikut.
{
"version": "1.0.0",
"main": "index.js",
"scripts": {
},
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"mysql2": "^2.1.0",
"sequelize": "^5.21.3"
}
}
Konfigurasi database dengan membuka file config.json dan sesuaikan dengan MySql
Anda. Kira-kira seperti ini.
{
"development": {
"username": "root",
"password": "",
"database": "db_30_hari",
"host": "127.0.0.1",
"dialect": "mysql",
"operatorsAliases": false
},
"test": {
"username": "root",
"password": null,
"database": "database_test",
"host": "127.0.0.1",
"dialect": "mysql",
},
"production": {
"username": "root",
"password": null,
"database": "database_production",
"host": "127.0.0.1",
"dialect": "mysql",
}
}
Sesuai dengan file config.json , buat database dengan nama db_30_hari. Perhatikan
gambar berikut.
Membuat Model
Setelah database dibuat, kita pindah ke terminal untuk membuat Model, pada contoh
ini nama model yang kita buat adalah User.
sequelize-cli model:generate --name User --attributes name:string,label:string,picture:str

ing,email:string,phone:string,website:string,summary:string
Perhatigan gambar berikut
Akan menghasilkan file dengan nama user.js pada folder model yang hasilnya seperti
berikut.
"use strict";
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define(
"User",
{
name: DataTypes.STRING,
label: DataTypes.STRING,
picture: DataTypes.STRING,
email: DataTypes.STRING,
phone: DataTypes.STRING,
website: DataTypes.STRING,
summary: DataTypes.STRING,
},
{}
);
User.associate = function (models) {
// associations can be defined here
};
return User;
};
Migrate Model
Model yang telah dibuat, hanya sebtas file saja. Untuk mengubah file model ke tabel
pada database maka lakukan migrate db dengan perintah berikut.
sequelize-cli db:migrate
Maka akan menghasilkan seperti berikut.
Sekarang model dan tabel sudah selesai, kita siap untuk melakukan CRUD terhadap
data tabel yang telah kita miliki.
Hari ke Dua Belas
Karena kita sudah memiliki model dan tabel user. Sekarang saatnya kita melakukan
operasi CRUD, Create, Read, Update dan Delete.
Buatlah file route pada folder routes dengan nama user.router.js yang isinya seperti
berikut.

const userController = require("../controller/user.controller.js");
router.post("/", userController.createUser);
router.get("/", userController.readUser);
router.put("/:id", userController.updateUser);
router.delete("/:id", userController.deleteUser);
Buatlah file pada folder controller dengan nama user.controller.js yang isinya seperti
berikut.
const model = require("../models");
function createUser(req, res) {}
function readUser(req, res) {}
function updateUser(req, res) {}
function deleteUser(req, res) {}
module.exports = {
createUser,
readUser,
updateUser,
deleteUser,
};
Route yang akan kita buat adalah berikut.
Route Method Keterangan
/users POST Menambahkan atau create user baru
/users GET Mengambil data seluruh user
/users/:id PUT Mengubah data user sesuai id
/users/:id DELETE Menghapus data user sesuai id
Create
Create yang berarti kita menambahkan data baru ke database. Untuk menambahkan
data baru, silahkan modifikasi function createUser menjadi.
function createUser(req, res) {

model.User.create({
name: req.body.name,
label: req.body.label,
picture: req.body.picture,
email: req.body.email,
phone: req.body.phone,
website: req.body.website,
summary: req.body.summary,
})
.then(function (result) {
res.json(result);
})
.catch(function (error) {
res.json({ error: error });
});
}
diambil dari data body sesuai dengan fieldnya yang dikirimkan oleh insomnia
req.body
atau pada web nyata adalah dari form input. Ini akan berfungsi jika pada server kita beri
middleware untuk menghandle nya.
Middleware lebih jelas akan kita bahas selanjutnya.
Ubah file index.js sehingga menjadi seperti berikut.

app.use(express.urlencoded({ extended: true }));

});
Dan hubungkan router user pada file router.js , sehingga file router.js menjadi seperti
berikut.

const jodoh = require("../controller/jodoh.controller.js");
const user = require("./user.router.js");
router.use("/users", user);

});
router.get("/cari-jodoh", jodoh.getJodoh);
router.post("/cari-jodoh", jodoh.setJodoh);
router.put("/cari-jodoh", jodoh.updateJodoh);
router.delete("/cari-jodoh", jodoh.deleteJodoh);

res.send(
);
});

});

});
Lakukan pengujian menggunakan insomnia dan gunakan form untuk mengentri data,
perhatikan gambar.
Hasilnya akan tersimpan kedalam database.
Read
Read adalah membaca atau menarik data dari database. Langsung saja ubah function
readUser menjadi seperti berikut.
function readUser(req, res) {

model.User.findAll()
res.json(result);
})
});
}
Sebelumnya saya telah menambahkan data Anis Fikriyyah. Sekarang silahkan kita uji
menggunakan insomnia.
Update
Update adalah mengubah data yang sudah tersimpan dengan data yang baru.
Ubah function updateUser menjadi seperti berikut.
function updateUser(req, res) {

model.User.update(
{
},
{
where: {
id: req.params.id,
},
}
)
res.json(result);
})
});
}
Terlihat bahwa sebelumnya Full Stack Dev telah berubah menjadi React Developer,
lihat gambar berikut.
Delete
Untuk menghapus data maka ubah function deleteUser sehingga menjadi berikut.
function deleteUser(req, res) {

model.User.destroy({
where: {
id: req.params.id,
},
})
res.json(result);
})
});
}
Hasilnya akan seperti berikut.
Kode lengkap materi diatas bisa download di sini
Hari ke Tiga Belas

Senangnya kita telah menyelesaikan CRUD pada database, sekarang yang kita inginkan
adalah data yang aman, yang berhak yang boleh mengubah atau menghapus data
tersebut.
Authentication
Pada tabel user kita telah memiliki beberapa kolom yaitu id, name, label, picture,
email, phone, website, summary tetapi untuk melakukan login kita butuh setidaknya
email dan password, karena itu kita akan menambahkan kolom password .
Tambah Kolom Sequelize
Untuk menambahkan kolom pada sequelize, lakukan peintah berikut.
sequelize migration:create --name add_column_password
Sehingga menghasilkan file migrasi, seperti gambar berikut.
Ubah isi file migrasi tersebut sehingga menjadi seperti berikut.
"use strict";
module.exports = {
up: (queryInterface, Sequelize) => {
return queryInterface.addColumn("Users", "password", Sequelize.STRING);
},
down: (queryInterface, Sequelize) => {

return queryInterface.removeColumn("Users", "password");
},
};
Kemudian migrasi tersebut kita terapkan ke database dengan perintah berikut.
sequelize db:migrate
Jika kolom telah kita tambahkan, jangan lupa ubah model agar sesuai dengan tabel.
Ubah file user.js sehingga menjadi seperti berikut.
"use strict";
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define(
"User",
{
name: DataTypes.STRING,
label: DataTypes.STRING,
picture: DataTypes.STRING,
email: DataTypes.STRING,
phone: DataTypes.STRING,
website: DataTypes.STRING,
summary: DataTypes.STRING,
password: DataTypes.STRING,
},
{}
);
User.associate = function (models) {
// associations can be defined here
};
return User;
};
Register User
Proses register merupakan proses untuk mendaftarkan identitas yang memiliki kunci
untuk masuk kembali. Data yang bersifat sensitif harus kita lakukan encripsi. Pada
kasus ini kita butuh library bcryptjs yang berfungsi untuk mengencripsi data. Intall
bcryptjs dengan cara.
npm i bcryptjs
Pastikan pada file package.json , bcryptjs telah tersedia.

Ubah function createUser pada file user.controller.js dan tambahkan bcryptjs.

const bcrypt = require("bcryptjs");
function createUser(req, res) {

let salt = bcrypt.genSaltSync(10);
let hash = bcrypt.hashSync(req.body.password, salt);
model.User.create({
password: hash,
})
res.json(result);
})
});
}
Perhatikan hasil register pada insomnia.
Token User
Pada sebuah aplikasi setelah seseorang login maka dibutuhkan token sebagai credential
terpercaya untuk mengelola data, misal update atau mungkin hapus.
Kalau dicontohkan ke kehidupan nyata email dan password adalah tiket untuk naik
pesawat yang ditukarkan saat check in hingga mendapatkan boarding pass. Boarding
pass inilah yang kita gunakan untuk masuk ke pesawat. Sama halnya dengan token,
token didapatkan setelah login dilakukan, sehingga token dikirim bersamaan dengan
akses pada server lebih dalam.
Untuk membuat token kita menggunakan library jsonwebtoken , install dengan cara
berikut.
npm i jsonwebtoken
Tambahkan function loginUser pada file user.controller.js , yang isinya seperti berikut.

const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
function loginUser(req, res) {

const email = req.body.email;
const password = req.body.password;
model.User.findOne({
where: {
email: email,
},
})
let passwordHash = result.password;
let checkPassword = bcrypt.compareSync(password, passwordHash);
if (checkPassword) {
res.json({
message: "Berhasil Login",
token: jwt.sign({ id: result.id }, "asrul-dev"),
});
} else {
res.json({
message: "Gagal Login",
});
}
})
});
}
Jangan lupa tambahkan route pada file user.route.js , sehingga menjadi seperti berikut.

router.post("/login", userController.loginUser);
router.put("/:id", userController.updateUser);
router.delete("/:id", userController.deleteUser);
Tes menggunakan insomia.
Akhirnya berhasil juga, tapi tidak sampai disitu kita harus melakukan autorize, yaitu
memberi hak akses terhadap aktifitas data. Seperti update dan delete pada kasus ini
hanya boleh dilakukan orang yang memiliki akun tersebut.
Authorize
Penggunaan authorize kita harus membuat middleware, middleware adalah perantara
route dan controller, sehingga ketika melewati route menuju controller akan dilakukan
pemeriksaan, apakah memiliki autorize atau tidak.
Buat file baru dengan nama auth.js dalam folder middlewares , yang isinya berikut.
const jwt = require("jsonwebtoken");

module.exports = (req, res, next) => {

let token = req.headers.token;
if (token) {
let verify = jwt.verify(token, "asrul-dev");
model.User.findOne({
where: {
id: verify.id,
},
})
if (result) {
req.decoded = verify;
next();
} else {
res.status(401).json({
message: "Kamu tak punya akses",
});
}
})
});
} else {
res.status(401).json({
message: "Silahkan Login Dahulu",
});
}
};
Kemudian ubah route user.router.js menjadi seperti berikut.

const auth = require("../middlewares/auth.js");
router.post("/login", userController.loginUser);
router.put("/:id", auth, userController.updateUser);
router.delete("/:id", auth, userController.deleteUser);
Pada saat update dan delete, jika yang mengakses bukan yang login maka data dilarang
diubah atau dihapus. Untuk melakukan itu ubah function updateUser dan function
deleteUser menjadi seperti berikut.
function updateUser(req, res) {

let decodedId = req.decoded.id;
if (Number(decodedId) === Number(req.params.id)) {

model.User.update(
{
},
{
where: {
id: req.params.id,
},
}
)
res.json(result);
})
});
} else {
res.json({
message: "Ini bukan data Anda",
});
}
}
function deleteUser(req, res) {

let decodedId = req.decoded.id;
if (Number(decodedId) === Number(req.params.id)) {

model.User.destroy({
where: {
id: req.params.id,
},
})
res.json(result);
})
});
} else {
res.json({
message: "Ini bukan data Anda",
});
}
}
Kita uji pada insomnia dengan skenario, token adalah milik user dengan id 3, tetapi
yang akan dihapus adalah user id 4.
Untuk kode lengkap silahkan lihat disini
Hari ke Empat Bela

Latihan
Latihan lagi yah :)
const users = [
{
user: "king David Martins",
age: 21,
active: true,
},
{
user: "ashley",
age: 23,
active: false,
},
{
user: "alex",
age: 43,
active: true,
},
{
user: "john",
age: 32,
active: true,
},
{
user: "chris",
age: 21,
active: false,
},
{
user: "tomlin",
age: 32,
active: false,
},
{
user: "vernon",
age: 34,
active: true,
},
{
user: "Boni",
age: 43,
active: true,
},
{
user: "mattt",
age: 32,
active: true,
},
{
user: "bridget",
age: 23,
active: false,
},
{
user: "kyle",
age: 65,
active: true,
},
{
user: "julia",
age: 22,
active: true,
},
{
user: "jake",
age: 23,
active: false,
},
];
1. Jika active adalah sedang online, carilah siapa saja user yang sedang online!
2. Siapa saja user yang berusia dibawah 25 tahun?
3. Berdasarkan data diatas, buatlah CRUD untuk menyimpan user, age, dan active
menggunakan express dan mysql!
4. Buat fitur search yang dapat mencari usia, nama, dan sedang online, dengan
endpoint seperi /users?q=asrul !
Deploy Server
Saatnya kita awankan yang telah kita buat 1 minggu belakangan ini, sehingga ini
berguna nanti untuk materi web react js dan mobile react native.
Mysql Online
Pertama kita butuh server database MySQL online. Setelah lelah mencari, saya temukan
mysql free dan lumayan cocok untuk tahap belajar di https://remotemysql.com,
langsung daftar seperti gambar berikut.
Setelah selesai daftar silahkan konfirmasi pendaftaran yang dikirimkan via email.
Setelah selesai silahkan login untuk membuat database.
Create database dan sesuaikan config.json pada proyek dengan yang didapatkan dari
remotemysql.com. Ini gambar PHPmyadmin online.
{
"development": {
"username": "Z51nuZUx5o",
"password": "rahasia",
"database": "Z51nuZUx5o",
"host": "remotemysql.com",
"dialect": "mysql",
"port": 3306,
},
"test": {
"username": "root",
"password": null,
"database": "database_test",
"host": "127.0.0.1",
"dialect": "mysql",
},
"production": {
"username": "Z51nuZUx5o",
"password": "rahasia",
"database": "Z51nuZUx5o",
"host": "remotemysql.com",
"dialect": "mysql",
"port": 3306,
}
}
Lakukan migrate seperti sebelumnya.
sequelize db:migrate
Sehingga hasilnya seperti berikut.
Heroku
Download terlebih dahulu heroku, sesuaikan dengan OS yang Anda pakai, seperti
gambar berikut.
Setelah download lakukan install, (contoh pada ubuntu)
Jika heroku berhasil diinstall maka tampilannya seperti berikut.
Maka proses selanjutnya silahkan login jika sudah memiliki akun heroku, jika belum
silahkan daftar dahulu.
heroku login
Jika login berhasil, selanjutnya pada proyek lakukan perintah berikut.

``bash
heroku create
Jika heroku create telah berhasil, maka selanjutnya buat file baru dengan nama
`procfile` yang isinya seperti berikut.
web: node index.js
File tersebut digunakan oleh heroku untuk menjalankan file server.

Install cors dengan cara.
npm i cors
Lakukan sedikit modifikasi pada file index.js dengan menginstall cors sebagai
middleware yang memperbolehkan diakses dengan beda alamat host dan tambahkan
juga port.

const port = process.env.PORT || 5000;
const cors = require("cors");
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.listen(port, function () {
console.log(`Server running on <http://localhost>:${port}`);
});
Tambahkan file .gitignore untuk membatasi upload file git ke heroku, disini kita butuh
mengignore folder node_modules sehingga isi file .gitignore sebagai berikut
Ubah juga file package.jso dengan menambahkan script start, perhatikan gambar
berikut.
node_modules
Kemudian gunakan git untuk deploy dengan cara, berikut.
git init
Buka heroku secara online dan cek git yang diberikan oleh heroku, lalu pada terminal
lakukan perintah remote git tersebut.
Contoh pada saya, ini sesuaikan dengan milik Anda.
heroku git:remote -a warm-refuge-26108
git add .
git commit -m "Deploy dengan bismillah"
git push heroku master
Tunggu proses sebentar hingga deploy selesai, perhatikan gambar.
Jika sudah selesai, buka dengan cara perintah berikut.
heroku open
Selanjutnya yok uji coba pada insomia, jika berhasil artinya deploy kita sukses.
Hari ke Lima Belas
Pengenalan ES6
ES6 dan + adalah Javascript versi modern kalo Asrul sendiri yang ngomong karena
fiturnya aduhai, jatuh cinta banget lah. Maaf kalau udah mulai lebay.
var , const dan let
Awalnya javascript hanya punya var sebagai deklarasi dari sebuat variable.
var nama = "Asrul Harahap";
Tapi sekarang telah ditambahkan const dan let , bertanya, apasih bedanya?
var mencakup fungsi variable ke lingkup "global" jika berada di tingkat atas. Link
referensi: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/var
const adalah untuk variabel yang tidak ingin Anda diubah nilainya (read only). Link
referensi: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/const
let adalah untuk variable yang bisa diubah nilainya kembali. Link referensi:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
Arrow Function
Perhatikan penulisan function dengan arrow function.
Function Normal
function panggilAku() {
return "Asrul Harahap";
}
Function dengan Arrow
const panggilAku = () => "Asrul Harahap";
Function Normal
function banyakArgumen(arg1, arg2, arg...) {

return [arg1, arg2, arg...]
}
Function dengan Arrow
const banyakArgumen = (arg1, arg2, arg...) => {

return [arg1, arg2, arg...]
}
Helper ES6
Beberapa helper yang dipakai untuk membantu koding Anda pada ES6, yaitu: map,
filter, find, dll. Untuk lebih jelas saya telah menulisnya sebelumnya pad postingan
berikut. Baca Postingan
Module
Perhatikan penggunaan module ES6 berikut pada file index.js dan file sapa.js .
File sapa.js
export const halo = (nama) => {

return `Halo, ${nama}`;
};
export const hi = () => {

return "Hi, apa kabar?";
};
File index.js
import { halo, hi } from "./sapa.js";

console.log(halo("Asrul Dev"));
// hasil: Halo, Asrul Dev
console.log(hi());
// hasil: Hi, apa kabar?
Dasar-dasar DOM
DOM merupakan singkatan dari Data Object Model yang digunakan untuk
memanipulasi apa saja yang ada dalam struktur HTML, memanipulasi yang dimaksud
berupa menambah, mengubah, atau menghapus elemen dalam HTML.
DOM akan dimuat oleh browser ketika semua file html sudah selesai dijalankan.
Ini materi tambahan sebagai penguat masuk React Js. Buat file
dengan .html untuk uji coba materi ini.
Selector DOM
Berdasarkan ID
<div id="boxs">
</div>
<script>
document.getElementById("boxs").innerHTML = "Halo DOM, ayo belajar"
</script>
Berdasarkan Class
<div class="box"></div>
<script>
document.getElementByClassName("box")[0].innerHTML = "Javascript"
document.getElementByClassName("box")[1].innerHTML = "PHP"
document.getElementByClassName("box")[2].innerHTML = "Python"
</script>
Berdasarkan Tag
<p> Daftar Warna </p>

<ul>
<li></li>
<li></li>
</ul>
<script>
document.getElementByTagName("li")[0].innerHTML = "Merah"
document.getElementByTagName("li")[1].innerHTML = "Putih"
</script>
Contoh mengambil data dari form input
<form onsubmit="submitForm()">
<label>
Nama: <br />
<input type="text" id="name">
</label>
<button type="submit">Cek</button>
</form>
<script>
function submitForm() {
var name = document.getElementById('name').value;
alert( "Halo " + name)

}
</script>

Dengan DOM, kamu dapat membuat elemen baru menggunakan
createElement('namaElement') , kamu juga dapat menambahkan attribute pada elemen
tersebut dengan setAttribute('nama attribute', 'nilai attribute') .

Untuk memasukkan elemen ke element lain dengan kode berikut
namaInduk.appendChild(namaAnak)
Perhatikan dan cobakan contoh berikut.
<div id="lembar-kerja"></div>
<script>
var img = document.createElement('img');
var lembarKerja = document.getElementById('lembar-kerja')
img.setAttribute('src', 'https://avatars2.githubusercontent.com/u/15111402?s=460&v=4')
img.setAttribute('width', '200')
img.setAttribute('height', '200')
lembarKerja.appendChild(img)
</script>
Mengedit Element
Mengganti elemen pada html
<div id="place">
<h2 id="old">Old Text<h2>
</div>
<script>
var newEl = document.createChild('h3')
var text = document.createTextNode('New Text')
newEl.appendChild('text')
var old = document.getElementById('old')

var place = document.getElementById('place')
place.replaceChild(newEl, old)
</script>
Menghapus Element
Menghapus elemen pada html
<div id="place">
<h2 id="ada">ada Text<h2>
<h2 id="ilang">Ilang Text<h2>
</div>
<script>
var ilang = document.getElementById('ilang')
var place = document.getElementById('place')
place.removeChild(ilang)
</script>

Dengan DOM, kamu dapat membuat elemen dengan event yang akan diset dengan 3
cara:
Pada elemennya sendiri
<button onclick="panggilFungsi()">Klik</button>
<script>
function () {
alert(input.value)
}
</script>
Beri event pada selector
<input type="text" id="inputNama">

<script>
var input = document.getElementById('inputNama')
input.onclick = function() {
alert(input.value)
}
</script>
AddEventListener
<input type="text" id="inputNama">

<script>
var input = document.getElementById('inputNama')
input.addEventListener('click', function() {
alert(input.value)
})
</script>
Event DOM
No. Nama Event Keterangan

1 click Ketika dlick bisa juga dipakai dengan onclick
2 keyup Ketika keyboard dilepas

3 keydown Ketika Keyboard ditekan
No. Nama Event Keterangan
4 mouseover Ketika mouse melewati objek

5 mouseenter Ketika mouse ditekan
6 mouseup Ketika klik mouse dilepas
7 dll ...
Perhatikan dan cobakan contoh berikut.
<div id="lembar-kerja"></div>
<script>
var img = document.createElement('img');
var lembarKerja = document.getElementById('lembar-kerja')
img.setAttribute('src', 'https://avatars2.githubusercontent.com/u/15111402?s=460&v=4')
img.setAttribute('width', '200')
img.setAttribute('height', '200')
lembarKerja.appendChild(img)
img.addEventListener('mouseenter', function() {
alert('Kamu menyentuh gambar orang ganteng itu')
})
</script>
Hari ke Enam Belas

React Js
Reactjs adalah library javascript untuk membangun UI (User Interface) pada web.
Sekarang ini banyak sekali perusahaan-perusahaan yang mencari developer yang bisa
menguasai React, sehingga kita belajar react akan menjadi investasi yang baik untuk
karir di TI. React sendiri sangatlah populer, mari lihat repositori react berikut.

React itu sendiri berbasis komponen, misal navbar 1 komponen, tombol 1 komponen,
avatar 1 komponen, yang mana komponen tersebut bisa dipakai ulang.
Install React Js
Langsung saja, untuk install react kita gunakan Create React App saja sesuai saran dari
reactjs sendiri.

Mari install reactjs dengan cra, disini contoh aplikasi yang akan kita buat adalah
minibiojs . Sehingga perintah pada terminal adalah berikut.
npx create-react-app minibiojs
Berikut memperlihatkan struktur direktori dan halaman web aktual dari aplikasi CRA
yang baru saja dibuat.
.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock

Cara menjalankan proyek minibiojs yang telah kita install dengan perintah berikut.
npm start
Ini dilakukan jika terminal udah diarahkan kedalam folder proyek

minibiojs.
WTF JSX
Udah belajar javascript, terus belajar ES6 dan sekarang pas mau belajar React Js harus
belajar JSX juga. Sabar, JSX atau Javascript Extension bukan untuk mempersulit Anda,
malah membantu untuk mempermudah dalam koding js yang terlihat seperti html.
Lihat perbedaan menggunakan JSX dan tidak pada komponen berikut.
Dengan JSX
class SapaAsrul extends React.Component {

render() {
return <h1 className="judul">Selamat Datang di Asrul Dev</h1>;
}
}
dan tanpa JSX
class SapaAsrul extends React.Component {

render() {
return React.createElement(
"h1",
{ className: "judul" },
"Selamat Datang di Asrul Dev"
);
}
}
Berikut penjelasan JSX
Component

Component dalam react dapat dibuat dengan 2 cara, yaitu dengan membuat class atau
dengan membuat function . Tapi apa bedanya class dengan function , pasti memiliki
kelebihan masing-masing.
Component class
Membuat component dengan class pada react disebut sebagai component state full
karena dengan class Anda bisa membuat state sesuai kebutuhan.
import React, { Component } from "react";
class App extends Component {

constructor(props) {
super(props);
this.state = {
name: "",
};
}
render() {
return <div>Wellcome Asrul</div>;
}
}
export default App;
Component function (dibahas pada materi Hooks)

Membuat component dengan function pada react disebut sebagai component state less
karena dengan function Anda tidak bisa membuat state tetapi bisa menerima props
saja, (state jika meggunakan hook).
import React from "react";
const Hello = ({ name }) => <div>Hello, {name}!</div>;
export default Hello;
Lantas bagai mana cara mengaksesnya?

Okay, cara mengakses komponen adalah dengan menjadikannya sebagai tag HTML,
contoh component Hello akan diakses menjadi <Hello /> atau <Hello></Hello>

Perlu diingat bahwa component harus diawali dengan huruf kapital
sehingga sistem dapat membedakan code HTML dan kode
Component
Props
Props adalah cara component mengoper data yang berasal dari parent ke child dengan
kata lain garis lurus kebawah.
<Hello name="Asrul">
Dari component diatas misal sebuah component Hello dengan propertu name pada
kode diatas, maka itu akan menurunkan data pada child Hello dengan props dengan
key name dan value Asrul
Mengakses Props
Pada induk telah mengover data dengan key name dan value Asrul, maka pada child
akan bisa diakses dengan cara:
const Hello = ({ props }) => <div>Hello, {props.name}!</div>;
State
State adalah tempat Anda menyimpan data pada component dan hanya bisa diakses
oleh component itu sendiri secara default, tetapi bisa diturunkan pada child jika
menggunkan props.
state = {
name: "",
};
Mengubah Nilai State

Untuk mengubah nilai state telah diberikan method dari react menggunakan setState ,
berikut cara penggunaannya.
this.setSetate(
{
name: "Asrul",
},
callback
);
Mengakses State
Anda telah mengetahui bagaimana cara mengubah nilai state, kemudian pada tahap
ini, Anda akan membutuhkan cara mengakses state, hampir mirip dengan props,
berikut caranya.
class Hello extends Component {

constructor(props) {
super(props);
this.state = {
name: "",
};
}
componentDidMount() {
this.setState({
name: "Asrul H",
});
}
render() {
return <div>Wellcome {this.state.name}</div>;
}
}
Hari ke Tujuh Belas

React Router DOM

Pada pembahasan router kita akan menggunakan library react-router-dom , langsung
saja install pada proyek dengan perintah berikut.
npm i react-router-dom
Setelah diinstall kita ubah file App.js agar mengeload file yang akan kita buat dengan
nama RoterApp.js , dan tambahkan file pages/Home.js untuk halaman home dan
pages/About.js untuk halaman about, sehingga kodenya seperti berikut.
File App.js

import "./App.css";
import RouterApp from "./RouterApp";
function App() {
return <RouterApp />;
}
export default App;
File RouterApp.js
import React, { Component, Fragment } from "react";

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import Home from "./pages/Home";

import About from "./pages/About";
class RouterApp extends Component {

render() {
return (
<BrowserRouter>
<Fragment>
<nav>
<li>
{" "}
<Link to="/"> Home </Link>{" "}
</li>

<li>
{" "}
<Link to="/about"> About </Link>{" "}
</li>
</nav>
<main>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
</Switch>
</main>
</Fragment>
</BrowserRouter>
);
}
}
export default RouterApp;
File page/Home.js
const Home = (props) => {

return (
<div>
<h1>Ini Halaman Home</h1>
</div>
);
};
export default Home;
File page/About.js
const About = (props) => {

return (
<div>
<h1>Ini Halaman About</h1>
</div>
);
};
export default About;

Uji Router
Sehingga hasilnya akan seperti berikut.
Dan tambahkan css pada App.css, seperti berikut.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body nav {
display: flex;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: green;
width: 100%;
height: 40px;
}

body nav li {
margin-right: 2rem;
}
body nav li a {
color: white;
}
body nav li a:hover {

color: yellow;
}
body main {
padding: 3rem;
color: gray;
}
Hari ke Delapan Belas

Redux adalah library yang digunakan sebagai state management global. Beberapa orang
bilang redux itu ibarat database di frontend, tapi ini hanya bersifat sementara tidak
benar-benar tersimpan. Libih jelasnya baca di sini.

Persiapan React Redux
Beberapa yang perlu diinstall pada saat menggunakan react redux yaitu berikut.
npm i redux
npm i react-redux
npm i redux-thunk
npm i axios
Reducer
Reducer adalah function yang digunakan untuk mengubah data state sesuai dengan
action yang diterima yang akan dicek menggunakan switch case atau if else
(kebanyakan menggunakan switch case).

Buatlah file user.reducer.js dalam folder reducers , yang isinya seperti berikut.
File user.reducer.js
const initialState = {
data: [],
isError: false,
isLoading: false,
};
export default (state = initialState, action) => {

switch (action.type) {
case "GET_USER_REQUEST":
return {
...state,
isError: false,
isLoading: true,
};
case "GET_USER_DONE":
return {
...state,
data: action.payload,
isError: false,
isLoading: false,
};
case "GET_USER_ERROR":
return {
...state,
isError: true,
isLoading: false,
};
default:
return state;
}
};
Action
Action berfungsi sebagai control apasaja yang akan dilakukan oleh reducer untuk
mengubah data. Buatlah file user.action.js dalam folder actions , yang isinya seperti
berikut.
File user.action.js
import axios from "axios";
const baseUrl = `https://warm-refuge-26108.herokuapp.com`;

export const getUsers = () => {
return async (dispatch) => {
dispatch({
type: "GET_USER_REQUEST",
});
try {
const result = await axios.get(baseUrl + `/users`);
dispatch({
type: "GET_USER_DONE",
payload: result.data,
});
} catch (error) {
dispatch({
type: "GET_USER_ERROR",
});
}
};
};
Store
Store adalah kumpulan reducer yang dijadikan sebagai induk data untuk dibagikan
kesemua component dengan provider. Buatlah file store.js didalam folder helpers
yang isinya berikut.
import { createStore, combineReducers, applyMiddleware } from "redux";

import thunk from "redux-thunk";
import Users from "../reducers/user.reducer";
const combine = combineReducers({

users: Users,
});
const Store = createStore(combine, applyMiddleware(thunk));

export default Store;
Provider
Provider adalah function dari react-redux sebagai penyedia store yang bisa diakses
semua component. Ubah file App.js menjadi seperti berikut.

import { Provider } from "react-redux";
import "./App.css";

import Store from "./helpers/store";
function App() {
return (
<Provider store={Store}>
<RouterApp />
</Provider>
);
}
export default App;
Hari ke Sembilan Belas

Pada saat menulis ini saya baru sadar, kenapa tidak materi Hooks terlebih dahulu saya
tulis kemudian redux, tapi yasudahlah, anggap saja ini seperti movie dengan alur maju
mundur.
React Hooks
Sejak react versi 16.8, hooks diperkenalkan sehingga component dengan function
memiliki akses ke state dan lifecycle secara sederhananya.
useState
useStateadalah cara menggunakan state pada react hooks, cara penggunaannya sangat
simple dengan mendeklarasikan array untuk menyimpan data dan untuk pengubahnya.
const [hitung, updateHitung] = useState(0);
Penggunaannya seperti berikut.
import React, { useState } from "react";
const Perhitungan = () => {

const [hitung, updateHitung] = useState(0);

return (
<div>
{hitung}
<button onClick={() => updateHitung(hitung + 1)}> Tambah 1</button>

</div>
);
};
useRef
Hooks useRef digunakan untuk membuat pointer atau referensi terhadap elemen DOM.
Cara penggunaannya.
import React, { useState, useRef } from "react";
const Perhitungan = () => {

const inputRef = useRef(null);
return (
<div>
<label>Input:</label>
<input type="text" ref={inputRef} placeholder="Asrul Dev" />
<button
onClick={() => {
const element = inputRef.current;
element.focus();
}}
>
Fokuskan!
</button>
</div>
);
};
useEffect / lifeCycle Hooks

useEffect digunakan sebagai pengganti lifeCycle pada react versi class component.
Sebagai componentDidMount, jika parameter kedua adalah array kosong.
useEffect(() => {
console.log("Mounted Yah:)");
}, []);

Sebagai componentWillMount adalah apasaja yang direturn pada useEffect.
useEffect(() => {
return () => {
console.log("Will UnMount Yah :(");
};
}, []);
useEffect dijalankan jika props berubah.
useEffect(() => {
}, [props.nilaiAwal]);
Jalankan jika state berubah.
useEffect(() => {
console.log("Hitung terapdet");
}, [hitung]);
Konsum Redux
Sebelumnya kita telah membahas redux. Sempat terhenti karena ada materi penting
yang harus dipahami sebelum konsum redux, yaitu Hooks pada react. Sekarang setelah
kita bahas tentang Hooks, maka materi ini barulah bisa lanjut kembali.
Pada file pages/Home.js konsums redux dengan mengubah kode menjadi seperti berikut.
import React, { useEffect } from "react";

import { useDispatch, useSelector } from "react-redux";
import { getUsers } from "../actions/user.action";

const dispatch = useDispatch();
const usersData = useSelector((state) => state.users);
useEffect(() => {
dispatch(getUsers());
}, []);

return (
<div className="page">
<h1 className="page-title">Member 30 Hari Js</h1>
{usersData.isLoading && <h1>Loading ....</h1>}
{usersData.isError && <h1>Error Data ....</h1>}

<div className="users">
{!usersData.isError &&
usersData.data.length > 0 &&
usersData.data.map((user, index) => (
<div className="user" key={index}>
<div className="user-img-container">
<img src={user.picture} alt={user.picture} />
</div>
<div className="user-detail">
<h3> {user.name} </h3>
</div>
</div>
))}
</div>
</div>
);
};
Penggunaan map baca disini
Kemudia poles sedikt dengan mengubah css agar tampilan lebih menarik, sehingga file
App.css menjadi seperti berikut.
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
display: flex;
min-height: 100vh;
}

body nav {
display: flex;
-ms-flex-pack: end;
background: green;
width: 100%;
height: 40px;
}
body nav li {
margin-right: 2rem;
}
body nav li a {
color: white;
}

color: yellow;
}
body main {
padding: 3rem;
color: gray;
}
.page {
display: flex;
}
.page .page-title {
color: black;
text-align: center;
margin-bottom: 1rem;
}
.page .users {

display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.page .users .user {

width: 25%;
border: 1px green solid;
margin-right: 1rem;
}
.page .users .user:nth-child(4n) {

margin-right: 0;
}
.page .users .user .user-img-container img {

width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page .users .user .user-detail h3 {

text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
Hasil nya akan menjadi seperti berikut.

Hari ke Duapuluh
Input pada React

Pada react kita dapat mengambil nilai input menggunakan e.target.value , brikut
contoh penulisan input pada react.
const [nama, updateNama] = setState('')

<input type="text" placeholder="name" onChange={(e) => updateNama(e.target.value)} />
Pada kasus ini kita akan menggunakan contoh pada halaman register. Buat file
page/Register.js , yang isinya seperti berikut.
File page/Register.js

import { useDispatch } from "react-redux";
import { createUser } from "../actions/user.action";
const Register = (props) => {

const [user, updateUser] = useState({});
const submitForm = (e) => {

e.preventDefault();
dispatch(createUser(user)).then((res) => {
if (res.data.status === 200) {
window.location.href = "/";
}
});
};
return (
<h1 className="page-title">Register 30 Hari Js</h1>
<form className="register" onSubmit={(e) => submitForm(e)}>

<label>Nama</label>
<input
type="text"

autoComplete={"false"}
placeholder="Nama elu"
onChange={(e) => {
updateUser({ ...user, name: e.target.value });
}}
/>
<label>Label</label>
<input
type="text"
placeholder="Label"
onChange={(e) => {
updateUser({ ...user, label: e.target.value });
}}
/>
<label>Link Profile</label>
<input
type="text"
placeholder="ex. <http://fb.com/image.png>"
onChange={(e) => {
updateUser({ ...user, picture: e.target.value });
}}
/>
<label>Email</label>
<input
type="email"
placeholder="email"
onChange={(e) => {
updateUser({ ...user, email: e.target.value });
}}
/>
<label>No Hp</label>
<input
type="text"
placeholder="Phone"
onChange={(e) => {
updateUser({ ...user, phone: e.target.value });
}}
/>
<label>Website</label>
<input
type="text"
placeholder="Link web"
onChange={(e) => {
updateUser({ ...user, website: e.target.value });

}}
/>
<label>Summary</label>
<textarea
rows="5"
placeholder="summary..."
onChange={(e) => {
updateUser({ ...user, summary: e.target.value });
}}
></textarea>
<label>Password</label>
<input
type="password"
placeholder="rahasia"
onChange={(e) => {
updateUser({ ...user, password: e.target.value });
}}
/>
<button type="submit" onClick={(e) => submitForm(e)}>

Register
</button>
</form>
</div>
);
};
export default Register;
Kemudian ubah file RouterApp.js sehingga seperti berikut.


import Register from "./pages/Register";

render() {
return (
<BrowserRouter>
<Fragment>
<nav>
<li>
{" "}

</li>
<li>
{" "}
</li>
<li>
{" "}
<Link to="/register"> Register </Link>{" "}
</li>
</nav>
<main>
<Switch>
<Route path="/register" exact component={Register} />
</Switch>
</main>
</Fragment>
</BrowserRouter>
);
}
}
Action simpan ke database

Ubah pada file user.action.js untuk menambah kode sebagai proses untuk entry data ke
dalam server penyedia API, sehingga kode menjadi seperti berikut.

dispatch({
});
try {
dispatch({
});
} catch (error) {
dispatch({
});

}
};
};
export const createUser = (data) => {

try {
const result = await axios.post(baseUrl + `/users`, data);
return result;
} catch (error) {
dispatch({
});
}
};
};
Hasil Kode, akan seperti berikut:
Hasil, data setelah kembali ke halaman home.

Hari ke Duapuluh Satu
Latihan
1. Latihan untuk kesegaran otak "Berapa Banyak Hadiah yang terbeli?"
Asrul Harahap meminta Anis Fikriyyah untuk membeli oleh-oleh saat pergi ke Medan,
sekarang Anis Fikriyyah ingin tahu berapa jumlah oleh-oleh PALING BANYAK yang
bisa dia beli.
Implementasikan function dibawah untuk membantu Anis Fikriyyah:
function banyakHadiah(maxBiaya, hadiah)
Parameter pertama adalah maxBiaya Anis Fikriyyah, yang kedua adalah sebuah Array
yang berisi harga setiap oleh-oleh. Function ini harus mengembalikan nilai yang
mewakili jumlah maksimum oleh-oleh yang Anis Fikriyyah dapat beli.
Contoh:
Maksimum biaya: 25000
Daftar harga oleh-oleh: [20000, 5000, 10000, 6000, 4000 ]

Maka akan mengembalikan 4 karena bisa membeli oleh-oleh dengan harga 5000, 10000,
6000, 4000
Asumsi:
Semua angka akan memiliki nilai >= 0, dan array tidak akan pernah kosong.
Dilarang menggunakan array .sort()CTION SORT DARI ARRAY JAVASCRIPT

Hasil Keluaran yang diharapkan (jawaban kirim gi group telegram yah!)
console.log(banyakHadiah(30000, [15000, 12000, 5000, 3000, 10000])); // 4

console.log(banyakHadiah(10000, [2000, 2000, 3000, 1000, 2000, 10000])); // 5
console.log(banyakHadiah(4000, [7500, 1500, 2000, 3000])); // 2
console.log(banyakHadiah(50000, [25000, 25000, 10000, 15000])); // 3
console.log(banyakHadiah(0, [10000, 3000])); // 0

1. Pada materi react js, belum adanya update profile user dan hapus account, maka
buatlah. (soal ini dikerjakan setelah membaca materi sebelum deploy berikut).
Persiapan Deploy
Setelah latihan kesegaran otak mari kita lanjut materi kembali, kita akan melakukan
deploy ke https://www.netlify.com (tau kenapa?, iya benar GRATISSSSSS).
Sedikit kita lengkapi, untuk halaman login, silahkan buat file page/Login.js yang isinya
seperti berikut.

import { loginUser } from "../actions/user.action";
const Login = (props) => {

const submitForm = (e) => {

e.preventDefault();
dispatch(loginUser(user));
};
return (
<h1 className="page-title">Login 30 Hari Js</h1>
<form className="login" onSubmit={(e) => submitForm(e)}>

<label>Email</label>
<input
type="email"
placeholder="email"
onChange={(e) => {
updateUser({ ...user, email: e.target.value });
}}
/>
<label>Password</label>
<input
type="password"
placeholder="rahasia"
onChange={(e) => {
updateUser({ ...user, password: e.target.value });
}}
/>
<button type="submit" onClick={(e) => submitForm(e)}>

Login
</button>
</form>
</div>
);
};
export default Login;
Ubah sedikit file user.action.js menjadi seperti berikut.

dispatch({
});
try {
dispatch({
});
} catch (error) {
dispatch({
});
}
};
};

try {
return result;
} catch (error) {
dispatch({
});
}
};
};
export const loginUser = (data) => {

try {
const result = await axios.post(baseUrl + `/users/login`, data);

window.localStorage.setItem("token", result.data.token);
if (result.data.token) {
window.location.href = "/profile";
}
return result;
} catch (error) {
dispatch({
});
}
};
};
export const profileUser = () => {

dispatch({
});
try {
const result = await axios.get(baseUrl + `/users/profile`, {
headers: { token: window.localStorage.getItem("token") },
});
dispatch({
type: "GET_USER_DETAIL_DONE",
});
} catch (error) {
dispatch({
});
}
};
};
Ubah juga file user.reducer.js , dan menjadi seperti berikut.
data: [],
isError: false,
isLoading: false,
detail: null,
};

case "GET_USER_REQUEST":
return {
...state,
isError: false,
isLoading: true,

};
case "GET_USER_DONE":
return {
...state,
data: action.payload,
isError: false,
isLoading: false,
};
case "GET_USER_DETAIL_DONE":
return {
...state,
detail: action.payload,
isError: false,
isLoading: false,
};
case "GET_USER_ERROR":
return {
...state,
isError: true,
isLoading: false,
};
default:
return state;
}
};
Tambahkan file page/Profile.js , yang isinya seperti berikut.

import { profileUser } from "../actions/user.action";
const Profile = (props) => {

useEffect(() => {
dispatch(profileUser());
}, []);
if (usersData.detail === null) {

return <h1>Loading...</h1>;
}
return (
<h1 className="page-title">My Profile</h1>
<div className="profile">
<div className="avatar">
<img src={usersData.detail.picture} />

</div>
<div className="profile-detail">
<div>
<h3> {usersData.detail.name} </h3>
<hr />
<span> {usersData.detail.label} </span>
<p style={{ marginTop: "3rem" }}> {usersData.detail.phone} </p>

<p style={{ marginTop: "1rem" }}> {usersData.detail.email} </p>
<p style={{ marginTop: "1rem" }}> {usersData.detail.website} </p>
<p style={{ marginTop: "3rem" }}>

Summary: {usersData.detail.summary}{" "}
</p>
</div>
</div>
</div>
</div>
);
};
export default Profile;
Ubah file RouterApp.js untuk mengubah menu sehingga kode menjadi seperti berikut.


import Profile from "./pages/Profile";
import Login from "./pages/Login";

state = {
token: null,
};
componentDidMount() {
const token = window.localStorage.getItem("token");
this.setState({ token });
}
render() {
return (
<BrowserRouter>
<Fragment>
<nav>
<li>
{" "}

</li>
<li>
{" "}
</li>
{this.state.token === null && (
<>
<li>
{" "}
<Link to="/register"> Register </Link>{" "}
</li>
<li>
{" "}
<Link to="/login"> Login </Link>{" "}
</li>
</>
)}
{this.state.token !== null && (
<>
<li>
{" "}
<Link to="/profile"> Profile </Link>{" "}
</li>
<li>
{" "}
<a
href="#"
onClick={() => {
window.localStorage.removeItem("token");
window.location.href = "/";
}}
>
{" "}
Logout{" "}
</a>{" "}
</li>
</>
)}
</nav>
<main>
<Switch>
{this.state.token !== null && (
<Route path="/profile" exact component={Profile} />
)}
{this.state.token === null && (

<>
<Route path="/register" exact component={Register} />
<Route path="/login" exact component={Login} />
</>

)}
</Switch>
</main>
</Fragment>
</BrowserRouter>
);
}
}
Agar terlihat elegan tambahkan css pada file App.css yang isinya seperti berikut.
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
display: flex;
min-height: 100vh;
}
body nav {
display: flex;
-ms-flex-pack: end;
background: green;
width: 100%;
height: 40px;
}
body nav li {

margin-right: 2rem;
}
body nav li a {
color: white;
}

color: yellow;
}
body main {
padding: 3rem;
color: gray;
}
.page {
display: flex;
}
.page .page-title {
color: black;
text-align: center;
}
.page .users {
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.page .users .user {

width: calc(calc(100% / 4) - 1rem);
border: 1px green solid;
margin-right: 1rem;
}
.page .users .user:nth-child(4n) {

margin-right: 0;
}

.page .users .user .user-img-container img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page .users .user .user-detail h3 {

text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.page .register,
.page .login {
display: flex;
min-width: 80%;
margin: auto;
}
.page .register input,

.page .register textarea,
.page .login input,
.page .login textarea {
padding: 0.5rem;
outline: none;
}
.page .register input:focus,

.page .register textarea:focus,
.page .login input:focus,
.page .login textarea:focus {
border: 1px solid green;
}
.page .register button,

.page .login button {
color: #ffffff;
background: green;
padding: 0.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
.page .register button:hover,

.page .login button:hover {
background: #ffffff;

color: green;
border: 1px solid green;
}
.page .profile {
width: 800px;
min-width: 800px;
max-width: 800px;
padding: 2rem;
border: 1px dotted black;
margin: auto;
display: flex;
}
.page .profile .avatar {

margin-right: 1rem;
}
.page .profile .avatar img {

width: 200px;
border-radius: 50%;
border: 1px solid red;
}
Source cek disini
Deploy
Pertama sekali, silahkan login ke netlify atau jika belum memiliki akun silahkan daftar
terlebih dahulu.

Kemudian pada proyek react build untuk di upload ke hosting dengan perintah berikut.
npm run build
Maka akan menghasilkan file compress dari proyek react tersebut.
Selanjutnya folder build drag ke netlify seperti berikut.

Setelah di drag, maka netlify memberikan url yang dapat kita gunakan sebagai alamat
web kita.
Jika ingin mengubah url, netlify menyediakannya melalui custom domain.

Hasilnya akan seperti berikut: https://asrul.netlify.com
Hari ke Duapuluh Dua


React Native adalah framework yang dibuat oleh tim facebook sebagai alat untuk
membuat aplikasi Android dan Ios dengan javascript yang core nya sendiri adalah
reactjs.
Persiapan Masuk React Native

Beberapa hal yang harus dipersiapkan sebelum masuk ke materi React Native adalah:
Node Js
React Native karena berbasis javascript maka harus adanya Node Js, untuk install node
js telah kita bahas pada 30 hari javascript hari pertama. Silahkan baca kembali.
Java Development Kit

React Native membutuhkan setidaknya JDK versi 8, yang dapat di download disini.
Jangan lupa setelah diinstall adanya PATH environtment JAVA_HOME, jika sudah ada
bisa dicek dengan cara perintah berikut pada terminal.
echo $JAVA_HOME
Android Studio
Android studio adalah optional untuk diinstall, boleh hanya install Android SDK saja,
tapi untuk mempermudah mendapatkan yang kita butuhkan untuk react native.
Android SDK
Android SDK Platform
Android Virtual Device
Pastikan untuk mengkonfigurasi env pada laptop anda, linux atau mac biasanya pada
.bashrc atau zshrc .

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Cek dengan cara:
echo $ANDROID_HOME
Install React Native
Jika Anda pernah install react-native-cli secara global, saya

sarankan untuk uninstall kembali, karena saya khawatir akan ada
banyak masalah kedepannya.
Pada series ini, kita akan membuat aplikasi minibioapp . Caranya langsung saja.
npx react-native init minibioapp

Setelah berhasil untuk membuat proyek, kita cek bagaimana struktur folder react native
berikut.
.
├── android
├── ios
├── node_modules
├── App.js
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
├── package-lock.json
└── __tests__
└── App-test.js
Menjalankan React Native

Untuk menjalankan react native adalah dengan perintah berikut.
npx react-native start

Hari ke Duapuluh Tiga
React Native Dasar

Pada dasarnya react native sama dengan react js sama-sama dalam bentuk component,
cara penulisan juga sama. Anda perlu tahu component, props, state, hooks untuk lanjut
jika belum maka silahkan baca materi react pada minggu sebelumnya disini
Hello World!
Ini adalah tradisi yang turun temurun, saat pertamakali belajar hal baru dalam koding
biasanya dengan menampilkan Hello World! jadi Hello Asrul Dev. Langsung saja mari
tulis kode berikut pada file App.js .

import { View, Text } from "react-native";
const App = () => {

return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ color: "blue", fontSize: 32 }}>Hello Asrul Dev</Text>
</View>
);
};
export default App;
Hasilnya akan terlihat seperti berikut.
Terlihat jelas pada kode diatas, jika pada web kita menggunakan
<div> maka pada react native kita menggunakan <View>, begitu
juga penggunaan <p>, <h1>, ... atau <span> menjadi <Text> pada
react native.
Style
Desain yang bagus bisa menjadi daya tarik untuk menggunakan aplikasi, maka materi
ini saya anggap penting. Style pada react native mirip dengan css pada web tapi dalam
bentuk kode object javascript.
React native telah menyediakan StyleSheet yang dapat kita gunakan untuk kumpulan
style kode yang dimiliki. Sebelumnya terlihat bahwa saya telah memperlihatkan style

pada <View> dan <Text> , dengan menggunakan StyleSheet maka kode akan terlihat
lebih rapi.

import { View, Text, StyleSheet } from "react-native";
const App = () => {

return (
<View style={styles.AllCenter}>
<Text style={styles.textDemo}>Hello Asrul Dev</Text>
</View>
);
};
export default App;
const styles = StyleSheet.create({

AllCenter: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
textDemo: {
color: "blue",
fontSize: 32,
},
});
Layout
Pada react native, layout menggunakan konsep flex yang dapat dibaca disini
Text Input
Jika pada html ada <input type="text" /> maka gantinya pada react native adalah
<TextInput /> . Perhatikan contoh berikut.

import { View, Text, StyleSheet, TextInput } from "react-native";
const App = () => {

const [teks, updateTeks] = useState("");
return (
<TextInput

style={styles.inputHope}
placeholder="Tulis apapun"
onChangeText={(text) => updateTeks(text)}
value={teks}
/>
</View>
);
};
export default App;

AllCenter: {
flex: 1,
padding: 10,
},
textDemo: {
color: "blue",
fontSize: 32,
},
inputHope: {
height: 40,
borderColor: "gray",
borderWidth: 1,
width: "100%",
},
});

Button
Intraksi pada mobile akan sering berhubungan dengan yang namanya sentuh untuk
melakukan interaksi, biasanya untuk pindah halaman atau lainnya. Button merupakan
salah satu bentuk interaksi tersebut. Button pada react native dapat dilihat pada contoh
berikut.

import { View, Text, StyleSheet, TextInput, Button } from "react-native";
const App = () => {

return (
<TextInput
value={teks}
/>
<View style={styles.fullButton}>

<Button onPress={() => alert(teks)} title="Sentuh Aku" />
</View>
</View>
);
};
export default App;

AllCenter: {
flex: 1,
padding: 10,
},
textDemo: {
color: "blue",
fontSize: 32,
},
inputHope: {
height: 40,
borderWidth: 1,
width: "100%",
},
fullButton: {
height: 40,
width: "100%",
marginTop: 8,
},
});

ScrollView
Aplikasi mobile memiliki ruang yang sempit, sehingga scroll akan sangat membantu
untuk tampilan yang panjang. Berikut penggunaan ScrollView pada react native.

import {
View,
Text,
StyleSheet,
TextInput,
Button,
ScrollView,
Image,
} from "react-native";
const App = () => {

return (
<ScrollView>
<TextInput
value={teks}

/>
<View style={styles.fullButton}>
<Button onPress={() => alert(teks)} title="Sentuh Aku" />
</View>
</View>
<Image
source={{
uri: "<https://avatars2.githubusercontent.com/u/15111402?s=460&v=4>",
width: 200,
height: 200,
}}
style={{ marginTop: 8 }}
/>
<Image
source={{
width: 200,
height: 200,
}}
/>
<Image
source={{
width: 200,
height: 200,
}}
/>
<Image
source={{
width: 200,
height: 200,
}}
/>
</View>
</ScrollView>
);
};
export default App;

AllCenter: {
flex: 1,
padding: 10,
},
textDemo: {

color: "blue",
fontSize: 32,
},
inputHope: {
height: 40,
borderWidth: 1,
width: "100%",
},
fullButton: {
height: 40,
width: "100%",
marginTop: 8,
},
});
Hari ke Duapuluh Empat


Penggunaan UI
Ada banyak sekali UI untuk react native yang bisa dipakai secara gratis, pada series ini
kita akan menggunakan nativebase, yang dapat dilihat disitus resminya
https://nativebase.io
Menggunakan nativebase
Sebelum menggunakan komponen nativebase, pertama sekali kita harus install pada
proyek kita dengan perintah berikut.
npm install native-base
Contoh penggunaan native base.

import { Container, Header, Content, Button, Text } from "native-base";
export default class ButtonThemeExample extends Component {
render() {
return (
<Container>
<Header />
<Content>
<Button light>
<Text> Light </Text>

</Button>
<Button primary>
<Text> Primary </Text>
</Button>
<Button success>
<Text> Success </Text>
</Button>
<Button info>
<Text> Info </Text>
</Button>
<Button warning>
<Text> Warning </Text>
</Button>
<Button danger>
<Text> Danger </Text>
</Button>
<Button dark>
<Text> Dark </Text>
</Button>
</Content>
</Container>
);
}
}
React Router Native

Sama halnya dengan reactjs, pada react native juga ada yang namanya router yang
berfungsi untuk pindah scren dari yang satu ke yang lainnya. Pada series ini kita akan
menggunakan react router native. Cara install seperti berikut.
npm i react-router-native
Kita telah menginstall UI untuk proyek react native, kemudian kita akan membuat file
RouterApp.js , pages/Home.js , dan pages/About.js dan mengubah file App.js .
File App.js

const App = () => {

return <RouterApp />;
};
export default App;

File RouterApp.js

import { Container, Text, Footer, View } from "native-base";
import { NativeRouter, Route, Link } from "react-router-native";

const RouterApp = () => {

return (
<NativeRouter>
<Container>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Footer>
<Link to="/" underlayColor="blue" style={{ flex: 1 }}>
<View
style={{
flex: 1,
}}
>
<Text style={{ color: "white" }}>Home</Text>
</View>
</Link>
<Link to="/about" underlayColor="blue" style={{ flex: 1 }}>
<View
style={{
flex: 1,
}}
>
<Text style={{ color: "white" }}>About</Text>
</View>
</Link>
</Footer>
</Container>
</NativeRouter>
);
};
File pages/Home.js

import { Container, Header, Body, Title, Content, Text } from "native-base";

return (
<Container>
<Header>
<Body>
<Title>Home</Title>
</Body>
</Header>
<Content>
<Text> Ini Home Page asrul.dev </Text>
</Content>
</Container>
);
};
File pages/About.js

import { Container, Header, Body, Title, Content, Text } from "native-base";
const About = (props) => {

return (
<Container>
<Header>
<Body>
<Title>About</Title>
</Body>
</Header>
<Content>
<Text> About Page </Text>
</Content>
</Container>
);
};
export default About;
Hasilnya akan terlihat seperti berikut.

Hari ke Duapuluh Lima
Icon
Icon akan sangat membantu memperjelas maksud dari sebuah aplikasi, misal gambar
rumah untuk menyatakan home. Sehingga dengan cepat pengguna tau maksud dari
fitur atau menu yang terdapat pada aplikasi.
Install library icon dengan perintah berikut.
npm i react-native-vector-icons
Kemudian tambahkan kode berikut pada android/app/build.gradle , INGAT BUKAN

android/build.gradle .
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Untuk menguji, apakah icon yang kita install berhasil terimplementasi, mari ubah kode
file RouterApp.js menjadi seperti berikut.

import { Container, Text, Footer, View, Icon } from "native-base";


return (
<NativeRouter>
<Container>
<Footer>
<View
style={{
flex: 1,
}}
>
<Icon name="home" style={{ color: "white" }} />
</View>
</Link>
<View
style={{
flex: 1,
}}
>
<Icon name="person" style={{ color: "white" }} />
</View>
</Link>
</Footer>
</Container>
</NativeRouter>
);
};

Sehingga hasilnya akan seperti berikut.
Redux
Pada materi react js, kita telah membahas REDUX, materi ini tidak berbeda pada react
native maupun react js, untuk itu silahkan baca kembali materi sebelumnya dan
sesuaika pada react native.
Baca series redux sebelumnya disini
Setelah disesuaikan dengan materi redux, ubah file pages/Home.js menjadi seperti
berikut.

import {
Container,
Header,
Body,
Title,
Content,
Text,
Spinner,
Card,
CardItem,
Left,
Thumbnail,
Image,

Button,
Icon,
Right,
Item,
} from "native-base";
import { getUsers } from "../actions/user.action";

useEffect(() => {
}, []);
return (
<Container>
<Header>
<Body>
<Title>Home</Title>
</Body>
</Header>
<Content>
{usersData.isLoading && <Spinner color="blue" />}
{usersData.isError && <Spinner color="red" />}
{usersData.data.map((item, index) => (

<Card key={index}>
<CardItem>
<Left>
<Thumbnail source={{ uri: item.picture }} />
<Body>
<Text> {item.name} </Text>
<Text note> {item.label} </Text>
</Body>
</Left>
</CardItem>
</Card>
))}
</Content>
</Container>
);
};
Hasilnya akan terlihat seperi berikut.

Hari ke Duapuluh Enam
Pada serie ini kita akan membahas konsep authentikasi pada React Native. Proses login
akan terjadi jika user telah terdaftar, kemudian memasukkan akun misal email dan
password, jika berhasil login maka simpan token pada storage.
Login
Langsung saja, tambahkan file pages/Login.js yang isinya berikut.

import {
Container,
Header,
Body,
Title,
Content,
Text,
Form,
Label,

Input,
Button,
Item,
Right,
import { Link } from "react-router-native";
import { loginUser } from "../actions/user.action";
const Login = (props) => {

const [email, updateEmail] = useState("");
const [password, updatePassword] = useState("");
const storeData = async (token) => {

try {
await AsyncStorage.setItem("asrul-dev", token);
} catch (error) {
console.warn(error);
}
};
const doLogin = () => {

dispatch(loginUser({ email, password })).then((res) => {
const token = res.data.token;
storeData(token);
});
};
return (
<Container>
<Header>
<Body>
<Title>Login</Title>
</Body>
</Header>
<Content style={{ padding: 16 }}>
<Right>
<Text style={{ fontSize: 32 }}>Login 30 Hari Js</Text>
</Right>
<Form>
<Item floatingLabel>
<Label>Email</Label>
<Input onChangeText={(text) => updateEmail(text)} value={email} />
</Item>
<Item floatingLabel last>
<Label>Password</Label>
<Input
secureTextEntry={true}
onChangeText={(text) => updatePassword(text)}
value={password}
/>
</Item>

<Button
onPress={doLogin}
style={{
marginTop: 32,
marginBottom: 16,
flex: 1,
}}
>
<Text> Login </Text>
</Button>
<Right>
<Link to={"/register"}>
<Text> Register Free Now</Text>
</Link>
</Right>
</Form>
</Content>
</Container>
);
};
export default Login;
Kemudian ubah file RouterApp.js menjadi seperti berikut.
import React, { Fragment } from "react";

import { Container, Text, Footer, View, Icon } from "native-base";

import Login from "./pages/Login";
import { useSelector } from "react-redux";

const auth = useSelector((state) => state.auth);
return (
<NativeRouter>
<Container>
{!auth.isLogin ? (
<Fragment>
<Route exact path="/" component={Login} />
</Fragment>
) : (
<Fragment>

<Footer>
<View
style={{
flex: 1,
}}
>
<Icon name="home" style={{ color: "white" }} />
</View>
</Link>
<View
style={{
flex: 1,
}}
>
<Icon name="person" style={{ color: "white" }} />
</View>
</Link>
</Footer>
</Fragment>
)}
</Container>
</NativeRouter>
);
};
Ubah file actions/user.action.js menjadi seperti berikut.

dispatch({
});
try {
dispatch({

});
} catch (error) {
dispatch({
});
}
};
};

try {
return result;
} catch (error) {
dispatch({
});
}
};
};
export const loginUser = (data) => {

try {
const result = await axios.post(baseUrl + `/users/login`, data);
dispatch({
type: "DO_LOGIN",
payload: result.data.token,
});
return result;
} catch (error) {
return 500;
}
};
};
export const logoutUser = () => {

return (dispatch) => {
try {
dispatch({
type: "DO_LOGOUT",
});
} catch (error) {
return 500;
}
};
};
Tambahkan file reducers/auth.reducer.js yang isinya seperti berikut.

isLogin: false,
token: null,
};

case "DO_LOGIN":
return {
...state,
isLogin: true,
token: action.payload,
};
case "DO_LOGOUT":
return {
...state,
isLogin: false,
token: null,
};
default:
return state;
}
};
Kemudian ubah file helpers/store.js menjadi seperti berikut.
import { createStore, combineReducers, applyMiddleware } from "redux";

import thunk from "redux-thunk";
import Users from "../reducers/user.reducer";

import Auth from "../reducers/auth.reducer";
const combine = combineReducers({

users: Users,
auth: Auth,
});
const Store = createStore(combine, applyMiddleware(thunk));

export default Store;
Logout
Ubah file pages/Home.js untuk menambahkan fitur logout sehingga menjadi seperti
berikut.

import {
Container,
Header,
Body,
Title,
Content,
Text,
Spinner,
Card,
CardItem,
Left,
Thumbnail,
Image,
Button,
Icon,
Right,
Item,
import { getUsers, logoutUser } from "../actions/user.action";
import { AsyncStorage } from "react-native";

const doLogout = async (key) => {

try {
await AsyncStorage.removeItem(key);
dispatch(logoutUser());
return true;
} catch (exception) {
return false;
}
};
const logout = () => {

doLogout("asrul-dev");
};
useEffect(() => {
}, []);
return (
<Container>
<Header>
<Body>
<Title>Home</Title>
</Body>
<Right>

<Title onPress={logout}>Logout</Title>
</Right>
</Header>
<Content>
{usersData.isLoading && <Spinner color="blue" />}
{usersData.isError && <Spinner color="red" />}
{usersData.data.map((item, index) => (

<Card key={index}>
<CardItem>
<Left>
<Thumbnail source={{ uri: item.picture }} />
<Body>
<Text> {item.name} </Text>
<Text note> {item.label} </Text>
</Body>
</Left>
</CardItem>
</Card>
))}
</Content>
</Container>
);
};
Hasilnya akan seperti berikut

Hari ke Duapuluh Tujuh
Register
Buat file pages/Register.js yang isi kodenya seperti berikut.

import {
Container,
Header,
Body,
Title,
Content,
Text,
Form,
Label,
Input,
Button,
Item,
Right,
import { Link } from "react-router-native";
import { createUser } from "../actions/user.action";
const Register = (props) => {

const submitForm = () => {

dispatch(createUser(user)).then((res) => {
props.history.push("/");
});
};
return (
<Container>
<Header>
<Body>
<Title>Register</Title>
</Body>
</Header>
<Content style={{ padding: 16 }}>

<Right>
<Text style={{ fontSize: 32 }}>Register 30 Hari Js</Text>
</Right>
<Form>
<Label>Nama</Label>
<Input
onChangeText={(text) => updateUser({ ...user, name: text })}
/>
</Item>
<Label>Label</Label>
<Input
onChangeText={(text) => updateUser({ ...user, label: text })}
/>
</Item>
<Label>Link Profile</Label>
<Input
onChangeText={(text) => updateUser({ ...user, picture: text })}
/>
</Item>
<Label>Email</Label>
<Input
onChangeText={(text) => updateUser({ ...user, email: text })}
/>
</Item>
<Label>Phone</Label>
<Input
onChangeText={(text) => updateUser({ ...user, phone: text })}
/>
</Item>
<Label>Website</Label>
<Input
onChangeText={(text) => updateUser({ ...user, website: text })}
/>
</Item>
<Label>Summary</Label>
<Input
onChangeText={(text) => updateUser({ ...user, summary: text })}
/>
</Item>
<Item floatingLabel last>
<Label>Password</Label>
<Input
secureTextEntry={true}
onChangeText={(text) => updateUser({ ...user, password: text })}
/>
</Item>

<Button
style={{
marginTop: 16,
marginBottom: 16,
flex: 1,
}}
onPress={submitForm}
>
<Text style={{ textAlign: "center" }}> Register </Text>
</Button>
<Link to={"/"}>
<Text> Login </Text>
</Link>
</Form>
</Content>
</Container>
);
};
export default Register;
Hasil akan seperti berikut.

Hari ke Duapuluh Delapan
Update: Sabtu, 1 Fabruari 2020
Besi hitam tumpul yang dipukul, bakar, pukul, bakar, asah, pukul,
bakar, asah hingga menjadi pedang yang tajam. Jika Anda ingin jadi
hebat setajam pedang yah....
Latihan
1. Buatlah halaman profile pada Aplikasi yang telah Anda buat!
2. Buatlah sebuah function function deteksiVirus('kalimat', 'virus') , dimana function

akan menerima dua parameter yaitu kalimat dan virus, kemudian cek berapa
banyak virus yang terdetekse pada kalimat berdasarkan jenis virus yang ditentukan
pada parameter virus. Perhatikan case.
console.log(deteksiVirus('qlD4MZax0raQqew', 'x|0|q')); // 5 virus terdeteksi

console.log(deteksiVirus('HH0NBP1zRa', 'h|r')); // 3 virus terdeteksi
console.log(deteksiVirus('4O4TmIF6ONaiMlzpXxPqwy', '4|X|p')); // 6 virus terdeteksi
console.log(deteksiVirus('mjBgPlzks', 'm')); // 1 virus terdeteksi
console.log(deteksiVirus('AIn4Ks05bBaa', 'x')); // Gak ada virus terdeteksi
console.log(deteksiVirus('RsMFjBUjvIaP')); // Gak ada virus terdeteksi
console.log(deteksiVirus('')); // Gak ada virus terdeteksi
Hari ke Duapuluh Sembilan

Update: Minggu, 2 Februari 2020
Publish Play Store

Update: Jumat, 7 Februari 2020
Setelah 5 hari menunggu, akhirnya aplikasi terpublish juga ke play store.
Persiapan Publish

Semua aplikasi yang masuk ke Play store harus ditandatangani, sebagai penanda jika
ada publish lagi artinya update bukan nambah aplikasi. Tanda tangan aplikasi disini
menggunakan .keystore.
Berikut cara membuat keystore.
Masuk ke directory java terinstall. Kemudian gunakan perintah berikut untuk
melakukan generate.
sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -

keysize 2048 -validity 10000
Nama key dapat disesuaikan

Hasil generate tersebut pindahkan ke dalam proyek, pada folder android/app .

Ubah file android/gradle.properties seingga hasilnya seperti berikut.
org.gradle.configureondemand=false
android.useAndroidX=true
android.enableJetifier=true
MYAPP_UPLOAD_STORE_FILE=asruldev-js.keystore
MYAPP_UPLOAD_KEY_ALIAS=asruldev-js-alias
MYAPP_UPLOAD_STORE_PASSWORD=rahasia-sekali-yah
MYAPP_UPLOAD_KEY_PASSWORD=rahasia-sekali-yah

Selanjutnya ubah kode android/app/build.gradle sehingga menjadi seperti berikut.
...
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
release {
if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
storeFile file(MYAPP_UPLOAD_STORE_FILE)
storePassword MYAPP_UPLOAD_STORE_PASSWORD
keyAlias MYAPP_UPLOAD_KEY_ALIAS
keyPassword MYAPP_UPLOAD_KEY_PASSWORD
}
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see <https://facebook.github.io/react-native/docs/signed-apk-android>.
signingConfig signingConfigs.release
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.
pro"

}
}
...
Jika configurasi selesai, selanjutnya lakukan release apk dengan perintah berikut.
./gradlew bundleRelease
Pastikan terminal sedang berada dalam folder android

Uji dengan perintah berikut, jika tidak ada error maka lanjutkan ke tahap upload ke play
store.
npx react-native run-android --variant=release
Upload
Jika APK ingin dipublish ke play store agar dapat didownload oleh org banyak, maka
diperlukan akun play console sendiri, jika belum ada silahkan daftarkan jika udah ada
langsung login di https://play.google.com.
Pilih menu Buat Aplikasi dan pilih bahasa dan isi nama aplikasi.

Kemudian isi formulir yang diminta oleh google play sendiri, seperti alamat, descripsi,
gambar, dll.

Kemudian upload apk dan lakukan release, yang diapload adalah hasil release yang ada
dalam folder proyek minibioapp/android/app/build/outputs/apk/release .
Setelah dipload, maka lakukan cek ulang apakah semua field yang dibutuhkan google
play udah tercentang? jika sudah, pilih Buat Rilis .

Jika masa pemeriksaan untuk verfifkasi aplikasi oleh google selesai maka aplikasi akan
terpublish dan bisa didownload.
Bisa cek dan download segera di https://play.google.com/store/apps/details?

id=com.minibioapp

Hari ke Tigapuluh
Update: Senin, 10 Februari 2020
Alhamdulillah kita telah bersama belajar javascript selama 30 hari, mengucapkan
banyak terimakasih telah menjadi bagian dari penyelesaian tulisan series ini.
Apa selanjutnya?
Setelah mempelajari tulisan ini maka Annda dapat mengetahui dimana nyaman Anda
sendiri, apakah lebih ke backend, frontend-web, atau mobile.
Tentukan pilihan Anda dan ikuti tulisan saya selanjutnya.
Paket Express
Your React
Native Speaker

30 Hari Javascript-Compressed

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

30 Hari Javascript-Compressed

Diunggah oleh

Hak Cipta:

Format Tersedia

30 Hari Javascript

Oleh: Asrul Harahap

1. Motivasi yang tinggi

2. Laptop dengan OS apasaja (rekomendasi: Linux)

4. Browser (rekomendasi: Google Chrome)

5. Teks Editor (rekomendasi: VS Code)

6. Kopi dan Snek (optional)

Instal Google Chrome

Menggunakan Chrome Console

Kode Pada Chrome Console

console.log("Belajar Bersama Asrul Dev");

ekstensi yang digunakan .js

1. Integer yaitu bilangan negatif, nol, positif: 100, 0, 25

2. Float yaitu bilangan negatif atau positif berkoma: 2.12, 3.14

Memeriksa Tipe Data

// Ini hanya komentar tidak dieksekusi

Komentar dengan beberapa baris

var nama = "Asrul Harahap";

Variabel punya aturan dalam penulisan, yaitu:

1. Tidak boleh dimulai dengan angka

2. Tidak boleh menggunakan spasi

var alamat = "Jakarta Selatan";

Tipe Data non-Primitif

let siswa = ["Asrul", "Anis", "Tisha", "Rifky"];

let nilai = [1, 2, 3];

console.log(nilai === angka);

Referensi pendukung untuk number baca di sini

let nama = "Asrul Harahap";

let firstName = "Asrul";

let nama = "Anis Fikriyyah";

let nama = "Anis Fikriyyah";

let nama = "Anis Fikriyyah";

Perhatikan gambar berikut

let nama = "Asrul Harahap";

let firstName = "Asrul";

let countries = "Asrul, Anis, Tisha, Lan, Rifki";

let nama = " Anies Baswedan ";

let mood = "bahagia";

let punyaCinta = false;

let usia = 25;

Perhatikan tabel berikut

Tabel Assigment Operator

Operator Contoh Penjelasan

-= x -= 1 nilai awal x dikurangkan dengan 1 atau sama artinya dengan x = x - 1

Perhatikan contoh penggunaan assigment operator berikut.

let nilai = 19;

let bil1 = 10;

Tabel Operator Pembanding

Operator Nama Contoh

Perhatikan contoh operator pembanding berikut.

console.log(5 > 1);

Tabel Logika AND

Nilai Kiri Nilai Kanan NIlai Kiri AND Nilai Kanan

false true false

Nilai Kiri Nilai Kanan NIlai Kiri AND Nilai Kanan

console.log(5 > 3 && 10 > 5);

Operator Kenaikan dan Penurunan

let sedangHujan = true;

// hasil: Kamu butuh payung

Referensi untuk operator baca di sini

Perhatikan penggunaan if berikut

let usia = 19;

Perhatikan penggunaan IF-ELSE berikut.