.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Tutorial Membuat Toko Online Sederhana Berbasis Web

Juni 24, 2016 | | 0 komentar
Hallo guys.... kali ini saya akan berbagi tentang cara membuat toko online berbasis web. kalian pasti sudah tau dong toko online. di era modern seperti ini banyak orang membeli barang di toko online. mengapa toko online ???? ya karna toko online itu bisa memudahkan memilih barang tanpa harus ke toko . selain itu kita juga bisa melihat lihat barang tanpa harus membelinya.

Cuplikan di atas hanya menceritakan sedikit tentang toko online.

Di sini saya membagikan tutorial membuat toko online sederhana bagi kalian yang ingin membuat toko online. dan jika kalian malas untuk melihat tutorial, anda bisa langsung download di link bagian bawah artikel.

Okee langsung saja kita masuk pembahasan..

Seperti posting sebelumnya , kita harus sudah menginstal xampp untuk server lokal dan yang pasti notepad ++..

Disini saya akan membuat toko jersey. berikut adalah tampilannya.


gambar di atas adalah halaman awal jika membuka toko online yang saya buat. untuk kodingnya adalah seperti di bawah ini. saya beri nama filenya index.php

1. index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

<style type="text/css">
.kotak { 
height:250px; 
width : 180px;
padding:10px;
background-color:#ffffff;
width:250px; 
margin-top:10px; }

.sub-barang{
text-align:center;
padding:5px;
width:210px;
float:left;
border:1px dashed #333333;
-moz-border-radius:4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
margin:5px 5px 10px 5px;
}
.jdl-brg{
font-size:14px;
height:200px;
margin-bottom:70px;
font-family:"Comic Sans MS";
}

#paging{
width:1154px;
margin-top:600px;
height:42px;
border:1px dashed #666666;
-moz-border-radius:4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
}
#kotak-paging{
text-align:center;
margin:5px;
padding:5px;
width:50px;
float:left;
border:1px dashed #666666;
-moz-border-radius:4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
}


</style>

<style type="text/css">
img {
padding:5px;
background-color:000066;
border-radius:20px;
}
</style>

<style type="text/css">
<!--
.style9 { color: #FF0000;
font-size: 18pt;
}
-->
</style>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Bambu Kuning Jersey</a></h1>
  </div>
<div id="menu">
<ul>
<li class="active"><a href="index.php" accesskey="1" title="">Homepage</a></li>
<li><a href="aboutus.php" accesskey="3" title="">About Us</a></li>
<li><a href="carabelanja.php" accesskey="4" title="">cARA BELANJA </a></li>
<li><a href="contactus.php" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
<div id="banner"></div>

<div id="page" class="container">
      <?php  
    include "koneksi.php";  
   
$batas=10;
$paging=$_GET['paging'];
if(empty($paging))
{
$posisi=0;
$paging=1;
}

else{
$posisi=($paging-1) * $batas;
}
$query=mysql_query("select * from produk order by id_produk desc limit $posisi,$batas");
while($r=mysql_fetch_array($query))
{
    echo"<div class='sub-barang'><div class='jdl-brg'><div class='jdl-brg'><img border=2 src='../ngadimin/produk/foto/$r[gambar]' border=0 width=200 height=200> 
        
<strong>$r[2]</strong>
      
        Rp$r[4] <br><a href='detail.php?id=$r[id_produk]&filenya=$r[gambar]' ><img src='images/detailButton.gif'></a></div></div></div> "; 
      
    } 
//penomoran
echo "<tr><td colspan='2' valign='top' align='center'>";
$query2=mysql_query("select * from produk");
$jumlah_data=mysql_num_rows($query2);
$jumlah_halaman=ceil($jumlah_data/$batas);
echo"<div id='paging'>";
if (1 != $paging){//tanda != berarti perintah akan dijalankan jika $paging tidak sama dengan 1, copyright all teknik paging by go_blind_hacker, powered by V-boys_studio
$back=$paging-1;
echo "<div id='kotak-paging'><a href='index.php?paging=$back'><b>Back</b></a></div>";
}
else{
echo"<div id='kotak-paging'>Back</div>";
}
if ($paging != $jumlah_halaman){
$next=$paging+1;
echo" <div id='kotak-paging'><a href='index.php?paging=$next'>  <b>Next</b></a></div>";
}
else
{
echo "<div id='kotak-paging'>Next</div>";
}
echo"</div>";
?>
    </tr>
  </table>
</div>
<p class="style9">PARTNER KAMI </p>
<table width="875" border="0" align="center">
  <tr>
    <td align="center"><img src="images/cek-kiriman-paket-barang-TIKI.jpg" width="150" height="100" /><img src="images/TIKI-JNE.gif" width="150" height="100" /><img src="images/bank-mandiri-logo11.jpg" width="150" height="100" /><img src="images/248_logo.jpg" width="200" height="100" /></td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="copyright" class="container">
<p>Copyright (c) 2013 PIDJAR | Design by <a href="index.php" rel="nofollow">aCHMAD PIDJARIANTO </a>.</p>
</div>
</body>
</html>

2. Detail.php
lalu berikutnya saya membuat detail.php

berikut adalah tampilannya.





untuk membuat tampilan di atas kodingnya adalah seperti di bawah ini.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

<style type="text/css">
.kotak { 
height:250px; 
width : 180px;
padding:10px;
background-color:#ffffff;
width:250px; 
margin-top:10px; }

.sub-barang{
text-align:center;
padding:5px;
width:210px;
float:left;
border:1px dashed #333333;
-moz-border-radius:4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
margin:5px 5px 10px 5px;
}
.jdl-brg{
font-size:14px;
height:200px;
margin-bottom:70px;
font-family:"Comic Sans MS";
}

</style>

<style type="text/css">
img {
padding:5px;
background-color:000066;
border-radius:20px;
}
</style>

<style type="text/css">
<!--
.style9 { color: #FF0000;
font-size: 18pt;
}
.style10 {
color: #8dc63f;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Bambu Kuning Jersey</a></h1>
  </div>
<div id="menu">
<ul>
<li class="active"><a href="index.php" accesskey="1" title="">Homepage</a></li>
<li><a href="aboutus.php" accesskey="3" title="">About Us</a></li>
<li><a href="carabelanja.php" accesskey="4" title="">cARA BELANJA </a></li>
<li><a href="contactus.php" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
<div id="banner"></div>

<div id="page" class="container">
      <?php
include "koneksi.php";
$id=$_GET['id'];
$tampil="select * from  produk where id_produk='$id'";
$hasil=mysql_query($tampil);
$r=mysql_fetch_array($hasil);

//while($data=mysql_fetch_array($edit)){
?>
<table border="0">
<tr>
<td rowspan="5"><?php echo "<img border=2 src='../ngadimin/produk/foto/$r[gambar]' border=0 width=200 height=200>"; ?> </td>
<td>&nbsp;</td>
<td><strong><?php echo $r['nama_produk']; ?></strong></td>
<td>
</td>
</tr>  
<tr>
<td></td>
<td>tersedia : <?php echo $r['deskripsi']; ?></td>
<td>&nbsp;</td>
</tr>  
<tr>
<td>&nbsp;</td>
<td>harga Rp <?php echo $r['harga']; ?>,00</td>
<td>&nbsp;</td>
</tr>  
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>  
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>  

  </table><br><br>
<p>untuk berbelanja di toko kami sangat mudah. anda hanya melihat barang yang tersedia pada tampilan produk. setelah itu anda hubungi kami di no <span class="style5"><strong>085789624133</strong></span> atau pin bb <span class="style5 style10">29b46fd2</span>. transaksi bisa dilakukan melalui bank <span class="style7">BNI </span>dan <span class="style7">Mandiri</span>. untuk ongkos kirim kami menyesuaikan agen pengiriman paket barang. biasanya kami menggunakan <span class="style7">tiki</span> atau <span class="style7">JNE</span>. anda bisa memilih sesuai dengan keinginan anda. bila anda ingin membeli dalam jumlah banyak/grosir, maka harga bisa sedikit miring. terima kasih telah mengunjungi situs kami. selamat berbelanja. <span class="style8"><strong>.::'kepuasan customer adalah kebanggaan buat kami'::..</strong></span></p>
</div>
<p class="style9">PARTNER KAMI </p>
<table width="875" border="0" align="center">
  <tr>
    <td align="center"><img src="images/cek-kiriman-paket-barang-TIKI.jpg" width="150" height="100" /><img src="images/TIKI-JNE.gif" width="150" height="100" /><img src="images/bank-mandiri-logo11.jpg" width="150" height="100" /><img src="images/248_logo.jpg" width="200" height="100" /></td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="copyright" class="container">
<p>Copyright (c) 2013 PIDJAR | Design by <a href="index.php" rel="nofollow">ACHMAD PIDJARIANTO </a>.</p>
</div>
</body>
</html>

3. Carabelanja.php

cara belanja pada toko online yang saya buat berfungsi untuk memberi informasi tentang cara order produk di toko online ini.

berikut adalah kodingnya.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : PlainLeaf 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20130902

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

<style type="text/css">
<!--
.style5 {
color: #0000FF;
font-size: 16pt;
}
.style7 {color: #0000FF; font-size: 14pt; font-weight: bold; }
.style8 {
color: #00CC00;
font-size: 14pt;
font-weight: bold;
}
.style9 {
color: #FF0000;
font-size: 18pt;
}
-->
</style>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Bambu Kuning Jersey</a></h1>
  </div>
<div id="menu">
      <ul>
        <li class="active"><a href="index.php" accesskey="1" title="">Homepage</a></li>
        <li><a href="aboutus.php" accesskey="3" title="">About Us</a></li>
        <li><a href="carabelanja.php" accesskey="4" title="">cARA BELANJA </a></li>
        <li><a href="contactus.php" accesskey="5" title="">Contact Us</a></li>
      </ul>
  </div>
</div>
<div id="banner"></div>
<div id="page" class="container">
  <p>untuk berbelanja di toko kami sangat mudah. anda hanya melihat barang yang tersedia pada tampilan produk. setelah itu anda hubungi kami di no <span class="style5">085789624133</span> atau pin bb <span class="style5">29b46fd2</span>. transaksi bisa dilakukan melalui bank <span class="style7">BNI </span>dan <span class="style7">Mandiri</span>. untuk ongkos kirim kami menyesuaikan agen pengiriman paket barang. biasanya kami menggunakan <span class="style7">tiki</span> atau <span class="style7">JNE</span>. anda bisa memilih sesuai dengan keinginan anda. bila anda ingin membeli dalam jumlah banyak/grosir, maka harga bisa sedikit miring. terima kasih telah mengunjungi situs kami. selamat berbelanja. <span class="style8">.::'kepuasan customer adalah kebanggaan buat kami'::..</span></p>
  <p class="style9">PARTNER KAMI </p>
  <table width="875" border="0" align="center">
    <tr>
      <td align="center"><img src="images/cek-kiriman-paket-barang-TIKI.jpg" width="150" height="100" /><img src="images/TIKI-JNE.gif" width="150" height="100" /><img src="images/bank-mandiri-logo11.jpg" width="150" height="100" /><img src="images/248_logo.jpg" width="200" height="100" /></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<div id="copyright" class="container">
<p>Copyright (c) 2013 PIDJAR | Design by <a href="index.php" rel="nofollow">aCHMAD PIDJARIANTO </a>.</p>
</div>
</body>

</html>

4. Contactus.php

contact us berfungsi untuk memberi informasi tentang contak person kami. namun pada menu detail sebenarnya sudah ada contact person . ini hanya menu tambahan saja. 

 berikut kodingnya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : PlainLeaf 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20130902

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

<style type="text/css">
<!--
.style5 {
color: #0000FF;
font-size: 16pt;
}
.style7 {color: #0000FF; font-size: 14pt; font-weight: bold; }
.style8 {
color: #00CC00;
font-size: 14pt;
font-weight: bold;
}
.style9 {
color: #FF0000;
font-size: 18pt;
}
-->
</style>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Bambu Kuning Jersey</a></h1>
  </div>
<div id="menu">
      <ul>
        <li class="active"><a href="index.php" accesskey="1" title="">Homepage</a></li>
        <li><a href="aboutus.php" accesskey="3" title="">About Us</a></li>
        <li><a href="carabelanja.php" accesskey="4" title="">cARA BELANJA </a></li>
        <li><a href="contactus.php" accesskey="5" title="">Contact Us</a></li>
      </ul>
  </div>
</div>
<div id="banner"></div>
<div id="page" class="container">
  <p>achmad pidjarianto 085789624133 atau pin 29b46fd2 <br>.terima kasih telah mengunjungi situs kami. selamat berbelanja. <span class="style8">.::'kepuasan customer adalah kebanggaan buat kami'::..</span></p>
  <p class="style9">PARTNER KAMI </p>
  <table width="875" border="0" align="center">
    <tr>
      <td align="center"><img src="images/cek-kiriman-paket-barang-TIKI.jpg" width="150" height="100" /><img src="images/TIKI-JNE.gif" width="150" height="100" /><img src="images/bank-mandiri-logo11.jpg" width="150" height="100" /><img src="images/248_logo.jpg" width="200" height="100" /></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<div id="copyright" class="container">
<p>Copyright (c) 2013 PIDJAR | Design by <a href="index.php" rel="nofollow">aCHMAD PIDJARIANTO </a>.</p>
</div>
</body>

</html>


5. aboutus.php

aboutus.php berfungsi untuk memberi informasi tentang toko kami.
berikut adalah kodingnya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : PlainLeaf 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20130902

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

<style type="text/css">
<!--
.style5 {
color: #0000FF;
font-size: 16pt;
}
.style7 {color: #0000FF; font-size: 14pt; font-weight: bold; }
.style8 {
color: #00CC00;
font-size: 14pt;
font-weight: bold;
}
.style9 {
color: #FF0000;
font-size: 18pt;
}
-->
</style>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Bambu Kuning Jersey</a></h1>
  </div>
<div id="menu">
      <ul>
        <li class="active"><a href="index.php" accesskey="1" title="">Homepage</a></li>
        <li><a href="aboutus.php" accesskey="3" title="">About Us</a></li>
        <li><a href="carabelanja.php" accesskey="4" title="">cARA BELANJA </a></li>
        <li><a href="contactus.php" accesskey="5" title="">Contact Us</a></li>
      </ul>
  </div>
</div>
<div id="banner"></div>
<div id="page" class="container">
  <p>Kami adalah situs jual beli jersey bola yang harganya cukup murah untuk daerah lampung. letak toko asli kami adalah di jl imam bonjol no 22 tanjung karang bandar lampung dengan nama toko jersey bola. dalam melakukan jual beli, kami memberikan harga semurah-urahnya kepada customer untuk produk yang cukup baik. karena jika anda puas belanja di toko kami, maka kebanggan besar untuk kami.terima kasih telah mengunjungi situs kami. selamat berbelanja. <span class="style8">.::'kepuasan customer adalah kebanggaan buat kami'::..</span></p>
  <p class="style9">PARTNER KAMI </p>
  <table width="875" border="0" align="center">
    <tr>
      <td align="center"><img src="images/cek-kiriman-paket-barang-TIKI.jpg" width="150" height="100" /><img src="images/TIKI-JNE.gif" width="150" height="100" /><img src="images/bank-mandiri-logo11.jpg" width="150" height="100" /><img src="images/248_logo.jpg" width="200" height="100" /></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<div id="copyright" class="container">
<p>Copyright (c) 2013 PIDJAR | Design by <a href="index.php" rel="nofollow">aCHMAD PIDJARIANTO </a>.</p>
</div>
</body>
</html>

berikutnya adalah halaman administratornya.


untuk kodingnya kalian langsung aja download gan di bawah ini. sekian dan terima kasih.

semoga bermanfaat gan tutorial tentang cara membuat toko online sederhana ini.

Salaam. :)


DOWNLOAD NOW

Download Databasenya
Suni
Langganan: Postingan (Atom)

Tawk.to

Youtube Scodeaplikasi
Youtube Labrobotika
Beli Sourcecode Aplikasi
Kursus Robot Online
Kursus Program Online