720 lines
27 KiB
PHP
720 lines
27 KiB
PHP
<?php
|
|
include 'config/database.php';
|
|
|
|
$sql = "SELECT * FROM profil LIMIT 1"; // Ambil semua data dari tabel profil
|
|
$result = $conn->query($sql);
|
|
|
|
if ($result->num_rows > 0) {
|
|
$row = $result->fetch_assoc();
|
|
|
|
// Menyimpan data ke variabel masing-masing
|
|
$profil_nama = $row["profil_nama"];
|
|
$profil_alamat = $row["profil_alamat"];
|
|
$profil_gambarcover = $row["profil_gambarcover"];
|
|
$profil_desmasjid = $row["profil_desmasjid"];
|
|
$profil_gambarstruktur = $row["profil_gambarstruktur"];
|
|
$profil_gambardonasi = $row["profil_gambardonasi"];
|
|
$profil_rekening = $row["profil_rekening"];
|
|
$profil_dompet = $row["profil_dompet"];
|
|
$profil_maps = $row["profil_maps"];
|
|
$profil_alamatlengkap = $row["profil_alamatlengkap"];
|
|
$profil_nohp = $row["profil_nohp"];
|
|
$profil_facebook = $row["profil_facebook"];
|
|
$profil_instagram = $row["profil_instagram"];
|
|
} else {
|
|
// Jika tidak ada data, isi dengan nilai default
|
|
$profil_nama = "Nama tidak ditemukan";
|
|
$profil_alamat = "Alamat tidak ditemukan";
|
|
$profil_gambarcover = "";
|
|
$profil_desmasjid = "";
|
|
$profil_gambarstruktur = "";
|
|
$profil_gambardonasi = "";
|
|
$profil_rekening = "Rekening tidak ditemukan";
|
|
$profil_dompet = "Dompet tidak ditemukan";
|
|
$profil_maps = "Maps tidak ditemukan";
|
|
$profil_alamatlengkap = "Alamat Lengkap tidak ditemukan";
|
|
$profil_nohp = "No HP tidak ditemukan";
|
|
$profil_facebook = "Facebook tidak ditemukan";
|
|
$profil_instagram = "Instagram tidak ditemukan";
|
|
}
|
|
|
|
|
|
$sql = "SELECT * FROM admin LIMIT 1";
|
|
$result = $conn->query($sql);
|
|
|
|
if ($result->num_rows > 0) {
|
|
$row = $result->fetch_assoc();
|
|
|
|
// Menyimpan data ke variabel masing-masing
|
|
$admin_nohp = $row["admin_nohp"];
|
|
$admin_email = $row["admin_email"];
|
|
|
|
}
|
|
|
|
// Ambil semua data kegiatan, urut berdasarkan tanggal mulai secara naik
|
|
$sql = "SELECT * FROM kegiatan ORDER BY kegiatan_tglmulai DESC LIMIT 8";
|
|
$result = $conn->query($sql);
|
|
|
|
$all_berita = [];
|
|
while ($row = $result->fetch_assoc()) {
|
|
$all_berita[] = $row;
|
|
}
|
|
|
|
// Bagi datanya tanpa duplikat
|
|
$berita_utama = isset($all_berita[0]) ? $all_berita[0] : null;
|
|
$berita_standar = array_slice($all_berita, 1, 3); // Ambil data ke-1 sampai ke-3
|
|
$berita_menurun = array_slice($all_berita, 4); // Ambil sisanya
|
|
|
|
|
|
// Mendapatkan bulan dan tahun saat ini
|
|
$bulan_sekarang = date('m');
|
|
$tahun_sekarang = date('Y');
|
|
$bulanInggris = date('F');
|
|
|
|
function bulanIndonesia($bulanInggris) {
|
|
$bulan = [
|
|
'January' => 'Januari', 'February' => 'Februari', 'March' => 'Maret', 'April' => 'April',
|
|
'May' => 'Mei', 'June' => 'Juni', 'July' => 'Juli', 'August' => 'Agustus',
|
|
'September' => 'September', 'October' => 'Oktober', 'November' => 'November', 'December' => 'Desember'
|
|
];
|
|
return $bulan[$bulanInggris] ?? $bulanInggris;
|
|
}
|
|
|
|
$bulanIndonesia = bulanIndonesia($bulanInggris);
|
|
|
|
// Ambil data kas untuk bulan dan tahun saat ini
|
|
$query = "SELECT * FROM dana_kas
|
|
WHERE MONTH(kas_tanggal) = $bulan_sekarang
|
|
AND YEAR(kas_tanggal) = $tahun_sekarang
|
|
ORDER BY kas_tanggal ASC";
|
|
$result = mysqli_query($conn, $query);
|
|
|
|
|
|
|
|
// Hitung saldo dari semua transaksi sebelum bulan & tahun ini
|
|
$saldo_awal_query = "SELECT
|
|
SUM(kas_pemasukan) AS pemasukan_awal,
|
|
SUM(kas_pengeluaran) AS pengeluaran_awal
|
|
FROM dana_kas
|
|
WHERE (YEAR(kas_tanggal) < $tahun_sekarang)
|
|
OR (YEAR(kas_tanggal) = $tahun_sekarang AND MONTH(kas_tanggal) < $bulan_sekarang)";
|
|
$saldo_awal_result = mysqli_query($conn, $saldo_awal_query);
|
|
$saldo_awal_data = mysqli_fetch_assoc($saldo_awal_result);
|
|
|
|
$saldo = $saldo_awal_data['pemasukan_awal'] - $saldo_awal_data['pengeluaran_awal'];
|
|
|
|
|
|
|
|
function convertToEmbedUrl($url) {
|
|
// Jika URL mengandung iframe (kode HTML)
|
|
if (strpos($url, '<iframe') !== false) {
|
|
// Gunakan regex untuk mengekstrak URL dari tag src
|
|
preg_match('/src="([^"]+)"/', $url, $matches);
|
|
if (!empty($matches[1])) {
|
|
return $matches[1]; // Kembalikan URL yang ditemukan
|
|
}
|
|
}
|
|
|
|
// Cek apakah URL adalah short link Google Maps (misalnya, maps.app.goo.gl)
|
|
if (strpos($url, "https://maps.app.goo.gl/") !== false) {
|
|
return ""; // Short URL tidak dapat langsung digunakan
|
|
}
|
|
|
|
// Jika URL adalah Google Maps standar
|
|
if (strpos($url, "https://www.google.com/maps") !== false) {
|
|
// Ubah menjadi format embed yang benar
|
|
$embedUrl = str_replace("/maps/place/", "/maps/embed?pb=", $url);
|
|
$embedUrl = str_replace("/maps/", "/maps/embed?pb=", $embedUrl);
|
|
return $embedUrl;
|
|
}
|
|
|
|
return ""; // Jika URL tidak cocok dengan format yang bisa digunakan
|
|
}
|
|
|
|
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
// Dapatkan input URL
|
|
$profil_maps = isset($_POST["profil_maps"]) ? trim($_POST["profil_maps"]) : "";
|
|
|
|
// Proses URL untuk mendapatkan URL embed yang benar
|
|
$profil_maps = convertToEmbedUrl($profil_maps);
|
|
|
|
// Simpan URL embed ke database
|
|
if (!empty($profil_maps)) {
|
|
$sql = "UPDATE profil SET profil_maps = ? WHERE id = 1";
|
|
$stmt = $conn->prepare($sql);
|
|
$stmt->bind_param("s", $profil_maps);
|
|
$stmt->execute();
|
|
$stmt->close();
|
|
}
|
|
}
|
|
|
|
$conn->close();
|
|
?>
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Masjid-E</title>
|
|
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
|
|
<!-- Favicons -->
|
|
<link href="assets/img/favicon.png" rel="icon">
|
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
|
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
|
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
|
|
|
<!-- Main CSS File -->
|
|
<link href="assets/css/main.css" rel="stylesheet">
|
|
|
|
|
|
|
|
<style>
|
|
#notif {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 9999;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="index-page">
|
|
|
|
<header id="header" class="header d-flex align-items-center fixed-top">
|
|
<div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
|
|
<a href="index.php" class="logo d-flex align-items-center">
|
|
<h1 class="sitename"><?php echo htmlspecialchars($profil_nama); ?></h1>
|
|
</a>
|
|
<nav id="navmenu" class="navmenu">
|
|
<ul>
|
|
<li><a href="#beranda" class="active">Beranda</a></li>
|
|
<li><a href="#kegiatan">Kegiatan</a></li>
|
|
<li><a href="#profil">Profil</a></li>
|
|
<li><a href="#ikhtisar-kas">Ikhtisar Kas</a></li>
|
|
<li><a href="#donasi-amal">Donasi Amal</a></li>
|
|
<li><a href="#kontak">Kontak</a></li>
|
|
<a class="btn-masuk" href="auth/login.php">Masuk</a>
|
|
</ul>
|
|
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<!-- Hero Section -->
|
|
<section id="beranda" class="hero section dark-background">
|
|
<img src="<?php echo !empty($profil_gambarcover) ? '/assets/img/gambarcover/' . htmlspecialchars($profil_gambarcover) : ''; ?>"
|
|
alt="Gambar Cover Masjid" class="hero-bg">
|
|
|
|
<div class="container text-center">
|
|
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-center text-center" data-aos="fade-in">
|
|
<h1><span><?php echo htmlspecialchars($profil_nama); ?></h1>
|
|
<p><?php echo htmlspecialchars($profil_alamat); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
|
|
<defs>
|
|
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
|
|
</defs>
|
|
<g class="wave1">
|
|
<use xlink:href="#wave-path" x="50" y="3"></use>
|
|
</g>
|
|
<g class="wave2">
|
|
<use xlink:href="#wave-path" x="50" y="0"></use>
|
|
</g>
|
|
<g class="wave3">
|
|
<use xlink:href="#wave-path" x="50" y="9"></use>
|
|
</g>
|
|
</svg>
|
|
</section><!-- /Hero Section -->
|
|
|
|
<!-- Kegiatan Section -->
|
|
<section id="kegiatan" class="kegiatan section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12 content text-center">
|
|
<h3>Kegiatan Masjid</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Berita Kegiatan Utama -->
|
|
<div class="col-xl-8 main-berita">
|
|
<div class="berita-item main"
|
|
data-nama="<?= $berita_utama['kegiatan_nama']; ?>"
|
|
data-tanggal="<?= date('d M Y', strtotime($berita_utama['kegiatan_tglmulai'])) . ' - ' . date('d M Y', strtotime($berita_utama['kegiatan_tglakhir'])); ?>"
|
|
data-gambar="assets/img/kegiatan/<?= $berita_utama['kegiatan_gambar']; ?>"
|
|
data-keterangan="<?= htmlspecialchars($berita_utama['kegiatan_keterangan']); ?>"
|
|
onclick="tampilkanPopup(this)">
|
|
<img src="assets/img/kegiatan/<?= $berita_utama['kegiatan_gambar']; ?>" alt="<?= $berita_utama['kegiatan_nama']; ?>">
|
|
<div class="berita-info">
|
|
<h2><?= $berita_utama['kegiatan_nama']; ?></h2>
|
|
<span class="tanggal"><?= date('d M Y', strtotime($berita_utama['kegiatan_tglmulai'])); ?></span>
|
|
<p><?= substr($berita_utama['kegiatan_keterangan'], 0, 750) . '...Lihat Selengkapnya'; ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Berita Standar -->
|
|
<div class="col-xl-4 d-flex flex-column berita-standar gap-3">
|
|
<?php foreach ($berita_standar as $berita) : ?>
|
|
<div class="berita-item"
|
|
data-nama="<?= $berita['kegiatan_nama']; ?>"
|
|
data-tanggal="<?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])) . ' - ' . date('d M Y', strtotime($berita['kegiatan_tglakhir'])); ?>"
|
|
data-gambar="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>"
|
|
data-keterangan="<?= htmlspecialchars($berita['kegiatan_keterangan']); ?>"
|
|
onclick="tampilkanPopup(this)">
|
|
<img src="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>" alt="<?= $berita['kegiatan_nama']; ?>">
|
|
<div class="berita-info">
|
|
<h4><?= $berita['kegiatan_nama']; ?></h4>
|
|
<span class="tanggal"><?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])); ?></span>
|
|
<p class="keterangan-kecil"><?= substr($berita['kegiatan_keterangan'], 0, 50) . '...Lihat Selengkapnya'; ?></p>
|
|
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<!-- Berita Menurun -->
|
|
<div class="row mt-2">
|
|
<?php foreach (array_chunk($berita_menurun, 2) as $berita_chunk) : ?>
|
|
<div class="col-md-6">
|
|
<?php foreach ($berita_chunk as $berita) : ?>
|
|
<div class="berita-item menurun mt-2"
|
|
data-nama="<?= $berita['kegiatan_nama']; ?>"
|
|
data-tanggal="<?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])) . ' - ' . date('d M Y', strtotime($berita['kegiatan_tglakhir'])); ?>"
|
|
data-gambar="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>"
|
|
data-keterangan="<?= htmlspecialchars($berita['kegiatan_keterangan']); ?>"
|
|
onclick="tampilkanPopup(this)">
|
|
<img src="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>" alt="<?= $berita['kegiatan_nama']; ?>">
|
|
<div class="berita-info">
|
|
<h4><?= $berita['kegiatan_nama']; ?></h4>
|
|
<span class="tanggal"><?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])); ?></span>
|
|
<p class="keterangan-kecil"><?= substr($berita['kegiatan_keterangan'], 0, 50) . '...Lihat Selengkapnya'; ?></p>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="profil" class="about section">
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="row align-items-center gy-3">
|
|
<div class="col-xl-12 content text-center">
|
|
<h3>Profil Masjid</h3>
|
|
</div>
|
|
<div class="col-xl-6 content">
|
|
<h2><?php echo htmlspecialchars($profil_nama); ?></h2>
|
|
<p><?php echo htmlspecialchars($profil_desmasjid); ?></p>
|
|
</div>
|
|
|
|
<div class="col-xl-6">
|
|
<div class="about-img-wrapper">
|
|
<h3 class="img-title">Struktur Pengurus Masjid</h3>
|
|
<img src="<?php echo !empty($profil_gambarstruktur) ? '/assets/img/gambarstruktur/' . htmlspecialchars($profil_gambarstruktur) : ''; ?>"
|
|
alt="Struktur Pengurus Masjid" id="zoomImg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /About Section -->
|
|
|
|
|
|
<!-- Ikhtisar Kas Section -->
|
|
<section id="ikhtisar-kas" class="ikhtisar-kas section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12 content text-center">
|
|
<h3>Ikhtisar Kas Masjid</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="6">Bulan <?php echo $bulanIndonesia . " " . $tahun_sekarang; ?></th>
|
|
</tr>
|
|
<tr>
|
|
<th>No.</th>
|
|
<th>Tanggal</th>
|
|
<th>Pemasukan</th>
|
|
<th>Pengeluaran</th>
|
|
<th>Keterangan</th>
|
|
<th>Saldo Akhir</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
$no = 1;
|
|
while ($row = mysqli_fetch_assoc($result)) {
|
|
$tanggal = date('d-m-Y', strtotime($row['kas_tanggal']));
|
|
$pemasukan = $row['kas_pemasukan'];
|
|
$pengeluaran = $row['kas_pengeluaran'];
|
|
$keterangan = $row['kas_keterangan'];
|
|
|
|
// Hitung saldo berjalan
|
|
$saldo += $pemasukan - $pengeluaran;
|
|
|
|
echo "<tr>
|
|
<td>{$no}</td>
|
|
<td>{$tanggal}</td>
|
|
<td>Rp " . number_format($pemasukan, 0, ',', '.') . "</td>
|
|
<td>Rp " . number_format($pengeluaran, 0, ',', '.') . "</td>
|
|
<td>{$keterangan}</td>
|
|
<td>Rp " . number_format($saldo, 0, ',', '.') . "</td>
|
|
</tr>";
|
|
$no++;
|
|
}
|
|
?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /Ikhtisar Kas Section -->
|
|
|
|
<!-- Donasi Amal Section -->
|
|
<section id="donasi-amal" class="donasi-amal section">
|
|
<div class="container">
|
|
<!-- Judul Donasi Amal -->
|
|
<div class="row">
|
|
<div class="col-xl-12 content text-center">
|
|
<h3>Donasi Amal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<!-- QRIS Barcode -->
|
|
<div class="col-md-4 text-center">
|
|
<img src="<?php echo !empty($profil_gambardonasi) ? '/assets/img/gambardonasi/' . htmlspecialchars($profil_gambardonasi) : ''; ?>"
|
|
alt="QRIS Barcode" class="qris-barcode" id="zoomImg">
|
|
</div>
|
|
|
|
<!-- Keterangan Pembayaran -->
|
|
<div class="col-md-8">
|
|
<div class="keterangan-donasi">
|
|
<h4>Informasi Pembayaran</h4>
|
|
<p><strong>Nomor Rekening:</strong> <?php echo htmlspecialchars($profil_rekening); ?></p>
|
|
<p><strong>Nomor E-Wallet:</strong> <?php echo htmlspecialchars($profil_dompet); ?></p>
|
|
<p><strong>Metode Pembayaran Lainnya:</strong> Link, Dana, OVO, dll.</p>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#donasiModal">
|
|
Donasi Sekarang
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /Donasi Amal Section -->
|
|
|
|
<!-- Contact Section -->
|
|
<section id="kontak" class="contact section">
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h3>Kontak</h3>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade" data-aos-delay="100">
|
|
<div class="row gy-4">
|
|
|
|
<!-- Google Maps -->
|
|
<div class="col-lg-8">
|
|
<div class="map-container" data-aos="fade-up" data-aos-delay="200">
|
|
<?php if (!empty($profil_maps)): ?>
|
|
<iframe src="<?php echo htmlspecialchars($profil_maps); ?>"
|
|
width="100%" height="400" style="border:0;"
|
|
allowfullscreen="" loading="lazy"></iframe>
|
|
<?php else: ?>
|
|
<p>Google Maps tidak dapat ditampilkan. Harap gunakan URL Google Maps yang valid.</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="col-lg-4">
|
|
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
|
|
<i class="bi bi-geo-alt flex-shrink-0"></i>
|
|
<div>
|
|
<h3>Alamat</h3>
|
|
<p><?php echo htmlspecialchars($profil_alamatlengkap); ?></p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
|
|
<i class="bi bi-telephone flex-shrink-0"></i>
|
|
<div>
|
|
<h3>Nomor HP</h3>
|
|
<p><?php echo htmlspecialchars($admin_nohp); ?></p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
|
|
<i class="bi bi-envelope flex-shrink-0"></i>
|
|
<div>
|
|
<h3>Email</h3>
|
|
<p><?php echo htmlspecialchars($admin_email); ?></p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- WhatsApp Button -->
|
|
<div class="row">
|
|
<div class="col-md-12 text-center mt-4">
|
|
<a href="https://wa.me/<?php echo htmlspecialchars($profil_nohp); ?>" class="btn-whatsapp" target="_blank">Hubungi Via WhatsApp</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- /Contact Section -->
|
|
|
|
<!-- Modal Form Donasi -->
|
|
<div class="modal fade" id="donasiModal" tabindex="-1" aria-labelledby="donasiModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="donasiModalLabel">Form Donasi</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="proses_tambah_donasi.php" method="post" enctype="multipart/form-data" id="donasiForm">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Nama Donatur</label>
|
|
<input type="text" class="form-control" id="name" name="nama_donatur" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="amount" class="form-label">Jumlah Nominal Donasi</label>
|
|
<input type="number" class="form-control" id="amount" name="jumlah_donasi" min="10000" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="payment_method" class="form-label">Metode Pembayaran</label>
|
|
<select class="form-select" id="payment_method" name="metode_pembayaran" required>
|
|
<option value="" disabled selected>-- Pilih Metode Pembayaran --</option>
|
|
<option value="Transfer Bank">Transfer Bank</option>
|
|
<option value="E-Wallet">E-Wallet</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Keterangan Donasi</label>
|
|
<select class="form-select" id="description" name="keterangan" required>
|
|
<option value="" disabled selected>-- Pilih Keterangan --</option>
|
|
<option value="Infaq">Infaq</option>
|
|
<option value="Shadaqah">Shadaqah</option>
|
|
<option value="Zakat">Zakat</option>
|
|
<option value="Kurban">Kurban</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="donation_proof" class="form-label">Bukti Donasi (JPG, PNG, Maks 2MB)</label>
|
|
<input class="form-control" type="file" id="donation_proof" name="bukti_donasi" accept=".jpg, .jpeg, .png" required>
|
|
<small class="text-muted">Unggah bukti pembayaran dalam format JPG atau PNG.</small>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary">Lakukan Donasi</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /Modal Form Donasi -->
|
|
|
|
<?php if (isset($_GET['donasi_id'])): ?>
|
|
<div class="modal fade show" id="donasiSuccessModal" tabindex="-1" style="display: block;" aria-modal="true" role="dialog">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Donasi Berhasil</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Terima kasih telah berdonasi. Bukti donasi telah tersimpan.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="cetak_bukti_donasi.php?donasi_id=<?php echo $_GET['donasi_id']; ?>" target="_blank" class="btn btn-primary">Cetak Bukti Donasi</a>
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal()">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function closeModal() {
|
|
document.getElementById('donasiSuccessModal').style.display = 'none';
|
|
}
|
|
</script>
|
|
<?php endif; ?>
|
|
|
|
<!-- Popup Detail Kegiatan -->
|
|
<div id="popupKegiatan" class="popup-kegiatan" style="display:none;">
|
|
<div class="popup-content">
|
|
<span class="popup-close" onclick="tutupPopup()">×</span>
|
|
<img id="popupGambar" src="" alt="Gambar Kegiatan">
|
|
<h3 id="popupNama"></h3>
|
|
<p class="popup-tanggal" id="popupTanggal"></p>
|
|
<p id="popupKeterangan"></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Footer Section -->
|
|
<footer id="footer" class="footer dark-background">
|
|
|
|
<div class="container footer-top">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-4 col-md-6 footer-about">
|
|
<a href="index.php" class="logo d-flex align-items-center">
|
|
<span class="sitename">Masjid Darussalam</span>
|
|
</a>
|
|
<div class="footer-contact pt-3">
|
|
<p><?php echo htmlspecialchars($profil_alamatlengkap); ?></p>
|
|
<p class="mt-3"><strong>Ikuti Sosial Media:</strong></p>
|
|
</div>
|
|
<div class="social-links d-flex mt-4">
|
|
<a href="<?php echo htmlspecialchars($profil_facebook); ?>" target="_blank">
|
|
<i class="bi bi-facebook"></i>
|
|
</a>
|
|
<a href="<?php echo htmlspecialchars($profil_instagram); ?>" target="_blank">
|
|
<i class="bi bi-instagram"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-3 footer-links">
|
|
<h4>Halaman</h4>
|
|
<ul>
|
|
<li><a href="#home">Beranda</a></li>
|
|
<li><a href="#kegiatan">Kegiatan</a></li>
|
|
<li><a href="#profil">Profil</a></li>
|
|
<li><a href="#ikhtisar-kas">Ikhtisar Kas</a></li>
|
|
<li><a href="#donasi">Donasi Amal</a></li>
|
|
<li><a href="#kontak">Kontak</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-12 footer-newsletter">
|
|
<h4>Izin Kegiatan</h4>
|
|
<p>Izin kegiatan kajian atau pengajian majelis taklim dan acara Islami lainnya di sini:
|
|
<strong><a href="https://docs.google.com/document/d/1ouq4KLLNttSPvq4cw50KOWazTW03zSm84CZtSGQhzZ0/edit?usp=sharing" target="_blank" style="color: #FFFFFF;">Dokumen Izin Kegiatan</a></strong>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-copyright">
|
|
<div class="container text-center mt-4">
|
|
<p><span>Copyright</span> ©<strong class="px-1 sitename">Masjid - E</strong> <span>All Rights Reserved</span></p>
|
|
<div class="credits">
|
|
Designed by <a href="https://bangparid.com/">Bangparid.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
<!-- Scroll Top -->
|
|
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Preloader -->
|
|
<div id="preloader"></div>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
|
<script src="assets/vendor/aos/aos.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
|
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
|
|
<!-- Main JS File -->
|
|
<script src="assets/js/main.js"></script>
|
|
<script>
|
|
// Hilangkan notifikasi setelah 3 detik
|
|
setTimeout(function() {
|
|
var notif = document.getElementById('notif');
|
|
if (notif) {
|
|
notif.style.display = 'none';
|
|
}
|
|
}, 3000);
|
|
</script>
|
|
|
|
|
|
<script>
|
|
document.getElementById("donasiForm").addEventListener("submit", function(event) {
|
|
let amount = document.getElementById("amount").value;
|
|
let file = document.getElementById("donation_proof").files[0];
|
|
|
|
if (amount < 10000) {
|
|
alert("Minimal donasi adalah Rp10.000!");
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (file) {
|
|
let allowedExtensions = ["image/jpeg", "image/png"];
|
|
let maxSize = 2 * 1024 * 1024; // 2MB
|
|
|
|
if (!allowedExtensions.includes(file.type)) {
|
|
alert("Format bukti donasi harus JPG atau PNG!");
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (file.size > maxSize) {
|
|
alert("Ukuran file maksimal 2MB!");
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
function tampilkanPopup(element) {
|
|
const nama = element.getAttribute('data-nama');
|
|
const tanggal = element.getAttribute('data-tanggal');
|
|
const gambar = element.getAttribute('data-gambar');
|
|
const keterangan = element.getAttribute('data-keterangan');
|
|
|
|
document.getElementById('popupNama').innerText = nama;
|
|
document.getElementById('popupTanggal').innerText = tanggal;
|
|
document.getElementById('popupGambar').src = gambar;
|
|
document.getElementById('popupKeterangan').innerText = keterangan;
|
|
|
|
document.getElementById('popupKegiatan').style.display = 'flex';
|
|
}
|
|
|
|
function tutupPopup() {
|
|
document.getElementById('popupKegiatan').style.display = 'none';
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|