i

RANCANG BANGUN APLIKASI TOKO ONLINE BERBASIS WEB RESPONSIVE MENGGUNAKAN

HMVC PADA CODEIGNITER

TUGAS AKHIR

Sebagai Persyaratan Guna Meraih Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang

Disusun Oleh:

Jiwanto Ardi

09560432

JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG 2016

ii

LEMBAR PERSETUJUAN

RANCANG BANGUN APLIKASI TOKO ONLINE BERBASIS WEB RESPONSIVE MENGGUNAKAN

HMVC PADA CODEIGNITER

TUGAS AKHIR

Sebagai Persyaratan Guna Meraih Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang

Disusun Oleh :

Jiwanto Ardi

09560432

Telah diperiksa dan disetujui,

Dosen Pembimbing I Dosen Pembimbing II

Maskur, S.Kom, M.Kom. Zamah Sari, S.T, M.T.

NIP. 108.1410.0542 NIP. 108.1410.0555

iv

SURAT PERNYATAAN

Yang bertanda tangan dibawah ini:

Nama : Jiwanto Ardi

NIM : 09560432

Fak / jur : Teknik Informatika

Dengan ini saya menyatakan bahwa tugas akhir saya dengan judul:

“Rancang Bangun Aplikasi Toko Online Berbasis Web Responsive

Menggunakan HMVC Pada Codeigniter”. Adalah bukan merupakan karya tulis

orang lain, baik sebagian maupun keseluruhan, kecuali dalam bentuk kutipan yang

telah disebutkan sumbernya.

Demikian surat pernyataan ini saya buat dengan sebenar-benarnya dan apabila

surat pernyataan ini tidak benar, saya siap mendapatkan sanksi akademis.

Malang, 3 Mei 2016 Yang Menyatakan (Jiwanto Ardi)

Mengetahui,

Dosen Pembimbing I Dosen Pembimbing II

Maskur, S.Kom, M.Kom. Zamah Sari, S.T, M.T.

NIP. 108.1410.0542 NIP. 108.1410.0555

v

ABSTRAK

Sistem aplikasi web toko online menggunakan hmvc pada codeigniter

diharapkan dapat memberi kemudahan kepada para pelaku bisnis online dalam

melakukan kegiatan usaha jual – beli dan memudahkan para programmer web

dalam mengembangkan sistem aplikasi ini karena programmer dapat membongkar

dan memasang sebuah modul tanpa mempengaruhi sistem yang sedang berjalan.

Perancangan sistem aplikasi ini dikembangkan dengan menggunakan perangkat

lunak XAMPP dan adobe dreamweaver cs6. Dengan menggunakan XAMPP,

paket - paket aplikasi yang kita perlukan dalam merancang sebuah situs yang baik

seperti Apache Web Server, PHP dan MySQL telah tersedia. Sistem aplikasi web

toko online ini meliputi pemakaian situs oleh superadmin, admin, guest, dan

member.

Kata Kunci : hmvc, codeigniter, xampp, php

vi

ABSTRACT

Web application system online store using hmvc on codeigniter is

expected to provide convenience to business people conducting business online in

selling – buying and facilitates web programmers in developing this application

system because programmer can unpack and install a module without affecting the

running system. This application system design software developed using

XAMPP and Adobe Dreamweaver CS6. By using the XAMPP package - a

package of applications that we need in designing a good site such as Apache

Web Server, PHP and MySQL are available. Online store web application system

includes the use of the site by superadmin, admin, guest, and member.

Keywords : hmvc, codeigniter, xampp, php

vii

LEMBAR PERSEMBAHAN

Puji syukur kepada Allah SWT atas rahmat, hidayah, dan karunia-Nya,

penulis dapat menyelesaikan Tugas Akhir dengan judul “Rancang Bangun

Aplikasi Toko Online Berbasis Web Responsive Menggunakan HMVC Pada

Codeigniter”. Atas terselesaikannya Tugas Akhir ini, dengan kerendahan hati,

penulis menyampaikan banyak terima kasih kepada:

1. Bapak Maskur, S.Kom, M.Kom dan Bapak Zahmah Sari, S.T, M.T selaku

pembimbing tugas akhir saya.

2. Bapak/Ibu Rektor Universitas Muhammadiyah Malang.

3. Bapak/Ibu Dekan Fakultas Teknik Universitas Muhammadiyah Malang.

4. Bapak/Ibu Ketua Jurusan Teknik Informatika Universitas Muhammadiyah

Malang.

5. Bapak/Ibu Dosen Jurusan Teknik Informatika Universitas Muhammadiyah

Malang

6. Kedua Orang Tua tercinta, Ayahanda Sukardi dan Ibunda Sumarmi.

Terima kasih atas segala pengorbanan dan kasih sayang yang kalian

berikan, serta doa - doa yang sangat istimewa dan yang terbaik yang kalian

kirimkan lewat perantara-Nya.

7. Seluruh teman – teman i-class angkatan 2009.

8. Seluruh teman – teman Ikabama Universitas Muhammadiyah Malang, terima kasih atas pengalaman yang diberikan.

iii

LEMBAR PENGESAHAN

RANCANG BANGUN APLIKASI TOKO ONLINE BERBASIS WEB RESPONSIVE MENGGUNAKAN

HMVC PADA CODEIGNITER

Tugas Akhir

Diajukan Sebagai Syarat Untuk Memperoleh Gelar Sarjana (S1) Di Fakultas Teknik Universitas Muhammadiyah Malang

Disusun Oleh : Nama : Jiwanto Ardi Nim : 09560432

Tugas Akhir ini telah disetujui dan dinyatakan lulus oleh tim penguji Pada hari senin 3 mei 2016

Disetujui Oleh,

Dosen Penguji 1 Dosen Penguji 2

Aminudin, S.Kom, M.Cs. Eko Budi Cahyono, S.Kom, M.T. NIDN. 0701068603 NIP. 108.9504.0330

Mengetahui

Kepala Jurusan Teknik Informatika

Yuda Munarko, S.kom, M.Sc. NIP. 108.0611.0443

viii

KATA PENGANTAR

Segala puji bagi Allah SWT, Tuhan seluruh alam atas limpahan

rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir

yang berjudul :

“RANCANG BANGUN APLIKASI TOKO ONLINE BERBASIS

WEB RESPONSIVE MENGGUNAKAN HMVC PADA

CODEIGNITER”

Pada tugas akhir ini disajikan pokok-pokok pembahasan yang

meliputi pendahuluan, landasan teori, perancangan sistem, implementasi

dan pengujian sistem.

Penulis menyadari bahwa masih terdapat banyak kekurangan dan

keterbatasan dalam tugas akhir ini. Oleh karena itu, penulis mengharapkan

masukan berupa saran dan kritik yang membangun agar tulisan ini dapat

lebih bermanfaat bagi perkembangan ilmu pengetahuan kedepan.

Akhir kata penulis berharap semoga tugas akhir ini dapat bermanfaat

dan menjadi tambahan ilmu pengetahuan bagi pembaca sekalian. Penulis

juga menyampaikan terima kasih kepada semua pihak yang telah membantu

terselesaikannya tugas akhir mulai dari tahap awal hingga akhir.

Malang, 3 Mei 2016

Penulis

ix

DAFTAR ISI

Hal. HALAMAN JUDUL .................................................................................... i

LEMBAR PERSETUJUAN .......................................................................... ii

LEMBAR PENGESAHAN ........................................................................... iii

LEMBAR PERNYATAAN .......................................................................... iv

ABSTRAK ................................................................................................... v

ABSTRACT ................................................................................................. vi

LEMBAR PERSEMBAHAN ........................................................................ vii

KATA PENGANTAR .................................................................................. viii

DAFTAR ISI ................................................................................................ ix

DAFTAR GAMBAR .................................................................................... xii

DAFTAR TABEL ........................................................................................ xiv

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

1.1 Latar Belakang ........................................................................................ 1

1.2 Rumusan Masalah ................................................................................... 2

1.3 Tujuan..................................................................................................... 2

1.4 Batasan Masalah ..................................................................................... 2

1.5 Metodologi.............................................................................................. 3

BAB II : LANDASAN TEORI ................................................................... 4

2.1 Web Toko Online .................................................................................... 4

2.2 Hierarchical Model View Controller (HMVC) ........................................ 5

2.3 Framework .............................................................................................. 5

2.3.1 Codeigniter ............................................................................... 6

2.3.2 Gocart ....................................................................................... 8

2.33 Raja Ongkir ............................................................................... 8

x

2.4 Basis Data ............................................................................................... 9

2.4.1 Database Management System (DBMS) ................................... 10

2.5 Unified Modeling Language .................................................................... 10

2.5.1 Bagian – Bagian UML .............................................................. 10

2.5.2 Tujuan Penggunaan UML ......................................................... 14

BAB III : ANALISA DAN PERANCANGAN SISTEM ........................... 15

3.1 Analisa Sistem ........................................................................................ 15

3.1.1 Arsitektur Sistem ...................................................................... 15

3.2 Perancangan HMVC ............................................................................... 16

3.3 Perancangan UML .................................................................................. 17

3.3.1 Use Case Diagram Sistem ......................................................... 18

3.3.2 Activity Diagram Sistem ........................................................... 19

3.3.3 Sequence Diagram Sistem ........................................................ 21

3.3.4 Class Diagram Sistem ............................................................... 24

3.3.5 Desain Database ....................................................................... 25

3.3.6 Desain Interface ........................................................................ 28

BAB IV : IMPLEMENTASI DAN PENGUJIAN ...................................... 29

4.1 Implementasi Sistem ............................................................................... 29

4.1.1 Implementasi Pengembangan Perangkat Keras ......................... 29

4.1.2 Implementasi Lingkungan Pengembangan Perangkat Lunak ..... 30

4.2 Antar Muka Sistem ................................................................................. 30

4.2.1 Halaman Backend ..................................................................... 30

4.2.2 Halaman Frontend .................................................................... 35

4.3 Alur Proses Pemesanan ........................................................................... 41

4.4 Pengujian Sistem ..................................................................................... 42

4.4.1 Blackbox Testing ...................................................................... 42

xi

4.4.2 Pengujian Kuesioner ................................................................. 46

4.4.2 Pengujian Performa Test ........................................................... 48

BAB V : KESIMPULAN DAN SARAN ..................................................... 51

5.1 Kesimpulan ............................................................................................. 51

5.2 Saran ....................................................................................................... 52

DAFTAR PUSTAKA ................................................................................... 53

xii

DAFTAR GAMBAR

Hal.

Gambar 2.1 Konsep HMVC .......................................................................... 5

Gambar 3.1 Arsitektur Sistem ....................................................................... 15

Gambar 3.2 Struktur MVC Framework Codeigniter ...................................... 16

Gambar 3.3 Struktur HMVC ......................................................................... 17

Gambar 3.4 Use Case Diagram Backend Sistem ........................................... 18

Gambar 3.5 Use Case Diagram Frontend Sistem ........................................... 18

Gambar 3.6 Activity Diagram Backend Superadmin ..................................... 19

Gambar 3.7 Activity Diagram Backend Admin ............................................. 20

Gambar 3.8 Activity Diagram Frontend Login User ...................................... 20

Gambar 3.9 Activity Diagram Frontend Guest User ...................................... 21

Gambar 3.10 Sequence Diagram Backend Superadmin ................................. 22

Gambar 3.11 Sequence Diagram Backend Admin ......................................... 22

Gambar 3.12 Sequence Diagram Frontend Member ...................................... 23

Gambar 3.13 Sequence Diagram Frontend Guest User .................................. 23

Gambar 3.14 Class Diagram ......................................................................... 24

Gambar 3.15 Designer Relational Database .................................................. 28

Gambar 3.16 Tampilan Interface ................................................................... 28

Gambar 4.1 Tampilan Halaman Modul Katalog ............................................ 30

Gambar 4.2 Tampilan Halaman Modul Pesanan ............................................ 31

Gambar 4.3 Tampilan Halaman Modul Konfirmasi Pembayaran ................... 31

Gambar 4.4 Tampilan Halaman Modul Pelanggan ........................................ 32

Gambar 4.5 Tampilan Halaman Modul Pelanggan Group.............................. 32

Gambar 4.6 Tampilan Halaman Modul Kupon Diskon .................................. 33

Gambar 4.7 Tampilan Halaman Modul Laporan Penjualan ........................... 33

xiii

Gambar 4.8 Tampilan Halaman Modul Kurir dan Pembayaran...................... 33

Gambar 4.9 Integrasi API Ongkos Kirim ...................................................... 35

Gambar 4.10 Tampilan Halaman Home ........................................................ 36

Gambar 4.11 Tampilan Kupon Diskon .......................................................... 37

Gambar 4.12 Tampilan Member Diskon ....................................................... 37

Gambar 4.13 Tampilan Alamat Tagihan dan Pengiriman .............................. 38

Gambar 4.14 Tampilan Metode Pengiriman .................................................. 39

Gambar 4.15 Tampilan Metode Pembayaran ................................................. 39

Gambar 4.16 Tampilan Submit Pesanan ........................................................ 40

Gambar 4.17 Tampilan Submit Pesanan Ke Email ........................................ 40

Gambar 4.18 Tampilan Konfirmasi Pembayaran ........................................... 41

Gambar 4.19 Alur Proses Pemesanan ............................................................ 41

Gambar 4.20 Hasil Pengujian Performance Test............................................ 49

xiv

DAFTAR TABEL

Hal.

Tabel 3.1 Structure Tabel Katalog Produk ..................................................... 25

Tabel 3.2 Structure Tabel Kategori Produk ................................................... 25

Tabel 3.3 Structure Tabel Pelanggan ............................................................. 26

Tabel 3.4 Structure Tabel Pesanan ................................................................ 26

Tabel 3.5 Structure Tabel Kupon Diskon ...................................................... 27

Tabel 3.6 Structure Tabel Konfirmasi Pembayaran ....................................... 27

Tabel 4.1 Pengujian Halaman Backend ......................................................... 43

Tabel 4.2 Pengujian Halaman Frontend ......................................................... 44

Tabel 4.3 Pertanyaan Kuesioner .................................................................... 46

Tabel 4.4 Jawaban Kuesioner ........................................................................ 47

Tabel 4.5 Pemberian Nilai Pada Jawaban ...................................................... 47

53

DAFTAR PUSTAKA

Connolly, Thomas M. and Carolyn E. Begg. 2005. Database System : A

Practical Approach to Design, Implementation, and Management

Fourth Edition. USA: Addison Wesley, Longman Inc.

Edhy Sutanta. (2004) . Sistem Basis Data. Yogyakarta: Graha Ilmu

Kadir, Abdul. 2003. Pengenalan Sistem Informasi. Yogyakarta: Penerbit

Andi.

McLeod, Raymond dan Schell, George. 2004. Sistem Informasi

Manajemen. Diterjemahkan oleh Hendra Teguh. Edisi Delapan.

Jakarta: PT Indeks.

Saputra, Agus. 2011. Trik dan Solusi Pemrograman PHP, Jakarta : PT.

Elex Media Komputindo.

EllisLab, Inc. (2012). CodeIgniter - Open source PHP web application

framework, consulted January 2012.

http://www.php.net/ diakses tanggal 18 – 12 – 2015, jam 14.14

http://www.codeigniter.com/ diakses tanggal 18 – 12 – 2015, jam 14.13

BIOGRAFI PENULIS

Jiwanto Ardi adalah seorang mahasiswa

Teknik Informatika Universitas Muhammadiyah

Malang. Lahir di Kota Malang pada tanggal 1

November 1990. Pernah menempuh jenjang

Sekolah di SDK 1 Mardiwiyata Malang sampai

tahun 2003. Kemudian melanjutkan jenjang

pendidikan di SMPN 8 Malang hingga tahun 2006.

Selanjutnya Melanjutkan Pendidikan di SMAN 2

Malang sampai tahun 2009. Dan kemudian

menempuh jenjang perguruan tinggi di Universitas

Muhammadiyah Malang hingga tahun 2016. “Selagi orang tidur saya bangun,

Selagi orang bangun saya jalan, Selagi orang jalan saya lari”

.