Membuat e commerce dengan php

Question

Table of Contents Show

Part 1 – Tutorial Membuat E-Commerce / Toko Online Menggunakan PHP dan MySQLi (Seri Video)
Source Code Pendukung
Share this:
Menyukai ini:

19 Maret 2019
1 Comment
By FRAcademy
belajar web, coding, mariaDB, mysql, Mysqli, php

Part 1 – Tutorial Membuat E-Commerce / Toko Online Menggunakan PHP dan MySQLi (Seri Video)

Pada Materi kali ini, kita akan membuat Website Penjualan / Ecommerce, yang diawali dengan pembuatan Tampilan Web menggunakan PHP, HTML, CSS dan selanjutnya kita akan Membuat Menu-menu Pendukung, selain itu kita akan membuat Database dan Tabel pendukung, serta Logika untuk Menampilkan Halaman-halaman yang akan kita buat pada Materi selanjutnya Untuk Lanjut ke materi ini, Sebaiknya lihat terlebih dahulu Materi Sebelumnya :

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

#index.php

<?php
include "koneksi.php"; 
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="theme.css" type="text/css" rel="stylesheet">
</head>

<body>
<section id="header">
	<div class="menu-atas"> </div>
    <div class="header">
    	<div class="container">
            <div class="row">
                <div class="col-4">
                    KeTokoKu.com
                </div>
                <div class="col-8">
                    <a href="?" class="menu-style">Beranda</a>
                    <a href="?page=kategori_produk" class="menu-style">Kategori Produk</a>
                    <a href="?page=keranjang_belanja" class="menu-style">Keranjang Belanja</a>
                    <a href="?page=checkout" class="menu-style">Checkout</a>
                    <a href="?page=cara_berbelanja" class="menu-style">Cara Berbelanja</a>
                </div>
            </div>
        </div>
    </div>
</section>
<?php
	$page=@$_GET['page'];
	if($page=="home"){
		include "page/home.php";

    }elseif($page=="detail_produk"){
        include "page/detail_produk.php";

	}elseif($page=="kategori_produk"){
		include "page/kategori_produk.php";

	}elseif($page=="daftar_pembelian"){
		include "page/daftar_pembelian.php";

	}elseif($page=="checkout"){
		include "page/checkout.php";

    }elseif($page=="proses_order"){
        include "page/proses_order.php";

    }elseif($page=="keranjang_belanja"){
        include "page/keranjang_belanja.php";

	}elseif($page=="cara_berbelanja"){
		include "page/cara_berbelanja.php";

    }elseif($page=="order_finish"){
        include "page/order_finish.php";
	
    }else{
		include "page/home.php";
	}
?>
<section id="footer">
	<div class="footer1">
    	<div class="container">
            <div class="row">
                <div class="col-4 kolom-footer">
                Kiri
                </div>
                <div class="col-4 kolom-footer">
                Tengah
                </div>
                <div class="col-4 kolom-footer">
                kanan
                </div>
            </div>
        </div>
    </div>
    <div class="footer2">Create by Ferdian Rahabista © 2018. All Right Reserved</div>
</section>
</body>
</html>

#koneksi.php

<?php
$koneksi=mysqli_connect("localhost","root","","ecommerce12122018") or die("Koneksi ke database Gagal");
?>

#theme.css

@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
}
body{
	margin:0 0 0 0;
	font-family:calibri;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;

}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.container{
	width:90%;
	margin:0 auto;
}
/* SECTION */
#produk{
	margin:30px;
}
/* Header */
.menu-atas{
	background:#4BC400;
	padding:10px;
	margin:0 auto;
}
.header{
	padding:10px 5px;
	background:#FFFFFF;
	border-bottom:5px solid #51B500;
}
.menu-style{
	float:left;
	padding:10px 15px;
	text-decoration:none;
	color:#000000;
}
.menu-style:hover{
	background:#1BCC00;
	color:#FFFFFF;
}

.slideshow{
	width:100%;
	background:url(images/slideshow.jpg);
	background-size:cover;
	height:400px;
}


.produk-title{
	font-size:20px;
	color:#000000;
	margin-bottom:20px;
}
.box-barang{
	border:1px solid #E9E9E9;
	padding:10px;
}
.box-barang:hover{
	border:1px solid #3FC700;
}
.box-barang img{
	width:100%;
}
.barang-judul{
	font-size:20px;
	color:#539A00;
	font-weight:800;
}
.barang-deskripsi{
	color:#C5C5C5;
}
.barang-harga{
	color:#F40004;
	font-size:24px;
	font-weight:bold;
}

.footer1{
	background:#2D3335;
	height:250px;
}
.footer2{
	background:#292929;
	padding:25px;
	text-align:center;
	color:#FFFFFF;
}
.kolom-footer{
	height:250px;
	color:#F7F7F7;
}
.form-control{
	width: 100%;
}

#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>