38 posts tagged with "javascript"

View All Tags

Hari Ke Dua Puluh Sembilan Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

Publish Play Store

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.

Hari Ke Dua Puluh Enam Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Dua Puluh Lima Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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

Hari Ke Dua Puluh Satu Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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:

Hari Ke Dua Puluh Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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)} />

Hari Ke Sembilan Belas Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Enam Belas Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Lima Belas Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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";

Hari Ke Tiga Belas Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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

Hari Ke Dua Belas Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Sebelas Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

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.

Hari Ke Sepuluh Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Sembilan Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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

Insomnia REST aja ing insomnia, kita mah... mungkin juga kali yah karena harus nulis series ini hehehe...

Mengenal HTTP Method

Hari Ke Delapan Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Enam Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ke Lima Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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 []

Hari Ke Empat Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Ketiga Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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;

Hari Kedua Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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.

Hari Pertama Javascript

Asrul Harahap

Asrul Harahap

Asrul Harahap

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

Persyaratan

Untuk mengikuti series ini Anda perlu:

Belajar React untuk Pemula

Asrul Harahap

Asrul Harahap

React Developer

React adalah open source yang sangat membantu untuk membangun User Interface (UI) lebih mudah dan cepat. Jalur pembelajaran ini akan mencakup berbagai API dan tool harus dipertimbangkan untuk meningkatkan kinerja dan kegunaan aplikasi.

Panduan ini akan menunjukkan cara untuk bangkit dan berjalan denan aplikasi React. Setiap panduan lain pada buku ini akan membahas topik untuk mengoptimalkan kecepatan atau aksesibilitas aplikasi React.

String Replace Javascript

Asrul Harahap

Asrul Harahap

React Developer

Dalam tutorial ini, saya akan menjelaskan metode javascript string.replace() dengan definisi metode ini, sintaksis, parameter, dan beberapa contoh.

Definisi: - Metode JavaScript string.replace() mencari string untuk nilai yang ditentukan atau ekspresi reguler, atau kata kunci, dan mengganti string pencarian kecocokan ke string yang diberikan, dan mengembalikan string baru.

Cara cek Objek Kosong Javascript

Asrul Harahap

Asrul Harahap

React Developer

Gunakan Object.keys atau Object.values

Gunakan Object.keys untuk mendapatkan array yang berisi seluruh key yang ada pada objek tersebut, kemudian hitung panjang array lalu bandingkan dengan Nol (0), jika sama maka objek adalah kosong, perhatikan contoh berikut.

Instagram