penambahan data penelitian

.gitignore

@@ -1,6 +1,5 @@
 # env folder
 env/
 faces/
-image1.jpg
+__pycache__/
-image2.jpg
+*.jpg
-image3.jpg

absensi.json

@@ -1,50 +1,319 @@
 [
     {
-        "date": "22/09/2023",
+        "date": "23/02/2024",
-        "absensi": [
-            {
-                "name": "Aran",
-                "jam_masuk": "00:04:01",
-                "jam_keluar": "13:14:01"
-            }
-        ]
-    },
-    {
-        "date": "22/10/2023",
-        "absensi": [
-            {
-                "name": "Aran",
-                "jam_masuk": "00:04:01",
-                "jam_keluar": "13:14:01"
-            }
-        ]
-    },
-    {
-        "date": "23/11/2023",
-        "absensi": [
-            {
-                "name": "Aran",
-                "jam_masuk": "00:04:01",
-                "jam_keluar": "13:14:01"
-            }
-        ]
-    },
-    {
-        "date": "23/11/2023",
         "absensi": [
             {
                 "name": "Naufal",
-                "jam_masuk": "00:04:01",
+                "jam_masuk": "20:28:59",
-                "jam_keluar": "13:14:01"
+                "jam_keluar": "20:50:27"
+            },
+            {
+                "name": "Aran",
+                "jam_masuk": "20:29:03",
+                "jam_keluar": "20:29:06"
             }
         ]
     },
     {
-        "date": "25/11/2023",
+        "date": "27/02/2024",
+        "absensi": [
+            {
+                "name": "Naufal",
+                "jam_masuk": "16:31:23",
+                "jam_keluar": "16:31:35"
+            }
+        ]
+    },
+    {
+        "date": "07/03/2024",
         "absensi": [
             {
                 "name": "Aran",
-                "jam_masuk": "00:14:28"
+                "jam_masuk": "16:58:46",
+                "jam_keluar": "17:02:35"
+            },
+            {
+                "name": "Naufal",
+                "jam_masuk": "16:58:46",
+                "jam_keluar": "17:02:35"
+            }
+        ]
+    },
+    {
+        "date": "13/03/2024",
+        "absensi": [
+            {
+                "name": "Naufal",
+                "jam_masuk": "23:34:34",
+                "jam_keluar": "23:35:15"
+            }
+        ]
+    },
+    {
+        "date": "24/03/2024",
+        "absensi": [
+            {
+                "name": "Naufal",
+                "jam_masuk": "13:09:36",
+                "jam_keluar": "13:10:54"
+            }
+        ]
+    },
+    {
+        "date": "25/03/2024",
+        "absensi": [
+            {
+                "name": "Armin",
+                "jam_masuk": "10:35:37"
+            },
+            {
+                "name": "Naufal",
+                "jam_masuk": "10:42:31",
+                "jam_keluar": "12:57:56"
+            },
+            {
+                "name": "Zul",
+                "jam_masuk": "10:42:42"
+            },
+            {
+                "name": "Ramli",
+                "jam_masuk": "10:42:58"
+            },
+            {
+                "name": "Dyah",
+                "jam_masuk": "10:43:15"
+            },
+            {
+                "name": "Radit",
+                "jam_masuk": "11:03:55"
+            }
+        ]
+    },
+    {
+        "date": "27/03/2024",
+        "absensi": [
+            {
+                "name": "Armin",
+                "jam_masuk": "08:51:09",
+                "jam_keluar": "13:10:15"
+            },
+            {
+                "name": "Dyah",
+                "jam_masuk": "08:53:23",
+                "jam_keluar": "13:06:21"
+            },
+            {
+                "name": "Arjun",
+                "jam_masuk": "08:54:03",
+                "jam_keluar": "13:10:03"
+            },
+            {
+                "name": "Ayyub",
+                "jam_masuk": "08:54:35",
+                "jam_keluar": "13:10:01"
+            },
+            {
+                "name": "Zul",
+                "jam_masuk": "08:54:45",
+                "jam_keluar": "13:10:08"
+            },
+            {
+                "name": "Naufal",
+                "jam_masuk": "09:01:23",
+                "jam_keluar": "13:11:09"
+            },
+            {
+                "name": "Adit",
+                "jam_masuk": "09:01:57",
+                "jam_keluar": "13:09:55"
+            },
+            {
+                "name": "Ramli",
+                "jam_masuk": "09:07:24",
+                "jam_keluar": "13:10:12"
+            },
+            {
+                "name": "Radit",
+                "jam_masuk": "09:24:40",
+                "jam_keluar": "13:09:58"
+            },
+            {
+                "name": "Adi",
+                "jam_masuk": "09:24:43",
+                "jam_keluar": "13:06:34"
+            }
+        ]
+    },
+    {
+        "date": "28/03/2024",
+        "absensi": [
+            {
+                "name": "Naufal",
+                "jam_masuk": "11:03:55",
+                "jam_keluar": "13:48:18"
+            },
+            {
+                "name": "Aran",
+                "jam_masuk": "11:03:57"
+            },
+            {
+                "name": "Radit",
+                "jam_masuk": "11:04:12",
+                "jam_keluar": "13:47:00"
+            },
+            {
+                "name": "Dyah",
+                "jam_masuk": "11:05:12",
+                "jam_keluar": "13:47:14"
+            },
+            {
+                "name": "Adi",
+                "jam_masuk": "11:05:16",
+                "jam_keluar": "13:47:11"
+            },
+            {
+                "name": "Adit",
+                "jam_masuk": "11:05:21",
+                "jam_keluar": "13:47:03"
+            },
+            {
+                "name": "Ayyub",
+                "jam_masuk": "11:05:28",
+                "jam_keluar": "13:46:57"
+            },
+            {
+                "name": "Arjun",
+                "jam_masuk": "11:05:31",
+                "jam_keluar": "13:46:52"
+            },
+            {
+                "name": "Zul",
+                "jam_masuk": "11:05:33",
+                "jam_keluar": "13:48:18"
+            },
+            {
+                "name": "Ramli",
+                "jam_masuk": "11:05:36",
+                "jam_keluar": "13:46:36"
+            },
+            {
+                "name": "Armin",
+                "jam_masuk": "11:05:38",
+                "jam_keluar": "13:46:29"
+            }
+        ]
+    },
+    {
+        "date": "29/03/2024",
+        "absensi": [
+            {
+                "name": "Radit",
+                "jam_masuk": "10:30:09",
+                "jam_keluar": "16:05:32"
+            },
+            {
+                "name": "Naufal",
+                "jam_masuk": "10:30:09",
+                "jam_keluar": "16:04:09"
+            },
+            {
+                "name": "Dyah",
+                "jam_masuk": "10:34:38",
+                "jam_keluar": "16:06:05"
+            },
+            {
+                "name": "Adit",
+                "jam_masuk": "10:34:52",
+                "jam_keluar": "16:06:03"
+            },
+            {
+                "name": "Adi",
+                "jam_masuk": "10:34:56",
+                "jam_keluar": "16:05:40"
+            },
+            {
+                "name": "Arjun",
+                "jam_masuk": "10:35:08",
+                "jam_keluar": "16:05:19"
+            },
+            {
+                "name": "Zul",
+                "jam_masuk": "10:35:24",
+                "jam_keluar": "16:05:12"
+            },
+            {
+                "name": "Armin",
+                "jam_masuk": "10:35:34",
+                "jam_keluar": "16:05:02"
+            },
+            {
+                "name": "Ramli",
+                "jam_masuk": "10:35:38",
+                "jam_keluar": "16:05:06"
+            },
+            {
+                "name": "Ayyub",
+                "jam_masuk": "10:36:00",
+                "jam_keluar": "16:05:26"
+            }
+        ]
+    },
+    {
+        "date": "03/04/2024",
+        "absensi": [
+            {
+                "name": "Naufal",
+                "jam_masuk": "10:15:09",
+                "jam_keluar": "15:04:09"
+            },
+            {
+                "name": "Radit",
+                "jam_masuk": "10:15:11",
+                "jam_keluar": "15:04:26"
+            },
+            {
+                "name": "Armin",
+                "jam_masuk": "10:15:29",
+                "jam_keluar": "15:04:10"
+            },
+            {
+                "name": "Dyah",
+                "jam_masuk": "10:15:30",
+                "jam_keluar": "15:04:35"
+            },
+            {
+                "name": "Ramli",
+                "jam_masuk": "10:16:08",
+                "jam_keluar": "15:04:15"
+            },
+            {
+                "name": "Ayyub",
+                "jam_masuk": "10:17:00",
+                "jam_keluar": "15:04:29"
+            },
+            {
+                "name": "Aran",
+                "jam_masuk": "10:20:02"
+            },
+            {
+                "name": "Zul",
+                "jam_masuk": "10:20:34",
+                "jam_keluar": "15:04:23"
+            },
+            {
+                "name": "Adi",
+                "jam_masuk": "10:26:48",
+                "jam_keluar": "15:04:38"
+            },
+            {
+                "name": "Arjun",
+                "jam_masuk": "10:28:08",
+                "jam_keluar": "15:04:20"
+            },
+            {
+                "name": "Adit",
+                "jam_masuk": "10:30:32",
+                "jam_keluar": "15:04:31"
             }
         ]
     }

dataset.json

@@ -1 +1 @@
-[{"name": "Naufal", "nik": "1", "gaji": 50000}, {"name": "Aran", "nik": "12345", "gaji": 20000}]
+[{"name": "Naufal", "nik": "1", "gaji": 50000},  {"name": "Armin", "nik": "7372033007880005", "gaji": 50000}, {"name": "Dyah", "nik": "7372017112850107", "gaji": 50000}, {"name": "Ramli", "nik": "7372011502720001", "gaji": 50000}, {"name": "Zul", "nik": "7372012010010006", "gaji": 30000}, {"name": "Ayyub", "nik": "7372032007840005", "gaji": 50000}, {"name": "Adit", "nik": "7372021506960009", "gaji": 100000}, {"name": "Arjun", "nik": "73720416604010002", "gaji": 50000}, {"name": "Radit", "nik": "7372043112880024", "gaji": 50000}, {"name": "Adi", "nik": "7372041012970004", "gaji": 50000}]

flask_app.py

@@ -1,8 +1,10 @@
-from flask import Flask, render_template , request
+from flask import Flask, render_template , request,send_from_directory, abort
 import subprocess
 import threading
 import json
 import time
+from werkzeug.utils import secure_filename
+import os
 
 dataset = "dataset.json"
 absensi = "absensi.json"
@@ -60,6 +62,14 @@ def home():
 
     return render_template('index.html', data=all_data, length=len_all_data, today_date=today_date)
 
+
+@app.route('/faces/<path:filename>')
+def serve_image(filename):
+    try:
+        return send_from_directory('faces', filename)
+    except FileNotFoundError:
+        abort(404)
+
 @app.route('/cek_absensi')
 def cek_absensi():
     today_date = time.strftime("%d/%m/%Y")
@@ -150,9 +160,14 @@ def tambah_karyawan_post():
     nama = request.form['nama']
     nik = request.form['nik']
     gaji = int(request.form['gaji']) 
+    foto = request.files['file'] 
     # print(nama)
     # print(nik)
 
+    if foto:
+        foto_filename = secure_filename(nama + '.jpg')
+        foto.save(os.path.join('faces', foto_filename))
+
     # open the dataset file
     with open(dataset, 'r') as f:
         data = json.load(f)

main.py

@@ -16,7 +16,7 @@ today_date = time.strftime("%d/%m/%Y")
 with open(absensi_file, 'r') as f:
     data = json.load(f)
 
-def face_confidence(face_distance, face_match_threshold=0.6):
+def face_confidence(face_distance, face_match_threshold=0.6): #jika nilai face distance lebih kecil dari 0.6
     range = (1.0 - face_match_threshold)
     linear_val = (1.0 - face_distance) / (range * 2.0)
 
@@ -26,6 +26,7 @@ def face_confidence(face_distance, face_match_threshold=0.6):
         value = (linear_val + ((1.0 - linear_val) * math.pow((linear_val - 0.5) * 2, 0.2))) * 100
         return str(round(value, 2)) + "%"
 
+# melakukan fungsi face recognition
 class FaceRecognition:
     face_locations = []
     face_encodings = []
@@ -59,7 +60,7 @@ class FaceRecognition:
             sys.exit('Video capture is not opened')
 
         no_face_timer = 0
-        no_face_threshold = 5  # Adjust this to your desired timeout in seconds
+        no_face_threshold = 60  # Adjust this to your desired timeout in seconds
 
         while True:
             ret, frame = video_capture.read()

main2.py

@@ -1,7 +1,8 @@
+# daftar karyawan baru menggunakan haarcascade
 import cv2
 import json
 
-dataset = "dataset.json"
+dataset = "dataset.json" # dataset karyawan
 
 
 
@@ -24,6 +25,7 @@ cv2.namedWindow('Image Capture', cv2.WINDOW_NORMAL)
 # Set the window to full screen
 cv2.setWindowProperty('Image Capture', cv2.WND_PROP_FULLSCREEN, cv2.WINDOW_FULLSCREEN)
 
+
 face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
 
 while True:

templates/index.html

@@ -51,14 +51,14 @@
 
 	<div id="wrapper">
 		<div class="main-content container">
-			<div class="row small-spacing">
+			<!-- <div class="row small-spacing">
 				<div class="col-lg-4 col-md-4 col-xs-6">
 					<div class="box-content bg-success text-white" style="background :grey;cursor: pointer;"
 						onclick="goto('home')">
 						<h4 class="box-title">Halaman Utama</h4>
 
 					</div>
-					<!-- /.box-content -->
+					
 				</div>
 				<div class="col-lg-4 col-md-4 col-xs-6">
 					<div class="box-content bg-info text-white" style="background :grey;cursor: pointer"
@@ -66,9 +66,9 @@
 						<h4 class=" box-title">Tambah Data Karyawan</h4>
 
 					</div>
-					<!-- /.box-content -->
+					
-				</div>
 				</div>
+			</div> -->
 			<!-- create a button on center of this -->
 			<div class="row small-spacing text-center">
 				<a href="{{url_for('scan_face')}}" class="btn btn-primary btn-bordered waves-effect waves-light">Lakukan
@@ -127,7 +127,7 @@
 
 			<footer class="footer">
 				<ul class="list-inline">
-					<li>2023 © Naufal.</li>
+					<li>2024 ©CV.TIRTA RAHMAN PAREPARE.</li>
 					<!-- <li><a href="#">Privacy</a></li>
 				<li><a href="#">Terms</a></li>
 				<li><a href="#">Help</a></li> -->

templates/index2.html

@@ -2,30 +2,30 @@
 <html lang="en">
 
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-	<meta name="description" content="">
+  <meta name="description" content="" />
-	<meta name="author" content="">
+  <meta name="author" content="" />
 
-	<title>Sistem Absensi - Halaman Utama</title>
+  <title>Sistem Absensi - Cek Absensi</title>
 
   <!-- Main Styles -->
-	<link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
+  <link rel="stylesheet" href="assets/styles/style-horizontal.min.css" />
 
   <!-- mCustomScrollbar -->
-	<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
+  <link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css" />
 
   <!-- Waves Effect -->
-	<link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
+  <link rel="stylesheet" href="assets/plugin/waves/waves.min.css" />
 
   <!-- Sweet Alert -->
-	<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
+  <link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css" />
 
   <!-- Color Picker -->
-	<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css">
+  <link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css" />
-	<link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
+  <link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css" />
-	<link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
+  <link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css" />
 </head>
 
 <body>
@@ -47,30 +47,24 @@
   </header>
   <!-- /.fixed-header -->
 
-
-
   <div id="wrapper">
     <div class="main-content container">
-
       <div class="row small-spacing">
         <div class="col-xs-2 col-md-2"></div>
         <div class="col-xs-8 col-md-8">
           <div class="box-content card">
             <h4 class="box-title">Tanggal : {{today_date}}</h4>
             <div class="card-content">
-							<table id="example" class="table table-striped table-bordered display" style="width:100%">
+              <table id="example" class="table table-striped table-bordered display" style="width: 100%">
                 <thead>
                   <tr>
                     <td><b>Nama</b></td>
                     <td><b>Jam Masuk</b></td>
                     <td><b>Jam Keluar</b></td>
-
                   </tr>
                 </thead>
                 <tbody>
-									{%if data %}
+                  {%if data %} {% for i in range(0, length) %}
-
-									{% for i in range(0, length) %}
 
                   <tr>
                     <td>{{data[i]['name']}}</td>
@@ -83,22 +77,17 @@
                     <td>-</td>
                     {% endif %}
                   </tr>
-									{% endfor %}
+                  {% endfor %} {% else %}
-									{% else %}
                   <tr>
                     <td colspan="3" class="text-center">Tidak ada data</td>
                   </tr>
                   {% endif %}
                 </tbody>
               </table>
-
             </div>
           </div>
         </div>
         <div class="col-xs-2 col-md-2"></div>
-
-
-
       </div>
 
       <div class="row small-spacing">
@@ -107,20 +96,17 @@
           <div class="box-content card">
             <h4 class="box-title">Bulan/Tahun : {{bulan_ini}}</h4>
             <div class="card-content">
-							<table id="example" class="table table-striped table-bordered display" style="width:100%">
+              <table id="example" class="table table-striped table-bordered display" style="width: 100%">
                 <thead>
                   <tr>
                     <td><b>Nama</b></td>
                     <td><b>Gaji/Hari</b></td>
                     <td><b>Pendapatan/Bulan</b></td>
                     <td><b>Aksi</b></td>
-
                   </tr>
                 </thead>
                 <tbody>
-									{%if data_karyawan %}
+                  {%if data_karyawan %} {% for i in range(0, length_karyawan) %}
-
-									{% for i in range(0, length_karyawan) %}
 
                   <tr>
                     <td>{{data_karyawan[i]['name']}}</td>
@@ -133,31 +119,23 @@
                         onclick="printDiv(`{{data_karyawan[i]['name']}}`,`{{data_karyawan[i]['gaji']}}`,`{{data_karyawan[i]['pendapatan']}}`)">Print
                         Slip Gaji</button>
                     </td>
-
-
                   </tr>
-									{% endfor %}
+                  {% endfor %} {% else %}
-									{% else %}
                   <tr>
                     <td colspan="3" class="text-center">Tidak ada data</td>
                   </tr>
                   {% endif %}
                 </tbody>
               </table>
-
             </div>
           </div>
         </div>
         <div class="col-xs-2 col-md-2"></div>
-
-
-
       </div>
 
-
       <footer class="footer">
         <ul class="list-inline">
-					<li>2023 © Naufal.</li>
+          <li>2024 ©CV.TIRTA RAHMAN PAREPARE.</li>
           <!-- <li><a href="#">Privacy</a></li>
 				<li><a href="#">Terms</a></li>
 				<li><a href="#">Help</a></li> -->
@@ -165,7 +143,8 @@
       </footer>
     </div>
     <!-- /.main-content -->
-	</div><!--/#wrapper -->
+  </div>
+  <!--/#wrapper -->
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]>
       <script src="assets/script/html5shiv.min.js"></script>
@@ -191,9 +170,9 @@
   <script src="assets/scripts/main.min.js"></script>
   <script>
     function goto(stat) {
-			if (stat == 'home') {
+      if (stat == "home") {
         window.location.href = "{{url_for('home')}}";
-			} else if (stat == 'tambah_karyawan') {
+      } else if (stat == "tambah_karyawan") {
         window.location.href = "{{url_for('tambah_karyawan')}}";
       }
     }
@@ -204,55 +183,79 @@
       let numStr = number.toString();
 
       // Use a regular expression to add commas as thousand separators
-			numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
       return numStr;
     }
 
     // Get all <td> elements with the class "ini dia"
-		const tdElements = document.querySelectorAll('td.gajinya');
+    const tdElements = document.querySelectorAll("td.gajinya");
 
     // Iterate through each <td> element
-		tdElements.forEach(td => {
+    tdElements.forEach((td) => {
       // Get the current value of the <td>
       let currentValue = parseFloat(td.textContent);
 
       // Check if the value is a valid number
       if (!isNaN(currentValue)) {
         // Update the content of the <td> with the formatted value
-				td.textContent = 'Rp. ' + addThousandSeparator(currentValue);
+        td.textContent = "Rp. " + addThousandSeparator(currentValue);
       }
     });
 
-
     function addThousandSeparators(value) {
       return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     }
 
-
     function printDiv(name, gaji, pendapatan) {
-			console.log(name, gaji, pendapatan);
+    var this_month = getMonthName(new Date().getMonth()); // Get the current month name
-			var printWindow = window.open('', '', 'height=400,width=800');
+    var printWindow = window.open("", "", "height=600,width=400");
-			printWindow.document.write('<html><head><title>DIV Contents</title>');
+    printWindow.document.write("<html><head><title>Slip Gaji Bulan " + this_month + "</title>");
-			printWindow.document.write('</head><body >');
+    printWindow.document.write("<style>");
-			printWindow.document.write('<h1>Slip Gaji</h1>');
+    printWindow.document.write("body { font-family: Arial, sans-serif; }");
-			printWindow.document.write('<p>Nama : ' + name + '</p>');
+    printWindow.document.write(".header { text-align: center; margin-bottom: 20px; }");
-			printWindow.document.write('<p>Gaji : Rp.' + addThousandSeparator(gaji) + '</p>');
+    printWindow.document.write(".line { border-top: 2px solid #000; margin-bottom: 20px; }");
-			printWindow.document.write('<p>Pendapatan : Rp. ' + addThousandSeparator(pendapatan) + '</p>');
+    printWindow.document.write(".content { display: flex; align-items: flex-start; margin-bottom: 20px; }");
-			printWindow.document.write('<p>Tanggal : {{today_date}}</p>');
+    printWindow.document.write(".content img { width: 110px; height: 160px; margin-right: 20px; }");
-			printWindow.document.write('<p>Terima kasih atas kerja keras anda</p>');
+    printWindow.document.write(".footer { display: flex; justify-content: space-between; margin-top: 20px; }");
-			// ttd
+    printWindow.document.write(".footer p { margin: 0; }");
-			printWindow.document.write('<br><br><br><br>');
+    printWindow.document.write(".signature { margin-top: 40px; text-align: right; }");
-			printWindow.document.write('<p>TTD</p>');
+    printWindow.document.write("</style>");
-			printWindow.document.write('<p>Naufal</p>');
+    printWindow.document.write("</head><body>");
-
+    printWindow.document.write("<div class='header'><h1>Slip Gaji Bulan " + this_month + "</h1></div>");
-
+    printWindow.document.write("<div class='line'></div>");
-			printWindow.document.write('</body></html>');
+    printWindow.document.write("<div class='content'>");
+    printWindow.document.write("<img src='https://absensi_karyawan.kicap-karan.com/faces/" + name + ".jpg' alt='Foto Karyawan'>");
+    printWindow.document.write("<div>");
+    printWindow.document.write("<p>Nama: " + name + "</p>");
+    printWindow.document.write("<p>Gaji: Rp." + addThousandSeparator(gaji) + "</p>");
+    printWindow.document.write("<p>Pendapatan: Rp. " + addThousandSeparator(pendapatan) + "</p>");
+    printWindow.document.write("<p>Tanggal: {{today_date}}</p>");
+    printWindow.document.write("</div>");
+    printWindow.document.write("</div>");
+    printWindow.document.write("<p>Terima kasih atas kerja keras Anda</p>");
+    printWindow.document.write("<div class='line'></div>");
+    printWindow.document.write("<br><br><br><br>");
+    printWindow.document.write("<div class='footer'>");
+    printWindow.document.write("<div class='left-signature'>");
+    printWindow.document.write("<hr>");
+    printWindow.document.write("<p>Tanda Tangan " + name + "</p>");
+    printWindow.document.write("</div>");
+    printWindow.document.write("<div class='right-signature'>");
+    printWindow.document.write("<hr>");
+    printWindow.document.write("<p>Tanda Tangan Pimpinan</p>");
+    printWindow.document.write("</div>");
+    printWindow.document.write("</div>");
+    printWindow.document.write("</body></html>");
     printWindow.document.close();
     printWindow.print();
+}
+
+    function getMonthName(month) {
+      var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+      return months[month];
     }
   </script>
-
 </body>
 
 </html>

templates/scan_face.html

@@ -1,32 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
 
-<head>
+    <title>Sistem Absensi - Halaman Scan</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <title>Sistem Absensi - Halaman Utama</title>
 
     <!-- Main Styles -->
-    <link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
+    <link rel="stylesheet" href="assets/styles/style-horizontal.min.css" />
 
     <!-- mCustomScrollbar -->
-    <link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
+    <link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css" />
 
     <!-- Waves Effect -->
-    <link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
+    <link rel="stylesheet" href="assets/plugin/waves/waves.min.css" />
 
     <!-- Sweet Alert -->
-    <link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
+    <link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css" />
 
     <!-- Color Picker -->
-    <link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css">
+    <link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <header class="fixed-header">
       <div class="header-top">
         <div class="container">
@@ -45,24 +44,18 @@
     </header>
     <!-- /.fixed-header -->
 
-
-
     <div id="wrapper">
       <div class="main-content container">
         <div class="row small-spacing">
           <div class="col-lg-4 col-md-4 col-xs-12">
             <div class="box-content bg-warning text-white">
               <h4 class="box-title">Loading...</h4>
-
             </div>
             <!-- /.box-content -->
           </div>
-
         </div>
         <!-- create a button on center of this -->
 
-
-
         <footer class="footer">
           <ul class="list-inline">
             <li>2023 © Naufal.</li>
@@ -73,7 +66,8 @@
         </footer>
       </div>
       <!-- /.main-content -->
-    </div><!--/#wrapper -->
+    </div>
+    <!--/#wrapper -->
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="assets/script/html5shiv.min.js"></script>
@@ -98,14 +92,14 @@
       $.blockUI({
         message: "Sedang Proses Database",
         css: {
-                border: 'none',
+          border: "none",
-                padding: '15px',
+          padding: "15px",
-                backgroundColor: '#000',
+          backgroundColor: "#000",
-                '-webkit-border-radius': '10px',
+          "-webkit-border-radius": "10px",
-                '-moz-border-radius': '10px',
+          "-moz-border-radius": "10px",
-                opacity: .5,
+          opacity: 0.5,
-                color: '#fff'
+          color: "#fff",
-            }
+        },
       });
       function checkScanStatus() {
         // Make an AJAX request to the /scan_status route
@@ -117,21 +111,19 @@
             // Handle the response data
             console.log(data.scan_status);
             // $("#result").text("Title: " + data.title);
-                    if(data.scan_status == false){
+            if (data.scan_status == false) {
               window.location.href = "http://127.0.0.1:5000/";
             }
           },
           error: function (xhr, status, error) {
             // Handle errors
             console.log("Error: " + error);
-                }
+          },
         });
       }
 
       // Periodically check the scan status every 2 seconds
       setInterval(checkScanStatus, 2000);
     </script>
-
+  </body>
-</body>
-
 </html>

templates/tambah_karyawan.html

@@ -1,35 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="description" content="" />
-	<meta name="description" content="">
+    <meta name="author" content="" />
-	<meta name="author" content="">
 
     <title>Sistem Absensi - Halaman Tambah Karyawan</title>
 
     <!-- Main Styles -->
-	<link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
+    <link rel="stylesheet" href="assets/styles/style-horizontal.min.css" />
 
     <!-- mCustomScrollbar -->
-	<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
+    <link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css" />
 
     <!-- Waves Effect -->
-	<link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
+    <link rel="stylesheet" href="assets/plugin/waves/waves.min.css" />
 
     <!-- Sweet Alert -->
-	<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
+    <link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css" />
 
     <!-- Color Picker -->
-	<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css">
+    <link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css" />
     <!-- Data Tables -->
-	<link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
+    <link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css" />
-	<link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
+    <link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css" />
-</head>
+    #preview { max-width: 300px; max-height: 300px; margin-top: 20px; }
+  </head>
 
-<body>
+  <body>
     <header class="fixed-header">
       <div class="header-top">
         <div class="container">
@@ -48,65 +48,77 @@
     </header>
     <!-- /.fixed-header -->
 
-
-
     <div id="wrapper">
       <div class="main-content container">
-			<div class="row small-spacing">
+        <!-- <div class="row small-spacing">
 				<div class="col-lg-4 col-md-4 col-xs-6">
 					<div class="box-content bg-success text-white" style="background :grey;cursor: pointer;"
 						onclick="goto('home')">
 						<h4 class="box-title">Halaman Utama</h4>
 
 					</div>
-					<!-- /.box-content -->
+					
 				</div>
 				<div class="col-lg-4 col-md-4 col-xs-6">
 					<div class="box-content bg-info text-white" style="background :grey;cursor: pointer"
-						onclick="goto('tambah_karyawan')"">
+						onclick="goto('tambah_karyawan')">
 						<h4 class=" box-title">Tambah Data Karyawan</h4>
 
 					</div>
-					<!-- /.box-content -->
+					
-				</div>
 				</div>
+			</div> -->
         <!-- create a button on center of this -->
         <div class="row small-spacing">
-				<div class="col-lg-4 col-md-4 col-xs-2"></div>
+          <div class="col-lg-2 col-md-2 col-xs-2"></div>
-				<div class="col-lg-4 col-md-4 col-xs-8">
+          <div class="col-lg-8 col-md-8 col-xs-8">
-					<div class="box-content ">
+            <div class="box-content">
               <h4 class="box-title">Informasi Karyawan</h4>
               <div class="card-content">
                 <form>
                   <div class="form-group">
                     <label for="nik">Nomor Induk Karyawan</label>
-									<input type="text" class="form-control" id="nik" name="nik"
+                    <input type="text" class="form-control" id="nik" name="nik" placeholder="Masukkan Nomor Induk Karyawan" />
-										placeholder="Masukkan Nomor Induk Karyawan">
                   </div>
                   <div class="form-group">
                     <label for="nik">Nama Karyawan</label>
-									<input type="text" class="form-control" id="nama" name="nama"
+                    <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan Nama Karyawan" />
-										placeholder="Masukkan Nama Karyawan">
                   </div>
 
                   <div class="form-group">
                     <label for="nik">Gaji Karyawan / Hari</label>
-									<input type="text" class="form-control" id="gaji" name="gaji"
+                    <input
+                      type="text"
+                      class="form-control"
+                      id="gaji"
+                      name="gaji"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');"
-										placeholder="Masukkan Gaji/Hari Karyawan" minlength="6" maxlength="7">
+                      placeholder="Masukkan Gaji/Hari Karyawan"
+                      minlength="6"
+                      maxlength="7"
+                    />
+                  </div>
+
+                  <div class="form-group">
+                    <label for="nik">Foto Karyawan</label>
+                    <input type="file" class="form-control" id="fileInput" name="fileInput" accept="image/*" onchange="previewImage(event)" />
+
+                    <!-- <div id="imageDisplay"></div> -->
+                  </div>
+                  <div class="form-group" id="div-preview" style="display: none">
+                    <center>
+                      <div id="preview" style="height: 250px; width: 150px"></div>
+                    </center>
                   </div>
 
                   <div class="form-group text-center">
-									<button type="button" onclick="tambah_data()"
+                    <button type="button" onclick="tambah_data()" class="btn btn-primary btn-sm waves-effect waves-light">Submit</button>
-										class="btn btn-primary btn-sm waves-effect waves-light">
-										Submit
-									</button>
                   </div>
                 </form>
               </div>
             </div>
           </div>
-				<div class="col-lg-4 col-md-4 col-xs-2"></div>
+          <div class="col-lg-2 col-md-2 col-xs-2"></div>
         </div>
 
         <div class="row small-spacing">
@@ -115,20 +127,17 @@
             <div class="box-content card">
               <h4 class="box-title">Jumlah Karyawan : {{length}} Orang</h4>
               <div class="card-content">
-							<table id="example" class="table table-striped table-bordered display" style="width:100%">
+                <table id="example" class="table table-striped table-bordered display" style="width: 100%">
                   <thead>
                     <tr>
                       <td><b>No</b></td>
                       <td><b>NIK</b></td>
                       <td><b>Nama</b></td>
                       <td><b>Gaji/Hari</b></td>
-
                     </tr>
                   </thead>
                   <tbody>
-									{%if data %}
+                    {%if data %} {% for i in range(0, length) %}
-
-									{% for i in range(0, length) %}
 
                     <tr>
                       <td>{{i+1}}</td>
@@ -136,25 +145,18 @@
                       <td>{{data[i]['name']}}</td>
                       <td class="gajinya">{{data[i]['gaji']}}</td>
                     </tr>
-									{% endfor %}
+                    {% endfor %} {% endif %}
-									{% endif %}
                   </tbody>
                 </table>
-
               </div>
             </div>
           </div>
           <div class="col-xs-2 col-md-2"></div>
-
-
-
         </div>
 
-
-
         <footer class="footer">
           <ul class="list-inline">
-					<li>2023 © Naufal.</li>
+            <li>2024 © CV.TIRTA RAHMAN PAREPARE.</li>
             <!-- <li><a href="#">Privacy</a></li>
 				<li><a href="#">Terms</a></li>
 				<li><a href="#">Help</a></li> -->
@@ -162,7 +164,8 @@
         </footer>
       </div>
       <!-- /.main-content -->
-	</div><!--/#wrapper -->
+    </div>
+    <!--/#wrapper -->
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="assets/script/html5shiv.min.js"></script>
@@ -187,46 +190,105 @@
 
     <script src="assets/scripts/main.min.js"></script>
     <script>
+      function previewImage(event) {
+        var file = event.target.files[0];
+
+        // Check if the file is an image
+        if (file && file.type.startsWith("image/")) {
+          var reader = new FileReader();
+
+          reader.onload = function () {
+            var imgElement = document.createElement("img");
+            imgElement.setAttribute("src", reader.result);
+            imgElement.setAttribute("alt", "Preview Image");
+
+            var previewDiv = document.getElementById("preview");
+            previewDiv.innerHTML = "";
+            previewDiv.appendChild(imgElement);
+            document.getElementById("div-preview").style.display = "block";
+            document.getElementById("preview").style.display = "block";
+
+            // // Display the image in a separate div
+            // var imageDisplayDiv = document.getElementById('imageDisplay');
+            // imageDisplayDiv.innerHTML = '';
+            // var imgClone = imgElement.cloneNode(true);
+            // imageDisplayDiv.appendChild(imgClone);
+          };
+
+          reader.readAsDataURL(file);
+        } else {
+          alert("Please select an image file.");
+          document.getElementById("fileInput").value = ""; // Clear the input
+          document.getElementById("preview").innerHTML = "";
+          document.getElementById("preview").style.display = "none";
+          document.getElementById("div-preview").style.display = "none";
+        }
+      }
+
       function goto(stat) {
-			if (stat == 'home') {
+        if (stat == "home") {
           window.location.href = "{{url_for('home')}}";
-			} else if (stat == 'tambah_karyawan') {
+        } else if (stat == "tambah_karyawan") {
           window.location.href = "{{url_for('tambah_karyawan')}}";
         }
       }
 
       function tambah_data() {
-
+        var nik = $("#nik").val();
-			var nik = $('#nik').val();
+        var nama = $("#nama").val();
-			var nama = $('#nama').val();
+        var gaji = $("#gaji").val();
-			var gaji = $('#gaji').val();
+        var fileInput = document.getElementById("fileInput");
-			if (nik == '' || nama == '' || gaji == '') {
+        if (nik == "" || nama == "" || gaji == "") {
           swal({
             title: "Gagal",
             text: "Data tidak boleh kosong",
             type: "error",
             confirmButtonClass: "btn-danger",
             confirmButtonText: "Ok",
-					closeOnConfirm: false
+            closeOnConfirm: false,
+          });
+        } else if (!fileInput.files || fileInput.files.length === 0) {
+          swal({
+            title: "Gagal",
+            text: "Silakan pilih foto karyawan",
+            type: "error",
+            confirmButtonClass: "btn-danger",
+            confirmButtonText: "Ok",
+            closeOnConfirm: false,
           });
         } else {
           // remove comma from gaji
-				gaji = gaji.replace(/,/g, '');
+          gaji = gaji.replace(/,/g, "");
+          var file = fileInput.files[0];
+          var formData = new FormData();
+          formData.append("file", file);
+          formData.append("nik", nik);
+          formData.append("nama", nama);
+          formData.append("gaji", gaji);
           $.ajax({
-					url: "http://127.0.0.1:5000/tambah_karyawan",
+            url: "https://absensi_karyawan.kicap-karan.com/tambah_karyawan",
             type: "POST",
-					data: {
+            data: formData,
-						nik: nik,
+            contentType: false,
-						nama: nama,
+            processData: false,
-						gaji: gaji
-					},
             success: function (data) {
-						// console.log(data)
+              console.log(data);
-						window.location.href = "{{url_for('scan_face2')}}";
+              // window.location.href = "{{url_for('scan_face2')}}";
+              // create swal message
+              swal({
+                title: "Berhasil",
+                text: "Data karyawan berhasil ditambahkan",
+                type: "success",
+                confirmButtonClass: "btn-success",
+              });
+              // delay 1.5 seconds then reload this page
+              setTimeout(function () {
+                window.location.href = "{{url_for('tambah_karyawan')}}";
+              }, 1500);
             },
             error: function (jqXhr, textStatus, errorThrown) {
               console.log(errorThrown);
-					}
+            },
           });
         }
       }
@@ -237,28 +299,25 @@
         let numStr = number.toString();
 
         // Use a regular expression to add commas as thousand separators
-			numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
         return numStr;
       }
 
       // Get all <td> elements with the class "ini dia"
-		const tdElements = document.querySelectorAll('td.gajinya');
+      const tdElements = document.querySelectorAll("td.gajinya");
 
       // Iterate through each <td> element
-		tdElements.forEach(td => {
+      tdElements.forEach((td) => {
         // Get the current value of the <td>
         let currentValue = parseFloat(td.textContent);
 
         // Check if the value is a valid number
         if (!isNaN(currentValue)) {
           // Update the content of the <td> with the formatted value
-				td.textContent = 'Rp. ' + addThousandSeparator(currentValue);
+          td.textContent = "Rp. " + addThousandSeparator(currentValue);
         }
       });
-
     </script>
-
+  </body>
-</body>
-
 </html>