FileMaster

Edit File: daftar-produk.php

<?php
include('config.php');
$aktif = "productlist";
function slugify($text) {
    // Hapus karakter non huruf/angka
    $text = preg_replace('~[^\pL\d]+~u', '-', $text);
    $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);
    $text = preg_replace('~[^-\w]+~', '', $text);
    $text = trim($text, '-');
    $text = preg_replace('~-+~', '-', $text);
    $text = strtolower($text);

return empty($text) ? 'produk' : $text;
}
?>
<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daftar Produk</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" rel="stylesheet">

// Validasi sederhana (pastikan semua diisi)
    if ($kode_website && $nama_produk && $sku_produk && $isi_produk) {
        try {
            $stmt = $pdo->prepare("INSERT INTO produk (kode_website, nama_produk, sku_produk, isi_produk, sesi_produk, tanggal_isi, jam_isi, nama_produk_seo)
                                   VALUES (:kode_website, :nama_produk, :sku_produk, :isi_produk, :sesi,  :tanggal_isi, :jam_isi, :nama_produk_seo) ");
            $stmt->execute([
                ':kode_website' => $kode_website,
                ':nama_produk' => $nama_produk,
                ':sku_produk' => $sku_produk,
                ':isi_produk' => $isi_produk,
                ':sesi' => $sesi,
                ':tanggal_isi' => $tanggal_isi,
                ':jam_isi' => $jam_isi,
                ':nama_produk_seo' => $nama_produk_seo
            ]);

echo "<div class='alert alert-success'>Produk berhasil ditambahkan!</div>";
            // Bisa redirect kalau perlu: header('Location: halaman_sukses.php');
        } catch (PDOException $e) {
            echo "<div class='alert alert-danger'>Gagal menyimpan data: " . $e->getMessage() . "</div>";
        }
    } else {
        echo "<div class='alert alert-warning'>Semua field wajib diisi.</div>";
    }
}
?>
      
              <div class="col-12 col-sm-12 col-md-12">
          <table id="tabelProduk" class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>No</th>
          <th>Nama Produk</th>
          <th>Kode Website</th>
          <th>SKU</th>
          <th>Tanggal</th>
          <th>Jam</th>
          <th>Gambar</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        <?php
        $no = 1;
        $stmt = $pdo->query("SELECT * FROM produk ORDER BY id_produk DESC");
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

$gambars = $pdo->prepare("SELECT * FROM gambar WHERE sesi_produk = ? LIMIT 4");
$gambars->execute([$row['sesi_produk']]);
$gambarList = $gambars->fetchAll(PDO::FETCH_ASSOC);

// Hitung total gambar
$stmtTotal = $pdo->prepare("SELECT COUNT(*) FROM gambar WHERE sesi_produk = ?");
$stmtTotal->execute([$row['sesi_produk']]);
$totalGambar = $stmtTotal->fetchColumn();

echo "<tr>
                  <td>{$no}</td>
                  <td>{$row['nama_produk']}</td>
                  <td>{$row['kode_website']}</td>
                  <td>{$row['sku_produk']}</td>
                  <td>{$row['tanggal_isi']}</td>
                  <td>{$row['jam_isi']}</td>
                  <td>"; ?>
            <ul class="list-inline mb-0">
    <?php foreach (array_slice($gambarList, 0, 3) as $gambar): ?>
        <li class="list-inline-item">
            <a href="gambar?id=<?= urlencode($row['sesi_produk']) ?>" class="text-primary small">
            <img 
                src="<?= htmlspecialchars($gambar['url_gambar']) ?>" 
                alt="Gambar" 
                class="rounded-circle" 
                style="width: 40px; height: 40px; object-fit: cover;"
            ></a>
        </li>
    <?php endforeach; ?>

<?php if ($totalGambar > 3): ?>
        <li class="list-inline-item align-middle">
            <a href="gambar?id=<?= urlencode($row['sesi_produk']) ?>" class="text-primary small">
                + <?= $totalGambar - 3 ?> gambar lainnya
            </a>
        </li>
    <?php endif; ?>
</ul>

<?php 
                  echo "</td>
                  <td>";
                  ?>
                  <button class="btn btn-sm btn-info" onclick="bukaModalGambar('<?= $row['sesi_produk']; ?>')"><i class="bi bi-plus-circle"></i></button>
<?php echo "        <a href='tag?id={$row['sesi_produk']}' class='btn btn-sm btn-success'>tag</a>
                    <a href='ubah?id={$row['sesi_produk']}' class='btn btn-sm btn-warning'><i class='bi bi-pencil-fill'></i></a>
                    <button class='btn btn-sm btn-danger btn-hapus' data-id='{$row['id_produk']}'><i class='bi bi-trash'></i></button>
                  </td>
                </tr>";
          $no++;
        }
        ?>
      </tbody>
    </table>
<div class="modal fade" id="modalUploadGambar" tabindex="-1" aria-labelledby="judulModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form action="upload_gambar.php" class="dropzone" id="formDropzone">
        <input type="hidden" name="sesi_produk" id="sesi_produk">
        <div class="modal-header">
          <h5 class="modal-title">Upload Gambar Produk</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
        </div>
        <div class="modal-body">
          <div class="dz-message">Drop gambar di sini atau klik untuk mengunggah</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
        </div>
      </form>
    </div>
  </div>
</div>
              </div>

</div>

</div>
        </div>
      </main>
      <?php include('footer.php'); ?>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
  $(document).ready(function () {
    $('#tabelProduk').DataTable({
      responsive: true,
      autoWidth: false,
      lengthChange: true,
      pageLength: 10,
      language: {
        url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('.btn-hapus').on('click', function () {
      const id = $(this).data('id');
      const row = $(this).closest('tr');

if (confirm('Yakin ingin menghapus data ini?')) {
        $.ajax({
          url: 'hapus_produk.php',
          method: 'POST',
          data: { id: id },
          success: function (res) {
            if (res === 'sukses') {
              row.fadeOut(300, function () {
                $(this).remove();
              });
            } else {
              alert('Gagal menghapus data!');
            }
          },
          error: function () {
            alert('Terjadi kesalahan saat menghapus.');
          }
        });
      }
    });
  });
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#formDropzone", {
  url: "upload_gambar.php",
  paramName: "file",
  maxFilesize: 3, 
  acceptedFiles: "image/*",
  addRemoveLinks: true,

success: function(file, response) {
    // Simpan nama file yang berhasil diupload
    file.uploadedName = response.trim(); // Pastikan response dari server adalah nama file
  },

removedfile: function(file) {
    var fileName = file.uploadedName || file.name; // fallback jika tidak ada uploadedName
    if (!fileName) return;

// Hapus file dari server lewat AJAX
    $.ajax({
      url: 'hapus_gambar.php',
      type: 'POST',
      data: { gambar: fileName },
      success: function(file, response) {
  file.uploadedName = response.trim(); // Ini akan jadi "foto123.jpg"
},

success: function(response) {
        console.log("Gambar dihapus:", response);
      },
      error: function() {
        console.log("Gagal menghapus di server");
      }
    });

// Hapus preview thumbnail dari Dropzone
    var previewElement = file.previewElement;
    if (previewElement != null) {
      previewElement.parentNode.removeChild(previewElement);
    }
  }
});

</script>

</html>

Back