152 lines
5.8 KiB
HTML
152 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DFD Sistem Identia</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
<style>
|
|
@media print {
|
|
@page {
|
|
size: portrait;
|
|
margin: 10mm;
|
|
}
|
|
}
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #fff;
|
|
color: #000;
|
|
margin: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.card {
|
|
background: #fff;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
overflow-x: auto;
|
|
}
|
|
h1, h2 {
|
|
text-align: center;
|
|
color: #000;
|
|
}
|
|
p {
|
|
color: #000;
|
|
}
|
|
ul {
|
|
color: #000;
|
|
background: #fff;
|
|
padding: 15px 30px;
|
|
border: 1px solid #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Gambar Data Flow Diagram (DFD) - Identia System</h1>
|
|
<p>Simbol disesuaikan dengan standar DFD Campuran (Gane/Sarson untuk Data Store):</p>
|
|
<ul>
|
|
<li><b>Entitas Eksternal:</b> Persegi Panjang</li>
|
|
<li><b>Proses:</b> Lingkaran (Satu Garis)</li>
|
|
<li><b>Data Store:</b> Tabel Terbuka Kanan (Gane/Sarson)</li>
|
|
<li><b>Aliran Data:</b> Tanda Panah</li>
|
|
</ul>
|
|
|
|
<div class="card">
|
|
<h2>1. DFD Level 0 (Context Diagram)</h2>
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
classDef entity fill:#fff,stroke:#000,stroke-width:2px,color:#000,font-weight:bold
|
|
classDef process fill:#fff,stroke:#000,stroke-width:2px,color:#000,font-weight:bold
|
|
|
|
Admin["Admin (Dashboard)"]:::entity
|
|
Occupant["Penghuni"]:::entity
|
|
ESP["Alat Scan Pintu (ESP32)"]:::entity
|
|
|
|
Sistem(("0. Sistem Identia")):::process
|
|
|
|
Admin -->|"Data Profil & Pengaturan"| Sistem
|
|
Sistem -->|"Laporan Kehadiran & Notifikasi"| Admin
|
|
|
|
Occupant -->|"Pindai Sidik Jari / Wajah"| Sistem
|
|
Sistem -->|"Status Pintu (Terbuka/Ditolak)"| Occupant
|
|
|
|
ESP -->|"Kirim Log Identitas Scan"| Sistem
|
|
Sistem -->|"Perintah Buka Pintu"| ESP
|
|
|
|
linkStyle default stroke:#000,stroke-width:2px,color:#000
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>2. DFD Level 1 (Proses Utama)</h2>
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
classDef entity fill:#fff,stroke:#000,stroke-width:2px,color:#000,font-weight:bold
|
|
classDef process fill:#fff,stroke:#000,stroke-width:2px,color:#000,font-weight:bold
|
|
classDef datastore fill:transparent,stroke:none,color:#000,font-weight:bold
|
|
|
|
%% Entitas Eksternal
|
|
Admin["Admin (Dashboard)"]:::entity
|
|
Occupant["Penghuni"]:::entity
|
|
ESP["Alat Scan Pintu (ESP32)"]:::entity
|
|
|
|
%% Proses Inti
|
|
P1(("1. Pendataan Penghuni")):::process
|
|
P2(("2. Autentikasi Akses Pintu")):::process
|
|
P3(("3. Pencatatan Kehadiran")):::process
|
|
P4(("4. Penyiaran Notifikasi")):::process
|
|
|
|
%% Data Store
|
|
D1["<div style='display:flex; border-top:2px solid #000; border-bottom:2px solid #000; border-left:2px solid #000; border-right:none;'><div style='border-right:2px solid #000; padding:8px;'>D1</div><div style='padding:8px 15px;'>Data Profil Penghuni</div></div>"]:::datastore
|
|
D2["<div style='display:flex; border-top:2px solid #000; border-bottom:2px solid #000; border-left:2px solid #000; border-right:none;'><div style='border-right:2px solid #000; padding:8px;'>D2</div><div style='padding:8px 15px;'>Data Riwayat Akses</div></div>"]:::datastore
|
|
|
|
%% 1. Alur Manajemen Data
|
|
Admin -->|"Input Profil Baru / Ubah"| P1
|
|
P1 -->|"Simpan Profil"| D1
|
|
D1 -->|"Baca Daftar Profil"| P1
|
|
P1 -->|"Tampil Data ke Dasbor"| Admin
|
|
|
|
%% 2. Alur Scanning Pintu
|
|
Occupant -->|"Pindai Jari / Wajah"| ESP
|
|
ESP -->|"Kirim Identitas Scan"| P2
|
|
D1 -->|"Validasi Identitas"| P2
|
|
P2 -->|"Status Buka Pintu"| ESP
|
|
ESP -->|"Pintu Terbuka"| Occupant
|
|
|
|
%% 3. Alur Pencatatan Log
|
|
P2 -->|"Kirim Status Keberhasilan"| P3
|
|
P3 -->|"Catat Waktu Kehadiran"| D2
|
|
D2 -->|"Baca Rekapitulasi"| P3
|
|
P3 -->|"Tampil Laporan Absensi"| Admin
|
|
|
|
%% 4. Alur Pemberitahuan
|
|
D2 -->|"Aktivitas Akses Masuk Baru"| P4
|
|
P4 -->|"Kirim Pesan Pop-up (Realtime)"| Admin
|
|
|
|
linkStyle default stroke:#000,stroke-width:2px,color:#000
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: 'base',
|
|
securityLevel: 'loose',
|
|
themeVariables: {
|
|
lineColor: '#000000',
|
|
textColor: '#000000',
|
|
primaryColor: '#ffffff',
|
|
primaryBorderColor: '#000000',
|
|
edgeLabelBackground: '#ffffff'
|
|
},
|
|
flowchart: { htmlLabels: true }
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|