PERANCANGAN SISTEM INFORMASI PENJUALAN

BERBASIS WEB PADA

NURATIH FASHION

SKRIPSI

Disusun Guna Melengkapi Salah Satu Syarat

Dalam Program Studi Strata Satu (S1) Teknik Informatika

YULI PRASETYO
311410289

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI TEKNOLOGI PELITA BANGSA
BEKASI
2018

i
 LEMBAR PENGESAHAN

SKRIPSI

PERANCANGAN SISTEM INFORMASI PENJUALAN BERBASIS WEB

PADA NURATIH FASHION

Yang disusun oleh

YULI PRASETYO
NIM: 311410289

Telah dipertahankan di depan Dewan Penguji Pada tanggal 15 November 2018

Susunan Dewan Penguji

Dosen Penguji 1 Dosen Penguji 2

Ir. Nanang Tedi K., MT Adi Rusdi W. S.T., MT

NIDN : 0427075905 NIDN : 0415096901

Mengetahui
Kaprodi Teknik Informatika

Aswan Supriyadi Sunge, S.E, M.Kom

NIDN : 0426018003

Ketua STT Pelita Bangsa

Dr. Ir. Supriyanto, M.P

NIDN : 0401066605

iii
 LEMBAR PERNYATAAN PERSETUJUAN

PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Yang bertanda tangan di bawah ini, saya mahasiswa Kampus Pelita Bangsa :

Nama : Yuli Prasetyo

NIM : 311410289

Program pendidikan : Strata Satu (S1)

Program Studi : Teknik Informatika

Demi pengembangan ilmu pengetahuan, saya memberikan kepada

Perpustakaan Kampus Pelita Bangsa karya ilmiah saya yang berjudul :
“PERANCANGAN SISTEM INFORMASI PENJUALAN BERBASIS WEB
PADA NURATIH FASHION”. Dengan demikian saya memberikan kepada
Perpustakaan Kampus Pelita Bangsa hak untuk menyimpan, me-ngalihkan dalam
bentuk media lain, mengelolanya dalam bentuk pangkalan data, mendistribusikan
secara terbatas, dan mempublikasikannya di Internet atau media lain untuk
kepentingan akademis tanpa perlu meminta ijin dari saya maupun memberikan
royalti kepada saya selama tetap mencantumkan nama saya sebagai penulis.

Demikian pernyataan ini yang saya buat dengan sebenarnya.

Bekasi, 14 November 2018

Yang menyatakan

( Yuli Prasetyo )

v
 HALAMAN PERSEMBAHAN

Ya Allah,
Waktu yang sudah kujalani dengan jalan hidup yang sudah menjadi takdirku,
sedih, bahagia, dan bertemu orang-orang yang memberiku sejuta pengalaman
bagiku, yang telah memberi warna-warni kehidupanku. Kubersujud dihadapan
Mu,
Engaku berikan aku kesempatan untuk bisa sampai
Di penghujung awal perjuanganku
Segala Puji bagi Mu ya Allah,

Alhamdulillah..Alhamdulillah..Alhamdulillahirobbil’alamin..
Sujud syukurku kusembahkan kepadamu Tuhan yang Maha Agung nan
Maha Tinggi nan Maha Adil nan Maha Penyayang, atas takdirmu telah kau jadikan
aku manusia yang senantiasa berpikir, berilmu, beriman dan bersabar dalam
menjalani kehidupan ini. Semoga keberhasilan ini menjadi satu langkah awal
bagiku untuk meraih cita-cita besarku.
Lantunan Al-fatihah beriring Shalawat dalam silahku merintih, menadahkan
doa dalam syukur yang tiada terkira, terima kasihku untukmu. Kupersembahkan
sebuah karya kecil ini untuk Ayahanda dan Ibundaku tercinta, yang tiada pernah
hentinya selama ini memberiku semangat, doa, dorongan, nasehat dan kasih sayang
serta pengorbanan yang tak tergantikan hingga aku selalu kuat menjalani setiap
rintangan yang ada didepanku.,,Ayah,.. Ibu...terimalah bukti kecil ini sebagai kado
keseriusanku untuk membalas semua pengorbananmu.. dalam hidupmu demi
hidupku kalian ikhlas mengorbankan segala perasaan tanpa kenal lelah, dalam lapar
berjuang separuh nyawa hingga segalanya.. Maafkan anakmu Ayah,,, Ibu,, masih
saja aku menyusahkanmu..
Dalam shalat di lima waktu mulai fajar terbit hingga terbenam.. seraya
tangaku menadah”.. ya Allah ya Rahman ya Rahim... Terimakasih telah kau
tempatkan aku diantara kedua malaikatmu yang selalu
ikhlas mendidikku,,membimbingku dengan baik,, ya Allah berikanlah balasan
setimpal syurga firdaus untuk mereka dan jauhkanlah mereka nanti dari panasnya
sengat hawa api nerakamu..

Untukmu Ayah (SULARDI),,,Ibu (AGUSTINI LESTARI)...Ibu Mertuaku (Mawarni) dan

Ayah Mertuaku (Wawan Hermawan) Terimakasih.... Dan Untuk Istriku yang tidak pernah

vi
lelah untuk mensupport aku tidak pernah Lelah untuk selalu membantu dan menasehati aku,
I Love U Soo Much ….
And I always loving you all...

Dalam setiap langkahku aku berusaha mewujudkan harapan-harapan yang

kalian impikan didiriku, meski belum semua itu kuraih’ insyallah atas dukungan
doa dan restu semua mimpi itu kan terjawab di masa penuh kehangatan nanti. Untuk
itu kupersembahkan ungkapan terimakasihku.

Kepada adikku (Bima Dewantoro dan Adelia Laksmawan)...” Mas”mu iso

wisuda iki...mugo-mugo kowe kabeh engko iso luwih apik meneh ko mas”mu
iki..[(^,^)> Makasih yaa buat segala dukungan doa.

"Hidupku terlalu berat untuk mengandalkan diri sendiri tanpa melibatkan bantuan Tuhan
dan orang lain.
"Tak ada tempat terbaik untuk berkeluh kesah selain bersama sahabat-sahabat terbaik”

Terimakasih kuucapkan Kepada Teman sejawat sekaligus Saudara/i TI.14.E.1.

“Tanpamu teman aku tak pernah berarti,,tanpamu teman aku bukan siapa-siapa yang takkan
jadi apa-apa”, buat sahabatku sekaligus saudara selama di sini, Agus Prianto, Aldian
Syahroni, Syarifudin, suka cita empat tahun kita lalui bersama,,
Kalian bukan hanya menjadi teman yang baik,
kalian adalah saudara bagiku!!

Untuk ribuan tujuan yang harus dicapai, untuk jutaan impian yang akan dikejar,
untuk sebuah pengharapan, agar hidup jauh lebih bermakna, hidup tanpa mimpi
ibarat arus sungai. Mengalir tanpa tujuan. Teruslah belajar, berusaha, dan
berdoa untuk menggapainya.
Jatuh berdiri lagi. Kalah mencoba lagi. Gagal Bangkit lagi.
Never give up!
Sampai Allah SWT berkata “waktunya pulang”

Hanya sebuah karya kecil dan untaian kata-kata ini yang dapat
kupersembahkan kepada kalian semua,, Terimakasih beribu
terimakasih kuucapkan..
Atas segala kekhilafan salah dan kekuranganku,
kurendahkan hati serta diri menjabat tangan meminta beribu-ribu kata maaf
tercurah.
Skripsi ini kupersembahkan

vii
 Motto

Lakukanlah Sekarang. Terkadang “nanti” bisa jadi “tidak pernah”

Jika ada jendela kesempatan terbuka, maka jangan turunkan tirainya

Aksi positifmu digabung dengan pemikiran positif, maka akan menghasilkan

kesuksesan

Menyerah tidak akan menyelesaikan masalah, tapi hanya akan menunda

masalah sebelum akhirnya tak terbendung lagi

Beberapa orang bermimpi akan keberhasilan, sementara orang lain bangun tiap
pagi untuk mewujudkanya

viii
 ABSTRAK

E-commerce merupakan salah satu alternative pilihan untuk sebuah perusahaan yang
khususnya bergerak dibidang wiraswasta sebagai media informasi yang memudahkan
adanya interaksi antara penjual dan pembeli tanpa dibatasi ruang dan waktu. Sebagai
salah satu atau bagian dari Negara berkembang di kawansan Asia yang memiliki
pertumbuhan cukup besar, dengan presentase penggunaan Internet per 100 penduduk
adalah 8,7% merupakan pangsa pasar besar didunia. Ditambah dengan perkembangan
ilmu pengetahuan dan teknologi yang diterapkan dalam kehidupan sehari-hari.
Teknologi informasi berkembang cukup pesat di Indonesia dan memberikan dampak
yang cukup signifikan pada semua aspek kehidupan, baik dalam pendidikan, sosial,
pemerintahan maupun bisnis. Penerapan teknologi informasi pada bidang bisnis,
dikenal dengan sebutan E-Business atau E-Commers. Paradigma baru dalam dunia
bisnis tersebut “Penerapan E-Commers di Indonesia” dinilai merupakan sebuah
terobosan baru yang dapat meningkatkan nilai perusahaan, baik dari sisi kolaborasi,
sumber daya manusia, operasi, penjualan, keuangan dan akutansi. Banyaknya
permintaan pasar membuat setiap pengusaha menyediakan layanan yang mudah
digunakan dan menarik bagi konsumen, hal ini mendorong Nuratih Fashion untuk
memberikan layanan yang dapat bersaing dengan pengusaha e-commerce lainya.
Untuk memperoleh data-data yang diperlukan selama penulisan, maka digunakan
beberapa metode, yaitu penelitian, studi pustaka, dan wawancara. Data yang diperoleh
kemudian dianalisa dan digambarkan dengan menggunakan metode Waterfall yang
berorientasi pada Unified Modelling Language (UML). Dalam pembuatan aplikasi ini
penulis menggunakan Web Server dengan menggunakan bahasa pemrograman PHP,
kemudian untuk basis data menggunakan Mysql. Hasil penelitian berupa aplikasi yang
diharapkan dapat memberikan kemudahan dalam memasarkan produk, meminimalisir
munculnya data produk yang sama dan memberikan daya tarik kepada konsumen.
Dengan sistem ini konsumen dapat mendapatkan akses yang mudah dan Nuratih
Fashion mampu memberikan pelayanan yang baik.
Kata Kunci : E-commerce, Web, PHP, UML, Sistem Informasi

ix
 ABSTRACT

E-commerce is one alternative choice for a company that is specifically engaged in

entrepreneurship as an information media that facilitates interaction between sellers
and buyers without being limited by space and time. As one or part of a developing
country in Asia, which has a fairly large growth, with a percentage of Internet usage
per 100 inhabitants is 8.7% (source: Worldbank) this is a large market share in the
world. Coupled with the development of science and technology applied in everyday
life. Information technology is developing rapidly in Indonesia and has a significant
impact on all aspects of life, both in education, social, government and business.
Application of information technology in the business field, known as E-Business or E-
Commers. The new paradigm in the business world "The application of E-Commers in
Indonesia" is considered a new breakthrough that can increase the value of the
company, both in terms of collaboration, human resources, operations, sales, finance
and accounting. The large number of market demands makes every entrepreneur
provide services that are easy to use and attractive to consumers, this encourages
Nuratih Fashion to provide services that can compete with other e-commerce
entrepreneurs. To obtain the data needed during writing, several methods are used,
namely research, literature, and interviews. The data obtained is then analyzed and
described using the Waterfall method which is oriented to the Unified Modeling
Language (UML). In making this application the author uses a Web Server using the
PHP programming language, then for the database using Mysql. The results of the
study are in the form of applications that are expected to provide convenience in
marketing products, minimize multiple data and provide attractiveness to consumers.
With this system consumers can get easy access and Nuratih Fashion is able to provide
good service.
Keywords: E-commerce, Web, PHP, UML, System Information

x
 KATA PENGANTAR

Dengan mengucapkan puji syukur kehadirat Allah SWT, atas rahmat dan

petunjuk-Nya yang telah dilimpahkan kepada penulis, sehingga pada akhirnya

penulis dapat menyelesaikan penulisan skripsi dengan baik. Dimana skripsi ini

penulis sajikan dalam bentuk buku yang sederhana. Adapun judul skripsi yang

penulis ambil sebagai berikut, “Perancangan Sistem Informasi Penjualan

Berbasis Web pada Nuratih Fashion”.

Tujuan penulisan skripsi ini dibuat sebagai salah satu syarat kelulusan

Program Sarjana Strata Satu (S1) Program Studi Teknik Informatika pada Sekolah

Tinggi Teknologi Pelita Bangsa Cikarang - Bekasi. Sebagai bahan penulisan

diambil berdasarkan hasil observasi (pengamatan), study pustaka dan wawancara

yang mendukung penulisan ini. Penulis menyadari bahwa dengan bimbingan dan

dorongan dari semua pihak, maka penulisan skripsi ini berjalan dengan lancar. Oleh

karena itu pada kesempatan ini, izinkanlah penulis menyampaikan ucapan terima

kasih kepada :

1. Bapak Dr. Ir. Supriyanto,M.Pd selaku ketua STT Pelita Bangsa.

2. Bapak Aswan Supriyadi Sunge, S.E, M.Kom selaku ketua program studi

Teknik Informatika pada STT Pelita Bangsa.

3. Bapak Muhamad Fatchan, S.Kom, M.Kom selaku Dosen Pembimbing I.

4. Ibu Putri Anggun Sari S.Pt, M.Si selaku Dosen Pembimbing II.

5. Seluruh Staff dan Dosen di lingkungan STT Pelita Bangsa Cikarang Bekasi.

xi
6. Orang tua tercinta yang telah memberikan dukungan moral dan do’anya

sehingga penulis bisa menyelesaikan Skripsi ini dengan baik.

7. Sahabat Seperjuangan yang telah membantu penyelesaian skripsi ini dengan

baik.

8. Rekan-rekan mahasiswa/i kelas TI.14.E.1.

Serta semua pihak yang terlalu banyak untuk disebut satu persatu sehingga

terwujudnya penulisan ini. Penulis menyadari bahwa Skripsi ini masih jauh banyak

kekurangan, untuk itu penulis mohon kritik dan saran yang bersifat membangun

demi kesempurnaan penulisan dimasa yang akan datang.

Akhir kata semua Skripsi ini dapat berguna bagi penulis khususnya dan bagi

para pembaca yang berminat pada umumya.

Bekasi , 10 November 2018

( Yuli Prasetyo )

xii
 DAFTAR ISI

Halaman

HALAMAN SAMPUL ............................... ............................................. ............i

LEMBAR PERSETUJUAN SKRIPSI ..................................................... ...........ii
LEMBAR PENGESAHAN SIDANG SKRIPSI ....................................... ..........iii
LEMBAR PERNYATAAN KEASLIAN ................................................. ..........iv
LEMBAR PERNYATAAN PUBLIKASI ................................................ ...........v
LEMBAR PERSEMBAHAN ................................................................... ..........vi
MOTTO .................................................................................................. ........viii
ABSTRAK ............................................................................................. ..........ix
ABSTRACT ............................................................................................. ...........x
KATA PENGANTAR ............................................................................ ..........xi
DAFTAR ISI .......................................................................................... ........xiii
DAFTAR GAMBAR .............................................................................. .........xv
DAFTAR TABEL ................................................................................... ......xviii
BAB I PENDAHULUAN ................................................................. ...........1
1.1. Latar Belakang Masalah .......................................................... ...........1
1.2. Identifikasi Masalah ................................................................. ...........2
1.3. Batasan Masalah ..................................................................... ...........3
1.4. Rumusan Masalah .................................................................... ...........3
1.5.Tujuan Penelitian ..................................................................... ...........4
1.6. Manfaat Penelitian ................................................................... ...........4
1.6.1 Bagi Penulis ............................................................. ...........4
1.6.2 Bagi Nuratih Fashion ............................................... ...........4
1.6.3 Bagi Instansi Program Studi Teknik Informatika ...... ...........4
1.7. Sistematika Penulisan .............................................................. ...........5
BAB II LANDASAN TEORI ............................................................. ...........7
2.1. Definisi Judul ......................................................................... ...........7
2.1.1 Pengertian Internet .................................................. ...........7
2.1.2 Pengertian Website ................................................. ...........8

xiii
 2.1.3 Pengertian E-commerce .......................................... ..........12
2.2. Teori Perancangan Program .................................................... ..........13
2.2.1 Pengertian UML ...................................................... ..........13
2.2.2 Diagram UML ......................................................... ..........14
2.3. Model Pengembangan Perangkat Lunak .................................. ..........24
2.4. Teori Bahasa Pemrograman ..................................................... ..........27
2.4.1 Pengertian Bahasa Pemrograman ............................. ..........27
2.4.2 Pengertian Basis Data .............................................. ..........30
2.4.3 Struktur Navigasi ..................................................... ..........31
2.4.4 Logical Relational Structure(LRS) ........................... ..........34
2.4.5 Pengujian Web ......................................................... ..........36
BAB III ANALISA DAN PERANCANGAN SISTEM ...................... ..........39
3.1. Objek Penelitian ....................................................................... ..........39
3.1.1 Struktur Organisasi Dan Fungsi ................................ ..........39
3.2. Analisa Kebutuhan ................................................................... ..........40
3.3. Perancangan Perangkat Lunak ................................................. ..........42
3.3.1 Rancangan Antar Muka............................................... ..........42
3.3.2 Rancangan Basis Data............................................... .. ..........70
BAB IV HASIL DAN PEMBAHASAN .............................................. ..........88
4.1. Hasil penelitian ....................................................................... ..........88
4.1.1. Spesifikasi Sistem Komputer ................................ ..........88
4.2. Implementasi Dan Pengujian Sistem ........................................ ..........90
4.2.1 Implementasi ......................................................... ..........90
4.2.2 Pengujian Unit ....................................................... ........112
BAB V PENUTUP ............................................................................. ........128
5.1. Kesimpulan ............................................................................. ........128
5.2. Saran ....................................................................................... ........128
DAFTAR PUSTAKA ............................................................................ ........129
DAFTAR LAMPIRAN .......................................................................... ........130

xiv
 DAFTAR GAMBAR

Halaman

Gambar 2.1 Diagram Waterfall ................................................................ .........24

Gambar 2.2 Struktur Navigasi Linear ....................................................... .........31
Gambar 2.3 Struktur Navigasi Hierarchical(Hirarki) ............................... .........32
Gambar 2.4 Struktur Navigasi Non Linear ............................................... .........33
Gambar 2.5 Struktur Navigasi Composite ................................................ .........33
Gambar 3.1 Struktur Organisasi ............................................................... .........38
Gambar 3.2 Rancangan Antar Muka Login Admin ................................... .........41
Gambar 3.3 Rancangan Antar Muka Halaman Utama Admin ................... .........42
Gambar 3.4 Rancangan Antar Muka Data Member .................................. .........43
Gambar 3.5 Rancangan Antar Muka Ganti Password ............................... .........44
Gambar 3.6 Rancangan Antar Muka Kelola Berita ................................... .........45
Gambar 3.7 Rancangan Antar Muka Edit Berita ....................................... .........46
Gambar 3.8 Rancangan Antar Muka Data Barang .................................... .........47
Gambar 3.9 Rancangan Antar Muka Input Data Barang ........................... .........48
Gambar 3.10 Rancangan Antar Muka Edit Data Barang ........................... .........49
Gambar 3.11 Rancangan Antar Muka Data Pesanan ................................. .........50
Gambar 3.12 Rancangan Antar Muka Detail Pesanan............................... .........51
Gambar 3.13 Rancangan Antar Muka Konfirmasi Pembayaran ................ .........52
Gambar 3.14 Rancangan Halaman Utama ................................................ .........53
Gambar 3.15 Rancangan Antar Muka Semua Produk ............................... .........54
Gambar 3.16 Rancangan Antar Muka Cara Pesan .................................... .........55
Gambar 3.17 Rancangan Antar Muka Berita Fashion............................... .........56
Gambar 3.18 Rancangan Antar Muka Hubungi Kami.............................. .........57
Gambar 3.19 Rancangan Antar Muka Pendaftaran Member ..................... .........58
Gambar 3.20 Rancangan Antar Muka Login Member ............................... .........59
Gambar 3.21 Rancangan Antar Muka Beranda Member ........................... .........60
Gambar 3.22 Rancangan Antar Muka Semua Produk Member ................. .........61

xv
Gambar 3.23 Rancangan Antar Muka Cara Pemesanan Member .............. .........62
Gambar 3.24 Rancangan Antar Muka Berita Fashion Member ................. .........63
Gambar 3.25 Rancangan Antar Muka Hubungi Kami Member ................. .........64
Gambar 3.26 Rancangan Antar Muka Keranjang Belanja ........................ .........65
Gambar 3.27 Rancangan Antar Muka Alamat Pengiriman........................ .........66
Gambar 3.28 Rancangan Antar Muka Member Cetak Struk ..................... .........67
Gambar 3.29 Rancangan Antar Muka Member Konfirmasi Pembayaran .. .........68
Gambar 3.30 Entity Relationship Diagram(ERD)..................................... .........70
Gambar 3.31 Logical Relational Structure(LRS)...................................... .........71
Gambar 3.32 Struktur Navigasi Admin .................................................... .........83
Gambar 3.33 Struktur Navigasi User........................................................ .........84
Gambar 3.34 Struktur Navigasi Pengunjung ............................................. .........85
Gambar 4.1 Implementasi Halaman Login Admin .................................... .........89
Gambar 4.2 Implementasi Halaman Utaman Admin................................. .........90
Gambar 4.3 Implementasi Halaman Data Member ................................... .........91
Gambar 4.4 Implementasi Halaman Password ......................................... .........92
Gambar 4.5 Implementasi Halaman Kelola Berita .................................... .........93
Gambar 4.6 Implementasi Halaman Data Barang ..................................... .........94
Gambar 4.7 Implementasi Halaman Data Pesanan.................................... .........95
Gambar 4.8 Implementasi Halaman Laporan Penjualan ........................... .........96
Gambar 4.9 Implementasi Halaman Konfirmasi Pembayaran ................... .........97
Gambar 4.10 Implementasi Halaman Utama ............................................ .........98
Gambar 4.11 Implementasi Halaman Semua Produk ................................ .........99
Gambar 4.12 Implementasi Halaman Cara Pesan ..................................... ........100

xvi
Gambar 4.13 Implementasi Halaman Berita Robotika .............................. ........101
Gambar 4.14 Implementasi Halaman Hubungi Kami ............................... ........102
Gambar 4.15 Implementasi Halaman Pendaftaran Member ...................... ........103
Gambar 4.16 Implementasi Halaman Login Member ................................ ........104
Gambar 4.17 Implementasi Halaman Utama Member .............................. ........105
Gambar 4.18 Implementasi Halaman Konfirmasi ..................................... ........106
Gambar 4.19 Implementasi Halaman Keranjang Belanja .......................... ........107
Gambar 4.20 Implementasi Halaman Alamat Pengiriman ........................ ........108
Gambar 4.21 Implementasi Halaman Struk Pembelian ............................. ........109

xvii
 DAFTAR TABEL

Halaman

Tabel 2.1 Simbol-Simbol Diagram UseCase ............................................ .........15

Tabel 2.2 Simbol-Simbol Activity Diagram ............................................. .........16
Tabel 2.3 Simbol-Simbol Class Diagram ................................................. .........18
Tabel 2.4 Simbol-Simbol Diagram Squence ............................................. .........19
Tabel 2.5 Simbol-Simbol Component Diagram ........................................ .........21
Tabel 2.6 Simbol-Simbol Deployment Diagram ....................................... .........22
Tabel 3.1 Spesifikasi File Tabel Barang ................................................... .........73
Tabel 3.2 Spesifikasi File Tabel Pelanggan .............................................. .........74
Tabel 3.3 Spesifikasi File Tabel Pemesanan ............................................. .........76
Tabel 3.4 Spesifikasi File Tabel Pemesanan Detail ................................... .........77
Tabel 3.5 Spesifikasi File Tabel Pengiriman ............................................ .........78
Tabel 3.6 Spesifikasi File Tabel Kantong ................................................. .........80
Tabel 3.7 Spesifikasi File Tabel Admin.................................................... .........81
Tabel 4.1 Tabel Skenario Pengujian Login Admin ................................... ........110
Tabel 4.2 Tabel Skenario Pengujian Login Member ................................. ........112
Tabel 4.3 Tabel Skenario Pengujian Pendaftaran Member ........................ ........114
Tabel 4.4 Tabel Skenario Pengujian Hubungi Kami ................................. ........118

xviii
 BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

E-commerce adalah sebuah sistem jual beli yang bersifat on-line, dimana

seorang pembeli tidak perlu selalu datang ke suatu toko ataupun perusahaan untuk

membeli suatu barang. Saat ini e-commerce merupakan salah satu alternative

pilihan untuk sebuah perusahaan yang khususnya bergerak di bidang wiraswasta

sebagai media informasi yang memudahkan adanya interaksi antara penjual dan

pembeli tanpa dibatasi ruang dan waktu.

Berdasarkan hasil observasi pada Nuratih Fashion tempat penjualan

pakaian dan sebagainya, penulis menemukan beberapa permasalahan. Usaha

fashion yang menjual dan membeli produk pakaian pada nuratih fashion ini yang

berawal pemasaran produknya dengan cara via social media seperti bbm, whatsapp,

facebook, twitter, dan akun social media lainnya. Memasarkan produk dari orang

satu ke yang lainnya dengan cara membuatkan sebuah group produk yang dijual

pada salah satu akun group social media yang biasanya digunakan. Seperti adanya

internet yang semakin mudah diakses dibarengi dengan smartphone yang semakin

murah sehingga siapa saja bisa memiliki dan mengakses internet terkadang produk

yang dijual dan juga dibeli kadang tidak sesuai dengan yang diharapkan konsumen

dalam hal operasionalnya maupun dalam hal transaksinya dikarenakan para

konsumen kurang mendapatkan informasi yang lengkap tentang produk yang akan

dibeli sesuai selera atau tidak. Masalah-masalah tersebut telah banyak merugikan

1
 2

dan sangat tidak maksimal dalam mengembangkan usaha fashion yang telah

berjalan sampai sekarang ini.

Melihat dari inti permasalahan tersebut maka sangat diharapkan

perusahaan mampu untuk mengembangkan sistem yang dapat menangani masalah

keterlambatan pelayanan dan ketidak akuratannya informasi yang dihasilkan.

Sehingga dengan adanya sistem yang berbasis komputer ini, diharapkan akan dapat

mengoptimalkan mutu pelayanan yang baik, mengefesiensikan biaya, dan dapat

memaksimalkan tenaga yang ada pada usaha fashion serta dapat mengefektifkan

waktu pada kondisi yang berbeda.

Dengan adanya permasalahan-permasalahan diatas, maka penulis terpacu

untuk merancang sebuah program penjualan fashion berbasis web dengan produk

yang lebih menarik dan variatif serta tentunya dapat mengatasi semua permasalahan

diatas. Dengan berdasarkan hal tersebut di atas, maka penulis mengambil skripsi ini

dengan judul : “PERANCANGAN SISTEM INFORMASI PENJUALAN

BERBASIS WEB PADA NURATIH FASHION”.

1.2. Identifikasi Masalah

Dari uraian latar belakang masalah diatas, penulis dapat

mengidentifikasikan masalah sebagai berikut:

1. Pemasaran produk masih terbatas pada social media dimana hanya

konsumen-konsumen tertentu yang dapat melihat produk tersebut.

 3

2. Informasi mengenai detail produk tidak tersampaikan dengan baik kepada

calon konsumen sehingga calon konsumen masih ragu terhadap produk

yang ditawarkan.

3. Tidak adanya history penjualan produk yang dipasarkan sehingga terjadi

duplicated data kepada konsumen.

1.3 Batasan Masalah

Untuk membatasi agar pembahasan tidak keluar dari permasalahan yang

sudah ditentukan, sekaligus mengarahkan dan memfokuskan permasalahan supaya

tidak terlalu luas, maka penulis membatasi permasalahan pada pembahasan ini

yaitu:

1. Sistem ini dibangun menggunakan pemrograman PHP dengan database

server MySQL

2. Data yang ada pada sistem ini meliputi data member konsumen dan data

produk yang dipasarkan.

1.4 Rumusan Masalah

Dari uraian latar belakang diatas dapat dirumuskan suatu permasalahan

yang ada pada Nuratih Fashion, yaitu :

1. Bagaimana cara merancang suatu sistem informasi penjualan yang dapat

diakses dengan mudah oleh konsumen?

2. Bagaimana cara merancang suatu sistem informasi penjualan yang dapat

mengurangi munculnya data produk yang sama saat dipasarkan?

 4

1.5 Tujuan Penelitian

Tujuan dari penulisan tugas akhir ini adalah:

1. Untuk merancang sistem yang dapat diakses dengan mudah oleh

konsumen.

2. Untuk merancang sebuah sistem yang dapat meminimalisir data ganda

pada produk yang dipasarkan.

1.6 Manfaat Penelitian.

1.6.1 Bagi Penulis

1. Menambah pengetahuan dalam bidang perancangan sistem informasi.

2. Menambah pengetahuan penulis mengenai pemograman web khususnya

dengan metode waterfall.

1.6.2 Bagi Nuratih Fashion

1. Memberikan kemudahan pemasaran produk tak terbatas calon konsumen

karena semua calon konsumen dapat mengaksesnya.

2. Efisiensi waktu dalam pemasaran produk.

3. Mempunyai hystorical produk sehingga tidak terjadi data ganda.

1.6.3 Bagi Instansi Program Studi Teknik Informatika

1. Penelitian ini diharapkan dapat berguna untuk menambah wawasan dan

dapat dijadikan gambaran untuk suatu penelitian khusus dalam bidang

yang sama.
 5

1.7 Sistematika Penulisan

Sistem penulisan ini dibuat untuk memberikan gambaran serta garis besar

mengenai apa yang dikemukakan dalam tiap-tiap bab, sehingga dapat

mempermudah dalam membaca dan membahas penulisan tugas akhir ini,

Sistematika Penulisan dibagi menjadi beberapa bab yaitu :

BAB I PENDAHULUAN

Dalam Bab ini merupakan bab yang menguraikan tentang latar belakang

masalah, maksud dan tujuan, metode penelitian, ruang lingkup dan

sistematika penulisan.

BAB II LANDASAN TEORI

Dalam bab ini membahas tentang sumber data yang digunakan sebagai

referensi dan mengenai konsep dasar web yang meliputi internet, e-

commerce, PHP (Personal Home Page), HTML (Hyper Text Markup

Language), MySQL, CSS (Cascading Style Sheet), XAMPP,

PHPMyAdmin, Adobe Dreamweaver CS5.5 dan Adobe Photoshop CS5.

Selain itu membahas teori pendukung yang meliputi struktur navigasi,

Entity Relationship Diagram (ERD) dan pengujian web.

BAB III ANALISIS DAN PERANCANGAN SISTEM

Dalam Bab ini merupakan gambaran secara rinci mulai dari analisa

kebutuhan, perancangan perangkat lunak, implementasi dan pengujian

unit.
 6

BAB IV HASIL DAN PEMBAHASAN

Pada bab ini menjelaskan spesifikasi software dan hardware, implementasi

antar muka dan pengujian web.

BAB V PENUTUP

Dalam Bab ini menjelaskan mengenai kesimpulan dan saran atas apa yang

telah penulis bahas pada bab - bab sebelumnya.

 BAB II

LANDASAN TEORI

2.1 Definisi Judul

2.1.1 Pengertian Internet

Internet yaitu kepanjangan dari interconnection networking atau juga yang

telah menjadi international newtworking merupakan suatu jaringan yang

menghubungkan computer diseluruh dunia tanpa dibatasi oleh jumlah unit menjadi

satu jaringan yang bias saling mangakses.

Menurut Adi Nugorho (2009:1) dijelaskan bahwa “internet merupakan

suatu media informasi komputer global yang dapat dikatakan sebagai teknologi

tercanggih abad ini”.

Menurut Turban dalam Ellitan (2007:50) “internet adalah sistem jaringan

komputer dan jaringan dari banyak jaringan yang meliputi seluruh dunia. Internet

bersifat publik, kooperatif, dan mandiri yang memfasilitasi akses keratusan atau

jutaan manusia diseluruh dunia”.

Menurut Harjono (2009:1) internet dapat diartikan “kumpulan dari

beberapa komputer, bahkan jutaan komputer di seluruh dunia yang saling

berhubungan atau terkoneksi satu sama lainnya. Media yang digunakan biasa

menggunakan kabel/serat optic, satelit atau melalui sambungan telepon.”

Menurut Kustiyaningsih dan Anamisa (2011:2) Internet adalah “sebuah

jaringan komputer dunia, semua berbicara dengan bahasa yang sama. Banyak

7
 8

keuntungan yang didapat dari jaringan komputer, diantaranya produktivitas dan

efisien”. Jaringan komputer area atau lokasi dapat dibagi menjadi empat yaitu :

a. Local Area Network (LAN), yaitu jaringan komputer dimana dimana

komputer-komputer yang terhubung masih dalam satu area atau lokasi.

b. Wide Area Network (WAN), yaitu koneksi antara LAN-LAN yang berbeda

lokasi/area. Ciri utamanya adalah memiliki bandwidth yang terbatas

karena disesuaikan dengan fungsi harga, adanya problem delay

antarstasiun.

c. Metropolitan Area Network (MAN), yaitu seperti LAN hanya saja lebih

luas areanya semisal dalam satu kota/daerah dengan range mencapai 50

km.

Dalam beberapa tahun terakhir ini, istilah internet sudah tidak asing lagi dari pelajar

sampai orang dewasa sudah melirik teknologi ini. Bahkan produsen komputer pun

berlomba-lomba menciptakan komputer yang canggih untuk memenuhi kebutuhan

yang semakin bertambah.

2.1.2 Pengertian Website

Menurut Kustiyahningsih dan Anamisa (2011:2) menyatakan bahwa

secara sederhana dapat dikatakan internet adalah sebuah “jaringan komputer

dunia”, semua berbicara dengan bahasa yang sama. Banyak keuntungan yang

didapat dari jaringan komputer, diantaranya produktivitas dan efesien.

Menurut Helianthusonfri (2013:5) menyatakan bahwa “Website adalah

informasi yang ada di internet, di mana halaman tersebut merupakan kumpulan

 9

komponen yang terdiri dari teks, gambar dan atau suara animasi. Karena adanya

berbagai komponen tadilah, sebuah website menjadi lebih menarik”.

Ada 3 jenis website menurut Helianthusonfri (2013:5), yaitu:

1. Website Statis

Website statis adalah jenis website yang isi didalam website tersebut tidak

dimaksudkan untuk di update secara berkala. Update (pembaruan) di

website statis ini jarang sekali terjadi, dan biasanya kalau ada update, akan

dilakukan oleh orang-orang tertentu saja. Contoh web statis ini misalnya

adalah di www.jefferlysuperclub.com/caramembuatblog, web tersebut

hanya terdiri dari sebuah halaman statis yang sederhana.

2. Website Dinamis

Website dinamis adalah website yang isinya bisa di update secara cepat

dan sering. Berbeda dengan web statis yang terkesan sederhana, di web

dinamis ada banyak hal yang bisa dilakukan. Misalnya bisa menampilkan

flash, mengomentari web tersebut, dan banyak lagi. Contoh dari sebuah

web dinamis adalah website jenis web. Misalnya seperti blog di

www.blogmotivasi.com.

3. Website Interaktif

Wesite interaktif adalah jenis website yang memungkinkan pengguna web

tersebut untuk langsung berinteraksi, baik itu dengan pengguna lain

ataupun dengan website itu sendiri. Contoh seperti di website

http://www.kurangasem.com.
 10

Adapun aplikasi berbasis web menurut Kustiyahningsih dan Anamisa

(2011:8), yaitu:

1. Web Browser

Web browser adalah software yang digunakan untuk menampilkan

informasi dari server web. Software ini kini telah dikembangkan dengan

menggunakan user interface grafis, sehingga pemakai dapat dengan

melakukan ‘point and click’ untuk pindah antar dokumen.

2. Web Server

Web server adalah komputer yang digunakan untuk menyimpan dokumen-

dokumen web, komputer ini akan melayani permintaan dokumen web dari

kliennya. Web browser seperti explorer atau navigator berkomunikasi

melalui jaringan (termasuk jaringan internet) dengan web server,

menggunakan HTTP. Browser akan mengirimkan request ke server untuk

meminta dokumen tertentu atau layanan lain yang disediakan oleh server.

Server memberikan dokumen atau layanannya jika tersedia juga dengan

menggunakan protokol HTTP.

3 Web Editor

Yang di maksud dengan web editor ialah Web/HTML Editor adalah

perangkat lunak yang digunakan untuk membuat halaman-halaman web,

yang baik yang bersifat statis maupun dinamis.

Berikut beberapa software yang dapat digunakan dalam web editor adalah:
 11

1 Adobe Dreamweaver

Menurut Madcoms (2010:1) menyatakan bahwa “Dreamweaver

merupakan software aplikasi yang digunakan sebagai HTML editor

professional untuk mendesain web secara visual. Aplikasi ini juga yang

bisa dikenal dengan istilah WYSIWYG (What You See Is What You Get),

yang intinya adalah bahwa anda tidak harus berurusan dengan Tag-tag

HTML untuk membuat situs.

Dengan kemampuan fasilitas yang optimal dalam jendela design membuat

program ini memberikan kemudahaan untuk mendesain web meskipun

untuk para web desainer pemula sekalipun. Sedangkan kemampuan

Dreamweaver untuk berinteraksi dengan beberapa bahasa pemograman

seperti PHP, ASP, JavaScript, dan yang lainnya juga memberikan fasilitas

maksimal kepada para desainer web yang menyertakan bahasa

pemograman web didalamnya.

2. Adobe Photoshop

Menurut Wahana Komputer (2011:2) “Adobe Photoshop CS5 (Creative

Suite 5) adalah perangkat lunak editor citra/gambar yang dibuat dan

dikembangkan oleh Adobe System. Adobe Photoshop memberikan

kemudahan bagi para desianer. Aplikasi ini menyediakan fitur dan fungsi

yang lengkap untuk segala kebutuhan pengolahan image”.

 12

2.1.3 Pengertian E-Commerce

Menurut Sutarman (2009:209) “E-commerce adalah singkatan dari

Electronic Commerce, yaitu pembelian, penjualan dan pertukaran barang atau

layanan dan informasi secara elektronik, yaitu melalui jaringan komputer terutama

internet”. E-commerce dapat diartikan dengan sangat luas, tidak hanya pembelian

atau penjualan barang, tetapi juga layanan terhadap pelanggan, kerjasama dengan

rekan bisnis serta membangun transaksi secara elektronik antara organisasi.

E-commerce terdiri atas beberapa jenis, yaitu sebagai berikut:

1. Collaborative Commerce (e-commerce)

Kerja sama secara elektronik antara rekan bisnis. Kerja sama ini biasanya

terjadi antara rekan bisnis yang berada pada jalur penyediaan barang

(stupply chain).

2. Business-to-Consumers (B2C)

Penjual adalah suatu organsasi dan pembeli adalah individu.

3. Consumer-to-Business (C2B)

Pada jenis ini, konsumen memberitahukan barang atau layanan yang

dibutuhkannya, selanjutnya organisasi-organisasi bersaing untuk

menyediakan barang atau layanan tersebut kepada konsumen.

4. Consumer-to-Consumer

Penjualan barang atau layanan antara individu.

 13

5. Intrabusiness (Intraorgnizational) Commerce

Pada jenis ini, organisasi menggunakan e-commerce untuk meningakatkan

kegiatan operasi organisasinya. Hal ini dikenal juga dengan sebutan

Business-to-Employee (B2E).

6. Government-to-Citizens (G2C) and to Others

Pemerintah menyediakan layanan kepada masyarakat melalui teknologi e-

commerce. Pemerintah juga dapat bisnis dengan pemerintah lain

(Government-to-Government/G2G), demikian juga dengan organsasi lain

(Government-to-Business/G2B).

7. Mobile Commerce (m-commerce)

E-commerce yang dilaksanakan pada lingkungan tanpa kabel (wireless

environment), seperti menggunakan telepon seluler untuk akses internet.

2.2. Teori Perancangan Program

2.2.1 Pengertian Unified Modelling Laguage (UML)

Unified Modelling Language (UML) adalah sebuah bahasa untuk

menentukan, visualisasi, konstruksi, dan mendokumentasikan artifact (bagian dari

informasi yang digunakan atau dihasilkan dalam suatu proses pembuatan perangkat

lunak). Artifact dapat berupa model, deskripsi atau perangkat lunak dari sistem

perangkat lunak, seperti pada pemodelan bisnis dan sistem non perangkat lunak

lainnya, (Pranata Dan Dyna Marisa, 2015)

 14

Unified Modelling Language (UML) adalah salah standar bahasa yang

banyak digunakan di dunia industri untuk mendefinisikan requerement, membuat

analisa & desain, serta menggambarkan arsitektur dalam pemrograman berorintasi

objek (Rosa dan Shalahuddin, 2016 : 133).

Unified Modelling Language (UML) adalah sebuah bahasa yang telah

menjadi standar dalam industri untuk visualisasi, merancang dan

mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar untuk

merancang model sebuah sistem (Pranata Dan Dyna Marisa, 2015).

Unified Modelling Language (UML) adalah bahasa pemodelan tujuan

umum yang menggambarkan sistem secara grafis persyaratan dan diterima oleh

Organisasi Internasional untuk Standarisasi (ISO) sebagai standar spesifikasi. UML

menyediakan diagram untuk memvisualisasikan, menentukan dan

mendokumentasikan sistem perangkat lunak (Alhassan Adamua dan Zainon Wan,

2017).

Dari beberapa penjelasan teori tersebut dapat disimpulkan bahwa Unified

Modeling Language (UML) adalah bahasa yang sering digunakan untuk

membangun sebuah sistem perangkat lunak dengan melakukan penganalisaan

desain dan spesifikasi dalam pemrograman berorintasi objek.

2.2.2 Diagram Unified Modeling Language (UML)

UML memiliki diagram-diagram yang digunakan dalam pembuatan

aplikasi berorintasi objek, diantaranya (Rosa dan Shalahuddin, 2014:155):

 15

1. Usecase Diagram

Use Case Diargam merupakan pemodelan untuk melakukan (behavior)

sistem informai yang akan dibuat. Use case digunakan untuk mengetahui fungsi

apa saja yang ada di dalam sebuah sistem informasi dan siapa saja yang berhak

menggunakan fungsi-fungsi itu (Rosa dan Shalahuddin, 2016:156). Berikut

adalah simbol-simbol yang ada pada diagram usecase :

Tabel 2.1 Simbol-Simbol Diagram Usecase

Simbol Deskripsi

Usecase Fungsionalitas yang disediakan

usecase
sistem sebagai unit-unit yang saling

tertukar pesan antar unit atau aktor.

Actor Orang, proses, atau sistem lain yang

berinteraksi dengan sistem informasi

yang akan dibuat diluar sistem

informaasi yang akan dibuat itu

sendiri, jadi walaupun simbol dari

aktor adalah gambar orang.

Asosiasi/asosiation Komunikasi antara aktor dan usecase

yang berpartisipasi pada usecase atau

usecase memiliki interaksi dengan

aktor.
 16

Simbol Deskripsi

Extensi/extend Relasi usecase tambahan kesebuah

usecase dinamakan usecase yang

ditambahkan dapat berdiri sendiri.

Generalisasi / generalization Hubungan generalisasi dan

spesialisasi (umum-khusus) antara

dua buah usecase.

Sumber : Rosa dan Shallahudin (2016:156)

2. Activity Diagram

Activity Diagram menggambarkan workflow (aliran kerja) atau aktifitas

dari sebuah sistem atau proses bisnis atau menu yang ada pada perangkat lunak.

perlu diperhatikan bahwa diagram aktifitas menggambarkan aktifitas sistem

bukan apa yang dilakukan aktor, jadi aktifitas yang dapat dilakukan oleh sistem

(Rosa dan Shalahudin, 2016:162). Berikut adalah simbol-simbol yang ada pada

diagram aktifitas :

Tabel 2.2 Simbol-Simbol Activity Diagram

Simbol Deskripsi

Status awal Status awal aktifitas sistem, sebuah

diagram aktifitas memiliki sebuah

status awal.
 17

Simbol Deskripsi

Aktifitas Aktifitas yang dilakukan sistem,

aktifitas biasanya diawali dengan kata

kerja.

Percabangan/Decision Asosiasi percabnagan dimana jika ada

pilihan aktifitas lebih dari satu.

Penggabungan/join Asosiasi penggabungan dimana lebih

dari satu aktifitas digabungkan

menjadi satu.

Status akhir Status akhir yang dilakukan sebuah

sistem, sebuah diagram aktifitas

memiliki sebuah status akhir.

Swimlane Memisahkan organisasi bisnis yang

bertanggung jawab terhadap aktifitas

yang terjadi.

Sumber : Rosa dan Shallahudin (2016:156)

 18

3. Class diagram

Class Diagram menggambarkan struktur sistem dari segi pendefinisian

kelas-kelas yang akan dibuat untuk membangun sistem. kelas memiliki apa

yang disebut atribut dan metode atau operasi (Rosa dan Shalahudin, 2016:146).

Berikut adalah simbol-simbol yang ada pada diagram kelas :

Tabel 2.3 Simbol-Simbol Class Diagram

Simbol Deskripsi

Class Kelas pada struktur system.

Interface Sama dengan konsep interface dalam

pemrograman berorientasi objek.

Asosiasi / Association Relasi antar kelas dengan makna

umum, asosiasi biasanya juga disertai

dengan multiplicity.

Asosiasiberarah/Directed association Relasi antar kelas dengan makna

kelas ssatu digunakan oleh kelas yang

lain, aosiasi biasanya juga disertai

dengan multiplicity.
 19

Simbol Deskripsi

Generalisasi Relasi antar kelas dengan makna

generalisasi-spesialisasi(untuk

khusus).

Kebergantungan/Dependency Relasi antar kelas dengan makna

kebergantungan antar kelas.

Agregasi/Agregation Relasi antar kelas dengan makna

semua bagian (wholepart).

Sumber : Rosa dan Shallahudin (2016:156)

4. Squence Diagram

Squence Diagram menggambarkan kelakuan objek pada usecase dengan

mendeskripsikan waktu hidup objek dan message yang dikirimkan dan

diterima antar objek. Untuk menggambarkan diagram squence maka harus

diketahui objek- objek yang terlibat dalam sebuah usecase beserta metode-

metode yang dimiliki kelas yang diinstanisasi oleh objek itu (Rosa dan

Shalahuddin, 2016:165). Berikut adalah simbol-simbol yang ada pada Squence

Diagram:
 20

Tabel 2.4 Simbol-Simbol Diagram Squence

Simbol Deskripsi

Aktor Orang, proses, atau sistem lain yang

berinteraksi dengan sistem informasi

yang akan dibuat diluar sistem

informasi itu sendiri.

Waktu aktif Menyatakan objek dalam keadaan

aktif dan berinteraksi,semua yang

terhubung dengan waktu aktif ini

adalah sebuah tahapan yang

dilakukan di dalamnya.

Pesan type create Menyatakan suatu objek membuat

objek yang lain, arah panah mengarah

pada objek yang dibuat.

Pesan type return Menyatakan suatu objek yang telah

menjalankan suatu operasi atau

metode menghasilkan suatu

kembalian keobjek tertentu.

 21

Simbol Deskripsi

Pesan type Menyatakan suatu objek mengakhiri

hidup objek yang lain, arah panah

Destroy
mengarah pada objek yang diakhiri,

sebaiknya jika ada create maka ada

destroy.

Menyatakan kehidupan suatu objek.

Garis Hidup/

Life line

Sumber : Rosa dan Shallahudin (2016:156)

5. Component Diagram

Component diagram mempresentasikan dunia riil item yaitu component

software. Component software adalah bagian fisik 22 dari sebuah sistem karena

menetap di komputer. Component diagram mengandung component, iterface

dan relationship (Rosa dan Shalahuddin, 2016:165). Berikut adalah sumber-

sumber komponen yang ada di Component Diagram:

 22

Gambar 2.5 Simbol-Simbol Component Diagram

Simbol Deskripsi

Package Package merupakan bungkusan dari

satu atau lebih node.

Package

Komponen Komponen sistem

Nama komponen

Kebergantungan/Depedensi Kebergantungan antar node, arah

panah mengarah pada node yang di

pakai.

Link Relasi antar node

Sumber : Rosa dan Shallahudin (2016:157)

6. Deployment Diagram

Deployment Diagram yaitu salah satu diagram pada UML yang

menunjukan tata letak suatu sistem secara fisik, dapat juga dikatakan untuk

menampilkan bagian-bagian software yang terdapat pada hardwere

dan digunakan untuk menerapkan suatu sistem dan hubungan antara komponen
 23

hardware (Rosa dan Shalahuddin, 2016:165). Berikut adalah simbol-simbol

yang ada pada Diagram Squence :

Tabel 2.6 Simbol-Simbol Deployment Diagram

Simbol Deskripsi

Package Package merupakan bungkusan dari

satu atau lebih node.

Package

Node Biasanya mengacu pada perangkat

keras (hardware) perangkat lunak

Node
yang tidak dibuat sendiri (software)

jika di dalam node disertakan

komponen untuk mengkonsistenkan

rancangan maka komponen yang

diikut sertakan harus sesuai dengan

komponen yang didefinisikan

sebelumnya.

Kebergantungan/Depedensi Kebergantungan antar node, arah

panah mengarah pada node yang di

pakai.
 24

Simbol Deskripsi

Link Relasi antar node

Sumber : Rosa dan Shallahudin (2016:156)

2.3 Model Pengembangan Perangkat Lunak

Model yang digunakan pada pengembangan perangkat lunak ini

menggunakan model waterfall. Di dalam SDLC (Software Development Life Cycle)

memiliki beberapa model penerapan tahapan prosesnya. Salah satunya yang akan

dibahas adalah model waterfall. Model SDLC air terjun (waterfall) sering juga

disebut model sekuensial linear (sequential linear) 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). Model air terjun diperkenalkan oleh Royce pada

(1970), khususnya dalam konteks desain perangkat lunak misi pesawat ruang

angkasa, dan merupakan salah satu metode yang paling populer untuk menilai

evolusi suatu produk atau sistem. Intinya, ini adalah Model Siklus Hidup

Pengembangan Sistem Informasi selangkah demi selangkah yang memuat

sekuensial dari siklus hidup produk yang mencakup 7 tahap yang berbeda, yang

aslinya terdiri dari "persyaratan sistem, persyaratan perangkat lunak, analisis,

perancangan program, pengkodean, pengujian dan operasi. "(Royce 1970).

 25

Model SDLC air terjun (waterfall) adalah model SDLC yang paling

sederhana. Model ini hanya cocok untuk pengembangan perangkat lunak dengan

spesifikasi yang tidak berubah-ubah. Kekuatan terbesarnya terletak pada garis besar

yang secara umum menerima kebiasaan positif pengembangan perangkat lunak,

seperti perencanaan menit dan akurat di awal proyek, dokumentasi ekstensif

keseluruhan proses, dan memiliki konsep desain yang kuat sebelum mulai kode

(Munassar and Govardhan 2010).

Gambar 2.1 Waterfall

Sumber: Rosa (2013:29).

Model waterfall menurut Rosa dan Shalahuddin (2013:29) pada gambar

diatas setiap langkahnya akan dirinci sebagai berikut :

1. Analisa Kebutuhan Perangkat Lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk

menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat

lunak seperti apa yang dibutuhkan oleh user.

 26

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada

desain pembuatan program perangkat lunak, representasi antarmuka, dan

prosedur pengodean. Tahap ini mentranslasi desain agar dapat

diimplementasikan menjadi program pada tahap selanjutnya. Desain perangkat

lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.

3. 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.

4. Pengujian

Pengujian berfokus pada perangkat lunak dari segi logic dan fungsional

dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan

sesuai dengan yang diingkan.

5. 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 pengembangan mulai dari analisis

spesifikasi untuk perubahan perangkat lunak yang sudah ada, tetapi tidak

membuat perangkat lunak baru.

 27

Model air terjun sangat cocok digunakan kebutuhan pelanggan sudah

sangat dipahami dan kemungkinan terjadinya perubahan kebutuhan selama

pengembangan perangkat lunak kecil. Hal positif dari model air terjun ini

adalah struktur tahap pengembangan sistem jelas, dokumentasi dihasilkan di

setiap tahap pengembangan, dan sebuah tahap dijalankan setelah tahap

sebelumnya selesai dijalankan (tidak ada tumpang tindih pelaksanaan tahap).

Premis pertama di mana model ini didasarkan adalah bahwa setiap proses

pengembangan perangkat lunak atau sistem dimulai dari dua langkah penting:

analisis dan pengkodean. Ini adalah konseptualisasi model yang paling

sederhana, namun tidak efektif untuk memahami pengembangan produk lebih

jauh dari tahap penciptaan. Oleh karena itu, tahap analisis dipecah menjadi dua

tahap - analisis kebutuhan sistem dan perangkat lunak, sedangkan tahap

pengkodean didahului dengan disain program (Royce 1970).

2.4 Teori Bahasa Pemrograman

2.4.1 Pengertian Bahasa Pemrograman

Bahasa program merupakan bahasa yang digunakan untuk

menterjemahkan setiap perintah pada saat website tersebut sedang dijalakan.

Bahasa ini memungkinkan seorang programmer dapat membuat suatu program

aplikasi. Bahasa pemrograman ini merupakan suatu himpunan dari aturan sintaks

dan semantik yang dipakai untuk mendefinisikan program komputer. Bahasa ini

memungkinkan seorang programmer dapat menentukan secara persis data mana

yang akan diolah oleh komputer, bagaimana data ini akan disimpan/diteruskan, dan
 28

jenis langkah apa secara persis yang akan diambil dalam berbagai situasi (Dipraja,

2014:26).

Bahasa pemrograman, atau sering diistilahkan juga dengan bahasa

komputer atau bahasa pemrograman komputer, adalah instruksi standar untuk

memerintah komputer. Bahasa pemrograman ini merupakan suatu himpunan dari

aturan sintaks dan semantik yang dipakai untuk mendefinisikan program komputer

(Jusuf, Berlian, & rosdiana, 2013). Bahasa program yang penulis gunakan adalah

PHP dan HTML.

Berikut ini adalah bahasa pemrograman yang digunakan:

1. PHP (Personal Home Page)

Menurut Prasetio (2014:122) menyatakan bahwa “PHP (PHP:Hypertext

Preprocessor) adalah bahasa script yang ditanam di sisi server”.

PHP dikenalkan pada tahun 1994 sebagai sebuah kumpulan script freeware

yang berbasis Perl dan dikenal sebagai “Personal Home Page” Tools.

Pembuatnya bernama Rasmus Lerdorf. Ternyata paket tersebut banyak

mengundang minat para developer dan professional. Pada tahun 1995, sebuah

milis dibuat untuk menyediakan tempat diskusi termasuk memberikan

feedback, perbaikan bug dan ide-ide kode script tersebut.

2. HTML (Hyper Text Markup Language)

Menurut Kustiyahningsih dan Anamisa (2011:13) menyatakan bahwa

“HTML adalah file text murni yang dapat dibuat dengan editor text

sembarang”. Dokumen ini dikenal sebagai web page. File-file HTML ini berisi
 29

intrusksi-instruksi yang kemudian diterjemahkan oleh browser yang ada di

komputer client (user) sehingga isi informasinya dapat ditampilkan secara

visual di komputer pengguna (user).

3. CSS (Cascading Style Sheet)

Menurut Kustiyahningsih dan Anamisa (2011:47) menyatakan bahwa

“CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan

untuk mengatur format/tampilan suatu halaman HTML”. Dengan

menggunakan CSS seseorng dapat dengan mudah mengubah secara

keseluruhan gaya tampilan situs.

CSS mempunyai 2 (dua ) bagian utama yaitu selector dan deklarasi. Selector

adalah elemen HTML yang ingin diubah, sedangkan deklarasi adalah properti

dan nilai. Properti merupakan atribut syle yang akan diubah, dimana tiap

properti memiliki nilai.

4. Javascript

Menurut Kustiyahningsih dan Anamisa (2011:65) menyatakan bahwa

“JavaScript adalah bahasa yang berbentuk kumpulan skrip berjalan pada suatu

dokumen HTML”. Bahasa ini adalah bahasa pemrograman untuk memberikan

kemampuan tambahan terhadap bahasa HTML dengn mengizinkan

pengeksekusian perintah-perintah di sisi user artinya di sisi browser bukan di

sisi server web.

Javascript adalah bahasa yang “case sensitive” artinya membedakan penamaan

variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh
 30

variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama

test dan setiap instruksi diakhiri dengan karakter titik koma(;).

2.4.2 Pengertian Basis Data

Menurut Simarmata dan Paryudi (2006:1) menyatakan bahwa “Basis data

adalah mekanisme yang digunakan untuk menyimpan informasi atau data.

Informasi adalah sesuatu yang kita gunakan sehari-hari untuk berbagai alasan”.

Dengan basis data, pengguna dapat menyimpan data secara terorganisasi. Setelah

data disimpan, informasi harus mudah diambil. Kriteria dapat digunakan untuk

mengambil informasi. Cara data disimpan dalam basis data menentukan seberapa

mudah mencari informasi berdasarkan banyak kriteria. Data pun harus mudah

ditambahkan ke dalam basis data, dimodifikasi dan dihapus.

Berikut aplikasi data yang digunakan pada website yang dibangun:

1. XAMPP

Menurut Sidik (2012:3) menyatakan bahwa “XAMPP merupakan paket

server PHP dan database MySQL yang paling popular di kalangan

pengembang web dengan menggunakan PHP dan MySQL sebagai database”.

2. MySQL

Menurut Kustiyahningsih dan Anamisa (2011:146) menyatakan bahwa

“MySQL merupakan sistem manajemen basis data SQL yang sangat terkenal

dan bersifat Open Source”.

MySQL dapat didefinisikan sebagai sistem manajemen database. Database

sendiri merupakan struktur penyimpanan data. Untuk menambah, mengakses

 31

dan memproses dan memproses data yang disimpan dalam sebuah database

komputer, diperlukan sistem manajemen database seperti MySQL Server.

Selain itu MySQL dapat dikatakan sebagai basis data terhubung (RDMS).

Database terhubung menyimpan data pada tabel-tabel terpisah.

3. PHPMyAdmin

Menurut Prasetio (2012:52) menyatakan bahwa “PHPMyAdmin

merupakan tools berbasis web yang berguna untuk mengelola database

MySQL”. PHPMyAdmin adalah aplikasi gratis dan biasanya sudah termasuk

dalam paket instalasi XAMPP.

2.4.3 Struktur Navigasi

Pada pengembangan aplikasi berbasis web, tentunya dalam membuat lebih

dari satu halaman web, bahkan bias ratusan jika aplikasi yang dibangun kompleks.

Oleh karenanya navigasi adalah fitur yang harus disediakan. Navigasi berfungsi

untuk berpindah dari satu halaman ke halaman yang lain pada suatu aplikasi

berbasis web, yang juga digunakan untuk memberikan informasi lokasi halaman

yang sedang dibuka. Struktur navigasi memegang peranan penting demi

tercapainya tujuan dari suatu web atau aplikasi. Dengan adanya stuktur navigasi

yang baik dan mudah dipahami atau dimengerti oleh para pemakai, maka mereka

dapat menelusuri web tersebut dengan nyaman. Struktur ini merupakan struktur

yang mengandalkan percabangan untuk menampilkan data atau gambar pada layar.

Struktur navigasi adalah struktur bagaimana halaman web dihubungkan dengan

halaman lain (Sutopo,2007:245).

 32

Menurut Sutopo (2007:6), struktur navigasi dapat digolongkan menurut

kebutuhan akan objek kemudahan pemakaian, keinteraktifitasannya dan

kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu situs

web. Bentuk dasar dari struktur navigasi adalah sebagai berikut:

1. Struktur Navigasi Linear (Satu Alur)

Struktur navigasi ini hanya memiliki satu rangkaian cerita yang berurut

yang menampilkan satu demi satu tampilan layar secara berurut menurut

urutannya. Tampilan yang dapat ditampilkan pada stuktur jenis ini adalah satu

halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dalam dua

halaman sebelumnya atau dua halaman sesudahnya.

Gambar 2.2 Struktur Navigasi Linear

Sumber : Sutopo (2007:6)

2. Struktur Navigasi Hirarki (Hierarchical)

Ada yang menganggap bentuk webpages hirarki merupakan cara yang

paling mudah serta pemahaman logic yang mudah diterima. Organisasi hirarki

memudahkan pembaca untuk mengetahui posisi dari struktur yang dibuat. Ciri

utama struktur navigasi hirarki ini adalah memiliki percabangan dengan

slavepage-slavepagenya yang dapat kembali ke halaman utama. Bentuk

Hirarki merupakan bentuk peningkatan dari bentuk linier dengan

 33

menambahkan alternative cabang. Cabang linier yang pertama disebut dengan

cabang lintasan utama. Bentuk ini kompleks dari bentuk linier. Struktur ini

biasa disebut struktur bercabang, merupakan suatu struktur yang

mengandalkan percabangan untuk menampilkan data berdasarkan kriteria

tertentu (Sutopo, 2007:6).

Gambar 2.3 Struktur Navigasi Hierarchical (Hirarki)

Sumber : Sutopo (2007:6)

3. Struktur Navigasi Non Linear (Tidak Berurutan)

Stuktur ini disebut juga struktur tidak berurut, merupakan pengembangan

dari stuktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi

bercabang. Percabangan yang dibuat pada stuktur ini berbeda dengan

percabangan pada struktur navigasi hirarki karena pada percabangan ini

walaupun terdapat percabangan, tetapi tiap-tiap tampilan punya kedudukan

yang sama (Sutopo, 2007:6).

 34

Gambar 2.4 Struktur Navigasi Non Linear

Sumber : Sutopo (2007:6)

4. Struktur Navigasi Composite (Campuran)

Struktur ini merupakan gabungan dari ketiga struktur sebelumnya.

Struktur navigasi ini juga biasa disebut navigasi bebas. Struktur ini banyak

digunakan dalam pembuatan aplikasi multimedia, sehingga dapat memberikan

keinteraksian yang tinggi (Sutopo, 2007:6).

Gambar 2.5 Struktur Navigasi Composite

Sumber : Sutopo (2007:7)

2.4.4 Logical Relational Structure (LRS)

Menurut Fathansyah (2007:114) menyatakan “Logical Relational

Structure adalah cara transformasi model data yang dalam Diagram E-R ke dalam

basis data fisik”. Berikut ini akan ditunjukkan cara transformasi yang sifatnya

umum/standard yaitu:
 35

1. Transformasi Umum/Dasar

Aturan umum dalam pemetaan model data (level konseptual dalam

abstraksi data) yang digambarkan dengan Diagram E-R menjadi basis data

fisik (level fisik dalam abstraksi data) adalah:

a. Setiap himpunan entitas akan diimplementasikan sebagai tabel (file data).

b. Relasi dengan derajat relasi 1-1 (satu-ke-satu) yang menghubungkan 2

buah himpunan entitas akan direpresentasikan dalam bentuk

penambahan/penyertaan atribut-atribut relasi ke tabel yang mewakili salah

satu dari kedua himpunan entitas.

c. Relasi dengan derajat relasi 1-N (satu-ke-banyak) yang menghubungkan 2

buah himpunan entitas, juga akan di representasikan dalam bentuk

pemberian/pencantuman atribut key dari himpunan entitas pertama (yang

berderajat 1) ke tabel yang mewakili himpunan entitas kedua (yang

berderajat N). Atribut key dari himpunan entitas pertama ini menjadi

atribut tambahan bagi himpunan entitas kedua.

d. Relasi dengan relasi N-N (banyak-ke-banyak) yang menghubungkan 2

buah himpunan entitas, akan diwujudkan dalam bentuk tabel (file data)

khusus yang memiliki field (tepatnya Foreign Key) yang berasal dari key-

key dari himpunan entitas yang dihubungkannya.

2. Implementasi Himpunan Entitas Lemah dan Sub Entitas

Penggunaan himpunan entitas lemah (Weak Entity Sets) dan sub entitas

dalam Diagram E-R diimplementasikan dalam bentuk tabel sebagaimana

himpunan entitas kuat (Strong Entity Sets).

 36

3. Implementasi Relasi Tunggal (Unary Relation)

Implementasi relasi tunggal (Unary Relation) dari/ke himpunan entitas

yang sama Diagram E-R tergantung pada derajat relasinya.

4. Implementasi Relasi Multi Entitas (N-ary Relation)

Secara umum, relasi multi entitas yang menghubungkan lebih dari dua

himpunan entitas (N himpunan entitas, di mana N>2) akan diimplementasikan

sebagai sebuah tabel khusus (tentu saja, setiap himpunan entitas yang terlibat

dalam relasi juga akan direpresentasikan dalam tabel-tabel terpisah).

5. Implementasi Relasi Ganda (Redundant Relation)

Tidak ada yang istimewa dalam mengimplementasikan relasi ganda di

antara 2 himpunan entitas.

6. Implementasi Spesialisasi dan Generalisasi

Spesialisasi terhadap sebuah himpunan entitas akan menghasilkan

sejumlah himpunan entitas baru:satu himpunan entitas kuat/bebas yang akan

menjadi acuan bagi himpunan entitas lainnya dan sisanya merupakan sub

entitas.

7. Implementasi Agregasi

Sesungguhnya agregasi dapat dipandang sebagaimana relasi pada

umumnya (yang menghubungkan 2 himpunan entitas).

2.4.5 Pengujian Web

Menurut Rosa dan Shalahuddin (2013:272) menjelaskan bahwa

“Pengujian perangkat lunak adalah sebuah elemen sebuah topik yang memiliki
 37

cakupan luas dan sering dikaitkan dengan verifikasi (verification) dan validasi

(validation) (V&V)”. Verifikasi mengacu pada sekumpulan aktifitas yang

menjamin bahwa perangkat lunak mengimplementasikan dengan benar sebuah

fungsi yang spesifik.

Validasi mengacu pada sekumpulan aktifitas yang berbeda yang sesuai

dengan perangkat lunak yang dibangun dapat ditelusuri sesuai dengan kebutuhan

pelanggan (customer). Dapat juga dikatakan sebagai berikut:

1. Verifikasi

“Apakah produk dibangun dengan benar?” (lebih ke arah apakah proses

pengembangan produk sudah benar dan telah berhasil mengimplementasikan

fungsi yang benar)

2. Validasi

“Apakah sudah membangun produk yang benar?” (lebih ke arah hasil

produk apakah sudah sesuai dengan yang diinginkan)

Verifikasi dan validasi meliputi beberapa aktifitas yang sering disebut

sebagai jaminan kualitas perangkat lunak (Software Quality Assurance (SQA)).

Verifikasi dan validasi mencakup lingkup yang luas dari aktifitas SQA yang

didalamnya termasuk peninjauan teknis formal, audit kualitas dan konfigurasi,

performansi pengawasan (monitoring), simulasi, studi kemungkinan (feasibility),

peninjauan dokumentasi, peninjauan basis data, analisis algoritma, pengujian

proses pengembangan perangkat lunak, pengujian kualifikasi, dan pengujian

instalasi. Untuk melakukan pengujian diperlukan pendefinisian kasus uji (test case)

yang jelas. Pengujian hanya dilakukan dengan menjalankan atau mengeksekusi unit
 38

atau modul, kemudian diamati apakah hasil dari unit itu sesuai proses bisnis yang

diinginkan (Fatta, 2007:172).

Pengujian untuk validasi dilakukan dengan beberapa pendekatan salah

satunya yaitu black box testing. Black-Box Testing (pengujian kotak hitam) yaitu

menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan

kode program. Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi,

masukan dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang

dibutuhkan.

Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat

mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan

spesifikasi yang dibutuhkan. Blackbox testing untuk menguji perangkat lunak dari

segi spesifikasi fungsional tanpa menguji desain kode program (Rosa dan

Shalahudin, 2015:275).

Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus

dibuat dengan kasus benar dan kasus salah, misalkan untuk kasus proses login maka

kasus uji yang dibuat adalah:

1. Jika user memasukkan nama pemakai (username) dan kata sandi

(password) yang benar.

2. Jika user memasukkan nama pemakai (username) dan kata sandi

(password) yang salah, misalnya nama pemakai benar tapi kata sandi

salah, atau sebaliknya, atau keduanya salah.

 BAB III

ANALISIS DAN PERANCANGAN SISTEM

3.1. Objek Penelitian

Toko “Nuratih Fashion” merupakan sebuah usaha sederhana yang

dikembangkan dari perlahan mulai dari person to person menawarkan produk

dengan harga yang berkualitas yang sesuai dengan produk yang dijual. Adapun

produk yang dijual pada Toko “Nuratih Fashion” yaitu berbagai macam bentuk dan

motif baju , celana , kacamata , tas , hijab , jam tangan , sepatu , sandal , jaket , dsb.

Produk pria, wanita, maupun anak-anak lengkap dijual pada Toko “Nuratih

Fashion”. Toko “Nuratih Fashion” memiliki Visi dan Misi untuk kemajuan toko

sederhana yang didirikannnya yaitu menimbulkan rasa puas untuk pihak konsumen

karena kepuasan konsumen adalah kepuasan bagi penjual di Toko “Nuratih

Fashion”.

3.1.1 Struktur Organisasi dan Fungsi

PENGELOLA

( Fenny )

BAGIAN PEMASARAN BAGIAN ADMINISTRASI

( Ratih Kusuma ) ( Nuraini )

Gambar 3.I Stuktur Organisasi

39
 40

Pengelola

Mempunyai tugas sebagai seorang yang mengontrol semua transaksi

keuangan maupun produk yang akan dijual.

Bagian Pemasaran

Mempunyai tugas sebagai seorang yang memasarkan produk yang akan

dijual kepada konsumen.

Bagian Administrasi

Mempunyai tugas sebagai seorang yang membukukan pesanan konsumen

dan menyiapkan produk yang telah dipesan oleh konsumen.

3.2. Analisa Kebutuhan

Analisa kebutuhan sangat dibutuhkan dalam mendukung kinerja web

sehingga akan mendukung tercapainya tujuan dalam proses penjualan secara

online.

Dalam aplikasi e-commerce terdapat dua pengguna yang dapat saling

berinteraksi dalam lingkungan sistem, yaitu: pengguna web dan admin. Kedua

pengguna tersebut memiliki karakteristik interaksi dengan sistem yang berbeda-

beda dan memiliki kebutuhan informasi yang berbeda-beda, seperti berikut:

1. Kebutuhan Pengguna

a. Skenario Kebutuhan Pengunjung

1) Pengunjung hanya bisa melihat produk terlaris, produk terbaru,

berita fashion, cara pemesanan, hubungi kami & katalog produk

 41

tetapi tidak bisa membeli produknya. Syarat untuk bisa membeli

harus menjadi pelanggan (member) terlebih dahulu.

b. Skenario Kebutuhan Pelanggan / Member

1) Calon pelanggan/member harus mengisi data dengan lengkap

mengenai data diri dan alamat karena berkaitan dengan pengiriman

barang agar bisa berbelanja secara online.

2) Pengunjung yang sudah menjadi member bisa login dengan

memasukkan username dan password, setelah melakukan login,

maka member dapat melihat produk-produk yang hendak dibeli.

3) Member langsung dapat melakukan transaksi pembayaran.

4) Member bisa melihat keranjang belanja.

5) Member mengecek alamat pengiriman lagi dan pelanggan wajib

menyimpan bukti struk pembayaran.

c. Skenario Kebutuhan Administrator

1) Administrator dapat melakukan menginput data katalog barang.

2) Administrator dapat melakukan mengedit data barang, apabila ada

perubahan-perubahan data barang.

3) Administrator dapat melakukan menghapus data barang.

4) Administrator dapat melihat data pesanan yang dibeli oleh member.

5) Administrator dapat melihat laporan-laporan.

 42

2. Kebutuhan Sistem

1) Pengguna harus melakukan login terlebih dahulu untuk dapat mengakses

aplikasi ini dengan memasukan username dan password agar privasi

masing-masing pengguna tetap terjaga keamanannya.

2) Pengguna harus melakukan logout setelah menggunakan aplikasi.

3.3. Perancangan Perangkat Lunak

3.3.1. Rancangan Antar Muka

Rancangan antarmuka merupakan bagian yang paling penting dari

merancang program website. Untuk membuat website yang baik diperlukan

perencanaan dan perancangan yang terstruktur sehingga memperoleh website yang

memiliki kinerja dan efektifitas yang baik. Berikut rancangan antar muka yang

sudah dibuat:
 43

1. Rancangan Antar Muka Admin

a. Rancangan Antar Muka Login Admin

Merupakan halaman yang berisi form login admin. Konsep dari halaman

login admin seperti gambar dibawah ini:

Gambar 3.2 Rancangan Antar Muka Login Admin

b. Rancangan Antar Muka Halaman Utama Admin

Merupakan halaman yang berisi menu-menu berupa link yang

menghubungkan halaman ke halaman lain. Konsep dari halaman utama

admin seperti gambar dibawah ini:

 44

Gambar 3.3 Rancangan Antar Muka Halaman Utama Admin

c. Rancangan Antar Muka Data Member

Merupakan halaman untuk menampilkan data member yang sudah

menjadi member. Konsep dari halaman data member adalah seperti gambar

di bawah ini :
 45

Gambar 3.4 Rancangan Antar Muka Data Member

d. Rancangan Antar Muka Ganti Password

Merupakan halaman untuk mengganti password Admin. Konsep dari

halaman ganti Password seperti gambar di bawah ini :

 46

Gambar 3.5 Rancangan Antar Muka Ganti Password

e. Rancangan Antar Muka Kelola Berita

Merupakan halaman untuk melihat, mengedit, dan menghapus berita

tentang fashion. Konsep dari halaman kelola berita seperti gambar di bawah

ini :
 47

Gambar 3.6 Rancangan Antar Muka Kelola Berita

f. Rancangan Antar Muka Edit Berita

Merupakan halaman untuk mengedit judul berita, isi berita dan gambar

berita. Konsep dari halaman edit berita adalah seperti gambar dibawah ini :
 48

Gambar 3.7 Rancangan Antar Muka Edit Berita

g. Rancangan Antar Muka Data Barang

Halaman data barang merupakan halaman yang memuat daftar produk.

Disini admin menambah, mengedit dan menghapus daftar barang. Konsep

dari halaman data barang adalah seperti gambar dibawah ini :

 49

Gambar 3.8 Rancangan Antar Muka Data Barang

h. Rancangan Antar Muka Input Data Barang

Halaman input data barang merupakan halaman yang memuat data

barang. Disini admin menambah jumlah data barang. Konsep dari halaman

input data barang adalah seperti gambar dibawah ini :

 50

Gambar 3.9 Rancangan Antar Muka Input Data Barang

i. Rancangan antar Muka Edit Data Barang

Merupakan halaman untuk mengedit semua data barang yang sudah

tersimpan. Konsep dari halaman edit barang adalah seperti gambar dibawah

ini :
 51

Gambar 3.10 Rancangan Antar Muka Edit Data barang

j. Rancangan Antar Muka Data Pesanan

Merupakan halaman untuk menampilkan data pesanan dari

transaksi.Konsep dari halaman data pesanan adalah seperti gambar dibawah

ini :
 52

Gambar 3.11 Rancangan Antar Muka Data Pesanan

k. Rancangan Antar Muka Detail Pesanan

Merupakan halaman untuk menampilkan detail pesanan dari

transaksi.Konsep dari halaman detail pesanan adalah seperti gambar dibawah

ini :
 53

Gambar 3.12 Rancangan Antar Muka Detail Pesanan

l. Rancangan Antar Muka Konfirmasi Pembayaran

Merupakan halaman untuk menampilkan Konfirmasi Pembayaran yang

telah dilakukan oleh member dari transaksi pembelian.Konsep dari halaman

konfirmasi pembayaran adalah seperti gambar dibawah ini :

 54

Gambar 3.13 Rancangan Antar Muka Konfirmasi Pembayaran

 55

2. Rancangan Antar Muka Pengunjung Umum

a. Rancangan Antar Muka Halaman Utama

Merupakan halaman yang berisi sapaan selamat datang kepada

pengunjung. Halaman utama tampil ketika website ini pertama kali diakses.

Halaman ini terdiri dari menu utama dan link yang terhubung ke halaman

lain. Pada halaman ini juga terdapat beberapa menu dan tampilan tambahan

seperti semua produk, keranjang belanja, media pembayaran, dsb. Konsep

dari halaman utama seperti gambar dibawah ini:

Gambar 3.14 Rancangan Halaman Utama

 56

b. Rancangan Antar Muka Semua Produk

Merupakan halaman yang berisi informasi tentang semua produk yang

dijual. Konsep dari halaman cara pemesanan seperti gambar dibawah ini :

Gambar 3.15 Rancangan Antar Muka Semua Produk

c. Rancangan Antar Muka Cara Pesan

Merupakan halaman yang berisi informasi mengenai cara pesan yang

dapat dilakukan melalui beberapa media komunikasi, misalnya email, SMS,

YM, dsb. Konsep dari halaman cara pemesanan seperti gambar dibawah ini :
 57

Gambar 3.16 Rancangan Antar Muka Cara Pesan

 58

d. Rancangan Antar Muka Berita Fashion.

Merupakan halaman yang berisi informasi mengenai berita terbaru

mengenai perkembangan fashion. Konsep dari halaman hubungi kami seperti

gambar dibawah ini:

Gambar 3.17 Rancangan Antar Muka Berita Fashion

 59

e. Rancangan Antar Muka Hubungi Kami

Merupakan halaman yang berisi informasi mengenai kontak yang bisa

dihubungi ataupun hal informasi yang diinginkan oleh pengunjung website.

Konsep dari halaman hubungi kami seperti gambar dibawah ini:

Gambar 3.18 Rancangan Antar Muka Hubungi Kami

f. Rancangan Antar Muka Pendaftaran Member

Merupakan halaman yang berisi form untuk mendaftar sebagai member

baru. Konsep dari halaman pendaftaran member seperti gambar di bawah

ini:
 60

Gambar 3.19 Rancangan Antar Muka Pendaftaran Member

3. Rancangan Antar Muka Member

a. Rancangan Antar Muka Login Member

Merupakan halaman yang berisi form login member dan form

pendaftaran member. Konsep dari halaman login member seperti gambar

dibawah ini :
 61

Gambar 3.20 Rancangan Antar Muka Login Member

b. Rancangan Antar Muka Beranda Member

Merupakan halaman utama member. Konsep dari halaman login member

seperti gambar dibawah ini :

 62

Gambar 3.21 Rancangan Antar Muka Beranda Member

c. Rancangan Antar Muka Member Semua Produk

Merupakan halaman yang berisi daftar produk yang dijual. Terdapat

tombol beli untuk melakukan transaksi pembelian. Konsep dari halaman

katalog produk seperti gambar dibawah ini :

 63

Gambar 3.22 Rancangan Antar Muka Semua Produk Member

d. Rancangan Antar Muka Member Cara Pemesanan

Merupakan halaman yang berisi informasi mengenai cara pesan yang

dapat dilakukan melalui beberapa media komunikasi, misalnya email, SMS,

YM, dsb. Konsep dari halaman cara pemesanan seperti gambar dibawah ini :
 64

Gambar 3.23 Rancangan Antar Muka Cara Pemesanan Member

e. Rancangan Antar Muka Member Berita Fashion

Merupakan halaman yang berisi informasi mengenai berita terbaru

mengenai perkembangan fashion. Konsep dari halaman hubungi kami seperti

gambar dibawah ini:

 65

Gambar 3.24 Rancangan Antar Muka Berita Fashion Member

f. Rancangan Antar Muka Member Hubungi Kami

Merupakan halaman yang berisi informasi mengenai kontak yang bisa

dihubungi ataupun hal informasi yang diinginkan oleh member website.

Konsep dari halaman hubungi kami seperti gambar dibawah ini:

 66

Gambar 3.25 Rancangan Antar Muka Hubungi Kami Member

g. Rancangan Antar Muka Member Keranjang Belanja

Merupakan halaman yang tampil ketika member mengklik tombol beli.

Halamaan ini berisi data produk yang hendak dibeli. Konsep dari halaman

keranjang belanja seperti gambar dibawah ini:

 67

Gambar 3.26 Rancangan Antar Muka Keranjang Belanja

h. Rancangan Antar Muka Member Alamat Pengiriman

Merupakan halaman khusus Member untuk mengisi alamat pengiriman

barang . Konsep dari halaman alamat pengiriman seperti gambar di dibawah

ini :
 68

Gambar 3.27 Rancangan Antar Muka Alamat Pengiriman

i. Rancangan Antar Muka Member Cetak Struk

Merupakan halaman khusus Member untuk mencetak struk bukti

pembelian. Konsep dari halaman alamat pengiriman seperti gambar di

dibawah ini :
 69

Gambar 3.28 Rancangan Antar Muka Member Cetak Struk

j. Rancangan Antar Muka Member Konfirmasi Pembayaran

Merupakan halaman khusus Member untuk melakukan konfirmasi

pembayaran, apabila member sudah melakukan transfer. Konsep dari

halaman alamat pengiriman seperti gambar di dibawah ini :

 70

Gambar 3.29 Rancangan Antar Muka Member Konfirmasi Pembayaran

3.3.2. Rancangan Basis Data

Basis data adalah sebuah sistem file-file yang terintegrasi yang mempunyai

minimal primary key untuk pengulangan data. Basis data mempunyai fungsi untuk

menggambarkan hubungan antar tabel yang dibuat beserta relasi antar tabel. Dalam

penggambaran kali ini, akan dijelaskan penggambaran basis data menggunakan

Entity Relationship Diagram (ERD), Logical Relational Structure (LRS), Struktur

Navigasi dan Spesifikasi File sebagai berikut:

 71

1. Entity Relationship Diagram (ERD)

Enity Relationship Diagram menjelaskan hubungan antar data dalam basis

data yang terdiri dari object-object dasar yang mempunyai hubungan atau relasi

antar object-object tersebut. Dalam ERD hubungan atau relasi dapat terdiri dari

sejumlah entitas yang disebut dengan derajat relasi. ERD yang ada pada sistem ini

sebagai berikut:
Gambar 3.30 Entity Relationship Diagram (ERD)
72
 73

2. Logical Relational Structure (LRS)

Logical Relational Structure menjelaskan cara transformasi model data yang

dalam Diagram E-R dalam basis data fisik. LRS yang ada pada sistem ini sebagai

berikut:

Gambar 3.31 Logical Relational Structure (LRS)

 74

3. Spesifikasi File

Dalam membuat website ini penulis menggunakan satu buah file database

dengan nama kerajinanku.sql didalam database tersebut terdapat beberapa tabel,

adapun tabel tersebut adalah:

1. Spesifikasi File Tabel Barang

Nama File : Barang

Akronim : barang

Fungsi : untuk menyimpan data barang

Tipe File : File Master

Organisasi File : index sequential

Akses File : random

Panjang Record : 89 Karakter

Kunci Field : kodebarang

Software : MySql
 75

Tabel 3.1 Spesifikasi File Tabel Barang

No Element Data Field Type Size Keterangan

1 Kode Barang kodebarang Varchar 10 Primary key

2 Nama Barang namabarang Varchar 50

4 Harga Harga Int 7

5 Spesifikasi spesifikasi Text

6 Gambar gambar Varchar 20

7 Stok Stok Int 2

2. Spesifikasi File Tabel Pelanggan

Nama File : Pelanggan

Akronim : pelanggan

Fungsi : untuk menyimpan data pelanggan

Tipe File : File Master

Organisasi File : index sequential

Akses File : random

Panjang Record : 181 Karakter

 76

Kunci Field : idpelanggan

Software : MySql

Tabel 3.2 Spesifikasi File Tabel Pelanggan

No Emenet Data Field Type Size Keterangan

1 Id Pelanggan idpelanggan Varchar 7 Primary key

Nama

2 Pelanggan nama_pelanggan Varchar 20

3 Alamat alamat Varchar 100

4 Email email Varchar 30

5 Telepon telepon Varchar 12

6 Password password Varchar 12

 77

3. Spesifikasi File Tabel Pemesanan

Nama File : Pemesanan

Akronim : pemesanan

Fungsi : untuk menyimpan data pesanan

Tipe File : File Transaksi

Organisasi File : index sequential

Akses File : random

Panjang Record : 40 Karakter

Kunci Field : no_pesan

Software : MySql
 78

Tabel 3.3 Spesifikasi File Tabel Pemesanan

No Element Data Field Type Size Keterangan

1 No Pesan no_pesan Varchar 10 Primary key

2 Tanggal Pesan tgl_pesan Date

3 Kode Barang kodebarang Varchar 10

4 Id Pelanggan idpelanggan Varchar 10

5 Jam Pesan jam_pesan Time

6 Status Pesan status_pesan Varchar 10

 79

4. Spesifikasi File Tabel Pemesanan Detail

Nama File : Pemesanan Detail

Akronim : pemesanan_detail

Fungsi : untuk menyimpan data pemesanan_detail

Tipe File : File Transaksi

Organisasi File : index sequential

Akses File : random

Panjang Record : 31 Karakter

Kunci Field :-

Software : MySql

Tabel 3.4 Spesifikasi File Tabel Pemesanan Detail

No Element Data Field Type Size Keterangan

1 No Pesan no_pesan Varchar 10 Primary key

2 Kode Barang kodebarang Varchar 10

3 Jumlah jumlah Int 11

 80

5. Spesifikasi File Tabel Pengiriman

Nama File : Pengiriman

Akronim : pengiriman

Fungsi : untuk menyimpan data pengiriman

Tipe File : File Transaksi

Organisasi File : index sequential

Akses File : random

Panjang Record : 23 Karakter

Kunci Field : id_kirim

Software : MySql

Tabel 3.5 Spesifikasi File Tabel Pengiriman

No Element Data Field Type Size Keterangan

1 Id Kirim id_kirim Varchar 10 Primary key

2 Tanggal Kirim tgl_kirim Date

3 Jam Kirim jam_kirim Time

4 No Pesan no_pesan Varchar 10

5 User Id user_id Varchar 3

 81

6. Spesifikasi File Tabel Belanja

Nama File : Belanja

Akronim : belanja

Fungsi : untuk menyimpan data Belanja

Tipe File : File Transaksi

Organisasi File : index sequential

Akses File : random

Panjang Record : 42 Karakter

Kunci Field : id_kantong

Software : MySql
 82

Tabel 3.6 Spesifikasi File Tabel Kantong

No Element Data Field Type Size Keterangan

1 Id Kantong id_kantong Int 11 Primary key

2 Kode Barang kodebarang Varchar 10

3 Jumlah jumlah Int 11

4 Tanggal Kantong tgl_kantong Date

5 Jam Kantong jam_kantong Time

6 Id Pelanggan idpelanggan Varchar 10

 83

7. Spesifikasi File Tabel Admin

Nama File : Admin

Akronim : Admin

Fungsi : untuk menyimpan data login admin

Tipe File : File Master

Organisasi File : index sequential

Akses File : random

Panjang Record : 33 Karakter

Kunci Field :-

Software : MySql

Tabel 3.7 Spesifikasi File Tabel Admin

No Akronim Field Type Size Keterangan

1 User Id user_id Varchar 3 Primary Key

2 Username Username Varchar 15

3 Password Password Varchar 15

 84

3.3.3. Rancangan Struktur Navigasi

Struktur Navigasi website digunakan untuk menggambarkan secara garis

besar isi dari seluruh web dan menggambarkan bagaimana hubungan antara isi-isi

tersebut. Struktur navigasi website ini adalah struktur navigasi campuran

(composite). Melalui struktur navigasi website ini, terlihat bagaimana isi dan

susunan dari sebuah website secara menyeluruh.

Pembuatan struktur navigasi website ini akan sangat membantu nantinya

ketika akan membuat rancangan seluruh halaman web. Struktur website yang baik

adalah yang mampu memberitahukan kepada pengunjung tentang lokasi mereka

sekarang, lokasi-lokasi yang bisa dikunjungi dari lokasi sekarang.

 1.
Struktur Navigasi Admin
85

Gambar 3.32 Struktur Navigasi Admin

 2.
Struktur Navigasi User
86

Gambar 3.33 Struktur Navigasi User

 3.
Struktur Navigasi Pengunjung

Gambar 3.34 Struktur Navigasi Pengunjung

87
 BAB IV

HASIL DAN PEMBAHASAN

4.1 Hasil Penelitian

Pengujian sistem dilakukan untuk mengetahui fungsi sistem dapat berfungsi

dengan baik di mana sistem dapat di jalankan sesuai dengan proses perancangan

yang sudah dibuat. Berikut merupakan hasil pengujian yang telah di lakukan.

4.1.1 Spesifikasi Sistem Komputer

Secara garis besar untuk mendukung berjalannya sistem komputer maka

dibutuhkan tambahan perangkat pendukung yang dapat membantu data dapat

terintegrasi dan berjalan dengan baik. Sebelum melaksanakan suatu sistem

komputerisasi, diperlukan beberapa persiapan, baik dalam hal kebutuhan

spesifikasi perangkat keras dan perangkat lunak untuk mengimplementasikan

aplikasi program atau komputerisasi sistem yang efektif dan efisien.

a. Spesifikasi Perangkat Keras

Perangkat keras (hardware) adalah seluruh komponen yang membentuk

suatu sistem komputer dan peralatan yang memungkinkan komputer dapat

melaksanakan tugasnya. Seperti dibawah ini:

88
 89

a) Server

1) CPU

(1) Processor core i3

(2) RAM 2 ,00 GB

(3) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Monitor dengan Resolusi Layar minimum 1024 x 768

5) Koneksi internet dengan kecepatan 2 Mbps.

b) Client

1. CPU

(1) Processor Pentium 4

(2) RAM 512 MB

(3) Hard Disk 60 GB

2. Mouse

3. Keyboard

4. Monitor dengan Resolusi Layar minimum 1024 x 768

5. Koneksi internet dengan kecepatan 2 Mbps.

b. Spesifikasi Perangkat Lunak

Bagian penting yang mendukung program adalah perangkat lunak (software)

yang digunakan untuk menjalankan program tersebut. Perangkat lunak yang

dibutuhkan untuk menjalankan aplikasi program penjualan kerajinan tangan ini

adalah:
 90

a) Server

a. Sistem operasi : Microsoft Windows

b. Aplikasi web server seperti Xampp yang terdiri dari beberapa

komponen, diantaranya:

(1) Aplikasi Xampp

(2) Aplikasi PHP Server

(3) Aplikasi MySQL Server

(4) Aplikasi phpMyAdmin

c. Aplikasi Web browser : Mozilla Firefox, Google Chrome

b) Client

a. Sistem Operasi: Microsoft Windows, linux

b. Aplikasi Web Browser : Mozilla Firefox, Google Chrome

4.2 Implementasi dan Pengujian Unit

4.2.1 Implementasi

1. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada aplikasi program berdasarkan

hasil rancangan antar muka.

a. Implementasi Halaman Login Admin

Merupakan halaman yang berisi form login admin. Konsep dari halaman

login admin seperti gambar dibawah ini:

 91

Nuratih Fashion

Gambar 4.1 Implementasi Halaman Login Admin

b. Implementasi Halaman Utama Admin

Merupakan halaman yang berisi menu-menu berupa link yang

menghubungkan halaman ke halaman lain. Konsep dari halaman utama

admin seperti gambar dibawah ini:

 92

Nuratih Fashion

Nuratih Fashion

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.2 Implementasi Halaman Utama Admin

c. Implementasi Halaman Data Member

Halaman data member merupakan halaman yang memuat semua data

member. Disini admin dapat menghapus member yang ada. Konsep dari

halaman data member adalah seperti gambar dibawah ini :

 93

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.3 Implementasi Halaman Data Member

d. Implementasi Halaman Password

Halaman password merupakan halaman untuk melihat id admin, nama

admin, dan password admin. Disini admin dapat merubah nama admin dan

password. Konsep dari halaman password adalah seperti gambar dibawah ini:
 94

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.4 Implementasi Halaman Password

e. Implementasi Halaman Kelola Berita

Halaman kelola berita merupakan halaman untuk mengelola berita-berita

fashion yang akan di tampilkan di halaman pengunjung dan halaman member.

Konsep dari halaman ini adalah seperti gambar dibawah ini :

 95

Gambar 4.5 Implementasi Halaman Kelola Berita

 96

f. Implementasi Halaman Data Barang

Halaman data barang merupakan halaman yang memuat daftar produk.

Disini admin menambah, mengedit dan menghapus daftar barang. Konsep

dari halaman data barang adalah seperti gambar dibawah ini :

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.6 Implementasi Halaman Data Barang

 97

g. Implementasi Halaman Data Pesanan

Halaman data pesanan merupakan halaman yang memuat daftar pesanan

member. Disini admin hanya bisa menghapus data pesanan dan melihat detail

pesan. Konsep dari halaman data pesanan adalah seperti gambar dibawah ini:

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.7 Implementasi Halaman Data Pesanan

 98

h. Implementasi Halaman Laporan Penjualan

Halaman laporan Penjualan merupakan halaman yang memuat daftar

transaksi yang sudah di lakukan dan barang sudah terkirim. Konsep dari

halaman laporan penjualan adalah seperti gambar dibawah ini:

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.8 Implementasi Halaman Laporan Penjualan

i. Implementasi Halaman Konfirmasi

Halaman konfirmasi adalah halaman untuk melihat daftar konfirmasi

pembayaran. Disini admin hanya bisa menghapus data konfirmasi. Konsep

dari halaman konfirmasi adalah seperti gambar dibawah ini:

 99

Copright @2018 Nuratih Fashion by Yuli P

Gambar 4.9 Implementasi Halaman Konfirmasi Pembayaran

j. Implementasi Halaman Utama

Halaman utama tampil ketika website ini pertama kali diakses. Halaman

ini terdiri dari menu utama dan link yang terhubung ke halaman lain. Pada

halaman ini juga terdapat beberapa menu dan tampilan tambahan seperti

semua produk, cara pemesanan, berita fashion, member login, dan

sebagainya. Konsep dari halaman utama seperti gambar dibawah ini:

 100

Gambar 4.10 Implementasi Halaman Utama

k. Implementasi Halaman Semua Produk

Merupakan halaman yang berisi daftar produk yang dijual. Terdapat

tombol beli untuk melakukan transaksi pembelian. Konsep dari halaman

semua produk seperti gambar dibawah ini :

 101

Gambar 4.11 Implementasi Halaman Semua Produk

l. Implementasi Halaman Cara Pesan

Merupakan halaman yang berisi informasi mengenai cara pesan yang

dapat dilakukan melalui beberapa media komunikasi, misalnya email, SMS,

YM, dsb. Konsep dari halaman cara pemesanan seperti gambar dibawah ini :
 102

Gambar 4.12 Implementasi Halaman Cara Pesan

m. Implementasi Halaman Berita Fashion

Merupakan halaman yang berisi berita tentang fashion. Konsep dari

halaman berita fashion seperti gambar dibawah ini :

 103

Gambar 4.13 Implementasi Halaman Berita Robotika

n. Implementasi Halaman Hubungi Kami

Merupakan halaman yang berisi form untuk pengunjung /member jika

ada yang mau di tanyakan. Konsep dari halaman hubungi kami seperti

gambar dibawah ini :

 104

Gambar 4.14 Implementasi Halaman Hubungi Kami

o. Implementasi Halaman Pendaftaran Member

Merupakan halaman yang berisi form untuk mendaftar sebagai member

baru. Konsep dari halaman pendaftaran member seperti gambar dibawah ini:
 105

Gambar 4.15 Implementasi Halaman Pendaftaran Member

p. Implementasi Halaman Login Member

Merupakan halaman yang berisi form login member dan form

pendaftaran member. Konsep dari halaman login member seperti gambar

dibawah ini :
 106

Gambar 4.16 Implementasi Halaman Login Member

q. Implementasi Halaman Utama Member

Merupakan halaman utama setelah member melakukan login. Konsep

dari halaman utama member seperti gambar dibawah ini :

 107

Gambar 4.17 Implementasi Halaman Utama Member

r. Implementasi Halaman Konfirmasi

Merupakan halaman untuk member melakukan konfirmasi pembayaran,

setelah melakukan transfer. Konsep dari halaman utama konfirmasi seperti

gambar dibawah ini :

 108

Gambar 4.18 Implementasi Halaman Konfirmasi

s. Implementasi Halaman Keranjang Belanja

Merupakan halaman yang tampil ketika member mengklik tombol beli.

Halamaan ini berisi data produk yang akan dibeli. Konsep dari halaman

keranjang belanja seperti gambar diabawah ini:

 109

Gambar 4.19 Implementasi Halaman Keranjang Belanja

t. Implementasi Halaman Alamat Pengiriman

Merupakan halaman untuk mengisi alamat pengiriman barang. Konsep

dari halaman alamat pengiriman seperti gambar diabawah ini:

 110

Gambar 4.20 Implementasi Halaman Alamat pengiriman

u. Implementasi Halaman Struk Pembelian

Merupakan halaman yang menampilkan struk pembelian yang dilakukan

oleh member. Konsep dari halaman struk pembelian seperti gambar di

dibawah ini :
 111

Gambar 4.21 Implementasi Halaman Struk Pembelian

 112

4.2.2 Pengujian Unit

Pengujian untuk validasi dilakukan dengan beberapa pendekatan salah

satunya yaitu black box testing. Black-Box Testing (pengujian kotak hitam) yaitu

menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan

kode program. Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi,

masukan dan keluaran dari perangkat lunak sesuai dengan spasifikasi yang

dibutuhkan.

A. Pengujian Terhadap Form Login Admin

Tabel 4.1 Tabel Skenario Pengujian Login Admin

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian diharapkan Pengujian

1. User Id dan User Id : Sistem akan Sesuai Valid

Password (kosong) menolak akses Harapan

tidak diisi user dan

Password
kemudian klik menampilkan “
: (kosong)
tombol login Anda Gagal

Login !!”
 113

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

2. Mengetikan User Id : Sistem akan Sesuai Valid

User Id dan ratih menolak akses Harapan

Password user dan

Password
tidak diisi atau menampilkan “
:
kosong Anda Gagal
(Kosong)
kemudian klik Login !!”

tombol login

3. User Id tidak User Id : Sistem akan Sesuai Valid

diisi (kosong) (Kosong) menolak akses Harapan

dan Password user dan

Password
diisi kemudian menampilkan “
: 12345
klik tombol Anda Gagal

login Login !!”

4. Mengetikan User Id : Sistem akan Sesuai Valid

salah satu ratih menolak akses Harapan

kondisi salah (benar) user dan

pada User Id menampilkan “

Password
atau Password Anda Gagal
: semprul
kemudian klik Login !!”
(salah)
tombol login
 114

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

5. Mengetikkan User Id : Sistem Sesuai

User Id dan ratih menerima Harapan

Valid
Password (benar) akses login dan

dengan data kemudian

Password
yang benar langsung
: 12345
kemudian klik menampilkan
(benar)
tombol login menu utama.

B. Pengujian Terhadap Form Login Member

Tabel 4.2 Tabel Skenario Pengujian Login Member

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian diharapkan Pengujian

1. User name Username Sistem akan Sesuai Valid

dan Password : (kosong) menolak akses Harapan

tidak diisi member dan

Password :
kemudian menampilkan “
(kosong)
klik tombol Anda Gagal

login Login !!”

 115

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

2. Mengetikan Username Sistem akan Sesuai Valid

Username : hany menolak akses Harapan

dan Password member dan

Password :
tidak diisi menampilkan “
(Kosong)
atau kosong Anda Gagal

kemudian Login !!”

klik tombol

login

3. Username Username Sistem akan Sesuai Valid

tidak diisi : (Kosong) menolak akses Harapan

(kosong) dan member dan

Password :
Password menampilkan “
hany
diisi Anda Gagal

kemudian Login !!”

klik tombol

login
 116

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

4. Mengetikan Username Sistem akan Sesuai Valid

salah satu : hany menolak akses Harapan

kondisi salah (benar) user dan

pada menampilkan “
Password :
Username Anda Gagal
nuratih
atau Login !!”
(salah)
Password

kemudian

klik tombol

login

5. Mengetikkan Username Sistem Sesuai

Username : hany menerima Harapan

Valid
dan Password (benar) akses login dan

dengan data kemudian

Password :
yang benar langsung
hany
kemudian menampilkan
(benar)
klik tombol halaman utama

login utama member.

 117

C. Pengujian Terhadap Form Pendaftaran Member

Tabel 4.3 Tabel Skenario Pengujian Pendaftaran Member

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian diharapkan Pengujian

1. Nama, Alamat, Nama : Sistem akan Sesuai Valid

Telepon, (kosong) menolak akses Harapan

Email, User member dan

Alamat:
dan Password menampilkan
(kosong)
tidak diisi “Data Yang
Telepon :
kemudian klik Anda
(kosong)
tombol Daftar Masukkan

Email: Belum

(kosong) Lengkap,

User : Ulangi Lagi !!”

(kosong)

Password :

(kosong)
 118

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

2. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama andy menolak akses Harapan

sedangkan member dan

Alamat:
Alamat, menampilkan
(kosong)
Telepon, “Data Yang
Telepon :
Email, User Anda
(kosong)
dan Password Masukkan

tidak diisi Email: Belum

kemudian klik (kosong) Lengkap,

tombol Daftar User : Ulangi Lagi !!”

(kosong)

Password :

(kosong)
 119

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

3. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama, Alamat andy menolak akses Harapan

sedangkan member dan

Alamat:
Telepon, menampilkan
sragen
Email, User “Data Yang
Telepon :
dan Password Anda
(kosong)
tidak diisi Masukkan

kemudian klik Email: Belum

tombol Daftar (kosong) Lengkap,

User : Ulangi Lagi !!”

(kosong)

Password :

(kosong)
 120

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

4. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama, Alamat, andy menolak akses Harapan

Telepon member dan

Alamat:
sedangkan menampilkan
sragen
Email, User “Data Yang
Telepon :
dan Password Anda
08569785
tidak diisi Masukkan
201
kemudian klik Belum

tombol Daftar Email: Lengkap,

(kosong) Ulangi Lagi !!”

User :

(kosong)

Password :

(kosong)
 121

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

5. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama, Alamat, andy menolak akses Harapan

Telepon, member dan

Alamat:
Email menampilkan
sragen
sedangkan “Data Yang
Telepon :
User dan Anda
08569785
Password Masukkan
201
tidak diisi Belum

kemudian klik Email: Lengkap,

tombol Daftar andy.octa Ulangi Lagi !!”

@gmail.co

User :

(kosong)

Password :

(kosong)
 122

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

6. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama, Alamat, andy menolak akses Harapan

Email, member dan

Alamat:
Telepon ,User menampilkan
sragen
sedangkan “Data Yang
Telepon :
Password Anda
08569785
tidak diisi Masukkan
201
kemudian klik Belum

tombol Daftar Email: Lengkap,

andy.octas Ulangi Lagi !!”

@gmail.co

User :

andy

Password :

(kosong)
 123

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

7. Mengetikkan Nama : Sistem Sesuai Valid

andy menerima Harapan

Nama, Alamat,
akses
Telepon, Alamat:
pendaftaran
Email, User sragen
member dan
dan Password
Telepon :
kemudian
kemudian klik
08569785
langsung
tombol Daftar
201
menampilkan “

Email: Anda Berhasil

andy.octa Daftar “
@gmail.co

User :

andy

Password :

nuratih18
 124

D. Pengujian Terhadap Layanan Hubungi Kami

Tabel 4.4 Tabel Skenario Pengujian Hubungi Kami

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian diharapkan Pengujian

1. Nama, Email, Nama : Sistem akan Sesuai Valid

Alamat, Pesan (kosong) menolak akses Harapan

tidak diisi dan

Email:
kemudian klik menampilkan
(kosong)
tombol Kirim “Nama tidak
Alamat:
pesan boleh kosong
(kosong)
!”
Pesan :

(kosong)
 125

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

2. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama, andy menolak akses Harapan

sedangkan dan
Email:
Email, Alamat, menampilkan
(kosong)
Pesan tidak “Email tidak
Alamat:
diisi kemudian boleh kosong
(kosong)
klik tombol !”

Kirim pesan Pesan :

(kosong)

3. Mengetikkan Nama : Sistem akan Sesuai Valid

Email, Nama andy menolak akses Harapan

,sedangkan, dan
Email:
Alamat, Pesan menampilkan
andy.octa
tidak diisi “Alamat tidak
@gmail.co
kemudian klik boleh kosong
m
tombol Kirim !”
Alamat:
pesan
(kosong)

Pesan :

(kosong)
 126

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

4. Mengetikkan Nama : Sistem akan Sesuai Valid

Nama, Email, andy menolak akses Harapan

alamat dan
Email:
sedangkan menampilkan
andy.octa
Pesan tidak “Pesan tidak
@gmail.co
diisi kemudian boleh kosong
m
klik tombol !”
Alamat:
Kirim pesan
sragen

Pesan :

(kosong)
 127

No. Skenario Test Case Hasil Yang Hasil Kesimpulan

Pengujian Diharapkan Pengujian

5. Mengetikkan Nama : Sistem Sesuai Valid

Nama, Email, andy menerima Harapan

Alamat, Pesan akses dan

Email:
kemudian klik kemudian
andy.octa
tombol Kirim langsung
@gmail.co
pesan menampilkan “
m
Pesan Terkirim
Alamat:
“
sragen

Pesan :

Produk

Jumpsuit

nya belum

ada ya???
 BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan hasil dan pembahasan yang telah diuraikan pada bab

sebelumnya, dapat diambil kesimpulan yaitu:

1. Dengan sistem informasi penjualan yang sudah dibuat, konsumen dapat

mengakses web penjualan Nuratih Fashion dengan mudah.

2. Dengan menggunakan sistem yang sudah dibuat, Nuratih Fashion dapat

mengurangi munculnya data produk yang sama pada saat produk dipasarkan

kepada konsumen.

5.2 Saran

Adapun saran dari penulis untuk pengembang selanjutnya adalah sebagai

berikut:

1. Ketelilitan pada saat input produk harus diperhatikan, karena data produk

yang diinput tidak boleh ganda.

2. Perawatan Sistem harus diperhatikan karena bersifat online maka antivirus

harus kuat agar PC tidak terserang virus.

128
 DAFTAR PUSTAKA

Ellitan, Lena. 2007. Strategi Bersaing Dalam Service Driven-Economy.

Yogyakarta: CV. Andi Offset.

Fathansyah. 2007. Basis Data. Bandung: Informatika.

Harjono. 2009. Mendayagunakan Internet

Helianthusonfri, Jefferly. 2013. Website Gratis dan Praktis, Hasil Fantastis.

Jakarta : PT. Elex Media Komputindo.

Kustiyahningsih, Yeni dan Devi Rosa Anamisa. 2011. Pemograman Basis Data
Berbasis Web Menggunakan PHP & MySQL. Yogyakarta : Graha Ilmu.

Madcoms Madiun. 2010. Adobe Dreamweaver CS5 dengan Pemograman PHP &
MySQL. Yogyakarta : Andi Offset.

Nugroho, Adi . 2009. Konsep Pengembangan Basis Data. Bandung:

Informatika Bandung.

Prasetio, Adhi. 2012. Buku Pintar Pemograman Web. Jakarta : Media Kita.

Prasetio, Adhi. 2014. Buku Sakti Webmaster PHP & MySQL, HTML & CSS,
HTML5 & CSS3, Javascript. Jakarta : Media Kita.

Rosa, A.S dan M. Shalahuddin. 2013. Rekayasa Perangkat Lunak Terstruktur dan
Berorientasi Objek. Bandung : Informatika.

Sidik, Betha. 2012. Pemograman Web dengan PHP. Bandung : Informatika.

Simarmata, Janner dan Imam Paryudi. 2006. Basis Data. Yogyakarta : Andi
Offset.

Sutarman. 2009. Pengantar Teknologi Informasi. Jakarta : Bumi Aksara.

Sutopo, Ariesto Hadi . 2007. Pemrograman Flash dengan PHP dan MySQL.
Yogyakarta: Graha Ilmu.

Wahana Komputer. 2011. Tutorial 5 Hari Menggunakan Adobe Photoshop CS5.

Yogyakarta : Andi Offset.

Yakub. 2008. Sistem Basis Data, Tutorial Konseptual. Yogyakarta : Graha Ilmu.

129
 Lampiran A.1. Halaman Detail Order

107
 Lampiran A.2. Halaman Detail Produk

108
 Lampiran A.3. Halaman Detail Berita

109
Lampiran B.1. Halaman Struk Pembelian

110
Lampiran B.2. Halaman Konfirmasi Pembayaran

111
Lampiran C.1. Halaman Edit Data Barang

112
 Lampiran C.2. Halaman Edit Berita

113
 Lampiran D.1. Halaman Data Order

114