PEMBUATAN TOKO ONLINE MENGGUNAKAN FRAMEWORK CODEIGNITER DI TOKO LARAS MULYO JILBAB

Transkripsi

1 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.M PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2013 i

2 ii

3 iii

4 ABSTRACT Laras Setyowati, 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. iv

5 ABSTRAK Laras Setyowati, 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. v

6 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) vi

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

8 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 commit berharap to user ini dapat memberikan manfaat dan viii

9 memberikan wawasan tambahan bagi para pembaca dan khususnya bagi penulis sendiri. Surakarta, 30 Juli 2013 Laras Setyowati ix

10 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.. BAB IPENDAHULUAN Latar Belakang Perumusan Masalah Batasan Masalah Penelitian Tujuan Penelitian Manfaat Penelitian Sistematika Penulisan...4 BAB II LANDASAN TEORI Rekayasa Perangkat Lunak UML Static View DynamicView Functional View Use Case Diagram ActivityDiagram Class Diagram Sequence Diagram Toko Online Codeigniter Adobe Dreamweaver 8 15 xv x

11 BAB III ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM Kebutuhan Alat dan Bahan Kebutuhan Hardware Kebutuhan Software Kebutuhan Sistem Kebutuhan Fungsional Kebutuhan Non Fungsional Jalannya Penelitian Perancangan Sistem Pemodelan Use Case Deskripsi Aktor Hak dan Kewajiban Aktor Deskripsi Use Case Diagram Use Case Diagram Activity Diagram Activity Manajemen Kategori Diagram Activity Manajemen Produk Diagram Activity Login Admin dan Pelanggan Diagram Activity Pembelian Barang Diagram Activity Registrasi Akun Diagram Activity Manajemen Pesanan Diagram Activity Manajemen Pelanggan Class Diagram Diagram Sequence Perancangan Database ERD Skema Diagram Struktur Tabel Data Perancangan Interface. 61 BAB IV IMPLEMENTASI DAN ANALISA Implementasi Database Implementasi Tampilan Tampilan Halaman Admin Tampilan Halaman Publik Pengujian Sistem dan Analisa 77 BAB V PENUTUP Kesimpulan Saran 84 DAFTAR PUSTAKA 85 xi

12 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 commit melihat to produk(pelanggan). user 46 xii

13 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 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 Gambar 4.25 Uji Login Pelanggan Gambar 4.26 Uji Login Pelanggan commit 3.. to user 78 xiii

14 Gambar 4.27 Uji Login Pelanggan 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 xiv

15 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 xv

16 xvi

17 17