Assalamualaikum wr.wb.
Halo teman-teman semua, Online Shop atau Toko Online atau istilah kerennya E-Commerce adalah situs dengan fasilitas jual beli didalamnya, seperti kita ketahui diindonesia sudah banyak sekali online shop yang beredar, seperti contoh lazada, zalora, olx dan lain sebagainya. Nah disini kita akan belajar cara membuat toko online sederhana menggunakan ajax dan jquery, tutorial ini akan terbagi menjadi beberapa part, karna pembahasannya cukup panjang. Berikut penampakannya.
Yups.. tutorial sederhana Toko Online Makanan Khas Madura :D
ok langsung saja mulai.
Berikut list file yang akan kita buat.
Download database disini dan gambarnya disitu. :D
Setelah itu buat koneksi database terlebih dahulu, bisa dilihat pada gambar diatas koneksi database saya beri nama “kon.php”, berikut codenya.
<?php
try{
$kon=new PDO("mysql:host=localhost;dbname=ecom","root","root");
}catch(PDOException $e){
echo "Koneksi gagal ".$e->getMessage();
exit;
}
?>
Koneksi database diatas menggunakan PDO (PHP Data Objek) penjelasannya bisa dilihat di disini.
Setelah itu kita buat file “index.php”.
<?php error_reporting(E_ALL); // untuk keperluan Development set ke ALL agar semua kesalahan bisa diketahui ?> <!doctype html> <html> <meta charset='utf-8'> <head> <title> Laris Online Shop </title> <link href='style.css' rel='stylesheet'> <script src='plugin/js/jquery-1.8.2.min.js'></script> </head> <body> <?php include "kon.php"; ?> <div class='overlay'> </div> <!-- kepala --> <header> <h1> ..:: Laris Gan ::..</h1> <span> Online shop menuju kemenangan :D </span> </header> <!-- end of kepala --> <div class='pop-up'> <div class='h-pop-up'> <h2> Keranjang Belanja Anda : </h2> </div> <div class='b-pop-up'> <!—disini tempat load cart.php --> </div> <div class='f-pop-up'> <input type='button' value='Tutup' class='tutup'> </div> </div> <!-- bungkus --> <div class='wrapper'> <section> <div class='content'> <!—disini tempat memasukkan gambar--> </div> </section> <aside> <div class="keranjang_mini"> <div class='krj'> <span>Keranjang Belanja :</span> <div id='tkrj'> <!—disini tempat load keranjang --> </div> <input type='button' value='Lihat Keranjang' class='bangkit'> </div> </br> </br> <hr> <h3> PT. Laris Gan </h3> <table style="margin-left:20px"> <ul> <tr><td><li>Alamat </td><td> : Jl. Laris Gan </li></td></tr> <tr><td><li>Telp </td><td> : 0812345678910 </li></td></tr> <tr><td><li>Like us </td><td> : Jl. Laris Gan </li></td></tr> <tr><td><li>Follow us </td><td> : @laris_gan </li></td></tr> <tr><td><li>Email </td><td> : support@laris_gan.com </li></td></tr> </ul> </table> </div> </aside> <!-- end of bungkus --> </body> </html>
Kemudian buat file “style.css”.
* {
margin:0;
padding:0;
}
html {
background-color:#E8E8DD;
}
header {
position:fixed;
top:0px;
height:60px;
width:100%;
z-index:100;
border-bottom:4px solid #000;
background-color:#aaf200;;
}
.overlay {
height:100%;
width:100%;
background-color:#000;
opacity:0.8;
z-index:101;
position:fixed;
display:none;
}
.wrapper {
height:100%;
width:90%;
overflow:hidden;
right:5%;
left:5%;
border:4px solid #000;
background-color:#fffff0;
position:relative;
top:60px;
}
.krj{
background-color:#aaf200;
width:300px;
height:100px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
border-radius:5px;
border:1px solid #000;
position:relative;
}
.bangkit,.tutup {
float:right;
border:1px solid #000;
cursor:pointer;
height:30px;
border-radius:5px;
background-color:#000;
width:100px;
position:absolute;
bottom:2px;
right:2px;
font-family:times new roman;
font-size:15px;
color:white;
}
.bangkit:hover,.tutup:hover{
box-shadow:0px 0px 10px #000;
background-color:white;
color:#000;
}
.beli {
float:right;
border:1px solid #000;
cursor:pointer;
height:20px;
border-radius:5px;
background-color:#000;
width:50px;
text-align:center;
position:absolute;
bottom:2px;
right:2px;
font-family:times new roman;
font-size:15px;
color:white;
}
.beli:hover {
background-color:white;
color:#000;
box-shadow:0px 0px 10px #000;
}
section {
height:100%;
width:70%;
float:left;
border:0px solid yellow;
}
aside {
height:500px;
width:29%;
float:right;
}
.keranjang_mini{
height:auto;
width:100%;
border:0px solid red;
}
.content {
height:320px;
width:100%;
border:0px solid red;
}
.mainboximg {
height:110px;
width:49%;
float:left;
border:0px solid #675;
margin:10px 0 0px 5px;
background-color:#E8E8DD;
}
.boximg {
height:110px;
width:50%;
border:2px solid #aaf200;
float:left;
}
.boximg img {
height:99%;
width:99%;
border:0px solid white;
}
.boximg img:hover{
cursor:pointer;
}
.ket {
float:right;
height:110px;
width:46%;
border:0px solid yellow;
position:relative;
}
.ket a{
position:absolute;
bottom:0;
right:0;
}
.pop-up {
height:300px;
width:600px;
border:4px solid #aaf200;;
z-index:999;
position:fixed;
margin-right:auto;
margin-left:auto;
display:none;
top:100px;
left:0;
right:0;
box-shadow:0 0 15px #000;
border-radius:10px;
background-color:#fffff0;
text-align:center;
}
.h-pop-up {
height:20%;
width:100%;
border:0px solid red;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.c-pop-up{
height:80%;
width:100%;
border:0px solid yellow;
position:relative;
}
.tbl {
margin-right:auto;
margin-left:auto;
width:95%;
font-size:16px;
}
.f-pop-up{
height:10%;
width:100%;
border:0px solid green;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
position:absolute;
bottom:0px;
text-align:right;
}
jangan di run dulu karna belum ada gambarnya, load gambar akan dijelaskan pada bagian 2 .
Part 2 Disini [UPDATED]
.
