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.
Konsep online shopping atau Toko online menyediakan banyak kemudahan dan
kelebihan jika dibandingkan dengan konsep belanja yang
tradisional. Selain proses
transaksi bisa menjadi lebih cepat, di internet telah
disediakan hampir semua barang yang biasanya dijual
secara lengkap.
Dunia internet juga menjadi sumber inspirasi bagi penulis untuk membuat
toko online ini. Penulis menyadari adanya beberapa keuntungan dari membuat toko
online ini yaitu biaya lebih murah karena tidak perlu tanpa harus menyewa
toko. Maka dari itu, toko online sangat berguna bagi orang yang
suka berbelanja namun tidak mempunyai waktu yang banyak untuk berbelanja secara
langsung dengan mengunjungi toko sebenarnya.
1.2 Batasan Masalah
Batasan masalah dari tugas
akhir yang diajukan adalah sebagai berikut:
1. Sistem ini diimplementasikan
pada satu toko sepatu online.
2. Target pasar
dari toko sepatu online yang menerapkan teknologi di atas
adalah masyarakat pengguna internet.
3. Pembuatan toko sepatu online ini memakai aplikasi
Adobe Dreamweaver, xampp.
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 Web.
2. Mempermudah orang yang
suka berbelanja namun tidak mempunyai waktu yang banyak untuk berbelanja secara
langsung dengan mengunjungi toko sebenarnya.
1.4 Manfaat
1. Memajukan usaha kecil
menengah untuk melakukan suatu bisnis dengan berbasis teknologi informasi.
2. Lebih mempromosikan produk
usaha kecil menengah agar bisa di lihat oleh khalayak ramai.
BAB II
LANDASAN TEORI
2.1
Aplikasi pembuatan website
Dalam pembuatan website ini tentunya ditunjang oleh
beberapa aplikasi diantaranya :
1. Adobe Dreamweaver
2. Xampp
3. Photoshop CS 3
Berikut akan dijelaskan tentang teori dari
masing-masing aplikasi tersebut.
1.Adobe Dreamweaver
Adalah adalah sebuah
software HTML editor profesionalyang digunakan untuk mendesain secara visual dan
mengelola situs webs maupun halaman web. Dreamweaver memudahkan kita dalam
pembuatan website karena tidak perlu berhubungan langsung dengan coding html
dan lainnya karena dilengkapi dengan berbagai macam tools pendukung.
Dreamweaver dilengkapi dengan beberapa fasilitas diantaranya :
a. Referensi HTML
b. CSS dan Java Script
c. Javascript debugger
d.
Editor kode
2.Xampp
Merupakan singkatan dari X
(empat system operasi apapun), Apache, MySql, Php, Perl. Xampp merupakan
aplikasi yang menyediakan paket perangkat lunak kedalam satu buah paket. Dalam
paketnya sudah terdapat Apache (web server). MySql (database), Php (server side
scripting), Perl, FTP server, PhpMyadmin.
3.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 hal ini penulis menggunakan software ini untuk mendisain
banner dan lain-lain.
2.2 Bahasa Pemograman pembuatan website
Selain penggunaan aplikasi – aplikasi yang dibutuhkan oleh wesite yaitu beberapa bahasa pemrogaraman
website yang penulis gunakan adalah:
1. Html
2. Java Script
3. Css
Berikut akan dijelaskan tentang teori dari masing-masing
bahasa
pemograman
tersebut.
1. 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.
2.Java Script
Java
Script merupakan bahasa pemograman yang bisa disisipkan di HTML akan tetapi
javascript berjalan disisi client.Ini berarti bahwa server bebas untuk
mengerjakan sesuatu yang lain daripada pemrosesan instruksi untuk setiap
client. Hal ini membuat Java Script sebagai pilihan daripada bahasa yang
memerlukan server untuk pengolahan. Contoh javascript adalah gambar bergulir
atau slideshow.
3.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 definisi pada satu file css
saja.
BAB III
DESAIN DAN SOURCE CODE
3.1
Langkah pembuatan website
1.Menubar
Pertama kita membuat menubar. Fungsi dari Menubar yaitu untuk menyimpan berbagai link-link penting pada suatu website, agar website tampil lebih rapih dan menarik, dan juga mempermudah para pengunjung untuk mengakses halaman-halaman utama pada website tersebut. Menubar web ini yang berisi Home, Profil, Gallery, Our Product, Transaction, Contact Us, Accesories. Seperti dibawah ini:
Berikut source codenya:
Header
<div id=”menubar”>
Untuk memasukkan code yang akan
diletakkan pada menubar yang sebelumnya diatur pada css yang sudah kita buat.
Langkah awal kita akan meletakkan header
dari website dan search engine pada website.
Header adalah bagian atas dari sebuah website.
Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk
menampilkan identitas utama dari sebuah situs.
Menu
<td align="center"
cellspacing="20"><A
href="index.html"target="mainFrame">
<IMG
src="images/home.png"width="50%"height="30%"</td>
<h2> (Nama Menu)</h2>
Berikutnya kita akan membuat menu-menu
pada web menggunakan table.
Table border untuk mengatur ketebalan
garis pada tabel. Lalu membuat table dan memasukkan link agar saat menu diklik
menampilkan tampilan yang diinginkan. Setelah itu letakkan logo menu dan
mengatur besar gambar (width). Terakhir tuliskan nama menu yang anda maksudkan.
Berikut seterusnya untuk menu selanjutnya.
Lalu
tutup menubar
</ul>
</div><!--close menubar-->
2.Sidebar
Sidebar
adalah content sebelah kiri/kanan yang menampilkan informasi dan memungkinkan
pelanggan terhubung dengan admin dari website kami. Terdapat status panel admin
apakah admin sedang online atau tidak. Setelah itu terdapat bukti testimoni
dari pelanggan kami dan beberapa link contact yang dari website kami seperti
facebook, twitter, dll.
Register
dan login members
Pada sidebar ini
kita dapat menampilkan bukti bahwa toko ini terpercaya. Disini para pelanggan
dapat bergabung menjadi member atau para member yang telah bergabung dapat
melakukan login untuk mempermudah layanan kami terhadap pelanggan.
Berikut source codenya:
<div id=”site_content”>
Untuk memasukkan code yang akan
diletakkan pada isi side bar yang sebelumnya diatur pada css yang sudah kita
buat.
<div class=”sidebar”>
Adalah coding untuk tiap kita memulai
memasukkan item baru pada side bar.
Setelah itu kita membuat menu Member
<form action=”#” method=”get>
Untuk membuat tampilan seperti yang
telah diatur pada css seperti ini
Status panel admin
Status panel admin untuk
menginformasikan kepada pelanggan apakah admin sedang online sehingga pelanggan
dapat berkomunikasi dengan admin. Selain itu dapat menampilkan erapa banyak
user yang online dan informasi mengenai tanggal dan jam saat itu. Disini kami
menggunakan coding Java Script.
Testimoni Pelanggan
Gambar disamping
adalah Testimoni pelanggan yang kami tampilkan untuk memberikan keyakinan pada
calon pelanggan bahwa website kami asli dan terpercaya. Bukti kepuasan
pelanggan terhadap produk kami dan membuktikan website kami terpercaya dan
terdapat bukti dari pelanggan yang telah membeli produk dari website kami.
Contact
Gambar di samping merupaka side bar terakhir yaitu Contact
yang didalamnya berisi contact beberapa admin pemilik website, informasi
rekening yang kami gunakan, dan informasi dimana
pelanggan dapat mengirim kritik dan saran kepada kami untuk meningkatkan
layanan kami kepada pelanggan.
Chat online Yahoo Messenger dengan admin
Chat YM
untuk memungkin calon pelanggan chat langsung dengan admin.
Berikut source codenya:
<a href="ymsgr:sendim?dekavesayuti"
target="_blank">
dekavesayuti adalah nama ID Yahoo
Messenger anda. Sedangkan angka 14 pada code adalah untuk memilih gambar atau icon Yahoo
Online Status.
Media Sosial
Gambar disamping
kami menampilkan beberapa link agar pelanggan dapat connect dengan kami tidak
hanya melalui website tapi juga memalui media sosial yang kami punya, karena
disana kami juga share gambar-gambar produk kami.
3.Content
Slideshow
Slideshow menampilkan gambar-gambar dari
website kami secara bergantian, dan dibawahnya kami menyisipkan tulisan.
Berikut source codenya:
<div class="slideshow">
Untuk memasukkan coding slideshow yang
sebelumnya diatur pada css yang sudah kita buat.
alt=""Semoga senang dengan layanan kami...""
/>
Adalah tulisan yang kita sisipkan
dibagian bawah slide.
Produk
Gambar di atas merupakan berisi produk unggulan sepatu-sepatu di toko kami . Terdapat
keterangan kode barang dan harga sepatu tersebut.
<div id="container">
Untuk memasukkan coding tabel produk
yang sebelumnya diatur pada css yang sudah kita buat.
<li> <a href="images/bigairmax.jpg"
class="lightbox-image"> <img src="images/airmax.jpg"
alt=""> </a> </li>
Untuk “bigairmax” adalah gambar setelah
dizoom.
Footer
Footer adalah bagian dasar atau paling bawah dari
sebuah website. Fungsi utamanya adalah sebagai kaki dan berisi informasi hak
cipta, kepemilikan, link tambahan, sumber daya, sponsor dan kredit sebuah website.
Namun, kadang-kadang footer juga bisa dijadikan sebagai tempat untuk
menampilkan widget.
Berikut source codenya:
<div id="footer">
Untuk memasukkan coding footer yang sebelumnya diatur pada css yang sudah
kita buat.
4.Menu
Dropdown
Menu dropdown adalah menu yang memiliki
sub menu kebawah. Sehingga saat kursor diarahkan pada menu akan tampak sub
menu-sub menu pilihannya lagi. Ini memudahkan pelanggan memilih kategori atau
merk sepatu dengan tipe yang lebih spesifik lagi.
Berikut source codenya:
<ul> untuk memulai membuat nama menu
<li>untuk membuat submenu
3.2 Source Code
1.CSS
CSS(Style 3)
Untuk mengatur tampilan Home, Profil,
Gallery, Transaction, Contact Us, dan Accesories.
body adalah
keseluruhan badan CSS, dari header sampai footer.
#submit_btn untuk mengatur tampilan tombol login
P untuk mengatur tulisan yg diawali code <p>
img untuk mengatur border pada gambar
h1, h2, h3, h4, h5, h6 untuk mengatur tulisan heading yang diawali code <h1> <h2>
<h3> <h4> <h5>
a untuk mengatur tulisan dan warnanya pada code <a href...>
ul, ol, li untuk mengatur bentuk list pada code yang diawali <ul> <ol> <li>
#menubar untuk mengatur ukuran, warna dll dari menu bar
#site_content untuk mengatur ukuran, warna dan tata letak content
.sidebar_container untuk mengatur letak sidebar apakah disebelah kiri atau
kanan content
.sidebar untuk mengatur tata letak item pada sidebar
.sidebar_item mengatur tulisan pada item sidebar
.sidebar h2 mengatur tulisan pada sidebar yang diawali code <h2> dan
mengatur kombinasi warna item
#footer untuk mengatur ukuran footer
#footer a untuk mengatur warna link tulisan pada footer yang diawali code <a>
.slideshow untuk mengatur ukuran slideshow
CSS(Style 4)
Mengatur dropdown.
nav ul untuk mengatur menghilangkan tanda pada pinggir list
nav ul a untuk menghilangkan efek teks atau link
nav ul li ul untuk mengatur
menyembunyikan menu saat pointer tidak sedang diatasnya
nav ul li:hover ul untuk mengatur menampilkan menu saat pointer diatasnya
CSS tabel produk yang kami
sisipkan di HTML.
#container untuk mengatur ukuran background isi content pada tabel
.lihat untuk mengatur ukuran kotak untuk meletakkan gambar
.lihat .masker,.lihat .content untuk mengatur ukuran dan tampilan saat
pointer berada diatas kotak atau gambar
.lihat h2 untuk mengatur tampilan tulisan saat pointer berada diatas kotak atau
gambar yang dimulai dengan code <h2>
.lihat p untuk mengatur tampilan tulisan saat pointer berada diatas kotak atau
gambar yang dimulai dengan code <p>
2.Java Script
Image_slide
Untuk mengatur slideshow
Jquery
Untuk membuat slideshow berganti gambar
sendiri.
3.HTML
Tampilan HTML pada halaman lain pada
dasarnya hampir sama. Hanya perlu mengikuti sesuai isi tampilan yang
diinginkan
3.3 Desain
Berikut hasil tampilan halaman
keseluruhan pada halaman yang telah kita buat:
1.Home
Home adalah halaman pertama/utama dari
website kami. Terdapat
penjelasan singkat mengenai toko sepatu online ini, link yang terdiri dari facebook dan twitter dan media
sosial lainnya dari website kami.
2.Profil
Profil menampilkan penjelasan profil
singkat mengenai toko online kami dan alasan mengapa toko kami terpercaya.
3.Gallery
Gallery menampilkan koleksi
sepatu-sepatu yang terdapat di toko kami. Membuktikan dan meyakinkan kepada
pelanggan kalau kami memiliki toko.
4.Our Product
Our product adalah halaman utama website
kami yang menampilkan seluruh jenis produk kami, sehingga pelanggan dapat
memilih sesuai yang mereka telah kami sediakan
5.Transaction
Transaction berisi tampilan halaman pemesanan yang di
dalamnya terdapat cara - cara untuk memesan sepatu dan nomor rekening dari website toko sepatu online kami.
6.Contact Us
Contact Us menampilkan informasi lokasi
dari website kami dan contact form agar pelanggan dapat mengirim kritik dan
sarannya.
7.Accesories
Accesories adalah produk tambahan yang
kami tawarkan untuk melengkapi tampilan anda.
BAB IV
PENUTUP
4.1 Kesimpulan
Dalam penulisan Tugas Akhir Semester Genap ini telah di uraikan
berbagai macam kebutuhan yang menunjang dalam pembuatan website toko sepatu online ini. Maka penulis
menyimpulkan :
1. Website ini adalah sarana
penjualan sepatu
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 sepatu.
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.
4.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.
nice information min
BalasHapusobeng 5in1