i SKRIPSI RANCANG BANGUN APLIKASI FRONT OFFICE BERBASIS WEB DAN ANDROID DI TOKO PUJI COLLECTION KUDUS HALAMAN JUDUL - Welcome to Repositori Universitas Muria Kudus - Repositori Universitas Muria Kudus

SKRIPSI

RANCANG BANGUN APLIKASI FRONT OFFICE BERBASIS WEB DAN
ANDROID DI TOKO PUJI COLLECTION KUDUS
HALAMAN JUDUL

OLEH :
RYAN OKTAVIANTO
2010-51-017

SRIPSI DIAJUKAN SEBAGAI SALAH SATU SYARAT UNTUK
MEMPEROLEH GELAR SARJANA KOMPUTER

PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MURIA KUDUS
2015
i

UNIVERSITAS MURIA KUDUS
PENGESAHAN STATUS SKRIPSI

JUDUL : RANCANG BANGUN APLIKASI FRONT OFFICE BERBASIS WEB
DAN ANDROID DI TOKO PUJI COLLECTION KUDUS
SAYA : RYAN OKTAVIANTO
Mengizinkan skripsi Teknik Informatika ini disimpan di perpustakaan program
studi Teknik Informatika Universitas Muria Kudus dengan syarat-syarat kegunaan
sebagai berikut :
1. Skripsi adalah hal milik program studi Teknik Informatika UMK
2. Perpustakaan Teknik Informatika UMK dibenarkan membuat salinan untuk tujuan
referensi saja
3. Perpustakaan juga dibenarkan membuat salinan skripsi ini sebagai bahan
pertukaran antar institusi pendidikan tinggi
4. Berikut tanda √ sesuai dengan kategori skripsi

√

Sangat Rahasia

(Mengandung isi tentang keselamatan/kepentingan
Negara Republik Indonesia)

Rahasia

(Mengandung isi tentang kerahasiaan dari suatu
organisasi/badan tempat penelitian skripsi ini
dikerjakan)

Biasa
Disahkan Oleh :
Penulis

Pembimbing Utama

Ryan Oktavianto
NIM : 201051017
Alamat Tetap :
Desa Getas Pejaten Rt 08 Rw III Kec. Jati
Kab. Kudus
Tanggal : 29 Juli 2015

Arief Susanto, S.T,M.Kom

NIDN. 0603047104
Tanggal :29 Juli 2015

ii

UNIVERSITAS MURIA KUDUS
PERNYATAAN PENULIS
JUDUL : RANCANG BANGUN APLIKASI FRONT OFFICE BERBASIS WEB
DAN ANDROID DI TOKO PUJI COLLECTION KUDUS
SAYA

: RYAN OKTAVIANTO

NIM

: 2010-51-017

“Saya Menyatakan dan bertanggung jawab dengan sebenarnya bahwa skripsi ini
adalah hasil karya saya sendiri kecuali cuplikan dan ringkasan yang masing-masing
telah saya jelaskan sumbernya, jika pada waktu selanjutnya ada pihak lain yang,

mengklaim bahwa skripsi ini sebagai karyanya, yang disertai dengan bukti-bukti
yang cukup, maka saya bersedia untuk membatalkan gelar Sarjana Komputer saya
beserta segala hak dan kewajiban yang melekat pada gelar tersebut”.
Kudus, 27 Agustus 2015

Ryan Oktavianto
Penulis

iii

UNIVERSITAS MURIA KUDUS
PERSETUJUAN SKRIPSI
JUDUL : RANCANG BANGUN APLIKASI FRONT OFFICE BERBASIS WEB
DAN ANDROID DI TOKO PUJI COLLECTION KUDUS
SAYA

: RYAN OKTAVIANTO

NIM

: 2010-51-017
Laporan ini telah diperiksa dan disetujui,
Kudus, 29 Juli 2014
Pembimbing 1

Pembimbing 2

Arief Susanto, S.T,M.Kom

Tutik Khotimah, M.Kom

NIDN. 0603047104

NIDN. 0608068502
Mengetahui
Kaprogdi Teknik Informatika

Ahmad Jazuli, M.Kom
NIDN.0406107004

iv

UNIVERSITAS MURIA KUDUS
PENGESAHAN SKRIPSI
JUDUL : RANCANG BANGUN APLIKASI FRONT OFFICE BERBASIS WEB
DAN ANDROID DI TOKO PUJI COLLECTION KUDUS
SAYA

: RYAN OKTAVIANTO

NIM

: 2010-51-017

Skipsi ini telah diujikan dan dipertahankan di hadapan Dewan Penguji pada Sidang
Skripsi tanggal 20 Agustus 2015. Menurut pandangan kami, Skripsi ini memadai dari
segi kualitas untuk tujuan penganugerahan gelar Sarjana Komputer (S.Kom).
Kudus, 20 Agustus 2015
Ketua Penguji

Penguji 1

Ahmad Jazuli, M.Kom

Tri Listyorini, M.Kom

NIDN.0406107004

NIDN. 0616088502
Mengetahui,

Dekan Fakultas Teknik

Kaprogdi Teknik Informatika

Rochmad Winarso, ST., MT

Ahmad Jazuli, M.Kom

NIS. 0610701000001138

NIDN.0406107004

v

ABSTRACK

Design of a web-based front office applications and android in stores Praise
Collection used to build something that is required by the store and the customer that
is growing toward computerization. The method used is the method by Sammerville
Ian Waterfall. Research results with such systems make it easier for stores Praise
Collection can promote and sell products more easily, effectively and efficiently. The
system was developed using PHP programming language. Then proceed with the use
of android-based system in order to make it easier for customers and shopkeepers to
access the application. Expected useful systems developed optimally.

Keywords: Front Office, Design, Web, PHP, Android.

vi

ABSTRAK
Rancang bangun aplikasi front office berbasis web dan android di toko Puji
Collection Kudus digunakan untuk membangun sesuatu yang diperlukan oleh pihak
toko maupun customer yang sedang berkembang ke arah komputerisasi. Metode
penelitian yang digunakan adalah Metode Waterfall oleh Sammerville Ian. Hasil
penelitian dengan adanya sistem tersebut lebih memudahkan toko Puji Collection
Kudus dapat mempromosikan dan menjual produk dengan lebih mudah, efektif dan
efisien. Sistem dikembangkan dengan menggunakan menggunakan bahasa
pemrograman PHP. Kemudian dilanjutkan dengan penggunaan sitem berbasis
android agar lebih memudahkan para customer maupun pemilik toko untuk
mengakses aplikasi tersebut. Diharapkan sistem yang dikembangkan bermanfaat
seoptimal mungkin.
Kata Kunci : Front Office, Rancang Bangun, Web, PHP, Android.

vii

KATA PENGANTAR
Puji syukur kehadirat Allah SWT karena atas Rahmat dan Hidayah-Nya
penulis mampu menyelesaikan penyusunan skripsi ini dengan judul “Rancang
Bangun Aplikasi Front Office Berbasis Web dan Android di Toko Puji Collection

Kudus”.
Skripsi ini disusun guna melengkapi salah satu persyaratan untuk
memperoleh Gelar Kesarjanaan Progam Studi Teknik Informatika Fakultas Teknik
Universitas Muria Kudus. Kiranya dalam penyusunan skripsi ini tidak akan
terselesaikan dengan baik tanpa bantuan dari berbagai pihak. Untuk itu pada
kesempatan ini penulis mengucapkan terima kasih yang sebesar-besarnya,
penghargaan yang setinggi-tingginya dan permohonan maaf atas segala kesalahan
yang pernah penulis lakukan kepada semua pihak yang telah membantu dalam
penyelesaian skripsi ini, terutama kepada :
1. Allah SWT yang telah memberikan Ridho, Rahmat dan Hidayah-Nya.
2. Bapak Dr.Suparnyo, SH, MS, selaku Rektor Universitas Muria Kudus.
3. Bapak Rochmad Winarso, ST, MT, selaku Dekan Fakultas Teknik Universitas
Muria Kudus.
4. Bapak Ahmad Jazuli, S.Kom, M.Kom, selaku Ketua Program Studi Teknik
Informatika Universitas Muria Kudus.
5. Bapak Arief Susanto, S.T,M.Kom selaku pembimbing utama Skripsi.
6. Ibu Tutik Khotimah, M.Kom, selaku pembimbing Skripsi penulis.
7. Ibu dan Bapak tercinta yang selalu memberikan dukungan moral dan materiil.
8. Semua pihak yang telah membantu penyusunan skripsi ini yang tidak bisa penulis
sebutkan satu persatu.

Penulis menyadari sepenuhnya bahwa dalam penyusunan skripsi ini masih
terdapat banyak kekurangan, untuk itu penulis mengharap kritik dan saran dari
berbagai pihak untuk sempurnanya sebuah karya tulis.
Kudus, 29 Juli 2015
Penulis

viii

DAFTAR ISI

HALAMAN JUDUL ................................................................................................... i
PENGESAHAN SKRIPSI ......................................................................................... ii
PERNYATAAN PENULIS ...................................................................................... iii
PERSETUJUAN SKRIPSI....................................................................................... iv
PENGESAHAN SKRIPSI ......................................................................................... v
ABSTRACK .............................................................................................................. vi
ABSTRAK ................................................................................................................ vii
KATA PENGANTAR............................................................................................. viii
DAFTAR ISI.............................................................................................................. ix
DAFTAR TABEL .................................................................................................... xii
DAFTAR GAMBAR............................................................................................... xiii
DAFTAR LAMPIRAN ........................................................................................... xvi
BAB I PENDAHULUAN........................................................................................... 1
1.1 Latar Belakang.................................................................................................. 1
1.2 Identifikasi Masalah ......................................................................................... 2
1.3 Batasan Masalah ............................................................................................... 2
1.4 Rumusan Masalah ............................................................................................ 3
1.5 Tujuan Penelitian.............................................................................................. 4
1.6 Manfaat Penelitian............................................................................................ 4
1.6.1 Manfaat Bagi Toko Tas Puji Collection Kudus......................................... 4
1.6.2 Manfaat Bagi Masyarakat.......................................................................... 4
1.6.3 Manfaat Bagi IPTEK ................................................................................. 4
BAB II TINJAUAN PUSTAKA................................................................................ 5
2.1 Penelitian Terkait.............................................................................................. 5
2.2 Landasan Teori ................................................................................................. 6
2.2.1 Diagram Aliran Data / Data Flow Diagram (DFD) .................................. 6
2.2.2 Penyimpanan (Data Store) ........................................................................ 9
2.2.3 Diagram Konteks (Context Diagram) ..................................................... 11
2.2.4 Diagram Nol Zero (Overview Diagram) ................................................. 11

ix

2.2.5 Diagram Rinci (Level Diagram).............................................................. 11
2.2.6 Kamus Data ............................................................................................. 12
2.2.7 Entity Relationship Diagram (ERD) ....................................................... 13
2.2.8 Website..................................................................................................... 15
2.2.9 Java Script ............................................................................................... 16
2.2.10 PHP .......................................................................................................... 16
2.2.11 MySQL .................................................................................................... 17
2.2.12 Dreamweaver........................................................................................... 18
2.2.13 Android .................................................................................................... 18
2.2.13.1 Sejarah dan Pengertian Android ................................................. 18
2.2.13.2 Macam-macam Versi Android.................................................... 18
2.2.14 Eclipse...................................................................................................... 22
2.3 Kerangka Pemikiran ....................................................................................... 23
BAB III METODE PENELITIAN ......................................................................... 24
3.1 Study Literature ............................................................................................... 24
3.2 Pengumpulan Data dan Analisis ...................................................................... 24
3.3 Metode Pengerjaan .......................................................................................... 24
BAB IV ANALISA, PERANCANGAN DAN DESAIN INPUT OUTPUT......... 26
4.1 Gambaran Umum Aplikasi Front Office Berbasis Web dan Android............. 26
4.2 Analisis Masalah.............................................................................................. 27
4.2.1 Analisis Sistem yang Berjalan ................................................................. 28
4.2.2 Analisis Sistem yang Diusulkan .............................................................. 29
4.2.3 Analisis Kebutuhan Data dan Informasi .................................................. 29
4.2.4 Analisis Kebutuhan Aplikasi Untuk Perancangan ................................... 29
4.2.4.1 Analisa Kebutuhan Perangkat Keras .............................................. 29
4.2.4.2 Analisa Kebutuhan Perangkat Lunak.............................................. 29
4.2.5 Perancangan Sistem .................................................................................. 29
4.3 Perancangan Basis Data................................................................................... 33
4.3.1 ERD (Entity Relationship Diagram)......................................................... 33
4.4 Skema Tabel atau Relasi Antar Tabel ............................................................ 35
4.5 Perancangan Database .................................................................................... 35
4.6 Perancangan Desain Interface, Input dan Output ........................................... 39

x

BAB V IMPLEMENTASI SISTEM....................................................................... 52
5.1 Implemetasi Basis Data .................................................................................. 52
5.2 Implemetasi Sistem ......................................................................................... 56
5.2.1 Upload Aplikasi ke Server ....................................................................... 56
5.3 Pengujian Sistem ............................................................................................ 68
5.3.1 Hasil Pengujian Untuk Proses Registrasi/Pendaftaran Customer ............ 68
5.3.2 Hasil Pengujian Untuk Proses Login Customer ....................................... 69
5.3.3 Hasil Pengujian Untuk Proses Pemesanan Customer .............................. 69
5.3.4 Halaman Pengujian Login Admin ............................................................ 70
5.3.5 Halaman Pengujian Konfirmasi Pemesanan Admin ................................ 70
5.3.6 Pengujian Instalasi Aplikasi di Handphone Android ............................... 72
5.4 Rekapitulasi Hasil Kuisioner .......................................................................... 73
BAB VI PENUTUP .................................................................................................. 75
6.1 Kesimpulan ..................................................................................................... 75
6.1 Saran ............................................................................................................... 75
DAFTAR PUSTAKA ............................................................................................... 76

xi

DAFTAR TABEL

Tabel 2.1 Simbol-simbol DFD.......................................................................................... 7
Tabel 2.2 Penomeran Proses ........................................... Error! Bookmark not defined.
Tabel 4.1 Tabel Admin ................................................................................................... 36
Tabel 4.2 Tabel Kategori................................................................................................. 36
Tabel 4.3 Tabel Produk ................................................................................................... 36
Tabel 4.4 Tabel Order Produk......................................................................................... 37
Tabel 4.5 Tabel Detail Transaksi .................................................................................... 37
Tabel 4.6 Tabel Pelanggan.............................................................................................. 38
Tabel 4.7 Tabel Ongkir ................................................................................................... 38
Tabel 4.8 Tabel Kota....................................................................................................... 39
Tabel 4.9 Tabel Jasa........................................................................................................ 39
Tabel 5.1 Tabel Pengujian Proses Registrasi .................................................................. 68
Tabel 5.2 Tabel Pengujian Proses Login Customer ........................................................ 69
Tabel 5.3 Tabel Pengujian Proses Pemesanan Customer................................................ 69
Tabel 5.5 Tabel Pengujian Login Admin........................................................................ 70
Tabel 5.6 Tabel Pengujian KonfirmasiPesanan Admin .................................................. 71
Tabel 5.7 Tabel Pengujian Aplikasi di Handphone Android .......................................... 72
Tabel 5.8 Rekapitulasi Kuisioner.................................................................................... 73

xii

DAFTAR GAMBAR

Gambar 2.1 Kesatuan Luar ............................................................................................... 7
Gambar 2.2 Proses ............................................................................................................ 8
Gambar 2.3 Penyimpanan (Data Store) ............................................................................ 9
Gambar 2.4 Entitas........................................................ ..Error! Bookmark not defined.
Gambar 2.5 Atribut ......................................................................................................... 14
Gambar 2.6 Relationship................................................................................................. 14
Gambar 2.7 Kerangka Pemikiran.................................................................................... 23
Gambar 3.1 Metodologi Waterfall .................................................................................. 25
Gambar 4.1 Context Diagram Aplikasi Front Office Toko ............................................ 30
Gambar 4.2 DFD Level 0 Aplikasi Front Office Toko................................................... 31
Gambar 4.3 DFD Level 1 Pendataan Toko..................................................................... 32
Gambar 4.4 DFD Level 1 Order Produk......................................................................... 33
Gambar 4.5 ERD (Entity Relationship Diagram............................................................. 34
Gambar 4.6 Relasi Antar Tabel....................................................................................... 35
Gambar 4.7 Halaman Desain Aplikasi Untuk Pelanggan dan Pengunjung .................... 40
Gambar 4.8 Halaman Utama Untuk Pelanggan dan Pengunjung ................................... 40
Gambar 4.9 Halaman login dan Sign up untuk Pelanggan dan Pengunjung .................. 41
Gambar 4.10 Halaman Detail Produk untuk Pelanggan dan Pengunjung ...................... 42
Gambar 4.11 Halaman Cart untuk Pelanggan................................................................. 42
Gambar 4.12 Halaman Selesai Belanja untuk Pelanggan ............................................... 43
Gambar 4.13 Halaman Detail Transaksi untuk Pelanggan ............................................. 44
Gambar 4.14 Halaman Desain Aplikasi untuk Admin.................................................... 44
Gambar 4.15 Halaman Login Untuk Admin................................................................... 45
Gambar 4.16 Halaman Data Pelanggan Untuk Admin ................................................... 45
Gambar 4.17 Halaman Input Kategori Untuk Admin..................................................... 46
Gambar 4.18 Halaman Data Kategori Untuk Admin...................................................... 46
Gambar 4.19 Halaman Input Produk Untuk Admin ....................................................... 47
Gambar 4.20 Halaman Data Produk Untuk Admin ........................................................ 47
Gambar 4.21 Halaman Data Order Produk Untuk Admin.............................................. 48
Gambar 4.22 Halaman Input Ongkos Kirim Untuk Admin............................................ 48

xiii

Gambar 4.23 Halaman Data Ongkos Kirim Untuk Admin............................................. 49
Gambar 4.24 Halaman Input Jasa Kirim Untuk Admin.................................................. 49
Gambar 4.25 Halaman Data Jasa Kirim Untuk Admin................................................... 50
Gambar 4.26 Halaman Input Kota Kirim Untuk Admin................................................. 50
Gambar 4.27 Halaman Data Kota Kirim Untuk Admin ................................................. 51
Gambar 5.1 Tabel Admin................................................................................................ 52
Gambar 5.2 Tabel Pelanggan .......................................................................................... 52
Gambar 5.3 Tabel Kategori............................................................................................. 53
Gambar 5.4 Tabel Produk ............................................................................................... 53
Gambar 5.5 Tabel Jasa .................................................................................................... 53
Gambar 5.6 Tabel Kota ................................................................................................... 54
Gambar 5.7 Tabel Ongkir ............................................................................................... 54
Gambar 5.8 Tabel Order ................................................................................................. 55
Gambar 5.9 Tabel Detail Transaksi ................................................................................ 55
Gambar 5.10 Tabel Relasi Antar Tabel........................................................................... 56
Gambar 5.11 Masukan Domain dan Pasword................................................................. 57
Gambar 5.12 Konfirmasi Order ...................................................................................... 57
Gambar 5.13 Konfirmasi Domain Berhasil Dibuat ........................................................ 58
Gambar 5.14 Halaman Menu File................................................................................... 58
Gambar 5.15 Instal File Manager.................................................................................... 59
Gambar 5.16 Direktori File manager .............................................................................. 59
Gambar 5.17 Direktori file Manager /public_html ......................................................... 60
Gambar 5.18 Menu File Database................................................................................... 60
Gambar 5.19 Halaman PHP MyAdmin .......................................................................... 61
Gambar 5.20 Halaman importing Database .................................................................... 62
Gambar 5.21 Halaman Direktori File Manager Folder Puji ........................................... 62
Gambar 5.22 Edit file Koneksi.php................................................................................. 63
Gambar 5.23 Halaman Pelanggan dan Pengunjung........................................................ 63
Gambar 5.24 Gambar Produk Detail............................................................................... 64
Gambar 5.25 Gambar Login Pelanggan.......................................................................... 64
Gambar 5.26 Menu Cart.................................................................................................. 65
Gambar 5.27 Menu Ceckout ........................................................................................... 65

xiv

Gambar 5.28 Menu Order Detail .................................................................................... 66
Gambar 5.29 Login Admin ............................................................................................. 66
Gambar 5.30Tampilan Aplikasi Android........................................................................ 67

xv

DAFTAR LAMPIRAN

Lampiran 1 : Biodata
Lampiran 2 : Konsultasi Skripsi
Lampiran 3 : Revisi Skripsi
Lampiran 4 : Biografi Penulis

xvi