Outline

Tutorial Web Fullstack MERN untuk Pemula: Aplikasi Presensi

Bab 1: Pengenalan dan Persiapan

1.1 Pengenalan Project

• Apa itu aplikasi presensi?

• Fitur-fitur dasar yang akan dibuat

• Pengenalan MERN Stack

  • MongoDB: Database untuk menyimpan data

  • Express: Framework backend

  • React: Library frontend

  • Node.js: Runtime environment

• Alur kerja aplikasi presensi

1.2 Setup Development Environment

• Instalasi Node.js dan npm

• Instalasi MongoDB Community Edition

• Instalasi Visual Studio Code

• Instalasi Postman untuk testing API

• Pengenalan Git dasar

Bab 2: Backend Development - Dasar

2.1 Membuat Server Express

• Membuat project Node.js

• Instalasi package yang diperlukan

• Setup server Express sederhana

• Mengenal HTTP methods (GET, POST, PUT, DELETE)

• Testing API dengan Postman

2.2 Database MongoDB

• Pengenalan MongoDB

• Membuat database dan collection

• Koneksi MongoDB dengan Mongoose

• Membuat Schema sederhana

  • User Schema (nama, email, password)

  • Attendance Schema (tanggal, status)

• CRUD operations dasar

2.3 Authentication Dasar

• Register user baru

• Login user

• Pengenalan JWT

• Menyimpan password dengan aman

• Protected routes sederhana

Bab 3: Backend Development - API

3.1 API untuk User

• Membuat user baru

• Mendapatkan data user

• Update profil user

• Hapus user

• Upload foto profil sederhana

3.2 API untuk Presensi

• Check-in presensi

• Check-out presensi

• Lihat history presensi

• Status presensi sederhana (hadir/tidak hadir)

• Validasi waktu presensi

3.3 API untuk Laporan

• Laporan presensi harian

• Laporan presensi bulanan

• Filter data sederhana

• Download laporan dalam CSV

Bab 4: Frontend Development - Fundamental

4.1 Pengenalan React

• Membuat project dengan Create React App

• Struktur folder React

• Komponen dalam React

• Props dan State

• Event handling

4.2 Komponen Dasar

• Form components

• Table components

• Button components

• Alert components

• Loading spinner

4.3 Routing dan Navigation

• Setup React Router

• Protected Routes

• Navigation menu

• Link dan redirect

• Error pages

Bab 5: Frontend Development - Halaman Utama

5.1 Authentication Pages

• Halaman Login

• Halaman Register

• Form validation sederhana

• Menyimpan token JWT

• Logout function

5.2 Dashboard Admin

• List semua user

• Tambah/Edit/Hapus user

• Lihat laporan presensi

• Export data sederhana

• Settings dasar

5.3 Dashboard Karyawan

• Form Check-in/out

• Riwayat presensi pribadi

• Edit profil

• Ganti password

• Lihat status presensi

Bab 6: Integrasi Frontend dan Backend

6.1 Koneksi ke API

• Setup Axios

• Membuat API service

• Handle API response

• Error handling dasar

• Loading states

6.2 State Management

• Pengenalan Context API

• Global state sederhana

• User authentication state

• Loading state

• Error state

Bab 7: Testing Dasar

7.1 Testing API

• Testing dengan Postman

• Testing routes

• Testing authentication

• Testing CRUD operations

• Dokumentasi API sederhana

7.2 Testing Frontend

• Testing form submission

• Testing navigation

• Testing authentication flow

• Testing error handling

• Testing user interactions

Bab 8: Deployment Dasar

8.1 Persiapan Deployment

• Environment variables

• Production build

• Error handling

• Security dasar

• Backup database

8.2 Deployment

• Deploy backend ke Heroku

• Deploy frontend ke Netlify

• Setup domain gratis

• Monitoring dasar

• Maintenance dasar