PERANCANGAN WEBSITE SISTEM INFORMASI PEN (1)

Konferensi Nasional Ilmu Sosial & Teknologi (KNiST)
Maret 2015, pp. 205~213
205

PERANCANGAN WEBSITE SISTEM INFORMASI
PENJUALAN KAMERA
1

2

Acmad Nurhadi , Elly Indrayuni , Ahmad Sinnun

3

1

AMIK BSI Pontianak
e-mail: elly.eiy@bsi.ac.id
2

AMIK BSI Pontianak

e-mail: acmad.ahh@bsi.ac.id
3

AMIK BSI Pontianak
e-mail: ahmad.axn@bsi.ac.id
Abstrak
Perancangan web e-commerce pada penjualan kamera ini bertujuan untuk
mempermudah masyarakat dalam memperoleh informasi berbelanja (online) yang sebelumnya
diketahui dari mulut-kemulut atau pun dari brosur brosur, sehingga tidak tidak menghemat
waktu, disini saya mempermudah masyarakat dalam melakukan perbelanjaan secara (online),
sehingga dapat mengefisiensi dan efektif. Sistem perancangan dalam pembuatan website ecommerce pada penjualan kamera ini dikembangkan dengan menggunakan beberapa software
yakni Macromedia Dreamweaver CS6, Xampp Server yang merupakan gabungan dari Apache
Web Server, PHP dan MySQL. Dengan menggunakan Macromedia Dreamweaver CS6 maka
pengerjaan website akan lebih cepat dan mudah.
Keywords: Website, Sistem Informasi, Penjualan Kamera
1. Pendahuluan
Di Indonesia, banyak merek kamera DSLR
yang bersaing dipasar kamera profesional ini.
Seperti misalnya Canon, Nikon, Sony, Pentax
dan juga Olympus. Tetapi yang menguasai

dan kuat bersaing hanya ada dua merek yaitu
Canon dan Nikon. Untuk penguasa pasar
beberapa tahun belakangan ini adalah Canon
dan Nikon mengikuti dibelakangnya. Iklan
mempengaruhi minat beli konsumen dalam
tindakannya dan keyakinannya akan merek
produk yang ditawarkan perusahaan.
Teknologi internet mempunyai pengaruh
yang cukup besar dalam dunia ekonomi
khususnya dalam hal penjualan. Didukung
dengan kemajuan teknologi, internet dapat
diakses melalui gadged. E-Commerce
semakin diminati oleh penjual karena
beberapa
keunggulan,
seperti
biaya
operasional
yang
lebih

murah
dan
kemudahan
untuk
melakukan
proses
transaksi dan juga kemudahan dalam
melakukan penyusunan laporan yang di
perlukan, karena data yang ada sudah saling
terintegrasi. Sedangkan konsumen dapat
dengan
mudah
mengakses
informasi
melakukan pembelian dan mengkonfirmasi
pembayaran dari manapun dan kapanpun.
Internet bukan hanya untuk mencari segala
informasi yang datang dengan cepat, lebih

dari itu kehadiranya dapat digunakan sebagai

alat bantu bisnis perdagangan sebagai
sarana dalam proses jual beli.
Sehingga dapat memberikan kemudahan
sekaligus juga keleluasaan bagi para pembeli
serta perdagangan dalam proses jual beli. Di
masa lalu, aktivitas dunia perdagangan
(commerce) dilakukan melalui penawaran
langsung tapi pertumbuhan drastis dari
internet
telah
mengubah
pradigma
tersebut.Melalui internet, pedagang dapat
menawarkan produknya secara online
kepada pembeli tanpa perlu bertatap muka.
2. Metode Penelitian
Website
Secara umum website adalah suatu halaman
web yang saling berhubungan yang
umumnya

berada
pada
peladen
yang sama berisikan kumpulan informasi
yang
disediakan
secara
perorangan,
kelompok,
atauorganisasi.
Website
merupakan sejumlah halaman web yang
memiliki topic yang saling berkaitan dan
disertai dengan berkas-berkas gambar,
video, dokumen dan berkas lainnya. Web
adalah salah satu aplikasi yang berisikan
dokumen-dokumen
multimedia
(teks,
gambar, suara, animasi, video) didalamnya

menggunakan protokol HTTP (hypertext

Diterima 12 Januari 2015; Revisi 18 Februari 2015; Disetujui 15 Maret 2015

ISBN: 978-602-61242-3-4

transfer protocol) dan untuk mengaksesnya
menggunakan perangkat lunak yang disebut
browser. Beberapa jenis browser yang
populer saat ini diantaranya internet explorer
yang di produksi oleh Microsoft, Mozilla
Firefox, Opera, dan Safari yang diproduksi
oleh Apple.
1. Internet
Internet adalah seluruh jaringan komputer
yang saling terhubung menggunakan standar
sistem global TCP/IP sebagai protokol
pertukaran
paket
(packet

switching
communication protocol) untuk melayani
miliaran pengguna di seluruh dunia. Internet
adalah jaringan global yang menghubungkan
komputer-komputer di seluruh dunia.Seperti
halnya jaringan komputer local maupun
jaringan komputer area, internet juga
menggunakan protocol komunikasi yang
sama yaitu TCP/IP (transmission Control
Protocol/Internet Protocol).
2. WWW (World Wide Web) Menurut
Fathansyah (2012:464) “World Wide Web
(WWW atau Web) merupakan sistem
informasi
terdistribusi
yang
berbasis
hypertext”. Organisasi ini berkomitmen dalam
mengatur aturan pengembangan web, yang
terdiri dari 320 anggota. Selain mengatur

aturan pengembangan web, juga ikut
melibatkan diri
dalam dunia pendidikan.
Beberapa standar hasil pengembangan dari
W3C antara lain HTML, CSS, XHTML, DOM,
SOAP, XML, dll. Pada buku ini juga akan
dibahas mengenai beberapa standar W3C
yaitu HTML (HyperText Markup Language)
dan CSS (Cascading Style Sheets).
3. Web server
Menurut Fathansyah (2012:466) “Server Web
(Web Server) merujuk pada perangkat keras
(server)
dan
perangkat
lunak
yang
menyediakan
layanan
akses

kepada
pengguna melalui protokol komunikasi HTTP
ataupun variannya (seperti FTP dan HTTPS)
atas berkas-berkas yang terdapat pada suatu
URL ke pemakai”. Apache (server HTTP
Apache atau server Web/ WWW Apache)
adalah web server yang dapat dijalankan di
banyak system operasi (Unix, BSD, Linux,
Microsoft windows dan Novell Netware serta
Platform lainnya) yang berguna untuk
melayani dan memfungsikan situs web.
Protocol yang digunakan untuk melayani
fasilitas web/WWW ini menggunakan HTTP.
Sedangkan IIS atau internet Information
adalah sebuah HTTP web server yang
digunakan dalam system operasi server
Windows, mulai dari windows server NT 4.0
server, windows 2000 server atau windows

server 2003. Layanan ini merupakan layanan

terintegrasi dalam windows 2000 server,
windows server 2003 atau pendukung
protocol TCP/IP yang berjalan dalam lapisan
aplikasi (application layer). IIS juga menjadi
fondasi dari platform internet dan internet
Microsoft, yang menncakup Microsoft Site
server, microsoft Commerical Internet System
dan produk-produk Microsoft Back Office
lainnya.
4. Web browser
Web browser adalah aplikasi perangkat lunak
yang digunakan untuk mengambil dan
menyajikan sumber informasi. Sumber
informasi web di identifikasi dengan Uniform
Resource Identifier (URL) yang dapat terdiri
dari halaman web, video, gambar, atau pun
kontenlainya.
Sejarah Web Browser dimulai pada tahun
1991 saat Tim Berners-Lee membuat aplikasi
Web Browser pertama pada komputer NEXT

dengan nama World Wide Web Browser,
kemudian pada tahun 1993 NCSA (National
Center
Supercomputing
Application)
mengembangkan Web Browser grafis
bernama NCSA Mosaic, yang kemudian
dilanjutkan pada tahun 1994 merilis Netscape
Navigator dan pada tahun 1998 berubah
menjadi Mozilla Firefox.
Microsoft
corp
ikut
meramaikan
perkembangan Web Browser dengan merilis
Internet Explorer padatahun 1995, dan diikuti
oleh Opera di tahun 1996. Tidak ketinggalan
Apple inc. juga ikut meramaikan web browser
dengan merilis safari pada tahun 2003. Dan
di tanun 2008 Google inc. merilis web
browser dengan nama Google Chrome.
5. XAMPP
Menurut XAMPP merupakan sebuah tool
yang
menyediakan
beberapa
paket
perangkat lunak ke dalam satu buah paket.
XAMPP sama dengan PHP yang sudah
sering digunakan oleh programer web dalam
membuat aplikasi web. Kalau anda
menggunakan PHP untuk membuat aplikasi
web maka anda akan kerepotan dalam
proses instalasi dan setting PHP karena
untuk menggunakan PHP Anda harus
Menginstal sebuah Web Server dikomputer
anda yaitu Apache yang merupakan salah
satu web server yang ada saat ini.
6. Dreamweaver
Dreamweaver merupakan perangkat lunak
web editor keluaran Adobe System yang
digunakan untuk membangun dan mendesain
suatu website dengan fiturfitur yang menarik
dan kemudian dalam penggunaannya.

KNiST, 30 Maret 2015
206

ISBN: 978-602-61242-3-4

Dreamweaver CS6 tergabung dalam paket
Adobe Creative Suite (CS) yang di dalamnya
terdapat paket desain grafis, video editing,
dan pengembangan web aplikasi. Adobe
Creative Suite 6 (CS6), dirilis pada tanggal
tanggal 21 April 2012. Pada Dreamweaver
CS6 terdapat beberapa fitur baru dari versi
sebelumnya seperti Flud Grid Layout yang
dapat mengatur multi halaman web dengan
mudah, Web Fonts Manager manajemen
yang
memungkinkan
Anda
untuk
menggunakan font yang tersedia di web
server, CSS Style Panel tambahan untuk
membuat grafis seperti bayangan pada
elemen tertentu, gradient, membuat sudut
oval dan lain sebagainya. CSS Transitions
spesial efek pada elemen,
Phone GAP
memungkinkan Anda untuk membangun
aplikasi smartphone menjadi lebih mudah
dari sebelumnya.
Bahasa Pemrograman
1. Personal Home Page (PHP)
phpMyadmin adalah sebuah software yang
berbentuk seperti halaman situs yang
terdapat pada web server. PHP disebut
sebagai
pemrograman
Server
Side
Programming, hal ini dikarenakan seluruh
prosesnya dijalankan pada server. PHP
adalah suatu bahasa dengan hak cipta
terbuka atau yang juga dikenal dengan istilah
Open Source, yaitu pengguna dapat
mengembangkan kode-kode fungsi PHP
sesuai dengan kebutuhannya.
Pemrograman PHP dapat ditulis dalam dua
yaitu penulisan baris kode PHP pada file
tunggal dan penulisan kode PHP pada
halaman HTML (embedded). Kedua cara
penulisan tersebut tidak memiliki perbedaan,
hanya menjadi kebiasaan gaya penulisan dari
programer.
2. Java Script
Java Script secara umum adalah bahasa
pemograman web yang bersifat Client Side
Programming Language. Menurut Prasetio
(2014:291) “Javascript adalah bahasa
pemrograman
yang
digunakan
untuk
membuat web lebih dinamis dan interaktif”.
Pada awalnya javascript dikembangkan pada
web browser Netscape oleh Brendan Eich
dengan nama Mocha, kemudian berubah
menjadi Livescript dan yang akhirnya sampai
sekarang ini menjadi javascript.
3. CSS (Cascoding Style Sheet)
Menurut Ardhana (2011:108) “Cascading
Style Sheet (CSS) merupakan salah satu
bahasa
pemrograman
web
untuk
mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur

dan seragam”. Sama halnya style dalam
aplikasi pengolahan kata seperti Microsoft
Word yang dapat mengatur beberapa style,
misalnya heading, subbab, bodytext, footer,
images, dan style lainnya. Untuk dapat
digunakan bersama-sama dalam beberapa
berkas (file). Pada umumnya CSS dipakai
untuk memformat tampilan halaman web
yang dibuat dengan bahasa HTML dan
XHTML. CSS dapat mengendalikan ukuran
gambar, warna bagian tubuh pada teks,
warna tabel, ukuran border, warna hyperlink,
warna mouse over, spasi antar paragraph,
spasi antar teks, margin kiri, kanan, atas,
bawah, dan parameter lainnya. Dengan
adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan
format yang berbeda.
Basis Data
Basis Data secara umum berarti kumpulan
informasi yang disimpan di dalam komputer
secara sistematik sehingga dapat diperiksa
menggunakan suatu program komputer untuk
memperoleh informasi dari basis data
tersebut. Namun menurut Anhar (2010:45)
ialah “Sekumpulan tabel-tabel yang berisi
data dan merupakan kumpulan dari field atau
kolom”. Menurut Anhar (2010:151) “MySQL
adalah salah satu jenis database yang sangat
terkenal dan banyak digunakan untuk
membangun
aplikasi
web
yang
menggunakan database sebagai sumber dan
pengelolaan datanya”. MySQL dalam operasi
client-server melibatkan server daemon
MySQL, disini server dan berbagai macam
program serta library yang berjalan disisi
client, karena MySQL mampu menangani
data yang cukup besar. Perusahaan yang
mengebangkan MySQL yaitu TeX, mengaku
mampu menyimpan data lebih dari 40
database 10.000 tabel dan sekitar 7 juta
baris, dengan total kurang lebih wGigabyte
data. Standart SQL mula-mula didefenisikan
oleh
ISO
(International
Standards
Organisation) dan ANSI (the American
National Standards Intitute), yang dikenal
dengan sebutan SQL86, seiring dengan
perjalanan waktu, sejumlah standar barulahh
telah diterapkan. Saat ini banyak perangkat
lunak database yang menggunakan SQL
sebagai perintah untuk mengakses data.
Beberapa diantaranya, DB2, Ingres, Ilnformix,
ORACLE,
Mirosoft
Acces,
MySQL,
PostgreSQL, Rdb, Sybase.
Entity Relationship Diagram (ERD)

KNiST, 30 Maret 2015
207

ISBN: 978-602-61242-3-4

Menurut Fathansyah (2012:90) “Objektif
utama dari pembuatan diagram E-R adalah
untuk menunjukkan objek-objek (himpunan
entitas) apa saja yang ingin dilibatkan dalam
sebuah basis data dan bagaimana hubungan
yang terjadi di antara objek-objek tersebut”.
Sesuai namanya, ada dua komponen utama
pembentuk model entity relationship, yaitu
entitas (entity) dan relasi (relation). Kedua
komponen ini dideskripsikan lebih jauh
melalui sejumlah atribut/properti.
1. Entitas dan himpunan entitas
Entitas merupakan individu yang mewakili
sesuatu yang nyata (eksistensinya) dan
dapat dibedakan dari sesuatu yang lain.
Sedangkan sekelompok entitas yang sejenis
dan berada dalam lingkup yang sama
membentuk sebuah himpunan entitas.
2. Atribut
Setiap entitas pasti memiliki atribut yang
mendeskripsikan karakteristik (properti) dari
entitas tersebut. Penetapan atribut bagi
sebuah
entitas
umumnya
memang
didasarkan pada fakta yang ada.
3. Relasi dan himpunan relasi
Relasi menunjukkan adanya hubungan di
antara sejumlah entitas yang berasal dari
himpunan entitas yang berbeda. Kumpulan
semua relasi di antara entitas-entitas yang
terdapat pada himpunan entitas-himpunan
entitas
tersebut membentuk himpunan relasi.
4. Kardinalitas/derajat relasi
Kardinalitas relasi menunjukkan jumlah
maksimum entitas yang dapat berelasi
dengan entitas pada himpunan entitas yang
lain.
LRS (Logical Record Structure)
Menurut Rusmanto (2008:12) “LRS adalah
representasi dari struktur record-record pada
tabel- table yang terbentuk dari hasil relasi
antar himpunan entitas”.
Menentukan kardinalitas, jumlah tabel dan
foreign key (KY) pada LRS dibentuk dengan
nomor dari tipe record. Beberapa tipe record
digambarkan oleh kotak empat persegi
panjang dan dengan nama yang unik.
Perbedaan antara logical record structure
dengan entity relationship diagram adalah
terletak pada nama tipe record berada diluar
kotak field tipe record ditempatkan.
Logical record structure terdiri link-link
diantara tipe record, link ini menunjukan arah
dari satu tipe record lainnya. Banyak link dari
LRS yang terdiri yang diberi tanda field-field
yang kelihatan pada link tipe record.
Penggambaran LRS memiliki dua metode
yang dapat digunakan, dimulai dari kedua

model yang dapat dikonversikan ke LRS.
Metode yang lain dimulai dari ERD dan
langsung dikonversikan ke lrs. Transformasi
diagram ERD ke LRS merupakan suatu
kegiatan untuk membentuk data-data dari
diagram hubungan entitas ke suatu LRS.
Diagram ERD akan ditransformasikan ke
bentuk LRS.
Metode Penelitian
Metode penelitian yang penulis lakukan
adalah menggunakan metode Waterfall,
merupakan SDLC tertua karena sifatnya yang
natural. Urutan SDLC waterfall ini bersifatnya
serial dari proses perencanaan, analisa,
desain dan implemerntasi pada sistem.
Model ini adalah model yang muncul pertama
kali yaitu sekitar tahun 1970 sehingga sering
dianggap kuno. Model SDLC (Software
Development Life Cycle) air terjun (Waterfall)
sering juga disebut model sekuensi linier
(Sequential liniar) atau alur hidup klasik
(classic life cycle). Model air terjun
menyediakan
pendekatan
alur
hidup
perangkat lunak secara sekuensial atau
terurut dimulai dari analisis, desain,
pengodean, pengujian, dan tahap pendukung
(support).
1. Analisis kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan
secara intensif untuk mespesifikasikan
kebutuhan perangkat lunak agar dapat
dipahami perangkat lunak seperti apa yang
dibutuhkan oleh user, spesifikasi kebutuhan
perangkat lunak pada tahap ini perlu untuk
didokumentasikan.
2. Desain
Desain perangkat lunak adalah proses multi
langkah yang fokus pada desain pembuatan
program perangkat lunak harus termasuk
struktur data, arsitektur perangkat lunak
harus, representasi antarmuka, dan prosedur
pengodean.
Tahap
ini
mentranslasi
kebutuhan perangkat lunak harus dari tahap
analisis kebutuhan ke representasi desain
agar dapat diimplementasikan menjadi web
ecommerce pada tahap selanjunya. Desain
perangkat lunak harus yang dihasilkan pada
tahap ini juga perlu didokumentasikan.
3. Pembuatan kode program
Desain harus ditranslasikan ke dalam
program perangkat lunak harus. Hasil dari
tahap ini adalah perangkat lunak harus
sesuai dengan desain yang telah dibuat pada
tahap desain.
4. Pengujian
Pengujian fokus pada perangkat lunak harus
secara dari segi lojik (logic), fungsional dan
memastikan bahwa semua bagian sudah

KNiST, 30 Maret 2015
208

ISBN: 978-602-61242-3-4

diuji. Hal ini dilakukan untuk meminimalisir
kesalahan (error) dan memastikan keluaran
yang dihasilkan sesuai dengan yang
diinginkan.
5. Pendukung atau Pemeliharaan
Tidak
Menutup
kemungkinan
sebuah
perangkat lunak mengalami perubahan ketika
sudah dikirimkan ke user. Perubahan bisa
terjadi karena adanya kesalahan yang
muncul dan tidak terdeteksi saat pengujian
atau perangkat lunak harus beradaptasi
dengan lingkungan baru.
3. Pembahasan
Fotografi merupakan sebuah karya seni, kata
fotografi berasal dari kata Yunani yaitu phos
yang berarti cahaya dan graphein yang
berarti menggambar. Fotografi merupakan
salah satu bidang hobi yang digemari oleh
berbagai kalangan masyarakat saat ini. Mulai
dari pelajar, orang tua dan bahkan para
pekerja profesional pun menjadikan fotografi
sebagai alat dan sarana untuk memenuhi
kebutuhannya. Fotografi saat ini dipermudah
dengan adanya kehadiran teknologi kamera
digital. Faktor kualitas, kenyamanan dan
kemudahan
dalam
pengoperasian
mempengaruhi orang dalam menentukan
pilihan pada saat akan membeli kamera
digital.
Perancangan
web
e-commerce
pada
penjualan kamera ini bertujuan untuk
mempermudah
masyarakat
dalam
memperoleh informasi berbelanja (online)
yang sebelumnya diketahui dari mulutkemulut atau pun dari brosur brosur,
sehingga tidak tidak menghemat waktu, disini
saya mempermudah masyarakat dalam
melakukan perbelanjaan secara (online),
sehingga dapat mengefisiensi dan efektif.
Sistem perancangan dalam pembuatan
website e-commerce pada penjualan kamera
ini dikembangkan dengan menggunakan
beberapa software
yakni
Macromedia
Dreamweaver CS6, Xampp Server yang
merupakan gabungan dari Apache Web
Server,
PHP
dan
MySQL.
Dengan
menggunakan Macromedia Dreamweaver
CS6 maka pengerjaan website akan lebih
cepat dan mudah. Website sistem informasi
penjualan kamera yang dirancang memiliki
konten sebagai berikut:
1. Front end terdiri dari : Login user, Home,
Kategori, Hubungi Kami dan Keranjang
Belanja.
2. Back end terdiri dari : Beranda, User
Admin, Member, Produk, Pengiriman,
Konfirmasi dan Cetak Laporan penjualan.

Entity Relationship Diagram

Logical Relational Structure (LRS)

Hasil Tampilan Website
1. Halaman Login Admin

2. Halaman Beranda Admin

KNiST, 30 Maret 2015
209

ISBN: 978-602-61242-3-4

KNiST, 30 Maret 2015
210

ISBN: 978-602-61242-3-4

KNiST, 30 Maret 2015
211

ISBN: 978-602-61242-3-4

KNiST, 30 Maret 2015
212

ISBN: 978-602-61242-3-4

4. Simpulan
Berikut ini beberapa kesimpulan yang dapat
penulis ambil, yaitu :
1. Website ini adalah penjualan kamera
online yang dapat di akses oleh siapa
saja.
2. Website
penjualan
kamera
ini
memungkinkan
para
pelanggan
memesan dan melakukan transaksi
selama 24 Jam per – hari dimanapun
pelanggan berada.
3. Dengan adanya website sistem informasi
penjualan kamera online ini memberikan
kemudahan para pelanggan dalam
memesan tanpa harus datang ke toko.
4. Website ini dibangun dengan desain
yang simple agar nyaman dilihat oleh
para pelanggan.
Referensi
Anhar. Panduan Menguasai PHP dan MySQL
Secara Otodidak. Jakarta: Mediakita,
2010.
Ardhana, Kusuma.. Project PHP & MySQL
Membuat Website Buku Digital.
Jakarta: Jasakom, 2011
Fathansyah.
Basis
Data.
Bandung:
Informatika Bandung, 2012.
Prasetio, Adhi. Buku Pintar Pemrograman
Web. Jakarta: Media Kita, 2012.
Kadir, Abdul. Membuat Aplikasi Web dengan
PHP + Database MySQL. Yogyakarta
: Andi Offset, 2009.
Rusmanto, Cara Mudah Mendesain Web
dengan NVU. Jakarta: Dian Rakyat,
2008.

KNiST, 30 Maret 2015
213