Fullstack Development
using React.js, Node.js,
and MySQL
Overview
Full stack developer sangat berkaitan dengan kebutuhan akan pembuatan aplikasi yang saat ini terus meningkat, terutama di zaman yang serba digital. Baik dari pembuatan aplikasi website maupun mobile sangat diperlukan untuk pengguna dari segi personal maupun organisasi. Di Indonesia, kebutuhan akan programmer terus meningkat seiring dengan jumlah kebutuhan dari industri digital maupun startup.
Untuk itulah, mulai sekarang anda harus mempersiapkan sejak dini kebutuhan apa saja yang harus dipersiapkan untuk berkarir menjadi seorang programmer profesional. Bagi anda yang tertarik di bidang web development, pasti sudah mengenal yang namanya frontend developer atau backend developer. Kedua posisi tersebut memiliki tugas dan tools yang berbeda, tetapi memiliki tujuan yang sama yaitu untuk membuat sebuah perangkat lunak sesuai dengan kebutuhan industri dan customer. Jika anda tertarik dan mempunyai pengalaman lebih untuk dapat menguasai kedua posisi tersebut, maka anda dapat mencoba posisi sebagai seorang full
stack developer.
Durasi Pelatihan: 5 Hari
Pendahuluan
• Kebutuhan Sistem
• Mempersiapkan Proyek
• Direktori Proyek
• Server REST API
• Membuat Entry Point
• Membuat Database
Request GET dan POST
• Metode GET
• Metode POST
• Membuat Request dengan Routes
Koneksi React ke Node.js
• Membuat Aplikasi React
• Menghubungkan React dengan Server Node.js
Fullstack Development using
React.js, Node.js and MySQL
• Menampilkan Data Response kedalam React
Navigasi Menu dengan React Router
• Membuat Router pada React
• Membuat Router Lain
• Membuat Form
• Mendefinisikan Nilai Awal
• Membuat Validasi Form
• Mengirim Data ke Server
• Membuat Navbar
Halaman Individu based on ID
• Menampilkan Data Individu by ID ke React
• Mengarahkan Kembali ke Home
Asosiasi pada Sequelize
• Membuat Tabel Comments
• Membuat Route Comments
• Membuat Request Post Comment
Comment section
• Menampilkan Comments pada halaman PostDetail
• Membuat Request Post Comment dari React
Registrasi dan Login
• User Authentication
• Membuat Request Registrasi
• Membuat Request Login
• Membuat Halaman Registrasi di React
• Membuat Halaman Login di React
Authorisasi JSON Web Token (JWT)
• Kapan Menggunakan JSON Web Token?
• Struktur JSON Web Token
• Header
• Payload
• Signature
Fullstack Development using
React.js, Node.js and MySQL
• Menggunakan Struktur JWT Bersamaan
• Cara Kerja JSON Web Token
• Membuat JWT pada Server
• Menyimpan Access Token pada Session
• Membuat Middleware untuk Authentication
Authentikasi disisi Frontend
• Menampilkan Username pada Comment
• Merender Login dan Registrasi secara Conditional
• Menghindari Fake Token
Proses Logout
• Membuat Fungsi Logout
• Menampilkan Username pada Halaman Terauthentikasi
• Membuat Proses Hapus Comment
Sistem Likes
• Membuat Tabel Likes
• Membuat Route Likes
• Menampilkan Tombol Like pada Halaman Post
• Menghitung Banyak Likes pada Post
• Mengubah Icon Tombol Like
• Membuat Logic Likes pada Users di Setiap Post
Halaman Not Fount
Menghapus sebuah Post
Halaman Profile
• Mendapatkan Posts berdasarkan User
• Membuat Tombol Username Clickable
Mengubah Isi sebuah Post
Mengubah Password