Bab 1: Pengenalan dan Persiapan
Bab 1: Pengenalan dan Persiapan
1.1 Pengenalan Project
Apa itu Aplikasi Presensi?
Aplikasi presensi adalah sistem digital yang digunakan untuk mencatat dan mengelola kehadiran karyawan atau anggota organisasi. Berbeda dengan sistem manual yang menggunakan buku atau kartu absensi fisik, aplikasi presensi digital menawarkan cara yang lebih efisien, akurat, dan mudah diakses untuk mengelola data kehadiran.
Dalam tutorial ini, kita akan membuat aplikasi presensi berbasis web yang memungkinkan:
Karyawan melakukan check-in dan check-out secara digital
Admin memantau kehadiran secara real-time
Sistem menghasilkan laporan kehadiran secara otomatis
Pengelolaan data karyawan secara terpusat
Fitur-fitur Dasar yang Akan Dibuat
Manajemen Pengguna
Registrasi dan login pengguna
Manajemen profil
Pembagian role (admin dan karyawan)
Autentikasi dan otorisasi
Sistem Presensi
Check-in digital
Check-out digital
Validasi waktu kerja
Status kehadiran (hadir, terlambat, tidak hadir)
Dashboard dan Reporting
Dashboard admin untuk monitoring
Dashboard karyawan untuk melihat riwayat presensi
Laporan presensi harian dan bulanan
Export data ke format CSV
Fitur Tambahan
Upload foto profil
Notifikasi status presensi
Filter dan pencarian data
Pengaturan sistem dasar
Pengenalan MERN Stack
MERN Stack adalah kombinasi teknologi populer untuk pengembangan aplikasi web full-stack yang terdiri dari:
MongoDB
Database NoSQL berbasis dokumen
Menyimpan data dalam format JSON-like (BSON)
Sangat fleksibel dan mudah di-scale
Cocok untuk aplikasi modern dengan data yang dinamis
Dalam aplikasi ini digunakan untuk menyimpan data user dan presensi
Express
Web framework untuk Node.js
Menyediakan fitur routing yang kuat
Middleware untuk menangani request dan response
Mudah diintegrasikan dengan database
Akan digunakan untuk membuat REST API
React
Library JavaScript untuk membangun user interface
Berbasis komponen yang reusable
Virtual DOM untuk performa yang optimal
State management yang efisien
Akan digunakan untuk membuat antarmuka pengguna yang responsif
Node.js
Runtime environment JavaScript
Berbasis V8 engine dari Chrome
Event-driven dan non-blocking I/O
Performa tinggi untuk aplikasi real-time
Menjadi fondasi untuk menjalankan server Express
Alur Kerja Aplikasi Presensi
Alur Autentikasi
User melakukan registrasi/login
Server memvalidasi kredensial
Generate token JWT untuk sesi
Client menyimpan token untuk autentikasi
Alur Presensi
User melakukan check-in melalui form
Data dikirim ke server melalui API
Server memvalidasi waktu dan lokasi
Data disimpan ke MongoDB
Response dikirim ke client
UI diupdate sesuai status
Alur Pelaporan
Admin meminta data laporan
Server mengambil data dari MongoDB
Data diolah sesuai filter
Hasil dikirim ke client
Data ditampilkan dalam bentuk tabel/grafik
Integrasi Sistem
Frontend React berkomunikasi dengan backend melalui REST API
Express menangani routing dan business logic
MongoDB menyimpan semua data secara permanen
Sistem berjalan di atas runtime Node.js
Dengan menggunakan MERN stack, kita akan membangun aplikasi presensi yang modern, scalable, dan mudah dimaintain. Tutorial ini akan memandu Anda step by step dalam membangun setiap komponen sistem, mulai dari backend hingga frontend, serta mengintegrasikannya menjadi aplikasi yang utuh.
Last updated