1 of 100

Doyatama Code

Welcome to Doyatama Code

Selamat Datang di channel Doyatama Code - Fullstack Development.

About Doyatama Code

Perkenalkan Saya Dito Cahya Pratama, saya adalah instruktur anda. Sehingga anda bisa menjadi programmer profesional.

Getting Started

Adapun bahan - bahan yang dibutuhkan supaya melancarkan pelatihan anda:

Visual Studio Code - https://code.visualstudio.com/
Telegram Desktop   - https://desktop.telegram.org/
Node JS            - https://nodejs.org/en/
Chrome             - https://www.google.com/chrome/?brand=CHBD&gclid=Cj0KCQjwoaz3BRDnARIsAF1RfLdnIVg2JlQmRVi_kLd_7uWlfoSz9uNvcIOZ32Msk0vzWJUSIqaLNGkaAopqEALw_wcB&gclsrc=aw.ds
Git                - https://git-scm.com/downloads

Perhatian jika anda sudah memiliki program diatas anda bisa melewatinya ke next step :)

Terms and Conditions

Ketentuan-ketentuan yang diharuskan dalam pembelajaran ... :v

Saya siapa ya?

Sebenarnya untuk melatih diri sendiri menjadi PROGRAMMER YANG HANDAL itu sangatlah simple, tidak diperlukan kebutuhan yang muluk-muluk. Asalkan ada niat pasti semuanya tercapai. Meskipun tidak ada basic dalam pemrograman, anda tetap dapat belajar ... sttttt asalkan ada niatan.

Lalu bagaimana dengan skill yang harus saya miliki ?

Bahasa Inggris

Bahasa inggris akan membantumu lebih mudah:

Membaca dokumentasi;
Memahami pesan error;
Bertanya di forum global;
Belajar dari web luar;
Mencari referensi;
dll.

Minimal kamu bisa bebahasa inggris secara pasif, maka sudah bisa menikmati kemudahan di atas. Atau bagi yang kesulitan untuk membaca dokumentasi atau web luar negeri kalian bisa kok mentranslatenya dengan menggunakan fitur yang ada di chrome. Cara nya bagaimana ya ?

Kalian tinggal klik icon translate yang ada di sebelahnya bintang pojok kanan atas pada gambar berikut.

Kemudian anda pilih Indonesia :) Mudah bukan ? eitssss tapi, minimal anda tetap harus bisa berbahasa inggris dikarenakan bahasa hasil dari translate ini sulit untuk dipahami.

Membaca Dokumentasi

Nah, membaca dokumentasi sangatlah sulit. Untuk itu perlu dilakukan latihan setiap harinya supaya terbiasa dengan membaca dokumentasi. Mengapa saya bilang bahwa membaca dokumentasi itu sulit ? karena :

Dikemas dengan bahasa teknis yang membosankan untuk dibaca
Screenshot kurang lengkap (karena pemula butuh screenshot meskipun itu hanya perintah CLI)
Menggunakan bahasa inggris

Lagi - lagi bahasa inggris bukan ?

Oiya sedikit tips nih dari Doyatama Code anda bisa mencari dokumentasi di mesin telusur dengan kata kunci x documentation, x adalah nama teknologinya.

Membaca Source Code

Membaca source code kelihatannya mudah. Iya mudah kalau baca source code yang kita tulis sendiri. Logikanya sudah kita pahami, karena logika berpikir kita sendiri.

Tapi…

Saat membaca source code milik orang lain, nggak paham apa-apa.

Skill membaca source code ternyata skill yang harus dimiliki selain skill menulisnya. Karena kita tidak akan menulis kode sendirian. Akan ada source code dari anggota tim yang lain.

Lalu bagaimana agar bisa membaca source code orang lain?

Ada beberapa tips yang pernah saya dengar:

Baca source code dari bawah ke atas
Baca bagian yang kamu pahami dulu
Baca keterangan pada komentarnya

Debugging

Proses debugging ini bisa jadi lebih lama dari proses menulis kode. Bahkan ada yang sampai berminggu-minggu tidak menemukan sumber masalahnya.

Untuk itu anda harus mampu :

Mamahami maksud pesan error dan masalah lainnya
Mencari di baris ke berapa letak errornya
Analisis penyebabnya
Mengatasi error

Skill Bertanya dan Browsing

Skil bertanya dan browsing merupakan suatu keharusan yang wajib anda miliki. Mengapa ya? Ketika anda tidak tahu atau stuck saat debugging, mau minta bantuan ke mana? ya browsing dulu, kemudian kalau masih tetap stuck bisa tanya ke teman-teman . Untuk itu saya sediakan grup telegram di link ini : https://t.me/doyatama_code untuk tanya-tanya.

Apa yang harus saya hindari ?

Malas mencari tahu

Pengen jalan pintas

Mental gratisan

Learning Site

React Native UI Kekinian

Callicoder

Morioh

Editor Online

Group Telegram Recommended

A list of awesome Indonesia groups related to programming language on Telegram.

List

IOT

DevOps

SQA

Cloud Computing Services

Data PlayGround

Development

Microservice

Microservice Architecture

LINUX

BSD

Laskar Setan Merah - Sharing All About FreeBSD

Mikrotik

Security

Windows

MacOS

Mac OS X ID

iOS

iKaskus

Tentang Telegram

Open Source

DOSCOM - Dinus Open Source Community

Lowongan Kerja

Game Development

Developer Muda Unity

Startup

Science

Geographic Information System and Remote Sensing

Link tersebut diambil dari akun github milik Mr.Hendi Santika, Untuk lebih lengkapnya silahkan cek link berikut ini : https://github.com/hendisantika/List-All-Programming-Telegram-Group

Project

Cek Kata

Pengenalan

Halo semua, project yang akan dibuat pada kesempatan kali ini adalah cek kata. Project ini dibuat dengan menggunakan lumen dan react js.

Video

https://youtu.be/C-2ZjYXqbZo

Feature

Terdapat beberapa fitur yang akan dibuat pada project ini, diantaranya:

Validator
Calculate Time
Tokenize
Stemmer
Levenshtein distance
mysql database
show hint

Siapkan nyali ya kawan-kawan, karena kalian akan mendapatkan ilmu baru !

Validator

Berdasarkan kamus besar bahasa indonesia, validasi adalah 1 pengesahan; 2 pengujian kebenaran atas sesuatu;

Arti validasi secara etimologis berasal dari kata validation yaitu membuktikan sejauh mana ketepatan dan kecermatan suatu alat ukur dalam melakukan fungsi ukurnya.

Calculate Time

Menghitung waktu yang diperlukan ketika menjalankan cek kata.

Tokenize

Tokenizing digunakan untuk memisahkan deretan kata yang ada di dalam kalimat, paragraf atau halaman menjadi token atau potongan kata tunggal. Berikut “dia”, “sedang”, “menulis”. Selain itu tokenizing juga berfungsi membuang tanda baca selain huruf a-z, contoh : !, *, ?, /.

Stemmer

Menghilangkan suatu imbuhan dalam suatu kata untuk menemukan kata dasar.

Levenshtein Distance

Pada teori informasi dan ilmu komputer, Levenshtein Distance merupakan matriks untuk mengukur nilai jumlah perbedaan antara 2 string yaitu string sumber (s) dan string target (t). Nilai Levenshtein Distance antara dua kata merupakan nilai minimum dari pengeditan single-character (yaitu insertion, deletion maupun substitution) membutuhkan perubahan pada salah satu kata.Jarak Levenshtein diperoleh dengan mencari cara termudah untuk mengubah suatu string,

MySQL Database

MySQL adalah sistem manajemen database relasional open source (RDBMS) dengan client-server model. Sedangkan RDBMS merupakan software untuk membuat dan mengelola database berdasarkan pada model relasional.

Membuat Backend

Halo semua, project yang akan dibuat pada kesempatan kali ini adalah cek kata. Project ini dibuat dengan menggunakan lumen dan react js.

Video

https://youtu.be/y8WuXKJr3tA

Install backend lumen (micro framework)

install : composer create-project --prefer-dist laravel/lumen backend

Install sastrawi

Install vendor : composer require sastrawi/sastrawi:^1
Docs : https://github.com/sastrawi/sastrawi

Install CORS

Install CORS : composer require fruitcake/laravel-cors

Settings CORS :

Create config folder
Create cors.php inside config folder

Add this in bootstrap/app.php

  $app->register(Fruitcake\Cors\CorsServiceProvider::class);
  $app->configure('cors');
  $app->middleware([
      Fruitcake\Cors\HandleCors::class,
  ]);

Follow this video

Membuat Frontend

Halo semua, project yang akan dibuat pada kesempatan kali ini adalah cek kata. Project ini dibuat dengan menggunakan lumen dan react js.

Install front end react js

install : npx create-react-app frontend
docs : https://reactjs.org/

Install this package:

axios : https://www.npmjs.com/package/axios
react-router-dom : https://www.npmjs.com/package/react-router-dom
reactstrap : https://reactstrap.github.io/
bootstrap

Cek kata

POST http://localhost:8000/api/v1/cekkata

Path Parameters

Name

Type

Description

Kalimat

string

{
    "message": "success",
    "estimasi": 0.5756261348724365,
    "totalKata": 3,
    "totalKarakter": 14,
    "totalSalah": 1,
    "teksOri": "saya lagi makn",
    "pembenaran": "<span>Saya</span> <span> lagi</span> <select class='spell'><option>makn</option><option>maki</option><option>makna</option><option>man</option><option>maka</option><option>mak</option><option>makan</option><option>makin</option><option>main</option></select>"
}

Follow this video

Training

Java Programming Language

Step 1 - Basic

Dasar Algoritma

Flowchart

Studi Kasus

Variabel, Tipe Data dan Operator

Pemilihan

Pemilihan Bersarang

Perulangan

Perulangan Bersarang

Array 1 Dimensi

Array 2 Dimensi

Fungsi

Fungsi Rekursif

Step 1 Assignment

Step 2 - Data Structure Algorithm

Step 2 - Assignment

React Web Frontend Development

Selamat Datang di channel materi React JS - Web Frontend Development.

Introduction

Training ini dijalankan oleh Doyatama Code. Adapun tujuan diadakan training ini, utamanya sebagai bentuk kontribusi kami kepada bangsa untuk meningkatkan kualitas SDM khususnya di bidang skill programming. Tanpa berpanjang lebar, kami mengucapkan terimakasih atas dukungannya dan selamat menikmati pelatihan dalam gitbook ini.

Di channel ini anda mendapatkan penjelasan materi, tugas, dan info secara satu arah. Jika anda ingin bertanya bisa disampaikan di grup diskusi. Grup diskusi dapat teman-teman klik di link berikut ini : https://t.me/doyatama_code. Dimohon untuk tidak membahas bahasan jauh diluar materi training di grup diskusi.

Step 1 - Basic Javascript

JavaScript Dasar untuk React – Variable, Object & Scope

Sebelum kita membahas mengenai React, kita perlu belajar terlebih dahulu bahasa pemrograman yang digunakan di React, yaitu JavaScript.

Apa itu Javascript ?

Bagi yang masih awam, tentu akan bertanya-tanya, apa itu JavaScript? JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:

HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.
CSS: Menentukan layout, style, serta keselarasan halaman website.
JavaScript: Menyempurnakan tampilan dan sistem halaman web.

JavaScript dapat dengan cepat dan mudah serta digunakan untuk berbagai tujuan, mulai dari meningkatkan fungsionalitas website hingga mengaktifkan permainan (games) dan software berbasis web. Selain itu, terdapat ribuan template dan aplikasi JavaScript yang bisa Anda gunakan secara gratis dan semuanya ini berkat beberapa situs, seperti Github.

Pada kali ini kita akan mempelajari mengenai:

Variable
Object
Scope

Oke langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengkses materi di link video berikut ini :

source code pada video tersebut dapat teman-teman akses di link github berikut ini :

Untuk membuka source code tersebut di Visual Studio Code, teman-teman pastikan sudah menginstall Visual Studio Code terlebih dahulu lalu membuka programnya.

Setelah itu klik Open Folder seperti pada gambar di bawah ini

Lalu terlebih dahulu extract file zip yang teman-teman download dari link github, dan pilih folder hasil dari extract tersebut, seperti pada gambar di bawah ini

Maka akhirnya teman-teman akan mendapatkan hasil seperti ini

Lalu, teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools, caranya sudah disampaikan pada video.

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi:

[Basic JavaScript]
[Grammar & Types di JavaScript]
[JavaScript Bahasa Paling Populer]
[JavaScript vs Python, mana lebih populer?]

JavaScript Dasar untuk React – “this” keyword

Pada materi sebelumnya, kita sudah belajar mengenai variable, object, dan scope. Dan pada kali ini, kita akan fokus mempelajari konsep “this” dan juga Arrow Function

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 2 video ini, pertama untuk konsep “this” dan kedua untuk Arrow Function

Konsep "this"

Arrow Function

source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :

Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.

Referensi:

[Grammar & Types di JavaScript]
[“this”]
[“this”]
[Arrow Function]
[Arrow Function]

JavaScript Dasar untuk React – Array methods

Pada materi sebelumnya, kita sudah belajar mengenai variable, object, scope, “this”, dan arrow function.

Dan pada kali ini, kita akan fokus mempelajari array methods, object destructuring, dan spread operator.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 3 video ini, pertama untuk array methods, kedua untuk object destructuring, dan ketiga untuk spread operator

Array Method

Object Destructing

Spread Operator

source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :

Referensi:

[Array] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
[Array] https://www.w3schools.com/jsref/jsref_obj_array.asp
[Array] https://www.w3schools.com/js/js_arrays.asp
[Object Destructuring] https://javascript.info/destructuring-assignment
[Spread Operator] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

JavaScript Dasar untuk React – Class & Module

Pada materi sebelumnya, kita sudah belajar banyak mengenai object dan fundamental lainnya di JavaScript. Dan pada kali ini, kita akan fokus mempelajari class, inheritance, modules dan named export.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 4 video ini, pertama untuk class, kedua untuk inheritance, ketiga untuk modules, dan keempat untuk named export

Classes

Inheritance

Modules

Named Export

source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :

Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.

Referensi

[Class] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
[Class] https://javascript.info/class
[Modules] https://javascript.info/modules
[Export Import] https://javascript.info/import-export
[Artikel Medium mengenai Modules] https://medium.com/@timoxley/named-exports-as-the-default-export-api-670b1b554f65

HTML Dasar untuk React

Pada materi sebelumnya, kita sudah belajar banyak mengenai fundamental-fundamental yang ada di JavaScript.

Dan pada kali ini, kita akan mempelajari hal lain yang dibutuhkan knowledge-nya di React, yaitu HTML.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 1 video ini, yaitu pengenalan HTML

Pengenalan HTML

Referensi

[HTML basic]
[HTML element]
[HTML basic]
[HTML fundamentals]

Step 1 - Assignment

Assignment - JavaScript Dasar untuk React - Variable, Object & Scope

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu javascipt dasar untuk react seperti variable, object dan scope.

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Pada code di bawah ini terdapat sebuah object “sebuahObject” yang memiliki elemen sebuah fungsi, tuliskan code Anda untuk membuat console mengeluarkan log “Hai Dunia Kucing!!” dengan mengakses fungsi tersebut ? Jelaksan!

const sebuahObject = {
    fungsi: () => {
        console.log('Hai Dunia Kucing!!')
    }
}

Question 2

Perhatikan code di bawah ini.

let sebuahVariabel = 'apple'
let sebuahVariabel = 'orange' // SyntaxError: Identifier 'sebuahVariabel ' has already been declared
console.log(sebuahVariabel)

Pada line kedua code di atas akan memunculkan error bahwa variabel “sebuahVariabel ” sudah dideklarasikan dengan let, tidak dapat dideklarasikan kembali.

var sebuahVariabel = 'apple'
var sebuahVariabel = 'orange'
console.log(sebuahVariabel)

Namun, jelaskan kenapa ketika kita ganti let dengan var seperti code di atas ini, tidak ada error yang terjadi!

Question 3

Jelaskan, jika memang const membuat sebuah variable tidak bisa di-assign kembali valuenya, kenapa pada code di bawah ini, masih tetap berlaku ?

const sebuahVariabel  = {}
sebuahVariabel.color = 'red'

Question 4

Pada code di bawah ini, kenapa console memberikan output undefined ?

var haloHalo = 1
var haloHaloBandung = function() {
  console.log(haloHalo)
  var haloHalo = 2
}
haloHaloBandung()

Referensi

[Hoisting] https://scotch.io/tutorials/understanding-hoisting-in-javascript
[Deep equal] https://www.mattzeunert.com/2016/01/28/javascript-deep-equal.html
[Deep equal] https://www.w3schools.com/nodejs/met_assert_deepequal.asp

Assignment - JavaScript Dasar untuk React - "this" keyword

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu javascipt dasar untuk react tentang "this" keyword.

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Jelaskan istilah dari this di JavaScript!

Question 2

Ubahlah beberapa function dibawah ini ke bentuk arrow function

function getNamaLengkap(namaDepan, namaBelakang) {
   return `${namaDepan} ${namaBelakang}`;
}
 
function getNamaDepan(namaLengkap) {
   return namaLengkap.split(' ')[0];
}
 
function consoleHai() {
   console.log('hai');
}

Question 3

Di bawah ini, jika kita memanggil fungsi getName yang ada di object sebuahObject, maka kita berhasil mendapatkan outputnya. Namun, jika kita memanggil fungsi getName yang ada di object sebuahObjectLain, maka kita akan mendapatkan output undefined. Apa yang salah dari object sebuahObjectLain ? dan bagaimana cara memperbaikinya ? Jelaskan!

const sebuahObject = {
   name: 'Bejo Jhonson',
   getName() {
       return this.name;
   }
}
 
const sebuahObjectLain = {
   name: 'Bejo Jhonson',
   getName: () => this.name
}

Soal 4

Dapatkah code dibawah ini berjalan dengan benar ? Jelaskan apa yang terjadi!

const profil = {
   namaDepan: 'Bejo',
   namaBelakang: 'Jhonson',
   getName() {
       this.name = `${this.namaDepan} ${this.namaBelakang}`;
       return this.name;
   }
}

profil.getName();

Assignment - JavaScript Dasar untuk React - Array methods

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari javascipt dasar untuk react tentang array methods.

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Gabungkan atau merge 4 array berikut ini. Buat banyak strategi yang berbeda untuk menggabungkannya. Urutkan mana yang lebih efesien! [bukan hanya waktu, tetapi semua segi apapun] Mengapa bisa begitu ?

const arraySatu = [1, 2, 3, 4];
const arrayDua = [5, 6, 7, 8];
const arrayTiga = [9, 10, 11, 12];
const arrayEmpat = [13, 14, 15, 16];

Question 2

Berdasarkan materi dari video, gunakan Object Destructuring untuk mengambil semua properti di dalam object berikut ini dengan diberi alias huruf depan-nya.

const objectBebas = {
   aspal: 'hitam',
   roket: 'meluncur',
   joker: 'villain',
   unta: 'arab',
   ninja: 'hatori'
}

Question 3

Filter array berikut untuk isAllowed yang bernilai true. Lalu tampung ke variabel bejoJuaraNasional

const unfilteredArray = [
   {
       name: 'Bejo',
       isAllowed: true
   },
   {
       name: 'Jhonson',
       isAllowed: false
   },
   {
       name: 'Juara',
       isAllowed: true
   },
   {
       name: 'Panco',
       isAllowed: false
   },
   {
       name: 'Nasional',
       isAllowed: true
   }
]

Assignment - JavaScript Dasar untuk React - Class & Module

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari javascipt dasar untuk react tentang Class & Module

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Ubahlah object-object berikut menjadi class. Dan setelah itu, untuk class Benda, buat object yang instansiasinya dari class Benda, dengan properti object persis dengan halGhaibLain. Dan juga buat class baru yang inherit dengan class Benda, dengan menambahkan property “dasar” dan juga method actionLain yang memunculkan console log “Ini action lain”.

const makhlukGhaib = {
   nama: 'Pocong',
   kekuatan: 'Terbang',
   attack() {
       console.log('Senyum');
   }
};
 
const benda = {
   nama: 'kompor',
   bahan: 'besi',
   actionName: 'Memanaskan',
   action() {
       console.log(this.actionName);
   }
};
 
const halGhaibLain = {
   nama: 'cinta',
   bahan: 'perjuangan bersama',
   actionName: 'Membara',
   action() {
       console.log(this.actionName);
   }
};

Question 2

Import named export berikut ini dengan alias AliasNamed.

 // Anda sedang berada di satu directory dengan nama file contoh.js
 export class NamedExport {
     constructor(test){
         this.test = test;
     }
 }

Question 3

Dapatkah kita mengimport suatu module dari luar project directory ? Lalu apa pengaruhnya untuk saat production ?

Question 4

Pada code di bawah ini, lakukan export suatu function tersebut menjadi export default dengan tanpa mengubah sedikit pun code pada function tersebut (note: Anda dapat menambahkan/mengubah code diatas atau dibawah function, namun bukan pada function, meski hanya mengubah nama function).

function helloCat() {
   alert('Hello Cat !!');
}

Question 5

Berikut ini terdapat sebuah module yang di-export dengan default. Lakukan import pada module ini dengan menjadikannya named pada proses import nya. Catatan: Anda sedang berada di directory yang sama dengan file user.js

// folder berada di user.js
export default class User {
   constructor(name) {
       this.name = name;
   }
}

Assignment - HTML Dasar untuk React

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari HTML Dasar untuk React

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Buatlah HTML code untuk desain halaman sebagai berikut. Dimana terdapat icon dan title pada tab bar. (untuk icon, Anda boleh bebas mencari free image di internet)

Question 2

Buatlah HTML code untuk desain form sebagai berikut. (harus sama persis). Catatan: field name adalah text, field Delivery Date adalah date, field Address adalah textarea, dan field Quantity adalah number.

Question 3

Buatlah javascript code berikut ini dengan nama file hello.js, lalu masukkan code tersebut kedalam HTML code dan panggil fungsi hello via tag script lain.

function hello() {
    alert('Hello....');
}

Step 2 - Going to React JS

Introduction to React JS

Pada materi-materi sebelumnya, kita sudah belajar banyak mengenai fundamental-fundamental yang ada di JavaScript dan juga basic HTML. Dan pada kali ini, kita mulai masuk mempelajari React.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Pengenalan ReactImperative vs DeclarativeEmbed React ke HTMLCreate React App (CRA) Framework

Pengenalan React

Imperative vs Declarative

Embed React ke HTML

Create React App (CRA) Framework

Referensi

[Node] https://nodejs.org/en/download/
[React Docs] https://reactjs.org/docs/getting-started.html
[Embed React to HTML] https://meda.io/embed-react-into-an-html-web-page/
[CDN Babel] https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js
[CDN React DOM] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js
[CDN React] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js

Components & Props

Pada materi sebelumnya, kita sudah mengenal sedikit mengenai React. Dan pada kali ini, kita mulai mendalami mempelajari React, yaitu mempelajari dua hal, Component dan Props

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Props, Function dan Class ComponentComposing, Extracting, Fragment, dan Spread Operator pada Props

Props, Function dan Class Component

Composing, Extracting, Fragment, dan Spread Operator pada Props

Referensi

[Component & Props] https://reactjs.org/docs/components-and-props.html
[Fragment] https://reactjs.org/docs/fragments.html

State & LifeCycle

Pada materi sebelumnya, kita sudah mempelajari Component dan Props. Dan pada kali ini, kita mulai mendalami mempelajari React, yaitu mempelajari dua hal, State & LifeCycle

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Konsep State dan Virtual DOMLifeCycle Method

Konsep State dan Virtual DOM

Referensi

[LifeCycle Diagram] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
[State] https://reactjs.org/docs/state-and-lifecycle.html
[Component & LifeCycle] https://reactjs.org/docs/react-component.html
[Virtual DOM] https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq
[Reconciliation] https://reactjs.org/docs/reconciliation.html

Lists & Forms

Konsep “Lifting State Up”

Step 2 - Assignment

Assignment - Introduction to React JS

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang introduction to React JS

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Buatlah page seperti desain berikut menggunakan React yang digunakan di HTML teman-teman, catatan bahwa ini hanya menambahkan CDN saja, tidak menggunakan tool chain atau framework seperti CRA (Create React App), dan lain sebagainya. (poin plus jika teman-teman mengimplementasikan JSX)

Question 2

Buatlah page seperti desain berikut menggunakan framework CRA (Create React App).

Referensi

[CDN Babel] https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js
[CDN React DOM] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js
[CDN React] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js

Assignment - Components & Props

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang components & props

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Jelaskan konsep dari Component dan Props dengan bahasa Anda sendiri !

Question 2

Jelaskan secara detail maksud dari “Props itu read-only”!

Question 3

Gunakan metoda compose component untuk component Welcome ke component App di dalam div.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}
 
function App() {
 return (
   <div>
    
   </div>
 );
}
 
ReactDOM.render(
 <App />,
 document.getElementById('root')
);

Question 4

Gunakan metoda extracting component untuk component yang di-wrap oleh elemen div UserInfo, dengan props author dari data props.author dari component Comment.

function Comment(props) {
 return (
   <div className="Comment">
     <div className="UserInfo">
       <img className="Avatar"
         src={props.author.avatarUrl}
         alt={props.author.name}
       />
       <div className="UserInfo-name">
         {props.author.name}
       </div>
     </div>
     <div className="Comment-text">
       {props.text}
     </div>
     <div className="Comment-date">
       {formatDate(props.date)}
     </div>
   </div>
 );
}

Question 5

Apa yang salah dari component di bawah ini ? Jelaskan apa yang terjadi! Dan bagaimana cara solvingnya jika error ?

function Comment(props) {
 return (
     <div className="UserInfo">
       <img className="Avatar"
         src={props.author.avatarUrl}
         alt={props.author.name}
       />
       <div className="UserInfo-name">
         {props.author.name}
       </div>
     </div>
     <div className="Comment-text">
       {props.text}
     </div>
     <div className="Comment-date">
       {formatDate(props.date)}
     </div>
 );
}

Assignment - State & LifeCycle

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang state & lifecycle

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Jelaskan konsep dari State dan aturan mainnya dengan bahasa Anda sendiri !

Question 2

Jelaskan perbedaan antara Props dan State !

Question 3

Dapatkah kita memanipulasi state seperti ini ? Lalu bagaimana caranya untuk solving-nya ?

Question 4

Jelaskan secara detail cara kerja Virtual DOM di React !

Question 5

Jelaskan urutan lifecycle, dan sebutkan proses yang terjadi di setiap fasenya !

Question 6

Dapatkah kita memanipulasi state di constructor ? Jelaskan apa yang terjadi jika kita memanipulasi state dan/atau melakukan side effect di constructor !

Step 3 - Going to Redux

Bagaimana Berpikir di React

Hooks & Context

React Router

Redux & React-Redux

Redux Middleware menggunakan Redux-Thunk

Step 3 - Assignment

Step 4 - Deploy and Make Final Project

Testing menggunakan Jest & RTL

Deployment

Final Project – Mocking

Final Project – Static Version

Final Project – Interactive Version & Deploy

Step 4 - Assignment

Big Project -

Laravel Web Development

Selamat Datang di channel materi Laravel - Web Development.

Introduction

Step 1 - Basic Web Programming

Berkenalan dengan HTML

Apa itu HTML ??

HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah sebuah bahasa standar untuk pembuatan halaman web. Dengan adanya HTML, kita dapat membedakan struktur yang tersusun dari sebuah halaman melalui tag atau elemen-elemen penyusunnya.

Elemen atau tag pada HTML dikenali oleh browser seperti google chrome, firefox atau Ms Edge, dll. Browser tersebut mengidentifikasi setiap elemen penyusun HTML dan ditampilkan sesuai karakteristik elemen tersebut. Contohnya sebuah elemen paragraph akan ditampilkan sebagai tulisan panjang, atau sebuah elemen pranala/link akan dicetak dengan warna biru dan ketika mouse mendekat kursornya berubah menjadi telunjuk, dsb.

Contoh sebuah halaman HTML sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Dari contoh di atas kita dapat mengidentifikasi elemen-elemen nya seperti berikut

element <!DOCTYPE html> mengartikan bahwa dokumen ditulis dengan versi HTML5
elemen <html> adalah elemen induk atau elemen utama yang sering disebut juga root element dari sebuah halaman HTML.
elemen <head> berisi informasi tentang halaman HTML yang sedang dibuat
elemen <title> adalah judul dari halaman HTML yang akan tampil di tab browser.

Elemen pada HTML

Elemen atau sering disebut dengan tag pada HTML adalah penyusun dari sebuah halaman web yang dapat dikenali oleh browser dan ditampilkan oleh browser sesuai karakteristik masing-masing.

Sebuah elemen HTML terdiri dari tag pembuka(start/open tag), atribut (attribute), isi (content), dan tag penutup(close tag).

Pada ilustrasi di atas merupakan sebuah elemen paragraph dibuka dengan tag pembuka <p> . Di dalam tag pembuka tersebut terdapat atribut class yang disematkan ke dalam tag. Isi atau content dari sebuah tag paragraph <p> akan ditampilkan sebagai paragraf. lalu terakhir sebuah tag ditutup dengan sebuah tag penutup.

catatan

Tidak semua elemen HTML memiliki tag penutup seperti <input> <img> <meta> .

Elemen di dalam elemen (nested element)

sebuah elemen HTML dapat terisi dengan elemen-elemen lain di dalamnya. Semua dokumen HTML yang kita lihat di halaman web terdiri dari kumpulan elemen bersarang atau elemen yang mengandung elemen lain di dalamnya.

Contohnya halaman berikut:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Pada contoh di atas elemen <html> adalah root element dan merupakan elemen utama di dokument HTML. elemen tersebut dibuka dengan tag pembuka <html> dan ditutup dengan </html>. Lalu di dalam elemen <html> terdapat elemen <body> . elemen <body> merupakan elemen yang akan ditampilkan ke halaman web yang diawali dengan tag pembuka <body> dan ditutup dengan sebuah tag penutup </body> , dan seterusnya sehingga terciptalah sebuah halaman web yang utuh.

Heading HTML

Heading Pada HTML berfungsi untuk membuat judul atau subtitle pada tampilan website

List HTML

Terdapat 2 jenis list di HTML yaitu Unordered dan Ordered

HTML Input Types

Beberapa Input type yang bisa di gunakan di HTML:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Input Form HTML

Dropdown

Berfungsi untuk menampilkan dropdown list kedalam tampilan website

Textarea

Berfungsi Membuat inputan yang jauh lebih lebar

attribute cols untuk lebar nilai kolom dari inputan dan attribute rows untuk besar nilai baris dari inputan

Link Download Text Editor

Visual Studio Code : https://code.visualstudio.com/download
Atom : https://atom.io/
Sublime Text : https://www.sublimetext.com/download

* pilih salah satu

Referensi lain :

Belajar HTML dari Dasar oleh Sekolah Koding: https://www.youtube.com/playlist?list=PLCZlgfAG0GXC9ojTmU95BRefbJoi4clY-

sumber
tulisan ini disarikan dari halaman dokumentasi W3schools : https://www.w3schools.com/html/default.asp

CSS Basic to Ninja

CSS Bootstrap

Introduction Javascript

Dom JavaScript

Step 1 - Assignment

Step 2 - Materials

Step 2 - Assignment

Step 3 - Materials

Step 3 - Assignment

Step 4 - Materials

Step 4 - Assignment

Big Project

React Native Mobile Apps Development

Selamat Datang di channel materi React Native - Mobile Apps Development.

Introduction

Step 1 - Basic

Command Line

Sebelum kita membahas mengenai React Native, kita perlu belajar terlebih dahulu basic dari CLI atau biasa disebut dengan Command Line.

Apa itu CLI / Command Line Interface

CLI adalah singkatan dari Command Line Interface.

CLI adalah program yang memungkinkan pengguna mengetik perintah teks yang memerintahkan komputer untuk melakukan tugas tertentu.

Meskipun begitu kuat, penggunaan CLI tidak selalu diterima dengan baik. Pemula enggan menggunakannya, berpikir bahwa CLI hanya untuk pengguna tingkat lanjut. Sebenarnya tidak demikian.

Saat ini penerapan CLI (command line interface) di komputer personal sudah sangat jarang. Alasannya karena banyak pengguna yang memilih untuk menggunakan GUI (graphic user interface) sebagai penghubung ia dengan sistem komputer.

Karena komputer dengan Interface CLI sebenarnya sering digunakan oleh pengguna profesional untuk melakukan tugas komputer tertentu tertentu misalnya untuk mengelola & mengurus server jaringan, hosting web, administrasi, keamanan dan sebagainya. Bahkan CLI merupakan sistem andalan milik hacker

Berikut ini beberapa contohnya :

Menuju folder / direktori tertentu

Untuk menuju folder atau direktori tertentu bisa gunakan perintah cd atau kepanjangan dari change directory

Mengetahui alamat dari direktori yang sedang dibuka

Terkadang kita butuh tahu sedang dimana posisi terminal kita berjalan. Perintah untuk fungsi ini yaitu pwd atau kependekan dari path of working directory

Mengetahui daftar isi dari sebuah direktori/folder

Anda bisa gunakan perintah ls atau dir . contohnya sebagai berikut

Membuat folder baru

Perintahnya adalah mkdir atau singkatan dari make directory. contohnya sebagai berikut

Membuat file baru

Gunakan perintah touch untuk membuat file baru

Software terminal / command line yang direkomendasikan

Untuk OS Windows, terminal bawaannya adalah command prompt atau cmd yang relatif kurang nyaman untuk dipakai dalam tahap development. Oleh karena itu direkomendasikan untuk install terminal di bawah ini agar lebih optimal dalam mengerjakan project.

Cmder, link download:
Git bash, Git bash biasanya ter-install jika kita meng-install git di pc/laptop kita.

Git

Bab ini akan membahas tentang memulai dengan Git. Kita akan mulai dengan menjelaskan beberapa latar belakang pada peralatan versi kontrol ,

Apa itu versi kontrol ?

Apa itu versi kontrol dan apakah penting? versi kontrol adalah suatu sistem yang mengubah-perubahan dari suatu file atau sekumpulan file dari waktu ke waktu sehingga Anda dapat menilik versi khusus dari suatu saat nanti. Sebagai contoh, pada buku ini Anda akan menggunakan sumber kode perangkat lunak untuk file-file yang mendukung dengan versi kontrol , walau pada persetujuan Anda dapat melakukan ini dengan semua jenis file pada komputer.

Untuk lebih jelasnya anda dapat mengecek pada web berikut ini :

Membuat project Git dan mengelolanya

Pada sesi react native ini kita akan menggunakan Gitlab sebagai version control nya. Mari ikuti step-stepnya.

Pastikan telah terinstall git di komputer anda, jika belum silahkan anda install git terlebih dahulu pada link berikut ini

Untuk cara installasinya anda dapat mengecek pada link berikut ini :

Jika sudah menginstall git, yuk..... saatnya lanjut ke step selanjutnya.

Membuat Repository Baru

Repository atau repo di Gitlab biasa disebut dengan project. So, berikut langkah-langkah untuk membuat repository baru:

Setelah login anda akan menuju halaman Projects yang berisi semua repository yang anda miliki. Jika Anda user baru maka belum ada repository yang tersedia. Di halaman tersebut anda akan melihat tombol New Project di sebelah kanan atas. Klik tombol tersebut.
Pada halaman membuat project baru, isi kolom project-name dengan nama yang Anda inginkan, misalkan: my first repo.
Pada kolom visibility level Anda akan melihat tiga pilihan yaitu Private, Internal, dan Public. Private artinya repo yang akan kita buat bersifat rahasia, hanya Anda dan orang yang Anda beri akses saja yang bisa membukanya. Sedangkan pilihan Internal berarti repo Anda akan dapat dilihat oleh semua user Gitlab. Pilihan “Public” berarti repo Anda akan terlihat oleh orang dari mana saja walaupun dia tidak memiliki akun gitlab. Pilih yang sesuai kebutuhan misalkan : Public.
Di bagian bawahnya terdapat pilihan checkbox “Initialize repository with a README”. Centang saja jika anda ingin langsung clone repository nya setelah dibuat.
Jika berhasil maka Anda akan diarahkan menuju halaman project atau repo yang telah dibuat. Jika sebelumnya kita centang “Initialize repository with a README” maka repository kita akan berisi file README.md.
Pada Bagian kanan atas terdapat tombol clone. Ketika diklik maka akan keluar dua pilihan “Clone with SSH” dan “Clone with HTTPS”. Pilih saja clone dengan HTTPS. Klik tombol salin/copy supaya langsung otomatis tercopy pada clipboard. Jika ingin clone dengan SSH maka anda harus setting dulu akun anda agar terhubung dengan komputer Anda.
Setelah itu menuju ke terminal atau cmd. Arahkan menuju folder dimana anda ingin menyimpan repository yang sudah Anda buat. Berikan perintah git clone <link_anda_yang_barusan_dicopy> (tanda <> hanyalah sebagai penanda template tidak usah ditulis di perintah cmd)
```
$ git clone <your_repository_link_url>
```
Jika sudah berhasil diclone maka akan ditemukan folder dengan nama repository di Gitlab. Cara mengeceknya dengan perintah “ls” atau “dir”.
```
$ ls
my-first-repo   
```

Mengupload perubahan project dengan git push

Ketika kita sudah berhasil clone repository kita di Gitlab maka tentu kita ingin melakukan update atau penambahan code pada project kita. Agar perbaruan yang kita simpan di local (komputer) kita dapat kita perbaharui juga di repository Gitlab maka kita bisa lakukan dengan git push. Berikut langkah-langkahnya:

Ketika kita sudah memberikan perubahan terhadap suatu file atau membuat folder-folder baru pada folder project kita maka cara mengecek status perbaruan adalah dengan git status

$ git status
On branch master
Your branch is up to date with 'origin/master'.
 
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)
 
 modified:   README.md
 
no changes added to commit (use "git add" and/or "git commit -a")

Setelah git status maka akan ditampilkan list file yang “modified” atau “untracked”. “modified” artinya adalah kita mengubah file yang sebelumnya ada sedangkan “untracked” artinya file tersebut sama sekali baru di repository. Dalam contoh di atas terdapat perubahan pada file “README.md”.
Untuk menaikkan perubahan (stage) yang kita buat maka berikan perintah git add

$ git add README.md

// Jika ada terdapat banyak file dan kita ingin naikkan semuanya maka perintahnya: 
$ git add .

Sekarang perubahan tadi sudah pada tahap “staged”. jika kita cek status nya lagi maka akan didapati berbeda:

$ git status 
On branch master
Your branch is up to date with 'origin/master'.
 
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)
 
 modified:   README.md

Selanjutnya adalah memberikan laporan atau commit terhadap perubahan yang kita buat dengan git commit.

 $ git commit -m "Pesan saya: Mengubah README.md"

tanda “-m” pada perintah commit artinya kita ingin memberikan pesan atau laporan terhadap perubahan yang sudah dibuat. Dalam hal ini laporannya adalah “Pesan saya: mengubah README.md”
Selanjutnya adalah push untuk mengirim /upload perubahan yang ada di local computer kita menuju repository yang ada di Gitlab. Jika kita berada di branch bernama master maka perintahnya adalah:

$ git push origin master

Jika branch yang sedang kita miliki di local adalah branch lain selain master maka cara push nya adalah

$ git push origin <nama_branch>

Jika langkah tersebut sudah maka kita sudah berhasil mengupload perubahan yang kita buat di repository kita. 🥂

Git branch dan merge request

Membuat branch baru dan melakukan merge request

Clone repository

Terlebih dahulu lakukan clone terhadap repository project.

$ git clone https://gitlab.com/some-project 
$ cd some-project

Catatan: Link https di atas hanyalah contoh link dari sebuah repository. Link https tersebut bisa diperoleh di halaman gitlab pada bagian clone.

Buat branch baru

Setelah di-clone dan masuk ke folder project nya, buatlah branch baru . (myname hanyalah contoh nama branch, kita bisa mengubah sesuai nama yang diinginkan)

$ git branch myname
$ git checkout myname

maka sekarang kita sudah berada di branch baru dan dapat mulai melakukan pekerjaan kita.

Catatan:
myname hanya contoh , silakan sesuaikan sendiri nama branch masing-masing.

Push ke branch

Setelah pekerjaan selesai, kita akan melakukan upload atau push ke branch kita sendiri.

$ git add . 
$ git commit -m "some message"// push ke branch 
$ git push origin myname

Catatan:
"some message" hanyalah contoh pesan atau komentar pada sebuah commit. Silahkan isi dengan jenis update yang dikerjakan.

Membuat merge request

Setelah melakukan push ke branch sendiri maka selanjutnya melakukan merge request.

Secara default pada halaman project akan tersedia tombol “create merge request”.

Jika tombol tersebut tersedia, klik tombol tersebut untuk menuju halaman merge request.

Pada halaman merge request isilah kolom title dengan pesan commit atau laporan progress pekerjaan misalkan : done, work in progress atau WIP, dsb.

Setelah itu, klik submit merge request maka pekerjaan kita sudah disubmit ke merge request dan akan direview oleh pengelola project.

Selengkapnya kamu bisa ikuti juga video tutorial berikut ini:

Javascript – Intro

Pada materi sebelumnya, kita sudah belajar mengenai CLI dan Git. Dan pada kali ini, kita akan fokus mempelajari konsep Javascript

Javascript merupakan salah satu bahasa pemrograman yang terpopuler di dunia. Javascript membuat aplikasi web menjadi interaktif tanpa reload halaman. Hampir semua browser modern yang kita ketahui dapat menjalankan javascript agar website yang ditampilkan lebih menarik.

Menjalankan Javascript

Ada bermacam cara untuk menjalankan kode javascript yang kita buat, di antaranya:

Menjalankan javascript di console browser
Menjalankan javascript di tools online seperti repl.it
Menjalankan javascript dengan nodejs

Pada materi ini kita akan mencoba untuk menjalankan script dengan nodejs.

Nodejs adalah software berbasis pemrograman javascript yang dijalankan di sisi server. Jika biasanya javascript kita kenal erat kaitannya dengan client/browser tapi dengan nodejs ini kita bisa membangun server menggunakan bahasa javascript.

Install Nodejs

Pertama-tama tentu kita harus menginstall terlebih dahulu nodejs di komputer kita. Berikut ini link untuk download nodejs (disarankan memilih versi LTS). Untuk OS Windows dan macOs tinggal diikuti saja instalasinya sampai selesai, sedangkan untuk Ubuntu 18.04 kamu bisa install mengikuti tutorial dari digitalocean.

Untuk mengecek apakah instalasi nodejs sudah berhasil kita bisa jalankan script di terminal kita:

$ node -v 
v10.16.1
$ npm -v 
6.9.0

dengan perintah tersebut, diketahui saat ini terinstall node dengan versi 10 dan npm versi 6.

Hello world

Untuk menjalankan javascript dengan nodejs mari kita coba dengan menuliskan script di sebuah file index.js .

Buatlah file dengan nama index.js kemudian tulis code di dalam file tersebut seperti berikut:

var sayHello = "Hello World!" 
console.log(sayHello)

kemudian simpan file tersebut (save). Setelah itu kita bisa menjalankan script pada index.js tersebut dengan memberikan perintah seperti berikut pada terminal:

$ node index.js

secara otomatis pada terminal kita akan muncul “Hello World!” . (Selamat Anda telah berhasil menjalankan program pertama Anda 😁)

Demikian cara untuk menjalankan Javascript dengan nodejs.

Data Type

Data Type atau dalam bahasa indonesia Tipe Data adalah sekumpulan informasi yang memiliki nilai dan karakteristik tertentu. Beberapa contoh tipe data pada javascript di antaranya:

Number : tipe data angka
String : tipe data berupa text atau kumpulan karakter, biasanya string dibungkus dalam tanda petik ganda (double quote) atau tanda petik tunggal (single quote).
Boolean: tipe data dengan nilai true atau false

Variable

Variable adalah suatu blok data untuk menampung sekumpulan data dengan berbagai tipe data apapun. Dengan variable kita bisa menyimpan suatu nilai untuk kemudian kita olah kembali pada program kita. Untuk deklarasi variable dalam javascript kita bisa gunakan sintaks var lalu diikuti nama variablenya.

var name = "John" // Tipe
var angka = 12
var todayIsFriday = false 

console.log(name) // "John"
console.log(angka) // 12
console.log(todayIsFriday) // false

Waspadai pendeklarasian variable yang tidak bernilai !

var items
console.log(items) // Undefined

Operator

Operator adalah karakter khusus yang merepresentasikan sebuah tindakan. Operator terbagi ke dalam beberapa jenis:

Operator Aritmatika Operator yang melibatkan operasi matematika seperti tambah, kurang, kali, bagi.
- Tambah (+)
- Kurang (–)
- Kali (*)
- Bagi (/)
- Modulus (%) Modulus adalah sisa bagi. Contohnya 5%3 hasilnya adalah 2, 100%5 hasilnya 0.
Operator Assignment (=), Operator untuk mendaftarkan atau meng-assign suatu nilai ke dalam suatu variable
```
var angka 
angka = 10 // Contoh assignment variable angka dengan nilai 10
```

Operator Perbandingan, Operator yang membandingkan suatu nilai dengan nilai yang lain. Hasil dari perbandingan ini akan dikembalikan dalam tipe data boolean true atau false.

Equal Operator (==)

var angka = 100
console.log(angka == 100) // true
console.log(angka == 20) // false

Not Equal ( != )

var sifat = "rajin"
console.log(sifat != "malas") // true
console.log(sifat != "bandel") //true

Strict Equal ( === ) Selain membandingkan dua nilai nya, strict equal juga membandingkan tipe datanya apakah sama atau tidak

var angka = 8
console.log(angka == "8") // true, padahal "8" adalah string.
console.log(angka === "8") // false, karena tipe data nya berbeda
console.log(angka === 8) // true

Strict not Equal ( !== ) Kebalikan dari strict equal.

var angka = 11
console.log(angka != "11") // false, padahal "11" adalah string
console.log(angka !== "11") // true, karena tipe datanya berbeda
console.log(angka !== 11) // false

Kurang dari & Lebih Dari ( <, >, <=, >=)

var number = 17
console.log( number < 20 ) // true
console.log( number > 17 ) // false
console.log( number >= 17 ) // true, karena terdapat sama dengan
console.log( number <= 20 ) // true

Operator Kondisional, Operator yang mengkombinasikan dua nilai kebenaran . Terdapat operator AND (&&) dan OR (||)

OR ( || )

console.log(true || true); // true
console.log(true || false); // true
console.log(true || false || false); // true
console.log(false || false); // false

AND ( && )

console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
console.log(false && true && true); // false
console.log(true && true && true); // true

Javascript – String Properties & Method

String adalah tipe data yang berisi karakter-karakter dibungkus dalam tanda petik ("" atau '' ). Karakter-karakter pada suatu string dapat diakses dengan menggunakan indeks atau posisi karakter berada. Indeks pada string selalu mulai dari 0.

var sentences = "Javascript" 
console.log(sentences[0]) // "J"
console.log(sentences[2]) // "v"

String pada javascript juga memiliki property dan methods tertentu. Property dan methods tersebut bisa kita gunakan dalam memanipulasi data agar sesuai dengan program yang kita inginkan.

String Properties

.length mengembalikan panjang atau jumlah karakter pada suatu string.

var word = "Javascript is awesome"
console.log(word.length) // 21

String Methods

.charAt([indeks])

Mengembalikan karakter pada indeks yang diinginkan

console.log('i am a string'.charAt(3)); // 'm'

.concat([string])

Menggabungkan beberapa string dan mengembalikannya menjadi string baru.

var string1 = 'good';
var string2 = 'luck';
console.log(string1.concat(string2)); // goodluck

.indexOf([string/karakter])

Mengembalikan indeks dari string/karakter yang dicari, yang pertama kali ditemukan, atau -1 apabila tidak ditemukan.

var text = 'dung dung ces!';
console.log(text.indexOf('dung'));  // 0
console.log(text.indexOf('u'));     // 1
console.log(text.indexOf('jreng')); // -1

.substring([indeks awal], [indeks akhir (optional)])

Mengembalikan potongan string mulai dari indeks pada parameter pertama (indeks awal) sampai dengan indeks pada parameter kedua (indeks akhir). Bila parameter kedua tidak ditentukan, maka secara otomatis berakhir pada karakter terakhir. Karakter pada indeks yang ditentukan pada parameter kedua tidak diikutkan sebagai output.

var car1 = 'Lykan Hypersport';
var car2 = car1.substr(6);
console.log(car2); // Hypersport

.substr([indeks awal], [jumlah karakter yang diambil (optional)])

Mendapatkan potongan string mulai dari indeks pada parameter pertama (indeks awal) dengan jumlah indeks pada parameter kedua (jumlah karakter). Bila parameter kedua tidak ditentukan, maka secara otomatis berakhir pada karakter terakhir. Karakter pada indeks yang ditentukan pada parameter kedua tidak diikutkan sebagai output.

var motor1 = 'zelda motor';
var motor2 = motor1.substr(2, 2);
console.log(motor2); // ld

.toUpperCase()

Mengembalikan string baru dengan semua karakter yang diubah menjadi huruf kapital.

var letter = 'This Letter Is For You';
var upper  = letter.toUpperCase();
console.log(upper); // THIS LETTER IS FOR YOU

.toLowerCase()

Mengembalikan string baru dengan semua karakter yang diubah menjadi huruf kecil

var letter = 'This Letter Is For You';
var lower  = letter.toLowerCase();
console.log(lower); // this letter is for you

.trim()

Mengembalikan string baru yang sudah dihapus karakter whitespace (” “) pada awal dan akhir string tersebut.

var username    = ' administrator ';
var newUsername = username.trim(); 
console.log(newUsername) // 'administrator'

Mengubah tipe data dari dan ke String

Di Javascript terkadang kita ingin mengubah sebuah data string menjadi tipe data lain atau sebaliknya. Contoh diperoleh data angka tapi dalam tipe data String maka kita dapat mengubah string tersebut menjadi tipe data angka.

String([angka/array])

Fungsi global String() dapat dipanggil kapan saja pada program JavaScript dan akan mengembalikan data dalam tipe data String dari parameter yang diberikan.

var int  = 12;
var real = 3.45;
var arr  = [6, 7, 8];

var strInt  = String(int);
var strReal = String(real);
var strArr  = String(arr);

console.log(strInt);  // '12'
console.log(strReal); // '3.45'
console.log(strArr);  // '6,7,8'

.toString()

Mengonversi tipe data lain menjadi string. Bila data tersebut adalah array, setiap nilai akan dituliskan dan dipisah dengan karakter koma.

var number = 21;
console.log(number.toString()); // '21'
var array = [1,2];
console.log(array.toString());  // '1,2'

Number([String])

Fungsi global Number() mengonversi tipe data string menjadi angka. Data yang diberikan pada parameter harus berupa karakter angka saja, dengan titik (separator) bila angka adalah bilangan desimal. Bila parameter berisi karakter selain angka dan/atau titik, Number() akan mengembalikan NaN (Not a Number).

var number1 = Number("90");   // number1 = 90
var number2 = Number("1.23"); // number2 = 1.23
var number3 = Number("4 5");  // number3 = NaN

parseInt([String]) dan parseFloat([String])

Fungsi global parseInt([String]) dan parseFloat([String]) mengembalikan angka dari string. Bila angka adalah bilangan desimal maka gunakan parseFloat(), bila tidak bilangan dibelakang koma akan diabaikan.

var int  = '89';
var real = '56.7';
var strInt_1 = parseInt(int);  // strInt_1 = 89
var strInt_2 = parseInt(real); // strInt_2 = 56
var strReal_1 = parseFloat(int); // strReal_1 = 89
var strReal_2 = parseFloat(int); // strReal_2 = 56.7

Referensi Tambahan

sumber: github hacktiv8 phase 0 materials

Javascript – Conditional

Kondisional adalah sebuah metode yang melakukan pengecekan terhadap suatu pernyataan atau premis apakah bernilai benar atau tidak, jika benar maka akan menjalankan sebuah block code tertentu.

Kondisional dengan `if / else if / else`

Contoh 1 menjalankan kode jika premis bernilai true

if ( true ) {
    console.log("jalankan code")
}

Contoh 2 kode tidak dijalankan jika premis bernilai false

if ( false ) {
    console.log("code tidak dijalankan")
}

Contoh 3 Premis dengan perbandingan suatu nilai

var mood = "happy"
if ( mood == "happy" ) {
    console.log("hari ini aku bahagia!")
}

Di dalam kondisional dikenal juga dengan istilah branching atau percabangan. Dengan percabangan kita bisa mengecek nilai kebenaran dari berbagai premis yang kita sediakan. cara menambahkan kondisi atau premis lain dari premis pertamanya adalah dengan sintaks else . Contohnya ketika kita diminta untuk membeli telur dan buah ke minimarket oleh ibu kita maka akan banyak sekali kondisi atau kemungkinan yang terjadi dalam perjalanan kita membeli barang-barang tersebut di supermarket.

Contoh 4 Branching sederhana

var minimarketStatus = "open"
if ( minimarketStatus == "open" ) {
    console.log("saya akan membeli telur dan buah")
} else {
    console.log("minimarketnya tutup")
}

Kondisi else di atas adalah kondisi selain minimarketStatus == "open" .

Contoh 5 Branching dengan kondisi

var minimarketStatus = "close"
var minuteRemainingToOpen = 5
if ( minimarketStatus == "open" ) {
    console.log("saya akan membeli telur dan buah")
} else if ( minuteRemainingToOpen <= 5 ) {
    console.log("minimarket buka sebentar lagi, saya tungguin")
} else {
    console.log("minimarket tutup, saya pulang lagi")
}

contoh di atas kita memberikan kondisi tambahan yaitu jika minimarket akan buka kurang atau sama dengan 5 menit lagi maka saya akan menunggu.

Selain Branching atau percabangan, kondisional juga dapat memiliki sarang atau tumpukan yaitu terdapat kondisional di dalam sebuah kondisional.

Contoh 6 Kondisional bersarang

var minimarketStatus = "open"
var telur = "soldout"
var buah = "soldout" 
if ( minimarketStatus == "open" ) {
    console.log("saya akan membeli telur dan buah")
    if(telur == "soldout" || buah == "soldout" ) {
        console.log("belanjaan saya tidak lengkap")    
    } else if( telur == "soldout") {
        console.log("telur habis")
    } else if ( buah == "soldout" ) {
        console.log("buah habis")
    }
} else {
    console.log("minimarket tutup, saya pulang lagi")
}

pada kondisi di atas minimarketnya sudah buka lalu cek kondisi selanjutnya cek apakah telur atau buah habis. Karena kondisinya adalah jika telur ATAU buah salah satunya ada yang soldout maka belanjaan saya lengkap. Demikian seterusnya akan mengecek kondisi-kondisi yang disediakan dalam logika program yang dibuat.

Kondisional dengan `Switch Case`

Cara lain untuk melakukan pengecekan kondisi atau conditional adalah dengan switch case. Penggunaan switch case mirip seperti kita menyalakan tombol switch pada remote. Jika kondisi tombol yang dipijit adalah tombol dengan nomer tertentu maka akan menjalankan prorgram tertentu.

Contoh 7 Kondisional dengan switch case
```
var buttonPushed = 1;
switch(buttonPushed) {
  case 1:   { console.log('matikan TV!'); break; }
  case 2:   { console.log('turunkan volume TV!'); break; }
  case 3:   { console.log('tingkatkan volume TV!'); break; }
  case 4:   { console.log('matikan suara TV!'); break; }
  default:  { console.log('Tidak terjadi apa-apa'); }}
```
Pada kode di atas, switch akan mengevaluasi nilai buttonPushed jika case yang ditemui cocok dengan nilai yang diberikan maka kode pada case tersebut akan dijalankan sehingga pada console akan dimunculkan “matikan TV!“. Pada setiap case terdapat break yang berfungsi untuk menghentikan proses switch agar tidak menjalankan case yang lain. Juga terdapat default yaitu kondisi dimana tidak ditemukan case yang sesuai.

Javascript – Loop

Loop/Iteration adalah tindakan mengulang / merepetisi sebuah proses, dengan tujuan untuk mendapatkan deret hasil, atau dengan tujuan mendapatkan hasil tertentu dengan repetisi. Setiap proses repetisi ini disebut sebagai Iteration atau Looping.

Untuk melakukan looping/iteration, JavaScript menyediakan beberapa jenis iteration, yaitu:

while-loop
for-loop

While-loop

While-loop adalah iterasi yang akan mengulang sebuah proses dengan sebuah kondisi tertentu.

Berikut adalah cara atau struktur penulisan while-loop:

while([Kondisi]) { // Kondisi yang menentukan apakah program akan melakukan iterasi. 
// Berupa boolean atau true/false.
  [Proses] // Merupakan proses yang akan dijalankan dalam satu iterasi
}

Pada while-loop, statement while akan mengambil sebuah nilai true atau false dari hasil kondisi yang diberikan. Apabila statement while mendapatkan nilai true, maka proses yang berada didalam curly bracket ({ }) akan dijalankan. Looping akan terus dilakukan selama kondisi while-loop masih true.

Untuk mencegah looping berjalan terus-menerus, dilakukan sebuah proses yang akan mengubah kondisi yang sedemikian rupa yang bertujuan untuk menghentikan looping dengan menghasilkan kondisi yang false.

Contoh Looping While-loop 1 Looping Angka 1-9 Sederhana

var flag = 1;
while(flag < 10) { // Loop akan terus berjalan selama nilai flag masih dibawah 10
  console.log('Iterasi ke-' + flag); // Menampilkan nilai flag pada iterasi tertentu
  flag++; // Mengubah nilai flag dengan menambahkan 1
}

Kamu bisa mencoba kode di atas di sini

Contoh Looping While-loop 2 Looping Mengembalikan Angka Total

var deret = 5;
var jumlah = 0;
while(deret > 0) { // Loop akan terus berjalan selama nilai deret masih di atas 0
  jumlah += deret; // Menambahkan nilai variable jumlah dengan angka deret
  deret--; // Mengubah nilai deret dengan mengurangi 1
  console.log('Jumlah saat ini: ' + jumlah)
}
 
console.log(jumlah);

Kamu bisa mencoba kode di atas di sini

For-loop

For-loop adalah bentuk lain dari iterasi, dimana statement for menjadi kontrol atas loop yang dilakukan. Hal ini yang menjadi pembeda antara for-loop dengan while-loop.

Berikut adalah cara atau struktur penulisan for-loop:

for([Inisialisasi], [Kondisi], [Incremental/Decremental]) {
  [Proses] // Merupakan proses yang akan dijalankan dalam satu iterasi
}

Pada for-loop, statement for akan menampung tiga parameter, yaitu sebut saja inisialisasi, kondisi, dan incremental/decremental. Ketiga parameter ini akan menjadi kontrol kapan loop ini harus berhenti. Pada parameter pertama, yaitu inisialisasi, sebuah variable diberikan nilai awal atau default. Pada parameter kedua, yaitu kondisi, for-loop akan terus berjalan selama kondisi ini masih terpenuhi, dengan kata lain, mengandung nilai true. Pada parameter kedua, yaitu incremental/decremental, variabel yang menjadi kontrol terhadap loop ini akan diubah nilainya.

Best Practice: Walaupun memang for-loop dapat mengubah kondisi di dalam proses, namun best practice dari penggunaan for-loop adalah seluruh kendali atau kontrol dari looping ditentukan oleh variable yang diinisialisasi, di increment/decrement, dan juga kondisi for-loop pun menggunakan variable tersebut.

Untuk memudahkan kamu mendapatkan gambaran jelas tentang penggunaan for-loop, mari kita gunakan kedua contoh while-loop dan kita tulis ulang dalam bentuk for-loop.

Contoh Looping For-loop 1 Looping Angka 1-9 Sederhana

for(var angka = 1; angka < 10; angka++) {
  console.log('Iterasi ke-' + angka);
}

Kamu bisa mencoba kode di atas di sini

Contoh Looping For-loop 2 Looping Mengembalikan Angka Total

var jumlah = 0;
for(var deret = 5; deret > 0; deret--) {
  jumlah += deret;
  console.log('Jumlah saat ini: ' + jumlah);
}
 
console.log('Jumlah terakhir: ' + jumlah);

Kamu bisa mencoba kode di atas di sini

Contoh Looping For-loop 3 Looping Dengan Increment dan Decrement Lebih dari 1

for(var deret = 0; deret < 10; deret += 2) {
  console.log('Iterasi dengan Increment counter 2: ' + deret);
}
 
console.log('-------------------------------');
 
for(var deret = 15; deret > 0; deret -= 3) {
  console.log('Iterasi dengan Decrement counter : ' + deret);
}

Kamu bisa mencoba kode di atas di repl.it.

Waspadai Infinite Looping!

Dengan sengaja atau tidak sengaja, kode kamu mungkin dapat menghasilkan infinite looping, atau looping yang tidak akan pernah berhenti. Bila ini terjadi, segera periksa statement kondisi kamu.

var flag = 1;
while(flag < 10) { // Loop akan terus berjalan, karena nilai flag tidak pernah berubah
  console.log('Iterasi ke-' + flag);
}

Sumber: github hacktiv8 phase 0 materials

Javascript – 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(parameter 1, parameter 2, ...) {
  [Isi dari function berupa tindakan]
  return [expression];
}

Kode di atas tidak dapat kita copy-paste kan langsung, melainkan hanya sebuah bentuk penulisan function. Sebuah function, umumnya melakukan tindakan dan sebelum function berakhir, function bisa mengembalikan nilai dengan cara menambahkan sintaks return.

Kita juga dapat mengirimkan nilai ke dalam sebuah function dengan mencantumkannya ke dalam tanda kurung dalam penulisan function. Untuk mengirimkan nilai lebih dari satu, gunakan tanda , sebagai pemisah.

Contoh Function 1: Function sederhana tanpa return

function tampilkan() {
  console.log("halo!");
}
 
tampilkan();

Contoh Function 2: Function sederhana dengan return

function munculkanAngkaDua() {
  return 2
}
 
var tampung = munculkanAngkaDua();
console.log(tampung)

Contoh Function 3: Function dengan parameter

function kalikanDua(angka) {
  return angka * 2
}
 
var tampung = kalikanDua(2);
console.log(tampung)

Contoh Function 4: Pengiriman parameter lebih dari satu

function tampilkanAngka(angkaPertama, angkaKedua) {
  return angkaPertama + angkaKedua
}
 
console.log(tampilkanAngka(5, 3))

Contoh Function 5: Inisialisasi parameter dengan nilai default

function tampilkanAngka(angka = 1) {
  return angka
}
 
console.log(tampilkanAngka(5)) // 5, sesuai dengan nilai parameter yang dikirim
console.log(tampilkanAngka()) // 1, karena default dari parameter adalah 1

Waspadai pengiriman parameter yang UNDEFINED!

Kita juga dapat menampung function sebagai variable dengan sebuah bentuk function yang dinamakan Anonymous Function.

var fungsiPerkalian = function(angkaPertama, angkaKedua) {
  return angkaPertama * angkaKedua
}
 
console.log(fungsiPerkalian(2, 4))

Sumber: github hacktiv8 phase 0 materials

Javascript – Array

Array adalah kumpulan atau tumpukan berbagai data. Cara menuliskan array yaitu dengan kurung siku ([]) dan elemen-elemen nya dipisah menggunakan tanda koma (,). Setiap elemen dari array memiliki indeks yang dimulai dari 0, 1, 2, dst. Kita dapat memanipulasi array dengan berbagai cara seperti menambahkan dan mengeluarkan elemen dalam array, menggabungkan array, atau bahkan menghapus seluruh elemen Array nya. Kita bisa memasukkan beberapa tipe data yang berbeda ke dalam Array bahkan memasukkan Array ke dalam Array.

Array juga memiliki property .length seperti pada string yang berarti panjang dari sebuah array.

var hobbies = ["coding", "cycling", "climbing", "skateboarding"] 
console.log(hobbies) // [ 'coding', 'cycling', 'climbing', 'skateboarding' ]
console.log(hobbies.length) // 4 
 
console.log(hobbies[0]) // coding
console.log(hobbies[2]) // climbing
// Mengakses elemen terakhir dari array
console.log(hobbies[hobbies.length -1] // skateboarding

Metode Array

Berikut ini adalah beberapa metode atau built-in functions yang dimiliki oleh tipe data array:

push: menambah 1 nilai ke array ke index paling belakang
pop: menghapus 1 nilai dari array index paling belakang
unshift: menambah 1 nilai ke array index paling depan (index 0)
shift: menghapus 1 nilai dari array index paling depan (index 0)
join: menggabungkan seluruh element array menjadi sebuah string dan mengambil parameter sebagai simbol penyambung antar elemen
sort: mengurutkan elemen di dalam array sesuai alphabet
slice: mengambil beberapa lapis data
splice: mengubah nilai array dengan menghapus dan/atau menambah nilai baru ke array
split: memecah string dan mengembalikan array sesuai dengan separator / pemisah yang didefinisikan

Cara menggunakan metode array adalah dengan menggunakan tanda dot (.) contohnya sbb:

var feeling = ["dag", "dig"]
feeling.push("dug") // menambahkan nilai "dug" ke index paling belakang
feelling.pop() // menghapus nilai pada elemen terakhir array

Beberapa metode array ada yang mengembalikan nilai array lama yang sudah diperbarui (array lama di-update) dengan metode tersebut , dan ada pula metode array yang mengembalikan sebuah array baru dan tidak mengubah data pada array yang lama (array baru yang serupa dengan array lama). Sifat seperti ini disebut mutable atau immutable.

`.push()`

Push adalah metode array untuk menambahkan nilai di belakang elemen terakhir di array. metode push menerima sebuah parameter yaitu nilai yang ingin kita tambahkan ke dalam array.

var numbers = [0, 1, 2]
numbers.push(3)
console.log(numbers) // [0, 1, 2, 3]
// Bisa juga memasukkan lebih dari satu nilai menggunakan metode push
numbers.push(4, 5)
console.log(numbers) // [0, 1, 2, 3, 4, 5]

`.pop()`

Pop adalah kebalikan dari push yaitu menghapus nilai elemen paling terakhir dari sebuah array. metode Pop tidak menerima parameter apapun sehingga metode pop hanya bisa mengeluarkan satu elemen saja yaitu yang paling terakhir dari sebuah array.

var numbers = [0, 1, 2, 3, 4, 5]
numbers.pop() 
console.log(numbers) // [0, 1, 2, 3, 4]

`.unshift()`

Unshift yaitu menambahkan nilai pada index ke-0 sehingga elemen-elemen sebelumnya bergeser.

var numbers = [0, 1, 2, 3]
numbers.unshift(-1) 
console.log(numbers) // [-1, 0, 1, 2, 3]

`.shift()`

Shift kebalikan dari unshift yaitu menghapus nilai pada elemen terdepan dari sebuah array. metode Shift tidak menerima parameter apapun.

var numbers = [ 0, 1, 2, 3]
numbers.shift()
console.log(numbers) // [1, 2, 3]

`.sort()`

Sort adalah metode untuk mengurutkan nilai pada array. Secara otomatis, sort akan mengurutkan secara ascending (dari rendah ke tinggi) dan diurutkan berdasarkan unicode dari karakter. Urutan unicode artinya ada karakter yang secara nilai lebih besar dibandingkan dengan karakter yang lainnya. contohnya adalah karakter “b” akan lebih besar daripada “a”, karakter “c” lebih besar daripada karakter “b”, dst.

var animals = ["kera", "gajah", "musang"] 
animals.sort()
console.log(animals) // ["gajah", "kera", "musang"]

Hal ini akan bermasalah jika kita ingin mengurutkan angka. Secara otomatis metode sort akan membandingkan karakter terdepan dari sebuah angka.

var numbers = [12, 1, 3]
numbers.sort()
console.log(numbers) // [1, 12, 3]

Untuk mengatasi masalah tersebut, metode sort dapat menerima sebuah parameter berupa function untuk membandingkan value dari elemen yang akan diurutkan. contohnya sebagai berikut:

var numbers = [12, 1, 3]
// Mengurutkan secara Ascending
numbers.sort(function (value1, value2) { return value1 - value2 } ) ; 
console.log(numbers) // [1, 3, 12]
 
// Mengurutkan secara Descending
numbers.sort(function (value1, value2) { return value2 - value1 } ) ;
console.log(numbers) // [12, 3, 1]

`.slice()`

slice adalah metode untuk mengambil irisan dari sebuah array. Metode slice bisa menerima satu atau dua parameter. Parameter pertama adalah nomer index pertama yang akan kita ambil sebagai irisan, sedangkan parameter kedua adalah nomer index terakhir yang ingin kita ambil sebagai irisan.

var angka = [0, 1, 2, 3]
var irisan1 = angka.slice(1,3) 
console.log(irisan1) //[1, 2, 3]
var irisan2 = angka.slice(0,2)
console.log(irisan2) //[0, 1, 2]

Jika parameter kedua tidak diisi maka secara otomatis slice akan mengiris array dari indeks di paramer pertama sampai ke indeks terakhir array tersebut.

var angka = [0, 1, 2, 3]
var irisan3 = angka.slice(2)
console.log(irisan3) // [2, 3]

Jika diperhatikan, metode slice tidak mengubah Array yang awal dan hasil irisan array dapat kita tampung kembali ke variable yang baru. Oleh karena itu metode Slice juga berfungsi untuk membuat salinan atau “shallow copy” dari sebuah array. Cara membuat shallow copy dengan metode slice yaitu dengan tanpa memberikan parameter apapun pada metode slice.
var angka = [0, 1, 2, 3]
var salinAngka = angka.slice()
console.log(salingAngka) // [0, 1, 2, 3]

`.splice()`

Splice yaitu metode untuk menghapus dan/atau menambahkan nilai elemen pada array. Metode splice bisa menerima parameter sebanyak dua atau lebih parameter. Jika ingin menggunakan splice untuk menghapus elemen pada index tertentu maka digunakan 2 paramater. Jika ingin menggunakan splice untuk menambahkan elemen pada index tertentu maka digunakan tiga parameter.

array.splice([IndexMulai], [JumlahNilaiYangDihapus], [NilaiYangDitambahkan1], [NilaiYangDitambahkan2], ...);

Berikut contoh penggunaan metode splice()

var fruits = [ "banana", "orange", "grape"]
fruits.splice(1, 0, "watermelon") 
console.log(fruits) // [ "banana", "watermelon", "orange", "grape"]

Contoh di atas berarti kita mulai mengubah array fruits dari indeks no 1, dan melakukan penghapusan nilai sebanyak 0 (yang berarti tidak menghapus apapun), dan menambahkan nilai “watermelon” pada indeks tersebut.

var fruits = [ "banana", "orange", "grape"]
fruits.splice(0, 2)
console.log(fruits) // ["grape"]

Contoh di atas berarti kita mulai mengubah array fruits dari indeks ke-0 dan melakukan penghapusan data sebanyak 2 elemen.

`.split()` dan `.join()`

Metode split yaitu memecah sebuah string sehingga menjadi sebuah array. Split menerima sebuah parameter berupa karakter yang menjadi separator untuk memecah string.

var biodata = "name:john,doe" 
var name = biodata.split(":")
console.log(name) // [ "name", "john,doe"]

Metode join yaitu kebalikan dari split yaitu mengubah sebuah array menjadi string dengan cara menggabungkan (join) seluruh elemen array menjadi satu dengan sebuah karakter pemisah yang dikirim melalui parameter. contohnya sebagai berikut:

var title = ["my", "first", "experience", "as", "programmer"] 
var slug = title.join("-")
console.log(slug) // "my-first-experience-as-programmer"

Multidimensional Array

Multidimensional array atau array multidimensi adalah array yang berisi array di dalamnya. Jumlah dimensi bergantung seberapa dalam array tersebut memiliki array di dalamnya. Cara akses nilai dari array multidimensi sama seperti array satu dimensi seperti biasa namun jumlah indeksnya terdapat sebanyak dimensi nya.

 var arrayMulti = [ 
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]
// Maka sebagai gambaran, indeks dari array tersebut adalah 
/*
    [
        [(0,0), (0,1), (0,2)],
        [(1,0), (1,1), (1,2)],
        [(2,0), (2,1), (2,2)]
    ] 
*/
console.log(arrayMulti[0][0]) // 1 
console.log(arrayMulti[1][0]) // 4
console.log(arrayMulti[2][1]) // 8

Step 1 - Assignment

Assignment - JavaScript String Properties & Method

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang Properties & Method

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question No. 1 (Membuat kalimat)

Terdapat kumpulan variable dengan data string sebagai berikut

var word = 'JavaScript'; 
var second = 'is'; 
var third = 'awesome'; 
var fourth = 'and'; 
var fifth = 'I'; 
var sixth = 'love'; 
var seventh = 'it!';

Buatlah agar kata-kata di atas menjadi satu kalimat . Output:

JavaScript is awesome and I love it!

Question No.2 Mengurai kalimat (Akses karakter dalam string)

Terdapat satu kalimat seperti berikut:

var sentence = "I am going to be React Native Developer"; 

var exampleFirstWord = sentence[0] ; 
var exampleSecondWord = sentence[2] + sentence[3]  ; 
var thirdWord; // lakukan sendiri 
var fourthWord; // lakukan sendiri 
var fifthWord; // lakukan sendiri 
var sixthWord; // lakukan sendiri 
var seventhWord; // lakukan sendiri 
var eighthWord; // lakukan sendiri 

console.log('First Word: ' + exampleFirstWord); 
console.log('Second Word: ' + secondWord); 
console.log('Third Word: ' + thirdWord); 
console.log('Fourth Word: ' + fourthWord); 
console.log('Fifth Word: ' + fifthWord); 
console.log('Sixth Word: ' + sixthWord); 
console.log('Seventh Word: ' + seventhWord); 
console.log('Eighth Word: ' + eighthWord)

Buat menjadi Output berikut:

First word: I 
Second word: am 
Third word: going 
Fourth word: to 
Fifth word: be 
Sixth word: React 
Seventh word: Native 
Eighth word: Developer

Question No. 3 Mengurai Kalimat (Substring)

var sentence2 = 'wow JavaScript is so cool'; 

var exampleFirstWord2 = sentence2.substring(0, 3); 
var secondWord2; // do your own! 
var thirdWord2; // do your own! 
var fourthWord2; // do your own! 
var fifthWord2; // do your own! 

console.log('First Word: ' + exampleFirstWord2); 
console.log('Second Word: ' + secondWord2); 
console.log('Third Word: ' + thirdWord2); 
console.log('Fourth Word: ' + fourthWord2); 
console.log('Fifth Word: ' + fifthWord2);

Uraikan lah kalimat sentence2 di atas menjadi kata-kata penyusunnya. Output:

First Word: wow 
Second Word: JavaScript 
Third Word: is 
Fourth Word: so 
Fifth Word: cool

Question No. 4 Mengurai Kalimat dan Menentukan Panjang String

var sentence3 = 'wow JavaScript is so cool'; 

var exampleFirstWord3 = sentence3.substring(0, 3); 
var secondWord3; // do your own! 
var thirdWord3; // do your own! 
var fourthWord3; // do your own! 
var fifthWord3; // do your own! 

var firstWordLength = exampleFirstWord3.length  
// lanjutkan buat variable lagi di bawah ini 
console.log('First Word: ' + exampleFirstWord3 + ', with length: ' + firstWordLength); 
console.log('Second Word: ' + secondWord3); 
console.log('Third Word: ' + thirdWord3); 
console.log('Fourth Word: ' + fourthWord3); 
console.log('Fifth Word: ' + fifthWord3);

Output:

First Word: wow, with length: 3 
Second Word: JavaScript, with length: 10 
Third Word: is, with length: 2 
Fourth Word: so, with length: 2 
Fifth Word: cool, with length: 4

Tugas Conditional

If-else

Petunjuk : Kita akan memasuki dunia game werewolf. Pada saat akan bermain kamu diminta memasukkan nama dan peran . Untuk memulai game pemain harus memasukkan variable nama dan peran. Jika pemain tidak memasukkan nama maka game akan mengeluarkan warning “Nama harus diisi!“. Jika pemain memasukkan nama tapi tidak memasukkan peran maka game akan mengeluarkan warning “Pilih Peranmu untuk memulai game“. Terdapat tiga peran yaitu penyihir, guard, dan werewolf. Tugas kamu adalah membuat program untuk mengecek input dari pemain dan hasil response dari game sesuai input yang dikirimkan.

Petunjuk:
Nama dan peran diisi manual dan bisa diisi apa saja
Nama tidak perlu dicek persis sesuai dengan input/output
Buat kondisi if-else untuk masing-masing peran

Input:

var nama = "John"
var peran = ""

Output:

// Output untuk Input nama = '' dan peran = ''
"Nama harus diisi!"
 
//Output untuk Input nama = 'John' dan peran = ''
"Halo John, Pilih peranmu untuk memulai game!"
 
//Output untuk Input nama = 'Jane' dan peran 'Penyihir'
"Selamat datang di Dunia Werewolf, Jane"
"Halo Penyihir Jane, kamu dapat melihat siapa yang menjadi werewolf!"
 
//Output untuk Input nama = 'Jenita' dan peran 'Guard'
"Selamat datang di Dunia Werewolf, Jenita"
"Halo Guard Jenita, kamu akan membantu melindungi temanmu dari serangan werewolf."
 
//Output untuk Input nama = 'Junaedi' dan peran 'Werewolf'
"Selamat datang di Dunia Werewolf, Junaedi"
"Halo Werewolf Junaedi, Kamu akan memakan mangsa setiap malam!"

Switch Case

Kamu akan diberikan sebuah tanggal dalam tiga variabel, yaitu hari, bulan, dan tahun. Disini kamu diminta untuk membuat format tanggal. Misal tanggal yang diberikan adalah hari 1, bulan 5, dan tahun 1945. Maka, output yang harus kamu proses adalah menjadi 1 Mei 1945.

Gunakan switch case untuk kasus ini!

Contoh:

var hari = 21; 
var bulan = 1; 
var tahun = 1945;
//  Maka hasil yang akan tampil di console adalah: '21 Januari 1945';

Skeleton Code / Code yang dicontohkan yang perlu diikuti dan dimodifikasi

var tanggal; // assign nilai variabel tanggal disini! (dengan angka antara 1 - 31)
var bulan; // assign nilai variabel bulan disini! (dengan angka antara 1 - 12)
var tahun; // assign nilai variabel tahun disini! (dengan angka antara 1900 - 2200)

Assignment - Javascript Looping

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu looping dalam javascipt

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question No. 1 Looping `While`

Pada tugas ini kamu diminta untuk melakukan looping dalam JavaScript dengan menggunakan syntax while. Untuk membuat tantangan ini lebih menarik, kamu juga diminta untuk membuat suatu looping yang menghitung maju dan menghitung mundur. Jangan lupa tampilkan di console juga judul ‘LOOPING PERTAMA’ dan ‘LOOPING KEDUA’.”

Output:

LOOPING PERTAMA
2 - I love coding
4 - I love coding
6 - I love coding
8 - I love coding
10 - I love coding
12 - I love coding
14 - I love coding
16 - I love coding
18 - I love coding
20 - I love coding
LOOPING KEDUA
20 - I will become a mobile developer
18 - I will become a mobile developer                                                                              
16 - I will become a mobile developer
14 - I will become a mobile developer
12 - I will become a mobile developer
10 - I will become a mobile developer
8 - I will become a mobile developer
6 - I will become a mobile developer
4 - I will become a mobile developer
2 - I will become a mobile developer

Question No. 2 Looping menggunakan `for`

Pada tugas ini kamu diminta untuk melakukan looping dalam JavaScript dengan menggunakan syntax for. Untuk membuat tantangan ini lebih menarik, kamu juga diminta untuk memenuhi syarat tertentu yaitu:

SYARAT: A. Jika angka ganjil maka tampilkan Santai B. Jika angka genap maka tampilkan Berkualitas C. Jika angka yang sedang ditampilkan adalah kelipatan 3 DAN angka ganjil maka tampilkan I Love Coding.

OUTPUT 
1 - Santai
2 - Berkualitas
3 - I Love Coding 
4 - Berkualitas
5 - Santai
6 - Berkualitas
7 - Santai
8 - Berkualitas
9 - I Love Coding
10 - Berkualitas
11 - Santai
12 - Berkualitas
13 - Santai
14 - Berkualitas
15 - I Love Coding
16 - Berkualitas
17 - Santai
18 - Berkualitas
19 - Santai
20 - Berkualitas

Question No. 3 Membuat Persegi Panjang #

Kamu diminta untuk menampilkan persegi dengan dimensi 8×4 dengan tanda pagar (#) dengan perulangan atau looping. Looping boleh menggunakan syntax apa pun (while, for, do while).

Output:

########
########
########
########

Question No. 4 Membuat Tangga

Kali ini kamu diminta untuk menampilkan sebuah segitiga dengan tanda pagar (#) dengan dimensi tinggi 7 dan alas 7. Looping boleh menggunakan syntax apa pun (while, for, do while).

Output:

#
##
###
####
#####
######
#######

Question No. 5 Membuat Papan Catur

Buatlah suatu looping untuk menghasilkan sebuah papan catur dengan ukuran 8 x 8 . Papan berwarna hitam memakai tanda pagar (#) sedangkan papan putih menggunakan spasi. Looping boleh menggunakan syntax apa pun (while, for, do while).

Output:

 # # # #
# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #
# # # #

Assignment - Javascript Function

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu function dalam javascipt

Question No. 1

Tulislah sebuah function dengan nama teriak() yang mengembalikan nilai “Halo Sanbers!” yang kemudian dapat ditampilkan di console.

Question No. 2

Tulislah sebuah function dengan nama kalikan() yang mengembalikan hasil perkalian dua parameter yang di kirim.

Question No. 3

Tulislah sebuah function dengan nama introduce() yang memproses paramater yang dikirim menjadi sebuah kalimat perkenalan seperti berikut: “Nama saya [name], umur saya [age] tahun, alamat saya di [address], dan saya punya hobby yaitu [hobby]!”

Assignment - JavaScript Array

Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu array dalam javascipt

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question No. 1 (Range)

Buatlah sebuah function dengan nama range() yang menerima dua parameter berupa number. Function mengembalikan sebuah array yang berisi angka-angka mulai dari angka parameter pertama hingga angka pada parameter kedua. Jika parameter pertama lebih besar dibandingkan parameter kedua maka angka-angka tersusun secara menurun (descending).

struktur fungsinya seperti berikut range(startNum, finishNum) {} Jika parameter pertama dan kedua tidak diisi maka function akan menghasilkan nilai -1

// Code di sini
 
console.log(range(1, 10)) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(range(1)) // -1
console.log(range(11,18)) // [11, 12, 13, 14, 15, 16, 17, 18]
console.log(range(54, 50)) // [54, 53, 52, 51, 50]
console.log(range()) // -1

Question No. 2 (Range with Step)

Pada soal kali ini kamu diminta membuat function rangeWithStep yang mirip dengan function range di soal sebelumnya namun parameternya ditambah dengan parameter ketiga yaitu angka step yang menyatakan selisih atau beda dari setiap angka pada array. Jika parameter pertama lebih besar dibandingkan parameter kedua maka angka-angka tersusun secara menurun (descending) dengan step sebesar parameter ketiga.

struktur fungsinya seperti berikut rangeWithStep(startNum, finishNum, step) {}

// Code di sini
 
console.log(rangeWithStep(1, 10, 2)) // [1, 3, 5, 7, 9]
console.log(rangeWithStep(11, 23, 3)) // [11, 14, 17, 20, 23]
console.log(rangeWithStep(5, 2, 1)) // [5, 4, 3, 2]
console.log(rangeWithStep(29, 2, 4)) // [29, 25, 21, 17, 13, 9, 5]

Question No. 3 (Sum of Range)

Kali ini kamu akan menjumlahkan sebuah range (Deret) yang diperoleh dari function range di soal-soal sebelumnya. Kamu boleh menggunakan function range dan rangeWithStep pada soal sebelumnya untuk menjalankan soal ini.

Buatlah sebuah function dengan nama sum() yang menerima tiga parameter yaitu angka awal deret, angka akhir deret, dan beda jarak (step). Function akan mengembalikan nilai jumlah (sum) dari deret angka. contohnya sum(1,10,1) akan menghasilkan nilai 55.

ATURAN: Jika parameter ke-3 tidak diisi maka stepnya adalah 1.

// Code di sini
console.log(sum(1,10)) // 55
console.log(sum(5, 50, 2)) // 621
console.log(sum(15,10)) // 75
console.log(sum(20, 10, 2)) // 90
console.log(sum(1)) // 1
console.log(sum()) // 0

Question No. 4 (Array Multidimensi)

Sering kali data yang diterima dari database adalah array yang multidimensi (array di dalam array). Sebagai developer, tugas kita adalah mengolah data tersebut agar dapat menampilkan informasi yang diinginkan.

Buatlah sebuah fungsi dengan nama dataHandling dengan sebuah parameter untuk menerima argumen. Argumen yang akan diterima adalah sebuah array yang berisi beberapa array sejumlah n. Contoh input dapat dilihat dibawah:

//contoh input
var input = [
                ["0001", "Roman Alamsyah", "Bandar Lampung", "21/05/1989", "Membaca"],
                ["0002", "Dika Sembiring", "Medan", "10/10/1992", "Bermain Gitar"],
                ["0003", "Winona", "Ambon", "25/12/1965", "Memasak"],
                ["0004", "Bintang Senjaya", "Martapura", "6/4/1970", "Berkebun"]
            ]

Tugas kamu adalah mengimplementasikan fungsi dataHandling() agar dapat menampilkan data-data pada dari argumen seperti di bawah ini:

Nomor ID:  0001
Nama Lengkap:  Roman Alamsyah
TTL:  Bandar Lampung 21/05/1989
Hobi:  Membaca
 
Nomor ID:  0002
Nama Lengkap:  Dika Sembiring
TTL:  Medan 10/10/1992
Hobi:  Bermain Gitar
 
Nomor ID:  0003
Nama Lengkap:  Winona
TTL:  Ambon 25/12/1965
Hobi:  Memasak
 
Nomor ID:  0004
Nama Lengkap:  Bintang Senjaya
TTL:  Martapura 6/4/1970
Hobi:  Berkebun

Question No. 5 (Balik Kata)

Kamu telah mempelajari beberapa method yang dimiliki oleh String dan Array. String sebetulnya adalah sebuah array karena kita dapat mengakses karakter karakter pada sebuah string layaknya mengakses elemen pada array.

Buatlah sebuah function balikKata() yang menerima sebuah parameter berupa string dan mengembalikan kebalikan dari string tersebut.

// Code di sini
 
console.log(balikKata("Kasur Rusak")) // kasuR rusaK
console.log(balikKata("SanberCode")) // edoCrebnaS
console.log(balikKata("Haji Ijah")) // hajI ijaH
console.log(balikKata("racecar")) // racecar
console.log(balikKata("I am Sanbers")) // srebnaS ma I

Dilarang menggunakan sintaks .split , .join , .reverse() , hanya gunakan looping!

Question No. 6 (Metode Array)

Array pada JavaScript memiliki sekumpulan built-in function yang digunakan untuk mempermudah developer untuk mengolah data di dalamnya. Beberapa fungsi yang sering digunakan antara lain join, split, slice, splice, dan sort. Kerjakanlah tantangan ini untuk memperkuat pengertian kamu tentang built-in function tersebut.

Tujuan

Mengerti Kegunaan dari Built-in Function yang dimiliki Array
Mampu Menggunakan Built-in Function yang dimiliki Array

Petunjuk

//contoh output
["0001", "Roman Alamsyah", "Bandar Lampung", "21/05/1989", "Membaca"]

Buatlah sebuah function dengan nama dataHandling2 yang akan menerima input array seperti di atas.
Gunakan fungsi splice untuk memodifikasi variabel tersebut agar menjadi seperti array dibawah. Lalu console.log array yang baru seperti di bawah.

["0001", "Roman Alamsyah Elsharawy", "Provinsi Bandar Lampung", "21/05/1989", "Pria", "SMA Internasional Metro"]

Berdasarkan elemen yang berisikan tanggal/bulan/tahun (elemen ke-4), ambil angka bulan dan console.log nama bulan sesuai dengan angka tersebut.
- Gunakan split untuk memisahkan antara tanggal, bulan, dan tahun.
- Format tanggal pada data adalah dd-mm-YYYY
- Misal angka bulan 01, tuliskan “Januari”
- Gunakan switch case untuk menuliskan bulan di atas.
Pada array hasil split dari tanggal/bulan/tahun, lakukan sorting secara descending dan console.log array yang sudah di-sort.
Masih pada array hasil split dari elemen tanggal/bulan/tahun, gabungkan semua elemen menggunakan join dan pisahkan dengan karakter strip (-) lalu console.log hasilnya.
Nama (elemen ke-2), harus dibatasi sebanyak 15 karakter saja. Gunakan slice untuk menghapus kelebihan karakter dan console.log nama yang sudah di-slice, sebelum di-slice pastikan Nama (elemen ke-2) sudah dalam bentuk String agar bisa di-slice.

Test-case

Untuk memastikan program kamu sudah bekerja dengan benar, gunakan test-case dibawah.

var input = ["0001", "Roman Alamsyah ", "Bandar Lampung", "21/05/1989", "Membaca"];
dataHandling2(input);
 
/**
 * keluaran yang diharapkan (pada console)
 *
 * ["0001", "Roman Alamsyah Elsharawy", "Provinsi Bandar Lampung", "21/05/1989", "Pria", "SMA Internasional Metro"]
 * Mei
 * ["1989", "21", "05"]
 * 21-05-1989
 * Roman Alamsyah
 */