wartana/sidak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Photo Upload, Zoom/Pan UI, and Default Placeholders

Browse Source
This commit is contained in:
wartana
2026-01-18 17:12:52 +08:00
parent 74b8f572a2
commit c5abd68e9e
15 changed files with 569 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -13,3 +13,6 @@ Thumbs.db
# Dependencies (if any in future)
node_modules/
vendor/
# Uploads
foto/

18
admin/kartu/add_kartu.php
View File

@@ -58,6 +58,13 @@
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Foto KK</label>
<div class="col-sm-6">
<input type="file" class="form-control" id="foto_kk" name="foto_kk">
</div>
</div>
</div>
<div class="card-footer">
<input type="submit" name="Simpan" value="Simpan" class="btn btn-info">
@@ -69,8 +76,14 @@
<?php
if (isset ($_POST['Simpan'])){
$sumber = @$_FILES['foto_kk']['tmp_name'];
$target = 'foto/kk/';
$nama_file = @$_FILES['foto_kk']['name'];
$pindah = move_uploaded_file($sumber, $target.$nama_file);
//mulai proses simpan data
$sql_simpan = "INSERT INTO tb_kk (no_kk, kepala, desa, rt, rw, kec, kab, prov) VALUES (
$sql_simpan = "INSERT INTO tb_kk (no_kk, kepala, desa, rt, rw, kec, kab, prov, foto_kk) VALUES (
'".$_POST['no_kk']."',
'".$_POST['kepala']."',
'".$_POST['desa']."',
@@ -78,7 +91,8 @@
'".$_POST['rw']."',
'".$_POST['kec']."',
'".$_POST['kab']."',
'".$_POST['prov']."')";
'".$_POST['prov']."',
'".$nama_file."')";
$query_simpan = mysqli_query($koneksi, $sql_simpan);
mysqli_close($koneksi);

11
admin/kartu/anggota.php
View File

@@ -42,6 +42,17 @@
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Foto KK</label>
<div class="col-sm-6">
<?php if(!empty($data_cek['foto_kk'])): ?>
<img src="foto/kk/<?php echo $data_cek['foto_kk']; ?>" width="300px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer;" onclick="showImage(this.src)" title="Klik untuk memperbesar">
<?php else: ?>
<img src="dist/img/noimage.png" width="300px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px;">
<?php endif; ?>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Anggota</label>
<div class="col-sm-4">

11
admin/kartu/anggota_full.php
View File

@@ -40,6 +40,17 @@
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Foto KK</label>
<div class="col-sm-6">
<?php if(!empty($data_cek['foto_kk'])): ?>
<img src="foto/kk/<?php echo $data_cek['foto_kk']; ?>" width="300px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer;" onclick="showImage(this.src)" title="Klik untuk memperbesar">
<?php else: ?>
<img src="dist/img/noimage.png" width="300px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px;">
<?php endif; ?>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-striped">

44
admin/kartu/edit_kartu.php
View File

@@ -84,6 +84,24 @@
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Foto KK</label>
<div class="col-sm-6">
<?php if(!empty($data_cek['foto_kk'])): ?>
<img src="foto/kk/<?php echo $data_cek['foto_kk']; ?>" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer;" onclick="showImage(this.src)" title="Klik untuk memperbesar">
<?php else: ?>
<img src="dist/img/noimage.png" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px;">
<?php endif; ?>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Ubah Foto</label>
<div class="col-sm-6">
<input type="file" class="form-control" id="foto_kk" name="foto_kk">
</div>
</div>
</div>
<div class="card-footer">
<input type="submit" name="Ubah" value="Simpan" class="btn btn-success">
@@ -97,6 +115,31 @@
<?php
if (isset ($_POST['Ubah'])){
$sumber = @$_FILES['foto_kk']['tmp_name'];
$target = 'foto/kk/';
$nama_file = @$_FILES['foto_kk']['name'];
$pindah = move_uploaded_file($sumber, $target.$nama_file);
if(!empty($sumber)){
$foto= $data_cek['foto_kk'];
if (file_exists("foto/kk/$foto")){
unlink("foto/kk/$foto");}
$sql_ubah = "UPDATE tb_kk SET
no_kk='".$_POST['no_kk']."',
kepala='".$_POST['kepala']."',
desa='".$_POST['desa']."',
rt='".$_POST['rt']."',
rw='".$_POST['rw']."',
kec='".$_POST['kec']."',
kab='".$_POST['kab']."',
prov='".$_POST['prov']."',
foto_kk='".$nama_file."'
WHERE id_kk='".$_POST['id_kk']."'";
$query_ubah = mysqli_query($koneksi, $sql_ubah);
}elseif(empty($sumber)){
$sql_ubah = "UPDATE tb_kk SET
no_kk='".$_POST['no_kk']."',
kepala='".$_POST['kepala']."',
@@ -108,6 +151,7 @@
prov='".$_POST['prov']."'
WHERE id_kk='".$_POST['id_kk']."'";
$query_ubah = mysqli_query($koneksi, $sql_ubah);
}
mysqli_close($koneksi);
if ($query_ubah) {

4
admin/mendu/data_mendu.php
View File

@@ -48,6 +48,10 @@
<?php echo $data['sebab']; ?>
</td>
<td>
<a href="?page=view-mendu&kode=<?php echo $data['id_mendu']; ?>" title="Detail"
class="btn btn-info btn-sm">
<i class="fa fa-eye"></i>
</a>
<a href="?page=edit-mendu&kode=<?php echo $data['id_mendu']; ?>" title="Ubah"
class="btn btn-success btn-sm">
<i class="fa fa-edit"></i>

133
admin/mendu/view_mendu.php Normal file
View File

@@ -0,0 +1,133 @@
<?php
if(isset($_GET['kode'])){
$sql_cek = "SELECT p.nik, p.nama, p.tempat_lh, p.tgl_lh, p.jekel, p.desa, p.rt, p.rw, p.agama, p.kawin, p.pekerjaan,
m.tgl_mendu, m.sebab, k.no_kk, k.kepala
FROM tb_mendu m
JOIN tb_pdd p ON m.id_pdd=p.id_pend
LEFT JOIN tb_anggota a ON p.id_pend=a.id_pend
LEFT JOIN tb_kk k ON a.id_kk=k.id_kk
WHERE m.id_mendu ='".$_GET['kode']."'";
$query_cek = mysqli_query($koneksi, $sql_cek);
if (!$query_cek) {
die('Error Query: ' . mysqli_error($koneksi));
}
$data_cek = mysqli_fetch_array($query_cek,MYSQLI_BOTH);
if (!$data_cek) {
echo "Data tidak ditemukan! Kemungkinan data penduduk induk telah dihapus atau ID salah.";
exit;
}
}
?>
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">
<i class="fa fa-user"></i> Detail Data Kematian</h3>
<div class="card-tools">
</div>
</div>
<div class="card-body p-0">
<table class="table">
<tbody>
<tr>
<td colspan="2">
<h4><i class="fa fa-users"></i> Asal Keluarga (KK)</h4>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>No KK</b>
</td>
<td>:
<?php echo $data_cek['no_kk']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Kepala Keluarga</b>
</td>
<td>:
<?php echo $data_cek['kepala']; ?>
</td>
</tr>
<tr>
<td colspan="2">
<h4><i class="fa fa-user"></i> Data Individu</h4>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>NIK</b>
</td>
<td>:
<?php echo $data_cek['nik']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Nama</b>
</td>
<td>:
<?php echo $data_cek['nama']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>TTL</b>
</td>
<td>:
<?php echo $data_cek['tempat_lh']; ?>
/
<?php echo $data_cek['tgl_lh']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Jenis Kelamin</b>
</td>
<td>:
<?php echo $data_cek['jekel']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Alamat</b>
</td>
<td>:
<?php echo $data_cek['desa']; ?>, RT
<?php echo $data_cek['rt']; ?>/ RW
<?php echo $data_cek['rw']; ?>
</td>
</tr>
<tr>
<td colspan="2">
<h4><i class="fa fa-bed"></i> Data Kematian</h4>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Tanggal Wafat</b>
</td>
<td>:
<?php echo $data_cek['tgl_mendu']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Sebab</b>
</td>
<td>:
<?php echo $data_cek['sebab']; ?>
</td>
</tr>
</tbody>
</table>
<div class="card-footer">
<a href="?page=data-mendu" class="btn btn-warning">Kembali</a>
</div>
</div>
</div>

16
admin/pend/add_pend.php
View File

@@ -85,6 +85,13 @@
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Foto KTP</label>
<div class="col-sm-6">
<input type="file" class="form-control" id="foto_ktp" name="foto_ktp">
</div>
</div>
</div>
<div class="card-footer">
<input type="submit" name="Simpan" value="Simpan" class="btn btn-info">
@@ -96,8 +103,14 @@
<?php
if (isset ($_POST['Simpan'])){
$sumber = @$_FILES['foto_ktp']['tmp_name'];
$target = 'foto/ktp/';
$nama_file = @$_FILES['foto_ktp']['name'];
$pindah = move_uploaded_file($sumber, $target.$nama_file);
//mulai proses simpan data
$sql_simpan = "INSERT INTO tb_pdd (nik, nama, tempat_lh, tgl_lh, jekel, desa, rt, rw, agama, kawin, pekerjaan, status) VALUES (
$sql_simpan = "INSERT INTO tb_pdd (nik, nama, tempat_lh, tgl_lh, jekel, desa, rt, rw, agama, kawin, pekerjaan, foto_ktp, status) VALUES (
'".$_POST['nik']."',
'".$_POST['nama']."',
'".$_POST['tempat_lh']."',
@@ -109,6 +122,7 @@
'".$_POST['agama']."',
'".$_POST['kawin']."',
'".$_POST['pekerjaan']."',
'".$nama_file."',
'Ada')";
$query_simpan = mysqli_query($koneksi, $sql_simpan);
mysqli_close($koneksi);

45
admin/pend/edit_pend.php
View File

@@ -125,6 +125,22 @@
<input type="text" class="form-control" id="pekerjaan" name="pekerjaan" value="<?php echo $data_cek['pekerjaan']; ?>"
/>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Foto KTP</label>
<div class="col-sm-6">
<?php if(!empty($data_cek['foto_ktp'])): ?>
<img src="foto/ktp/<?php echo $data_cek['foto_ktp']; ?>" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer;" onclick="showImage(this.src)" title="Klik untuk memperbesar">
<?php else: ?>
<img src="dist/img/noprofile.png" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px;">
<?php endif; ?>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Ubah Foto</label>
<div class="col-sm-6">
<input type="file" class="form-control" id="foto_ktp" name="foto_ktp">
</div>
</div>
</div>
@@ -138,6 +154,34 @@
<?php
if (isset ($_POST['Ubah'])){
$sumber = @$_FILES['foto_ktp']['tmp_name'];
$target = 'foto/ktp/';
$nama_file = @$_FILES['foto_ktp']['name'];
$pindah = move_uploaded_file($sumber, $target.$nama_file);
if(!empty($sumber)){
$foto= $data_cek['foto_ktp'];
if (file_exists("foto/ktp/$foto")){
unlink("foto/ktp/$foto");}
$sql_ubah = "UPDATE tb_pdd SET
nik='".$_POST['nik']."',
nama='".$_POST['nama']."',
tempat_lh='".$_POST['tempat_lh']."',
tgl_lh='".$_POST['tgl_lh']."',
jekel='".$_POST['jekel']."',
desa='".$_POST['desa']."',
rt='".$_POST['rt']."',
rw='".$_POST['rw']."',
agama='".$_POST['agama']."',
kawin='".$_POST['kawin']."',
pekerjaan='".$_POST['pekerjaan']."',
foto_ktp='".$nama_file."'
WHERE id_pend='".$_POST['id_pend']."'";
$query_ubah = mysqli_query($koneksi, $sql_ubah);
}elseif(empty($sumber)){
$sql_ubah = "UPDATE tb_pdd SET
nik='".$_POST['nik']."',
nama='".$_POST['nama']."',
@@ -152,6 +196,7 @@
pekerjaan='".$_POST['pekerjaan']."'
WHERE id_pend='".$_POST['id_pend']."'";
$query_ubah = mysqli_query($koneksi, $sql_ubah);
}
mysqli_close($koneksi);
if ($query_ubah) {

12
admin/pend/view_pend.php
View File

@@ -18,6 +18,18 @@
<div class="card-body p-0">
<table class="table">
<tbody>
<tr>
<td style="width: 150px">
<b>Foto KTP</b>
</td>
<td>
<?php if(!empty($data_cek['foto_ktp'])): ?>
<img src="foto/ktp/<?php echo $data_cek['foto_ktp']; ?>" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer;" onclick="showImage(this.src)" title="Klik untuk memperbesar">
<?php else: ?>
<img src="dist/img/noprofile.png" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px;">
<?php endif; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>NIK</b>

4
admin/pindah/data_pindah.php
View File

@@ -48,6 +48,10 @@
<?php echo $data['alasan']; ?>
</td>
<td>
<a href="?page=view-pindah&kode=<?php echo $data['id_pindah']; ?>" title="Detail"
class="btn btn-info btn-sm">
<i class="fa fa-eye"></i>
</a>
<a href="?page=edit-pindah&kode=<?php echo $data['id_pindah']; ?>" title="Ubah"
class="btn btn-success btn-sm">
<i class="fa fa-edit"></i>

133
admin/pindah/view_pindah.php Normal file
View File

@@ -0,0 +1,133 @@
<?php
if(isset($_GET['kode'])){
$sql_cek = "SELECT p.nik, p.nama, p.tempat_lh, p.tgl_lh, p.jekel, p.desa, p.rt, p.rw, p.agama, p.kawin, p.pekerjaan,
d.tgl_pindah, d.alasan, k.no_kk, k.kepala
FROM tb_pindah d
JOIN tb_pdd p ON d.id_pdd=p.id_pend
LEFT JOIN tb_anggota a ON p.id_pend=a.id_pend
LEFT JOIN tb_kk k ON a.id_kk=k.id_kk
WHERE d.id_pindah ='".$_GET['kode']."'";
$query_cek = mysqli_query($koneksi, $sql_cek);
if (!$query_cek) {
die('Error Query: ' . mysqli_error($koneksi));
}
$data_cek = mysqli_fetch_array($query_cek,MYSQLI_BOTH);
if (!$data_cek) {
echo "Data tidak ditemukan! Kemungkinan data penduduk induk telah dihapus atau ID salah.";
exit;
}
}
?>
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">
<i class="fa fa-user"></i> Detail Data Pindah</h3>
<div class="card-tools">
</div>
</div>
<div class="card-body p-0">
<table class="table">
<tbody>
<tr>
<td colspan="2">
<h4><i class="fa fa-users"></i> Asal Keluarga (KK)</h4>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>No KK</b>
</td>
<td>:
<?php echo $data_cek['no_kk']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Kepala Keluarga</b>
</td>
<td>:
<?php echo $data_cek['kepala']; ?>
</td>
</tr>
<tr>
<td colspan="2">
<h4><i class="fa fa-user"></i> Data Individu</h4>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>NIK</b>
</td>
<td>:
<?php echo $data_cek['nik']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Nama</b>
</td>
<td>:
<?php echo $data_cek['nama']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>TTL</b>
</td>
<td>:
<?php echo $data_cek['tempat_lh']; ?>
/
<?php echo $data_cek['tgl_lh']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Jenis Kelamin</b>
</td>
<td>:
<?php echo $data_cek['jekel']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Alamat</b>
</td>
<td>:
<?php echo $data_cek['desa']; ?>, RT
<?php echo $data_cek['rt']; ?>/ RW
<?php echo $data_cek['rw']; ?>
</td>
</tr>
<tr>
<td colspan="2">
<h4><i class="fa fa-truck"></i> Data Kepindahan</h4>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Tanggal Pindah</b>
</td>
<td>:
<?php echo $data_cek['tgl_pindah']; ?>
</td>
</tr>
<tr>
<td style="width: 150px">
<b>Alasan</b>
</td>
<td>:
<?php echo $data_cek['alasan']; ?>
</td>
</tr>
</tbody>
</table>
<div class="card-footer">
<a href="?page=data-pindah" class="btn btn-warning">Kembali</a>
</div>
</div>
</div>

BIN
dist/img/noimage.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
dist/img/noprofile.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

110
index.php
View File

@@ -576,6 +576,9 @@
case 'del-mendu':
include "admin/mendu/del_mendu.php";
break;
case 'view-mendu':
include "admin/mendu/view_mendu.php";
break;
//pindah
case 'data-pindah':
@@ -590,6 +593,9 @@
case 'del-pindah':
include "admin/pindah/del_pindah.php";
break;
case 'view-pindah':
include "admin/pindah/view_pindah.php";
break;
//datang
case 'data-datang':
@@ -662,6 +668,30 @@
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
<!-- Modal (Image Viewer) -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel">Lihat Foto</h5>
<!-- Toolbar Zoom -->
<div class="ml-auto">
<button class="btn btn-primary btn-sm" onclick="zoomIn()" title="Perbesar"><i class="fa fa-search-plus"></i></button>
<button class="btn btn-warning btn-sm" onclick="zoomReset()" title="Reset"><i class="fa fa-sync"></i></button>
<button class="btn btn-danger btn-sm" onclick="zoomOut()" title="Perkecil"><i class="fa fa-search-minus"></i></button>
</div>
<button type="button" class="close ml-2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center" style="overflow: hidden; height: 85vh; position: relative; background: #333; display: flex; align-items: center; justify-content: center;">
<img id="modalImage" src="" class="img-fluid" alt="Foto Besar" style="cursor: grab; transition: transform 0.1s; transform-origin: center center; max-height: 100%; max-width: 100%;">
</div>
</div>
</div>
</div>
</div>
<!-- ./wrapper -->
@@ -713,6 +743,86 @@
})
</script>
<script>
var scale = 1;
var panning = false;
var pointX = 0;
var pointY = 0;
var startX = 0;
var startY = 0;
var img = document.getElementById('modalImage');
function setTransform() {
img.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
function showImage(src) {
scale = 1;
pointX = 0;
pointY = 0;
img = document.getElementById('modalImage'); // Re-select to be sure
img.src = src;
setTransform();
$('#imageModal').modal('show');
}
function zoomIn() {
scale += 0.2;
setTransform();
}
function zoomOut() {
if (scale > 0.4) {
scale -= 0.2;
setTransform();
}
}
function zoomReset() {
scale = 1;
pointX = 0;
pointY = 0;
setTransform();
}
// Mouse Events for Dragging
// Check if img exists to avoid errors on pages without the modal
if(img) {
img.onmousedown = function (e) {
e.preventDefault();
startX = e.clientX - pointX;
startY = e.clientY - pointY;
panning = true;
img.style.cursor = "grabbing";
}
img.onmouseup = function (e) {
panning = false;
img.style.cursor = "grab";
}
img.onmouseleave = function (e) {
panning = false;
img.style.cursor = "grab";
}
img.onmousemove = function (e) {
e.preventDefault();
if (!panning) return;
pointX = (e.clientX - startX);
pointY = (e.clientY - startY);
setTransform();
}
// Optional: Wheel Zoom
img.onwheel = function (e) {
e.preventDefault();
var delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
(delta > 0) ? zoomIn() : zoomOut();
}
}
</script>
</body>
</html>