PEMBUATAN TOKO ONLINE MENGGUNAKAN FRAMEWORK …eprints.uns.ac.id/11499/1/337042512201311412.pdf ·...

17
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i 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

Transcript of PEMBUATAN TOKO ONLINE MENGGUNAKAN FRAMEWORK …eprints.uns.ac.id/11499/1/337042512201311412.pdf ·...

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

i

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

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

commit to user

iv

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.

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

v

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.

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vi

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)

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vii

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.

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

viii

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

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

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ix

memberikan wawasan tambahan bagi para pembaca dan khususnya bagi penulis

sendiri.

Surakarta, 30 Juli 2013

Laras Setyowati

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

x

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

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xi

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

3.5 Perancangan Database………………………………………………………… 51

3.5.1 ERD……………………………………………………………………... 51

3.5.2 Skema Diagram………………………………………………………… 52

3.5.3 Struktur Tabel Data……………………………………………………… 53

3.6 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

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xii

DAFTAR GAMBAR

Gambar 2.1 Logo Codeigniter……………………………………………………. 12

Gambar 2.2 Proses aliran data sistem…………………………………………… 13

Gambar 2.3 Alur program aplikasi berbasis framework Codeigniter………. 14

Gambar 3.1 blok diagram jalannya penelitian…………………………………. 20

Gambar 3.2 Diagram Use Case Manajemen Kategori…………………………. 25

Gambar 3.3 Diagram Use Case Manajemen Data Produk……………………… 26

Gambar 3.4 Diagram Use Case Manajemen Data Pelanggan………………….. 26

Gambar 3.5 Diagram Use Case Manajemen Data pesanan……………………. 27

Gambar 3.6 diagram use case transaksi dan registrasi…………………………. 27

Gambar 3.7 Diagram Activity tambah kategori…………………………………. 28

Gambar 3.8 Diagram Activity mengubah data kategori……………………….. 29

Gambar 3.9 Diagram Activity mengubah status kategori……………………… 29

Gambar 3.10 Diagram Activity tambah data produk………………………….. 30

Gambar 3.11 Diagram Activity mengubah data produk………………………. 30

Gambar 3.12 Diagram Activity mengubah status produk……………………… 31

Gambar 3.13 Diagram Activity Login Admin dan Pelanggan………………….. 31

Gambar 3.14 Diagram Activity pesanan………………………………………… 32

Gambar 3.15 Diagram Activity registrasi akun…………………………………. 33

Gambar 3.16 Diagram Activity Manajemen Pemesanan………………………… 33

Gambar 3.17 Diagram Activity Manajemen Pelanggan………………………… 34

Gambar 3.18 Class Diagram Admin……………………………………………… 35

Gambar 3.19 Class Diagram Pelanggan…………………………………………. 36

Gambar 3.20 Sequence Diagram login (admin)…………………………………. 37

Gambar 3.21 Sequence Diagram melihat data kategori (admin)……………… 38

Gambar 3.22 Sequence Diagram menambah data kategori (admin)…………. 38

Gambar 3.23 Sequence Diagram mengubah data kategori (admin)………….. 39

Gambar 3.24 Sequence Diagram mengubah status kategori (admin)…………. 39

Gambar 3.25 Sequence Diagram menghapus data kategori (admin)…………. 40

Gambar 3.26 Sequence Diagram melihat data produk (admin)………………. 40

Gambar 3.27 Sequence Diagram menambah data produk (admin)…………… 41

Gambar 3.28 Sequence Diagram mengubah data produk (admin)……………. 41

Gambar 3.29 Sequence Diagram mengubah status data produk (admin)…….. 42

Gambar 3.30 Sequence Diagram menghapus data produk(admin)……………. 42

Gambar 3.31 Sequence Diagram melihat data pelanggan (admin)……………. 43

Gambar 3.32 Sequence Diagram mengubah status data pelanggan (admin)….. 43

Gambar 3.33 Sequence Diagram menghapus data pelanggan (admin)……….. 44

Gambar 3.34 Sequence Diagram melihat data pesanan (admin)……………… 44

Gambar 3.35 Sequence Diagram mengubah status data pesanan (admin)……. 45

Gambar 3.36 Sequence Diagram Login Pelanggan…………………………….. 46

Gambar 3.37 Sequence Diagram melihat produk(pelanggan)…………………. 46

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiii

Gambar 3.38 Sequence Diagram melihat detail produk(pelanggan)………….. 47

Gambar 3.39 Sequence Diagram memilih produk(pelanggan)………………… 47

Gambar 3.40 Sequence Diagram checkout(pelanggan)………………………… 48

Gambar 3.41 Sequence Diagram melihat status pesanan(pelanggan)…………. 48

Gambar 3.42 Sequence Diagram melihat produk(pengunjung)……………….. 49

Gambar 3.43 Sequence Diagram melihat detail produk(pengunjung)………… 49

Gambar 3.44 Sequence Diagram memilih produk(pengunjung)………………. 50

Gambar 3.45 Sequence Diagram registrasi akun(pengunjung)………………… 50

Gambar 3.46 ERD……………………………………………………………….. 51

Gambar 3.47 Skema Diagram…………………………………………………… 52

Gambar 3.48 desain halaman utama pengunjung…………………………….. 61

Gambar 3.49 desain halaman login pengunjung……………………………….. 61

Gambar 3.50 desain halaman registrasi pengunjung……………………………. 62

Gambar 3.51 desain home pengunjung ketika sudah login……………………. 62

Gambar 3.52 desain halaman profil pengunjung……………………………….. 63

Gambar 3.53 desain halaman record pengunjung……………………………… 63

Gambar 3.54 desain halaman edit akun pengunjung…………………………… 64

Gambar 3.55 desain halaman produk pengunjung…………………………….. 64

Gambar 3.56 desain halaman login admin…………………………………….. 65

Gambar 3.57 desain halaman utama admin…………………………………… 65

Gambar 4.1 implementasi database……………………………………………. 66

Gambar 4.2 implementasi tabel foto produk…………………………………… 66

Gambar 4.3 implementasi tabel kategori………………………………….......... 66

Gambar 4.4 implementasi tabel option…………………………………………. 67

Gambar 4.5 implementasi tabel order…………………………………………… 67

Gambar 4.6 implementasi tabel order data……………………………………….. 67

Gambar 4.7 implementasi tabel produk…………………………………………. 67

Gambar 4.8 implementasi tabel user……………………………………………. 68

Gambar 4.9 implementasi tabel user data………………………………………. 68

Gambar 4.10 implementasi relasi antar tabel…………………………………… 68

Gambar 4.11 Login Admin………………………………………………………. 69

Gambar 4.12 Halaman Admin………………………………………………….. 69

Gambar 4.13 Menu Kategori……………………………………………………. 70

Gambar 4.14 Menu Produk………………………………………………………. 70

Gambar 4.15 Menu Pelanggan…………………………………………………. 71

Gambar 4.16 Menu Riwayat Belanja…………………………………………… 71

Gambar 4.17 Laporan Pertanggal……………………………………………….. 72

Gambar 4.18 Menu Home……………………………………………………….. 73

Gambar 4.19 Menu Login……………………………………………………….. 74

Gambar 4.20 Menu Profil……………………………………………………….. 74

Gambar 4.21 Menu Record……………………………………………………… 75

Gambar 4.22 Menu Edit Akun…………………………………………………… 75

Gambar 4.23 Menu Kategori dan Produk……………………………………… 76

Gambar 4.24 Uji Login Pelanggan 1……………………………………………. 77

Gambar 4.25 Uji Login Pelanggan 2…………………………………………….. 78

Gambar 4.26 Uji Login Pelanggan 3…………………………………………….. 78

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiv

Gambar 4.27 Uji Login Pelanggan 4……………………………........................... 79

Gambar 4.28 Uji Input Profil……………………………………………………… 79

Gambar 4.29 Uji Edit Akun……………………………………………………… 80

Gambar 4.30 Produk…………………………………………………………….. 80

Gambar 4.31 Detail Barang……………………………………………………… 81

Gambar 4.32 Data Pembelian……………………………………………………. 81

Gambar 4.33 Form Alamat Pengiriman…………………………………………. 82

Gambar 4.34 Cara Pembayaran………………………………………………… 82

Gambar 4.35 Uji Registrasi Pengunjung…………………………………………. 83

Gambar 4.36 Sukses Registrasi………………………………………………….. 83

Gambar 4.37 Uji Hapus Data Admin……………………………………………. 83

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xv

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

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xvi

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

17