Disusun Oleh :
Nama kelompok : Riska Dinasari (12184849)
Lintang Maharani (12184406)
Deta Farah Syifa (12184794)
Andien Prasya Al Auda (12184762)
Makalah ini berisikan tentang informasi tentang Toko Fitri atau yang lebih khususnya membahas
tentang pembuatan desain, dan segala sesuatu yang diperlukan dalam webste ini juga kegunaan website
ini.Diharapkan Makalah ini dapat memberikan informasi kepada kita semua tentang bagaimana membuat
Website dengan mudah.
Penulis menyadari bahwa makalah ini masih jauh dari sempurna, oleh karena itu kritik dan saran
dari semua pihak yang bersifat membangun selalu penuli harapkan demi kesempurnaan makalah ini.
Akhir kata, penulis sampaikan terima kasih kepada semua pihak yang telah berperan serta dalam
penyusunan makalah ini dari awal sampai akhir. Semoga Allah SWT senantiasa meridhai segala usaha
kita. Amin.
DAFTAR ISI
LEMBAR PERSETUJUAN ................................................................................... i
KATA PENGANTAR .......................................................................................................ii
DAFTAR ISI ...............................................................................................................iii
BAB
PENDAHULUAN .....................................................................................................1
1.1 Latar Belakang ...............................................................................................................1
1.2 Batasan Masalah ............................................................................................................2
1.3 Tujuan .............................................................................................................................2
BAB I
PENDAHULUAN
1.1 Latar Belakang
Dari segi bahasa, toko online berasal dari dua suku kata, Toko dan Online. Menurut Kamus
Besar Bahasa Indonesia, toko berarti sebuah tempat atau bangunan permanen untuk menjual barang-
barang (makanan, minuman, dan sebagainya). Sedangkan online yang terjemahan bahasa indonesianya
adalah dalam jaringan menurut Wikipedia adalah keadaan di saat seseorang terhubung ke dalam suatu
jaringan ataupun sistem yang lebih besar. Jadi berangkat dari dua pengertian secara bahasa tersebut
kita dapat mengartikan toko online sebagai tempat terjadinya aktifitas perdagangan atau jual beli
barang yang terhubung ke dalam suatu jaringan dalam hal ini jaringan internet.
Toko online adalah tempat kita bisa memajang barang dagangan kita di internet dan dilakukan transaksi
dengan pembeli melalui mesin di web. Saat ini toko online di Indonesia mulai berkembang pesat. Semakin banyak
orang yang menggunakan internet untuk membeli dan menjual barang ataupun jasa. Toko online di indonesia
memang sangat cocok sekali karena letak geografis indonesia yang kepulauan, memungkinkan kita untuk membeli
barang tanpa perlu datang ke tempat penjual.
1.2 Batasan Masalah
Batasan masalah dari tugas akhir yang diajukan adalah sebagai berikut:
1. Sistem ini diimplementasikan pada satu toko tas online.
2. Target pasar dari toko tas online yang menerapkan teknologi di atas adalah masyarakat pengguna
internet
3. Pembuatan toko tas online ini memakai aplikasi Adobe Dreamweaver, php editor, xampp, dan sql yog.
1.3 Tujuan
Adapun tujuan yang ingin dicapai dalam pembuatan website adalah sebagai berikut :
1. Untuk memenuhi tugas Ujian Akhir Semester genap dalam mata kuliah Pemrograman Website.
2. Mempermudah orang yang suka berbelanja namun tidak mempunyai waktu yang banyak untuk
berbelanja secara langsung dengan mengunjungi toko sebenarnya.
BAB II
LANDASAN TEORI
Dalam pembuatan website ini tentunya ditunjang oleh beberapa aplikasi
diantaranya :
1. Adobe Dreamver
2. Php Editor
3. Xampp
4. SqlYog
5. Photoshop CS 3
4. SqlYog
SQLyog adalah salah satu software yang bisa digunakan sebagai gui database manager untuk database
MySQL. Dengan aplikasi ini kita dapat membuat databse baru, mengupdate tabel, menghapus tabel,
menambahkan entry baru, dan masih banyak lagi.
5. PhotoShop CS 3
Adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk
pengeditan foto / gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan
oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader)
untuk perangkat lunak pengolah gambar / foto. Dalam mhal ini penulis menggunakan software ini untuk
mendisain banner dan lain-lain.
Selain penggunaan aplikasi – aplikasi yang dibutuhkan oleh wesite yaitu beberapa bahasa
pemrogaraman website yang penulis gunakan adalah html, php, dan css.
a. HTML
Merupakan singkatan dari HyperText Markup Language adalah script dimana kita bisa menampilkan
informasi dan daya kreasi kita lewat internet . HTML sendiri adalah suatu dokumen teks yang biasa yang
mudah dimengerti dibanding bahasa pemrograman lainnya.
b. PHP
Adalah bahasa pemrograman web atau scripting language yang di desain untuk web. PHP banyak
dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk
pemakaian lain.
c. CSS (Cascading Style Sheet)
Istilah CSS ini sering kali kita dengar ketika berurusan dengan mendesain halaman web. CSS
merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas
sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML. Ada
beberapa kelebihan penggunaan CSS yaitu halaman web menjadi tidak padat, lebih mudah mengganti
tampilan web dengan cukup mengganti nilai dan definsi pada satu file css saja.
BAB III
DESAIN DAN IMPLEMENTASI
3.1 DFD
Gambaran alur data yang terdapat dalam web.
3.2 Site Map
Gambar site map website.
3.3 Install Database
Dalam hal ini, penulis menggunakan database SqlYog. Langkah - langkah penginstallannya
adalah :
a. Double Klik pada installer Sqlyog, setelah double klik pada file tersebut untuk memulai penginstalan. Klik
Next.
b. Pilih custom untuk memilih tipe penginstallan.
c. Kemudian klik change untuk mengubah folder tujuan penginstallan.
d. "Look in" tujukan ke C:Apache/Server, kemudian buat sebuah folder dengan nama mysql atau anda bisa
langsung mengetikkan di "Folder Name" dengan C: \Apache Server\mysql\ kemudian klik OK.
e. Klik Next untuk melanjutkan.
f. Masih ada kesempatan untuk mengubah seandainya masih ada yang kurang tepat, tapi jika semua
sudah beres, tinggal klik install.
g. Tunggu hingga proses penginstallan selesai.
h. Klik Next.
i. Next again
j. Tandai configure The Mysql server now, klik Finish.
k. Klik Next
Lalu klik database yang sudah di buat tadi, klik kanan pada tabel, pilih create tabel
Isi Field name, Datatype , Lenght, Default, dan centang pada PK, Auto Increment Not null, unsigned, dan
zerofil jika dibutuhkan, serta isikan comment jika ada, lalu klik create table, lalu ketikkan
Nama tabelnya
Layout
o Gambar di bawah merupakan halaman awal atau hompage dari website penulis.
Terdapat penjelasan singkat mengenai toko tas online ini, link Follow me yang
terdiri dari Facebook dan twitter, dan terdapat alamat si pemilik website.
3.6 Source Code
Kode program pada website yang telah di buat.
1. Home
<!DOCTYPE html> <p><span style="font-size:18px">Website ini adalah toko tas
<HTML> online yang menyediakan berbagai tas wanita yang sedang
<!-- Website template by freewebsitetemplates.com --> up to date saat ini. Berbagai pilihan warna dan model
<HEAD> ditawarkan di toko ini.</span></p>
<meta charset="UTF-8" /> <p><span
<TITLE>Toko Fitri</TITLE> style="font-size:18px">Dan yang lebih penting lagi, semua
<link rel="stylesheet" type="text/css" href="css/style.css" /> harga tas di Toko Fitri ini adalah Everything all
<!--[if IE 9]> about</span><strong><span style="font-size:18px">75.000
<link rel="stylesheet" type="text/css" *</span></strong> </p>
href="css/ie9.css" /> <p><em><span style="font-
<![endif]--> size:12px">*belum termasuk ongkir diluar
<!--[if IE 7]> Kepri</span></em></p>
<link rel="stylesheet" type="text/css" <p> </p>
href="css/ie7.css" /> <form name="form2" method="post"
<![endif]--> action="">
<!--[if IE 6]> <table width="50%" border="0"
<link rel="stylesheet" type="text/css" cellspacing="0" cellpadding="0">
href="css/ie6.css" /> <tr>
<![endif]--> <td><p><strong><span style="font-
</HEAD> size: 18px; color: #000;">-----------------------------------------------
<BODY> </span></strong></p>
<php <p><strong><span style="font-
<div id="page"> size:18px"><marquee></marquee>
<div id="header"> <a href="http://www.dbcn-daretobe.com/?
<div> id=trian11"><img src="images/dare.jpg"
<a width="307" height="164"></a></span></strong></p></td>
href="index.php"><img src="images/logo.gif" alt="Logo" /></a> </tr>
</div> <tr>
<ul> <td><p><strong><span style="font-
<li class="first size:18px; color: #000;">-----------------------------------------------
current"><a href="index.php">Home</a></li> </span></strong></p>
<li><a <p><strong><span style="font-
href="collection.php">Collection</a></li> size:18px"><marquee>ADVERTISE YOUR PRODUCT
<li><a HERE</marquee></span></strong>
href="pemesanan.php">Pemesanan</a></li> <p><strong><span style="font-size: 18px; color:
<li><a #000;">-----------------------------------------------
href="contact.php">Contact Us</a></li> </span></strong></p></td>
</tr>
</ul> </table>
</div>
<div id="content">
<div> <p> </p>
<div class="aside"> </form>
<div> <p> </p>
<span>Follow Me</span>
<ol>
<li><a
href="http://www.facebook.com/fitri.apriani11" target="_blank" </div>
class="facebook">Facebook</a></li>
</div>
<li><a href="http://twitter.com/#!/trian_11" target="_blank" </div>
class="twitter">Twitter</a></li> <div id="footer">
</ol> <div>
<div>
<span>Address</span> <ul>
<p> <li>
Perum Taman Sari Hijau Blok D5 No.12, Tiban, Batam,
Kepri</p> <div align="center"><a href="collection.php"><img
</div> src="images/tas.jpg" width="200" height="200"></a>
</div> </div>
<form name="form1"
method="post" action=""> <h2 align="center"><a href="contact.php">75.000
</form> </a></h2>
<p align="center"> </p>
</li>
<li>
<p> </p>
<div
<div>
align="center"><a href="collection.php"><img
<p><a href="index.php"><img
src="images/tas2.jpg" width="200" height="200"></a>
src="images/tascokelat.jpg" width="404"
</div>
height="132"></a> </p>
<h2
<h1><strong>Welcome</strong></h1>
align="center"><a href="index.php">75.000</a></h2>
<h1><a href="index.php"><br />
</a></h1>
<p align="center"> </p>
<p> </p>
</li>
<li>
<div align="center"><a href="collection.php"><img
src="images/tas7.jpg" width="200" height="200"></a>
</div>
<h2
align="center"><a href="index.php">75.000</a></h2>
<p align="center"> </p>
</li>
</ul>
</div>
<p
class="footnote">© 2012 Fitri Apriani</p>
</div>
</div>
</div>
?>
</BODY>
</HTML>
2. Page Collection
<HTML> <ul>
<HEAD> <li
<meta charset="UTF-8" /> class="first"><a href="contact.php"><img src="images/tas34.jpg"
<TITLE>Collection</TITLE> width="200" height="200"></a><a href="index.php">kode :
<link rel="stylesheet" type="text/css" A12</a></li>
href="css/style.css" /> <li
<!--[if IE 9]> class="first"><a href="contact.php">Pesan</a>
<link rel="stylesheet" type="text/css" </li>
href="css/ie9.css" /> <li><a
<![endif]--> href="contact.php"><img src="images/tas12.jpg" width="200"
<!--[if IE 7]> height="200"></a><a href="index.php">kode : B12</a></li>
<link rel="stylesheet" type="text/css" <li><a
href="css/ie7.css" /> href="contact.php">Pesan</a></li>
<![endif]--> <li> </li>
<!--[if IE 6]> <li><a
<link rel="stylesheet" type="text/css" href="contact.php"><img src="images/tas9.jpg" width="200"
href="css/ie6.css" /> height="200"></a><a href="index.php">kode : C12</a></li>
<![endif]--> <li><a
</HEAD> href="contact.php">Pesan</a>
<BODY> </li>
<php </ul>
<div id="page"> </div>
<div id="header"> <div class="aside">
<div> <ul>
<a <li
href="index.php"><img src="images/logo.gif" class="first"><a href="contact.php"><img src="images/tas36[.jpg"
alt="Logo" /></a> width="200" height="200"></a><a href="index.php">kode :
</div> A13</a></li>
<ul> <li
<li class="first"><a href="contact.php">Pesan</a>
class="first"><a href="index.php">Home</a></li> </li>
<li <li><a
class="selected"><a href="contact.php"><img src="images/tas8.jpg" width="200"
href="collection.php">Collection</a></li> height="200"></a><a href="index.php">kode : B13</a></li>
<li><a <li><a
href="pemesanan.php">Pemesanan</a></li> href="contact.php">Pesan</a></li>
<li><a <li> </li>
href="contact.php">Contact Us</a></li> <li><a
href="contact.php"><img src="images/tas10.jpg" width="200"
</ul> height="200"></a><a href="index.php">kode : C13 </a></li>
</div> <li><a
<div id="content"> href="contact.php">Pesan</a>
<div> </li>
<div class="aside"> </ul>
<ul> </div>
<div class="aside">
<li class="first"> <ul>
<li
<a href="contact.php"><img class="first"><a href="contact.php"><img src="images/tas38.jpg"
src="images/tas.jpg" width="200" height="200" width="200" height="200"></a><a href="index.php">kode :
border="0"></a> A14</a></li>
<a <li
href="index.php">kode : A11</a></li> class="first"><a href="contact.php">Pesan</a>
</li>
<li class="first"><a href="contact.php">Pesan</a> <li><a
</li> href="contact.php"><img src="images/tas11.jpg" width="200"
height="200"></a><a href="index.php">kode : B14</a></li>
<li> <li><a
href="contact.php">Pesan</a></li>
<a href="contact.php"><img <li> </li>
src="images/tas2.jpg" width="200" height="200"></a> <li><a
<a href="contact.php"><img src="images/tascoklat.jpg" width="200"
href="index.php">kode : B11</a></li> height="200"></a><a href="index.php">kode : C14 </a></li>
<li><a
<li><a href="contact.php">Pesan</a></li> href="contact.php">Pesan</a>
</li>
<li> </li> </ul>
</div>
<li><a href="contact.php"><img
src="images/tas7.jpg" width="200" height="200"></a><a </div>
href="index.php">kode : C11</a></li> </div>
<div id="footer">
<li><a href="contact.php">Pesan</a> <div>
</li> <div>
</ul> <div>
</div> <div>
<div <h3>Address</h3>
class="aside">
<p>Perum Taman Sari Hijau BLok D5 No.12, Tiban, Batam,
Kepri</p>
</div>
<div>
<h3>F
ollow us</h3>
<ul>
<li><a href="http://www.facebook.com/fitri.apriani11"
target="_blank" class="facebook">Facebook</a></li>
<li><a href="http://twitter.com/#!/trian_11" target="_blank"
class="twitter">Twitter</a></li>
<li></li>
</ul>
<span>0852 6492 4114</span></div>
</div>
</div>
<p class="footnote">©
2012 Fitri Apriani</p>
</div>
</div>
</div>
?>
</BODY>
</HTML>
3. Page Pemesanan
<HTML> </li>
<HEAD> </ul>
<meta charset="UTF-8" /> </div>
<TITLE>Pemesanan</TITLE> <div>
<link rel="stylesheet" type="text/css" href="css/style.css" <h1>Cara
/> Pemesanan</h1>
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" <p>1.Pilih barang yang akan di beli, dan lihat kode
href="css/ie9.css" /> barang, lalu klik tombol pesan.</p>
<![endif]--> <p>2.Isi Form yang telah disediakan atau Klik Menu
<!--[if IE 7]> "Contact Us".</p>
<link rel="stylesheet" type="text/css" <p>3.Untuk info
href="css/ie7.css" /> selanjutnya akan dikirim ke email Anda atau via SMS.</p>
<![endif]--> <p> </p>
<!--[if IE 6]> <p><img
<link rel="stylesheet" type="text/css" src="images/HAPPY.gif" width="500" height="200"></p>
href="css/ie6.css" /> <p> </p>
<![endif]-->
</HEAD> </div>
<BODY> </div>
<php </div>
<div id="page"> <div id="footer">
<div id="header"> <div>
<div> <div>
<a <div>
href="index.php"><img src="images/logo.gif" <div>
alt="Logo" /></a> <h3>Address</h3>
</div>
<ul> <p>Perum. Taman Sari Hijau Blok D5 No. 12, Tiban, Batam .
<li Kepri</p>
class="first"><a href="index.php">Home</a></li> </div>
<li><a <div>
href="collection.php">Collection</a></li>
<li <h3>Follow us</h3>
class="selected"><a
href="pemesanan.php">Pemesanan</a></li> <ul>
<li><a
href="contact.php">Contact Us</a></li> <li><a href="http://www.facebook.com/fitri.apriani11"
target="_blank" class="facebook">Facebook</a></li>
</ul>
</div>
<div id="content"> <li><a href="http://twitter.com/#!/trian_11"
<div> target="_blank" class="twitter">Twitter</a></li>
<div
class="aside">
<ul>
</ul>
<li class="first">
<span>0852 6492 4114</span></div>
</div>
<a href="collection.php"><img
</div>
src="images/tas.jpg" width="225" height="225"></a>
<p class="footnote">©
2012 Fitri Apriani</p>
<a href="collection.php">kode : A11 </a></li>
</div>
</div>
<li class="first"><a href="contact.php">Pesan</a>
</div>
</li>
?>
</BODY>
<li>
</HTML>
<a href="collection.php"><img
src="images/tas2.jpg" width="245" height="235"></a>
<a href="collection.php">kode : A12
</a></a>
<li class="first"><a
href="contact.php">Pesan</a>
</li>
</li>
<li>
<a href="collection.php"><img
src="images/tas7.jpg" alt="Image" /></a>
<a href="collection.php">kode : A13
</a></li>
<li class="first"><a href="contact.php">Pesan</a>
</li>
4. Page Contact US
<HTML> <span>Call Me</span>
<HEAD>
<meta charset="UTF-8" /> <span></span></b>
<TITLE>Contact</TITLE>
<link rel="stylesheet" type="text/css" href="css/style.css" /> <p>Perum
<!--[if IE 9]> No.12, Tiban, Batam, Kepri</p>
<link rel="stylesheet" type="text/css" href="css/ie9.css" /> </div>
<![endif]--> <div>
<!--[if IE 7]> <div>
<link rel="stylesheet" type="text/css" href="css/ie7.css" /> </div>
<![endif]--> <div>
<!--[if IE 6]> <h3>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]--> <form method="post" name="contact" actio
</HEAD> <p>
<BODY> melakukan Pemesanan atau apabila ada Pertanyaan ya
<php <p>
<div id="page"> balas via Email atau SMS</p>
<div id="header">
<div> <lab
<a href="index.php"><img src="images/logo.gif" for="name">Nama</label>
alt="Logo" /></a>
</div> type="text" id="name" />
<ul>
<li class="first"><a mail</label>
href="index.php">Home</a></li>
<li><a href="collection.php">Collection</a></li> type="text" id="email" />
<li><a <lab
href="pemesanan.php">Pemesanan</a></li> No.HP</label>
<li class="last select"><a <inp
href="contact.php">Contact Us</a></li> type="text" id="alamat" />
</ul> <label for="kode">Kode Barang</label>
</div>
<div id="content"> type="text" id="kode" />
<div> <textarea name="subjec
<div class="aside"> rows="10"></textarea>
<div>
<span>Follow Me</span> value="" class="submit" />
<ol> </form>
<li><a </div>
href="http://www.facebook.com/fitri.apriani11" target="_blank" </div>
class="facebook">Facebook</a></li> </div>
<li><a <div id="footer">
href="http://twitter.com/#!/trian_11" target="_blank" class="twitter">Twitter</a></li> <div>
</ol> <p class="footnote">&co
</div>
</div>
</div>
?>
</BODY>
</HTML>
BAB IV
PENGUJIAN
4.1. Pengujian Insert
Tuliskan cara menguji Insert, dan tampilkan gambarnya di Gambar 4.1.
1. Klik kanan pada tabel pemesanan, pilih Alter. Klik Insert lalu isi field name dll.
4.2. Pengujian Edit
Tuliskan cara menguji Edit, dan tampilkan gambarnya di Gambar 4.2.
Klik kanan pada tabel pemesanan, pilih Alter.
4.3. Pengujian Delete
Tuliskan cara menguji Delete, dan tampilkan gambar sebelum delete di Gambar
4.3. dan setelah delete di Gambar 4.4.
Tuliskan cara menguji Edit, dan tampilkan gambarnya di Gambar 4.2.
Klik kanan pada tabel pemesanan, pilih Alter, pilih kolom yang ingin di hapus, klik delete lalu Yes.
BAB V
PENUTUP
5.1 Kesimpulan
Dalam penulisan Tugas Akhir ini telah di uraikan berbagai macam kebutuhan yang menunjang
dalam pembuatan website toko tas online ini. Maka penulis menyimpulkan :
1) Website ini adalah sarana penjualan tas secara online yang dapat di akses oleh siapa saja.
2) Sasaran dari website ini adalah para user yang tidak mempunyai waktu untuk mengunjungi toko
sebenarnya untuk membeli tas.
3) Website ini di bangun dengan desain yang simple agar nyaman dilihat oleh para user.
4) Website ini dibangun juga untuk menhemat biaya karena tidak perlu menyewa toko.
5.2 Saran
Adapun saran yang dapat penulis berikan yang diharapkan berguna dimasa yang akan datang adalah
sebagai berikut:
1) Agar selalu di percaya oleh pelanggan ataupun calon pembeli maka hendaknya pihak / pemilik toko
online ini selalu cepat dan tepat dalam memberikan informasi dan layanan yang dibutuhkan.
2) Perlu adanya pengembangan dari segi desain, kelengkapan, detail produk, tata cara pembayaran dan
pengiriman yang cepat dan mudah kedepannya.
3) Kecepatan dalan membuka halaman web juga nantinya akan di tingkatkan.
4) Penambahan fitur - fitur serta content juga perlu dilakukan untuk menarik minat calon pembeli ataupun
pelanggan.
DAFTAR PUSTAKA
[1] Sadeli Muhammad, 2011, Membuat Toko Online dengan PHP. Palembang: Maxikom.
[2] Zuhry Ramadhan Muhammad, 2008, Penjualan Online pada Toko Microtech
Computer, (http://repository.usu.ac.id).
[3] Zulkifli Dede, dkk, 2011, Gampang Membuat Toko Online. Jakarta: Informatika.
[4] www.hostinggokil.com/artikel/script-dasar-php-untuk-membuat-koneksi-database.htm.