User pertama kali datang ke website akan di tampilkan halaman utama.
User harus login terlebih dahulu sebelum masuk ke halaman dashboard
Sumber Gambar: @setsulena
User bisa melihat tampilan semua total siswa yang hadir, terlambat, sakit, izin, dan alpha di hari ini/sekarang (Today).
Informasi: Data di ditampilkan berdasarkan hari ini/sekarang. Jika sudah berganti hari ke esok hari, data akan di reset menjadi 0.
User bisa mengabsen siswa satu per satu secara realtime (Update tanggal dan status kehadiran langsung di hari ini) hanya dengan menekan salah satu tombol.
Tips: Jangan lupa untuk menekan tombol Update Tanggal tiap berganti hari dan sebelum absen para siswa satu per satu.
User bisa menambahkan data siswa, mengubah data siswa, dan menghapus data siswa.
Maaf flowchart kurang niat 😅 (gk kek gini harusnya)
- Typescript
- Next js
- Tanstack React Query
- Tailwindcss
- Shadcn UI
- Postgresql
- Prisma
- VsCodium (Text Editor)
- Excalidraw (Gambar Flowchart)
- Supabase (Gambar ERD)
- Prisma studio (Table editor)
- Markdown (Format file dokumentasi)
- Notion (Aplikasi pencatat untuk membuat dokumentasi)
- Autentikasi (Login & Logout)
- Dashboard Analitik keseluruhan secara real time untuk halaman data administrator
- Create, Read, Update, Delete untuk halaman data siswa
- Tombol klik absensi siswa secara real time
- Pencarian data berdasarkan nama siswa
- Tombol Filter berdasarkan kelas
- Pagination
- Tema gelap dan terang
- Sudah responsive di berbagai device
model User {
id String @id @default(cuid()) @map("_id")
name String
email String @unique
image String?
role String @default("user")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
sessions Session[]
accounts Account[]
}
model Session {
id String @id @default(cuid()) @map("_id")
userId String
token String
expiresAt DateTime
ipAddress String?
userAgent String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
model Account {
id String @id @default(cuid()) @map("_id")
userId String
accountId String
providerId String
accessToken String?
refreshToken String?
accessTokenExpiresAt DateTime?
refreshTokenExpiresAt DateTime?
scope String?
password String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
enum GenderEnum {
laki_laki
perempuan
}
model Siswa {
id_siswa Int @id @default(autoincrement())
nis Int
nama String
kelasId Int
gender GenderEnum
kehadiran Kehadiran?
kelas Kelas @relation(fields: [kelasId], references: [id_kelas])
created_at DateTime @default(now())
}
model Kelas {
id_kelas Int @id @default(autoincrement())
nama_kelas String
Siswa Siswa[]
}
enum KehadiranEnum {
hadir
terlambat
sakit
izin
alpha
}
model Kehadiran {
id_kehadiran Int @id @default(autoincrement())
tanggal DateTime @default(now())
kehadiran KehadiranEnum @default(hadir)
siswaId Int @unique
Siswa Siswa @relation(fields: [siswaId], references: [id_siswa], onDelete: Cascade)
created_at DateTime @default(now())
}- Git clone repo ini atau download zip
git clone https://github.com/IRTIDEATH/Absensi-Sederhana.git- Buka text editor anda dan kita akan install package, buka terminal, lalu jalankan
npm install- Jika sudah selesai menginstall, kita akan melakukan migrasi database ke local
- Buka file .env.example, rename file menjadi .env
- Masukkan database url anda
DATABASE_URL="postgresql://postgres:[YOUR_PASSWORD]@localhost:[YOUR_PORT]/[YOUR_DB_NAME]?schema=public"- Buka terminal lalu jalankan
npx prisma migrate dev- Projek sudah siap dijalankan dan dikembangkan
- dev
npm run dev- build
npm run build- preview
npm run start