Toko Online Sederhana Berbasis Web

-




gambar di atas adalah halaman awal jika membuka toko online. untuk kodingnya adalah seperti di bawah ini. 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) 2021 | Design by <a href="index.php" rel="nofollow"> Nama Kamu </a>.</p>
</div>
</body>
</html>

2. Detail.php
lalu 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) 2021 | Design by <a href="index.php" rel="nofollow"> Nama Kamu </a>.</p>
</div>
</body>
</html>

3. Carabelanja.php

cara belanja pada toko online yang 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) 2021 | Design by <a href="index.php" rel="nofollow"> Nama Kamu </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) 2021 | Design by <a href="index.php" rel="nofollow"> Nama Kamu </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) 2021 | Design by <a href="index.php" rel="nofollow"> Nama Kamu </a>.</p>
</div>
</body>
</html>

berikutnya adalah halaman administratornya.


6. koneksi.php

koneksi.php berfungsi untuk koneksi database dengan koding yang dibuat.
berikut adalah kodingnya.

<?php
$servername ="localhost";
$user       ="root";
$password   ="";
$db         ="bambukuning1";

$koneksi = mysql_connect ($servername, $user, $password)

or die ('gagal koneksi'.mysql_error());

$database = mysql_select_db ($db)
or die ('gagal terhubung ke database'.mysql_error());
?>

7. logout.php

logout.php berfungsi untuk keluar dari dashboard.
berikut adalah kodingnya.

<?php
session_start();
session_destroy();
echo"<script language='javascript'>window.locaton ='index.php'</script>";
?>

Comments

Post a Comment

Popular posts from this blog

Input Output HTML

-
Image
FORMULIR PEGAWAI NEGERI KONOHA Cara pembuatan script input dan output Formulir Pegawai Negeri Konoha. Perhatikan penjelasan saya berikut ini: Untuk menghasilkan layar input formulir pegawai negeri konoha seperti dibawah ini: Dan layar output formulir pegawai negeri konoha seperti dibawah ini : Maka kita harus membuat script input dan output seperti dibawah ini: SCRIPT INPUT FORMULIR <html> <head>        <title></title> </head> <body> <strong><div align="center"><h1>FORMULIR PEGAWAI NEGERI KONOHA</h1></div></strong> <form action="output_formulir.php" method="post"> <table border=2 align="center"> <tr><td colspan=2>Isi Data Di Bawah Ini :</td></tr> <tr><td width=40%>Nama</td> <td><input type="text" name=txtnama></td></tr> <tr><td width=40%>Alamat</td> <td><textare
Read more

2 Cara Membuat Database

-
Image
Ada 2 cara untuk   membuat database perpustakaan   yaitu dengan menggunakan tools phpMyAdmin ataupun melalui CMD ( Command Prompt ). Cara yang lebih mudah adalah dengan menggunakan phpMyadmin karena semua langkah-langkah berbasis GUI ( graphical user interface ) berbeda jika membuatnya dengan  command prompt  yang menggunakan perintah-perintah sql. Namun jika kalian bisa mencoba keduanya, dengan begitu kalian mempunyai  experience  kalian dalam mengelolah database akan semakin baik. Sebelum masuk ke teknisnya, pastikan kita harus membuat rancangan databasenya terlebih dahulu, rancangan ini berkaitan dengan spesifikasi/deskripsi dari setiap tabel dan juga hubungan (relasi) antar tabel yang saling terhubung. Karena studi kasus kita kali ini untuk  cara membuat database perpustakaan  dibawah ini adalah contoh gambaran setiap tabel dan bagaimana masing-masing tabel tersebut saling terhubung. Juga sudah memahami hal-hal yang berhubungan dengan database misalnya field/kolom, penggunaan tipe
Read more