SISTEM INFORMASI PENJUALAN KAOS SABLON

BINATANG BERBASIS WEB PADA PRIOK SABLON

JAKARTA

TUGAS AKHIR
Diajukan untuk memenuhi salah satu syarat kelulusan Diploma Tiga (D.III)

ENDRANUS GEDO
NIM: 12132031

Program Studi Manajemen Informatika

Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika
Jakarta
2017
ii
iii
iv
v
v
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas

limpahan berkat dan rahmat-Nya, sehingga pada akhirnya penulis dapat

menyelesaikan tugas ini dengan baik. Dimana tugas akhir ini penulis sajikan

dalam bentuk buku yang sederhana. Adapun judul tugas akhir, yang penulis

ambil sebagai berikut, “Sistem Informasi Penjualan Kaos Sablon Binatang

Berbasis Web Pada Priok Sablon”.

Tujuan penulisan tugas akhir ini dibuat sebagai salah satu syarat

kelulusan program Diploma Tiga (D.III) Akademi Manajemen Informatika dan

Komputer Bina Sarana Informatika. Sebagai bahan penulisan diambil berdasarkan

hasil penelitian (eksperimen), observasi dan beberapa sumber literatur yang

mendukung penulisan ini. Penulis menyadari bahwa tanpa bimbingan dan

dorongan dari semua pihak, maka penulisan tugas akhir ini tidak akan lancar.

Oleh karena itu pada kesempatan ini, izinkanlah penulis menyampaikan ucapan

terima kasih kepada:

1. Direktur Akademi Manajemen Informatika dan Komputer Bina Sarana

Informatika.

2. Ketua Program Studi Manajemen Informatika AMIK BSI.

3. Amrin S.Si, M.Kom selaku Dosen Pembimbing Tugas Akhir.

4. Yusriel Arief Ferdiyanto, ST. MMSi selaku Asisten Pembimbing Tugas Akhir.

5. Staff / karyawan / dosen dilingkungan Akademi BSI.

6. Bapak Mahesa Ibrahim selaku Pemilik Priok Sablon di Jakarta.

7. Keluarga dilingkungan Priok Sablon di Jakarta.

vi
8. Orang tua tercinta yang telah memberikan dukungan moral maupun spiritual.

9. Rekan-rekan mahasiswa kelas MI – 12.6I.07.

Serta semua pihak yang terlalu banyak untuk disebut satu

persatu sehingga terwujudnya penulisan ini. Penulis menyadari bahwa

penulisan tugas akhir ini masih jauh sekali dari sempurna, untuk itu penulis

mohon kritik dan saran yang bersifat membangun demi kesempurnaan

penulisan dimasa yang akan datang.

Akhir kata semoga tugas akhir ini dapat berguna bagi penulis khususnya

dan bagi para pembaca yang berminat pada umumnya.

Jakarta, 12 Juli 2017

Penulis

Endranus Gedo

vii
 ABSTRAKSI

Endranus Gedo (12132031), Sistem Informasi Penjualan kaos sablon

binatang berbasis web pada priok sablon.
Penggunaan kemajuan teknologi saat ini sudah dapat dirasakan oleh
penggunanya. Hampir disegala aspek, teknologi yang semakin canggih kini sangat
memudahkan pekerjaan yang dilakukan oleh orang-orang sebagai pengguna
teknologi. Namun hal ini belum dapat diterapkan pada beberapa perusahaan
terutama dalam penginputan data yang masih menggunakan cara manual.
Bersumber dari masalah diatas, Penulis terdorong untuk mengatasi kesulitan
tersebut dengan membuat sebuah program berbasis web dengan m e n g g u n a k a n
teori pendukung seperti Struktur Navigas, Enterprise Relation
D i a g r a m , P e n g u j i a n W e b , struktur kode dan sarana pendukung program
lainya yang dibuat untuk menyelesaikan permasalahan yang ada pada perusahaan
tersebut. Oleh karena itu, program penjualan Kaos sablon binatang berbasis web
ini merupakan solusi pemecahan yang efektif dan efesien dalam penginputan data,
agar tidak terjadi kerangkapan data serta pembuatan laporan yang lebih akurat
serta mengurangi kesalahan lainnya dalam proses transaksi penjualan walaupun
masih jauh dari sempurna, namun harapan dapat memperbaiki efektifitas kerja,
meningkatkan pelayanan dan pengolahan data yang lebih mudah dengan ketelitian
yang cukup tinggi.

Kata Kunci: Perancang Program, Program Penjualan kaos sablon binatang

berbasis web pada priok sablon.

viii
 ABSTRACT

Endranus Gedo (12132031), Web-based Sales Information System t-shirt at

priok screen printing shop.

The use of technological advances can now be perceived by users. Almost in all
aspects, increasingly sophisticated technology is now very easy for the work
performed by people as users of technology. But this can not be applied to some
companies, especially in the input data is still using the manual method. Sourced
from the problems mentioned above, Authors are encouraged to overcome these
difficulties by creating a web-based program using such supporting theory
Navigas Structure, Enterprise Relation Diagram, Web Testing, code structure and
means of support other programs that are made to resolve the existing problems
in the company . Therefore, Sales program of animal-based animal screen printing
is a web-based solution that is effective and efficient solution in the input data, in
order to avoid redundancy of data and preparing reports more accurately and
reduce other errors in the sales transaction process, although still far from
perfect, but hope can improve work effectiveness, improve services and
pengolahan data easier with high enough precision.

Keywords : Sales Program of web based animal printed t-shirts at priok screen
printing shop.

ix
 x

DAFTAR ISI

Halaman

Lembar Judul Tugas Akhir.................................................................................. i

Lembar Pernyataan Keaslian Tugas Akhir ......................................................... ii
Lembar Pernyataan Persetujuan Publikasi Karya Ilmiah .................................... iii
Lembar Persetujuan dan Pengesahan Tugas Akhir… ......................................... iv
Lembar Konsultasi Tugas Akhir ......................................................................... v

Kata Pengantar .................................................................................................... vi

Abstraksi ............................................................................................................. viii
Daftar Isi.............................................................................................................. x
Daftar Simbol ................................................................................... xii
Daftar Gambar ..................................................................................................... xiii
Daftar Tabel ........................................................................................................ xiv

BAB I PENDAHULUAN ......................................................................... 1

1.1. Latar Belakang Masalah ........................................................... 1
1.2. Maksud dan Tujuan .................................................................. 2
1.3. Metode Penelitian ..................................................................... 3
1.4. Ruang Lingkup ......................................................................... 5
1.5. Sistematika Penulisan ............................................................... 5

BAB II LANDASAN TEORI ........................................................................ 7

2.1. Konsep Dasar Web ....................................................................... 7
2.2. Teori Pendukung....................................................................... 15

BAB III PEMBAHASAN ............................................................................ 25

3.1. Analisa Kebutuhan .................................................................. 25
3.2. Perancangan Perangkat lunak ................................................... 27
3.2.1. Rancangan Antar Muka Admin ........................................ .27
3.2.2. Rancangan Antar Muka Pelanggan .................................. .33
3.2.3. Rancangan Basis Data ...................................................... 39
3.2.4. Rancangan Struktur Navigasi ........................................... 51
3.3. Implementasi dan Pengujian Unit ............................................ 53
3.3.1. Implementasi .................................................................... 53
3.3.2. Pengujian Unit ................................................................. 66

BAB IV PENUTUP .......................................................................................... 69

4.1. Kesimpulan .............................................................................. 69
4.2. Saran ....................................................................................... 69
 xi

DAFTAR PUSTAKA ....................................................................................... 70

DAFTAR RIWAYAT HIDUP ......................................................................... 71
SURAT RISET .................................................................................................. 72
 DAFTAR SIMBOL

A. Simbol – symbol Flowchart

PROCESS
Digunakan untuk menggambarkan instruksi atau
proses pengolahan data.

TERMINAL
Digunakan untuk menggambarkan awal dan akhir
suatu kondisi yang ada.

DECISION
Digunakan untuk menggambarkan proses
pengujian suatu kondisi yang ada di ERD.

xii
 xiii

DAFTAR GAMBAR
Halaman

1. Gambar I. Waterfall Pressman .............................................................. 11

2. Gambar II.1. Model Waterfall................................................................... 14
3. Gambar II.2. Stuktur Navigasi Linier ....................................................... 16
4. Gambar II.3. Stuktur Navigasi Hirarki ...................................................... 17
5. Gambar II.4. Stuktur Navigasi Tidak Berurut ( Non Linier ) ................... 17
6. Gambar II.5. Stuktur Navigasi Campuran ( Composite ) .......................... 18
7. Gambar II.6. Contoh ( Realitationship ) ................................................... 19
8. Gambar II.7. Contoh Unary Degree ........................................................ 20
9. Gambar II.8. Contoh Benary Degree ........................................................ 20
10. Gambar II.9. Contoh Ternary Degree ....................................................... 21
11. Gambar II.10. Contoh Cardinality One To One ......................................... 21
12. Gambar II.11. Contoh Cardinality One To Many ....................................... 22
13. Gambar II.12. Contoh Cardinality Many To One ....................................... 22
14. Gambar II.13. Contoh Cardinality Many To Many..................................... 23
15. Gambar III.1. Rancangan Antar Muka Login Admin .................................. 27
16. Gambar III.2. Rancangan Antar Muka Beranda Admin ............................. 27
17. Gambar III.3. Rancangan Antar Muka Transaksi Penjualan Admin ........... 28
18. Gambar III.4. Rancangan Antar Muka Konfirmasi Admin ......................... 28
19. Gambar III.5. Rancangan Antar Muka Produk Admin ............................... 29
20. Gambar III.6. Rancangan Antar Muka Pelanggan Admin.......................... 29
21. Gambar III.7. Rancangan Antar Muka Ongkir Admin ............................... 30
22. Gambar III.8. Rancangan Antar Muka Kategori Admin ............................ 30
23. Gambar III.9. Rancangan Antar Muka Pesan Admin ................................. 31
24. Gambar III.10. Rancangan Antar Muka Laporan Penjualan Admin .......... 31
25. Gambar III.11. Rancangan Antar Muka Laporan Ongkos Kirim Admin ... 32
26. Gambar III.12. Rancangan Antar Muka Ubah Password Admin ............... 32
27. Gambar III.13. Rancangan Antar Muka Login Pelanggan Member .......... 33
28. Gambar III.14. Rancangan Antar Muka Pendaftara Pelanggan Member... 34
29. Gambar III.15. Rancangan Antar Muka Tentang Kami Member .............. 34
30. Gambar III.16. Rancangan Antar Muka Cara Pesan Member ................... 35
31. Gambar III.17. Rancangan Antar Muka Kontak Kami Member ................ 35
32. Gambar III.18. Rancangan Antar Muka Konfirmasi Member ................... 36
33. Gambar III.19. Rancangan Antar Muka Pembelian Terakhir Member ..... 36
 xiv

34. Gambar III.20. Rancangan Antar Muka Beranda Member........................ 37

35. Gambar III.21. Rancangan Antar Muka Keranjang Belanja Member ....... 37
36. Gambar III.22. Rancangan Antar Muka Selesai Belanja Member ............. 38
37. Gambar III.23. Rancangan Antar Muka Struk Pembelian Member ........... 38
38. Gambar III.24. Entity Realitationship Diagram (ERD) .............................. 39
39. Gambar III.25. Logical Record Strcture ..................................................... 40
40. Gambar III.26. Struktur Navigasi Pengunjung ........................................... 51
41. Gambar III.27. Struktur Navigasi Administrator ........................................ 52
42. Gambar III.28. Struktur Navigasi Pelanggan ............................................. 53
43. Gambar III.29. Rancangan Antar Muka Login Admin ................................ 53
44. Gambar III.30. Rancangan Antar Muka Beranda Admin ........................... 54
45. Gambar III.31. Rancangan Antar Muka Penjualan Admin ......................... 54
46. Gambar III.32. Rancangan Antar Muka Konfirmasi Admin ....................... 55
47. Gambar III.33. Rancangan Antar Muka Produk Admin ............................. 55
48. Gambar III.34. Rancangan Antar Muka Pelanggan Admin ........................ 56
49. Gambar III.35. Rancangan Antar Muka Ongkir Admin .............................. 56
50. Gambar III.36. Rancangan Antar Muka Kategori Admin ........................... 57
51. Gambar III.37. Rancangan Antar Muka Pesan Admin ............................... 57
52. Gambar III.38. Rancangan Antar Muka Laporan Penjualan Admin ........... 58
53. Gambar III.39. Rancangan Antar Muka Ubah Password Admin ................ 58
54. Gambar III.40. Rancangan Antar Muka Login Pelanggan Member ........... 59
55. Gambar III.41. Rancangan Antar Muka Pendaftaran Member ................... 59
56. Gambar III.42. Rancangan Antar Muka Beranda Member......................... 60
57. Gambar III.43. Rancangan Antar Muka Tentang Kami Member ............... 60
58. Gambar III.44. Rancangan Antar Muka Cara Pesan Member .................... 61
59. Gambar III.45. Rancangan Antar Muka Kontak Kami Member ................. 61
60. Gambar III.46. Rancangan Antar Muka Konfirmasi Member .................... 62
61. Gambar III.47. Rancangan Antar Muka Keranjang Belanja Member ........ 62
62. Gambar III.48. Rancangan Antar Muka Selesai Belanja Member .............. 63
63. Gambar III.49. Rancangan Antar Muka Struk Pembelian Member ............ 63
64. Gambar III.50. Rancangan Antar Muka Pembelian Terakhir Member ....... 64
 xv

DAFTAR TABEL

Halaman

1. Tabel III.1. Spesifikasi File Tabel Admin ................................................... 41

2. Tabel III.2. Spesifikasi File Tabel Kategori................................................ 42
3. Tabel III.3. Spesifikasi File Tabel Konfirmasi ............................................ 43
4. Tabel III.4. Spesifikasi File Tabel Ongkir .................................................. 44
5. Tabel III.5. Spesifikasi File Tabel Orders .................................................. 44
6. Tabel III.6. Spesifikasi File Tabel Orders Detail ....................................... 45
7. Tabel III.7. Spesifikasi File Tabel Pelanggan ............................................ 46
8. Tabel III.8. Spesifikasi File Tabel Produk .................................................. 47
9. Tabel III.9. Spesifikasi File Tabel Alm Kirim ............................................. 48
10. Tabel III.10. Spesifikasi File Tabel Pesan .................................................. 49
11. Tabel III.11. Spesifikasi File Tabel Pesan .................................................. 50
12. Tabel III.12. Hasil Pengujian Black Box Testing Hal Login Admin........... 66
13. Tabel III.13. Hasil Pengujian Black Box Testing Form Tambah Produk ... 67
14. Tabel III.14. Hasil Pengujian Black Box Testing Form Daftar Pelanggan 68
 BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Priok Sablon merupakan rumah industri yang bergerak dibidang konveksi

kaos sablon yang beralamatkan di Kp. Bendungan Melayu RT. 008 RW. 02

Kelurahan Rawa Badak Selatan Kecamatan Koja Jakarta Utara. Rumah Industri

ini memproduksi all item fashion dan menjadi distributor dibeberapa produk

Sekolah SD, SMP, SMA dan distro yang ada di Jakarta Utara. Produk yang

dihasilkan Priok Sablon ini seperti sablon kaos, jaket, t-shirt dan cetak sablon

lainnya.

Rumah industri ini hanya memproduksi dan menyablon pakaian sedangkan

untuk proses penjualan, Priok Sablon menjual secara langsung ke orang-orang

tertentu atau mendistribusikan produk-produknya ke beberapa instansi dan

distro yang ada di kota Jakarta. Pemasaran produk Priok Sablon dan beberapa

produk lain yang dititipkan di rumah industri ini hanya terbatas pada beberapa

distro dan instansi yang ada di kota Jakarta. Selain itu Priok Sablon sendiri

kurang maksimal dalam melakukan promosi sehingga produk Priok sablonpun

kurang dikenal bahkan oleh masyarakat Jakarta sendiri. Sementara itu banyak

sekali industri pakaian dan distro-distro yang ada di kota Jakarta yang sebagian

sudah banyak dikenal masyarakat Indonesia khususnya masyarakat kota

Jakarta. Hal ini menimbulkan persaingan menjadi semakin ketat. Untuk itu

Priok Sablon membutuhkan media promosi yang ampuh yang dapat

mengenalkan produk Priok Sablon kepada masyarakat luas dan dapat pula

1
 2

memperluas jangkauan pemasaran produk Priok Sablon sehingga dapat

mendatangkan banyak pelanggan (Member) baru dan memenangkan

persaingan yang terjadi.

Seiring dengan perkembangan teknologi informasi dan jaringan khususnya

jaringan internet berkembang metode penjualan secara online, atau electronic

commercial (e-commerce) yang berbasis web dimana perusahaan dapat

melakukan promosi dan pemasaran produk dengan lebih cepat, efisien dan

dapat memperluas wilayah pemasaran produk. Selain itu dengan website e-

commerce ini pembeli dapat melakukan transaksi jual beli tanpa harus datang

ke tempatnya.

Berdasarkan latar belakang tersebut, maka dapat disimpulkan bahwa

Priok Sablon membutuhkan perangkat lunak yang dapat membantu

mempromosikan dan menjual barang barang secara online, pemesanan dan

pembayaran dapat dilakukan secara on-line oleh pembeli. Oleh karena itu,

sesuai dengan deskripsi di atas maka penulis mencoba membahas suatu

masalah dengan judul yang diambil “SISTEM INFORMASI PENJUALAN

KAOS SABLON BINATANG BERBASIS WEB PADA PRIOK SABLON

JAKARTA’’

1.2. Maksud dan Tujuan

Adapun maksud dan tujuan dari penulisan Tugas Akhir ini adalah:

1. Membangun Aplikasi E-Commerce di Rumah Industri Priok Sablon sebagai

media penjualan online.

2. Memperluas jangkauan pemasaran penjualan produk Priok Sablon

 3

3. Mempermudah pelanggan yang berada diluar wilayah Jakarta yang ingin

melakukan pemesanan produk.

4. Mempermudah pengelola dalam mempromosikan dan menjual produk-

produknya melalui media internet.

Tujuan dari penulisan tugas akhir ini adalah sebagai syarat kelulusan pada

program Diploma III jurusan Manajemen Informatika pada Akademi Manajemen

Informatika dan Komputer Bina Sarana Informatika (AMIK BSI).

1.3. Metode Penelitian

A. Metode Pengembangan Perangkat Lunak

Menurut Sommerville (2011:30) tahapan utama dari waterfall model

langsung mencerminkan aktifitas pengembangan dasar. Terdapat 5 tahapan

pada waterfall model, yaitu requirement analysis and definition, system and

software design, implementation and unit testing, integration and system

testing, dan operation and maintenance.

1. Requirement Analysis and Definition

Merupakan tahapan penetapan fitur, kendala dan tujuan sistem melalui

konsultasi dengan pengguna sistem. Semua hal tersebut akan ditetapkan

secara rinci dan berfungsi sebagai spesifikasi sistem.

2. System and Software Design

Dalam tahapan ini akan dibentuk suatu arsitektur sistem berdasarkan

persyaratan yang telah ditetapkan. Dan juga mengidentifikasi dan

menggambarkan abstraksi dasar sistem perangkat lunak dan hubungan-

hubungannya.
 4

3. Implementation and Unit Testing

Dalam tahapan ini, hasil dari desain perangkat lunak akan direalisasikan

sebagai satu set program atau unit program. Setiap unit akan diuji apakah

sudah memenuhi spesifikasinya.

Integration and System Testing

4. Dalam tahapan ini, setiap unit program akan diintegrasikan satu sama lain

dan diuji sebagai satu sistem yang utuh untuk memastikan sistem sudah

memenuhi persyaratan yang ada. Setelah itu sistem akan dikirim ke

pengguna sistem.

5. Operation and Maintenance

Dalam tahapan ini, sistem diinstal dan mulai digunakan. Selain itu juga

memperbaiki error yang tidak ditemukan pada tahap pembuatan. Dalam

tahap ini juga dilakukan pengembangan sistem seperti penambahan fitur dan

fungsi baru.

B. Teknik Pengumpulan Data

Dalam penyusunan Tugas Akhir ini penulis menggunakan beberapa metode

pengumpulan data yang digunakan yaitu:

1. Observasi (observation), yaitu melakukan penelitian dan pengamatan secara

langsung mengenai kegiatan dan keadaan Priok Sablon, khususnya kegiatan

penjualan sablon kaos binatang.

2. Wawancara (interview), yaitu mengadakan tanya jawab dengan pemilik

Priok Sablon yang bersangkutan.

 5

3. Studi Pustaka, yaitu mengumpulkan data dari literature, jurnal, buku- buku

tentang e-commerce.

1.4. Ruang Lingkup

Didalam pembahasan ini penulis hanya membahas pengolahan

perancangan program penjualan kaos sablon binatang secara online yaitu mulai

dari website admin, website pengunjung dan website member di web admin

terdapat menu produk, menu kategori, menu pengiriman, menu konfirmasi, detail

pemesanan, edit beranda, edit cara pesan, edit profil, pesan masuk, ganti

password, logout, dan untuk web pengunjung terdapat menu beranda, produk, cara

pesan, profil, hubungi kami, member. Untuk web member menu di dalamnya

hampir sama dengan web pengunjung hanya saja yang berbeda di dalam web

member terdapat menu konfirmasi untuk member yang telah melakukan

pembelian produk agar bisa melakukan konfirmasi pembayaran setelah

melakukan pembelian produk di dalam website priok sablon.

1.5. Sistematika Penulisan

Sistematika penulisan tugas akhir ini disusun untuk memberikan gambaran

umum tentang penelitian yang dijalankan. Sistematika penulisan tugas akhir ini

adalah sebagai berikut:

 6

BAB I PENDAHULUAN

Pada bab ini menguraikan tentang umum, identifikasi masalah, maksud

dan tujuan, batasan masalah, metodologi pengumpulan data, serta sistematika

penulisan.

Bab II LANDASAN TEORI

Bab ini akan berisi teori-teori yang mendukung pengembangan perangkat

lunak yang akan dibangun, yaitu mengenai konsep e-commerce dan

perkembangannya, serta akan membahas mengenai teori-teori yang berkaitan

dengan topik penelitian yang melandasi pembangunan aplikasi e-commerce.

Bab III PEMBAHASAN

Bab ini terbagi menjadi dua bagian yaitu analisis dan bagian perancangan.

Pada bagian Analisis sistem akan dibahas mengenai analisis masalah, analisis

kebutuhan non-fungsional, analisis pengguna, analisis basis data dan analisis

kebutuhan fungsional. Bagian perancangan terbagi menjadi perancangan sistem

dan perancangan antarmuka. Pada perancangan sistem akan dibahas mengenai

perancangan basi data. Sedangkan pada bagian perancangan arsitektur akan

dibahas mengenai perancangan antar muka, perancangan struktur menu dan

jaringan semantik.

Bab IV PENUTUP

Bab ini berisi rangkuman atau kesimpulan dari penelitian tugas akhir dan

saran yang diperlukan untuk pengembangan system yang telah dibangun.

 BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Pengertian website menurut para ahli Secara umum, website (web) dipahami

sebagai sekumpulan halaman yang terdiri dari beberapa laman yang berisi

informasi dalam bentuk digital baik itu teks, gambar, animasi yang disediakan

melalui jalur internet sehingga dapat diakses dari seluruh dunia yang memiliki

koneksi internet. Website awalnya merupakan suatu layanan sajian informasi yang

menggunakan konsep hyperlink, yang memudahkan surfer atau pengguna internet

melakukan penelusuran informasi di internet. Informasi yang disajikan dengan

web menggunakan konsep multimedia, informasi dapat disajikan dengan

menggunakan banyak media, seperti teks, gambar, animasi, suara, atau film.

A. Website

Menurut Sibero (2011:11) “Website adalah suatu sistem yang berkaitan

dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar,

multimedia dan lainnya pada jaringan internet”.

1. Internet

Menurut Sibero (2011:10) “Internet adalah jaringan komputer yang

menghubungkan antara jaringan secara global, internet dapat juga disebut

jaringan dalam suatu jaringan yang luas”. Seperti halnya jaringan komputer

lokal maupun jaringan area, juga menggunakan protokol komuniasi yang

sama yaitu TCP/IP (Tranmision Control Protocol / Internet Protocol).

7
 8

2.Web Browser

Sedangkan menurut Shelly dan Velmaart (2011: 81) web browser atau

browser adalah perangkat lunak aplikasi yang memungkinkan pengguna

untuk mengakses dan melihat halaman web atau mengakses program web

2.0.

3. Web Server

Menurut Supardi (2010:2) “Web server merupakan perangkat lunak yang

mengolola (mengatur) permintaan user dari browser dan hasilnya dikembalikan

ke browser. Contoh web server, adalah IIS ( internet information services)

produk microsoft corp”.

4. WWW ( World Wide Web )

WWW Menurut Shelly dan Velmaart (2011: 80) World Wide Web (WWW)

atau web, terdiri dari kumpulan dokumen elektronik di seluruh dunia. Setiap

dokumen elektronik di web disebut webpage, yang dapat berisi teks, grafik,

animasi, audio dan video.

5. Web Pages (Halaman Web)

Halaman web merupakan bagian dari situs web diumpamakan sebagai sebuah

buku, maka halaman web merupakan lembaran lembaran kertas penyusun buku

tersebut.

6. Homepage

Homepage merupakan halaman muka dari sebuah situs web. Pada dasarnya

homepage adalah suatu sarana untuk memperkenalkan secara singkat tentang

apa yang menjadi isi dari keseluruhan situs web dari suatu organisasi atau

pribadi.
 9

7. HTTP (Hypertext Transfer Protocol)

Salah satu protocol yang sering kita gunakan adalah HTTP, HTTP

menggunakan port80 Protocol ini digunakan untuk berkomunikasi antar web

browser yang satu dengan web browser yang lainnya. HTTP ini akan digunakan

jika kita hendak mengakses suatu informasi pada situs-situs web tertentu. HTTP

mempunyai tugas untuk mentransfer dokumen berupa hypertext atau yang biasa

disebut dengan HTML. Dengan demikian HTTP akan mentransfer HTML ke

browser dari server tempat HTML tersebut disimpan.

8. HTML(Hypertext Markup Language)

Menurut Shelly dan Velmaar (2011:678) HTML (Hypertext Markup

Language) adalah bahasa format khusus yang programmer gunakan untuk

memformat dokumen untuk ditampilkan di web. Berdasarkan pendapat para

ahli di atas, penulis menyimpulkan bahwa HTML atau Hyper Text Markup

Language adalah bahasa pemrograman yang digunakan untuk memformat

dokumen untuk ditampilkan di web.

B. Bahasa Pemrograman

Dalam hal ini penulis menggunakan beberapa bahasa pemrograman,

antara lain:

1. PHP (Personal Home Page)

Menurut Kurniawan (2010:4) “PHP merupakan script untuk

pemrograman web server–side, script yang membuat dokumen HTML,

secara onthefly, dokumen HTML yang dihasilkan dari suatu web aplikasi

bukan dokumen HTML yang dibuat dengan menggunakan editor teks atau
 10

editor HTML”. PHP/FI merupakan nama awal dari PHP. PHP –

Personal Home Page, FI adalah Form Interface. Dibuat pertama kali oleh

Rasman Lerdoff PHP, awalnya merupakan program CGI yang

dikhususkan untuk menerima input melalui form yang ditampilkan dalam

browser web. PHP adalah bahasa scripting yang menyatu dengan HTML,

dan dijalankan pada server side. Artinya semua sintaks yang kita berikan

akan sepenuhnya di jalankan pada server sedangkan yang dikirimkan ke

browser hanya hasilnya saja.

2. HTML (Hyper Text Markup Language)

Menurut Sidik (2007:9) "HTML kependekan dari Hyper Text Markup

Language, Dokumen HTML adalah file teks murni yang dapat dibuat

dengan editor teks sembarangan". Dokumen ini dikenal sebagai web page.

dokumen HTML merupakan dokumen yang disajikan dalam web

browser. Dokumen ini umumnya berisi informasi atau interface aplikasi

dalam internet.

3. JQuery (Library Java Script )

Menurut Sigit (2011:1) “Javascript merupakan bahasa scripting yang

bekerja disisi client/browser sehingga website bisa lebih interaktif”.

Javascript adalah bahasa scripting yang digunakan untuk membuat

aplikasi web, sifatnya client-side sehingga dapat diolah langsung di

browser tanpa harus terhubung keserver terlebih dahulu. Javascript tidak

berhubungan dengan bahasa pemprograman java, meskipun keduanya

memiliki kemiripan dalam hal syntax yang meniru bahasa C.

 11

1. CSS (Cascading Style Sheet)

Menurut Wiswakarma (2010:25) “CSS (Cascading Style Sheet) adalah

salah satu bahasa pemprograman desain web (Style Sheet Language) yang

mengontrol format tampilan sebuah halaman web yang ditulis dengan

bahasa penanda (Markup Language)”. Cascading Style Sheet (CSS)

merupakan salah satu bahasa pemrograman web untuk mengendalikan

beberapa komponen dalam sebuah web sehingga akan lebih terstruktur

dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti

Microsoft Word yang dapat mengatur beberapa style, misalnya heading,

subbab, bodytext, footer, images dan style lainnya untuk dapat digunakan

bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk

memformat tampilan halaman web yang dibuat dengan bahasa

HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna

teks, warna tabel, ukuran border, warna border, warna hyperlink, warna

mouse over, spasi antar paragraf, spasi antar teks, margin

kiri/kanan/atas/bawah dan parameter lainnya. CSS adalah bahasa style

sheet yang digunakan untuk mengatur tampilan dokument. Dengan

adanya CSS memungkinkan untuk menampilkan halaman yang sama

dengan format yang berbeda.

C. Basis Data

Menurut Nugroho (2005:72) “Basis data adalah sebuah cara

mendokumentasikan beberapa macam data yang kemudian dimenejemen

dengan sebuah sistem untuk kemudian disimpan dalam sebuah media

 12

penyimpanan”. Pembuatan web pada tugas akhir ini, penulis menggunakan

Structured Query Language (SQL)sebagai bahasa pengolahan database, dan

SQLYog sebagai aplikasi pengolahan database.

1. Mysql

Menurut Nugroho (2005:1)“ Mysql adalah sebuah program database

server yang mampu menerima dan mengirimkan datanya dengan sangat

cepat, multy user serta menggunakan perintah standar SQL”. Terdapat 3

(tiga) jenis perintah SQL, yaitu:

a) DDL (Data Definition Language)

DDL merupakan perintah SQL yang berhubungan dengan

pendefinisian suatu struktur database, dalam hal ini database dan table.

Perintah SQL yang termasuk dalam DDL antara lain: CREATE,

ALTER, RENAME dan DROP.

b) DML (Data Manipulation Language)

DML merupakan perintah SQL yang berhubungan denga

manipulasi atau pengolahan data atau record dalam table. Perintah SQL

yang termasuk dalam DML antara lain: SELECT, INSERT, UPDATE

dan DELETE.

c) DCL (Data Control Language)

DCL merupakan perintah SQL yang berhubungan dengan

pengaturan hak akses user, baik terhadap server, database, table maupun

field. Perintah SQL yang termasuk dalam DCL antara lain:GRANT dan

REVOKE.
 13

1. SqlYog

SQLyog sendiri merupakan aplikasi client MySQL yang sangat

populer digunakan di Indonesia untuk memudahkan pengguna

melakukan administrasi maupun melakukan pengolahan data

MySQL. Terdapat beberapa versi yang bisa di download, dari mulai

trial, enterpraise dan comunity. Sama halnya dengan tools-tools yang

sejenisnya, SQLyog ini dirancang untuk memudahkan pengguna

mysql untuk megelola tabel dan record-record yang ada di dalam

database mysql. Dengan kelebihan GUI, pembuatan sebuah database

dan tabel cukup dengan klik.

2. XAMPP

Menurut Wicaksono (2008:7) menjelaskan bahwa “XAMPP adalah

sebuah software yang berfungsi untuk menjalankan website berbasis

PHP dan menggunakan pengolah data MYSQL di komputer lokal”.

XAMPP berperan sebagai server web pada komputer lokal. XAMPP

juga dapat disebut sebuah Cpanel server virtual, yang dapat

membantu melakukan preview sehingga dapat dimodifikasi website

tanpa harus online atau terakses dengan internet.

D. Model Pengembangan Perangkat Lunak

Teknik pengembangan perangkat lunak menggunakan metode

incremental yang sudah dikembangkan dari Waterfall model, karena

metode incremental ini terdiri dari tahap-tahap yang memberikan

 14

kemudahan, jika pada suatu tahap tidak sesuai dan mengalami

kesalahan maka dapat kembali ketahap sebelumnya. Dengan

berkembangnnya perangkat lunak, pembuat program (programmer)

secara umum langsung pembuatan pengkodean perangkat lunak, tanpa

menngunakan prosedur perangkat lunak.

SDLC (Software Development Life Cycle) diperkenalkan pada

tahun 1960-an SDLC pertama digunakan oleh para pengusaha besar

jaman itu. Dimana sistem-sistem yang dibangun untuk mengelolah

informasi kegiatan dan aktivitas yang berpotensi memiliki data yang

besar. Air terjun (Waterfall) adalah salah satu model SLDC yang

menyediakan pendekatan jalur hidup perangkat lunak secara bertahap

yang diawali dengan analisis desain, pengkodean pengujian dan tahap

pendukung (support). Tahapan-tahapan yang yang terdapat dalam

metode Waterfall dapat dilihat pada gambar sebagai berikut:

Sumber : Sommerville, (2011:30)

Gambar II.1
Model Waterfall
 15

1) Analisa kebutuhan adalah kondisi yang harus dipenuhi dalam suatu

produk baru atau perubahan produk, yang mempertimbangkan

berbagai kebutuhan yang bersinggungan antar berbagai pemangku

kebutuhan.

2) Batasan sistem adalah batasan yang diberikan kepada sistem, agar

sistem tersebut tidak menyimpang dari prosedur yang di inginkan.

3) Penulisan kode program adalah desain program yang diterjemahkan

ke dalam kode-kode dengan menggunakan bahasa pemograman yang

sudah ditentukan.

4) Pengajian program adalah penyatuan unit-unit program kemudian

diuji secara keseluruhan (system testing).

5) Penerapan Program adalah mengoperasikan program dilingkungan

nya dan melakukan penyesuaian atau perubahan adaptasi dengan

situasi sebenarnya.

2.2. Teori Pendukung

Dalam pembuatan suatu program, berhasil tidaknya suatu program

tergantung dari persiapan sebelumnya misal membuat struktur navigasi

atau ERD dan untuk itu dalam proses pembuatan program kali ini penulis

membutuhkan beberapa peralatan pendukung (tool system) yang

mempermudah penulis dalam membuat suatu program, adapun peralatan

pendukung tersebut dari:

 16

A. Struktur Navigasi

Menurut Suyanto (2008: 62) “Struktur navigasi dalam situs web

melibatkan sistem navigasi situs web secara keseluruhan dan desain

interface situs web tersebut, navigasi memudahkan jalan yang mudah

ketika menjelajahi situs web”. Struktur navigasi juga dapat diartikan

sebagai struktur alur dari suatu program yang merupakan rancangan

hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat

membantu mengorganisasikan seluruh elemen pembuatan website. Ada

empat macam bentuk dasar yaitu:

1. Struktur Navigasi Linier Struktur navigasi linier hanya mempunyai satu

rangkaian cerita yang berurut yang menampilkan satu demi satu tampilan

layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan

pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman

sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman

sesudahnya, pengguna akan melakukan navigasi secara berurutan, dalam

frame atau byte informasi satu ke yang lainnya.

Sumber : Binanto, (2010: 269)

Gambar II.2
Struktur Navigasi Linier

2. Struktur Navigasi Hirarki Struktur dasar ini disebut juga struktur linier

dengan percabangan karena pengguna melakukan navigasi disepanjang

cabang pohon struktur yang terbentuk oleh logika isi.

 17

Sumber : Binanto (2010: 269)

Gambar II.3
Struktur Navigasi Hirarki

3. Struktur Navigasi Tidak Berurut (Non-Linier) Struktur navigasi non-linier

merupakan pengembangan dari struktur navigasi linier. Pada struktur ini

diperkenankan membuat navigasi bercabang. Percabangan yang dibuat

pada struktur non-linier ini berbeda dengan percabangan pada struktur

hirarki, karena pada percabangan non-linear ini walaupun terdapat

percabangan tetap tiap-tiap tampilan mempunyai kedudukan yang sama

yaitu tidak ada Master Page dan Slave Page, pengguna akan melakukan

navigasi dengan bebas melalui isi proyek dengan tidak terikat dengan jalur

yang sudah ditentukan sebelumnya.

Sumber : Binanto (2010: 270)

Gambar II.4
Struktur Navigasi Tidak Berurut (Nonlinier)
 18

4. Struktur Navigasi Campuran (Composite) Struktur navigasi pengguna akan

melakukan navigasi dengan bebas (secara non-linier), tetapi terkadang

dibatasi presentasi linier film atau informasi penting dan pada data yang

paling terorganisasi secara logis pada suatu hirarki.

Sumber : Binanto (2010: 270)

Gambar II.5
Struktur Navigasi Campuran (Composite)

B. Enbity Relationship Diagram (ERD)

1. Pengertian Enbity Relationship Diagram (ERD) Menurut Brady dan Loonam

(2010:13) “Entity-Relationship Model (ERM) merupakan abstrak dan

konseptual representasi data"Entity-Relationship adalah salah satu metode

pemodelan basis data yang digunakan untuk menghasilkan skema konseptual

untuk jenis data semantik sistem. Di mana sistem seringkali memiliki basis

data relational, dan ketentuan bersifat top-down. Diagram untuk

menggambarkan model Entity Relationship di sebut Entity Relationship

Diagram (ERD). Komponen Enbity Relationship Diagram ERD bersama-

sama dengan detail pendukung merupakan model data yang pada gilirannya

digunakan sebagai spesifikasi untuk database. Dalam pembentukan ERD

terdapat 3 komponen yang akan dibentuk yaitu:

 19

a. Entitas

Adalah salah satu yang dapat digambarkan oleh data. Entitas juga

dapat diartikan sebagai individu yang mewakili sesuatu yang nyata

(eksistensinya) dan dapat dibedakan dari suatu yang lain. Ada dua

macam entitas kuat dan entitas lemah. Entitas kuat merupakan entitas

yang tidak memiliki ketergantungan dengan entitas lainnya.

Contohnya entitas anggota.

b. Atribut

Atribut merupakan pendeskripsian karakteristik dari entitas. Atribut

digambarkan dalam bentuk lingkaran atau elips. Atribut yang menjadi

kunci entitas atau key diberi garis bawah.

c. Relationship

Relasi menunjukan adanya hubungan diantara sejumlah entitas yang

berasal dari himpunan entitas yang berbeda. Dalam hal ini

digambarkan dengan garis lurus.

Contoh:

Pegawai Bekerja Proyek

Sumber : Nugroho (2009:15)

Gambar II.6
Contoh Relationship
 20

2. Derajat Relationship

Drajat relationship yang menjelaskan jumlah entity yang berpariasi dalam

suatu relationship. Dalam derajat Relationship terbagi dari tiga tingkatan

yaitu:

a. Unary Degree ( Derajat Satu ) Unary atau derajat satu adalah satu

buah relationship menghubungkan satu buah entity.

Contoh:

Manusia Menikah

Sumber : Nugroho (2009:17)

Gambar II.7
Contoh Unary Degree

Keterangan : Manusia menikah dengan manusia, relationship menikah

hanya meghubungkan entity manusia.

b. Binary Degree ( Derajat Dua )

Binary Degree atau derajat dua adalah satu buah relationship yang

menghubungkan dua buah entity.

Contoh :

Pegawai Memiliki Kendaraan

Sumber : Nugroho (2009:19)

Gambar II.8
Contoh Binary Degree
 21

Keterangan : Pegawai memiliki kendaraan, sebuah relationship

memilih menghubungkan menghubungkan entity Pegawai dan entity

Kendaraan.

c. TernaryDegree( Derajat Tiga )

Termary atau derajat tiga adalah satu buah relationship

menghubungkan tiga buah entity.

Pegawai Bekerja Proyek

KOTA

Sumber : Nugroho (2009:20)

Gambar II.9
Contoh Ternary Degree
Keterangan : Pegawai pada kota tertentu mempunyai suatu proyek.

Entity Bekerja menghubungkan Entity Pegawai, Proyek, dan kota,

3. Cardinality Ratio Constraint

a. One To One (1:1) Yaitu perbandingan antara entity pertama dengan

entity kedua berbanding satu berbanding satu

1 1
Pasien Ditempatkan Kendaraan

Sumber : Nugroho (2009:3)

Gambar II.10

Contoh Cardinality One To One

 22

b. One To One (1:M)

Yaitu perbandingan antara entity pertama dengan entity kedua

berbanding satu berbanding banyak.

1 M
Pegawai Bekerja Proyek

Sumber :Nugroho (2009:23)

Gambar II.11

Contoh Cardinality One To Many

c. Many To One (M:1)

Yaitu perbandingan antara entity pertama dengan entity kedua

berbanding banyak berbanding satu.

M 1
Siswa Tempat Dosen

Sumber :Nugroho (2009:27)

Gambar II.12
Contoh Cardinality Many To One

d. Many To Many (M:M)

Yaitu perbandingan antar entity pertama dengan entity kedua

berbanding banyak berbanding banyak.

 23

M M
Pasien Tempat Kendaraan

Sumber : Nugroho (2009:29)

Gambar II.13
Gambar Cardinality Many To Many

C. Logical Record Structure (LRS)

Menurut Purnomo (2006:15) pengertian LRS adalah representasi

dari struktur record-record pada tabel-tabel yang terbentuk dari hasil antar

himpunan entitas yang digunakan untuk menentukan kardinalitas, jumlah

table dan foreign key (FK).

D. Pengujian Web

Menurut Pressman (2010:3) “Pengujian Black Box adalah

pengujian aspek fundamental sistem tanpa memperhatikan struktur logika

internal perangkat lunak”. Metode ini digunakan untuk mengetahui apakah

perangkat lunak berfungsi dengan benar. Pengujian Black Box merupakan

metode perancangan data uji yang didasarkan pada spesifikasi perangkat

lunak. Data uji dieksekusi pada perangkat lunak dan kemudian keluar dari

perangkat lunak dicek apakah telah sesuai yang diharapkan.Pengujian

Black Box berusaha menemukan kesalahan dalam kategori:

a. Fungsi-fungsi kesalahan yang tidak benar dan hilang Mengoreksi

kesalahan dalam input data hilang dan kurang benar akibat kurangnya scipt
 24

b. Kesalahan interface kesalahan yang terjadi saat program dijalankanakan

bisa di uji dengan Black Box agar kembali ke interface yang di harapkan

c. Kesalahan dalam struktur data atau akses database ekternal Menganalisa

kesalahan yang akan muncul akibat pemanggilan field pada tabel database

d. Kesalahan kinerja Black box menganalisa kinerja program yang tidak

sesuai yang diharapkan

e. Inisialisasi dan kesalahan terminasi Inisialisasi dan terminasi memberikan

hasil maksimal terhadap program sesuai dengan alur program.

 BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

Analisis kebutuhan merupakan analisis terhadap semua kebutuhan yang

diperlukan di dalam lingkup perangkat lunak yang akan dikembangkan. Analisis

kebutuhan mengidentifikasi kebutuhan yang diperoleh berdasarkan kebutuhan

pengguna dan kebutuhan sistem.

3.1.1 Analisis Kebutuhan Sistem (System Requierements Analysis)

1. Kebutuhan Sistem Admin

a. Website menyediakan menu login untuk admin masuk ke dalam halaman

admin

b. Website menyediakan menu produk yang bisa dikelola oleh admin.

c. Website menyediakan menu pelanggan agar admin bisa mengelolanya

d. Website menyediakan menu ongkir agar admin dapat menambah,menghapus

dan mengedit ongkir

e. Website menyediakan menu kategori agar admin dapat menambah,

menghapus dan mengedit kategori

f. Website menyediakan menu penjualan agar admin dapat mengelola transaksi

penjualan.

g. Website menyediakan menu konfirmasi agar admin dapat tau siapa saja

pelanggan yang sudah melakukan konfirmasi pembayaran.

25
 26

h. Website menyediakan menu laporan produk agar admin bisa melihat dan

mencetak laporan produk

i. Website menyediakan menu laporan penjualan agar admin bisa melihat dan

mencetak laporan penjualan

j. Website menyediakan menu laporan ongkir agar admin bisa melihat dan

mencetak laporan ongkir

k. Website menyediakan menu ubah password agar admin dapat mengubah

paswordnya sendiri

l. Website menyediakan menu pesan agar admin dapat melihat pesan masuk dari

user.

2. Kebutuhan Sistem Pelanggan

a. Pengunjung dapat melakukan Login Pelanggan

b. Pelanggan dapat melihat tentang kami.

c. Pelanggan dapat melihat cara pesan

d. Pelanggan dapat melihat kategori

e. Pengunjung dapat melihat informasi produk

f. Pelanggan dapat melakukan pemesanan

g. Pelanggan dapat melakukan konfirmasi pembayaran

h. Pelanggan dapat melihat status pemesanan

 27

3.2 Perancangan Perangkat Lunak

3.2.1 Rancangan Antar Muka Admin

1. Rancangan Antar Muka Login Admin

Gambar III. 1

Rancangan Antar Muka LoginAdmin

2. Rancangan Antar Muka Beranda Admin

Gambar III. 2

Rancangan Antar Muka Beranda Admin

 28

3. Rancangan Antar Muka Transaksi Penjualan Admin

Gambar III. 3

Rancangan Antar Muka Transaksi Penjualan Admin

4. Rancangan Antar Muka Transaksi Konfirmasi Admin

Gambar III. 4

Rancangan Antar Muka Konfirmasi Admin

 29

5. Rancangan Antar Muka Produk Admin

Gambar III.5

Rancangan Antar Muka Produk Admin

6. Rancangan Antar Muka Pelanggan Admin

Gambar III.6

Rancangan Antar Muka Pelanggan Admin

 30

7. Rancangan Antar Muka Ongkir Admin

Gambar III.7

Rancangan Antar Muka Ongkir Admin

8. Rancangan Antar Muka Kategori Admin

Gambar III.8

Rancangan Antar Muka Kategori Admin

 31

9. Rancangan Antar Muka Pesan Admin

Gambar III.9

Rancangan Antar Muka Pesan Admin

10. Rancangan Antar Muka Laporan Penjualan Admin

Gambar III.10

Rancangan Antar Muka Laporan Penjualan Admin

 32

11. Rancangan Antar Laporan Ongkos Kirim Admin

Gambar III.11

Rancangan Antar Muka Laporan Ongkos Kirim Admin

12. Rancangan Antar Muka Ubah Password Admin

Gambar III.12

Rancangan Antar Muka Ubah Password Admin

 33

3.2.2 Rancangan Antar Muka Pelanggan

1. Rancangan Antar Muka Login Pelanggan Member

Gambar III. 13

Rancangan Antar Muka Login Pelanggan Member

 34

2. Rancangan Antar Muka Halaman Pendaftaran Pelanggan Member

Gambar III. 14

Rancangan Antar Muka Pendaftaran Pelanggan Member

3. Rancangan Antar Muka Tentang Kami Member

Gambar III. 15

Rancangan Antar Muka Tentang Kami Member

 35

4. Rancangan Antar Muka Cara Pesan Member

Gambar III. 16

Rancangan Antar Muka Cara Pesan Member

5. Halaman Antar Muka Kontak Kami Member

Gambar III. 17

Rancangan Antar Muka Kontak Kami Member

 36

6. Rancangan Antar muka Konfirmasi Member

Gambar III. 18

Rancangan Antar Muka Konfirmasi Member

7. Halaman Antar Muka Daftar Pembelian Terakhir Member

Gambar III.19

Rancangan Antar Muka Pembelian Terakhir Member

 37

8. Rancangan Antar Muka Beranda Member

Gambar III. 20

Rancangan Antar Muka Beranda Member

9. Rancangan Antar Muka Keranjang Belanja Member

Gambar III. 21

Rancangan Antar Muka Keranjang Belanja Member

 38

10. Rancangan Antar Muka Selesai Belanja Member

Gambar III. 22

Rancangan Antar Muka Selesai Belanja Member

11. Rancangan Antar Muka Struk Pembelian Member

Gambar III. 23

Rancangan Antar Muka Struk Pembelian Member

 39

3.2.3. Rancangan Basis Data

Perancangan basis data menghasilkan pemetaan tabel-tabel yang digambarkan

dengan Entity Relationship Diagram (ERD).

A. Entity Relationship Diagram (ERD)

Gambar III.24

Entity Relationship Diagram (ERD)

 40

B. Logical Record Structure (LRS)

Gambar III.25

Logical Record Structure

 41

A. Spesifikasi File

1. Spesifikasi File Admin

Nama File : Admin

Akronim : Admin.myd

Fungsi : untuk memanipulasi halaman pengunjung

Tipe File : File Master

Organisasi File : Indexed Sequental

Akses File : Random

Media : Harddisk

Panjang record : 35

Kunci Field : id_admin

Software : Mysql

Tabel III.1
Spesifikasi File Tabel Admin

No Elemen data Nama Field Tipe Size ket

1 Id admin id_admin Varchar 5 Primary Key
2 Nama admin Nm_admin Varchar 20
3 Username Username Varchar 10
4 Password Pass_admin Varchar 10

2. Spesifikasi File Kategori

Nama File : kategori

Akronim : kategorimyd

Fungsi : untuk menyimpan data kategori

Tipe File : File Master

Organisasi File : Indexed Sequental

 42

Akses File : Random

Media : Harddisk

Panjang record : 36

Kunci Field : id_kategori

Software : Mysql

Tabel III.2

Spesifikasi File Tabel Kategori

No Elemen data Nama Field Tipe size ket

1 Id Kategori Id_kategori Varchar 6 Primary key
2 Nama kategori Nm_kategori Varchar 30
3 Keterangan Keterangan Text

3. Spesifikasi Tabel Konfirmasi

Nama File : Konfirmasi

Akronim File : konfirmasi.myd

Fungsi File : Untuk menyimpan konfirmasi pembayaran pelanggan

Tipe File : File Transaksi

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 67 karakter

Kunci Field : id_konfirmasi

Software : MySQL XAMPP

 43

Tabel III.3

Spesifikasi Tabel Konfirmasi

No. Elemen Data Akronim Tipe Panjang Ket

1 Id konfirmasi Id_konfirmasi Varchar 10 Primary Key
2 id Pelanggan Id_pelanggan Varchar 10 Foreign Key

3 Id orders Id_orders Varchar 12 Foreign Key

4 Atas nama Atas_nama Varchar 25

5 Bank Bank Varchar 10
6 Tanggal transfer Tgl_transfer date
7 Jumlah transfer Jml_transfer Float
8 Bukti Bukti text

4. Spesifikasi Tabel ongkir

Nama file : Ongkos Kirim

Akronim File : ongkir.myd

Fungsi File : Untuk menyimpan data harga ongkos kirim

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 36 karakter

Kunci Field : ongkir

Software : MySQL XAMPP

 44

Tabel III.4

Spesifikasi Tabel Ongkir

No. Elemen Data Akronim Tipe Panjang Ket

1 Id ongkir Id_ongkir Int 6 Primary Key
2 Nama daerah Nm_daerah Varchar 30
3 Biaya ongkir Biaya_ongkir float

5. Spesifikasi Tabel Orders

Nama file : Orders

Akronim File : orders.myd

Fungsi File : Untuk menyimpan data orders

Tipe File : File transaksi

Organisasi File : Index Sequential

Akses File : Random

Media File : Hardisk

Panjang Record : 37 karakter

Kunci Field : id_orders

Software : MySQL XAMPP

Table III.5

Spesifikasi Tabel orders

No. Elemen Data Akronim Tipe Panjang Keterangan

1 Id orders Id_orders Varchar 12 Primary key
2 Tanggal Order tgl_order Date
3 Id Pelanggan Id_Pelanggan Varchar 10
4 Id Alamat Id_Alamat Varchar 10
 45

5 Status Status Varchar 5

6. Spesifikasi Tabel orders_detail

Nama file : order Detail

Akronim File : orders_detail.myd

Fungsi File : Untuk menyimpan data orders transksi

Tipe File : File Transaksi

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 17 karakter

Kunci Field :-

Software : MySQL XAMPP

Table III.6

Spesifikasi Tabel Orders detail

No. Elemen Data Akronim Tipe Panjang Ket

1 Id orders Id_orders Varchar 12
2 Id produk Id_produk Varchar 10
3 Jumlah Jumlah Int 11
4 Harga Harga float
 46

7. Spesifikasi Tabel Pelanggan

Nama file : Pelanggan

Akronim File : pelanggan.myd

Fungsi File : Untuk menyimpan data pelanggan

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 195 karakter

Kunci Field : id_pelanggan

Software : MySQL XAMPP

Tabel III.7

Spesifikasi Tabel Pelanggan

No. Elemen Data Akronim Tipe Panjang Ket

1 Id Pelanggan Id_pelanggan Varchar 10 Primary Key
2 Nama pelanggan Nm_pelanggan Varchar 30
3 Telepon Telepon Varchar 15
4 Alamat Alamat Text
5 Email Email Varchar 30
6 Username Username Varchar 10
7 Password Password Varchar 100
 47

8. Spesifikasi Tabel produk

Nama file : Produk

Akronim File : produk.myd

Fungsi File : Untuk menyimpan data produk

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 45 karakter

Kunci Field : id_produk

Software : MySQL XAMPP

Tabel III.8

Spesifikasi Tabel Produk

No. Elemen Data Akronim Tipe Panjang Ket

1 Id produk Id_produk Varchar 6 Primary Key
2 Id kategori Id_kategori Varchar 6
3 Nama produk Nm_produk Varchar 30
4 Keterangan Keterangan Text
5 Harga Harga Double
6 Berat Berat Float
7 Stok Stok Int 3
8 Foto Foto Text
9 Tgl input Tgl_input Datetime
 48

9. Spesifikasi Tabel alm_kirim

Nama file : alamat kirim

Akronim File : alm_kirim.myd

Fungsi File : Untuk menyimpan data alamat pengiriman

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 40 karakter

Kunci Field : id_alamat

Software : MySQL XAMPP

Tabel III.9

Spesifikasi Tabel alm_kirim

No. Elemen Data Akronim Tipe Panjang Ket

1 Id alamat Id_alamat Varchar 10 Primary Key
2 Id ongkir Id_ongkir Varchar 10
3 Id_pelanggan Id_pelanggan Varchar 10
4 Alamat Alamat Text
5 Kode pos Kd_pos Varchar 10
 49

10. Spesifikasi Tabel Pesan

Nama file : pesan

Akronim File : pesan.myd

Fungsi File : Untuk menyimpan pesan masuk dari user

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 130 karakter

Kunci Field : id_pesan

Software : MySQL XAMPP

Tabel III.10

Spesifikasi Tabel pesan

No. Elemen Data Akronim Tipe Panjang Ket

1 Id pesan Id_pesan Varchar 30 Primary Key
2 Nama pengirim Nm_pengirim Varchar 50
3 Email Email Varchar 50
4 Pesan Pesan Text
 50

11. Spesifikasi Tabel Kantong

Nama file : kantong

Akronim File : kantong.myd

Fungsi File : Untuk menyimpan pesanan member

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Sequential

Media File : Hardisk

Panjang Record : 130 karakter

Kunci Field : Id_Pelanggan

Software : MySQL XAMPP

Tabel III.11

Spesifikasi Tabel pesan

No. Elemen Data Akronim Tipe Panjang Ket

1 Id Pelanggan Id_Pelanggan Varchar 10 Primary Key
2 Id Produk Id_Produk Varchar 10
3 Jumlah Jumlah Int 10
 51

3.2.4. Rancangan Struktur Navigasi

1. Halaman Pengunjung

Secara garis besar struktur navigasi Campuranhalaman pengunjung dari

pembuatan aplikasi website seperti gambar berikut:

Gambar III.26

Struktur Navigasi Pengunjung

2. Halaman Administrator

Secara garis besar struktur navigasi campuran halaman administrator dari

pembuatan aplikasi website seperti gambar berikut:

 52

Gambar III.27

Struktur Navigasi Administrator

3. Halaman Pelanggan

Secara garis besar struktur navigasi Campuran halaman pelanggan dari

pembuatan aplikasi website seperti gambar berikut

 53

Gambar III.28

Struktur Navigasi Pelanggan

3.3 Implementasi dan Pengujian Unit

3.3.1 Implementasi

A. Implementasi Rancangan Antar Muka

3.2.2 Implementasi rancangan antar muka pada webe-commerce berdasarkan hasil

rancangan antar muka.

a. Rancangan Antar Muka Admin

1. Rancangan Antar Muka Login Admin

Gambar III. 29

Rancangan Antar Muka Login Admin

 54

2. Rancangan Antar Muka Beranda Admin

Gambar III. 30

Rancangan Antar Muka Beranda Admin

3. Rancangan Antar Muka Penjualan Admin

Gambar III. 31

Rancangan Antar Muka Penjualan Admin

 55

4. Rancangan Antar Muka Konfirmasi Admin

Gambar III. 32

Rancangan Antar Muka Konfirmasi Admin

5. Rancangan Antar Muka Produk Admin

Gambar III. 33

Rancangan Antar Muka Produk Admin

 56

6. Rancangan Antar Muka Pelanggan Admin

Gambar III. 34

Rancangan Antar Muka Pelanggan Admin

7. Rancangan Antar Muka Ongkir Admin

Gambar III. 35

Rancangan Antar Muka Ongkir Admin

 57

8. Rancangan Antar Muka Kategori Admin

Gambar III. 36

Rancangan Antar Muka Kategori Admin

9. Rancangan Antar Muka Pesan Admin

Gambar III. 37

Rancangan Antar Muka Pesan Admin

 58

10. Rancangan Antar Muka Laporan Penjualan Admin

Gambar III. 38

Rancangan Antar Muka Laporan Penjualan Admin

11. Rancangan Antar Muka Ubah Password Admin

Gambar III. 39

Rancangan Antar Muka Ubah Password Admin

 59

b. Rancangan Antar Muka Pelanggan

1. Rancangan Antar Muka Login Pelanggan Member

Gambar III. 40

Rancangan Antar Muka Login Pelanggan Member

2. Rancangan Antar Muka Pendaftaran Member

Gambar III. 41

Rancangan Antar Muka Pendaftaran Member

 60

3. Rancangan Antar Muka Beranda Member

Gambar III. 42

Rancangan Antar Muka Beranda Member

4. Halaman Antar Muka Tentang Kami Member

Gambar III.43

Rancangan Antar Muka Tentang Kami Member

 61

5. Rancangan Antar Muka Cara Pesan Member

Gambar III.44

Rancangan Antar Muka Cara Pesan Member

6. Rancangan Antar Muka Kontak Kami Member

Gambar III.45

Rancangan Antar Muka Kontak Kami Member

 62

7. Rancangan Antar Muka Halaman Konfirmasi Member

Gambar III.46

Rancangan Antar Muka Konfirmasi Member

8. Rancangan Antar Muka Keranjang Belanja Member

Gambar III.47

Rancangan Antar Muka Keranjang Belanja Member

 63

9. Rancangan Antar Muka Selesai Belanja Member

Gambar III.48

Rancangan Antar Muka Selesai Belanja Member

10. Rancangan Antar Muka Struk Pembelian Member

Gambar III. 49

Rancangan Antar Muka Struk Pembelian Member

 64

11. Rancangan Antar Muka Daftar Pembelian Terakhir

Gambar III. 50

Rancangan Antar Muka Daftar Pembelian Terakhir Member

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan web e-commerce.

Spesifikasi System Komputer :

1. Spesifikasi Perangkat Keras

A. Server

1. CPU

a. Processor (R) Atom(TM) CPU N570 @ 1.66 GHz 1,67 GHz

b. RAM : 2 GB

c. Hard Disk : 200 GB

2. Mouse
 65

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768

5. Koneksi internet dengan kecepatan 2 Mbps

B. Client

1. CPU

a. Processor (R) Atom(TM) CPU N570 @ 1.66 GHz 1,67 GHz

b. RAM : 2 GB

c. Hard Disk : 200 GB

2. Mouse

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768

5. Koneksi internet dengan kecepatan 2 Mbps

2. Spesifikasi Perangkat Lunak

1. Server

a. Sistem operasi menggunakan Microsoft Windows

b. Aplikasi bundle web server menggunakan Apache2Triad yang terdiri

dari beberapa komponen, diantaranya:

- Aplikasi Apache2Triad

- Aplikasi PHP MyAdmin

c. Aplikasi web untuk melihat hasil yaitu Mozilla firefox, Google

Chrome.

2. Client
 66

a. Sistem operasi menggunakan Microsoft Windows

b. Aplikasi Web Browser seperti Mozilla firefox, Google Chrome.

3.3.2 Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan Blackbox Testing yang

fokus terhadap proses masukan dan keluaran program.

A. Pengujian Terhadap Form Login

Tabel III.1

Hasil Pengujian Black Box Testing Halaman Login admin

N Skenario Test case Hasil yang Hasil Kesimpula

o Pengujian diharapkan pengujia n
n
Username dan Username: Sistem akan
password tidak (kosong) menolak
diisi kemudian Password: akses dan
klik tombol login (kosong) muncul
peringatan Sesuai
1. Valid
“tolong isi harapan
username
dan password
terlebih
dahulu”
Username: Sistem akan
Username diisi admin menolak
dan Password (benar) akses dan
Sesuai
2 tidak diisi Password: muncul Valid
harapan
kemudian klik (kosong) peringatan
login “password
anda salah”
Sistem akan
Username tidak Username: menolak
diisi dan (kosong) akses dan
Sesuai
3 password diisi Password: muncul Valid
Harapan
kemudian klik admin(ben peringatan
login ar) “Username
anda salah”
4 Username dan Username: Sistem akan Sesuai Valid
 67

password terisi admin(sal menolak dan harapan

namun salah satu ah) muncul
ada yang salah Password: peringatan
123(salah) “password
atau
username
anda salah”
Sistem akan
Username: menerima,
Username dan admin(ben muncul
password terisi ar) pesan Sesuai
5 Valid
dengan benar Password: “selamat harapan
dan klik login admin(ben dating
ar) admin,dimen
u admin”

B. Pengujian Terhadap Form Tambah produk

Tabel III.2

Hasil Pengujian Black Box Testing Form Tambah produk

No Skenario Test case Hasil yang Hasil Kesimpula
Pengujian diharapkan pengujia n
n
Semua field dan Field: Muncul
gambar tidak (kosong) peringatan
Sesuai
1. terisi kemudian Gambar: “please Valid
harapan
klik simpan (kosong) select this
form”
Semua field Muncul
Field :
terisi dan gambar peringatan
terisi Sesuai
2 tidak terisi “please Valid
Gambar: harapan
kemudian klik select this
(kosong)
simpan form”
Produk
Semua field Field :
tersimpan
terisi dan gambar terisi Sesuai
3 dan produk Valid
terisi kemudian Gambar: harapan
masuk ke
klik simpan terisi
menu produk
 68

C. Pengujian Terhadap Form Daftar Pelanggan

Tabel III.3

Hasil Pengujian Black Box Testing Form Daftar Pelanggan

N Skenario Test case Hasil yang Hasil Kesimpu
o Pengujian diharapkan pengujian lan
Semua field Muncul
Field:
tidak terisi peringatan Sesuai
1. (kosong) Valid
kemudian klik “please fill out harapan
daftar this field”
telepon: Muncul
Salah satu field
(kosong) peringatan
belum terisi Sesuai
2 Field lain “please fill out Valid
kemudian klik harapan
: terisi this field”
daftar
Field : Muncul
Semua field
terisi peringatan
terisi namun Sesuai
3 Email : “please include Valid
format email harapan
terisi an ‘@’, in the
salah kemudian
(salah) email address ”
Email
terisi
dengan
Semua field
format
terisi dan format
yang
email benar Muncul
benar,sem
namun username peringatan”Ma Sesuai
4 ua field Valid
sudah ada di af username harapan
juga terisi
dalam database sudah ada”
namun
kemudian klik
usernae
daftar
sudah
pernah
digunakan
Tersimpan
Field :
Semua field kedalam
terisi
terisi dan format database dan
(benar) Sesuai
5 email benar muncul pesan Valid
Email : harapan
kemudian klik “Data Telah
terisi
daftar Tersimpan,
(benar)
silahkan login”
 69

BAB IV

PENUTUP

4.1 Kesimpulan

Penulis akan mencoba untuk menyimpulkan dari semua pembahasan

secara singkat. Berikut ini beberapa kesimpulan yang dapat penulis ambil, yaitu :

1. Pengunjung tidak perlu lagi datang langsung ke toko untuk mencari dan

mendapatkan informasi aktual seputar barang yang diinginkannya.

2. Pengunjung bisa mengetahui informasi seputar barang-barang yang ada di

toko seperti kaos sablon gambar binatang dan informasi lainnya.

3. Administrator (admin) bertugas mengatur website informasi penjualan seperti

mengelola data barang, mengelola data member dan memastikan server

website tetap hidup.

4.2 Saran-saran

Penulis akan mencoba untuk menyarankan dari semua pembahasan secara

singkat. Berikut ini beberapa saran yang dapat penuli sambil, yaitu :

1. Aplikasi web yang telah dibuat hendaknya dioperasikan secara baik dan benar

untuk mencapai tujuan yang diharapkan.

2. Perlu adanya dibuatkan backup dari website maupun data-data yang digunakan

pada website. Semata-mata untuk mengantisipasi hal-hal yang tidak

diinginkan misalnya server rusak, crash atau kejadian lain yang tidak terduga

demi keamanan dan kenyamanan.

 DAFTAR PUSTAKA

Alexander, F. K. Sibero. (2011), Kitab Suci Web Programing, Media Kom, Yogyakarta.

Aloysius, Sigit W. (2011). Pemrograman Web Aplikatif dengan Java. PT. Elex Media
Komputindo. Jakarta.

Brady, M.,& Loonam, J. (2010). Exploring the use of entity-relationship diagramming as

a technique to support grounded theory inquiry. Bradford: Emerald Group Publishing.

Ian, Sommerville. (2011). Software Enginering (Rekayasa Perangkat Lunak). Jakarta:

Erlangga.

Kurniawan, Rulianto. (2010). PHP dan MySQL untuk orang awam (edisi 2).
Palembang: Maaxicom

Nugroho, Adi. (2005). Analisis dan Perancangan Sistem Informasi dengan Metodologi
Berorientasi Objek, Informatika Bandung.

Nugroho, Bunafit. (2008),Aplikasi Pemrograman Web Dinamis Dengan PHP dan

MySQL,Gava Media,Yogyakarta.

Pohan I Husni, Sidik Bertha. (2007) Pemrograman Web Dengan HTML Penerbit
Informatika, Bandung.

Pressman, R.S., 2010, Software Engineering: a practitioner’s approach, 7th Edition,

McGraw-Hill, New York.

Suyanto, Asep Herman. (2008). Step by Step Web Design Theory and Practice Edisi II.
Yogyakarta: Andi Publisher.

Usman, Husaini dan Akbar, Purnomo Settiady. 2006. Metodologi Penelitian Sosial.
Jakarta : Bumi Aksara.

Vermaat, Shelly. (2011). Discovering Computers, Complete. Boston: Course Technology.

Yuniar, Supardi. (2010). Web My Profile Dengan Joomla I.S.X. Jakarta: Media
Komputindo.
48