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 :
#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>
Supported by CV. FR-SYSTEM | FRWEBHOST © 2019
Informasi Lengkap Hubungi 081271245514
Mau dapat ilmu-ilmu baru dari FR-ACADEMY?
Yuk kakak ganteng n cantik isi formulir ini.
kamu akan mendapat Ilmu baru yang akan dikirim ke emailmu
setiap ada update dari situs ini
GRATIS
Terima Kasih Kakak, Subscribe telah Berhasil
There was an error while trying to send your request. Please try again.