Tutorial Membuat Toko Online Sederhana Berbasis Web

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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

<head>

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

img {

padding:5px;

background-color:000066;

border-radius:20px;

}

</style>

<!--

.style9 { color: #FF0000;

font-size: 18pt;

}

-->

</style>

</head>

<body>

<h1><a href="#">Bambu Kuning Jersey</a></h1>

</div>

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

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

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>

<tr>

</tr>

</table>

</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" />



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

</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> </td>
<td><strong><?php echo $r['nama_produk']; ?></strong></td>
<td>
</td>
</tr>
<tr>
<td></td>
<td>tersedia : <?php echo $r['deskripsi']; ?></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>harga Rp <?php echo $r['harga']; ?>,00</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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> </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">

<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" />



<style type="text/css">

</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> </p>
</div>
<p> </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">

<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" />



<style type="text/css">

</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> </p>
</div>
<p> </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">

<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" />



<style type="text/css">

</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> </p>
</div>
<p> </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

Download juga tutorial lainnya

Tutorial Membuat Toko Online Sederhana Berbasis Web
Tutorial Membuat Website Html Sederhana Tanpa Database
Playstore Sederhana Menggunakan PHP
Tutorial Membuat Login Multi User Menggunakan Php & MySql
Tutorial Membuat Simulasi Finger Print Untuk Absensi Berbasis Web Menggunakan PHP & MySql
Tutorial Membuat Sistem Informasi Portal Berita Berbasis Web Menggunakan Php & MySql
Tutorial Membuat Sistem Informasi Tujuan Wisata Berbasis Web Menggunakan PHP & MYSQL
Tutorial Membuat Website Html Sederhana Tanpa Database

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com

NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Tutorial Membuat Toko Online Sederhana Berbasis Web, Diterbitkan oleh sourcecodeaplikasi1 pada Jumat, 24 Juni 2016. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.