Kemaskini / Tambahan Modul

Kemaskini 1 : Guna SATU medan 'harga' sahaja

Penerangan: Kod dalam modul menggunakan 2 medan harga dalam pangkalan data. Pertama untuk simpan harga semasa item (jadual item), Kedua untuk simpan harga item semasa pesanan dibuat (jadual pesanan_item). Tujuannya adalah untuk menjaga integriti laporan jualan, dengan menyimpan harga item yang betul semasa pesanan dibuat. Jika admin menukar harga semasa item, sistem masih ada rekod harga lama item untuk rekod pesanan yang lama.

Guna SATU medah harga sahaja: Bagi yang ingin guna satu sahaja medan harga, boleh kemaskini sistem mengikut cara dibawah.

Step 1: Dipangkalan data, buang / tidak perlu buat medan harga di table pesanan_item. Kita akan guna medan harga di jadual item sahaja.

Step 2: File checkout.php : Dalam sql query ini buang medan dan nilai untuk harga, kerana sudah tidak perlu simpan harga ke dalam jadual pesanan_tem.

Step 3: File order.php : Dalam sql query ini tambah yang bertanda hijau. Kerana perlu dapatkan nilai harga daripada jadual item.

Step 4: File admin_laporan.php : Dalam sql query ini tambah baris JOIN... yang baru dan perubahan dalam fungsi SUM(...).

Kemaskini 2 : Tambah Slider (slideshow)

Penerangan: Image slider di halaman utama sistem.

Step 1: Letakkan gambar-gambar slideshow ke dalam folder 'images'. Sesuai gunakan gambar yang lebar 900px sehingga 1000px.

Step 2: Copy SEMUA kod di dalam kotak di bawah, dan paste ke dalam file 'index.php' di line 2, betul-betul di BAWAH line kod <?php include('inc_header.php'); ?>.

<banner>
<div id="webslider" class="carousel slide mb-4" data-bs-ride="carousel">
  <div class="carousel-inner rounded">
      
    <div class="carousel-item active" data-bs-interval="5000">
      <img class="d-block w-100" src="images/slide1.jpg" alt="" />
    </div>
    
    <div class="carousel-item" data-bs-interval="5000">
      <img class="d-block w-100" src="images/slide2.jpg" alt="" />
    </div>
    
    <div class="carousel-item" data-bs-interval="5000">
      <img class="d-block w-100" src="images/slide3.jpg" alt="" />
    </div>
    
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#webslider" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#webslider" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</banner>

Step 3: Semak kod yang sudah di paste tu bahagian ini : src="images/slide1.jpg"

pastikan ejaan nama folder 'images' dan nama fail gambar slideshow adalah sama dengan yang ada dalam folder.

Kemaskini 3 : Tambah Fungsi Kira Baki

Penerangan: Fungsi kira baki memudahkan admin dan pelanggan mengira baki bayaran.

Step 1: Copy SEMUA kod di dalam kotak di bawah, dan paste ke dalam file 'order.php' betul-betul SELEPAS Cetak</a> ...paste kod di sini... </p>

Step 2: Copy SEMUA kod di dalam kotak di bawah, dan paste ke dalam file 'order.php' betul-betul di SEBELUM line kod <?php include('inc_footer.php'); ?>.

<div class="modal fade" id="boxkira" tabindex="-1" aria-labelledby="boxkiraLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">

<div class='row mb-4'>
          <div class='col-8'>Bayaran daripada pelanggan</div>
          <div class='col-4'>
            <div class="input-group">
              <span class="input-group-text">RM</span>
              <input type="number" id="bayaran" class="form-control text-end" value="">
            </div>
          </div>
        </div>

<div class='row mb-4'>
          <div class='col-8'>Jumlah amaun pesanan</div>
          <div class='col-4 text-end'>RM <?=number_format($final,2)?></div>
        </div>

<div class='row'>
          <div class='col-8'>Baki perlu dipulangkan</div>
          <div class='col-4 text-end' id="baki"></div>
        </div>

</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

bayaran.addEventListener('input', () => {
        const nilai_bayaran = parseFloat(bayaran.value) || 0;
        const result = (nilai_bayaran - amoun).toFixed(2);

// Paparkan output baki
        document.getElementById('baki').textContent = 'RM ' + result;
    });

// set autofokus kepada kotak input bayaran
    const myModal = document.getElementById('boxkira')
    const myInput = document.getElementById('bayaran')
    myModal.addEventListener('shown.bs.modal', () => {
      myInput.focus()
    })
</script>

Kemaskini 4 : Menu Navigasi Di Tepi

Penerangan: Tukar kedudukan butang navigasi daripada atas ke sisi sistem.

Step 1: File 'footer.php' buat line baru di baris paling atas sekali, dan taip </div> </div>

Step 2: Copy code baru di bawah ini dan gantikan keseluruhan kod dalam 'inc_header.php'. Save.

Kod inc_header menu di sisi