Thiết kế website giá rẻ

Question

Error Image Screenshoot

Can anyone shed a light for this error

Everytime I click the “tambah pekerjaan” button, the previous value shows up under the new line
Also the new job quantity area is not responding anymore

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Form Perhitungan Harga</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .select2-container {
      width: 100% !important;
    }
    .form-group {
      margin-bottom: 1rem;
    }
    .table th {
      background-color: #f8f9fa;
    }
    .table td, .table th {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="mt-4 mb-4">Form Perhitungan Harga</h1>
    <form id="myForm" method="post" action="">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Jenis Pekerjaan</th>
            <th>Pekerjaan</th>
            <th>Kuantitas</th>
            <th>Satuan</th>
            <th>Harga Satuan</th>
            <th>Total Harga</th>
          </tr>
        </thead>
        <tbody>
          <?php include 'generate_form.php'; ?>
        </tbody>
      </table>
      
      <div class="form-group">
        <input type="submit" value="Hitung Total Harga" class="btn btn-success">
      </div>
    </form>
    
    <?php include 'process_form.php'; ?>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

generate-form.php

<?php
// Koneksi ke database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "konstruksi";

$conn = new mysqli($servername, $username, $password, $dbname);

// Cek koneksi
if ($conn->connect_error) {
  die("Koneksi gagal: " . $conn->connect_error);
}

// Array untuk menyimpan jenis pekerjaan
$jenis_pekerjaan = array(
  "pekerjaan_persiapan",
  "pekerjaan_fondasi",
  "pekerjaan_struktural",
  "pekerjaan_dinding",
  "pekerjaan_atap",
  "pekerjaan_instalasi_listrik",
  "pekerjaan_plafond",
  "pekerjaan_accesories_kelistirkan",
  "pekerjaan_instalasi_pemipaan",
  "pekerjaan_penutup_keramik",
  "pekerjaan_accesories_pipa",
  "pekerjaan_pintu_jendela",
  "pekerjaan_pengecatan",
  "pekerjaan_pembesian",
  "pekerjaan_lainnya"
);

foreach ($jenis_pekerjaan as $jenis) {
  // Query untuk mengambil data pekerjaan dari tabel
  $sql = "SELECT kode, nama_pekerjaan, satuan, harga_satuan FROM $jenis";
  $result = $conn->query($sql);
  
  if ($result->num_rows > 0) {
    echo "<tr><td colspan='6' class='bg-light font-weight-bold'>".ucwords(str_replace("_", " ", $jenis))."</td></tr>";
    
    // Menampilkan dropdown pekerjaan dan input kuantitas
    echo "<tr class='pekerjaan-row'>";
    echo "<td></td>";
    echo "<td>";
    echo "<select name='pekerjaan[$jenis][]' class='pekerjaan-select form-control' data-placeholder='Pilih Pekerjaan'>";
    echo "<option value=''></option>";
    while($row = $result->fetch_assoc()) {
      echo "<option value='".$row["kode"]."' data-harga='".$row["harga_satuan"]."' data-satuan='".$row["satuan"]."'>".$row["nama_pekerjaan"]."</option>";
    }
    echo "</select>";
    echo "</td>";
    echo "<td><input type='number' name='kuantitas[$jenis][]' min='0' class='kuantitas form-control'></td>";
    echo "<td><span class='satuan'></span></td>";
    echo "<td><span class='harga-satuan'></span></td>";
    echo "<td><span class='total-harga'></span></td>";
    echo "</tr>";
    
    // Menampilkan tombol "Tambahkan Pekerjaan"
    echo "<tr class='tambah-pekerjaan-row'><td colspan='6'><button type='button' class='btn btn-primary tambah-pekerjaan' data-jenis='$jenis'>Tambahkan Pekerjaan</button></td></tr>";
  }
}

$conn->close();
?>

process-form.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  echo "<h2>Rincian Pekerjaan:</h2>";
  echo "<table class='table table-bordered'>";
  echo "<thead><tr><th>Jenis Pekerjaan</th><th>Pekerjaan</th><th>Kuantitas</th><th>Satuan</th><th>Harga Satuan</th><th>Total Harga</th></tr></thead>";
  echo "<tbody>";
  
  $totalHarga = 0;
  
  // Koneksi ke database
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "konstruksi";
  
  $conn = new mysqli($servername, $username, $password, $dbname);
  
  // Cek koneksi
  if ($conn->connect_error) {
    die("Koneksi gagal: " . $conn->connect_error);
  }
  
  foreach ($jenis_pekerjaan as $jenis) {
    if (isset($_POST["pekerjaan"][$jenis]) && isset($_POST["kuantitas"][$jenis])) {
      $pekerjaan = $_POST["pekerjaan"][$jenis];
      $kuantitas = $_POST["kuantitas"][$jenis];
      
      for ($i = 0; $i < count($pekerjaan); $i++) {
        $kode = $pekerjaan[$i];
        $qty = $kuantitas[$i];
        
        // Query untuk mengambil data pekerjaan berdasarkan kode pekerjaan dari tabel yang sesuai
        $sql = "SELECT nama_pekerjaan, satuan, harga_satuan FROM $jenis WHERE kode = '$kode'";
        $result = $conn->query($sql);
        
        if ($result->num_rows > 0) {
          $row = $result->fetch_assoc();
          $namaPekerjaan = $row["nama_pekerjaan"];
          $satuan = $row["satuan"];
          $hargaSatuan = $row["harga_satuan"];
          $totalHargaPekerjaan = $hargaSatuan * $qty;
          
          echo "<tr>";
          echo "<td>" . ucwords(str_replace("_", " ", $jenis)) . "</td>";
          echo "<td>$namaPekerjaan</td>";
          echo "<td>$qty</td>";
          echo "<td>$satuan</td>";
          echo "<td>Rp " . number_format($hargaSatuan, 0, ',', '.') . "</td>";
          echo "<td>Rp " . number_format($totalHargaPekerjaan, 0, ',', '.') . "</td>";
          echo "</tr>";
          
          $totalHarga += $totalHargaPekerjaan;
        }
      }
    }
  }
  
  echo "</tbody>";
  echo "</table>";
  
  echo "<h3>Total Harga: Rp " . number_format($totalHarga, 0, ',', '.') . "</h3>";
  
  $conn->close();
}
?>

script.js

$(document).ready(function() {
  initSelect2();
  
  $('.pekerjaan-select').on('change', function() {
    updateHargaTotal($(this).closest('.pekerjaan-row'));
  });
  
  $('.kuantitas').on('input', function() {
    updateHargaTotal($(this).closest('.pekerjaan-row'));
  });
  
  $(document).on('click', '.tambah-pekerjaan', function() {
    var jenis = $(this).data('jenis');
    var row = $(this).closest('.tambah-pekerjaan-row').prev('.pekerjaan-row').clone();
    row.find('select').val('').trigger('change');
    row.find('input[type="number"]').val('');
    row.find('.harga-satuan').text('');
    row.find('.satuan').text('');
    row.find('.total-harga').text('');
    $(this).closest('.tambah-pekerjaan-row').before(row);
    initSelect2();
  });
  
  function updateHargaTotal(row) {
    var selectedOption = row.find('.pekerjaan-select option:selected');
    var hargaSatuan = selectedOption.data('harga');
    var satuan = selectedOption.data('satuan');
    var kuantitas = row.find('.kuantitas').val();
    var hargaElement = row.find('.harga-satuan');
    var totalElement = row.find('.total-harga');
    var satuanElement = row.find('.satuan');
    
    hargaElement.text(hargaSatuan ? 'Rp ' + formatNumber(hargaSatuan) : '');
    satuanElement.text(satuan ? satuan : '');
    totalElement.text(hargaSatuan && kuantitas ? 'Rp ' + formatNumber(hargaSatuan * kuantitas) : '');
  }
  
  function initSelect2() {
    $('.pekerjaan-select').each(function() {
      if (!$(this).data('select2')) {
        $(this).select2({
          placeholder: 'Pilih Pekerjaan',
          width: '100%'
        });
      }
    });
  }
  
  function formatNumber(number) {
    return number.toString().replace(/B(?=(d{3})+(?!d))/g, ".");
  }
});

I tried to redo all the coding, but still I can’t find the cause

Thiết kế website giá rẻ

Danh mục

Dropdown keeps appearing after clicking add job button, also auto update total not working