Sistem Penjualan Sepatu di Toko Moses Simangunsong Berbasis Website

(1)

Hasil Uji Program Tugas Akhir

SURAT KETERANGAN

Yang bertanda tangan dibawah ini, menerangkan bahwa Tugas Akhir Mahasiswa

Program Diploma 3 Teknik Informatika :

Nama

: CHRIS NOEL SUNDA D

NIM

: 132406198

Program Studi

: D3 Teknik Informatika

Judul TA

: Sistem Penjualan Sepatu di Toko Moses

Simangunsong Berbasis Website

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut diatas tanggal 30

Juni 2016

Dengan Hasil

: Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja

Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU

Medan.

Medan, 30 Juni 2016

Dosen Pembimbing

(2)

NIP. 196312141989031001

Drs. Marihat Situmorang, M.Kom

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa

: CHRIS NOEL SUNDA D

Nomor Stambuk

: 132406198

Judul Tugas Akhir

: SISTEM PENJUALAN SEPATU DI TOKO

MOSES SIMANGUNSONG BERBASIS

WEBSITE

Dosen Pembimbing

: Drs. Marihat Situmorang, M.Kom

Tanggal Mulai Bimbingan

:

Tanggal Selesai Bimbingan

:

No.

Tanggal Asisten

Bimbingan

Pembahasan pada

Asistensi Mengenai,

pada Bab :

Paraf Dosen

Pembimbing

Keterangan

1

2

3

4

5

6

7 Diketahui,

Ketua Program Studi D3 Teknik

Disetujui,

Informatika Fakultas MIPA USU

Pembimbing Utama

Dr. Elly Rosmaini, M.Si.

NIP. 196005201985032002

NIP. 196312141989031001

Drs. Marihat Situmorang, M.Kom

(3)

1. Index.php

<?php

error_reporting(0);

include ("proses/koneksi.php"); session_start();

if (!isset($_SESSION['username'])){ header ("location:registration.php"); }

<!DOCTYPE HTML> <html>

<head>

<title>Toko Sepatu Moses Simangunsong</title>

<link

href='http://fonts.googleapis.com/css?family=Montserrat:400, 700' rel='stylesheet' type='text/css'>

(4)

jQuery(document).ready(function($){ $('#etalage').etalage({

thumb_image_width: 300, thumb_image_height: 400, source_image_width: 800, source_image_height: 1000, show_hint: true,

click_callback: function(image_anchor, instance_id){

alert('Callback

example:\nYou clicked on an image with the anchor:

"'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');

} }); }); </script>

</head> <body>

<a href="index1.php"><img

src="images/logo.png" alt=""/></a> </div>

<li><a href="contact.php">Contact</a></li>| <a href="logout.php">Logout</a>|

(5)

</div>

</div> </div> </div>

<li><a class="color1"

href="index1.php">Home</a></li>

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual1.php">Casual</a></li>

<li><a

href="mens-sport1.php">sports</a></li> <li><a href="mens-kets1.php">Kets</a></li>

<li><a

href="mens-formal1.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li class="grid"><a class="color2" href="women1.php">Women</a>

(6)

<h4>Kategori</h4>

<ul>

<li><a

href="women-high heels1.php">High Heels</a></li>

<li><a

href="women-sport1.php">sports</a></li> <li><a href="women-kets1.php">Kets</a></li>

<li><a

href="women-formal1.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li><a class="color1" href="Cara Order1.php">Cara Order</a></li>

<li><a class="color1" href="Keranjang.php">Keranjang</a></li>

</div> </div>

</div>

$( "span.menu"

).click(function() {

$( ".head-nav ul"

).slideToggle(300, function() {

// Animation complete.

});

</script>

<div class="banner">

(7)

</div>

<div class="col-md-6 banner-info"> <h1>WELCOME</h1>

<p>Selamat datang di Toko Sepatu Moses

Tambunan. kami menyediakan Sepatu dengan harga yang yang terjangkau dan dapat membantu ada mencari sepatu yang ada inginkan. Anda tinggal memilih sepatu yang anda ingin kan dan melakukan transaksi dan barang langsung kami kirim ke tempat. Kami hanya dapat mengirim untuk lokasi sumatera, jawa dan Bali saja.</p>

</div>

</div>

<?php

$idtransaksi = $_SESSION['username'];

$q="SELECT * FROM `produk` ORDER BY `produk`.`id_produk` DESC";

$eq=mysql_query($q);

while($de=mysql_fetch_array($eq)){ $nama=$de['nama'];

$gambar=$de['gambar']; $harga=$de['harga']; echo "

<li>

<img src=\"images/".$gambar."\"><p class=\"price\">Rp. ".number_format($harga, 0, '', '.').",-</p>

href='aksi_keranjang.php?id=$de[id_produk]'>Beli</a>

</li>

"; }

</ul> </div> </div>

(8)

<p>Copyright by &copy Chris Noel 2016</p> </div>

</div>

</body>

</html>

2. Koneksi.php

<?php

$server = "localhost"; $user = "root";

$pass = "";

$database = "sepatu";

$dbconn = mysql_connect("$server","$user","$pass"); if (!$dbconn) die ("Gagal Melakukan Koneksi");

mysql_select_db($database,$dbconn) or die ("Database Tidak Diketemukan di Server");

3. Style.css

margin: 0px; padding: 0px;

box-sizing: border-box; }

html, body{ width: 100%; height: 100%; }

html{

font-family: "Open Sans"; font-size: 12px;

} a{

text-decoration: none; color: #333333;

}

.header-line{ width: 100%; height: 13px;

background-color: rgb(249, 139, 42); display: inline-block;

(9)

vertical-align: top; }

.header-logo{ width: 100%; height: 340px;

background-size: cover;

background-repeat: no-repeat;

background-position: center center; display: inline-block;

vertical-align: top; position: relative; }

.header{

width: 100%; height: 10%;

background-size: cover;

background-repeat: no-repeat;

background-position: center center; display: inline-block;

vertical-align: top; position: relative; }

.cover{

width: 100%; height: 100%;

background-color: rgba(2, 2, 2, 0.25); }

.main-logo{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); width: 150px;

height: 170px;

background-size: 150px 170px; background-repeat: no-repeat;

background-position: center center; opacity: 0.85;

cursor: pointer;

transition: opacity 0.1s linear; }

.main-logo:hover{

opacity: 0.95;

}

.price{

(10)

} .menu{

width: 100%;

display: inline-block; vertical-align: top; text-align: center;

border-bottom: 1px solid #DADADA; }

.menu li{

display: inline-block; margin-right: 100px; line-height: 70px; }

.menu li:last-child{

margin-right: 0px;

}

.menu a{

text-transform: uppercase; font-size: 14px;

}

.content{

width: 100%;

display: inline-block; vertical-align: top; padding: 25px 0px; }

.welcon{

width: 100%;

display: inline-block; margin-bottom: 100px; text-align: center; }

.sub-title{

font-size: 50px;

font-family: "Dancing Script";

font-weight: 400;

margin: 50px 0px 100px 0px;

}

.sub-title span{

color: rgb(249, 139, 42);

}

.welcon a{

font-family: "Dancing Script";

font-weight: 400;

(11)

margin-bottom: 10px;

}

.welcon ul{

text-align: center;

}

.welcon li{

display: inline-block;

margin-right: 70px;

margin-bottom: 70px;

}

.welcon li:hover a{

color: rgb(249, 139, 42);

transition: color .1s linear;

}

.welcon li:nth-child(4n){

margin-right: 0px;

}

@media (max-width: 1024px){

.welcon li:nth-child(4n){

margin-right: 70px;

}

@media (max-width: 991px){

.welcon li:nth-child(3n){

margin-right: 0px;

}

.welcon li:nth-child(4n){

margin-right: 70px;

}

.welcon li:last-child{

margin-right: 0px;

}

.welcon img{

margin-top: 10px;

width: 250px;

height: 250px;

}

.welcon h2{

font-family: "Dancing Script";

(12)

font-size: 30px;

margin-bottom: 10px;

}

@media (max-width: 991px){ .welcon img{

margin-top: 10px; width: 200px; height: 200px; border-radius: 50%; }

}

.about{

width: 100%; height: 450px; position: relative; }

.aboutcov{

width: 100%; height: 450px;

background: rgba(0 ,0, 0, .4);

top: 0px;

left: 0px;

position: absolute; text-align: center;

padding: 100px 0px 0px 0px }

.aboutcov .sub-title{

font-size: 40px;

color: #FFFFFF;

margin: 10px 0px;

}

.aboutcov p{

margin: 0 auto;

margin-top: 50px;

margin-bottom: 70px;

width: 55%;

color: #FFFFFF;

font-size: 14px;

}

.aboutcov a{

color: #FFFFFF;

padding: 10px 50px;

border: 1px solid rgb(249, 139, 42); transition: background .3s linear;

(13)

}

.aboutcov a:active,

.aboutcov a:hover{

background: rgb(249, 139, 42);

color: #FFFFFF;

}

.xabout{

background: url('../img/btn1.jpg') no-repeat center center;

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;

position: relative; }

.top-menu{

text-align: center; }

.top-menu .sub-title{

margin: 100px 0px 50px 0px; }

.top-menu li{

list-style-type: none; }

.maindescription{ font-size: 13px; width: 60%; margin: 0 auto; }

.subcontent{

display: inline-block; vertical-align: top; width: 100%;

margin-top: 30px; position: relative; }

.menulist{

display: inline-block; }

.menulist ul{

(14)

.menulist li{

border-top: 1px solid rgb(249, 162, 85); border-bottom: 1px solid rgb(249, 162, 85); float: left;

width: 200px; cursor: pointer; }

.menulist li:first-child{

border-left: 1px solid rgb(249, 162, 85); border-right: 1px solid rgb(249, 162, 85); border-radius: 3px 0px 0px 3px;

}

.menulist li:last-child{

border-left: 1px solid rgb(249, 162, 85); border-right: 1px solid rgb(249, 162, 85); border-radius: 0px 3px 3px 0px;

}

.menulist a{

padding: 2px 0px; display: block; font-size: 12px; }

.menulist a:active, .menulist a:hover{

color: #FFFFFF;

background: rgb(249, 162, 85);

}

.recent-menu{

color: #FFFFFF;

background: rgb(249, 162, 85);

}

.submenulist{ margin: 0 auto; width: 570px; min-height: 300px; margin-top: 20px; font-size: 14px; text-align: left; }

.submenulist table{ width: 100%; font-size: 12px;

border-collapse: collapse; }

(15)

.submenulist th{

text-align: left; width: 80%;

padding: 20px 0px 5px 0px;

border-bottom: 1px dotted rgb(249, 162, 85); float: left;

}

.submenulist td{ float: left;

margin-left: 40px;

padding: 20px 0px 5px 0px; }

.menulistb, .menulistc{ display: none; }

.footer{

width: 100%;

display: inline-block; vertical-align: top;

background: rgb(249, 162, 85); text-align: center;

}

.footer p{

text-transform: uppercase; font-size: 12px;

color: #FFFFFF; line-height: 50px; }

.social{

display: inline-block; vertical-align: top; }

.social li{

display: inline-block; margin-right: 100px; margin-top: 50px; margin-bottom: 15px; }

.social li:last-child{

margin-right: 0px;

}

.social-link{ width: 30px;

(16)

height: 30px; display: block; opacity: 0.7;

transition: opacity 0.1s linear; }

.social-link:hover{

opacity: 0.9;

}

.social-a{

background-image: url('../img/fb.png'); background-position: center center; background-repeat: no-repeat;

background-size: cover;

}

.social-b{

background-image: url('../img/ig.png'); background-position: center center; background-repeat: no-repeat;

background-size: cover;

}

.social-c{

background-image: url('../img/tw.png'); background-position: center center; background-repeat: no-repeat;

background-size: cover;

}

.reservation{ display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;

background: rgba(0, 0, 0, 0.45); z-index: 999;

}

.reservationlink{ cursor: pointer; }

.closereservation{ width: 100%; height: 100%; position: fixed; }

(17)

.reservationform{

position: absolute; left: 50%;

top: 50%;

margin-left: -250px; margin-top: -220px; width: 500px;

height: 420px; background: #fff; border-radius: 2px; }

.reservationform h1{

font-family: "Dancing Script"; font-size: 30px;

font-weight: 400; color: #555;

line-height: 80px; text-align: center;

border-bottom: 1px solid rgb(249, 139, 42); margin-bottom: 40px;

}

.reservationform h2{ font-size: 28px; color: #777;

text-align: center; line-height: 38px; font-weight: 400; }

.reservationform h3{ font-size: 34px; color: #777;

text-align: center; font-weight: 400; margin-top: 70px; }

.reservationform p{ font-size: 20px; color: #777;

text-align: center; padding: 10px 0px; }

.reservationform span{

color: rgb(249, 139, 42); }

(18)

margin: 0 auto;

margin-top: 50px;

}

.reservationform input[type=text]{

height: 40px;

width: 350px;

padding: 0px 5px;

font-size: 16px;

margin-bottom: 10px;

border: 1px solid #ddd;

border-radius: 2px;

}

.reservationform input[type=text]:focus{

outline: none;

border: 1px solid rgb(249, 139,

42);

}

.reservationform input[type=email]{

height: 40px;

width: 350px;

padding: 0px 5px;

font-size: 16px;

margin-bottom: 10px;

border: 1px solid #ddd;

border-radius: 2px;

}

.reservationform input[type=email]:focus{

outline: none;

border: 1px solid rgb(249, 139,

42);

}

.reservationform input[type=submit]{

height: 40px;

width: 350px;

padding: 0px 5px;

font-size: 16px;

border: 1px solid transparent;

border-radius: 2px;

cursor: pointer;

background: rgba(249, 139, 42, 0.72);

color: rgba(255, 255, 255, 1);

transition: background .1s linear;

margin-top: 20px;

}

.reservationform

input[type=submit]:active,

.reservationform

input[type=submit]:hover{

background: rgba(249, 139, 42, 1);

(19)

}

.selecta{

width: 85px;

height: 40px;

border: 1px solid #ddd;

margin-bottom: 10px;

border-radius: 2px;

font-size: 14px;

}

.selecta:focus{

outline: none;

border: 1px solid rgb(249, 139,

42); }

4. Mens.php

<a href="index.php"><img

src="images/logo.png" alt=""/></a> </div>

<li><a href="registration.php">Create Account </a></li>|

<li><a href="registration.php">Login</a></li> </ul>

</div>

</div> </div> </div>

<li><a class="color1"

href="index.php">Home</a></li>

(20)

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual.php">Casual</a></li>

<li><a

href="mens-sport.php">sports</a></li> <li><a href="mens-kets.php">Kets</a></li>

<li><a

href="mens-formal.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li class="grid"><a class="color2" href="women.php">Women</a>

<h4>Kategori</h4>

<ul>

<li><a

href="women-high heels.php">High Heels</a></li>

<li><a

href="women-sport.php">sports</a></li> <li><a href="women-kets.php">Kets</a></li>

<li><a

href="women-formal.php">Formal</a></li>

</ul>

</div>

(21)

</div>

</li>

<li><a class="color1" href="Cara Order.php">Cara Order</a></li>

</div> </div>

</div>

$( "span.menu"

).click(function() {

$( ".head-nav ul"

).slideToggle(300, function() {

// Animation complete.

});

</script>

<?php

$q="SELECT * FROM `produk` where jenis = 'pria'"; $eq=mysql_query($q);

while($de=mysql_fetch_array($eq)){ $nama=$de['nama'];

$gambar=$de['gambar']; $harga=$de['harga']; echo "

<li>

<img src=\"images/".$gambar."\"><p class=\"price\">Rp. ".number_format($harga, 0, '', '.').",-</p>

(22)

"; }

?> </ul>

</div> </div>

<div class="footer">

<p>Copyright by &copy Chris Noel 2016</p> </div>

</div>

5. Women.php

<a href="index1.php"><img

src="images/logo.png" alt=""/></a> </div>

<li><a href="contact1.php">Contact</a></li>| <a href="logout.php">Logout</a>

</div>

</div> </div> </div>

<li><a class="color1"

href="index1.php">Home</a></li>

(23)

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual1.php">Casual</a></li>

<li><a

href="mens-sport1.php">sports</a></li> <li><a href="mens-kets1.php">Kets</a></li>

<li><a

href="mens-formal1.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li class="grid"><a class="color2" href="women1.php">Women</a>

<h4>Kategori</h4>

<ul>

<li><a

href="women-high heels1.php">High Heels</a></li>

<li><a

href="women-sport1.php">sports</a></li> <li><a href="women-kets1.php">Kets</a></li>

<li><a

href="women-formal1.php">Formal</a></li>

</ul>

</div>

(24)

</div>

</li>

<li><a class="color1" href="Cara Order1.php">Cara Order</a></li>

<li><a class="color1" href="Keranjang.php">Keranjang</a></li>

</div> </div>

</div>

$( "span.menu"

).click(function() {

$( ".head-nav ul"

).slideToggle(300, function() {

// Animation complete.

});

</script>

<?php

$idtransaksi = $_SESSION['username'];

$q="SELECT * FROM `produk` where jenis = 'wanita'"; $eq=mysql_query($q);

while($de=mysql_fetch_array($eq)){ $nama=$de['nama'];

$gambar=$de['gambar']; $harga=$de['harga']; echo "

<li>

(25)

<img src=\"images/".$gambar."\"><p class=\"price\">Rp. ".number_format($harga, 0, '', '.').",-</p>

href='aksi_keranjang.php?id=$de[id_produk]'>Beli</a>

</li>

"; }

</ul> </div> </div>

<p>Copyright by &copy Chris Noel 2016</p> </div>

</div>

6. Keranjang.php

Sdfsd<?php

session_start();

if(!isset($_SESSION['username'])){

$idt = date("ymdHis");//membuat id transaksi yang unik berdasarkan waktu

$_SESSION['username'] = $idt; }

<!DOCTYPE HTML> <html>

<head>

<title>Toko Sepatu Moses Simangunsong</title> <meta http-equiv="Content-Language" content="en-us"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Toko Online</title> <style>

table{font-family:arial;font-size:10pt} a{color:#990000;text-decoration:none} a:hover{text-decoration:underline}

a.beli{background-color:orange;color:white;text-decoration:none}

(26)

a.beli:hover{background-color:#75923C;color:white;text-decoration:none}

.tombollanjut{border:black 1px solid; padding:1} .ukuran{font-size:10px}

.keranjang{border-bottom:#75923C 1px solid} </style>

function update(id){ idnya = id;

ajaxku = buatajax(); idinput = "jumlah"+id; idloading = "loading"+id;

jumlah = document.getElementById(idinput).value; var url="updatejumlah.php";

url=url+"?id="+id; url=url+"&jml="+jumlah

url=url+"&sid="+Math.random();

ajaxku.onreadystatechange=stateChanged; ajaxku.open("GET",url,true);

ajaxku.send(null);

document.getElementById(idloading).innerHTML = "<img src=ajax-loader.gif>";

}

function buatajax(){

if (window.XMLHttpRequest){ return new XMLHttpRequest(); }

if (window.ActiveXObject){

return new ActiveXObject("Microsoft.XMLHTTP"); }

return null; }

function stateChanged(){ var data;

if (ajaxku.readyState==4){ data=ajaxku.responseText;

subtotalx = document.getElementById("subtotal").innerHTML;

sub = parseFloat(subtotalx); idharga = "harga"+idnya; idloading = "loading"+idnya;

harganya = document.getElementById(idharga).innerHTML;

(27)

hrg = parseFloat(harganya); if(data.length>0){

hargabaru = parseFloat(data); subtotalbaru = sub-hrg+hargabaru;

document.getElementById(idloading).innerHTML = "";

document.getElementById(idharga).innerHTML = data

document.getElementById("subtotal").innerHTML = subtotalbaru;

} } }

</script>

<link

href='http://fonts.googleapis.com/css?family=Montserrat:400, 700' rel='stylesheet' type='text/css'>

(28)

jQuery(document).ready(function($){ $('#etalage').etalage({

thumb_image_width: 300, thumb_image_height: 400, source_image_width: 900, source_image_height: 1200, show_hint: true,

click_callback: function(image_anchor, instance_id){

alert('Callback

example:\nYou clicked on an image with the anchor:

"'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');

} }); }); </script>

{

$('.scroll-pane').jScrollPane(); });

</script> </head> <body>

<a href="index1.php"><img

src="images/logo.png" alt=""/></a> </div>

<li><a href="contact1.php">Contact</a></li>| <a href="logout.php">Logout</a>

</div>

(29)

</div> </div> </div> </div>

<li><a class="color1"

href="index1.php">Home</a></li>

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual1.php">Casual</a></li>

<li><a

href="mens-sport1.php">sports</a></li> <li><a href="mens-kets1.php">Kets</a></li>

<li><a

href="mens-formal1.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li class="grid"><a class="color2" href="women1.php">Women</a>

(30)

<ul>

<li><a

href="women-high heels1.php">High Heels</a></li>

<li><a

href="women-sport1.php">sports</a></li> <li><a href="women-kets1.php">Kets</a></li>

<li><a

href="women-formal1.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li><a class="color1" href="Cara Order1.php">Cara Order</a></li>

<li><a class="color1" href="Keranjang.php">Keranjang</a></li>

</div> </div>

</div>

$( "span.menu"

).click(function() {

$( ".head-nav ul"

).slideToggle(300, function() {

// Animation complete.

});

</script>

<p>

(31)

<tr>

<td bgcolor="orange"><b>Kode</b></td> <td bgcolor="orange"><b>Pakaian</b></td> <td bgcolor="orange"><b>Jumlah</b></td> <td bgcolor="orange"><b>Sub Total</b></td> </tr>

<?php

include "proses/koneksi.php"; $a = $_SESSION['username'];

$keranjang = mysql_query("select keranjang.*, produk.nama, produk.gambar from keranjang, produk where

keranjang.username='$a' and keranjang.id_produk=produk.id_produk") or

die(mysql_error()); $subtotal = 0;

while($k = mysql_fetch_array($keranjang)){

echo "<tr><td><img src='images/".$k['gambar']."' width=50 height=50></td>

<td class=keranjang>".$k['id_produk']."</td><td class=keranjang>".$k['nama']."</td>";

echo "<td><input type=text size=1 value='".$k['jumlah']."' id=jumlah".$k['id_belanja'].">

href=\"javascript:update(".$k['id_belanja'].")\">Update</a>< span id=\"loading".$k['id_belanja']."\"></span></td>

<td>Rp. <span id=\"harga".$k['id_belanja']."\">".$k['harga']."</span>&nbsp

;<a href=\"delete.php?id=".$k['id_belanja']."\"

title=\"delete\"><img src=delete.jpg border=0></a></td></tr>";

$subtotal = $subtotal + $k['harga']; }

echo "<tr><td colspan=4 bgcolor='orange' align=right><b>Total</b> </td><td bgcolor='orange'>

<b>Rp. <span id=subtotal>$subtotal</span></b></td></tr>"; ?>

</table>

</body>

</html>

(32)

<?php

session_start();

if(!isset($_SESSION['username'])){ $idt = date("YmdHis");

$_SESSION['username'] = $idt; }

$idtransaksi = $_SESSION['username']; $kode = $_GET['id'];

$a = $_SESSION['username']; if(!isset($kode)){

die("tidak ada transaksi"); }

include "config.php";

mysql_connect($HOST,$USER_NAME,$PASSWORD) or die("tidak bisa koneksi ke database");

mysql_select_db($DB);

$pakaian = mysql_query("select * from produk where id_produk=$kode");

$b = mysql_fetch_array($pakaian); $harga = $b['harga'];

$masuk = mysql_query("insert into keranjang values(null,'$a','$idtransaksi',$kode,1,$harga,'belum

lunas','tidak terkirim')"); if($masuk){

header("location:keranjang.php"); }else{

echo "error"; }

8. Registrasi.php

<a href="index.php"><img

src="images/logo.png" alt=""/></a> </div>

(33)

<li><a href="registration.html">Create Account </a></li>|

<li><a href="registration.php">Login</a></li> </ul>

</div>

</div> </div> </div>

<li><a class="color1"

href="index.php">Home</a></li>

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual.php">Casual</a></li>

<li><a

href="mens-sport.php">sports</a></li> <li><a href="mens-kets.php">Kets</a></li>

<li><a

href="mens-formal.php">Formal</a></li>

</ul>

</div>

</div>

(34)

<li class="grid"><a class="color2" href="women.php">Women</a>

<h4>Kategori</h4>

<ul>

<li><a

href="women-high heels.php">High Heels</a></li>

<li><a

href="women-sport.php">sports</a></li> <li><a href="women-kets.php">Kets</a></li>

<li><a

href="women-formal.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li><a class="color1" href="Cara Order.php">Cara Order</a></li>

</div> </div>

</div>

$( "span.menu"

).click(function() {

$( ".head-nav ul"

).slideToggle(300, function() {

// Animation complete.

});

</script>

(35)

</div>

<div class="registration">

(function() {

// Create input element for testing

var inputs = document.createElement('input');

// Create the supports object

var supports = {};

supports.autofocus = 'autofocus' in inputs; supports.required = 'required' in inputs;

supports.placeholder = 'placeholder' in

inputs;

// Fallback for autofocus attribute

if(!supports.autofocus) {

}

// Fallback for required attribute

if(!supports.required) {

}

// Fallback for placeholder attribute

if(!supports.placeholder) {

}

// Change text inside send button on submit var send = document.getElementById('register-submit');

if(send) {

(36)

this.innerHTML = '...Sending';

}

})();

</script>

<form id="registration_form"

action="proses_daftar.php" method="post">

<div>

<label>

<input placeholder="Username:"

name="username" type="text" tabindex="1" required autofocus>

</label>

</div>

<div>

<label>

<input placeholder="Password:"

name="password" type="password" tabindex="2" required autofocus>

</label>

</div>

<div>

<label>

<input placeholder="email

address:" name="email" type="email" tabindex="3" required>

</label>

</div>

<div>

<label>

<input placeholder="Nama:"

name="nama" type="text" tabindex="4" required autofocus>

</label>

</div>

<div>

<label>

<input placeholder="Nomor

Telephone:" name="no_telepon"type="text" tabindex="5" required autofocus>

</label>

</div>

<div>

<label>

<input placeholder="Kota:"

name="kota" type="text" tabindex="6" required autofocus>

(37)

</div> <div>

<label>

<input placeholder="Alamat:"

name="alamat" type="text" tabindex="7" required autofocus>

</label>

</div>

<div>

</div>

</form>

</div>

</div>

<div class="registration_left"> <h2>existing user</h2>

<form id="registration_form"

action="proses_login.php" method="post">

<div>

<label>

<input placeholder="username:"

type="text" name="username">

</label>

</div>

<div>

<label>

<input placeholder="password"

type="password" name="password">

</label>

</div>

<div>

</div>

</form>

</div>

</div>

</div>

</div>

(38)

<p>Copyright by &copy Chris Noel 2016</p> </div>

</div>

9. Proses-daftar.php

<?php

if(isset($_POST['tambah'])){

include('proses/koneksi.php');

$username = $_POST['username']; $password = $_POST['password']; $email = $_POST['email'];

$nama = $_POST['nama'];

$nomor = $_POST['no_telepon'];

$kota = $_POST['kota'];

$alamat = $_POST['alamat'];

$input = mysql_query("INSERT INTO member values ('','$username','$password','$email','$nama','$nomor','$kota ','$alamat')") or die(mysql_error());

if($input){

echo "<script>alert('Berhasil Mendaftar')</script>"; echo "<meta http-equiv='refresh' content='1' url=registration.php'>";

}else{

echo "<script>alert('Gagal Mendaftar')</script>";

}

}else{ //jika tidak terdeteksi tombol tambah di klik //redirect atau dikembalikan ke halaman tambah echo '<script>window.history.back()</script>'; }

10. Updatejumlah.php

<?php

(39)

include "config.php";

mysql_connect($HOST,$USER_NAME,$PASSWORD) or die("tidak bisa koneksi ke database");

mysql_select_db($DB); $id = $_GET['id']; $jml = $_GET['jml'];

$harga = mysql_query("select produk.harga from produk, keranjang

where produk.id_produk=keranjang.id_produk and keranjang.id_belanja=$id");

$h = mysql_fetch_array($harga); $harganya = $h['harga'];

$hargabaru = $harganya*$jml;

$update = mysql_query("update keranjang set jumlah=$jml, harga=$hargabaru where id_belanja=$id");

if($update){

$ambil = mysql_query("select harga from keranjang where id_belanja=$id");

$a = mysql_fetch_array($ambil); echo $a['harga'];

}else{

echo "error"; }

11. Proses-login.php

<?php

include "proses/koneksi.php"; $username = $_POST['username']; $password = $_POST['password']; if (empty($username)){

echo "<script>alert('Username belum diisi')</script>";

echo "<meta http-equiv='refresh' content='1 url=registration.php'>";

}else if (empty($password)){

echo "<script>alert('Password belum diisi')</script>";

echo "<meta http-equiv='refresh' content='1 url=registration.php'>";

}else{

session_start();

$login = mysql_query("select * from member where username='$username' and password='$password'");

if (mysql_num_rows($login) > 0){ $_SESSION['username'] = $username; header("location:index1.php");

(40)

}else{

echo "<script>alert('Username atau Password salah')</script>";

echo "<meta http-equiv='refresh' content='1 url=registration.php'>";

} } ?>

12. Logout.php

<?php

session_start(); session_destroy();

header("location:index.php"); ?>

13. Cara Order.php

<a href="index.php"><img

src="images/logo.png" alt=""/></a> </div>

<li><a href="registration.php">Create Account </a></li>|

<li><a href="contact.php">Contact</a></li>| <li><a href="registration.php">Login</a></li> </ul>

</div>

</div> </div> </div>

<li><a class="color1"

(41)

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual.php">Casual</a></li>

<li><a

href="mens-sport.php">sports</a></li> <li><a href="mens-kets.php">Kets</a></li>

<li><a

href="mens-formal.php">Formal</a></li>

</ul>

</div>

</div>

</li>

<li class="grid"><a class="color2" href="women.php">Women</a>

<h4>Kategori</h4>

<ul>

<li><a

href="women-high heels.php">High Heels</a></li>

<li><a

href="women-sport.php">sports</a></li> <li><a href="women-kets.php">Kets</a></li>

<li><a

href="women-formal.php">Formal</a></li>

</ul>

</div>

(42)

</div>

</div>

</li>

<li><a class="color1" href="Cara Order.php">Cara Order</a></li>

</div> </div>

</div>

<ol>

<li>Pertama kita buka terlebih dahulu website penjualan sepatu</li>

<li>Apabila anda berkenan untuk membeli salah satu dari sepatu yang ditawarkan </br>maka anda harus membuat akun baru terlebih dahulu.Klik tombol sign up untuk membuat akun baru</li>

<li>Selanjutnya Anda akan masuk ke dalam halaman pembuatan akun baru</li>

<li>Isi lah form yang telah saya sediakan untuk registrasi</li>

<li>lalu klik tombol create an account dan login untuk menggunakan akun anda</li>

<li>Sekarang Anda dapat memesan sepatu pilihan anda dengan mengklik gambar sepatu, pemesanan ini dapat Anda lakukan selama akun anda masih dalam keadaan aktif</li>

<li>Setelah melakukan pembelian akan tertera nominal akhir pada keranjang.</li>

<li>kemudian anda akan mentransfer uang sebesar nominal pada keranjang pada bank yang tertera di bawah ini</li>

(43)

<tr>

<td>

</td>

</tr>

<tr>

<td>No Rekening</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>No Rekening</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>No Rekening</td>

</tr>

<tr>

<td>

(44)

</td>

</tr>

<tr>

<td>No Rekening</td>

</tr>

</table> </div>

<li>Setelah Anda ngisi data pembayaran online. </li>

<li>Selanjutnya lakukanlah login untuk

mengkonfirmasi pembayaran anda dengan mengisi form contact us</li>

<li>Lalu saya akan menngecek tranksaksi anda dan mengirimkan barang yang anda pesan.</li>

</ol> </div> </div> </div> </body> 14.

Contact.php

<div class="header">

<div class="top_bg">

<div class="container">

<div class="header_top">

<div class="logo">

<a href="index1.php"><img

src="images/logo.png" alt=""/></a>

</div>

<div class="top_right">

<ul>

<li><a

href="contact.php">Contact</a></li>|

<li><a href="logout.php">Logout</a></li>

</ul>

</div>

<div class="clearfix"></div>

</div>

(45)

<div class="head-bann">

<div class="container">

<div class="head-nav">

<span class="menu"></span>

<ul class="megamenu skyblue">

<li><a class="color1"

href="index1.php">Home</a></li>

<li class="grid"><a class="color2"

href="Mens1.php">Mens</a>

<div class="megapanel">

<div class="row">

<div class="col1">

<div class="h_nav">

<h4>Kategori</h4>

<ul>

<li><a

href="mens-casual1.php">Casual</a></li>

<li><a

href="mens-sport1.php">sports</a></li>

<li><a href="mens-kets1.php">Kets</a></li>

<li><a

href="mens-formal1.php">Formal</a></li>

</ul>

</div>

<div class="row">

<div class="col2"></div>

<div class="col1"></div>

</div>

</li>

<li class="grid"><a class="color2"

href="women1.php">Women</a>

<div class="megapanel">

<div class="row">

<div class="col1">

<div class="h_nav">

(46)

<ul>

<li><a

href="women-high heels1.php">High Heels</a></li>

<li><a

href="women-sport1.php">sports</a></li>

<li><a href="women-kets1.php">Kets</a></li>

<li><a

href="women-formal1.php">Formal</a></li>

</ul>

</div>

<div class="row">

<div class="col2"></div>

<div class="col1"></div>

</div>

</li>

<li><a class="color1" href="Cara Order.php">Cara

Order</a></li>

<div class="clearfix"></div>

</ul>

</div>

<div class="container">

<div class="main">

<?php

//proses mengambil data ke database untuk

ditampilkan di form edit berdasarkan siswa_id yg

didapatkan dari GET id -> edit.php?id=siswa_id

//include atau memasukkan file koneksi ke database

include('proses/koneksi.php');

(47)

//membuat variabel $id yg nilainya adalah dari URL

GET id -> edit.php?id=siswa_id

$id = $_SESSION['username'];

//melakukan query ke database dg SELECT table siswa

dengan kondisi WHERE siswa_id = '$id'

$show = mysql_query("SELECT * FROM pesan WHERE

nama='$id'");

//cek apakah data dari hasil query ada atau tidak

if(mysql_num_rows($show) == 0){

//jika tidak ada data yg sesuai maka akan

langsung di arahkan ke halaman depan atau beranda ->

barang.php

}else{

//jika data ditemukan, maka membuat variabel

$data

$data = mysql_fetch_assoc($show); //mengambil

data ke database yang nantinya akan ditampilkan di form

edit di bawah

}

?>

<div class="contact-form">

<h2>Pesan anda</h2>

<form method="post"

action="aksi-kontak.php">

<div>

<span><?php echo

$data['balasan']; ?></span>

</div>

</form>

</div>

<div class="contact">

<div class="contact_info">

</div>

(48)

//proses mengambil data ke database untuk

ditampilkan di form edit berdasarkan siswa_id yg

didapatkan dari GET id -> edit.php?id=siswa_id

//include atau memasukkan file koneksi ke database

include('proses/koneksi.php');

//membuat variabel $id yg nilainya adalah dari URL

GET id -> edit.php?id=siswa_id

$id = $_SESSION['username'];

//melakukan query ke database dg SELECT table siswa

dengan kondisi WHERE siswa_id = '$id'

$show = mysql_query("SELECT * FROM member WHERE

username='$id'");

//cek apakah data dari hasil query ada atau tidak

if(mysql_num_rows($show) == 0){

//jika tidak ada data yg sesuai maka akan

langsung di arahkan ke halaman depan atau beranda ->

barang.php

echo '<script>window.history.back()</script>';

}else{

//jika data ditemukan, maka membuat variabel

$data

$data = mysql_fetch_assoc($show); //mengambil

data ke database yang nantinya akan ditampilkan di form

edit di bawah

}

?>

<div class="contact-form">

<h2>Contact Us</h2>

<form method="post"

action="aksi-kontak.php">

<div>

(49)

<span><input

type="text" name="userName" value="<?php echo

$data['username']; ?>" required></span>

</div>

<div>

<span><label>E-mail</label></span>

<span><input

type="text" name="userEmail" value="<?php echo

$data['email']; ?>" required></span>

</div>

<div>

<span><label>Mobile</label></span>

<span><input

type="text" name="userPhone" value="<?php echo

$data['no_telepon']; ?>" required></span>

</div>

<div>

<span><label>Subject</label></span>

<span><input

placeholder="transfer atau tidak" type="text"

name="userMsg" required></span>

</div>

<div>

<span><input

type="submit" name="tambah" value="Submit us"></span>

</div>

</form>

</div>

<div class="clearfix"></div>

</div>

<div class="footer">

<div class="container">

</div>

(50)

15. Delete.php

<?php

include "config.php";

mysql_connect($HOST,$USER_NAME,$PASSWORD) or die("tidak bisa koneksi ke database");

mysql_select_db($DB); $id = $_GET['id'];

$del = mysql_query("delete from keranjang where id_belanja=$id");

if($del){

header("location:keranjang.php"); }else{

echo "error"; }

16. Aksi-kontak.php

<?php

if(isset($_POST['tambah'])){

//inlcude atau memasukkan file koneksi ke database include('proses/koneksi.php');

//jika tombol tambah benar di klik maka lanjut prosesnya $userName = $_POST['userName'];

$userEmail = $_POST['userEmail']; $userPhone = $_POST['userPhone']; $userMsg = $_POST['userMsg'];

$input = mysql_query("INSERT INTO pesan VALUES(NULL, '$userName', '$userEmail', '$userPhone', '$userMsg','')") or die(mysql_error());

//jika query input sukses if($input){

echo "<script>alert('Pesan Telah Terkirim! ')</script>";

echo "<meta http-equiv='refresh' content='1' url=contact.php'>"; //Pesan jika proses tambah sukses

}else{

echo "<script>alert('Pesan Tidak Terkirim! ')</script>";

(51)

echo "<meta http-equiv='refresh' content='1' url=contact.php'>";

}

}else{ //jika tidak terdeteksi tombol tambah di klik //redirect atau dikembalikan ke halaman tambah echo '<script>window.history.back()</script>'; }

17. Admin-Index.php

<a href="index.php"><img

src="images/logo.png" alt=""/></a> </div>

<li><a href="profil.php">Profile</a></li> </ul>

</div>

</div> </div> </div>

<li><a class="color1"

href="index.php">Barang</a></li>

<li><a class="color1" href="order masuk.php">Order Masuk</a></li>

<li><a class="color1" href="order selesai.php">Order Selesai</a></li>

<li><a class="color1" href="pesan.php">Pesan</a></li> <div class="clearfix"></div>

(52)

</ul>

</div> </div>

</div>

</div>

<p><a href="tambah.php">Tambah Data</a></p>

<th>Nama Barang</th> <th>Harga</th>

<th>Jenis</th>

<th>Kategori</th> <th>Material</th>

<th>size</th> <th>gambar</th> <th>aksi</th>

</tr>

<?php

//iclude file koneksi ke database include('koneksi.php');

//query ke database dg SELECT table siswa diurutkan berdasarkan NIS paling besar

$query = mysql_query("SELECT * FROM produk ORDER BY id_produk DESC") or die(mysql_error());

//cek, apakakah hasil query di atas mendapatkan hasil atau tidak (data kosong atau tidak)

if(mysql_num_rows($query) == 0){ //ini artinya jika data hasil query di atas kosong

echo '<tr><td colspan="8">Tidak ada data!</td></tr>';

}else{

$no = 1;

while($data = mysql_fetch_assoc($query)){

echo '<tr>';

echo '<td>'.$no.'</td>';

(1)

PERNYATAAN

SISTEM PENJUALAN SEPATU DI TOKO MOSES SIMANGUNSONG BERBASIS WEBSITE

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri. Kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2016

CHRIS NOEL SUNDA D 132406198

(2)

Puji dan syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa, karena atas berkat dan rahmat-Nya penulis dapat menyelesaikan tugas akhir yang berjudul Aplikasi Pembelajaran Matakuliah Psikiatri Pada Fakultas Kedokteran Berbasis Androidini tepat pada waktunya.

Selama penyusunan tugas akhir ini penulis banyak mendapat bantuan, dorongan, serta motivasi baik secara langsung maupun tidak langsung. Maka pada kesempatan ini, penulis mengucapkan terima kasih kepada:

1. Tuhan Yang Maha Esa, Sang Khalik yang tidak pernah berhenti memberikan

berkat dan rahmat-Nya.

2. Ayahanda Irwan dan Ibunda M. Tambunan yang telah memberikan doa dan

dukungannya berupa semangat dan kasih sayang yang sangat membantu dalam menyelesaikan tugas akhir ini.

3. Bapak Drs. Marihat Situmorang, M.Kom yang telah membimbing dan

mengarahkan penulis dalam menyelesaikan tugas akhir ini.

4. Bapak Dr. Kerista Sebayang, MS, selaku Dekan Fakultas Matematika dan Ilmu

Pengetahuan Alam Universitas Sumatera Utara.

5. Bapak Prof. Dr. Tulus, Vordipl. Math., M.Si., Ph.Dselaku Ketua Departemen

Matematika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

6. Ibu Dr. Elly Rosmaini, M.Si,selaku Ketua Program Studi D3 Teknik

Informatika FMIPA.

7. Seluruh dosen program studi Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara yang telah memberikan ilmu pengetahuannya kepada penulis.

8. Seluruh Karyawan/Pegawai Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara yang telah banyak membantu penulis dalam menyelesaikan tugas akhir ini.

9. Abangda Rendy Fahmi Roza, Bapak Muhammad Fathoni serta sahabat Tulus Purba, Buha Sinaga, Firnando Silalahi, Daniel Sijabat, Basri Sembiring, lewin Hutasoit, Amron Togatorop dan Tumona Sinaga yang telah banyak membantu penulis dan berbagi ilmu dalam menyelesaikan tugas akhir ini.

10. Seluruh sahabat-sahabat penulis dari Kom C’13 serta sahabat-sahabat Asisten Laboratorium D3 Teknik Informatika yang telah banyak membantu dan berbagi ilmu selama ini.

11. Rekan-rekan seangkatan D3 Teknik Informatika A, B, C, D, E 2013

Akhir kata penulis mengucapkan terima kasih, semoga tugas akhir ini dapat memberi manfaat dan menambah wawasan maupun pengetahuan kita.

(3)

SISTEM PENJUALAN SEPATU DI TOKO MOSES SIMANGUNSONG BERBASIS WEBSITE

ABSTRAK

Kajian ini bertujuan untuk membangun suatu website penjualan sepatu online. Website ini di kembangkan dengan menggunakan perangkat lunak PHP dan MySQL. Website ini berfungsi untuk melakukan jual beli sepatu dimana di dalamnya terdapat berbagai kategori dan merk sepatu yang ditampilkan. Tujuan perancangan website sepatu ini adalah untuk memahami sistem penjualan dan strategi penjualan secara online dan untuk meningkatkan keuntungan dan kemudahan dalam bertransaksi.

(4)

WEBSITE

ABSTRACT

This study aims to build an website selling shoes online. The website is developed using software PHP and MySQL. This website serves to make buying and selling shoes which there are many categories and brands of shoes are displayed. The purpose of designing an website these shoes is to understand the system of sales and online sales strategies and to improve profitability and ease of transaction.

DAFTAR ISI

... Halaman

Persetujuan ... i

Pernyataan ... ii

Penghargaan ... iii

Abstrak ... iv

Abstract ... v

Daftar Isi ... vi

Daftar Tabel ... viii

Daftar Gambar ... ix

Bab 1. Pendahuluan ... 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan Penelitian ... 2

1.5 Manfaat Penelitian ... 3

1.6 Metodologi Penelitian ... 3

1.7 Sistematika Penulisan ... 6

Bab 2. Landasan Teori ... 2.1 Pengertian Sistem ... 8

2.2 Pengertian Informasi ... 8

2.3 Pengertian Sistem Informasi ... 9

2.4 World Wide Web (WWW) ... 10

2.5 HTML5 ... 10

2.6 CSS3 (Cascading Style Sheet Versi 3) ... 12

2.7 JavaScript ... 13

2.8 MySQL ... 14

(5)

2.10 Data Flow Diagram ... 17

Bab 3. Perancangan Sistem ... 3.1 Data Flow Diagram (DFD) ... 19

3.2 Entity Relationship Diagram (ERD) ... 21

3.3 Perancangan Struktur Database ... 23

3.4 Flowchart Sistem ... 26

Bab 4. Implementasi Sistem ... 4.1 Komponen Implementasi Sistem ... 31

4.1.1 Kebutuhan Perangkat Keras (Hardware) ... 31

4.1.2 Perangkat Lunak (Software) ... 32

4.1.3 Pengguna (Brainware) ... 33

4.2 Prosedur Penggunaan Program ... 334 Bab 5. Penutup ... 5.1 Kesimpulan ... 37

5.2 Saran ... 38

Daftar Pustaka Lampiran DAFTAR TABEL Nomor Judul ... Halaman Tabel 2.1 Simbol Flowchart ... 15

2.2 Simbol Data Flow Diagram ... 17

3.1 Admin ... 23

3.2 Keranjang ... 23

3.3 Kategori ... 24

3.4 Kota ... 24

3.5 Member ... 24

3.6 Produk ... 25

(6)

DAFTAR GAMBAR

Nomor Judul ... Halaman Gambar

3.1 Aliran Data Level Konteks Penjualan Sepatu ... 20

3.2 ERD Tahap Pertama ... 21

3.3 ERD Tahap Kedua ... 22

3.4 ERD Tahap Ketiga ... 22

3.5 ERD Tahap Keempat ... 22

3.6 ERD Tahap Kelima ... 23

3.7 Flowchart Halaman Utama ... 26

3.8 Flowchart Menu Halaman Utama ... 27

3.9 Flowchart Pemesanan Sepatu ... 28

3.10 Flowchart Halaman Administrator ... 29

3.11 Flowchart Login ... 30

4.1 Halaman Utama Website ... 35

4.2 Halaman Order Produk ... 3335 4.3 Halaman Administrator ... 36

BAB 1