Cara membuat shopping cart dengan PHP, Bootstrap dan MySQL

Cara membuat shopping cart dengan PHP, Bootstrap dan MySQL

Belajar PHP - Pada artikel kali ini kita akan membuat shopping cart atau keranjang belanja dengan PHP, Bootstrap dan MySQL.

Shopping cart yang akan kita buat memiliki fungsi sebagai berikut:
  • Mengambil data produk dari database
  • Menampilkan daftar produk
  • Mengelola item dikeranjang belanja menggunakan array dan session
  • Menambahkan item, ubah jumlah pembelian dan hapus item pada keranjang belanja
  • Menghitung total item dan total bayar
  • Menyimpan data belanja kedalam database
  • Menampilkan laporan dan detail order

Okeh.. Langsung saja kita mulai.



Database

Pertama, buat database dengan nama shopping-cart, lalu pilih menu SQL dan pastekan kode berikut untuk membuat tabel beserta datanya.
CREATE TABLE `tb_detail_order` (
  `id_detail` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `id_order` int(11) NOT NULL,
  `id_produk` int(11) NOT NULL,
  `pembelian` int(11) NOT NULL
);

-- --------------------------------------------------------

--
-- Table structure for table `tb_order`
--

CREATE TABLE `tb_order` (
  `id_order` int(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `total_item` int(11) NOT NULL,
  `total_bayar` float NOT NULL,
  `tgl_transaksi` date NOT NULL
);

-- --------------------------------------------------------

--
-- Table structure for table `tb_produk`
--

CREATE TABLE `tb_produk` (
  `id` int(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `nama_produk` varchar(50) NOT NULL,
  `harga` float NOT NULL,
  `stok` int(11) NOT NULL
);

--
-- Dumping data for table `tb_produk`
--

INSERT INTO `tb_produk` (`id`, `nama_produk`, `harga`, `stok`) VALUES
(1, 'Sony1', 100000, 2),
(2, 'Apple1', 200000, 3),
(3, 'Samsung1', 300000, 4),
(4, 'Apple2', 400000, 5);

koneksi.php

Kita buat koneksinya difile terpisah.
<?php

$conn = mysqli_connect('localhost', 'root', '', 'shopping-cart');

if (!$conn) {
    die ("Koneksi gagal. " . mysqli_connect_error()); // close koneksi
}

Karena kita akan menggunakan Bootstrap jadi kita perlu memanggil librarynya, disini kita akan pisahkan menjadi bagian header dan footer yang masing - masing ditampung dalam file header.php dan footer.php.

header.php

  <!doctype html>
  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Shopping Cart</title>
  </head>
  <body>

footer.php


      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </body>
    </html>

index.php

Didalam file ini berisi kode untuk menampilkan daftar produk dan kode untuk menambahkan produk kedalam keranjang belanja atau shopping cart.
<?php
session_start();

$conn = mysqli_connect('localhost', 'root', '', 'shopping-cart');

if (!$conn) {
    die ("Koneksi gagal. " . mysqli_connect_error()); // close koneksi
  }

  if (!isset($_GET['cari'])) {
    $query = mysqli_query($conn, "SELECT * FROM tb_produk");
  } else {
    $query = mysqli_query($conn, "SELECT * FROM tb_produk WHERE nama_produk LIKE '%" . $_GET['cari'] . "%'");
  }

  require_once 'header.php';

    if (isset($_SESSION['pesan'])) {
      echo '<div class="alert alert-warning alert-dismissible fade show" role="alert">
              ' . $_SESSION['pesan'] . '
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>';

      unset($_SESSION['pesan']);
    }
    ?>

    <div class="container mt-5">

      <?php require_once 'cart.php'; ?>

      <div class="row mb-2">
        <div class="col">
          <h4>Daftar Produk</h4>
        </div>
        <div class="col">
          <form class="form-inline pull-right" action="" method="GET">
            <div class="form-group mx-sm-3 mb-2">
              <input type="text" name="cari" class="form-control" placeholder="Cari Produk">
            </div>
            <button type="submit" class="btn btn-success mb-2">Cari</button>
          </form>
        </div>
      </div>

      <table class="table">
        <thead class="thead-light">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Nama Produk</th>
            <th scope="col">Harga</th>
            <th scope="col">Stok</th>
            <th scope="col">Pembelian</th>
            <th scope="col">Aksi</th>
          </tr>
        </thead>
        <tbody>

          <?php
          $no = 1;
          while ($dt = $query->fetch_assoc()) :
            ?>

            <form method="POST" action="<?= $_SERVER['PHP_SELF']; ?>">
              <input type="hidden" name="id_produk" value="<?= $dt['id']; ?>"></input>
              <tr>
                <th scope="row"><?= $no++; ?></th>
                <td><?= $dt['nama_produk']; ?></td>
                <td><?= $dt['harga']; ?></td>
                <td><?= $dt['stok']; ?></td>
                <td width="106">
                  <input class="form-control form-control-sm" type="number" name="pembelian" value="1" min="1" max="<?= $dt['stok']; ?>"></td>
                  <td>
                    <button class="btn btn-primary btn-sm" type="submit" name="submit">
                      <i class="fa fa-shopping-cart"></i>
                    </button>
                  </td>
                </tr>
              </form>

            <?php endwhile; ?>

          </tbody>
        </table>

        <a href="laporan.php"><button class="btn btn-danger">Lihat Laporan</button></a>
      </div>

<?php require_once 'footer.php'; ?>

Output:

Tampilan daftar produk



cart.php

File ini berisi kode untuk mengelola data produk yang masuk ke keranjang belanja. Kita akan menggunakan session untuk menyimpan dan mengelola item dalam keranjang belanja.
<?php

if (isset($_POST['id_produk'], $_POST['pembelian'])) {
 
 $id = $_POST['id_produk'];
 $pembelian = $_POST['pembelian'];

 $produk = mysqli_query($conn, "SELECT * FROM tb_produk WHERE id = '$id'");
 $dt_produk = $produk->fetch_assoc();

 if (!isset($_SESSION['cart'])) $_SESSION['cart'] = [];

 $index = -1;
 $cart = unserialize(serialize($_SESSION['cart']));

 // jika produk sudah ada dalam cart maka pembelian akan diupdate
 for ($i=0; $i<count($cart); $i++) {
  if ($cart[$i]['id_produk'] == $id) {
   $index = $i;
   $_SESSION['cart'][$i]['pembelian'] = $pembelian;
   break;
  }
 }

 // jika produk belum ada dalam cart
 if ($index == -1) {
  $_SESSION['cart'][] = [
   'id_produk' => $id,
   'nama_produk' => $dt_produk['nama_produk'],
   'harga' => $dt_produk['harga'],
   'pembelian' => $pembelian
  ];
 }
}

if (!empty($_SESSION['cart'])) { 
 ?>

  <h4>Daftar Belanja Anda</h4>
  <br>
  <table class="table table-bordered">
   <tr align="center">
    <th>#</th>
    <th>Nama Produk</th>
    <th>Pembelian</th>
    <th>Harga</th>
    <th>Total</th>
    <th>Aksi</th>
   </tr>

   <?php
   if(isset($_SESSION['cart'])) {
    $cart = unserialize(serialize($_SESSION['cart']));
    $index = 0;
    $no = 1;
    $total = 0;
    $total_bayar = 0;

    for ($i=0; $i<count($cart); $i++) {
     $total = $_SESSION['cart'][$i]['harga'] * $_SESSION['cart'][$i]['pembelian'];
     $total_bayar += $total;
     ?>

     <tr>
      <td align="center"><?= $no++; ?></td>
      <td><?= $cart[$i]['nama_produk']; ?></td>
      <td align="center"><?= $cart[$i]['pembelian']; ?></td>
      <td><?= $cart[$i]['harga']; ?></td>
      <td><?= $total; ?></td>
      <td align="center">
       <a href="?index=<?= $index; ?>">
        <button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
       </a>  
      </td>
     </tr>

     <?php
     $index++;
    }

  // hapus produk dalam cart
    if(isset($_GET['index'])) {
     $cart = unserialize(serialize($_SESSION['cart']));
     unset($cart[$_GET['index']]);
     $cart = array_values($cart);
     $_SESSION['cart'] = $cart;
    }
   }
   ?>

   <tr>
    <td colspan="4" align="right"><strong>Total Bayar</strong></td>
    <td><strong><?= $total_bayar; ?></strong></td>
    <td align="center">
     <a href="transaksi.php">
      <button class="btn btn-success btn-sm">Checkout</button>
     </a>
    </td>
   </tr>

  </table>
  <br><hr>

<?php
}

if (isset($_GET['index'])) {
 header('Location: index.php');
}
?>

Output:

Tampilan daftar belanja

transaksi.php

File ini digunakan untuk menyimpan data dari tabel keranjang belanja ke database dan mengakhiri session. Setelah session berakhir, item dikeranjang akan dihapus.
<?php
session_start();

require_once 'koneksi.php';

if (!isset($_SESSION['cart'])) {
 header('Location: index.php');
}

$cart = unserialize(serialize($_SESSION['cart']));
$total_item = 0;
$total_bayar = 0;

for ($i=0; $i<count($cart); $i++) { 
 $total_item += $cart[$i]['pembelian'];
 $total_bayar += $cart[$i]['pembelian'] * $cart[$i]['harga'];
}

// proses penyimpanan data
$query = mysqli_query($conn, "INSERT INTO tb_order (total_item, total_bayar, tgl_transaksi) VALUES ('$total_item', '$total_bayar', '" . date('Y-m-d') . "')");

$id_order = mysqli_insert_id($conn);

for ($i=0; $i<count($cart); $i++) { 
 $id_produk = $cart[$i]['id_produk'];
 $pembelian = $cart[$i]['pembelian'];

 $query = mysqli_query($conn, "INSERT INTO tb_detail_order (id_order, id_produk, pembelian) VALUES ('$id_order', '$id_produk', '$pembelian')");
}

// unset session
unset($_SESSION['cart']);
$_SESSION['pesan'] = "Pembelian sedang diproses, terimakasih.";
header('Location: index.php');

laporan.php

Pada halaman laporan akan menampilkan data transaksi keseluruhan, dan ada link untuk melihat detail barang yang dipesan apabila kita ingin melihatnya.
<?php
require_once 'koneksi.php';
require_once 'header.php';
?>

<div class="container mt-5">
 <h4>Laporan Transaksi</h4>
 <br>
 
 <a href="index.php">
  <button class="btn btn-success btn-sm">
   Transaksi
  </button>
 </a>

 <table class="table table-bordered mt-3">
  <thead align="center">
   <tr>
    <th>#</th>
    <th>Tgl. Transaksi</th>
    <th>Total Item</th>
    <th>Total Bayar</th>
    <th>Aksi</th>
   </tr>
  </thead>
  <tbody align="center">

   <?php
   $query = mysqli_query($conn, "SELECT * FROM tb_order");
   $no = 1;
   while ($dt = $query->fetch_assoc()) :
    ?>

    <tr>
     <td><?= $no++; ?></td>
     <td><?= $dt['tgl_transaksi']; ?></td>
     <td><?= $dt['total_item']; ?></td>
     <td><?= $dt['total_bayar']; ?></td>
     <td>
      <a href="detail_order.php?id_order=<?= $dt['id_order']; ?>">Detail Order</a>
     </td>
    </tr>

   <?php endwhile; ?>

  </tbody>
 </table>
</div>

<?php require_once 'footer.php'; ?>

Output:

Tampilan halaman laporan

detail_order.php

File inilah yang berisi kode untuk menampilkan data detail order.
<?php
require_once 'koneksi.php';
require_once 'header.php';

if (!isset($_GET['id_order'])) {
  header('Location: laporan.php');
}

?>

<div class="container mt-5">
  <h4>Detail Order</h4>
  <br>
  
  <a href="laporan.php">
    <button class="btn btn-success btn-sm">
      <i class="fa fa-arrow-left"></i> Kembali
    </button>
  </a>

  <table class="table table-bordered mt-3">
    <thead align="center">
      <tr>
        <th>#</th>
        <th>Nama Produk</th>
        <th>Harga</th>
        <th>Pembelian</th>
      </tr>
    </thead>
    <tbody>

    <?php
    $query = mysqli_query($conn, "SELECT * FROM `tb_detail_order` INNER JOIN tb_produk ON tb_detail_order.id_produk = tb_produk.id WHERE id_order = '$_GET[id_order]'");
    $no = 1;

    while($detail = $query->fetch_assoc()) :
    ?>

      <tr>
        <td align="center"><?= $no++; ?></td>
        <td><?= $detail['nama_produk']; ?></td>
        <td><?= $detail['harga']; ?></td>
        <td align="center"><?= $detail['pembelian']; ?></td>
      </tr>

    <?php endwhile; ?>

    </tbody>
  </table>
</div>

Output:

Tampilan halaman detail order

Dan itu saja tentang cara membuat shopping cart dengan PHP, Bootstrap dan MySQL. Apabila ada pertanyaan silahkan tulis dikolom komentar dibawah.

Kalian bisa download source codenya disini. Terimakasih.

Posting Komentar

1 Komentar