PEMBUATAN TOKO ONLINE MENGGUNAKAN FRAMEWORK CODEIGNITER DI TOKO LARAS MULYO JILBAB.

perpustakaan.uns.ac.id

digilib.uns.ac.id

PEMBUATAN TOKO ONLINE MENGGUNAKAN
FRAMEWORK CODEIGNITER DI TOKO LARAS MULYO
JILBAB

TUGAS AKHIR
Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya
Program Diploma III Teknik Informatika

Disusun Oleh :
LARAS SETYOWATI
NIM.M3110086

PROGRAM DIPLOMA III TEKNIK INFORMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUN
ALAM
UNIVERSITAS SEBELAS MARET
SURAKARTA

2013
commit to user

i

perpustakaan.uns.ac.id

digilib.uns.ac.id

commit to user

ii

perpustakaan.uns.ac.id

digilib.uns.ac.id

commit to user

iii

perpustakaan.uns.ac.id

digilib.uns.ac.id

ABSTRACT
Laras Setyowati, 2013. THE MAKING OF SHOPPING ONLINE
USING CODEIGNITER FRAMEWORK “TOKO LARAS MULYO JILBAB”.
Diploma of Informatic Enginering, Faculty of Mathematics and Natural
Sciences, University of Sebelas Maret Surakarta.
Internet is one of the facilities that are very practical and economical
way to deliver information all around the world. The online store is one of the
activities of buying and selling electronically through the Internet. The purpose of
this final project is to create an online store application for “Laras Mulyo Jilbab”
clothing stores. “Laras Mulyo Jilbab” online store is a website that provides the
facility to sell specialty shop products of “Laras Mulyo Jilbab” and simplify and
introduce products with a media campaign using web.
The method that is used in the preparation of this final project are
observation and study literature. This program was developed using CodeIgniter
Framework and MySQL database. Macromedia Dreamweaver is used as and

HTML editor, and Adobe Photoshop for website design. This application has two
main functions. First, admin can manage prodct data, category data, user data,
manage orders, and pbtain customer purchase histori reports. is for general
users, any website visitor can see the product, but can not order the products,
second, is that customers can order the products, Finally, was the admin who can
do the management of product data, categorical data, user data, manage orders
and obtain customer purchase history reports. Second, costumer can order the
product exceptbfor the general using only see the product on the website.
With the online store application is expected to provide facilities that
relative more convenient for customers.
Keywords : Application online store , Laras Mulyo Jilbab, codeigniter
framework, MySQL.

commit to user

iv

perpustakaan.uns.ac.id

digilib.uns.ac.id

ABSTRAK
Laras Setyowati, 2013. PEMBUATAN TOKO ONLINE
MENGGUNAKAN FRAMEWORK CODEIGNITER DI TOKO LARAS
MULYO JILBAB. Diploma III Teknik Informatika Fakultas Matematika
dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta.
Internet merupakan salah satu fasilitas yang sangat praktis dan ekonomis
untuk menyampaikan informasi di hampir seluruh penjuru dunia. Toko online
adalah salah satu aktivitas membeli dan menjual secara elektronik melalui
jaringan internet. Tujuan dari Tugas Akhir ini adalah untuk membuat sebuah
aplikasi toko online mengenai toko baju Laras Mulyo Jilbab. Toko online Laras
Mulyo Jilbab merupakan suatu web yang menyediakan fasilitas untuk menjual
produk khusus toko Laras Mulyo serta menyederhanakan dan memperkenalkan
produk dengan suatu media promosi yang mengunakan web.
Metode yang digunakan dalam penyusunan Tugas Akhir ini adalah
observasi dan studi pustaka. Program ini dikembangkan menggunakan
Framework CodeIgniter dan database MySQL. Macromedia Dreamweaver
sebagai editor HTML dan Adobe Photoshop untuk desain website. Aplikasi ini
memiliki dua fungsi utama. Pertama admin yang dapat melakukan pengelolaan
data produk, data kategori, data user, mengelola pesanan dan memperoleh laporan

riwayat belanja pelanggan. Kedua, pelanggan bisa melakukan pemesanan produk,
kecuali bagi pengguna umum hanya dapat melihat produk saja.
Dengan aplikasi toko online ini diharapkan dapat memberikan fasilitas
yang lebih nyaman bagi pelanggan. Bukan itu saja, juga mempermudah pemilik
toko dalam pemasaran dan pengelolaan data-data penjualan produknya.

Kata Kunci : Aplikasi toko online , Laras Mulyo Jilbab, framework codeigniter,
MySQL.

commit to user

v

perpustakaan.uns.ac.id

digilib.uns.ac.id

MOTTO
Tidak ada kenikmatan lebih tinggi dari kenikmatan melampaui kesulitan,
dari satu sukses ke sukses lainnya, membangun keinginan-keinginan baru

dan melihatnya terwujud
(Samuel Johnson)

commit to user

vi

perpustakaan.uns.ac.id

digilib.uns.ac.id

PERSEMBAHAN

Tugas Akhir ini Penulis Persembahkan Kepada :
 Allah SWT
 Bapak dan ibu yang selalu mendukung, memberikan semangat dan
doa selama ini sehingga tugas akhir ini dapat terselesaikan.
 Suamiku, yang selalu mendukung dan mendoakanku.
 Kakak-kakakku, mbak Ani dan mbak Tari & Adik-adikku, Jimmy
dan Astri yang menjadi semangatku untuk selalu jadi contoh kakak

yang baik.
 Am Syonk, Faridut, Fika, Ika, Gina, Sofyan dan teman-teman D3
Teknik informatika 2010.

commit to user

vii

perpustakaan.uns.ac.id

digilib.uns.ac.id

KATA PENGANTAR
Puji syukur ke hadirat Tuhan YME yang telah melimpahkan rahmat dan
barokahnya sehingga penulis dapat menyelesaikan Tugas Akhir dengan judul “
Pembuatan Toko Online Menggunakan Framework Di Toko Laras Mulyo Jilbab ”.
Laporan Tugas Akhir ini disusun untuk memenuhi salah satu syarat dalam
memperoleh gelar Amd.) pada Program Studi Diploma III Teknik Informatika
Universitas Sebelas Maret.
Dalam melakukan penelitian dan penyusunan laporan Tugas Akhir ini

penulis telah mendapatkan banyak dukungan dan bantuan dari berbagai pihak.
Penulis mengucapkan terima kasih yang tak terhingga kepada:
1. Ir. Ari Handono Ramelan, M.Sc, Ph.D selaku Pimpinan Fakultas MIPA
Universitas Sebelas Maret yang memberikan izin kepada penulis untuk
belajar.
2. Bapak Drs. Y.S Palgunadi, M.Sc. selaku Ketua Program Studi Diploma III
Teknik Informatika Universitas Sebelas Maret yang memberikan izin
kepada penulis untuk belajar.
3. Ibu Tutut Maitanti, S.Si, M.Kom. selaku dosen pembimbing yang telah
dengan penuh kesabaran dan ketulusan memberikan ilmu dan bimbingan
terbaik kepada penulis.
4. Para Dosen Program Studi Diploma III Teknik Informatika Universitas
Sebelas Maret yang telah memberikan bekal ilmu kepada penulis.
5. Para Karyawan/wati Program Studi Diploma III Teknik Informatika
Universitas Sebelas Maret yang telah membantu penulis dalam proses
belajar.
6. Ayah dan Ibu tercinta, rekan-rekan kuliah yang telah banyak memberikan
dukungan dan doanya.
Penulis menyadari sepenuhnya bahwa laporan Tugas Akhir ini masih jauh
commit

to user
dari sempurna. Akan tetapi penulis
berharap
ini dapat memberikan manfaat dan

viii

perpustakaan.uns.ac.id

digilib.uns.ac.id

memberikan wawasan tambahan bagi para pembaca dan khususnya bagi penulis
sendiri.

Surakarta, 30 Juli 2013
Laras Setyowati

commit to user

ix

perpustakaan.uns.ac.id

digilib.uns.ac.id

DAFTAR ISI

HALAMAN PENGESAHAN……………………………………………………. ii
HALAMAN PENGESAHAN…………………………………………………….iii
ABSTRACT………………………………………………………………………...iv
ABSTRAK………………………………………………………………………... v
MOTTO…………………………………………………………………………...vi
PERSEMBAHAN……………………………………………………………….. vii
KATA PENGANTAR………………………………………………………… vii-ix
DAFTAR ISI……………………………………………………………………… x
DAFTAR GAMBAR……………………………………………………………..xii
DAFTAR TABEL……………………………………………………………..

xv

BAB IPENDAHULUAN…………………………………………………………. 1
1.1 Latar Belakang……………………………………………………........... 1
1.2 Perumusan Masalah……………………………………………………... 2
1.3 Batasan Masalah Penelitian……………………………………………... 3
1.4 Tujuan Penelitian………………………………………………………... 3
1.5 Manfaat Penelitian………………………………………………………. 3
1.6 Sistematika Penulisan..........................................................................................4
BAB II LANDASAN TEORI…………………………………………………….. 5
2.1 Rekayasa Perangkat Lunak……………………………………………… 5
2.2 UML……………………………………………………………………... 6
2.2.1 Static View…………………………………………………………. 6
2.2.2 DynamicView……………………………………………………… 6
2.2.3 Functional View……………………………………………………. 7
2.2.3.1 Use Case Diagram………………………………………… 7
2.2.3.2 ActivityDiagram……………………………………………. 7
2.2.3.3 Class Diagram……………………………………………… 9
2.2.3.5 Sequence Diagram………………………………………... 10
2.3 Toko Online……………………………………………………………. 11
2.4 Codeigniter…………………………………………………………….. 12
2.5 Adobe Dreamweaver 8………………………………………………… 15

commit to user

x

perpustakaan.uns.ac.id

digilib.uns.ac.id

BAB III ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM……….. 16
3.1 Kebutuhan Alat dan Bahan…………………………………………….. 16
3.1.1 Kebutuhan Hardware……………………………………………... 16
3.1.2 Kebutuhan Software……………………………………………… 16
3.2 Kebutuhan Sistem……………………………………………………… 17
3.2.1 Kebutuhan Fungsional…………………………………………… 17
3.2.2 Kebutuhan Non Fungsional……………………………………… 19
3.3 Jalannya Penelitian……………………………………………………...20
3.4 Perancangan Sistem…………………………………………………… 23
3.4.1 Pemodelan Use Case……………………………………………... 23
3.4.1.1 Deskripsi Aktor………………………………………………. 23
3.4.1.2 Hak dan Kewajiban Aktor……………………………………. 23
3.4.1.3 Deskripsi Use Case…………………………………………… 24
3.4.1.4 Diagram Use Case……………………………………………. 25

3.5

3.6

3.4.2 Diagram Activity………………………………………………………... 28
3.4.2.1 Diagram Activity Manajemen Kategori…………………………….. 28
3.4.2.2 Diagram Activity Manajemen Produk………………………………. 30
3.4.2.3 Diagram Activity Login Admin dan Pelanggan…………………….. 31
3.4.2.4 Diagram Activity Pembelian Barang………………………………...32
3.4.2.5 Diagram Activity Registrasi Akun………………………………….. 33
3.4.2.6 Diagram Activity Manajemen Pesanan………………………………33
3.4.2.7 Diagram Activity Manajemen Pelanggan…………………………… 34
3.4.3 Class Diagram…………………………………………………………... 35
3.4.4 Diagram Sequence……………………………………………………… 37
Perancangan Database………………………………………………………… 51
3.5.1 ERD……………………………………………………………………... 51
3.5.2 Skema Diagram………………………………………………………… 52
3.5.3 Struktur Tabel Data………………………………………………………53
Perancangan Interface…………………………………………………………. 61

BAB IV IMPLEMENTASI DAN ANALISA…………………………………… 66
4.1

Implementasi Database………………………………………………… 66

4.2

Implementasi Tampilan……………………………………………………….. 69
4.2.1 Tampilan Halaman Admin……………………………………………… 69
4.2.2 Tampilan Halaman Publik………………………………………………. 73

4.3

Pengujian Sistem dan Analisa………………………………………………… 77

BAB V PENUTUP……………………………………………………………… 84
5.1 Kesimpulan…………………………………………………………….. 84
5.2 Saran…………………………………………………………………… 84
DAFTAR PUSTAKA…………………………………………………………… 85
commit to user

xi

perpustakaan.uns.ac.id

digilib.uns.ac.id

DAFTAR GAMBAR

Gambar 2.1 Logo Codeigniter…………………………………………………….
Gambar 2.2 Proses aliran data sistem……………………………………………
Gambar 2.3 Alur program aplikasi berbasis framework Codeigniter……….
Gambar 3.1 blok diagram jalannya penelitian………………………………….
Gambar 3.2 Diagram Use Case Manajemen Kategori………………………….
Gambar 3.3 Diagram Use Case Manajemen Data Produk………………………
Gambar 3.4 Diagram Use Case Manajemen Data Pelanggan…………………..
Gambar 3.5 Diagram Use Case Manajemen Data pesanan…………………….
Gambar 3.6 diagram use case transaksi dan registrasi………………………….
Gambar 3.7 Diagram Activity tambah kategori………………………………….
Gambar 3.8 Diagram Activity mengubah data kategori………………………..
Gambar 3.9 Diagram Activity mengubah status kategori………………………
Gambar 3.10 Diagram Activity tambah data produk…………………………..
Gambar 3.11 Diagram Activity mengubah data produk……………………….
Gambar 3.12 Diagram Activity mengubah status produk………………………
Gambar 3.13 Diagram Activity Login Admin dan Pelanggan…………………..
Gambar 3.14 Diagram Activity pesanan…………………………………………
Gambar 3.15 Diagram Activity registrasi akun………………………………….
Gambar 3.16 Diagram Activity Manajemen Pemesanan…………………………
Gambar 3.17 Diagram Activity Manajemen Pelanggan…………………………
Gambar 3.18 Class Diagram Admin………………………………………………
Gambar 3.19 Class Diagram Pelanggan………………………………………….
Gambar 3.20 Sequence Diagram login (admin)………………………………….
Gambar 3.21 Sequence Diagram melihat data kategori (admin)………………
Gambar 3.22 Sequence Diagram menambah data kategori (admin)………….
Gambar 3.23 Sequence Diagram mengubah data kategori (admin)…………..
Gambar 3.24 Sequence Diagram mengubah status kategori (admin)………….
Gambar 3.25 Sequence Diagram menghapus data kategori (admin)………….
Gambar 3.26 Sequence Diagram melihat data produk (admin)……………….
Gambar 3.27 Sequence Diagram menambah data produk (admin)……………
Gambar 3.28 Sequence Diagram mengubah data produk (admin)…………….
Gambar 3.29 Sequence Diagram mengubah status data produk (admin)……..
Gambar 3.30 Sequence Diagram menghapus data produk(admin)…………….
Gambar 3.31 Sequence Diagram melihat data pelanggan (admin)…………….
Gambar 3.32 Sequence Diagram mengubah status data pelanggan (admin)…..
Gambar 3.33 Sequence Diagram menghapus data pelanggan (admin)………..
Gambar 3.34 Sequence Diagram melihat data pesanan (admin)………………
Gambar 3.35 Sequence Diagram mengubah status data pesanan (admin)…….
Gambar 3.36 Sequence Diagram Login Pelanggan……………………………..
user
Gambar 3.37 Sequence Diagram commit
melihat to
produk(pelanggan)………………….

xii

12
13
14
20
25
26
26
27
27
28
29
29
30
30
31
31
32
33
33
34
35
36
37
38
38
39
39
40
40
41
41
42
42
43
43
44
44
45
46
46

perpustakaan.uns.ac.id

digilib.uns.ac.id

Gambar 3.38 Sequence Diagram melihat detail produk(pelanggan)…………..
Gambar 3.39 Sequence Diagram memilih produk(pelanggan)…………………
Gambar 3.40 Sequence Diagram checkout(pelanggan)…………………………
Gambar 3.41 Sequence Diagram melihat status pesanan(pelanggan)………….
Gambar 3.42 Sequence Diagram melihat produk(pengunjung)………………..
Gambar 3.43 Sequence Diagram melihat detail produk(pengunjung)…………
Gambar 3.44 Sequence Diagram memilih produk(pengunjung)……………….
Gambar 3.45 Sequence Diagram registrasi akun(pengunjung)…………………
Gambar 3.46 ERD………………………………………………………………..
Gambar 3.47 Skema Diagram……………………………………………………
Gambar 3.48 desain halaman utama pengunjung……………………………..
Gambar 3.49 desain halaman login pengunjung………………………………..
Gambar 3.50 desain halaman registrasi pengunjung…………………………….
Gambar 3.51 desain home pengunjung ketika sudah login…………………….
Gambar 3.52 desain halaman profil pengunjung………………………………..
Gambar 3.53 desain halaman record pengunjung………………………………
Gambar 3.54 desain halaman edit akun pengunjung……………………………
Gambar 3.55 desain halaman produk pengunjung……………………………..
Gambar 3.56 desain halaman login admin……………………………………..
Gambar 3.57 desain halaman utama admin……………………………………
Gambar 4.1 implementasi database…………………………………………….
Gambar 4.2 implementasi tabel foto produk……………………………………
Gambar 4.3 implementasi tabel kategori…………………………………..........
Gambar 4.4 implementasi tabel option………………………………………….
Gambar 4.5 implementasi tabel order……………………………………………
Gambar 4.6 implementasi tabel order data………………………………………..
Gambar 4.7 implementasi tabel produk………………………………………….
Gambar 4.8 implementasi tabel user…………………………………………….
Gambar 4.9 implementasi tabel user data……………………………………….
Gambar 4.10 implementasi relasi antar tabel……………………………………
Gambar 4.11 Login Admin……………………………………………………….
Gambar 4.12 Halaman Admin…………………………………………………..
Gambar 4.13 Menu Kategori…………………………………………………….
Gambar 4.14 Menu Produk……………………………………………………….
Gambar 4.15 Menu Pelanggan………………………………………………….
Gambar 4.16 Menu Riwayat Belanja……………………………………………
Gambar 4.17 Laporan Pertanggal………………………………………………..
Gambar 4.18 Menu Home………………………………………………………..
Gambar 4.19 Menu Login………………………………………………………..
Gambar 4.20 Menu Profil………………………………………………………..
Gambar 4.21 Menu Record………………………………………………………
Gambar 4.22 Menu Edit Akun……………………………………………………
Gambar 4.23 Menu Kategori dan Produk………………………………………
Gambar 4.24 Uji Login Pelanggan 1…………………………………………….
Gambar 4.25 Uji Login Pelanggan 2……………………………………………..
commit
to user
Gambar 4.26 Uji Login Pelanggan
3……………………………………………..

xiii

47
47
48
48
49
49
50
50
51
52
61
61
62
62
63
63
64
64
65
65
66
66
66
67
67
67
67
68
68
68
69
69
70
70
71
71
72
73
74
74
75
75
76
77
78
78

perpustakaan.uns.ac.id

Gambar 4.27
Gambar 4.28
Gambar 4.29
Gambar 4.30
Gambar 4.31
Gambar 4.32
Gambar 4.33
Gambar 4.34
Gambar 4.35
Gambar 4.36
Gambar 4.37

digilib.uns.ac.id

Uji Login Pelanggan 4……………………………........................... 79
Uji Input Profil……………………………………………………… 79
Uji Edit Akun……………………………………………………… 80
Produk…………………………………………………………….. 80
Detail Barang……………………………………………………… 81
Data Pembelian……………………………………………………. 81
Form Alamat Pengiriman…………………………………………. 82
Cara Pembayaran………………………………………………… 82
Uji Registrasi Pengunjung…………………………………………. 83
Sukses Registrasi………………………………………………….. 83
Uji Hapus Data Admin……………………………………………. 83

commit to user

xiv

perpustakaan.uns.ac.id

digilib.uns.ac.id

DAFTAR TABEL
Tabel 2.1 Simbol Use Case Diagram…………………………………………….. 7
Tabel 2.2 Simbol Activity Diagram………………………………………………. 8
Tabel 2.3 Simbol Class Diagram…………………………………………………. 9
Tabel 2.4 Simbol Sequence Diagram…………………………………………….. 10
Tabel 3.1 Tabel Kebutuhan Fungsional…………………………………………. 18
Tabel 3.2 Tabel Kebutuhan Non Fungsional……………………………………… 19
Tabel 3.3 Tabel Deskripsi Aktor………………………………………………….. 23
Tabel 3.4 Tabel Hak dan Kewajiban Aktor……………………………………… 23
Tabel 3.5 Tabel Deskripsi Use Case……………………………………………… 24
Tabel 3.6 tabel user……………………………………………………………….. 53
Tabel 3.7 tabel option…………………………………………………………….. 54
Tabel 3.8 tabel user data………………………………………………………… 55
Tabel 3.9 tabel order data……………………………………………………….. 56
Tabel 3.10 tabel produk…………………………………………………………. 57
Tabel 3.11 tabel order……………………………………………………………. 58
Tabel 3.12 tabel kategori…………………………………………………………. 59
Tabel 3.13 tabel foto produk……………………………………………………… 60

commit to user

xv

perpustakaan.uns.ac.id

digilib.uns.ac.id

commit to user

xvi

perpustakaan.uns.ac.id

digilib.uns.ac.id

commit to user

17