Part 2 – Tutorial Membuat E-Commerce / Toko Online Menggunakan PHP dan MySQLi (Seri Video)
- Pada Materi kali ini, kita akan membahas bagaimana cara Menampilkan Data Produk pada halaman Utama
- selanjutnya kita akan membuat Halaman Kategori Produk yang didalamnya akan menampilkan Produk berdasrkan Kategori yang dipilih
- dan yang terakhir kita akan membuat halaman Detail dari produk yang di klik
Untuk Lanjut ke materi ini, Sebaiknya lihat terlebih dahulu Materi Sebelumnya :
- Part 1 : https://www.youtube.com/watch?v=ofgQj…
- Part 2 : https://www.youtube.com/watch?v=5VBIT…
- Part 3 : https://youtu.be/hcpfvbnhnWA
- Part 4 : https://www.youtube.com/watch?v=31rju8Z9jho
- Part 5 : https://www.youtube.com/watch?v=2_YLIwHmcHo
Source Code Pendukung
#Home.php
<section id="slideshow">
<div class="slideshow"> </div>
</section>
<section id="produk">
<div class="container">
<div class="produk-title">PRODUK TERBARU</div>
<div class="row">
<?php
$produktebaru=mysqli_query($koneksi,"SELECT * FROM produk ORDER BY idproduk DESC LIMIT 0,6");
while($tampilproduk=mysqli_fetch_array($produktebaru)){
?>
<div class="col-4">
<div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">
<a href="?page=detail_produk&&idproduk=<?php echo $tampilproduk['idproduk']; ?>">
<?php echo $tampilproduk['nama_produk']; ?>
</a>
</div>
<div class="barang-deskripsi"><?php echo $tampilproduk['deskripsi_singkat']; ?> ...</div>
<div class="barang-harga">Rp. <?php echo number_format($tampilproduk['harga'],2); ?></div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<section id="produk">
<div class="container">
<div class="produk-title">PRODUK TERLARIS</div>
<div class="row">
<div class="col-4">
<div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div>
<div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-6"><div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div></div>
<div class="col-6"><div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div></div>
</div>
<div class="row">
<div class="col-3"><div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div></div>
<div class="col-3"><div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div></div>
<div class="col-3"><div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div></div>
<div class="col-3"><div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">Judul Produk</div>
<div class="barang-deskripsi">silahkan tuliskan Deskripsi Singkat disini ...</div>
<div class="barang-harga">Rp. 20.000.000</div>
</div></div>
</div>
</div>
</div>
</div>
</section>
#kategori_produk.php
<?php
$idkategoriproduk=mysql_real_escape_string(trim(strip_tags(@$_GET['idkategoriproduk'])));
if(!empty($idkategoriproduk)){
$proc_query="WHERE idkategoriproduk='$idkategoriproduk'";
}else{
$proc_query="";
}
$kategori=mysqli_fetch_array(mysqli_query($koneksi,"SELECT * FROM kategori_produk $proc_query"));
?>
<div class="container">
<h3>KATEGORI PRODUK <?php if(!empty($idkategoriproduk)){ ?><font color="red"><?php echo strtoupper($kategori['kategori']); ?></font> <?php } ?></h3>
<div class="row">
<div class="col-9">
<?php
$produktebaru=mysqli_query($koneksi,"SELECT * FROM produk $proc_query ORDER BY idproduk DESC LIMIT 0,6");
$cekjmlproduk=mysqli_num_rows($produktebaru);
if($cekjmlproduk==0){
echo "<h3>Maaf!! Produk pada Kategori $kategori[kategori] Tidak ada.</h3>";
}
while($tampilproduk=mysqli_fetch_array($produktebaru)){
?>
<div class="col-4">
<div class="box-barang">
<img src="images/produk.jpg">
<div class="barang-judul">
<a href="?page=detail_produk&&idproduk=<?php echo $tampilproduk['idproduk']; ?>">
<?php echo $tampilproduk['nama_produk']; ?>
</a>
</div>
<div class="barang-deskripsi"><?php echo $tampilproduk['deskripsi_singkat']; ?> ...</div>
<div class="barang-harga">Rp. <?php echo number_format($tampilproduk['harga'],2); ?></div>
</div>
</div>
<?php } ?>
</div>
<div class="col-3">
KATEGORI PRODUK
<ul>
<?php
$kategori=mysqli_query($koneksi,"SELECT * FROM kategori_produk");
while($kategori_tampil=mysqli_fetch_array($kategori)){
?>
<li><a href="?page=kategori_produk&&idkategoriproduk=<?php echo $kategori_tampil['idkategoriproduk']?>"><?php echo $kategori_tampil['kategori']; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
</div>
#detail_produk.php
<?php
$idproduk=mysql_real_escape_string(trim(strip_tags($_GET['idproduk'])));
$ambildata=mysqli_query($koneksi,"SELECT * FROM produk WHERE idproduk='$idproduk'");
$tampildata=mysqli_fetch_array($ambildata);
$kategori=mysqli_fetch_array(mysqli_query($koneksi,"SELECT * FROM kategori_produk WHERE idkategoriproduk='$tampildata[idkategoriproduk]'"));
?>
<div class="container">
<h3>DETAIL PRODUK</h3>
<div class="row">
<div class="col-9">
<h1><?php echo $tampildata['nama_produk']; ?>
<a href="?page=proses_order&&idproduk=<?php echo $tampildata['idproduk']; ?>">Add To Cart</a>
</h1>
Stok <b><?php echo $tampildata['stok']; ?></b> Kategori <b><?php echo $kategori['kategori'] ?></b> Harga Rp. <b><?php echo number_format($tampildata['harga'],2); ?></b><br>
<center><img src="<?php echo $tampildata['gambar']; ?>" width="100%"></center>
<?php echo $tampildata['deskripsi']; ?>
</div
>
<div class="col-3">
KATEGORI PRODUK
<ul>
<?php
$kategori=mysqli_query($koneksi,"SELECT * FROM kategori_produk");
while($kategori_tampil=mysqli_fetch_array($kategori)){
?>
<li><a href="?page=kategori_produk&&idkategoriproduk=<?php echo $kategori_tampil['idkategoriproduk']?>"><?php echo $kategori_tampil['kategori']; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
