KEMENTERIAN PENDIDIKAN NASIONAL
UNIVERSITAS SUMATERA UTARA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jl. Bioteknologi No. 1 Kampus USU
Telp. (061) 8214290, 8211212, 8211414 Fax. (061) 8214290 Medan 20155
Kartu Bimbingan Tugas Akhir Mahasiswa
Nama : Dimas Andika Nasution
Nomor Induk Mahasiswa : 102406146
Judul Tugas Akhir : Perancangan Website E-Commerce Pada Toko
Pakaian Cantik Modis Menggunakan Dreamweaver 8
Dosen Pembimbing : Syahriol Sitorus, S.Si, M.IT
Tanggal Mulai Bimbingan : ...
Tanggal Selesai Bimbingan : ...
No Tanggal Asistensi Bimbingan
Pembahasan Pada Asistensi Mengenai, Pada Bab :
Paraf Dosen
Pembimbing Keterangan
*Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai
Diketahui, Disetujui,
Departemen Matematika FMIPA USU Pembimbing Utama/
Ketua Penanggung Jawab
SURAT KETERANGAN
Hasil Uji Program Tugas Akhir
Yang bertanda tangan di bawah ini, menerangkan bahwa Mahasiswa Tugas Akhir
Program Diploma 3 Teknik Informatika :
Nama : DIMAS ANDIKA NASUTION
NIM : 102406146
Program Studi : DIPLOMA (D3) TEKNIK INFORMATIKA
Judul Tugas Akhir : PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8
Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada
tanggal Juni 2013
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, Juni 2013
Dosen Pembimbing
Program Studi D3 Teknik Informatika
LISTING PROGRAM
1. Index.php <html>
<head><title>CANTIK MODIS</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- include CSS always before including js -->
<link type="text/css" rel="stylesheet" href="skins/tn3/tn3.css"></link>
<!-- include jQuery library --> <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<!-- include tn3 plugin --> <script type="text/javascript"
src="js/jquery.tn3lite.min.js"></script>
<!-- initialize the TN3 when the DOM is ready --> <script type="text/javascript">
$(document).ready(function() {
//Thumbnailer.config.shaderOpacity = 1; var tn1 = $('.mygallery').tn3({
skinDir:"skins",
<div id="logo"><img src="images/logo.png"></div> src="images/info.png" /> CARA ORDER</a></li>
<li><a href="?p=gallery.php"><img
include $_REQUEST['p']; }
else {
include "content.php"; }
?>
</div>
<?php include"menu.php"; ?>
<div id="footer">Copyright © 2013 Cantik Modis</div> </div>
</body> </html>
2. Content.php
<h2>SELAMAT DATANG DI WEBSITE KAMI</h2> <hr noshade />
<div id="slider">
<div class="mygallery">
<div class="tn3 album"> <h4>Fixed Dimensions</h4>
<div class="tn3 description">Images with fixed dimensions</div>
<div class="tn3 thumb">images/35x35/1.jpg</div> <ol>
<li>
<h4>Produk-produk Cantik Modis</h4> <div class="tn3 description"></div>
<a href="images/960x377/cantik modis.jpg"> <img src="images/35x35/1.jpg" /></a></li> <li>
<h4>Produk-produk Cantik Modis</h4> <div class="tn3 description"></div>
<li>
<h4>Produk-produk Cantik Modis</h4> <div class="tn3 description"></div>
<a href="images/960x377/cantik modis2.jpg"> <img src="images/35x35/3.jpg" /></a></li> <li>
<h4>Produk-produk Cantik Modis</h4> <div class="tn3 description"></div>
<a href="images/960x377/cantik modis3.jpg"> <img src="images/35x35/4.jpg" /></a></li> </ol>
<img src="images/about.png"/> ABOUT US</a></li> <li><a href="?p=contact.php">
<img src="images/contact.png" /> CONTACT</a></li> <li><a href="?p=login.php">
<img src="images/login.png" /> LOGIN</a></li> </ul>
</div>
4. Cara_order.php <div id="syarat">
<h3>Sebelum memesan, mohon dibaca terlebih dahulu prosedur dan Terms of Service dari kami.</h3>
<hr noshade /> <br />
<h5>PEMESANAN</h5>
<p>Sebelum melakukan pemesanan barang, pilih barang yang ingin di pesan di menu <font color="#0000FF"
style="font-weight:bold">"Gallery"</font> lalu pilih jenis barang yang ingin Anda Pesan, lalu klik tombol <font color="#0000FF"
style="font-weight:bold">"Beli"</font> pada barang yang ingin Anda beli. Setelah itu isi form secara lengkap kecuali <font color="#0000FF"
style="font-weight:bold">Nama Barang</font> karena sudah terisi otomatis dari barang yang Anda pilih sebelumnya. Setelah Form Order terisi lengkap klik tombol ORDER agar data Anda tersimpan.</p>
<h5>PEMBAYARAN</h5>
diselesaikan sebelum H-7. Order kami anggap confirmed statusnya setelah pembayaran selesai.</p>
<h5>PENGIRIMAN</h5>
<p>1. Setelah transaksi diselesaikan, order akan kami masukan dalam schedule. Kami akan mengerjakan dan mengirimkan pesanan Anda pada tanggal, waktu dan alamat yang sudah ditentukan. </p>
<p>2. Harga yang tercantum pada katalog belum termasuk ongkos kirim. Ongkos kirim bervariasi tergantung jauh dekatnya lokasi tujuan (between Rp. 15.000 - 50.000). Wilayah kota Medan - gratis.</p>
<p>3. Nomor kontak penerima sangat penting, agar dapat kami/kurir hubungi apabila kami menemui kesulitan dalam mencari alamat tujuan.</p>
<h5>LAPORAN</h5>
<p>Apabila barang yang dipesan telah sampai, kami berharap Anda memberi laporan berupa sms atau email ke kami agar tidak terjadi kesalah pahaman. Terimakasih.</p>
<h5>INFORMASI TENTANG TOKO PAKAIAN CANTIK MODIS:</h5> <table border="0">
<tr><td width="100px">Telefon/Hp</td><td>: 085763522177</td></tr>
<tr><td>Email</td><td>: Cantikmodis@yahoo.co.id</td></tr>
<tr><td>Alamat</td><td>: Jl. Abdullah Lubis 85/119 Medan Baru</td></tr>
</table>
<hr noshade="noshade" />
<h3>TOKO PAKAIAN CANTIK MODIS</h3> </div>
5. Aboutus.php <div id="c_1">
<div id="c_2">
<h4>TENTANG CANTIK MODIS</h4>
<p>Toko Pakaian Cantik Modis ini dibuka pada tanggal 1 Agustus 2012 yang berlokasi di Jalan Abdullah Lubis 85/119 Medan Baru, Medan. Dan beroperasi dari pukul 09.OO WIB - 23.00 WIB</p>
<p>Toko Pakaian Cantik Modis ini menjual pakaian-pakaian wanita dari berbagai merk.</p>
</div>
<div id="c_3"><img src="images/images/b.jpg" /></div> </div>
<hr noshade /> <div id="c_4">
<div id="c_5">
<h5>Artikel Tentang Produk Yang Ditawarkan:</h5> <table cellpadding="5px" cellspacing="5px">
<tr>
<td width="360px"><b>Blus</b> adalah pakaian tubuh bagian atas bermodel longgar yang sebelumnya dikenakan oleh pekerja, petani, seniman, perempuan dan anak-anak.
Blus biasanya dikenakan denga cara dikumpulkan di bagian pinggang (dengan ikat pinggang atau sabuk) sehingga menggantung longgar diatas tubuh pemakainya. (sumber: wikipedia bahasa indonesia)</td>
celana pendek (dengan ukuran dari pinggang sampai lutut atau kurang). celana panjang (dengan ukuran dari pinggang sampai tumit). (sumber: wikipedia bahasa indonesia) </td></tr>
<tr>
<td><b>Gamis</b> adalah jenis pakaian muslim wanita dengan model lurus, panjang dan longgar menutupi seluruh badan mulai dari dada sampai kaki mata kaki, sehingga pemakainya tidak harus mencari atasan atau bawahan karena sudah dalam satu kesatuan.</td>
<td><b>Rok</b> adalah sejenis pakaian dengan bentuk pipa atau kerucut yang cara pemakaiannya dimulai dari pinggul dan menutupi sebagian atau seluruh bagian kaki. berbeda dengan celana, bagian dari rok tidak dibagi menjadi bagian kaki kiri dan bagian kaki kanan tetapi langsung menjadi satu bagian yang menutupi sebagian atau seluruh bagian kaki. (sumber: wikipedia bahasa indonesia) </td></tr>
<tr>
<td><b>Jilbab</b> adalah busanan muslim terusan panjang menutupi seluruh badan kecuali tangan, kaki, dan wajah yang biasa dikenakan oleh para wanita muslim. (sumber: wikipedia bahasa indonesia)</td></tr>
</table> </div>
<div id="c_6">
<div class="logo1">Jasa Pembayaran<hr noshade="noshade" /><img src="images/bca.jpg" /></div>
<div class="logo2">Jasa Pengiriman<hr noshade="noshade" /><img src="images/jne.jpg" /></div>
</div>
<p>Kami selalu siap menjawab pertanyaan Anda! Silahkan Hubungi kami di:</p>
<tr><td>Alamat</td><td>: Jl. Abdullah Lubis 85/119 Medan Baru</td></tr>
</table> </div>
<div id="c_3"><img src="images/images/a.jpg" /></div> </div>
<hr noshade /> <div id="c_4">
<div id="c_5">
<h5>Artikel Tentang Produk Yang Ditawarkan:</h5> <table cellpadding="5px" cellspacing="5px">
<td width="360px"><b>Blus</b> adalah pakaian tubuh bagian atas bermodel longgar yang sebelumnya dikenakan oleh pekerja, petani, seniman, perempuan dan anak-anak.
Blus biasanya dikenakan denga cara dikumpulkan di bagian pinggang (dengan ikat pinggang atau sabuk) sehingga menggantung longgar diatas tubuh pemakainya. (sumber: wikipedia bahasa indonesia)</td>
<td width="370px"><b>Celana</b> adalah pakaian bawahan yang dipakai untuk menutupi dari pinggang sampai kaki. ada dua kategori umum dari celana:
celana pendek (dengan ukuran dari pinggang sampai lutut atau kurang). celana panjang (dengan ukuran dari pinggang sampai tumit). (sumber: wikipedia bahasa indonesia) </td></tr>
<tr>
<td><b>Gamis</b> adalah jenis pakaian muslim wanita dengan model lurus, panjang dan longgar menutupi seluruh badan mulai dari dada sampai kaki mata kaki, sehingga pemakainya tidak harus mencari atasan atau bawahan karena sudah dalam satu kesatuan.</td>
<td><b>Rok</b> adalah sejenis pakaian dengan bentuk pipa atau kerucut yang cara pemakaiannya dimulai dari pinggul dan menutupi sebagian atau seluruh bagian kaki.
berbeda dengan celana, bagian dari rok tidak dibagi menjadi bagian kaki kiri dan bagian kaki kanan tetapi langsung menjadi satu bagian yang menutupi sebagian atau seluruh bagian kaki. (sumber: wikipedia bahasa indonesia) </td></tr>
<tr>
<td><b>Jilbab</b> adalah busanan muslim terusan panjang menutupi seluruh badan kecuali tangan, kaki, dan wajah yang biasa dikenakan oleh para wanita muslim. (sumber: wikipedia bahasa indonesia)</td>
</tr> </table> </div>
<div id="c_6">
<div class="logo1">Jasa Pembayaran<hr noshade="noshade" /><img src="images/bca.jpg" /></div>
<div class="logo2">Jasa Pengiriman<hr noshade="noshade" /><img src="images/jne.jpg" /></div>
</div>
<img src="images/blus.jpg" /></a></li> <li><a href="?p=Celana.php">
<img src="images/celana.jpg" /></a></li> <li><a href="?p=Gamis.php">
<img src="images/gamis.jpg" /></a></li> <li><a href="?p=Jilbab.php">
<img src="images/rok.jpg" /></a></li> <li><a href="?p=Stelan.php">
<img src="images/stelan.jpg" /></a></li> </ul>
$sql=mysql_query("select * from barang Where nama_kategori='Blus'"); ?>
<script type="text/JavaScript"> <!--
function MM_popupMsg(msg) { //v1.0 alert(msg);
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2)
eval(args[i]+".location='"+args[i+1]+"'"); }
//--> </script> <?php
//menentukan batas, cek dan posisi data $batas=10;
$halaman = $_REQUEST['halaman'];
if(empty($halaman)){
//sesuaikan perintah SQL dengan posisi dan batas
$sql= "SELECT * FROM barang where nama_kategori='Blus' ORDER BY id_barang DESC LIMIT $posisi,$batas";
$result = mysql_query($sql); $test=mysql_num_rows($result); if ($test!=0)
{ while($data=mysql_fetch_array($result)){ ?>
<div id="tampilan">
<table border="0" align="center">
<tr><?php $id= $data['id_barang']; ?><td align="center" ><img src="admin/images/images/<?php echo $data['gambar']; ?>" /></td></tr>
<tr><td align="center"><?php echo
$data['nama_kategori']; ?> <?php echo $data['nama_barang']; ?></td></tr>
<tr><td align="center"><acronym title="Edit Data"><img src="images/beli.png" align="middle"
onClick="MM_goToURL('parent', 'index.php?p=order.php&id=<?php echo $data['id_barang']; ?>');return document.MM_returnValue" /></acronym></td>
echo"<table width='500' align='center' id='tabel_show' cellpadding='1' cellspacing='1'><tr><td></td><td>";
$sql2 = mysql_query("select * from barang where nama_kategori='Blus'");
$result=mysql_num_rows($sql2); $jmlhalaman=ceil($result/$batas);
/* bangun Previous link */ if($halaman > 1){
$prev = ($halaman - 1); ?>
<a href="index.php?p=gamis.php&halaman=1"> << First</a> |
<a href="index.php?p=gamis.php&<? echo "halaman=$prev"; ?>"> <<Previous </a>
<?php } else {
echo "<p>First| < Previous "; } //tampilkan link halaman 1,2,3...
for($i = 1; $i <= $jmlhalaman; $i++){ if($i == $halaman){
echo "$i "; }
else { ?>
<a href="index.php?p=gamis.php&<? echo "halaman=$i"; ?>"><? echo $i; ?></a>
<?php } }
/* bangun Next link */ if($halaman < $jmlhalaman){
$next = $halaman + 1; ?>
<a href="index.php?p=gamis.php&<? echo "halaman=$next"; ?>">Next> |</a>
<a href="index.php?p=gamis.php&<? echo "halaman=$jmlhalaman"; ?>">Last </a>
<?php }
echo "</td></tr></table></div>";
}//akhir dari kondisi bahwa data tidak kosong
else { echo "<p>MAAF, BARANG TIDAK TERSEDIA</p>"; }
9. Order.php <div id="form"> <?php
include ("koneksi.php"); $id=$_REQUEST['id'];
$view= mysql_query ("select nama_kategori, nama_barang from barang where id_barang='$id'",$koneksi)
or die (mysql_error());
if ($data=mysql_fetch_array ($view)) {
?>
<form action="proses_order.php" method="post"> <table border="0">
echo "<option value='$i'>$i</option>"; }
echo "<option value='$w'>$bulan[$i]</option>"; }
echo "<option value='$i'>$i</option>"; }
?>
</select> </td> </tr>
<tr><td>Nama Lengkap</td><td>: <input type="text" name="nama" placeholder="Nama Lengkap" /></td></tr>
<tr><td>Alamat Lengkap</td><td>: <textarea name="alamat"></textarea></td></tr>
<tr><td>Kota</td><td>: <input type="text" name="kota" /></td></tr>
<tr><td>Nomor Telp/Hp</td><td>: <input type="text" name="nomor_telp" /></td></tr>
<tr><td>Nama Barang</td><td>: <input type="text"
name="nama_barang" value="<?php echo $data['nama_kategori']; ?> <?php echo $data['nama_barang'];?>" /></td></tr>
<tr><td>Jumlah Barang Yang Di Order</td><td>: <input type="text" name="jumlah" /></td></tr>
<tr><td> </td></tr>
<tr><td align="right"><input type="submit" name="submit" value="ORDER"/></td>
<td> <input type="button" value="CANCEL" onclick=self.history.back()></td>
if($nama!="" && $alamat!='') {
$qry=mysql_query("insert into pesanan
(tanggal,nama,alamat,kota,kode_pos,nomor_telp,nama_barang,jumlah) values('$tanggalorder','$nama','$alamat','$kota','$kodepos','$nomorte lp','$namabarang','$jumlah')",$koneksi) or die (mysql_error()); ?>
<script language="javascript"> <!--
alert("Terimakasih Data Anda Telah Kami Terima") window.location="index.php?p=gallery.php";
--></script> <?php } else{
?>
<script language ="javascript"> <!--
alert("Maaf.. Data Anda gagal")
window.location="index.php?p=order.php"; --></script>
<?php }
11.Koneksi.php
$koneksi=mysql_connect($hostname,$dbuser,$dbpass) or die (mysql_error());
mysql_select_db($dbname,$koneksi) or die (mysql_error());
?>
12.Login.php <div class="login">
<form action="cek.php" method="post"> <table border="0">
<td width="120 px">Username</td>
<td>: <input type="text" name="username"></td> </tr>
<tr>
<td>Password</td>
<td>: <input type="password" name="password"></td> </tr>
<tr>
<td></td><td> <input type="submit" name="submit" value="Login"></td>
if ($username!=''&& $pass!='') {
$result = mysql_query($sql)or die(mysql_error()); $hasil=mysql_fetch_array($result);
if($hasil['username']==$username && $hasil['password']==$pass) {
window.location = "index.php";
alert("Your name or password is wrong..") //-->
window.location = "../index.php"; alert("Silahkan Login.")
body{ margin:0px; background: url(../images/a.jpg) repeat-x;}
#wrapper{ width:960px; background: url(../images/a.jpg) repeat-x; margin: 0 auto;}
#header{ height:80px; }
#logo{ width:840px; float:left;}
#icon{ width:120px; float:left; margin-top:20px;}
#content{ border-left: 1px solid #CCCCCC;
border-right:1px solid #CCCCCC; height: auto;padding:10px; clear:both;}
#tampilan1{ width:940px; height:auto; margin-left:20px; margin-right:20px;}
#tampilan table{ float:left; border: 1px solid #999999;
background: #FFFFFF; width:160px; height:auto; margin:10px; margin-top:30px;}
#tampilan tr td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#0000FF;}
#tampilan2{clear:both;}
#tampilan2 tr td{text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif; color:#0000FF; font-size:12px; font-weight:bold;}
#tampilan2 p{text-align:center;}
#tampilan2 a{text-decoration:none;}
.clear{ clear:both; }
h2{text-align:center;font-family:Verdana, Arial, Helvetica, sans-serif; font-style: inherit; color:#000066; }
p{ text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; }
#syarat{ margin:auto; height:auto; background:#FFFFFF; padding:10px; border:1px solid #CCCCCC; }
#syarat h3{ text-align:center; color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; }
#syarat h5{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#FF0000; }
#syarat p{ text-align: justify; font-family:Verdana, Arial,
Helvetica, sans-serif; font-size:13px; font-weight: 900; }
#syarat tr td{ text-align: justify; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;
font-weight: 900; }
#c_1{ height:280px; margin-bottom:20px; display:block;}
#c_2{ width:480px; height:260px; margin-right:10px; float:left; padding:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;}
#c_2 h4{ font-size:18px; margin:0px; }
#c_2 p{ text-align:left; font-weight:normal; }
#c_2 tr td{ font-size:14px; }
#c_3{ width:395px; height:280px; padding-left:23px; float:left; }
#c_5 { width:780px; height:370px; float:left; margin-right:10px; border-right: 1px solid #CCCCCC; }
#c_5 h5{ margin-top: 0px; font-family:Verdana, Arial, Helvetica, sans-serif;}
#c_5 tr td{ text-align: justify; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; }
#c_6{ float:left; width:136px; height:370px;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bolder; color:#333333;}
.logo1{ width:136px; height:100px; float:left;}
.logo2{ width:136px; height:100px; float:left; }
#gallery{ height:auto; }
#gallery1{ height:480px;}
#gallery1 li{ list-style:none;}
#gallery1 ul li{ float:left; margin-left:40px; margin-right:40px; margin-bottom: 40px;}
#gallery1 li:hover{ background: #999999; }
.login{ border: 1px solid #999999; margin:auto; margin-top:20px; margin-bottom:20px; width: 350px; height:300px;
background: #C0C0C0; padding: 10px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.login tr th{ text-align:center; color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:large;}
.login tr td{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;}
#form{ margin:auto; border: 1px solid #999999; margin-top:40px; margin-bottom:20px; height:340px; width:440px;
background: #C0C0C0; padding:10px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#form tr th{ text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color:#FFFFFF;}
#form tr td{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;}
#menu1{ clear:both; height:40px; padding-left:258px;}
#menu{ clear:both; height:40px; padding-left:258px; background:url(../images/menu.jpg) repeat-x;}
.top_menu li{ float:left; list-style:none; }
.top_menu li a{ padding-top:8px; padding-bottom:8px; padding-right:20px; padding-left:5px; text-decoration:none; color: #222324; font:icon; font-size:16px;
font-weight:bold; display:block; }
.top_menu li a:hover{ background: url(../images/menu.png); color:#0000FF;}
.top_menu li:hover{ position:relative; }
#footer{ clear:both; height:14px;
background:url(../images/footer.jpg) repeat-x; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px; border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; padding:3px;}
LISTING PROGRAM PADA FILE ADMIN
1. Koneksi.php
$koneksi=mysql_connect($hostname,$dbuser,$dbpass) or die (mysql_error());
mysql_select_db($dbname,$koneksi) or die (mysql_error()); ?>
2. Index.php
<?php session_start();
if(!isset($_SESSION['pengguna'])) {
?>
<script language="JavaScript">
alert ("Silahkan Login terlebih dahulu..") location.href="../index.php";
</script> <?php
} else {
<div id="content">
<?php include"menu.php"; ?>
<div id="footer">Copyright © 2013 Cantik Modis</div> </div>
<link href="css/style.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div id="wrapper"> <div id="header">
<div id="logo"><img src="images/logo.png"></div> <div id="icon">
<a
href="https://www.facebook.com/ButikCantikMod is"><img src="images/fb.png" /></a>
<a href="#">
<img src="images/twitter.png" /></a> </div>
</div>
4. Content.php
<div id="home"><H1>SELAMAT DATANG ADMIN..</H1></div>
5. Menu.php <div id="menu">
<ul id="top_menu">
<li><a href="index.php">
<img src="images/a.png" /> HOME</a></li> <li><a href="?p=form_barang.php">
<img src="images/b.png" > TAMBAH BARANG</a></li> <li><a href="?p=lihat_barang.php">
<img src="images/c.png" > LIHAT BARANG</a></li> <li><a href="?p=daftar_order.php">
<li><a href="?p=logout.php">
<img src="images/e.png" /> LOGOUT</a></li> </ul>
</div>
6. Form_barang.php <div class="form">
<form method="post" action="proses_simpan_barang.php" enctype="multipart/form-data">
<tr><td>Nama Barang</td><td>: <input type="text" name="nama_barang" /></td></tr>
<tr><td width="150px">Jenis Barang</td><td>:<?php include ("koneksi.php");
$sql=mysql_query("select * from kategori"); ?>
<select name="kategori">
<?php while($data=mysql_fetch_array($sql)) { ?>
<option value="<?php echo
$data['nama_kategori'];?>"><?php echo $data['nama_kategori'];?> </option>
<?php } ?> </select></td> </tr>
<tr><td>Gambar</td><td> : <input type="file" name="gambar"></td></tr>
<tr><td>Jumlah Barang</td><td>: <input type="text" name="jumlah" /></td></tr>
<tr><td>Harga</td><td>: <input type="text" name="harga" /></td></tr>
<tr><td></td><td> <input type="submit" value="Simpan">
<input type="button" value=Batal onclick=self.history.back()></td>
7. Proses_simpan_barang.php
mysql_query("insert into barang
(nama_barang,nama_kategori,gambar,jumlah,harga) values
alert("Data Telah Disimpan")
window.location="index.php?p=lihat_barang.php"; --></script>
<?php } else { ?>
<script language ="javascript"> <!--
alert("Maaf.. Data Gagal di Simpan")
window.location="index.php?p=form_barang.php";
$sql=mysql_query("select * from barang"); ?>
<script type="text/JavaScript"> <!--
function MM_popupMsg(msg) { //v1.0 alert(msg);
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2)
eval(args[i]+".location='"+args[i+1]+"'"); }
//--> </script> <?php
//menentukan batas, cek dan posisi data $batas=10;
$halaman = $_REQUEST['halaman']; if(empty($halaman)){
$halaman = 1; } else {
$posisi = ($halaman-1) * $batas; }
//sesuaikan perintah SQL dengan posisi dan batas
$sql= "SELECT * FROM barang ORDER BY id_barang DESC LIMIT $posisi,$batas";
$result = mysql_query($sql); $test=mysql_num_rows($result); if ($test!=0)
{ while($data=mysql_fetch_array($result)){ ?>
<div id="tampilan1"> <div id="tampilan">
<table border="0" align="center">
<tr><?php $id= $data['id_barang']; ?><td
align="center" ><img src="images/images/<?php echo $data['gambar']; ?>" /></td></tr>
<tr><td align="center"><?php echo
$data['nama_kategori']; ?> <?php echo $data['nama_barang']; ?></td></tr>
<tr><td align="center">Sisa Barang: <?php echo $data['jumlah']; ?></td></tr>
<tr><td align="center">Rp.<?php echo $data['harga']; ?></td></tr>
<tr><td align="center"><acronym title="Edit Data"><img src="images/edit.png" align="middle"
onClick="MM_goToURL('parent',
'index.php?p=edit_barang.php&id=<?php echo $data['id_barang']; ?>');return document.MM_returnValue" /></acronym>
<a href='hapus_barang.php?id=<?php echo $data['id_barang']; ?>'
onClick=\"return confirm('Apakah Anda benar-benar akan menghapus data ini?')\">
<img src="images/hapus.png" align="middle" /></a> </td>
echo"<table width='500' align='center' id='tabel_show' cellpadding='1' cellspacing='1'><tr><td></td><td>";
$sql2 = mysql_query("select * from barang"); $result=mysql_num_rows($sql2);
$jmlhalaman=ceil($result/$batas);
/* bangun Previous link */ if($halaman > 1){
$prev = ($halaman - 1); ?>
<a href="index.php?p=lihat_barang.php&halaman=1"> << First</a> |
<?php } else {
echo "<p>First| < Previous "; } //tampilkan link halaman 1,2,3...
for($i = 1; $i <= $jmlhalaman; $i++){ if($i == $halaman){
echo "$i "; } else { ?>
<a href="index.php?p=lihat_barang.php&<? echo "halaman=$i"; ?>"><? echo $i; ?></a>
<?php } }
/* bangun Next link */ if($halaman < $jmlhalaman){
$next = $halaman + 1; ?>
<a href="index.php?p=lihat_barang.php&<? echo "halaman=$next"; ?>">Next> |</a>
<a href="index.php?p=lihat_barang.php&<? echo "halaman=$jmlhalaman"; ?>">Last </a>
<?php }
echo "</td></tr></table></div>";
}//akhir dari kondisi bahwa data tidak kosong else { echo "<p>TIDAK ADA DATA DALAM DATABASE "; }
?>
9. Edit_barang.php <?php
include ("koneksi.php"); $id=$_REQUEST['id'];
$view= mysql_query ("select * from barang where id_barang='$id'",$koneksi)or die (mysql_error());
if ($data=mysql_fetch_array ($view)){ ?>
<div class="form">
<form action="proses_edit_barang.php?id=<?php echo $id ?>" method="post">
<table>
<tr><th colspan="2"> EDIT BARANG</th></tr>
<tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr>
<tr><td>Nama Barang</td><td>: <input type="text"
name="nama_barang" size="32" maxlength="32" value="<?php echo $data['nama_barang'];?>"/></td></tr>
<tr><td width="150px">Jenis Barang</td><td>:<?php $sql=mysql_query("select * from kategori");?>
<select name="kategori"><?php while($data=mysql_fetch_array($sql)){ ?>
<option value="<?php echo $data['nama_kategori'];?>"><?php echo
$data['nama_kategori'];?></option><?php } ?> </select></td>
<tr><td>Gambar</td><td> : <input type="file" name="gambar" value="<?php echo $data['gambar'];?>"></td></tr>
<tr><td>Jumlah Barang</td><td>: <input type="text"
name="jumlah" value="<?php echo $data['jumlah'];?>"/></td></tr> <tr><td>Harga</td><td>: <input type="text" name="harga" value="<?php echo $data['harga'];?>" /></td></tr>
<tr><td></td><td> <input type="submit" value="Simpan">
<input type="button" value=Batal onclick=self.history.back()></td>
</tr>
<tr><td> </td></tr>
<tr><td colspan="2" align="center"><a
href="index.php?p=lihat_barang.php">Kembali</a></td></tr>
$qry=mysql_query("update barang set nama_barang='$nama_barang', nama_kategori='$nama_kategori', gambar='$gambar',
jumlah='$jumlah',harga='$harga' where id_barang='$id'",$koneksi) or die (mysql_error());
?>
<script language="javascript"> <!--
alert('Data Telah Di Ganti')
window.location = "index.php?p=lihat_barang.php"; --></script>
11.Hapus_barang.php
<?php include("koneksi.php");
$id1=$_REQUEST['id'];
$qry= mysql_query ("delete from barang where
id_barang='$id1'",$koneksi) or die (mysql_error());
if ($qry)
header ("location:index.php?p=lihat_barang.php");
12.Daftar_order.php <div class="lihat"> <?php
include "koneksi.php";
$sql = mysql_query("select * from pesanan"); ?>
<script type="text/JavaScript"> <!--
function MM_popupMsg(msg) { //v1.0 alert(msg);
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2)
eval(args[i]+".location='"+args[i+1]+"'"); }
//--> </script> <?php
//menentukan batas, cek dan posisi data $batas=10;
$halaman = $_REQUEST['halaman'];
if(empty($halaman)){
//sesuaikan perintah SQL dengan posisi dan batas
$sql= "SELECT * FROM pesanan ORDER BY id_pesanan DESC LIMIT $posisi,$batas";
$result = mysql_query($sql); $test=mysql_num_rows($result); if ($test!=0)
{ $no=$posisi+1;
echo"<table border='0' style='text-align:center' cellpadding='5px' bordercolordark='#000000'>";
while ($data = mysql_fetch_array($result)) {
//pemberian warna berbeda pada tiap baris tampilan
$id= $data['id_pesanan'];
echo "<tr bgcolor=$warna align='center' ><td>"; echo $no;
echo "</td><td width='150px'>"; echo $data['tanggal'];
echo "</td><td width='150px'>"; echo $data['nama'];
echo "</td><td width='170px'>"; echo $data['alamat'];
echo "</td><td width='60px'>"; echo $data['kota'];
echo "</td><td width='80px'>"; echo $data['kode_pos'];
echo "</td><td width=''>"; echo $data['nomor_telp'];
echo "</td><td width='170px'>"; echo $data['nama_barang']; echo "</td><td width=''>"; echo $data['jumlah'];
echo "</td><td width='110px'>";
echo "<a href='hapus_order.php?idc=$id' onClick=\"return confirm('Apakah Anda benar-benar akan menghapus data
ini?')\"><button>Hapus</button></a>";
echo "</table><table width='500' align='left' id='tabel_show' cellpadding='1' cellspacing='1'><tr><td></td><td>";
$sql2 = mysql_query("select * from pesanan"); $result=mysql_num_rows($sql2);
$jmlhalaman=ceil($result/$batas);
/* bangun Previous link */ if($halaman > 1){
$prev = ($halaman - 1); ?>
<a href="index.php?p=daftar_order.php&halaman=1"> << First </a> |
<a href="index.php?p=daftar_order.php&<? echo "halaman=$prev"; ?>"> <<Previous </a>
<?php } else {
echo "<p>First| < Previous "; } //tampilkan link halaman 1,2,3...
for($i = 1; $i <= $jmlhalaman; $i++){ if($i == $halaman){
echo "$i "; } else { ?>
<a href="index.php?p=daftar_order.php&<? echo "halaman=$i"; ?>"><? echo $i; ?></a>
<?php } }
$next = $halaman + 1; ?>
<a href="index.php?p=daftar_order.php&<? echo "halaman=$next"; ?>">Next> |</a>
<a href="index.php?p=daftar_order.php&<? echo "halaman=$jmlhalaman"; ?>">Last >></a>
<?php }
echo "</td></tr></table>";
}//akhir dari kondisi bahwa data tidak kosong else { echo "<p>TIDAK ADA DATA DALAM DATABASE "; } ?>
</div>
13.Hapus_order.php
<?php include("koneksi.php");
$id1=$_REQUEST['idc'];
$qry= mysql_query ("delete from pesanan where
id_pesanan='$id1'",$koneksi) or die (mysql_error());
if ($qry)
header ("location:index.php?p=daftar_order.php");
?>
14.Logout.php <?php
session_start();
unset($_SESSION['pengguna']); session_destroy();
print ("<meta http-equiv=\"refresh\" content=\"0; url=../index.php\">");
58
DAFTAR PUSTAKA
Kadir, A. 1999. Konsep dan Tuntunan Praktis Basis Data. Yogyakarta: Andi
Yogyakarta.
Ramadhani, Graifhan. 2003. “Modul Pengenalan Internet”.
Elmasri, R. dan Navathe, S.B. 2004. “Fundamentals of Database Systems, Fourth
Edition”. Addison Wesley.
Kristanto, H. 1994. Konsep Dan Perancangan Database. Yogyakarta: Andi Offset.
Martin, James. 1975. “Computer Data-Base Organization”.Prentice-Hall, Inc.
Englewood Cliffs, nj, Part II Physical Organization.
Barakatullah, A. Halim. 2005. “Konsep Belajar E-commerce”.
http://www.scribd.com/doc/53139341/php .”Bab V Web Dinamis PHP”. Diakses pada tanggal 18 Maret 2013.
http://ikc.depsos.go.id/umum/anon-phpmysql.php. “Dasar Pemrograman PHP dan
MySQL”. Diakses pada tanggal 18 Maret 2013.
http://blogesupri.blogspot.com/2011/06/pengertian-komputer.html. “Artikel Komputer dan Info Teknologi” Diakses pada tanggal 18 Maret 2013.
http://www.baliorange.web.id/pengertian-ecommerce/. “Pengertian E-commerce”.
Diakses pada tanggal 18 Maret 2013.
http://blog.duniascript.com/sekilas-tentang-macromedia-dreamweaver.html “Tentang
59
http://safrilblog.wordpress.com/2012/10/15/simbol-simbol-pada-flowchart-dan-penjelasannya-softskill / . “Simbol-simbol flowchart beserta fungsinya”.
Diakses pada 8 Juni 2013.
BAB 3
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Toko pakaian Cantik Modis merupakan usaha yang bergerak dibidang penjualanan
pakaian khusus wanita. Dalam melaksanakan aktivitasnya toko pakaian Cantik Modis
masih menggunakan sistem informasi yang manual, sehingga masih sering terjadi
kesalahan. Berdasarkan wawancara yang dilakukan, permintaan barang dari costumer
makin meningkat sehingga mengakibatkan pendataan barang yang masuk dan keluar
sering terjadi kesalahan khususnya seperti penggadaan barang. Dan dalam pembuatan
laporan-laporan juga masih sering terjadi kesalahan-kesalahan. Maka dari itu toko
pakaian Cantik Modis memerlukan sistem yang lebih terstruktur.
3.2 Analisa Permasalahan
Berbagai permasalah yang timbul dari sistem yang sedang berjalan adalah sebagai
28
1. Proses pengumpulan data yang dilakukan rentan terjadi kesalahan karena
belum adanya sistem yang lebih terstruktur.
2. Kesulitan dalam melakukan pengecekan barang.
3. Belum tersedianya laporan yang lebih terstruktur karena sistem yang sedang
berjalan sekarang menggunakan laporan yan manual.
3.3 Usulan dan Solusi
Dari permasalahan yang ada maka diusulkan solusi sebagai berikut:
1. Membuat fitur login admin agar semua proses pengumpulan data hanya dapat dilakukan admin agar lebih terstruktur.
2. Membuat pendataan barang seacara terstruktur.
3. Pembuatan laporan dengan format dan jenis sesuai kebutuhan.
3.4 Perancangan Sistem
Tahap perancangan sistem merupakan tahap awal dari membangun sebuah situs,
seperti membuat perencanaan, perancangan, diagram alur, tujuan, dan isi dari sebuah
situs. Setelah tahap perancangan, tahap selanjutnya yaitu membuat outline atau garis besar dari situs tersebut.
Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi
29
berisi seluruh tahapan/rangkaian kegiatan dalam suatu pekerjaan. Flowchart dapat dipergunakan untuk memperinci tahap-tahap rangkaian dan suatu proses pekerjaan.
Flowchart juga dapat dipergunakan untuk menjabarkan suatu proses pekerjaan ke dalam tahap-tahap rangkaian yang lebih spesifik untuk pemeriksaan selanjutnya.
3.4.1 Data Flow Diagram (DFD)
Data flow diagram merupakan suatu diagram yang menggunakan notasi-notasi untuk menggambarkan arus dari data sistem, dengan menggunakan pendekatan metoda
analisis sistem terstruktur (Structured System Analysis Method).
Di dalam tahap analisa, penggunaan notasi simbol lingkaran dan anak panah
untuk mewakili atau menggambarkan arus data dalam perancangan sistem sangat
membantu sekali di dalam komunikasi dengan pemakai sistem untuk memahami
sistem secara logika.
Keuntungan dari penggunaan DFD yaitu membantu para analis sistem
meringkas informasi tentang sistem, mengetahui hubungan antar sub sistem,
membantu perkembangan aplikasi secara efektif. DFD juga berfungsi sebagai alat
komunikasi yang baik antara user dan analis sistem.
Berbagai komponen dari Data Flow Diagram (DFD) yaitu entitas luar, proses, penyimpanan data, dan arus data. DFD memiliki simbol-simbol yang digunakan untuk
30
Tabel 3.1 Simbol Data Flow Diagram
De Marco and Yourdan Symbol Keterangan Gane and Sarson Symbols
Source (Kesatuan Luar)
Proses
Data Flow (Arus Data)
Data Store
(Penyimpanan Data)
3.4.1.1 Diagram Konteks
Diagram konteks adalah diagram yang terdiri dari suatu proses dan menggambarkan
ruang lingkup suatu sistem. Diagram konteks merupakan level tertinggi dari DFD
yang menggambarkan seluruh input ke sistem atau output dari sistem. DFD akan memberi gambaran tentang keseluruhan sistem. Sistem dibatasi oleh boundary (dapat
digambarkan dengan garis putus). Dalam diagram konteks hanya ada satu proses.
Tidak boleh ada store dalam diagram konteks (Ladjamudin, 2005).
Pada perancangan website e-commerce pada toko pakaian cantik modis ini
31
Gambar 3.1 Diagram Konteks
3.4.1.2 Diagram Nol/Zero (Overview Diagram)
Diagram nol adalah diagram yang menggambarkan proses dari data flow diagram. Diagram nol memberikan pandangan secara menyeluruh mengenai sistem yang
ditangani, menunjukkan tentang fungsi-fungsi utama atau proses yang ada, aliran data,
dan eksternal entity. Pada level ini sudah dimungkinkan adanya data store yang digunakan. Berikut ini adalah gambar DFD level nol yang merupakan penjabaran dari
gambar diagram konteks.
COSTUMER 1
32
3.4.1.3 Diagram Rinci (Level Diagram)
Diagram rinci adalah diagram yang menguraikan proses apa yang ada dalam diagram
nol atau diagram level diatasnya. Berikut ini adalah Gambar dari DFD level 1.
3.1 PILIHAN
ACTION
3.2 EDIT/ HAPUS
BARANG
KIRIM
D1 BARANG
PILIH
EDIT / HAPUS
HASIL
UPDATE
Gambar 3.3 Diagram Level 1
3.4.2 Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) tersusun atas 3 (tiga) komponen yaitu entitas, atribut dan kerelasian antar entitas. Secara garis besar entitas merupakan objek yang
terlibat di dalam sebuah sistem. Atribut berperan sebagai penjelas entitas dan
kerelasian menunjukkan hubungan yang terjadi antara dua entitas.
Adapun ERD dari Website E-Commerce Pada Toko Pakaian Cantik Modis
33
Gambar 3.4 ERD Pada Toko Pakaian Cantik Modis
3.4.3 Normalisasi Database
Normalisasi adalah suatu proses mendesain struktur Database sehingga sebagian besar
ambiguity bisa dihilangkan sehingga bisa menghasilkan sebuah table yang normal.
Adapun Tujuan Dari Normalisasi Adalah :
1. Untuk menghilangkan kerangkapan data/ redudansi.
2. Untuk mengurangi kompleksitas
3. Untuk mempermudah pemodifikasian data
34
Adapun normalisasi yang dibuat pada sistem ini adalah sebagai berikut:
1. Bentuk Normal Pertama (1NF)
Gambar 3.5 Bentuk Normal Pertama (1NF)
2. Bentuk Normal Kedua (2NF)
Gambar 3.6 Bentuk Normal Kedua (2NF)
Dalam sistem ini, sebenarnya pada bentuk 2NF sudah memenuhi kriteria sebagai tabel
relasional yang dapat diimplementasikan pada RDBMS, sehingga tidak harus dalam
35
3.4.4 Perancangan Struktur Database
Database dapat diartikan sebagai sebuah tempat menyimpan data yang terstruktur agar
dapat diakses dengan cepat dan mudah. Membangun sebuah database merupakan
langkah awal pembuatan aplikasi, termasuk dalam penambahan produk dan lain-lain
dalam mengolah penjualan pada Toko Pakaian Cantik Modis.
Berikut ini adalah tabel-tabel yang terdapat pada database perancangan
website e-commerce pada Toko Pakaian Cantik Modis:
Tabel 3.2 Tabel User
NAMA FIELD
TIPE DATA
DESKRIPSI
Id_user Integer(2) Auto increment, primary key
username Varchar(50) Nama pengguna
password Varchar(50) Kata sandi
status Varchar(10) Status pengguna
Tabel 3.3 Tabel Barang
NAMA FIELD
TIPE DATA
DESKRIPSI
Id_barang Integer(4) Auto increment, primary key
Nama_barang Varchar(50) Nama barang
Kategori_barang Varchar(20) Kategori barang
Gambar Varchar(50) Gambar barang
Jumlah Integer(3) Jumlah barang
36
Tabel 3.4 Tabel Kategori
NAMA FIELD
TIPE DATA
DESKRIPSI
Nama_kategori Varchar(20) Nama kategori
Tabel 3.5 Tabel Pesanan
NAMA FIELD
TIPE DATA
DESKRIPSI
Id_pesanan Integer(3) Auto increment, primary key
Tanggal date Tanggal pemesanan
Nama Varchar(30) Nama pemesan
Alamat text Alamat pemesan
Kota Varchar(30) Kota pemesan
Kode_pos Integer(5) Kode pos pemesan
Nomor_telp Varchar(13) Nomor telepon/hp pemesan
Nama_barang Varchar(50) Nama barang yang di pesan
37
3.4.5 Flowchart Website
Berikut adalah flowchart pada perancangan website e-commerce toko pakaian Cantik
Modis:
38
39
40
3.4.6 Perancangan Tampilan Halaman Website
a. Rancangan Tampilan Halaman Home
Gambar 3.10 Rancangan Tampilan Home
b. Rancangan Tampilan Menu Cara Order
41
c. Rancangan Tampilan Menu Gallery
Gambar 3.12 Rancangan Tampilan Menu Gallery
d. Rancangan Tampilan Menu About Us
42
e. Rancangan Tampilan Menu Contact
Gambar 3.14 Rancangan Tampilan Menu Contact
f. Rancangan Tampilan Menu Login Admin
43
g. Rancangan Tampilan Menu Kategori Barang
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah rangkaian prosedur yang dilakukan dalam menyelesaikan
desain sistem yang telah disetujui, menguji, dan memulai sistem baru atau sistem yang
telah diperbaiki.
Adapun langkah-langkah yang dibutuhkan dalam implementasi sistem adalah:
a. Mendapatkan software dan hardware yang tepat serta sesuai untuk
merancang suatu sistem informasi.
b. Menyelesaikan rancangan sistem.
c. Menulis, menguji, mengontrol, dan mendokumentasikan website.
45
4.2 Tujuan Implementasi Sistem
Adapun tujuan dari implementasi sistem adalah:
1. Menyelesaikan desain sistem yang ada di dalam dokumen desain sistem yang telah
disetujui sebelumnya.
2. Memastikan bahwa pengunjung dapat mengoperasikan sistem baru dengan mudah.
3. Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu dengan
menguji sistem secara menyeluruh.
4. Memastikan bahwa sistem telah berjalan baik dan benar.
4.3 Komponen Utama Dalam Implementasi Sistem
Untuk mewujudkan sistem yang telah dirancang memerlukan sarana pendukung, yaitu
berupa komponen-komponen yang sangat berperan dalam mendukung penerapan
sistem yang dirancang terhadap pengolahan data. Di antaranya yaitu: hardware
(perangkat keras), software (perangkat lunak), dan brainware (sumber daya manusia)
4.3.1 Perangkat keras (Hardware)
46
4.3.2 Perangkat lunak (Software)
Software merupakan kumpulan dari beberapa perintah yang diekseskusi oleh mesin komputer dalam menjalankan pekerjaannya. Perangkat lunak ini merupakan catatan
bagi mesin komputer untuk menyimpan perintah, maupun dokumen serta arsip
lainnya.
Ada beberapa software yang perlu diinstal dalam membuat website, antara lain:
1. Sistem Operasi Windows 7
2. Photoshop CS5 sebagai media perancanaan desain.
3. MySQL sebagai bahasa pemrograman untuk database dalam bahasa SQL.
4. Macromedia Dreamweaver 8 sebagai salah satu editor script dalam mendesain web.
5. PHP sebagai bahasa pemrograman server side.
6. Web Server sebagai server lokal dalam pengetesan halaman web.
7. Browser sebagai tempat media tampilan halaman website, seperti : Mozilla
Firefox
4.3.3 Sumber daya manusia (Brainware)
Sistem komputerisasi yang berfungsi sebagai alat bantu manusia di bidang pengolahan
data membutuhkan manusia sebagai aspek yang menangani proyek pada komputer.
Inilah yang disebut dengan aspek brainware. Brainware terdiri atas:
1. Sistem analis, yaitu orang yang membentuk dan membangun fasilitas rancangan
47
2. Programmer, yaitu orang yang bertugas untuk membuat dan membangun program dengan menggunakan salah satu fasilitas software yang telah ditentukan.
3. Operator, yaitu orang yang menangani langsung dalam pengolahan data, mulai
dari mempersiapkan data sampai pemasukan data dalam komputer.
4.4 Tampilan Website
4.4.1 Tampilan Halaman Awal
Gambar 4.1 Tampilan Halaman Awal
Pada halaman awal ini terdiri dari header, menu atas, content, menu bawah, dan footer. Di bagia menu atas terdapat pilihan menu seperti: Home, Cara Order, dan
foto-48
foto produk dari Canti Modis yang ditawarkan. Sedangkan di bagian menu bawah
terdapat pilihan menu seperti: About Us, Contact, dan Login.
4.4.2 Tampilan Menu Cara Order
Gambar 4.2 Tampilan Menu Cara Order
Pada tampilan menu cara order ini dijelaskan bagaimana tata cara untuk pemesana barang di toko pakaian Canti Modis ini agar tidak terjadi kesalahan dalam
49
4.4.3 Tampilan Menu About Us
Gambar 4.3 Tampilan Menu About Us
Di tampilan menu abous us ini berisi tentang Cantik Modis, dan terdapat foto
beserta artikel-artikel tentang produk yang ditawarkan oleh toko pakaian Cantik
Modis, dan juga terdapat logo dari jasa pembayaran dan pengiriman yang bekerja
50
4.4.4 Tampilan Menu Contact
Gambar 4.4 Tampilan Menu Contact
Pada tampilan di menu contact ini sama seperti pada menu about us kecuali
pada menu contact ini berisi tentang info kontak atau informasi tentang toko pakaian Cantik Modis.
4.4.5 Tampilan Menu Gallery
51
Pada menu gallery ini terdapat pilihan menu lagi di dalamnya. Menu yang ditawarkan adalah nama-nama produk yang ditawarkan oleh toko pakaian Cantik
Modis seperti Blus, Celana, Gamis, Jilbab, Rok, dan Stelan.
4.4.6 Tampilan Produk (Blus, Celana, Gamis, Jilbab, Rok, Stelan)
Gambar 4.6 Tampilan Produk
Di tampilan produk ini berisi foto-foto, nama barang, harga, dan tombol “Beli”
dari produk yang dipilih dari menu gallery sebelumnya. Di tampilan produk ini juga terdapat pilihan halaman. Jika tombol “Beli” di tekan maka akan muncul form order
52
4.4.7 Tampilan Form Order
Gambar 4.7 Tampilan Form Order
Di tampilan form order ini terdapat form-form yang harus di isi secara lengkap kecuali nama barang yang telah terisi secara otomatis. Setelah form terisi secara lengkap pilih tombol “Order” jika ingin memesan barang, dan jika tidak ingin
memesan pilih tombol “Cancel” .
4.4.8 Tampilan Login Admin
53
Di tampilan login admin ini terdapat form yang berisi username dan password
untuk masuk sebagai admin.
4.4.9 Tampilan Tambah Barang
Gambar 4.9 Tampilan Tambah Barang
Pada tampilan ini terdapat menu baru seperti: menu Home admin, Tambah Barang, Lihat Barang, Daftar Order, serta Logout. Di tampilan tambah barang ini
54
4.4.10 Tampilan Lihat Barang
Gambar 4.10 Tampilan Lihat Barang
Pada menu lihat barang ini berisi barang yang telah di masukkan sebelumnya.
Dan pada item barang tesebut terdapat foto, harga, sisa barang, harga serta tombol edit
untuk mengedit barang dan tombol hapus untuk menghapus barang tersebut.
4.4.11 Tampilan Daftar Order
55
Di tampilan menu daftar order ini menampilkan biodata lengkap dan barang
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Adapun kesimpulan yang dapat diambil oleh penulis dalam pembuatan website
e-commerce ini adalah:
1. Dengan adanya Sistem Informasi Penjualan berbasis web ini, penjual dapat
memperluas pemasaran produk secara cepat yang dapat meningkatkan
jumlah keuntungan bagi usahanya tersebut.
2. Sistem Informasi penjualan ini menyediakan layanan pemesanan produk
melalui sistem online, hanya dengan mengisi form pemesanan, dan
melakukan pembayaran ke nomor rekening yang telah diberitahu, maka
produk akan langsung dikirim ke alamat konsumen. Hal ini tentu akan
mempermudah pelanggan yang berada jauh dari tempat penjualan, ataupun
57
5.2 Saran
Dengan selesainya websitee-commerce Pada Toko Pakaian Cantik Modis ini, penulis
memberikan beberapa saran yang dapat mendukung pengembangan sistem lebih
lanjut:
1. Dapat melakukan perbaikan dan penyempurnaan terhadap sistem ini agar
menjadi lebih sempurna bila akan diterapkan pada sistem yang lama,
sehingga saling terintegrasi.
2. Sistem yang telah dibuat ini masih memerlukan perbaikan karena masih
memiliki kelemahan-kelemahan dalam memenuhi kebutuhan yang
BAB 2
LANDASAN TEORI
2.1 Pengertian Komputer
Dalam merancang suatu aplikasi ataupun sistem diperlukan sebuah alat bantu, seperti
komputer. Komputer adalah sekumpulan alat elektronik yang saling bekerja sama,
dapat menerima data (input), mengolah data (proses) dan menghasilkan informasi (output) serta terkoordinasi di bawah kontrol program yang tersimpan di dalam
memorinya. (http://blogesupri.blogspot.com/2011/06/pengertian-komputer.html)
Kata komputer berasal dari bahasa Latin yaitu Computare yang artinya menghitung. Dalam bahasa Inggris disebut to compute. Menurut buku “Computer Today” (Donald H.Sanders), komputer adalah sistem elektronik untuk memanipulasi
data yang cepat dan tepat serta dirancang dan diorganisasikan supaya secara otomatis
menerima dan menyimpan data input, memprosesnya dan menghasilkan output di
bawah pengawasan suatu langkah-langkah instruksi-instruksi program yang tersimpan
8
2.2 Pengenalan Internet
Internet (Interconnection-Network) adalah sebutan untuk sekumpulan jaringan komputer yang menghubungkan situs akademik, pemerintahan, komersil, organisasi,
maupun perorangan. Internet menyediakan akses untuk layanan telekomunikasi dan
sumber daya informas untuk jutaan bahkan milyaran pemakainya yang tersebar di
seluruh dunia. Layanan internet meliputi komunikasi langsung (email-chat), diskusi (Usenet News, e-mail, milis), sumber daya informasi yang terdistribusi (World Wide
Web, Gopher), remote login dan lalu lintas file (Telnet, FTP), dan aneka layanan yang lainnya. (Ramadhani, 2003).
Internet dapat juga diartikan sebagai suatu jaringan komputer luas yang berada di seluruh dunia dan berfungsi untuk menghubungkan jaringan komputer lain, di mana
pengguna akhir layanan internet memungkinkan untuk melakukan pertukaran data dan informasi melalui arsip situs World Wide Web.
World Wide Web adalah sekelompok dokumen multimedia yang saling terkoneksi menggunakan hypertext link. Dan dengan mengklik pada suatu link, anda
dapat berpindah dari suatu dokumen ke dokumen lainnya. Ada dua hal penting yang
harus diketahui bila belajar dengan WWW yaitu software web browser dan software
web server. Di mana software web browser ini bertindak sebagai client yang memungkinkan anda untuk melihat dan mendapatkan informasi dari server web, sedangkan software web server bertindak sebagai server yang
9
2.3 Pengertian E-commerce
E-commerce atau bisa disebut Perdagangan elektronik atau e-dagang adalah penyebaran, pembelian, penjualan, pemasaran barang dan jasa melalui sistem
elektronik seperti internet atau televisi, www, atau jaringan komputer lainnya.
Ecommerce dapat melibatkan transfer dana elektronik, pertukaran data elektronik, sistem manajemen inventori otomatis, dan sistem pengumpulan data otomatis.
Industri teknologi informasi melihat kegiatan e-dagang ini sebagai aplikasi dan
penerapan dari e-bisnis (e-business) yang berkaitan dengan transaksi komersial, seperti: transfer dana secara elektronik, SCM (supply chain management), e
-pemasaran (e-marketing), atau pemasaran online (online marketing), pemrosesan transaksi online (online transaction processing), pertukaran data elektronik (electronic
data interchange/EDI), dll.
E-dagang atau e-commerce merupakan bagian dari e-business, di mana cakupan e-business lebih luas, tidak hanya sekedar perniagaan tetapi mencakup juga
penggabungan mitra bisnis, pelayanan nasabah, lowongan pekerjaan, dan yang
lainnya. Selain teknologi jaringan www, e-dagang juga memerlukan teknologi basis data atau pangkalan data (database), e-surat atau surat elektronik (e-mail), dan bentuk
teknologi non-komputer yang lain seperti halnya sistem pengiriman barang, dan alat pembayaran untuk e-dagang ini.
E-commerce pertama kali diperkenalkan pada tahun 1994 pada saat pertama kali banner-elektronik dipakai untuk tujuan promosi dan periklanan di suatu halaman
10
penjualan seharga AS$12,2 milyar pada 2003. Menurut laporan yang lain pada bulan
oktober 2006 yang lalu, pendapatan ritel online yang bersifat non-travel di Amerika Serikat diramalkan akan mencapai seperempat trilyun dolar US pada tahun 2011.
(http://www.baliorange.web.id/pengertian-ecommerce)
Keuntungan e-commerce bagi bisnis perusahaan-perusahaan dapat menjangkau pelanggan di seluruh dunia. Oleh karena itu dengan memperluas bisnis mereka, sama
saja dengan meningkatkan keuntungan. E-commerce menawarkan pengurangan
sejumlah biaya tambahan.
Sebuah perusahaan yang melakukan bisnis di internet akan mengurangi biaya tambahan karena biaya tersebut tidak digunakan untuk gedung dan pelayanan
pelanggan (customer service), jika dibandingkan dengan jenis bisnis tradisional.
Secara ringkas keuntungan e-commerce tersebut adalah sebagai berikut:
1. Bagi Konsumen : harga jauh lebih murah, belanja cukup pada satu tempat.
2. Bagi Pengelola Bisnis : efisiensi, tanpa kesalahan, tepat waktu.
3. Bagi Manajemen : peningkatan pendapatan, loyalitas pelanggan.
Adapun beberapa aspek penting dalam membuka toko online adalah:
1. Menyiapkan fasilitas toko online memang tidak semudah membuat homepage.
11
menyiapkan content, desain web hosting-nya. Selain tampilan visual dan
content-nya harus bagus, struktur homepage yang dibuat pun harus jelas.
2. Langkah berikutnya, menyiapkan interaktivitas toko online tersebut. Paling
sederhana, bisa menggunakan fasilitas e-mail di website-nya. Agar interaktivitas antara merchant dan pengakses berjalan lancar, maka para
penjual online ini menyiapkan homepage-nya dengan formulir-formulir standar dan terstruktur, yang bisa dijawab dengan software tertentu. Sejauh ini
homepage-homepage di Indonesia belum menyediakan interaktivitas untuk kebutuhan verifikasi dan pembayaran.
3. Menurut Julizvar, konsulan dari Hewlett Packard (HP) Indonesia, untuk
terciptnya sistem pembayaran via internet memang dibutuhkan kesepakatan berbagai pihak, terutama dari pihak lembaga keuangan, merchant dan
konsumen. Pihak-pihak lainnya yang biasanya terlibat untuk mendukung
sistem pembayaran internet adalah penyedia sertifikat digital, baik untuk Visa
(misalnya VeriSign) maupun MasterCard (misalnya GTE); dan perusahaan
pemroses tansaksi kartu kredit.
4. Adapun soal pengiriman barang, merchant biasanya bekerjasama dengan
perusahaan jasa kurir seperti UPS, FedEx, JNE, Tiki, dan PT. Pos. Bahkan
untuk kebutuhan ekspor sekalipun. Hanya saja, kalau memiliki layanan yang
diberikan mall online di Indonesia, sejauh ini pengelola tidak ikut campur