SISTEM INFORMASI

PEMESANAN DAN TUTORIAL HIJAB PADA HIJAB BUTIK

BERBASIS WEB DENGAN HTML5

TUGAS AKHIR

Oleh :
NIM : 110020019
NAMA : NUR AINI YOLINDA
JENJANG STUDI : DIPLOMA TIGA (D3)
PROGRAM STUDI : MANAJEMEN INFORMATIKA

SEKOLAH TINGGI
MANAJEMEN INFORMATIKA DAN TEKNIK KOMPUTER
(STMIK) STIKOM BALI
2015
 SISTEM INFORMASI
PEMESANAN DAN TUTORIAL HIJAB PADA HIJAB BUTIK
BERBASIS WEB DENGAN HTML5

TUGAS AKHIR

DIAJUKAN SEBAGAI SALAH SATU SYARAT UNTUK MENCAPAI

GELAR AHLI MADYA PROGRAMSTUDI MANAJEMEN INFORMATIKA

Oleh :
NIM : 110020019
NAMA : NUR AINI YOLINDA
JENJANG STUDI : DIPLOMA TIGA (D3)
PROGRAM STUDI : MANAJEMEN INFORMATIKA

SEKOLAH TINGGI
MANAJEMEN INFORMATIKA DAN TEKNIK KOMPUTER
(STMIK) STIKOM BALI
2015
 DAFTAR ISI

DAFTAR ISI ......................................................................................................... i

BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar Belakang ...................................................................................... 1
1.2 Rumusan Masalah ................................................................................. 2
1.3 Tujuan Perekayasaan ............................................................................ 2
1.4 Manfaat Sistem...................................................................................... 2
1.5 Ruang Lingkup Sistem........................................................................... 2
1.6 Metodologi Pengembangan Sistem ....................................................... 4
BAB II TINJAUAN PUSTAKA ............................................................................. 7
2.1. Konsep Dasar Sistem ............................................................................ 7
2.1.1 Pengertian Sistem .......................................................................... 7
2.1.2 Karakteristik Sistem ........................................................................ 7
2.2. Konsep Dasar Informasi ........................................................................ 8
2.2.1 Data dan Informasi ......................................................................... 8
2.2.2 Nilai Informasi ................................................................................. 8
2.2.3 Kualitas Informasi ........................................................................... 9
2.3. Sistem Informasi .................................................................................... 9
2.3.1 Pengertian Sistem Informasi ........................................................... 9
2.3.2 Komponen Sistem Informasi ........................................................... 9
2.4. Penjualan ............................................................................................ 10
2.5. Electroniccommerce ............................................................................ 11
2.6. Pemrograman Berbasis Web ............................................................... 11
2.7. PHP ..................................................................................................... 11
2.8. CSS ..................................................................................................... 12
2.9. Javascript ............................................................................................ 12
2.10. Adobe Dreamweaver CS 5............................................................... 13
2.11. Xampp ............................................................................................. 13
2.12. Web Server Apache ......................................................................... 13
2.13. Database MySQL ............................................................................. 14
2.14. Konseptual Database ....................................................................... 14
2.15. Flowchart ......................................................................................... 15
2.16. Data Flow Diagram (DFD) ................................................................ 16
2.17. Entity Relationship Diagram (ERD) .................................................. 17
2.18. Design Interface ............................................................................... 19
2.19. Metode Blackbox.............................................................................. 20
2.20. HTML5 ............................................................................................. 21
BAB III ANALISA DAN PERANCANGAN SISTEM .......................................... 22
3.1 Flowchart Sistem ................................................................................. 22
3.1.1 Flowchart Login Sistem ................................................................ 22
3.1.2 Flowchart Registrasi ..................................................................... 23
3.1.3 Flowchart Proses Pesan Barang .................................................. 24
3.1.4 Flowchart Member Konfirmasi Pesanan ....................................... 25
3.1.5 Flowchart Edit Profil ...................................................................... 26
3.1.6 Flowchart Admin Konfirmasi Pesanan .......................................... 27
3.1.7 Flowchart Tambah Kategori .......................................................... 28
3.1.8 Flowchart Edit Kategori................................................................. 29
3.1.9 Flowchart Delete Kategori ............................................................ 30
3.1.10 Flowchart Tambah Produk ............................................................ 31

i
 3.1.11 Flowchart Edit Produk................................................................... 32
3.1.12 Flowchart Delete Produk .............................................................. 33
3.1.13 Flowchart Tambah Pengiriman ..................................................... 34
3.1.14 Flowchart Edit Pengiriman ............................................................ 35
3.1.15 Flowchart Delete Pengiriman ........................................................ 36
3.1.16 Flowchart Edit Member ................................................................. 37
3.1.17 Flowchart Delete Member ............................................................. 38
3.1.18 Flowchart Tambah Video .............................................................. 39
3.1.19 Flowchart Delete Video................................................................. 40
3.2 Data Flow Diagram (DFD) Konteks...................................................... 41
3.2.1 Data Flow Diagram (DFD) Level 0 ................................................ 42
3.2.2 Data Flow Diagram (DFD) Level 1 Transaksi Pesanan ................. 43
3.2.3 Data Flow Diagram (DFD) Level 1 Kelola Data Master ................ 44
3.2.4 Data Flow Diagram (DFD) Level 2 Proses P4.1 Kelola Kategori .. 45
3.2.5 Data Flow Diagram (DFD) Level 2 Proses P4.2 Kelola Produk ..... 46
3.2.6 Data Flow Diagram (DFD) Level 2 Proses P4.3 Kelola Pengiriman ..
..................................................................................................... 47
3.2.7 Data Flow Diagram (DFD) Level 2 Proses P4.4 Kelola Member ... 48
3.2.8 Data Flow Diagram (DFD) Level 2 Proses P1.5 Kelola Video ....... 49
3.3 Entitiy Relationship Diagram (ERD) ..................................................... 50
3.4 Konseptual Database Sistem............................................................... 51
3.5 Struktur TabelSistem ........................................................................... 51
3.5.1 Struktur data Tabel Akun .............................................................. 51
3.5.2 Struktur data Tabel Barang ........................................................... 52
3.5.3 Struktur data Tabel Chart ............................................................. 52
3.5.4 Struktur data Tabel Daftar_pesanan ............................................. 53
3.5.5 Struktur data Tabel Pesanan ........................................................ 53
3.5.6 Struktur data Tabel Member ......................................................... 54
3.5.7 Struktur data Tabel Kategori ......................................................... 54
3.5.8 Struktur data Tabel Ongkir ............................................................ 55
3.5.9 Struktur data Tabel Video ............................................................. 55
DAFTAR PUSTAKA .......................................................................................... 56

ii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Zaman semakin berkembang dengan pesat diikuti dengan sektor
perekonomian yang semakin berkembang pesat pula. Sektor perekonomian tentu
tidak lepas dari peranan perusahaan, baik usaha besar, usaha menengah
maupun usaha kecil dalam melakukan proses jual beli suatu produk yang
sekarang ini mulai banyak berkembang di kalangan masyarakat. Seperti usaha
penjualan busana muslim.
Perkembangan dunia fashion terutama baju muslim sangat berkembang
pesat. Baju muslim yang awalnya memiliki model sederhana kini diproduksi
dengan model yang lebih indah dan modis. Keinginan berbusana muslim yang
mulai diminati menjadi pendorong utama. Sehingga hal ini mendorong
banyaknya usaha yang menjual busana muslim seperti butik hijab. banyaknya
peminat busana muslim menjadikan meningkatnya pesanan yang ditangani oleh
suatu butik hijab. Karena itu tingkat pelayanan penjualan juga harus cepat dan
maksimal. Selain itu disamping menjual produk busana muslim akan lebih baik
juga terdapat panduan untuk lebih memperkenalkan kepada konsumen
bagaimana berhijab yang baik dan benar. Oleh karena itu dirasa perlu membuat
sebuah sistem informasi yang bersifat simpel dan mobile seperti website yang
diharapkan dapat meningkatkan penjualan busana muslim juga memberikan
informasi berupa video tutorial berhijab. Dalam proses penjualan dan pembelian
suatu barang tersebut ada sebuah sistem yang mengatur agar semua transaksi
dapat berjalan dengan lancar dimana sistem tersebut nantinya akan
menghasilkan suatu informasi yang dapat digunakan oleh butik untuk mengambil
keputusan.
Dengan sistem ini di harapkan dapat membantu memecahkan
permasalahan yang dihadapinya. Sehingga dengan mempercepat proses
pengolahan datanya diharapkan sistem ini dapat membantu usaha butik hijab
mepercepat dalam proses penjualan dan memberikan informasi tentang berhijab
sehingga mencapai hasil yang maksimal yang ditargetkan.

1
 2

1.2 Rumusan Masalah

Berdasarkan latar belakang masalah yang telah dikemukakan, maka
secara umum masalah dalam hal ini dirumuskan sebagai berikut:
1 Bagaimana merancang sistem informasi pemesanan dan tutorial hijab
pada hijab butik berbasis web ?
2 Bagaimana merekayasa sistem informasi pemesanan dan tutorial hijab
pada hijab butik berbasis web ?
3 Bagaimanan menerapkan teknologi HTML5 pada sistem untuk
mendukung output berupa video ?

1.3 Tujuan Perekayasaan

1 Bertujuan untuk merancang sistem informasi pemesanan dan tutorial
hijab pada hijab butik berbasis web.
2 Juga bertujuan untuk membangun sistem informasi pemesanan dan
tutorial hijab pada hijab butik berbasis web.
3 Menerapkan teknologi HTML5 pada sistem informasi pemesanan dan
tutorial hijab pada hijab butik berbasis web.

1.4 Manfaat Sistem

Adapun manfaat dan pembuatan sistem informasi ini adalah sebagai
berikut:
1. Mempercepat proses pengolahan data di bagian pemesanan.
2. Memberikan informasi yang cepat dan akurat kepada customer baik
tentang pakaian dalam berhijab juga informasi tentang cara berhijab.
3. Memberikan kemudahan dalam proses memesan dan mendapatkan
informasi karena mampu diakses dimanapun dan kapanpun.

1.5 Ruang Lingkup Sistem

Mengingat begitu luasnya permasalahan yang ada serta keterbatasan
pengetahuan yang dimiliki penulis, maka dirasa perlu untuk membatasi ruang
lingkup permasalahan ini sebagai berikut :
1. Proses yang dapat dilakukan dalam sistem ini adalah proses pemesanan
hijab.
2. Sistem ini juga menampilkan informasi berupa detail mengenai tutorial
bagaiman cara berhijab.
 3

3. Pada sistem ini terdapat 3 pengguna yaitu, Pengunjung, Member, dan

Admin.
4. Pengunjung memiliki aktifitas pada sistem dimana aktifitasnya dibatasi
yaitu hanya mampu melihat informasi-informasi pada sistem dan juga
dapat melakukan registrasi sebagai member baru.
5. Member memiliki aktifitas lebih yaitu selain dapat melihat informasi pada
sistem, member juga dapat melakukan pemesanan produk-produk pada
sistem.
6. Admin sebagai pengguna tertinggi memiliki aktifitas pengelolaan data
master seperti pengelolaan informasi mengenai produk-produk, informasi
mengenai tutorial hijab, data member, dan data pemesanan.
7. Sistem informasi pemesanan dan tutorial hijab pada hijab butik berbasis
web ini memiliki halaman – halaman yakni :
a) Home
Ini adalah halaman utama pada web Rainbow Toys. Pada halaman ini
terdapat daftar produk.
b) Products
Ini adalah halaman dimana terdapat macam-macam produk yang
tersedia, detile product, dan sampai kesediaan produk.
c) Contact us
Ini adalah halaman berisi kontak mengenai tempat usaha yang bisa
dihubungi.
d) Register
Di halaman ini disajikan form registrasi untuk menjadi member agar dapat
melakukan pemesanan secara online. Data yang di inputkan adalah
username, password, nama lengkap, kota, jenis kelamin, no tlp, e-mail,
dan alamat lengkap.
e) Login
Halaman ini digunakan untuk login kedalam sistem jika telah memiliki
account member yang terdaftar.
f) Halaman profil
Halaman ini berisi tentang profil dari member, disinilah juga dapat update
data diri member.
g) Halaman kategori barang
 4

Pada halaman ini terdapat kategori – kategori produk yang digunakan

untuk mengelompokan barang – barang sesuai kategori.
h) Halaman pemesanan
Pada halaman ini dapat melakukan pemesanan item yang akan dipesan
dengan cara memilih item produk yang akan dipesan serta jumlah yang
diinginkan dan kemudian pesanan akan masuk kedalam keranjang
belanja.
i) Halaman konfirmasi pemesanan
setelah selesai melakukan pemesanan item produk pada halaman
pemesanan, kemudian akan masuk kehalaman konfirmasi pemesanan,
dihalaman ini pembeli wajib mengisi data kota tujuan barang yang akan
dipesan dan input kan no rekening yang akan dituju pada saat melakukan
pembayaran.
j) Halaman konfirmasi pembayaran
Pada halaman ini dapat melakukan konfirmasi pembayaran apabila sudah
melakukan pembayaran, data yang di input kan adalah no rekening dari
tempat usaha yang sebelumnya telah dicantumkan dan memilih Id
member pesan yang akan dilunasi. Id pesan disini adalah Id pemesanan
yang dilakukan oleh member.
8. Bahasa pemrograman yang digunakan adalah PHP dan Database yang
digunakan adalah MySQL.
9. Borwser yang digunakan untuk menguji kemampuan HTML5 pada sistem
yaitu Mozila Firefox 3.0 keatas.

1.6 Metodologi Pengembangan Sistem

Pada pengembangan sistem ini penulis menggunakan metode
pengembangan waterfall sebagai salah satu software development, karena
metode ini merupakan metode yang sering digunakan oleh penganalisa sistem
pada umumnya.
 5

PERENCANAAN
SISTEM

ANALISIS
SISTEM

PERANCANGAN
SISTEM

PENGEMBANGAN
SISTEM

PENGUJIAN
SISTEM

Gambar 1. 1 Tahapan Model Perekayasaan Sistem

1. Tahap perencanaan (Planning)

Pada tahap ini terdapat beberapa langkah penting dalam pengembangan
sistem ini, antara lain :
a. Identifikasi masalah, yaitu melakukan identifikasi terhadap masalah pada
sistem penjualan yang sedang berjalan.
b. Lingkup sistem, yaitu menentukan ruang lingkup atau batasan sistem
yang akan dibuat.
c. Tujuan, yaitu menentukan untuk apa sistem dibuat dan diperuntukan
untuk siapa saja.
d. Jadwal, yaitu menentukan alokasi waktu pengembangan sistem secara
keseluruhan langkah demi langkah dimulai dari tahap perencanaan
(Planning) sampai tahapan testing.
2. Tahapan Analisis (Analysis)
Pada tahap ini akan diuraikan analisa dari sistem atau proses bisnis
penjualan yang sudah berjalan, untuk kemudian menyimpulkan hasil
analisa dan mengidentifikasikan solusi untuk mengembangkan sistem
informasi penjualan.
3. Tahap Perancangan (Design)
 6

Tahap ini dikerjakan apabila tahap analisis sistem telah terpenuhi.

Kegiatan-kegiatan pada tahap perancangan antara lain :
a. Menyusun desain tampilan antarmuka dengan menentukan menu-menu,
form-form dan tampilan lainnya yang perlu dibuat.
b. Merancang desain web yang dinamis untuk mempermudah pengelolaan
terhadap sistem nantinya.
c. Merancang database yang nantinya akan digunakan sistem untuk
menyimpan ataupun mengelola data-data.
4. Tahap Pengembangan (Development/Coding)
Pada tahap ini dilakukan pengembangan sistem dari hasil kegiatan-
kegiatan yang dilakukan pada tahap desain. Kegiatan-kegiatan itu
meliputi :
a. Membuat desain database sesuai desain dan kemudian membuat tabel-
tabel, menentukan relasi dan lain-lain.
b. Menyusun tampilan program sesuai dengan desain yang ditentukan
dengan menghubungkannya ke database yang telah dibuat sebelumnya.
c. Melakukan optimasi untuk memperkecil kemungkinan bug pada sistem
nantinya.
5. Tahap Testing
Pada tahap ini dilakukannya pengujian terhadap sistem. Pengujian
dilakukan dengan menggunakan metode blackbox testing, dimana penulis
melakukan input data dan melihat apakah output-nya sudah sesuai dengan
proses yang diinginkan atau belum. Jika masih ditemukan kesalahan pada hasil
proses sistem maka bisa dilakukan perubahan terhadap rincian logika-logika dan
statement-statement yang salah dan segera memperbaikinya
 BAB II
TINJAUAN PUSTAKA

2.1. Konsep Dasar Sistem

2.1.1 Pengertian Sistem
Definisi sistem berkembang sesuai dengan konteks di mana pengertian
sistem itu digunakan. Berikut ini merupakan beberapa definisi sistem secara
umum :
1. Sistem merupakan kumpulan dari bagian – bagian yang bekerja sama
untuk mencapai tujuan yang sama. Contoh : Sistem Tatasurya, Sistem
Pencernaan, Sistem Transportasi umum, Sistem Otomotif, Sistem
Komputer, dan Sistem Informasi.
2. Sistem merupakan sekumpulan objek – objek yang saling berelasi dan
berinteraksi serta hubungan antar objek bisa dilihat sebagai satu
kesatuan yang dirancang untuk mencapai satu tujuan[1].
Dengan kata lain secara sederhana sistem dapat diartikan sebagai suatu
kumpulan atau himpunan dari unsur atau variabel – variabel yang saling
terorganisasi, saling berinteraksi, dan saling bergantung satu sama lain.

2.1.2 Karakteristik Sistem

Untuk memahami atau mengembangkan sistem perlu pemahaman lebih
lanjut mengenai sistem berikut unsur – unsur pembentuk sistem. Berikut
merupakan karakteristik sistem :
1. Batasan (boundary) adalah penggambaran dari suatu elemen atau unsur
yang termasuk di dalam sistem dan mana yang berada di luar sistem.
2. Lingkungan (environment) adalah segala sesuatu di luar sistem,
lingkungan yang menyediakan asumsi, kendala, dan input terhadap suatu
sistem.
3. Masukan (input) adalah sumber daya (data, bahan baku, peralatan,
energi) dari lingkungan yang dikonsumsi dan dimanipulasi oleh suatu
sistem.

7
 8

4. Keluaran (output) adalah sumber daya atau produk (informasi, laporan,

dokumen, tampilan layer komputer, barang jadi) yang disediakan untuk
lingkungan sistem oleh kegiatan dalam suatu sistem
5. Komponen (component) adalah kegiatan – kegiatan atau proses dalam
suatu sistem yang mentransformasikan input menjadi bentuk setengah
jadi (output). Komponen ini bisa merupakan subsistem dari sebuah
sistem.
6. Penghubung (interface) adalah tempat di mana komponen atau sistem
dan lingkungannya bertemu atau berinteraksi.
7. Penyimpanan (storage) adalah area yang dikuasai dan digunakan untuk
penyimpanan sementara dan tetap dari informasi, energi, bahan baku,
dan sebagainya. Pemnyimpanan merupakan suatu media penyangga di
antara komponen tersebut bekerja dengan berbagai tingkatan yang ada
dan memungkinkan komponen yang berbeda dari berbagai data yang
sama[1].

2.2. Konsep Dasar Informasi

2.2.1 Data dan Informasi
Bahan baku informasi adalah data, data diidentifikasikan sebagai
kelompok teratur dari simbol – simbol yang mewakili kuantitas, benda, tindakan,
dan sebagainya. Data terbentuk dari karakter, dapat berupa alphabet, angka,
maupun symbol khusus . Informasi merupakan hasil dari pengolahan data ke
dalam bentuk yang lebih berguna bagi penerimanya yang menggambarkan suatu
kejadian – kejadian nyata dan dapat digunakan sebagai alat bantu untuk
pengambilan suatu keputusan [2].

2.2.2 Nilai Informasi

Nilai informasi dibutuhkan untuk hal yang berhubungan dengan
keputusan, dari sebuah kebutuhan untuk sebuah pilihan atau keputusan inilah
informasi diperlukan. Nilai dari sebuah informasi dapat diukur dan ditentukan dari
manfaat yang didapat dari informasi itu sendiri serta biaya yang dikeluarkan
untuk mendapatkan informasi. Informasi yang bernilai dan efektif adalah
informasi yang memberikan manfaat lebih besar disbanding dengan biaya yang
dikeluarkan untuk mendapatkan informasi tersebut.
 9

2.2.3 Kualitas Informasi

Informasi dapat dinilai dari kualitas informasi itu sendiri, kualitas informasi
dapat dipengaruhi oleh 3 hal yaitu [2]:
1. Relevansi
Informasi dikatakan berkualitas jika relevan bagi penerima atau
pemakainya.Relevansi informasi untuktiap – tiap orang satu dengan yang
lainnya berbeda.
2. Akurasi
Sebuah informasi bisadikatakan akurat jika informasi tersebut tidak
menyesatkan, bebas dari kesalahan – kesalahan dan harus jelas
mencerminkan maksud yang terkandung di dalamnya.Ketidak akuratan
sebuah informasi dapat terjadi karena sumber informasi mengalami
gangguan atau ke sengajaan sehingga dapat merusak data – data yang
asli.
3. Tepat Waktu
Informasi yang dihasilkan dari suatu pemrosesan atau pengolahan data,
datangnya tidak boleh terlambat. Informasi yang terlambat tidak akan
mempunyai nilai yang baik, sehingga kalau digunakan sebagai dasar
pengambilan keputusan dapat menimbulkan kesalahan dalam tindakan
yang akan diambil.

2.3. Sistem Informasi

2.3.1 Pengertian Sistem Informasi
Sistem informasi adalah sekumpulan komponen pembentuk sistem yang
mempunyai keterkaitan antara satu komponen dengan komponen lainnya yang
bertujuan menghasilkan suatu informasi dalam suatu bidang tertentu. Dalam
sistem informasi diperlukannya klasifikasi alur informasi, hal ini disebabkan
keanekaragaman kebutuhan akan suatu informasi oleh pengguna informasi.
Kriteria dari sistem informasi antara lain, fleksibel, efektif dan efisien [3].

2.3.2 Komponen Sistem Informasi

Sistem informasi terdiri dari komponen – komponen yang disebut dengan
istilah blok bangunan (building block), antara lain blok masukan (input block),
blok model (model block), blok keluaran (output block), blok teknologi(technology
block), blok database (database block) dan blok kendali (control block). Keenam
 10

blok tersebut saling berinteraksi satu sama lain dan membentuk satu kesatuan
untuk mencapai sasarannya[1].
1 Blok Masukan
Input mewakili data yang masuk ke dalam sistem informasi. Input disini
termasuk metode- metode dan media untuk menangkap data yang akan
dimasukan yang dapat berupa dokumen - dokumen dasar.
2 Blok Model
Blok ini terdiri dari kombinasi prosedur, logika,dan model matematika
yang akan memanipulasi data input dan data yang tersimpan di basis
data dengan cara tertentu untuk menghasilkan keluaran yang diinginkan
3 Blok Keluaran
Produk dari sistem informasi adalah keluaran yang merupakan informasi
yang berkualitas dan dokumentasi yang berguna untuk semua tingkat
manajemen serta semua pemakai sistem.
4 Blok Teknologi
Teknologi merupakan kotak alat (tool-box) dalam sistem informasi.
Tekologi digunakan untuk menerima input,menjalakan model, menyimpan
dan mengakses data, menghasilkan sekaligus mengirimkan keluaran dan
membantu pengendalian dari sistem secara keseluruhan.
5 Blok Database
Database merupakan kumpulan dari data yang saling berhubungan satu
dengan yang lainnya, tersimpandi perangkat lunak untuk
memanipulasinya.
6 BlokKendali
Pengendalian perlu dirancang dan diterapkan untuk menyakinkan bahwa
hal – hal yang dapat merusak sistem dapat dicegah ataupun bila terlanjur
terjadi kesalahan - kesalahan dapat langsung cepat diatasi.

2.4. Penjualan
Penjualan merupakan pembelian sesuatu (barang atau jasa) dari suatu
pihak kepada pihak lainnya dengan mendapatkan ganti uang dari pihak
tersebut.Penjualan juga merupakan suatu sumber pendapatan perusahaan,
semakin besar penjualan maka semakin besar pula pendapatan yang diperoleh
perusahaan.
 11

2.5. Electroniccommerce
E- Commerce adalah kepanjangan dari Electronic Commerce, yaitu
perdagangan dengan menggunakan fasilitas elektronik (internet)
[4].Perdagangan elektronik baik barang maupun jasa dilakukan melalui fasilitas
jaringan informasi internet.

2.6. Pemrograman Berbasis Web

Untuk membangun sebuah situs web diperlukan script/kode
pemrograman berbasis web salah satunya adalah HTML. HTML adalah
kependekan dari Hyper Text Markup Language.Fasilitas Hypertext merupakan
metode yang menautkan (link) satu dokumen ke dokumen lain melalui suatu text.
HTML merupakan halaman yang berada pada suatu situs Internet atau Web.Jadi
suatu situs terdiri atas beberapa halaman HTML atau Web page [5].
HTML dapat disisipkan kode pemrograman seperti ASP, PHP, CGI
(Common Gateway Interface), JSP (Java Server Page). Dengan kode ini, web
yang tadinya bersifat statis dimungkinkan dapat berubah menjadi dinamis.Semua
kode pemrograman yang disisipkan pada HTML tersebut pada dasarnya
merupakan server-side script yaitu kode pemrograman yang dijalankan untuk
menangani pengolahan basis data, tampilan halaman web dan proses-proses
yang sifatnya rahasia.Sedangkan pada sisi client, kode yang banyak digunakan
saat ini misalnya JavaScript dan VbScript, biasanya pemrograman pada sisi
client digunakan untuk validasi masukkan, tampilan halaman web, animasi dan
lain-lainnya.

2.7. PHP
PHP (hypertext preprocessor)merupakan suatu bahasa pemrograman
yang berbasis pada kode – kode ( script) yang digunakan untuk mengolah suatu
data dan mengirimkannya kembali ke web browser menjadi kode HTML, kode
PHP memiliki ciri – ciri khusus, yaitu [6]:
1. Hanya dapat dijalankan menggunakan web server, contoh : Apache.
2. Kode PHP diletakan dan dijalankan di web server.
3. Kode PHP dapat digunakan untuk mengakses database, seperti :
MySQL, PostgreSQL, Oracle, dan lain – lain.
4. Merupakan software yang bersifat open source.
5. Gratis untuk didownload dan digunakan.
 12

6. Memiliki sifat multiplatform, artinya dapat dijalankan menggunakan

sistem operasi apapun, seperti : Linux, Unix, Windows, dan lain – lain.
Dengan menggunakan PHP, selain memberikan keuntungan seperti pada
beberapa poin di atas, juga didukung oleh banyak komunitas.

2.8. CSS
CSS (Cascading style sheet) adalah suatu bahasa yang dikhususkan
untuk mengatur gaya atau layout sebuah halaman web[7]. Pada umumnya CSS
dipakai untuk mendefinisikan format tampilan halaman web yang dibuat dengan
menggunakan bahasa pemrograman HTML dan XHTML.CSS menggunakan
kode – kode untuk format style pada elemen HTML atau bias membuat style baru
yang biasa disebut class.
CSS dapat merubah besar kecilnya text/font, mengganti warna font, atau
dapat pula mengganti warna background pada sebuah halaman HTML,
mengatur border pada tabel, dan masih banyak yang dapat dilakukan dengan
CSS. Untuk menjadikan CSS sebagai rujukan pada halaman HTML hanya
dibutuhkan satu baris kode saja. Jika ingin merubah tampilan atau style pada
websitetidak perlu merubah kode yang terdapat pada file HTMLyang perlu
dilakukan hanya mengganti baris kode yang terdapat pada CSS-nya saja.
Berikut ini adalah beberapa alasan mengapa developerweb
menggunakan CSS untuk memberikan style pada web yang dibuatnya yaitu :
1. CSS dapat memecahkan permasalahanuntuk keragaman style pada
suatu file HTML
2. CSS mempermudah dan meringankan pekerjaan dalam memformat
seluruh file HTML.
3. Multiple style akan tersimpan pada satu dokumen.

2.9. Javascript
Javasript merupakan bahasa scripting yang popular di internet dan dapat
bekerja pada sebagian besar browser seperti Internet explorer (IE), mozila
firefox, netscape dan opera [8]. Javascript dapatdisisipkan pada halaman web
dengan menggunakan tag SCRIPT. Beberapa hal tentang javascript:
1. Javascript merupakan sebuah bahasa scripting.
2. Bahasa scripting merupakan bahasa pemrograman yang ringan.
3. Javascript merupakan baris kode yang dijalankan di web browser.
 13

4. Javascript biasanya disisipkan (embedded) dalam halaman HTML.

5. Javascript merupakan bahasa interpreter (yang berarti skrip diesekusi
tanpa proses kompilasi).
6. Javascript bersifat free dapat digunakan tanpa harus membayar lisensi.

2.10. Adobe Dreamweaver CS 5

Adobe Dreamweaver CS 5 merupakan program editor yang digunakan
untuk mendesain, editing dan mengembangkan web untuk berbagai macam
editor baik html,php,java,css dan lain-lain. Adobe dreamweaver cs 5 merupakan
program keluaran Adobe systems yang banyak digunakan oleh developer atau
pengembang web karena fitur - fitur serta kemudahan yang diberikannya. Selain
itu adobe dreamweaver juga memiliki integrasi dengan program adobe lainya
seperti adobe flash yang digunakan untuk membuat animasi web hal ini sangat
mendukung pengembangan web terutama dari desain.

2.11. Xampp
Xampp adalah sebuah paket software yang di dalamnya terdapat web
server Apache, database MySQL dan PHP intepreter. Xampp berperan sebagai
web server pada komputer.Xampp juga dapat disebut CPanelserver virtual, yang
dapat membantu melakukan preview sehingga dapat membantu untuk
melakukan preview sehingga dapat memodifikasi website tanpa harus online
atau terakses dengan internet[9].
Pada pembuatan sistem informasi peminjaman perangkat jaringan ini
menggunakan software Xampp versi 2.6, dengan digunakannya Xampp dapat
mempermudah proses pembuatan website sistem informasi peminjaman
perangkat jaringan ini dikarenakan semua program pendukung seperti apache
web server, database MySQL sudah terdapat dalam paket instalasi sehingga
tanpa perlu install satu persatu program dan juga proses preview yang sangat
memudahkan untuk proses desain.

2.12. Web Server Apache

Sebelum membahas web server apache perlu diketahui terlebih dahului
yang dimaksud dengan web server, web server merupakan perangkat lunak yang
mengelola (mengatur) permintaan user dari browser dan hasilnya dikembalikan
kembali ke browser [10].
 14

Apache merupakan salah satu web server yang umum digunakan, web
server apache bisa dijalankan pada banyak sistem operasi seperti Unix, Linux,
Solaris, Digital Unix, BeOS, BS2000/OSD, AmigaOS dan windows 2000. Apache
digunakan untuk memperbolehkan computer yang bukan sebagai web server
menjadi web server dan digunakan untuk pembangunan sistem.Web server perlu
dipasang terlebih dahulu sebelum kode PHP dibaca dan diproses.

2.13. Database MySQL

MySQL adalah salah satu software sistem manajemen database (DBMS)
Stuctured Query Language (SQL) yang bersifat open source . SQL adalah
bahasa standar untuk mengakses database dan didefinisikan dengan standar
ANSI/ISO SQL[11]. MySQL mempunyai beberapa sifat antara lain adalah
sebagai berikut :
1. MySQL merupakan DBMS (Database Management System)
2. Database adalah kumpulan data yang terstruktur, agar dapat mengakses
dan mengolah dibutuhkan sistem manajemen database seperti MySQL
server.
3. MySQL merupakan RDBMS (Relational Database Management System)
4. Database relasional menyimpan pada tabel – tabel yang terpisah, halini
menambah kecepatan dan fleksibilitas.
5. MySQL merupakan software open source.
6. MySQL mempunyai performa yang sangat cepat dapat dipercaya dan
mudah digunakan.
7. MySQL mempunyai sejumlah besar software pendukung.

2.14. Konseptual Database

Konseptual Database menggambarkan data apa saja yang disimpan
dalam database dan menjelaskan bagaimana hubungan antar datanya secara
keseluruhan. Misalkan, seorang pengguna dalam level ini dapat mengetahui
bahwa data mahasiswa disimpan pada tabel mahasiswa, tabel krs, tabel
transkrip dan lain sebagainya. Level ini biasa dipakai oleh seorang Database
Administrator.
Dalam membuat suatu database, pengguna harus mengetahui terlebih
dahulu entitas yang terlibat didalamnya. Entitas merupakan objek dalam dunia
nyata yang akan dimodelkan ke dalam database. Setiap entitas dalam database
 15

akan selalu memiliki karakteristik masing-masing yang menyediakan penjelasan

detail tentang entitas tersebut. Karakteristik tersebut disebut dengan atribut. Nilai
dari atribut merupakan informasi yang disimpan dalam data entitas tersebut.
Pembuatan database akan dimplementasikan dalam bentuk pembuatan
tabel. Tabel dibuat berdasarkan entitas dan atribut yang ada. Tabel akan
menyimpan seluruh data dalam database dalam bentuk baris dan kolom. Kolom
sebagai field. Setiap field tersebut disimpan dengan format data sesuai dengan
kelompok data yang akan disimpan apakah tipe data string, integer, date dan
sebagainya. Baris dalam tabel biasa disebut dengan record.

2.15. Flowchart
Flow Chart adalah bagan (chart) yang menunjukan aliran (flow) di dalam
program atau prosedur sistem secara logika, digunakan terutama sebagai alat
bantu komunikasi dan untuk dokumentasi [12].
Dari definisi di atas, Flow Chart dapat didefinisikan sebagai suatu sistem
yang menggambarkan aliran data sehingga dapat diketahui informasi apa saja
yang mengalir dalam suatu sistem kerja secara urut dari awal sampai akhir.
Berikut akan diuraikan simbol-simbol yang digunakan dalam membangun sebuah
Flow Chartdapat dilihat pada tabel 2.1.

Tabel 2. 1 Simbol Flowchart

No Simbol Keterangan
Permulaan/akhir program
1

Terminator
Arah aliran program
2

Garis Alir (flow line)

Prosesperhitungan/proses pengolahan data
3

Proses
Proses input/output data, parameter, informasi.
4

Input/output data
 16

5 Permulaan sub program/proses menjalankan

sub program
Predefined process
6 Perbandingan pernyataan, penyelesaia data
yang memberikan pilihan untuk langkah
Decision selanjutnya
7 Penghubung bagian-bagian flowchart yang
berada pada satu halaman

On page connector
8 Penghubung bagian-bagian flowchart yang
berada pada halaman berbeda
Off page connector

9 Menggambarkan dokumen tertulis tertulis,

seperti DO, invoice, Buku besar.
Document

2.16. Data Flow Diagram (DFD)

Data Flow Diagram (DFD) yaitu salah satu alat dalam perancangan
sistem yang menggunakan simbol-simbol untuk menggambarkan aliran data
melalui serangkaian proses yang saling berhubungan. DFD merupakan alat yang
cukup popular sekarang ini, karena dapat menggambarkan arus data didalam
sistem dengan terstruktur dan jelas.Lebih lanjut DFD juga merupakan
dokumentasi yang baik [13].
Dari beberapa definisi di atas, maka dapat disimpulkan Data Flow
Diagram adalah suatu metode yang digunakan untuk menggambarkan atau
membuat suatu model dari input, output serta proses transformasinya pada suatu
sistem sehingga sistem tersebut mudah dipahami.
Adapun langkah-langkah dalam membuat data flow diagram dibagi
menjadi tiga tahap atau tingkatan, yaitu sebagai berikut.
1. Diagram konteks
Diagram ini dibuat untuk menggambarkan sumber serta tujuan data yang
akan diproses atau dengan kata lain diagram tersebut digunakan untuk
 17

menggambarkan sistem secara umum/global dari keseluruhan sistem

yang ada.
2. Diagram nol
Diagram ini dibuat untuk menggambarkan tahapan proses yang ada
didalam diagram konteks, yang penjabarannya lebih terperinci.
3. Diagram Detail
Diagram ini dibuat untuk menggambarkan arus data secara lebih
mendetail lagi dari tahapan proses yang ada di dalam diagram nol.
Beberapa simbol yang digunakan dalam Data Flow Diagram dapat dilihat
pada tabel 2.2

Tabel 2. 2 Simbol data flow diagram (DFD)

No Simbol Keterangan
Entitas adalah Objek aktif yang mengendalikan
1 aliran data dengan memproduksi serta
mengkonsumsi data.
Entitas
Proses merupakan Sesuatu yang melakukan
2 transformasi terhadap data

Proses
Aliran data menghubungkan keluaran dari suatu
3 objek atau proses yang terjadi pada suatu
masukkan
Aliran Data
Data Store adalah Objek pasif dalam DFD yang
4 menyimpan data untuk penggunaan lebih lanjut.
Data Store

2.17. Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) merupakannotasi grafis dalam
pemodelan data konseptual yang mendeskripsikan hubungan antara
penyimpanan[14]. Pada Entity Relationship Diagram (ERD) terdapat simbol-
simbol dengan himpunan relasi yang masing-masing memiliki atribute untuk
menjelaskan suatu relasi secara keseluruhan atau melakukan aktivitas
permodelan data.
 18

Berikut ini bisa dijabarkan simbol – simbol yang digunakan pada saat
pembuatan Entity Realtionship Diagramdapat dilihat pada tabel 2.3.

Tabel 2. 3 Simbol entity relationship diagram (ERD)

No Simbol Keterangan
Entitas adalah sebuah kesatuan objek lain,
1 setiapentitas dibatasi oleh atribut.

Entitas
Atribut merupakan sifat atau karakteristik dari
2 suatu entitas yang menyediakan penjelasan
secara rinci.
Atribut
Relasi, belah ketupat menyatakan himpunan
3 relasi

Relasi
Garis/Link, sebagai penghubungan antara
4 himpunan relasi dan himpunan entitas dengan
Link atributnya.

ERD memiliki 3 macam kardinalitas relasi yakni sebagai berikut.

1. Satu ke satu (One to one).
Tingkat hubungan satu ke satu merupakan kejadian dimana pada entitas
pertama hanya mempunyai satu hubungan dengan satu kejadian pada
entitas yang kedua ataupun sebaliknya. Contoh gambar satu ke satu bisa
dilihat pada gambar 2.1.

Gambar 2. 1 Kardinalitas Satu ke Satu (One to One)

2. Satu ke banyak (One to many)

Tingkat hubungan satu ke banyak sama artinya dengan banyak ke satu.
Hal itu tergantung dari arah mana hubungan tersebut dilihat. Dalam
 19

tingkat ini merupakan kejadian dimana pada satu kejadian pada entitas
pertama bisa mempunyai banyak hubungan dengan kejadian pada entitas
yang kedua. Sebaliknya satu kejadian pada entitas kedua bisa
mempunyai banyak hubungan dengan kejadian pada entitas yang
pertama. Contoh gambar satu ke banyak bisa dilihat pada gambar 2.2.

Gambar 2. 2 Kardinalitas Satu ke Banyak (One to Many)

3. Banyak ke banyak (Many to many)

Tingkat hubungan banyak ke banyak terjadi jika tiap kejadian pada
sebuah entitas akan mempunyai banyak hubungan dengan kejadian pada
entitas lainnya. Banyak kejadian pada entitas yang pertama dapat
mempunyai banyak hubungan pada kejadian pada entitas kedua.
Sebaliknya Banyak kejadian pada entitas yang kedua dapat mempunyai
banyak hubungan pada kejadian pada entitas pertama. Contoh gambar
banyak ke banyak bisa dilihat pada gambar 2.3.

Gambar 2. 3 Kardinalitas Banyak ke Banyak (Many to Many)

2.18. Design Interface

Desain interface merupakan bagian yang digunakan mesin dan perangkat
lunak, seperti komputer, peralatan rumah, perangkat mobile, dan perangkat
elektronik lainnya, dengan tujuan memaksimalkan pengalaman pengguna.
Tujuan dari Desain interface untuk membuat interaksi pengguna sesederhana
dan seefisien mungkin, dalam hal mencapai keinginan tujuan pengguna (desain
yang berpusat pada pengguna).
Baiknya Desain interface pengguna memberikan kemudahan dalam
menyelesaikan tugas tanpa adanya hal-hal yang tidak diperlukan bagi pengguna.
Desain grafis dan tipografi yang digunakan untuk mendukung tampilan,
mempengaruhi bagaimana pengguna melakukan interaksi tertentu dan
meningkatkan daya tarik estetika desain. estetika desain dapat meningkatkan
atau mengurangi kemampuan pengguna untuk menggunakan fungsi antarmuka.
 20

Proses desain harus menyeimbangkan fungsi teknis dan elemen visual

(misalnya, model mental) untuk menciptakan sebuah sistem yang tidak hanya
operasional tetapi juga dapat digunakan dan beradaptasi dengan perubahan
kebutuhan pengguna.
Desain interface terlibat dalam berbagai proyek dari sistem komputer,
untuk mobil ataupun untuk pesawat komersial. semua proyek ini melibatkan
banyak interaksi manusia dasar yang sama namun juga memerlukan beberapa
keterampilan yang unik dan pengetahuan. Akibatnya, desainer cenderung
mengkhususkan diri dalam jenis tertentu dari proyek dan memiliki keterampilan
berpusat pada keahlian mereka, apakah itu desain perangkat lunak, penelitian
pengguna, desain web, atau desain industri.

2.19. Metode Blackbox

pengujian blackbox adalah pengujian yang didasarkan pada kebutuhan
dan spesifikasi. pengujian blackbox tidak memerlukan pengetahuan tentang jalur
internal struktur, atau implementasi perangkat lunak yang diuji [15].
Klasifikasi blackbox testing mencakup beberapa pengujian, yaitu:
1. Pengujian fungsionalitas (functional testing)
Pada jenis pengujian ini, perangkat lunak diuji untuk persyaratan
fungsionalitas. Pengujian dilakukan dalam bentuk tertulis untuk
memeriksa apakah aplikasi berjalan seperti yang diharapkan. Pengujian
fungsionalitas meliputi seberapa baik sistem melaksanakan fungsinya,
termasuk perintah-perintah pengguna, manipulasi data, pencarian dan
proses bisnis, penggunaan interface, dan integrasi. Pengujian
fungsionalitas juga meliputi permukaan yang jelas dari jenis fungsi-fungsi,
serta operasi back-end (seperti keamanan dan bagaimana meningkatkan
sistem).
2. Pengujian tegangan (stress testing)
Pengujian tegangan berkaitan dengan kualitas aplikasi di dalam
lingkungan. Idenya adalah untuk menciptakan sebuah lingkungan yang
lebih menuntut aplikasi, tidak seperti saat aplikasi dijalankan pada beban
kerja normal.
3. Pengujian beban (load testing)
Pada pengujian beban, aplikasi akan diuji dengan beban berat atau
masukan, seperti yang terjadi pada pengujian situs we, untuk mengetahui
 21

apakah aplikasi/situs gagal atau kinerjanya menurun. Pengujian beban

beroprasi pada tingkat beban standar, biasanya beban tertinggi akan
diberikan ketika sistem dapat menerima dan tetap berfungsi dengan baik.

2.20. HTML5
HTML5 merupakan versi terbaru dari standar dokumen HTML yang ada
dan dikeluaran oleh World Wide Web Consortium (W3C) dan Web Hypertext
Aplication Technology Working Group (WHATWG) pada tahun 2006. Tag-tag
yang telah ada sebelumnya merupakan standar HTML versi 4.01 yang
dikeluarkan pada tahun 1999. Pada versi terbaru ini ada beberapa penambahan
fungsi dan tag yang baru. Penamabahan ini dimaksudkan untuk lebih
mengakomodir teknologi web yang saat ini semakin berkembang dan lebih
menuntut untuk dapat menyajikan konten-konten yang dinamis seperti animasi,
grafik, video, music dan lain sebagainnya. HTML5 juga didesain agar dapat
berjalan lintas platform sehingga dapat dijalankan dari perangkat apapun [16].
Tujuan awal dibuatnya HTML5 adalah :
1. Mengurangi penggunaan plugin external seperti flash plugin.
2. Peningkatan dan kemudahan penanganan eror handling dari versi
sebelumnya.
3. Semakin banyak script yang dapat digantikan dengan tag baru.
4. HTML5 harus dapat berjalan di perangkat manapun.
5. Transparansi proses pengembangan ke public.
6. Fitur-fitur terbaru harus berdasarkan HTML, CSS, DOM dan Javascript.
Untuk menggunakan HTML5 ini cukup simple. Agar browser mengetahui
penggunaan HTML5 yang ingin digunakan maka cukup dengan mendeklarasikan
doctype khusu untuk HTML5 yaitu “<!DOCTYPE html>”.
 BAB III
ANALISA DAN PERANCANGAN SISTEM

Tahap analisis dan perancangan sistem merupakan tahapan awal dalam

merancang sebuah sistem. Untuk membuat sistem yang baru, perlu diadakannya
pengamatan dan analisis terhadap sistem yang lama. Tujuan dari tahapan
analisis ini adalah mendapat suatu rancangan yang memiliki nilai dibandingkan
dengan rencana sebelumnya. Dari hasil analisis sistem maka akan diperoleh
gambaran mengenai sistem yang akan dirancang sesuai dengan kebutuhan
pengguna/user. Untuk mebuat sebuah sistem baru maka perlu dilakukan
pembuatan flowchart , DFD dan ERD terlebih dahulu. Dengan adanya rancangan
ini, nantinya akan memudahkan dalam pembuatan sistem yang baru. Agar
program ini dapat berjalan dengan baik dan tentunya sesuai harapan.

3.1 Flowchart Sistem

Flowchart digunakan untuk mengambarkan alur/kegiatan-kegiatan yang
terjadi dalam suatu sistem, mulai dari awal sampai akhir kegiatan. Berikut ini
merupakan gambaran – gambaran flowchart dari sistem informasi penjualan
furniture pada wisma indah berbasis web. Adapun gambaran alur proses sistem
secara detail diuraikan pada flowchart sebagai berikut :

3.1.1 Flowchart Login Sistem

Menggambarkan alur proses yang digunakan user untuk masuk sebagai
pelanggan atau admin. Berikut ini merupakan alur proses login pada sistem,
flowchart dapat dilihat pada Gambar 3.1.

22
 23

Start

Masuk ke tampilan
utama

Pilih menu Log In

Input
username &
password

Tidak

User &
Password
sesuai?

Ya

Masuk ke tampilan
utama

End

Gambar 3. 1 Flowchart Login Sistem

3.1.2 Flowchart Registrasi

Menggambarkan alur proses yang digunakan pengunjung untuk
mendaftar sebagai member. Berikut ini merupakan alur proses registrasi pada
sistem, flowchart dapat dilihat pada Gambar 3.2.
 24

Start

Tampilan Utama
Sistem

Tampilan
Registrasi

Input data
Registrasi
Tidak

Data Lengkap

Ya

Simpan

Tampilan Utama
Sistem

End

Gambar 3. 2 Flowchart Registrasi

3.1.3 Flowchart Proses Pesan Barang

Menggambarkan alur proses yang digunakan member untuk melakukan
proses pemesanan. flowchart dapat dilihat pada Gambar 3.3.
 25

Start

Pilih barang

Input data
pesanan

Tampilan cart

Input data
qty barang

Tampilan
pengiriman

Input data
pengiriman

Tampilan pilih
bank

Input data
bank

Tampilan review
pesanan

Simpan

End

Gambar 3. 3 Flowchart Prose Pesan Barang

3.1.4 Flowchart Member Konfirmasi Pesanan

Menggambarkan alur proses yang digunakan member untuk
mengkonfirmasi pesanan yang telah di order. Berikut ini merupakan alur proses
konfirmasi pesanan, flowchart dapat dilihat pada Gambar 3.4.
 26

Start

Pilih pesanan

Pilih konfirmasi

Tampilan
konfirmasi

Tidak
Input data
konfirmasi

Data lengkap

Ya

Simpan

End

Gambar 3. 4 Flowchart Member Konfirmasi Pesanan

3.1.5 Flowchart Edit Profil

Menggambarkan alur proses yang digunakan member untuk meng-
update data profil dari member tersebut. Berikut ini merupakan alur proses Edit
profil, flowchart dapat dilihat pada Gambar 3.5.
 27

Start

Pilih profil

Tampilan profil

Pilih edit

Input data
edit profil

Simpan

End

Gambar 3. 5 Flowchart Edit Profil

3.1.6 Flowchart Admin Konfirmasi Pesanan

Menggambarkan alur proses yang digunakan admin untuk
mengkonfirmasi pesanan yang telah dilakukan oleh. Berikut ini merupakan alur
proses admin konfirmasi pesanan pada sistem, flowchart dapat dilihat pada
Gambar 3.6.
 28

Start

Pilih pesanan

Pilih konfirmasi

Input data
konfirmasi

Simpan

End

Gambar 3. 6 Flowchart Admin Konfirmasi Pesanan

3.1.7 Flowchart Tambah Kategori

Menggambarkan alur proses yang digunakan admin untuk melakukan
penambahan kategori pada sistem. Berikut ini merupakan tambah kategori pada
sistem, flowchart dapat dilihat pada Gambar 3.7.
 29

Start

Pilih menu setting

Pilih kategori

Pilih menu tambah

Tampilan tambah
kategori

Input data
kategori

Simpan

End

Gambar 3. 7 Flowchart Tambah Kategori

3.1.8 Flowchart Edit Kategori

Menggambarkan alur proses yang digunakan admin untuk melakukan edit
kategori pada sistem. Berikut ini merupakan edit kategori pada sistem, flowchart
dapat dilihat pada Gambar 3.8.
 30

Start

Pilih menu setting

Pilih kategori

Pilih menu edit

Input data
edit kategori

Simpan

End

Gambar 3. 8 Flowchart Edit Kategori

3.1.9 Flowchart Delete Kategori

Menggambarkan alur proses yang digunakan admin untuk melakukan
delete kategori pada sistem. Berikut ini merupakan delete kategori pada sistem,
flowchart dapat dilihat pada Gambar 3.9.
 31

Start

Pilih menu setting

Pilih kategori

Pilih menu delete

Input
konfirmasi
delete
kategori

Delete kategori

End

Gambar 3. 9 Flowchart Delete Kategori

3.1.10 Flowchart Tambah Produk

Menggambarkan alur proses yang digunakan admin untuk melakukan
penambahan produk pada sistem. Berikut ini merupakan tambah produk pada
sistem, flowchart dapat dilihat pada Gambar 3.10.
 32

Start

Pilih menu setting

Pilih kategori

Pilih detail kategori

Pilih menu tambah

Tampilan tambah
produk

Input data
produk

Simpan

End

Gambar 3. 10 Flowchart Tambah Produk

3.1.11 Flowchart Edit Produk

Menggambarkan alur proses yang digunakan admin untuk melakukan edit
produk pada sistem. Berikut ini merupakan edit produk pada sistem, flowchart
dapat dilihat pada Gambar 3.11.
 33

Start

Pilih menu setting

Pilih kategori

Pilih detail kategori

Pilih produk

Tampilan detail
produk

Pilih edit produk

Input data
edit produk

Simpan

End

Gambar 3. 11 Flowchart Edit Produk

3.1.12 Flowchart Delete Produk

Menggambarkan alur proses yang digunakan admin untuk melakukan
delete produk pada sistem. Berikut ini merupakan delete produk pada sistem,
flowchart dapat dilihat pada Gambar 3.12.
 34

Start

Pilih menu setting

Pilih kategori

Pilih detail kategori

Tampilan produk

Pilih Delete

Input
konfirmasi
delete
produk

Delete produk

End

Gambar 3. 12 Flowchart Delete Produk

3.1.13 Flowchart Tambah Pengiriman

Menggambarkan alur proses yang digunakan admin untuk melakukan
penambahan data pengiriman pada sistem. Berikut ini merupakan tambah data
pengiriman pada sistem, flowchart dapat dilihat pada Gambar 3.13.
 35

Start

Pilih menu setting

Pilih pengiriman

Pilih menu tambah

Tampilan tambah
pengiriman

Input data
pengiriman

Simpan

End

Gambar 3. 13 Flowchart Tambah Data Pengiriman

3.1.14 Flowchart Edit Pengiriman

Menggambarkan alur proses yang digunakan admin untuk melakukan edit
pengiriman pada sistem. Berikut ini merupakan edit pengiriman pada sistem,
flowchart dapat dilihat pada Gambar 3.14.
 36

Start

Pilih menu setting

Pilih pengriman

Pilih menu edit

Input data
edit
pengriman

Simpan

End

Gambar 3. 14 Flowchart Edit Pengiriman

3.1.15 Flowchart Delete Pengiriman

Menggambarkan alur proses yang digunakan admin untuk melakukan
delete pengiriman pada sistem. Berikut ini merupakan delete pengiriman pada
sistem, flowchart dapat dilihat pada Gambar 3.15.
 37

Start

Pilih menu setting

Pilih pengiriman

Pilih menu delete

Input
konfirmasi
delete
pengiriman

Delete pengiriman

End

Gambar 3. 15 Flowchart Delete Pengiriman

3.1.16 Flowchart Edit Member

Menggambarkan alur proses yang digunakan admin untuk melakukan edit
data member pada sistem. Berikut ini merupakan edit member pada sistem,
flowchart dapat dilihat pada Gambar 3.16.
 38

Start

Pilih menu setting

Pilih member

Pilih menu edit

Input data
edit
member

Simpan

End

Gambar 3. 16 Flowchart Edit Member

3.1.17 Flowchart Delete Member

Menggambarkan alur proses yang digunakan admin untuk melakukan
delete data member pada sistem. Berikut ini merupakan delete member pada
sistem, flowchart dapat dilihat pada Gambar 3.17.
 39

Start

Pilih menu setting

Pilih member

Pilih menu delete

Input
konfirmasi
delete
member

Delete member

End

Gambar 3. 17 Flowchart Delete Member

3.1.18 Flowchart Tambah Video

Menggambarkan alur proses yang digunakan admin untuk melakukan
penambahan data video pada sistem. Berikut ini merupakan tambah video pada
sistem, flowchart dapat dilihat pada Gambar 3.18.
 40

Start

Pilih menu setting

Pilih video

Pilih menu tambah

Tampilan tambah
video

Input data
video

Simpan

End

Gambar 3. 18 Flowchart Tambah Video

3.1.19 Flowchart Delete Video

Menggambarkan alur proses yang digunakan admin untuk melakukan
delete data video pada sistem. Berikut ini merupakan delete video pada sistem,
flowchart dapat dilihat pada Gambar 3.19.
 41

Start

Pilih menu setting

Pilih video

Pilih menu delete

Input
konfirmasi
delete
video

Delete video

End

Gambar 3. 19 Flowchart Delete Video

3.2 Data Flow Diagram (DFD) Konteks

Diagram konteks merupakan gambaran paling umum dari sebuah
rancang bangun dari sebuah sistem. Diagram konteks hanya menggambarkan
input-output dari sistem yang akan dibuat. Dalam diagram konteks berikut dapat
dilihat bahwa sistem nantinya akan memiliki beberapa entity yaitu member,
admin dan pengunjung. DFD Konteks dapat dilihat pada gambar 3.20.
 42

Admin

Pengunjung Member

Data_konfirmasi_admin
Info_konfirmasi_admin
Data_konfirmasi_member
Data_kategori
Info_kategori
Data_login

Info_konfirmasi_member
Info_login
Info_video
Data_video
Info_admin
Data_admin

Data_pesanan
Info_member

Info_pesanan
Data_member
Info_pengiriman

Data_member
Info_pengiriman

Info_member
Data_login
Info_produk

Info_login
Data_produk
Info_register
Data_register

P.1
Registrasi

Gambar 3. 20 Diagram Konteks Sistem

3.2.1 Data Flow Diagram (DFD) Level 0

DFD level 0 merupakan penjabaran proses dari DFD konteks sistem.
Dalam DFD level 0, terdapat 3 buah entitas yaitu member, admin, dan
pengunjung serta terdapat 4 buah proses. Selain itu terdapat 9 buah data store.
DFD Level 0 dapat dilihat pada gambar 3.21.
 43

Pengunjung Member Admin

Data_konfirmasi_member
Info_konfirmasi_member

Data_konfirmasi_admin
Info_konfirmasi_admin

Data_kategori

Data_pengiriman
Info_pengiriman

Data_admin
Info_kategori

Data_member
Data_register

Info_member

Info_member
Data_pesanan

Data_produk

Info_admin
Info_register

Data_login
Data_login

Data_video
Info_login

Info_produk
Data_member
Info_login

Info_video
Info_pesanan
P.1 P.2 P.3 P.4
Registrasi Log in Transaksi Pesanan Kelola Data Master

Data_pesanan
Data_pesanan
Data_daftar_pesanan
Data_cart

Data_pengiriman
Data_cart

Data_pengiriman
Data_member

Data_member

Data_member

Data_video
Data_video
Data_member
Data_akun
Data_akun
Data_akun

Data_akun

Data_kategori
Data_kategori
Data_barang
Data_barang

Daftar_
Member Akun Pesanan Chart Kategori Barang Ongkir
pesanan

Video

Gambar 3. 21 DFD Level 0

3.2.2 Data Flow Diagram (DFD) Level 1 Transaksi Pesanan

Dfd level 1 ini merupakan DFD tingkat lanjut dari DFD level 0. Pada level
1 Transaksi pesanan ini dibagi lagi menjadi 3 proses. DFD level 1 transaksi
pesanan dapat dilihat pada gambar 3.22.
 44

Member Admin

Info_konfirmasi_member
Data_konfirmasi_member

Data_konfirmasi_admin
Info_konfirmasi_admin
Data_pesanan
Info_pesanan

P.3.2 P.3.3
P.3.1
Member Admin
Tambah
Konfirmasi Konfirmasi
Pesanan
Pesanan Pesanan
Data_daftar_pesanan

Data_cart

Data_pesanan
Data_cart

Data_pesanan
Data_pesanan
Data_pesanan
Data_pesanan

Daftar_
Chart Pesanan
pesanan

Gambar 3. 22 DFD Level 1 Transaksi Pemesanan

3.2.3 Data Flow Diagram (DFD) Level 1 Kelola Data Master

DFD level 1 ini merupakan DFD tingkat lanjut dari DFD level 0. Pada level
1 kelola data master ini dibagi lagi menjadi 5 proses, dan 6 buah data store. DFD
level 1 kelola data master dapat dilihat pada gambar 3.23.
 45

Member

Data_kategori Data_admin
Info_kategori Info_admin
Admin
Data_produk Data_video
Info_produk Info_video

Data_member
Info_member
Data_pengiriman

Data_member
Info_pengiriman
Info_member
P 4.1 P 4.3 P 4.4 P 4.6
P 4.2 P 4.5
Kelola Kelola Kelola Update user &
Kelola produk Kelola Video
kategori pengiriman member pass admin
Data_kategori

Data_pengiriman
Data_pengiriman

Data_member
Data_member
Data_kategori
Data_kategori

Data_barang
Data_barang

Data_video
Data_video

Data_akun
Data_akun
Data_akun
Data_akun
Kategori Barang ongkir Member Video Akun

Gambar 3. 23 Level 1 Kelola Data Master

3.2.4 Data Flow Diagram (DFD) Level 2 Proses P4.1 Kelola Kategori
DFD ini merupakan hasil dekomposisi dari proses P4.1 kelola kategori
pada DFD level 1. Dalam DFD level 2 proses P4.1 kelola kategori ini melibatkan
2 buah entitas yaitu admin dan member serta terdapat 6 buah proses dan juga
memiliki 6 buah data store. DFD level 2 Proses P4.1 Kelola Kategori dapat dilihat
pada gambar 3.24.
 46

Admin

Data_kategori
Data_kategori

Info_kategori
Info_kategori

Data_kategori
Info_kategori
P 4.1.1 P 4.1.2
P 4.1.2
Tambah Delete
Edit kategori
kategori kategori

Data_kategori
Data_kategori
Data_kategori

Data_kategori
Data_kategori

Data_kategori
Kategori

Gambar 3. 24 DFD Level 2 Proses P1.1 Kelola Kategori

3.2.5 Data Flow Diagram (DFD) Level 2 Proses P4.2 Kelola Produk
DFD ini merupakan hasil dekomposisi dari proses P4.2 kelola produk
pada DFD level 1. Dalam DFD level 2 proses P4.2 kelola produk ini melibatkan
satu buah entitas yaitu admin serta terdapat 3 buah dan juga memiliki 2 buah
data store yaitu barang dan kategori. DFD level 2 Proses P4.2 kelola produk
dapat dilihat pada gambar 3.25.
 47

Admin

Data_produk
Data_produk

Info_produk
Info_produk

Data_produk
Info_produk
P 4.2.1
P 4.2.2 P 4.2.3
Tambah
Edit produk Delete produk
produk

Data_barang
Data_barang

Data_kategori
Data_barang

Data_barang
Data_barang

Data_barang
Data_kategori

Barang

Kategori

Gambar 3. 25 Level 2 Proses P1.2 Kelola Produk

3.2.6 Data Flow Diagram (DFD) Level 2 Proses P4.3 Kelola Pengiriman
DFD ini merupakan hasil dekomposisi dari proses P4.3 kelola pengiriman
kirim pada DFD level 1. Dalam DFD level 2 proses P4.3 kelola pengiriman ini
melibatkan satu buah entitas yaitu admin serta terdapat 3 buah proses dan juga
memiliki satu buah data store yaitu ongkir. DFD level 2 Proses P4.3 Kelola
pengiriman dapat dilihat pada gambar 3.26.
 48

Admin

Data_pengiriman
Data_pengiriman

Info_pengiriman
Info_pengiriman

Data_pengiriman
Info_pengiriman
P 4.3.1 P 4.3.2 P 4.3.3
Tambah Edit Delete
pengiriman pengiriman pengiriman

Data_pengiriman
Data_pengiriman
Data_pengiriman

Data_pengiriman
Data_pengiriman

Data_pengiriman
Ongkir

Gambar 3. 26 DFD Level 2 proses P4.3 Kelola Biaya Pengiriman

3.2.7 Data Flow Diagram (DFD) Level 2 Proses P4.4 Kelola Member
DFD ini merupakan hasil dekomposisi dari proses P4.4 kelola member
pada DFD level 1. Dalam DFD level 2 proses P4.4 kelola member ini melibatkan
dua buah entitas yaitu admin dan member serta terdapat 2 buah dan juga
memiliki 2 buah data store yaitu member dan akun. DFD level 2 Proses P4.4
Kelola member dapat dilihat pada gambar 3.27.
 49

Member

Admin

Data_member
Info_member

Data_member
Data_member

Info_member
Info_member P 4.4.2
P 4.4.1
Delete

Data_akun
Edit member
member

Data_akun
Data_akun
Data_akun

Data_akun
Data_member

Data_akun
Data_member

Data_member
Data_member
Data_member
Data_member

Akun

Member

Gambar 3. 27 Level 1 proses P4.4 Kelola Member

3.2.8 Data Flow Diagram (DFD) Level 2 Proses P1.5 Kelola Video
DFD ini merupakan hasil dekomposisi dari proses P4.5 kelola video pada
DFD level 1. Dalam DFD level 2 proses P4.5 kelola video ini melibatkan satu
entitas yaitu admin serta terdapat 2 buah proses dan juga memiliki satu data
store yaitu video. DFD level 2 Proses P4.5 Kelola video dapat dilihat pada
gambar 3.28.
 50

Admin

Data_video
Data_video

Info_video
Info_video
P 4.5.1 P 4.5.3
Tambah video Delete video

Data_video

Data_video
Data_video

Data_video
Video

Gambar 3. 28 Level 2 proses P1.4 Kelola Video

3.3 Entitiy Relationship Diagram (ERD)

ERD sistem informasi pemesanan dan tutorial hijab pada hijab butik dapat
dilihat pada gambar 3.30 ERD Sistem.

Id_user
kota Biaya
Id_user
No_kategori No_barang Password No_ongkir
No_barang No_chart
Nama_barang
Ongkir
Barang Chart Akun

Harga
Order_by
Level
Gambar Keterangan
Zip_code Id_user

Nm_depan
kota
kategori Order_by Member

provinsi Nm_belakang

No_kategori Nama_kategori alamat panggilan

Hp_tlpn
email

No_pesan Status
List_no Jumlah_transfer
Tgl_pesan

No_Pesan daftar_pesanan pesanan

Id_user Atas_nama
No_barang
Alamat rekening
jumlah harga bank
Kota
konfirmasi
No_ongkir
Propinsi

Gambar 3. 29 ERD Sistem

 51

3.4 Konseptual Database Sistem

Konseptual Database sistem informasi pemesanan dan tutorial hijab pada
hijab butik dapat dilihat pada gambar 3.31 Konseptual Database Sistem.

barang 1 chart Akun

1
N No_barang int(11) PK 1 Id_user varchar(100) PK
No_kategori int(11) FK 1 N No_chat int(11) PK N Password varchar(50)
Nama_barang varchar(100) Id_User varchar
Level varchar(10)
Harga int(11) No_barang int(11) FK
Gambar text
Keterangan text
Order_by int (11)

pesanan
1
No_pesan int(11) PK
Tgl_pesan date
kategori Id_user varchar(100) FK
No_kategori int(11) PK Alamat text
Nama_kategori varchar(100) Propinsi varchar(50)
Order_by int(11) N Kota varchar(50)
No_ongkir int(11 FK
Bank varchar(15)
Konfirmasi varchar(5)
Rekening varchar(20)
Atas_nama varchar(100)
Jumlah_transfer int(11)
Status varchar(15)

member
1
Id_user varchar(100) PK
daftar_pesanan
Nm_depan varchar(50)
Nm_belakang varchar(50)
List_no int(11) PK N Panggilan varchar(50)
No_pesan int(11) FK
No_barang int(11) FK Hp_Tlp varchar(15)
Jumlah int(11) N Email varchar(100)
Harga_pesan int(11) Alamat text
Provinsi varchar(50)
Kota varchar(50)
Zip_kode varchar(10)

ongkir
ongkir
No int(11) PK 1 No_ongkir int(11) PK
Judul varchar(50)
Video varchar(20) Kota varchar(50)
Ext varchar(5) biaya int(11)

Gambar 3. 30 Konseptual Database Sistem

3.5 Struktur TabelSistem

Dalam pembuatan sistem ini, menggunakan sebuah database dengan
nama db_hijabbutik yang terdiri atas 9 tabel yang saling ber-relasi satu sama lain
yaitu akun, barang, chart, daftar_pesanan, kategori, member, pesanan, ongkir
dan video. Masing-masing tabel tersebut memiliki struktur data sebagai berikut :

3.5.1 Struktur data Tabel Akun

Berikut ini merupakan struktur data dari tabel akun
Nama Tabel : akun
Primary Key : id_user
Foreign Key : -
 52

Tabel 3. 1 Struktur Data Tabel Akun

No Nama field Tipe Panjang Keterangan
data
1 Id_user varchar 100 Primary Key
2 Password varchar 50
3 Level varchar 10

3.5.2 Struktur data Tabel Barang

Berikut ini merupakan struktur data dari tabel barang
Nama Tabel : barang
Primary Key : no_barang
Foreign Key : no_kategori

Tabel 3. 2 Struktur Data Tabel Barang

No Nama field Tipe Panjang Keterangan
data
1 No_barang int 11 Primary Key
2 No_kategori int 11 Foreign Key
3 Nama_barang varchar 100
4 Harga int 11
5 Gambar text
6 Keterangan text
7 Order_by int 11

3.5.3 Struktur data Tabel Chart

Berikut ini merupakan struktur data dari tabel chart
Nama Tabel : chart
Primary Key : no_chart
Foreign Key : no_barang

Tabel 3. 3 Struktur Data Tabel Chart

No Nama field Tipe Panjang Keterangan
data
1 No_chart Int 11 Primary Key
 53

2 Id_user varchar 100

3 No_barang Int 11 Foreign Key

3.5.4 Struktur data Tabel Daftar_pesanan

Berikut ini merupakan struktur data dari tabel daftar_pesanan
Nama Tabel : daftar_pesanan
Primary Key : list_no
Foreign Key : no_pesan dan no_barang

Tabel 3. 4 Struktur Data Tabel Daftar_pesanan

No Nama field Tipe Panjang Keterangan
data
1 List_no int 11 Primary Key
2 No_pesan int 11 Foreign Key
3 No_barang int 11 Foreign Key
4 Jumlah int 11
5 Harga_pesan int 11

3.5.5 Struktur data Tabel Pesanan

Berikut ini merupakan struktur data dari tabel pesanan
Nama Tabel : pesanan
Primary Key : no_pesan
Foreign Key : id_user , no_ongkir

Tabel 3. 5 Struktur Data Tabel Pesanan

No Nama field Tipe Panjang Keterangan
data
1 No_pesan int 11 Primary Key
2 Tgl_pesan date 15
3 id_user varchar 100 Foreign Key
4 Alamat text
5 Propinsi varchar 50
6 Kota varchar 50
7 No_ongkir int 11 Foreign Key
 54

8 Bank varchar 15
9 Konfirmasi varchar 5
10 Rekening varchar 20
11 Atas_nama varchar 100
12 Jumlah_transfer int 11
13 status varchar 15

3.5.6 Struktur data Tabel Member

Berikut ini merupakan struktur data dari tabel member
Nama Tabel : member
Primary Key : id_user
Foreign Key : -

Tabel 3. 6 Struktur Data Tabel Member

No Nama field Tipe Panjang Keterangan
data
1 id_user varchar 100 Primary Key
2 Nm_depan varchar 50
3 Nm_belakang varchar 50
4 Panggilan varchar 50
5 Hp_tlp varchar 15
6 Email varchar 100
7 Alamat text
8 Provinsi varchar 50
9 Kota varchar 50
10 Zip_code varchar 10

3.5.7 Struktur data Tabel Kategori

Berikut ini merupakan struktur data dari tabel Kategori
Nama Tabel : kategori
Primary Key : no_kategori
Foreign Key : -
 55

Tabel 3. 7 Struktur Data Tabel Kategori

No Nama field Tipe Panjang Keterangan
data
1 No_kategori Int 11 Primary Key
2 Nama_kategori Varchar 100
3 Order_by Int 20

3.5.8 Struktur data Tabel Ongkir

Berikut ini merupakan struktur data dari tabel ongkir
Nama Tabel : ongkir
Primary Key : no_ongkir
Foreign Key : -

Tabel 3. 8 Struktur Data Tabel Ongkir

No Nama field Tipe Panjang Keterangan
data
1 No_ongkir Int 11 Primary Key
2 Kota Varchar 50
3 Biaya Int 11

3.5.9 Struktur data Tabel Video

Berikut ini merupakan struktur data dari tabel video
Nama Tabel : video
Primary Key : no
Foreign Key : -

Tabel 3. 9 Struktur Data Tabel Video

No Nama field Tipe Panjang Keterangan
data
1 No Int 11 Primary Key
2 Judul Varchar 50
3 Video Varchar 20
4 Ext Varchar 5
 DAFTAR PUSTAKA

[1] Alfatta, Hanif. Analisa dan Perancangan Sistem Informasi untuk

Keunggulan Bersaing Perusahaan dan Organisasi modern. Yogyakarta :
Andi ; 2007

[2] Wahyu,Teguh.Sistem Inforasi Konsep Dasar, Analisis Desain dan

Implementasi. Yogyakarta : Graha Ilmu; 2004.

[3] Yuhefizar. 10 Ja Menguasai Internet Teknologi dan Aplikasinya . Jakarta :

PT Elex Media Komputindo ; 2008.

[4] Sarwono J. Metode Riset Online : Teori,Praktek, dan Pembuatan Aplikasi

(Menggunakan HTML, PHP, dan CSS). Jakarta . Elex Media Komputindo.
2012.

[5] Anhar,ST. Panduan Menguasai PHP dan MySQL Secara Otodidak.

Jakarta : Media Kita ; 2010.

[6] Supriyanto, A. Web dengan HTML dan XML. Yokyakarta. Graha Ilmu.
2007.

[7] Panduan Praktis Menguasai Pemprograman Web dengan Java

Script,Yogyakarta; 2010.

[8] MADCOMS. Aplikasi Web Database dengan Dreamweaver dan PHP –

MySQL. Yogyakarta. ANDI. 2011.

[9] Wibowo,Angga. 16 Aplikasi PHP Gratis untuk Pengembangan Situs Web.

Yogyakarta. Andi. 2007.

[10] Albert R, Roberts dan Gilbert J. Buku Pintar Pekerja Sosial, Jilid 2.
Jakarta. BPK Gunung Mulia; 2009.

[11] Marimin, Tanjung H, Prabowo, Haryo. Sistem Informasi Manajemen

Sumber Daya Manusia . Jakarta : Grasindo ; 2006.

[12] Fatta . H.A . Rekayasa Sistem Pengenalan Wajah . Yogyakarta : C.V Andi
Offset ; 2009.

56