Pengenalan HRIS Modern & Fitur Unggulan
Selamat datang di kursus HRIS Modern! Dalam kursus komprehensif ini, kita akan membangun sistem Human Resource Information System yang lengkap dengan fitur-fitur canggih seperti Face Recognition untuk absensi dan Geofencing untuk validasi lokasi. Kursus ini dirancang untuk developer yang ingin menguasai full-stack development dengan Laravel dan React, sambil membangun aplikasi enterprise-grade yang bisa langsung digunakan di dunia nyata.
Bayangkan HRIS seperti "otak digital" departemen HR - ia mengingat semua data karyawan, menghitung gaji dengan akurat, mencatat setiap kehadiran, dan mengelola cuti tanpa pernah lupa atau salah hitung. Tanpa HRIS, tim HR harus mengelola ratusan atau ribuan data karyawan secara manual menggunakan spreadsheet yang berserakan, dokumen fisik yang mudah hilang, dan perhitungan yang rawan human error.
Di era digital ini, perusahaan modern membutuhkan sistem yang tidak hanya menyimpan data, tetapi juga mampu memproses informasi secara real-time. Karyawan ingin bisa mengajukan cuti dari smartphone, manager ingin approve request dari mana saja, dan HR ingin generate laporan dalam hitungan detik. HRIS yang akan kita bangun mampu memenuhi semua kebutuhan tersebut.
Yang membuat kursus ini berbeda adalah kita akan menggunakan teknologi cutting-edge yang banyak digunakan di industri saat ini. Laravel 12 sebagai backend yang robust, React dengan TypeScript untuk UI yang type-safe, dan Inertia.js sebagai jembatan elegant yang menghilangkan kebutuhan membuat API terpisah. Kombinasi ini memberikan developer experience yang luar biasa sekaligus hasil akhir yang production-ready.
Di akhir kursus ini, Anda tidak hanya akan memiliki source code HRIS yang berfungsi penuh, tetapi juga pemahaman mendalam tentang arsitektur aplikasi enterprise, pattern yang scalable, dan best practices yang bisa Anda terapkan di project lain. Mari kita mulai perjalanan ini dengan memahami apa itu HRIS dan mengapa ia sangat penting bagi perusahaan modern.
Lesson 1-2: Memahami (Teori)
- Apa itu HRIS dan fitur-fiturnya
- Bagaimana Laravel + Inertia + React bekerja bersama
Lesson 3-4: Setup (Praktik)
- Install Laravel, Breeze, dan dependencies
- Konfigurasi TypeScript dan Tailwind CSS
Lesson 5: Organisasi (Referensi)
- Struktur folder dan best practices
Hasil Akhir Section 1:
Anda akan punya project Laravel + React yang siap untuk development!
Estimasi Waktu Total:
- Pemula: 2-3 jam
- Intermediate: 1.5 jam
- Advanced: 1 jam
Bayangkan HRIS seperti asisten HR digital yang bekerja 24/7. Tanpa HRIS, tim HR harus mengelola semua data secara manual - spreadsheet bertumpuk, dokumen tercecer, dan perhitungan gaji yang rawan error.
| Fungsi HRIS | Deskripsi | Analogi |
|---|---|---|
| Data Karyawan | Menyimpan nama, alamat, gaji, cuti | Seperti buku besar digital |
| Absensi | Mencatat kehadiran, telat, tidak hadir | Seperti mesin fingerprint pintar |
| Payroll | Menghitung gaji, lembur, potongan, pajak | Seperti akuntan otomatis |
| Manajemen Cuti | Pengajuan, approval, tracking sisa cuti | Seperti sekretaris pribadi |
Contoh di dunia nyata:
- Karyawan absen dengan selfie + GPS (tidak bisa titip absen!)
- Manager approve cuti dari HP
- HR generate slip gaji otomatis setiap bulan
Untuk Developer:
- Skill full-stack yang marketable (Laravel + React)
- Portfolio project yang impressive
- Pemahaman business logic enterprise
Untuk Perusahaan:
- Hemat biaya (tidak perlu beli software mahal)
- Customizable sesuai kebutuhan
- Data aman di server sendiri
Peluang Karir:
- Full-stack Developer: Rp 8-15 juta/bulan
- HRIS Specialist: Rp 10-20 juta/bulan
- Freelance project: Rp 20-50 juta/project
Diagram Alur Pembelajaran
Kursus ini dirancang dengan alur yang progressive - dari dasar hingga fitur advanced. Sama seperti membangun rumah, Anda tidak bisa langsung memasang atap sebelum pondasi dan dinding berdiri kokoh. Setiap section dalam kursus ini adalah "batu bata" yang menjadi fondasi untuk section berikutnya.
Bayangkan perjalanan belajar ini seperti naik tangga - setiap anak tangga membawa Anda lebih tinggi ke tujuan akhir. Di awal, kita mulai dari setup project dan database design yang menjadi pondasi. Kemudian naik ke authentication dan dashboard sebagai kerangka. Lalu master data dan employee management sebagai dinding. Akhirnya fitur advanced seperti face recognition dan payroll menjadi atap yang melengkapi bangunan HRIS Anda.
Berikut adalah visualisasi alur pembelajaran yang akan Anda lalui. Setiap kotak mewakili satu kelompok materi yang saling berhubungan. Warna berbeda menunjukkan fase yang berbeda - hijau untuk fondasi, biru untuk struktur, ungu untuk fitur inti, orange untuk data management, dan pink untuk fitur premium:
Laravel + React
Migration + Model
Login + Roles
Master Data
Face ID + Payroll
Apa yang Akan Anda Pelajari?
Kursus ini dirancang untuk developer yang ingin menguasai full-stack development dengan Laravel dan React, sambil membangun aplikasi enterprise-grade yang bisa langsung digunakan di dunia nyata.
Fitur Utama yang Akan Dibangun
| Fitur | Deskripsi | Teknologi |
|---|---|---|
| Face Recognition | Absensi dengan pengenalan wajah via kamera | face-api.js, TensorFlow.js |
| Geofencing | Validasi lokasi karyawan saat absensi | Geolocation API, Haversine |
| Multi-Role System | Super Admin, HR Manager, Finance, Manager, Employee | Spatie Permission |
| Leave Management | Pengajuan cuti dengan approval workflow | State Machine, Notifications |
| Payroll System | Perhitungan gaji otomatis lengkap | PPh 21, BPJS Calculator |
| Reports & Analytics | Dashboard dengan chart dan export | Chart.js, Excel, PDF |
Tech Stack
Memilih tech stack yang tepat seperti memilih peralatan tukang yang berkualitas - tools yang baik membuat pekerjaan lebih efisien dan hasilnya lebih rapi. Dalam kursus ini, kita menggunakan kombinasi teknologi yang sudah teruji di production oleh ribuan perusahaan di seluruh dunia.
Di sisi backend, Laravel 12 menjadi fondasi utama. Laravel dipilih karena syntax yang elegant, ekosistem yang luas, dan dokumentasi yang sangat lengkap. MySQL sebagai database memberikan keandalan dan performa untuk menyimpan jutaan record data karyawan. Package seperti Spatie Permission dan Maatwebsite Excel mempercepat development fitur kompleks yang biasanya memakan waktu berminggu-minggu.
Di sisi frontend, React dengan TypeScript memberikan type safety yang mencegah banyak bug sebelum kode berjalan. Tailwind CSS memungkinkan styling yang konsisten dan cepat. Library khusus seperti face-api.js untuk face recognition dan Recharts untuk chart sudah terintegrasi dengan baik di ekosistem React. Semua teknologi ini dipilih karena demand di job market sangat tinggi, jadi skill yang Anda pelajari langsung applicable untuk karir:
Alur Kerja Laravel + Inertia + React
Inertia.js adalah "jembatan" antara Laravel dan React. Keuntungannya:
- Tidak perlu API - Data langsung dari Controller ke React
- SEO Friendly - Server-side rendering
- Laravel Routing - Tetap pakai route Laravel biasa
- Form Handling - Validasi error otomatis ke React
Prasyarat
Sebelum memulai kursus ini, penting untuk memastikan Anda sudah memiliki fondasi yang cukup. Bayangkan seperti ingin belajar bermain gitar listrik - Anda setidaknya perlu tahu cara memegang pick dan chord dasar. Sama halnya dengan kursus ini, Anda perlu pemahaman dasar beberapa teknologi sebelum melanjutkan.
Jangan khawatir jika Anda belum menguasai semuanya dengan sempurna. Yang penting adalah Anda sudah familiar dengan konsep-konsep dasar dan siap untuk belajar hal baru. Kursus ini akan menjelaskan setiap konsep advanced dengan detail, asalkan Anda sudah punya pondasi yang cukup untuk mengikuti penjelasannya.
Berikut adalah daftar software yang perlu terinstall dan pengetahuan dasar yang perlu Anda miliki sebelum memulai:
Software Requirements
- PHP 8.2 atau lebih tinggi
- Composer 2.x
- Node.js 18.x atau lebih tinggi
- NPM atau Yarn
- MySQL 8.x atau MariaDB 10.x
- Git
Knowledge Requirements
- Dasar-dasar PHP dan OOP
- Pemahaman dasar Laravel
- Dasar-dasar JavaScript/TypeScript
- Pemahaman dasar React
- Familiar dengan SQL
Target Audience
Kursus ini dirancang untuk berbagai level developer dengan tujuan berbeda. Tidak peduli apakah Anda seorang backend developer yang ingin expand ke frontend, atau sebaliknya, konten ini akan membantu Anda menjadi full-stack developer yang kompeten.
Bayangkan kursus ini seperti jembatan penghubung antara berbagai skill. Jika Anda sudah jago Laravel tapi masih asing dengan React, kursus ini akan memperkenalkan React dengan cara yang familiar bagi developer PHP. Sebaliknya, jika Anda frontend developer yang ingin memahami backend, Laravel akan terasa intuitif karena konsep MVC yang jelas.
Berikut adalah profil peserta yang paling cocok untuk mengikuti kursus ini:
- PHP/Laravel Developer - yang ingin belajar React dan modern frontend
- Frontend Developer - yang ingin belajar backend dengan Laravel
- Full-stack Developer - yang ingin membangun aplikasi enterprise
- Mahasiswa IT - yang ingin project portfolio berkualitas
- Freelancer - yang ingin expand skill untuk project HRIS
Struktur Kursus (Detail)
Kursus ini terdiri dari 14 section yang disusun secara sistematis dari yang paling fundamental hingga yang paling advanced. Setiap section memiliki tujuan pembelajaran yang jelas dan output yang konkret - Anda tidak akan hanya membaca teori, tetapi benar-benar membangun fitur yang berfungsi.
Estimasi waktu di tabel berikut adalah untuk pemula yang baru pertama kali mengerjakan project seperti ini. Jika Anda sudah punya pengalaman dengan Laravel atau React, kemungkinan bisa lebih cepat. Yang penting bukan seberapa cepat Anda menyelesaikan, tetapi seberapa dalam Anda memahami setiap konsep.
Berikut adalah breakdown detail setiap section dengan topik, jumlah lesson, estimasi waktu, dan output yang akan Anda hasilkan:
| Section | Topik | Lessons | Waktu | Output |
|---|---|---|---|---|
| 1 | Project Setup | 6 | 2-3 jam | Project Laravel + React siap pakai |
| 2 | Database Design | 4 | 2 jam | ERD + Migration lengkap |
| 3 | Authentication | 5 | 3 jam | Login, Register, Multi-role |
| 4 | Dashboard | 4 | 2 jam | Dashboard dengan statistik |
| 5 | Master Data | 8 | 4 jam | CRUD Departemen, Jabatan, dll |
| 6 | Employee | 10 | 5 jam | Manajemen data karyawan lengkap |
| 7 | Face Recognition | 6 | 4 jam | Registrasi + verifikasi wajah |
| 8 | Attendance | 8 | 4 jam | Absensi + Geofencing |
| 9 | Overtime & WFH | 6 | 3 jam | Pengajuan lembur + WFH |
| 10 | Leave Management | 7 | 4 jam | Cuti dengan approval workflow |
| 11 | Payroll Components | 8 | 4 jam | Setup komponen gaji + BPJS |
| 12 | Payroll Process | 6 | 3 jam | Proses gaji + slip gaji PDF |
| 13 | Reports | 5 | 3 jam | Laporan + Export Excel/PDF |
| 14 | Deployment | 4 | 2 jam | Deploy ke server production |
Waktu bisa lebih cepat jika Anda sudah familiar dengan Laravel atau React.
Apakah Saya Siap Mengikuti Kursus Ini?
Sebelum melanjutkan ke lesson praktik, mari kita lakukan self-assessment singkat. Tujuannya bukan untuk menakut-nakuti, tetapi untuk membantu Anda memahami di mana posisi Anda saat ini. Bayangkan ini seperti tes kesehatan sebelum mendaki gunung - lebih baik tahu kondisi sekarang daripada terjebak di tengah perjalanan.
Jangan khawatir jika Anda belum bisa menjawab semua pertanyaan di bawah dengan sempurna. Yang penting adalah Anda sudah familiar dengan konsep-konsep dasar dan punya kemauan untuk belajar. Kursus ini akan menjelaskan setiap konsep baru dengan detail, lengkap dengan analogi yang mudah dipahami.
Coba jawab pertanyaan-pertanyaan berikut dalam pikiran Anda. Ini akan membantu mengukur seberapa siap Anda untuk mengikuti kursus ini dan area mana yang mungkin perlu Anda perkuat terlebih dahulu:
PHP Dasar (minimal 3 dari 5):
1. Apa perbedaan
$this dan self:: di PHP?2. Bagaimana cara membuat class dan object di PHP?
3. Apa itu namespace dan use statement?
4. Bagaimana cara membuat function dengan parameter default?
5. Apa perbedaan array biasa dan associative array?
Laravel Dasar (minimal 2 dari 4):
1. Apa itu Route, Controller, dan View di Laravel?
2. Bagaimana cara membuat migration dan menjalankannya?
3. Apa itu Eloquent Model dan bagaimana cara query data?
4. Bagaimana cara mengirim data dari Controller ke View?
JavaScript/React Dasar (minimal 2 dari 4):
1. Apa perbedaan
let, const, dan var?2. Apa itu arrow function
() => {}?3. Apa itu component di React?
4. Bagaimana cara menggunakan
useState untuk state management?Database (minimal 2 dari 3):
1. Bagaimana cara SELECT data dengan WHERE dan JOIN?
2. Apa itu primary key dan foreign key?
3. Bagaimana cara INSERT, UPDATE, dan DELETE data?
Bisa jawab 70%+ pertanyaan:
Selamat! Anda siap mengikuti kursus ini. Langsung lanjut ke lesson berikutnya.
Bisa jawab 50-70% pertanyaan:
Anda bisa mengikuti kursus ini, tapi mungkin perlu waktu lebih lama. Siapkan Google/dokumentasi untuk referensi.
Bisa jawab kurang dari 50%:
Disarankan untuk belajar dasar-dasar dulu. Berikut resource gratis yang bisa membantu:
- PHP: PHP Manual atau W3Schools PHP
- Laravel: Laracasts - Laravel From Scratch (gratis)
- React: React Official Tutorial
- SQL: W3Schools SQL
Checklist Software - Apa yang Harus Disiapkan?
Sebelum ke Lesson 3 (Installation), pastikan software berikut sudah terinstall di komputer Anda. Jika belum, ikuti panduan instalasi di bawah.
| Software | Versi | Cara Cek | Status |
|---|---|---|---|
| PHP | 8.2+ | php -v |
[ ] |
| Composer | 2.x | composer -V |
[ ] |
| Node.js | 18.x+ | node -v |
[ ] |
| NPM | 9.x+ | npm -v |
[ ] |
| MySQL | 8.x | mysql --version |
[ ] |
| Git | 2.x | git --version |
[ ] |
| Code Editor | Any | VS Code (recommended) | [ ] |
Cara Termudah (Windows):
Install Laragon - sudah include PHP, MySQL, Composer, Node.js dalam satu paket!
Cara Termudah (Mac):
Install Laravel Herd - one-click setup untuk Laravel development.
Install Manual (Semua OS):
- PHP + MySQL: XAMPP atau MAMP
- Composer: getcomposer.org
- Node.js + NPM: nodejs.org (pilih LTS version)
- Git: git-scm.com
- VS Code: code.visualstudio.com
- PHP Intelephense - Autocomplete PHP
- Laravel Blade Snippets - Syntax highlighting Blade
- ES7+ React/Redux/React-Native snippets - Snippets React
- Tailwind CSS IntelliSense - Autocomplete Tailwind
- Prettier - Code formatter
- GitLens - Git integration
Jangan Khawatir Jika...
Banyak pemula merasa takut atau ragu sebelum memulai kursus. Berikut beberapa kekhawatiran umum dan jawabannya:
| "Saya belum pernah pakai TypeScript" | Tidak masalah! TypeScript hanya JavaScript dengan type hints. Kita akan jelaskan setiap syntax baru yang muncul. Anggap saja seperti JavaScript dengan "petunjuk" tambahan. |
| "Saya belum pernah pakai Inertia.js" | Justru itu yang akan dipelajari! Inertia sangat mudah - bayangkan seperti mengirim data dari Controller langsung ke React tanpa perlu membuat API. |
| "Face Recognition terdengar rumit" | Kita pakai library face-api.js yang sudah jadi. Anda tidak perlu paham machine learning - cukup panggil fungsi yang sudah disediakan. |
| "Saya takut ketinggalan" | Kursus ini self-paced. Anda bisa pause, rewind, dan ulangi kapanpun. Setiap lesson punya checkpoint untuk memastikan pemahaman. |
| "Perhitungan payroll/pajak rumit" | Kita akan breakdown step-by-step dengan contoh angka nyata. Rumus PPh 21 dan BPJS akan dijelaskan dengan tabel yang mudah dipahami. |
| "Laptop saya spek rendah" | Minimal RAM 4GB dan storage 10GB kosong sudah cukup. Laravel + React tidak berat seperti Android Studio atau Unity. |
Preview Hasil Akhir - Apa yang Akan Anda Buat?
Berikut adalah preview fitur-fitur utama yang akan Anda bangun di kursus ini. Semua screenshot ini dari aplikasi HRIS yang akan kita buat bersama:
Bukan copy-paste dari template, tapi membangun dari nol dengan pemahaman penuh. Di akhir kursus, Anda akan punya:
- Source code lengkap yang bisa di-customize
- Pemahaman arsitektur Laravel + Inertia + React
- Portfolio project yang impressive untuk interview
- Skill yang bisa langsung dipakai untuk freelance atau kerja
Checkpoint - Review Pemahaman
Sebelum melanjutkan ke lesson berikutnya, pastikan Anda sudah memahami konsep-konsep dasar berikut. Jawab pertanyaan di bawah ini dalam pikiran Anda untuk mengukur pemahaman:
1. Definisi HRIS:
Apa itu HRIS? Jawab dalam satu kalimat yang mencakup fungsi utamanya.
2. Manfaat untuk Perusahaan:
Sebutkan minimal 3 alasan mengapa perusahaan membutuhkan HRIS?
- Dari sisi efisiensi
- Dari sisi akurasi data
- Dari sisi keamanan
3. Tech Stack Backend:
Apa peran masing-masing teknologi backend yang akan digunakan?
- Laravel: untuk apa?
- MySQL: untuk apa?
- Spatie Permission: untuk apa?
4. Tech Stack Frontend:
Apa peran masing-masing teknologi frontend yang akan digunakan?
- React: untuk apa?
- TypeScript: untuk apa?
- Tailwind CSS: untuk apa?
5. Bridge Technology:
Apa keuntungan Inertia.js dibanding REST API tradisional? Sebutkan minimal 3 keuntungan.
6. Fitur Unggulan:
Sebutkan 4 fitur unggulan HRIS yang akan dibangun beserta teknologi yang digunakan:
- Face Recognition menggunakan apa?
- Geofencing menggunakan apa?
- Multi-role menggunakan apa?
- Payroll otomatis mencakup apa saja?
1. HRIS adalah sistem digital untuk mengelola data karyawan, absensi, gaji, dan cuti secara otomatis dan terintegrasi.
2. Alasan perusahaan membutuhkan HRIS:
- Efisiensi: Proses otomatis, tidak perlu input manual berulang
- Akurasi: Mengurangi human error dalam perhitungan gaji dan absensi
- Keamanan: Data tersimpan di database dengan backup, bukan spreadsheet tercecer
3. Tech Stack Backend:
- Laravel 12: Framework PHP untuk business logic, API, dan routing
- MySQL 8: Database untuk menyimpan semua data karyawan, absensi, payroll
- Spatie Permission: Package untuk mengelola role dan permission (super-admin, hr-manager, finance, manager, employee)
4. Tech Stack Frontend:
- React 18.2: Library untuk membangun UI yang interaktif dan reaktif
- TypeScript 5: Superset JavaScript dengan type safety untuk mengurangi bug
- Tailwind CSS 3.x: Framework CSS utility-first untuk styling cepat dan konsisten
5. Keuntungan Inertia.js:
- Tidak perlu membuat API endpoint terpisah - data langsung dari Controller
- Validasi error Laravel otomatis tersedia di React component
- SEO friendly dengan server-side rendering
- Tetap menggunakan routing Laravel biasa
6. Fitur Unggulan:
- Face Recognition: face-api.js + TensorFlow.js untuk verifikasi wajah
- Geofencing: Geolocation API + Haversine formula untuk validasi lokasi
- Multi-role: Spatie Permission untuk 5 role (super-admin, hr-manager, finance, manager, employee)
- Payroll: Perhitungan PPh 21, BPJS Kesehatan, BPJS Ketenagakerjaan otomatis
Link Dokumentasi Resmi
Berikut adalah dokumentasi resmi dari teknologi yang akan kita gunakan. Bookmark link ini untuk referensi selama mengikuti kursus:
Ringkasan
1. Konsep HRIS: Sistem digital untuk mengelola data karyawan, absensi, payroll, dan cuti
2. Analogi HRIS: Seperti asisten HR digital yang bekerja 24/7
3. Tech Stack Backend: Laravel 12, MySQL 8, Spatie Permission
4. Tech Stack Frontend: React 18.2, TypeScript 5, Tailwind CSS 3.x
5. Bridge Technology: Inertia.js v2 untuk menghubungkan Laravel dengan React tanpa REST API
6. Fitur Unggulan: Face Recognition, Geofencing, Multi-role, Payroll otomatis
Di lesson 2, kita akan mempelajari bagaimana Laravel, Inertia.js, dan React bekerja bersama secara detail. Anda akan memahami:
- Request Flow - Bagaimana request dari browser sampai ke database dan kembali ke UI
- Folder Structure - Struktur folder Laravel dengan React (bukan Blade)
- Data Flow - Bagaimana data mengalir dari Controller ke React component
- Form Handling - Bagaimana validasi error Laravel ditampilkan di React
Pemahaman arsitektur ini sangat penting sebelum kita mulai coding di lesson 3 (Installation).