PERANCANGAN WEBSITE SISTEM INFORMASI PEN

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
INFORMASI SEMESTER GANJIL, SEPTEMBER 2015 – FEBRUARI 2016

PERANCANGAN WEBSITE SISTEM INFORMASI
PENJUALAN JAM TANGAN PADA TOKO
JAM TANGAN
Wahyu Dipoaji1, Herlawati2
Abstract— e-commerce is a trade contacts between sellers
and buyers using the Internet media. gains derived by using
e-commerce transactions is to increase revenue by using
online sales that cost less and also at the same operational
costs such as paper, printing catalogs. The Watch Store is a
store that specializes in selling various types of watches that
are trying to develop and improve sales and service to the
customers satisfaction. To help increase online sales and
still provide comfort to the customer, then the required
supporting websites such as e-commerce. The system design
in manufacturing e-commerce website was developed using
Adobe Dreamweaver CS6 software, and Apache2triad. With

e-commerce is expected to increase sales and make it easier
for the Watch Stores in managing the sale of products also
make it easier for customers to order the products by making
use of the internet so it can work more effectively and
efficiently.

Intisari— e-commerce merupakan suatu kontak transaksi
perdagangan antara penjual dan pembeli dengan
menggunakan media internet. Keuntungan yang diperoleh
dengan menggunakan transaksi melalui e-commerce
adalah untuk meningkatkan pendapatan dengan
menggunakan penjualan online yang biayanya lebih
murah dan juga sekaligus biaya-biaya oprasional seperti
kertas, pencetakan katalog. Toko jam Tangan adalah
sebuah toko yang bergerak di dalam bidang penjualan
berbagai macam jenis jam tangan yang sedang berupaya
mengembangkan dan meningkatkan penjualan serta
kepuasan pelayanan kepada para pelanggan. Untuk
membantu meningkatkan penjualan secara online dan
tetap memberikan kenyamanan pada customer, maka

dibutuhkan website yang mendukung seperti e-commerce.
Adapun sistem perancangan dalam pembuatan website ecommerce ini dikembangkan menggunakan software adobe
Dreamweaver CS6, dan Apache2triad.Dengan adanya ecommerce ini diharapkan dapat meningkatkan penjualan
dan mempermudah bagi pihak Toko Jam Tangan dalam
mengelola
transaksi
penjualan
produk
juga
mempermudah bagi pelanggan dalam melakukan
pemesanan produk dengan memanfaatkan media internet
sehingga dapat bekerja lebih efektif dan efisien.
Kata kunci

: e-commerce, Sistem Informasi, website, internet

I. PENDAHULUAN
Internet pada saat ini tidak hanya dikuasai oleh orangorang yang secara formal berkecimpung di dunia teknologi
informasi saja, tetapi sudah banyak pengguna lain yang bukan
dari kalangan IT. Sebagian besar mereka memanfaatkan

internet sebagai sarana promosi. Jika diperhatikan, tiap hari
lahir web-web baru yang memuat profil dan promosi suatu
instansi/usaha/kegiatan. Sehingga tentunya hal ini membuka
peluang besar bagi profesi web programmer. Seorang web
programmer yang kreatif tidak harus berkeliling mencari
pekerjaan, karena ia akan dengan mudah mendapatkannya
secara online, melalui media chatting, email, forum, atau milis.
Begitu pula dalam bekerja, ia dapat bekerja dan meng-upload
hasilnya dari mana saja ia berada (Oktavian ,2013:5)
Meningkatnya penggunaan internet oleh masyarakat
yang ditandai dengan melonjaknya pelanggan maupun
pebisnis yang mendorong munculnya suatu tuntutan
pelayanan internet melebihi dari apa yang bisa diperoleh di
dunia nyata. Dengan internet keuntungan yang diperoleh akan
sangat mudah dan praktis dibandingkan dengan media
promosi lain, oleh karena itu saat ini di indonesia muncul
banyak sistem pembayaran yang dilakukan secara online agar
memudahkan para pelanggan melakukan pembayaran secara
online.
Maksud dari penelitian ini adalah :

1. Untuk mempermudah masyarakat dalam mencari
informasi jam tangan yang dibutuhkan yang bersifat
online, memudahkan dalam proses transaksi
pembelian jam tangan agar para pembeli tidak perlu
datang ke toko.
2. Merancang aplikasi e-commerce pada toko jam
tangan yang menyediakan fasilitas bagi penjual dan
pembeli untuk menciptakan transaksi yang lebih
mudah dan cepat.
3. Memudahkan para pengguna internet yang biasa
mencari produk yang diinginkannya melalui media
online terutama mereka yang mencari produk jam
tangan sehingga tidak membuang waktu dalam
mencari produknya. Dan juga mereka dapat
mengakses internet dimanapun dengan alat
pendukung yang mereka punya seperti smartphone..

1, 2

Program Studi Sistem Informasi STMIK Nusa Mandiri

Jakarta, Jln. Damai No. 8 Warung Jati Barat(Margasatwa)
Jakarta Selatan Telp. (021) 78839513 Fax. (021) 78839421;
e-mail:
juniardi.d@gmail.com;
herlawati@nusamandiri.ac.id

1

PERANCANGAN SISTEM INFORMASI ... | UJIAN AKHIR SEMESTER

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
SEMESTER GENAP, MARET – AGUSTUS 2015 INFORMASI
I.
a.

b.

c.


d.

e.

f.

g.

h.

i.

j.

KAJIAN LITERATUR

Internet
“Internet (kependekan dari ‘interconnceted networking’)
ialah rangkaian komputer yang terhubung satu sama lain”

[1].
Web
”World Wide Web atau lebih sering dikenal sebagai Web
adalah suatu layanan sajian informasi yang menggunakan
konsep hyperlink (tautan), yang memudahkan surfer
(sebutan para pemakai komputer yang melakukan
browsing atau penelusuran informasi melalui internet)”
[2].
HTML
“HTML (Hyper Text Markup Language) adalah
sekumpulan simbol-simbol atau tag-tag yang dituliskan
dalam sebuah file yang digunakan untuk menampilkan
halaman pada web browser” [3].
MySQL
“MySQL merupakan salah satu software untuk database
server yang banyak digunakan, MySQL bersifat Open
Source dan menggunakan SQL” [4].
PHP
“PHP adalah bahasa pemrograman yang digunakan secara
luas untuk penanganan pembuatan dan pengembangan

sebuah web dan bisa digunakan pada HTML” [5].
Web Server
“Web Server adalah aplikasi yang berfungsi untuk
melayani permintaan pemanggilan alamat dari pengguna
melalui web browser, dimana web server mengirimkan
kembali informasi yang diminta tersebut melalui HTTP
(Hyper Text Transfer Protocol) untuk ditampilkan ke
layar monitor komputer”.[3]
Web browser
“Browser merupakan software yang diinstall di mesin
client, berfungsi untuk menerjemahkan tag HTML
menjadi halaman web” [3].
Adobe Dreamweaver CS 6
“Adobe Dreamweaver CS 6, atau biasa disebut
Dreamweaver 6, adalah sebuah perangkat lunak aplikasi
untuk mendesain dan membuat halaman web”.[6]
Basis Data
“kumpulan data berelasi yang disusun, diorganisasikan
dan disimpan secara sistematik dalam media simpan
komputer mengacu kepada metode-metode tertentu

sedemikian rupa sehingga dapat diakses secara cepat dan
mudah menggunakan program atau aplikasi komputer
untuk memperoleh data dari basis data tersebut” .
Model pengembangan perangkat lunak
“Model SDLC air terjun (waterfall) sering juga disebut
model sekuensial linier (sequential linier) atau alur hidup
klasik (classic life cycle). Model air terjun menyediakan

k.

l.

II.

pendekatan alur hidup perangkat lunak secara sekuensial
atau terurut dimulai dari analisis, desain, pengodean,
pengujian, dan tahap pendukung (support)” [7].
CSS
“CSS adalah singkatan dari Cascading Style Sheet yang
berguna untuk mengatur tampilan dokumen HTML,

contohnya seperti pengaturan jarak antar baris, teks,
warna dan format border bahkan penampilan file gambar”
[3].
Javascript
“Javascript adalah suatu bahasa pemrograman yang
dikembangkan untuk dapat berjalan pada web browser”
[7].

METODE PENELITIAN

Metode pengumpulan data yang digunakan yaitu: metode
observasi dan metode studi pustaka.
Metodologi pengembangan sistem perangkat lunak yang
penulis gunakan adalah model Waterfall. “Model SDLC air
terjun (waterfall) sering juga disebut model sekuensial linier
(sequential linier) 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)” [10].


Sumber: Sukamto dan Shalahuddin (2013)
Gambar 1. Model Waterfall

Tahapan – tahapan yang ada pada model waterfall secara
global [7] adalah
a. Analisis Kebutuhan
“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”.
b. Desain

UJIAN AKHIR SEMESTER | SISTEM INFORMASI PENJUALAN ...

2

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
INFORMASI SEMESTER GANJIL, SEPTEMBER 2015 – FEBRUARI 2016
“Desain perangkat lunak adalah proses multi langkah yang
fokus pada desain pembuatan program perangkat lunak
termasuk struktur data, arsitektur perangkat lunak,
representasi antarmuka, dan prosedur pengodean. Tahap
ini mentranslasi kebutuhan perangkat lunak dari tahap
analisis kebutuhan ke representasi desain agar dapat
diimplementasikan menjadi program pada tahap
selanjutnya. Desain perangkat lunak yang dihasilkan pada
tahap ini juga perlu didokumentasikan”.
c. Pembuatan Kode Program
“Desain harus ditranslasikan ke dalam program perangkat
lunak. Hasil dari tahap ini adalah program komputer sesuai
dengan desain yang telah dibuat pada tahap desain”.
d. Pengujian
“Pengujian fokus pada perangkat lunak secara dari segi
lojik dan fungsional dan memastikan bahwa semua bagian
sudah diuji. Hal ini dilakukan untuk meminimalisir
kesalahan (error) dan memastikan keluaran yang
dihasilkan sesuai dengan yang diinginkan”.
e. Pendukung (support) atau pemeliharaan (maintenance)
“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. Tahap
pendukung atau pemeliharaan dapat mengulangi proses
pengembangan mulai dari analisis spesifikasi untuk
perubahan perangkat lunak yang sudah ada, tapi tidak
untuk membuat perangkat lunak baru”.
III.

HASIL DAN PEMBAHASAN

Prosedur Sistem Berjalan dalam penelitian ini yaitu
pengunjung yang akan membeli pada halaman web ini harus
terdaftar sebagai member terlebih dahulu, lalu login. Bila
belum terdaftar maka pengunjung harus mendaftar dengan
cara klik menu ‘Gak Punya Akun? Daftar Akun Baru’, lalu isi
form yang telah tersedia. Setelah memiliki akun, maka
pengunjung dapat login dengan mengetikkan username dan
password untuk masuk ke halaman member. Pada halaman
member, member dapat melihat galeri produk, bila tertarik dan
ingin membeli dapat klik ‘Buy This Item’, lalu akan tampil
keranjang belanja yang berisikan info ID Barang, Nama
Barang, Jumlah beli, Harga Satuan, Sub Total. Jika ingin
membatalkan pesanan maka dapat klik ‘Hapus’. Jika telah
selesai memesan klik ‘Selesai’. Sekali lagi akan tampil detail
keranjang dan konfirmasi data. Bila sudah mengecek dan
mengisi informasi dengan benar maka klik ‘Proses’. Akan
tampil data pemesan dan barang yang telah dipesan
sebelumnya. Data pemesan dan barang ini juga dapat
digunakan sebagai bukti pemesanan. Lalu member transfer ke

3

rekening kami dan melakukan konfirmasi pembayaran pada
menu ‘Konfirmasi Pembayaran’. Setelah semua selesai, maka
pesanan member akan diproses.
Rancangan antar muka front end (halaman user)
Halaman user adalah halaman utama website yang akan
dilihat oleh pengunjung ketika mengakses URL website
tersebut.

Sumber: Hasil Penelitian 2014
Rancangan antar muka back end
Halaman back end adalah halaman administrator untuk
mengelola sebuah program. Tampilan front end dapat dikelola
melalui halaman back end.
a.
Halaman beranda admin

Sumber: Hasil Penelitian 2014

PERANCANGAN SISTEM INFORMASI ... | UJIAN AKHIR SEMESTER

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
SEMESTER GENAP, MARET – AGUSTUS 2015 INFORMASI
b.

Halaman ubah dan tambah data produk

Sumber: Hasil Penelitian 2014
c. Halaman produk

Tahapan Analisis yang penulis ajukan yaitu :
Analisa kebutuhan merupakan langkah awal untuk
menentukan perangkat lunak seperti apa yang akan dihasilkan
ketika kita melaksanakan sebuah proyek pembuatan perangkat
lunak. Perangkat lunak yang baik dan sesuai dengan
kebutuhan pengguna sangat bergantung pada keberhasilan
dalam melakukan analisa kebutuhan.
Halaman Admin:
A1. Admin dapat melihat pengunjung yang sudah menjadi
pelanggan.
A2. Admin dapat melihat pesan testi dari pelanggan.
A3. Admin dapat mengubah, menghapus, dan menambahkan
produk.
A4. Admin dapat mengubah, menghapus, dan menambahkan
kategori.
A5. Admin dapat mengubah, menghapus, dan menambahkan
kota dan provinsi.
A6. Admin dapat mengubah, menghapus, dan menambahkan
bank tujuan pembayaran.
A7. Admin dapat mengubah harga produk.
A8. Admin dapat mengubah, menghapus, dan menambahkan
tarif kirim
A9. Admin dapat melihat pesanan dari pelanggan.
Halaman pengguna umum (pengunjung):
B1. Pengunjung dapat melihat produk dan tatacara pemesanan
produk
B2. Pengunjung mendapatkan informasi tentang produk
secara detail, seperti harga, spesifikasi, gambar produk,
dan stok produk
Halaman pengguna khusus (member):
B3. Pelanggan dapat memesan produk.
B4. Pelanggan dapat membatalkan pesanan produk
B5. Pelanggan memiliki keranjang belanja.
B6. Pelanggan dapat menentukan tujuan pengiriman.
B7. Pelanggan dapat mengisi testimoni sesuai tanggapan
mereka
Entity Relationship Diagram (ERD)
Entity Relationship Diagram pada penelitian ini adalah:

Sumber: Hasil Penelitian 2014

UJIAN AKHIR SEMESTER | SISTEM INFORMASI PENJUALAN ...

4

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
INFORMASI SEMESTER GANJIL, SEPTEMBER 2015 – FEBRUARI 2016

Sumber: Hasil Penelitian (2014)
Gambar 2. Entity Relationship Diagram

5

PERANCANGAN SISTEM INFORMASI ... | UJIAN AKHIR SEMESTER

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
SEMESTER GENAP, MARET – AGUSTUS 2015 INFORMASI
Logical Relational Structure (LRS)

Sumber: Hasil Penelitian (2014)
Gambar 3. Logical Relational Structure

Fungsi
: untuk menyimpan data pelanggan
Tipe File : File Master
Spesfikasi File
File yang ada di dalam database Toko Jam Tangan terdiri Organisasi File
: Indexed Sequential
dari :
Akses File : Random
Spesifikasi File Pelanggan
Panjang Record
: 385 byte
Nama File : Pelanggan
Kunci Field : customer_id
Akronim : customer
Software : MySQL
2.
Tampilan Program Halaman Beranda
Tampilan program pada halaman beranda dapat dilihat pada Gambar 4.

1.

UJIAN AKHIR SEMESTER | SISTEM INFORMASI PENJUALAN ...

6

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
INFORMASI SEMESTER GANJIL, SEPTEMBER 2015 – FEBRUARI 2016

Sumber: Hasil Penelitian (2014)
Gambar 4. Tampilan Halaman Beranda

IV. KESIMPULAN
Kesimpulan berdasarkan penelitian pembuatan web ini
adalah:
1. Aplikasi web merupakan salah satu media yang tepat
untuk memberikan informasi dan pelayanan kepada
pelanggan dan masyarakat.
2. Dengan web kita dapat mengetahui informasi suatu
produk tanpa harus langsung datang ke tempat yang
akan dituju dan akan lebih mempermudah pelanggan
yang sibuk apalagi mereka yang bekerja.

7

Saran yang ingin disampaikan adalah:
1. Lebih mempercantik website agar para pengunjung
menjadi lebih tertarik dan menambahkan fungsi chat
seperti facebook ataupun yahoo messanger agar
mempermudah pemesanan dan penyampaian
informasi.
2. Melakukan update web secara rutin serta
memberikan kemudahan bagi para pengunjung dalam
mengakses web atau melakukan transaksi, karena
banyak perusahaan yang memasarkan produknya
melalui media internet.

PERANCANGAN SISTEM INFORMASI ... | UJIAN AKHIR SEMESTER

TUGAS
ARTIKEL ILMIAH
PERANCANGAN SISTEM
SEMESTER GENAP, MARET – AGUSTUS 2015 INFORMASI

[1]
[2]

[3]

[4]
[5]
[6]
[7]

[8]

[9]

REFERENSI
Binanto, Iwan. 2010. Multimedia Digital Dasar Teori
dan Pengembangannya. Yogyakarta: Andi Offset
Madcoms. 2013. Kupas Tuntas Adobe Dreamweaver
Dengan Pemrograman PHP dan MySQL CS6.
Yogyakarta: Andi Offset
Oktavian, Diar Puji. 2013. Membuat Website Powerfull
Menggunakan PHP. Cetakan Pertama. Yogyakarta:
Mediakom.
Sibero, Alexander F.K. 2013. Web Programming Power
Pack. Cetakan Pertama. Yogyakarta: Mediakom.
Simarmata, Janner. 2010. Rekayasa Web. Yogyakarta:
Andi Offset
Simarmata, Janner dan Iman Paryudi. 2006. Basis Data.
Yogyakarta: Andi Offset
Sukamto, Rossa Ariani dan M.Shalahudin. 2013.
Rekayasa Perangkat Lunak Terstruktur dan Berorientasi
Objek. Bandung: Informatika
Sukarno, Mohamad. 2006. Membangun Website
Dinamis dan Interaksi dengan PHP- MySQL. Jakarta:
Eska Media Press.
Sunarto, Andi. 2009. Seluk Beluk Ecommerce
Yogyakarta: Graha Ilmu
Wulandari T., Lestari. 2011. Desain dan Perancangan
Sistem Informasi Akademik Pada STMIK U’BUDIYAH
INDONESIA Banda Aceh. Halaman: 15-16 Diambil
dari : http://ejournal.uui.ac.id/jurnal-J00070.html.(1 Juni
2014)

YANG MEMBUAT RESUME ARTIKEL ILMIAH
Nama Mahasiswa: Juniardi Dermawan
NIM : 11151060
Kelas: 11.7E.11
Kampus: STMIK Nusa Mandiri Jakarta. Kampus
Bekasi.

Dosen: Herlawati, S.Si, MM, M.Kom
Mata Kuliah: Metode Penelitian

UJIAN AKHIR SEMESTER | SISTEM INFORMASI PENJUALAN ...

8