FileMaster

Edit File: daftar-tag.php

<?php
include('config.php');
$aktif = "mastertag";
?>
<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daftar Tag</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">

if (!empty($_FILES['gambar_tag']['name'])) {
        $target_dir = "uploads/tag/";
        $gambar_tag = uniqid() . "_" . basename($_FILES["gambar_tag"]["name"]);
        $target_file = $target_dir . $gambar_tag;

// Buat folder jika belum ada
        if (!is_dir($target_dir)) {
            mkdir($target_dir, 0777, true);
        }

move_uploaded_file($_FILES["gambar_tag"]["tmp_name"], $target_file);
    }

$stmt = $pdo->prepare("INSERT INTO mastertag (nama_tag, sesi_tag, gambar_tag) VALUES (?, ?, ?)");
    $stmt->execute([$nama_tag, $sesi_tag, $gambar_tag]);
        echo "<div class='alert alert-success'>Berhasil ditambahkan.</div>";
}

// Proses Edit Tag
if (isset($_POST['edit_tag'])) {
    $nama_tag = $_POST['nama_tag'];
    $id_tag = $_POST['id_master_tag'];
    $stmt = $pdo->prepare("UPDATE mastertag SET nama_tag = ? WHERE id_master_tag = ?");
    $stmt->execute([$nama_tag, $id_tag]);
        echo "<div class='alert alert-success'>Berhasil diubah.</div>";
}

// Proses Hapus Tag
if (isset($_POST['hapus_tag'])) {
    $id_tag = $_POST['id_master_tag'];
      $stmt = $pdo->prepare("SELECT gambar_tag FROM mastertag WHERE id_master_tag = ?");
    $stmt->execute([$id_tag]);
    $row = $stmt->fetch();

// Hapus gambar dari folder jika ada
    if ($row && !empty($row['gambar_tag'])) {
        $gambarPath = "uploads/tag/" . $row['gambar_tag'];
        if (file_exists($gambarPath)) {
            unlink($gambarPath);
        }
    }
    $stmt = $pdo->prepare("DELETE FROM mastertag WHERE id_master_tag = ?");
    $stmt->execute([$id_tag]);
        echo "<div class='alert alert-success'>Berhasil dihapus.</div>";
}

// Ambil data tag
$stmt = $pdo->query("SELECT * FROM mastertag ORDER BY id_master_tag DESC");
$tagList = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modalTambahTag">Tambah Tag</button>

<div class="modal fade" id="modalTambahTag" tabindex="-1">
  <div class="modal-dialog"><form method="post" enctype="multipart/form-data">
      <div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">Tambah Tag</h5></div>
        <div class="modal-body">
          <input type="text" name="nama_tag" class="form-control" placeholder="Nama Tag" required>
         <div class="mb-3">
    <label for="gambar_tag" class="form-label">Upload Gambar</label>
    <input type="file" class="form-control" name="gambar_tag" accept="image/*">
  </div>
        
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" name="tambah_tag" class="btn btn-primary">Simpan</button>
        </div>
      </div>
    </form>
  </div>
</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 Tag</th>
      <th>Gambar</th><th>Aksi</th></tr></thead>
  <tbody>
    <?php $no = 1; foreach ($tagList as $tag): ?>
    <tr>
      <td><?= $no++ ?></td>
      <td><?= htmlspecialchars($tag['nama_tag']) ?></td> 
      <td><?php if ($tag['gambar_tag']): ?>
            <img src="uploads/tag/<?= htmlspecialchars($tag['gambar_tag']) ?>" width="50" class="rounded-circle">
          <?php else: ?>
            <span class="text-muted">-</span>
          <?php endif; ?></td>
      <td>
        
        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalEdit<?= $tag['id_master_tag'] ?>"><i class='bi bi-pencil-fill'></i></button>
        
        
        <form method="post" class="d-inline" onsubmit="return confirm('Hapus tag ini?')">
          <input type="hidden" name="id_master_tag" value="<?= $tag['id_master_tag'] ?>">
          <button type="submit" name="hapus_tag" class="btn btn-danger btn-sm"><i class='bi bi-trash'></i></button>
        </form>
        
        
        <div class="modal fade" id="modalEdit<?= $tag['id_master_tag'] ?>" tabindex="-1">
          <div class="modal-dialog">
            <form method="post">
              <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Edit Tag</h5></div>
                <div class="modal-body">
                  <input type="hidden" name="id_master_tag" value="<?= $tag['id_master_tag'] ?>">
                  <input type="text" name="nama_tag" class="form-control" value="<?= htmlspecialchars($tag['nama_tag']) ?>" required>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                  <button type="submit" name="edit_tag" class="btn btn-primary">Simpan Perubahan</button>
                </div>
              </div>
            </form>
          </div>
        </div>

</td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>
              </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