DAFTAR ISI HALAMAN JUDUL...i LAPORAN TUGAS AKHIR... ii HALAMAN PENGESAHAN... iii PERNYATAAN...iv PRAKATA... v DAFTAR ISI...vi DAFTAR GAMBAR...ix DAFTAR TABEL... xii INTISARI... xiii ABSTRACT... xiv BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah Penelitian... 2 1.3 Batasan Masalah penelitian... 2 1.4 Tujuan Penelitian... 3 1.5 Manfaat Penelitian... 3 1.6 Metodologi Penelitian... 3 1.7 Sistematika Penelitian... 4 BAB II TINJAUAN PUSTAKA... 10 BAB III LANDASAN TEORI... 10 3.1 Sistem Informasi... 10 3.1.1 Sistem... 11 3.1.2 Informasi... 12 3.2 Kerajinan Tangan... 12 3.3 Online... 13 3.4 Basis Data... 13 3.5 Relasi... 14 3.6 UML... 15 3.6.1 Diagram Use Case... 16 3.6.2 Diagram Aktifitas... 17 3.7 Framework... 18 3.8 Konsep MVC... 19 3.9 MySQL... 19 vi
3.10 CodeIgniter... 20 3.11 XAMPP... 21 3.12 HTML... 21 3.13 PHP... 22 3.14 SUBLIME TEXT... 23 3.15 CSS... 23 3.16 Flowchart... 24 3.17 ERD... 25 BAB IV ANALISIS DAN PERANCANGAN SISTEM... 28 4.1 Analisis Sistem... 28 4.1.1 Analisis Kebutuhan Sistem... 28 4.2 Perancangan Sistem... 29 4.2.1 Perancangan Proses... 29 4.2.2 Perancangan Basis Data... 47 4.2.3 Perancangan Antarmuka... 52 BAB V IMPLEMENTASI SISTEM... 63 5.1 Spesifikasi Sistem... 63 5.2 Implementasi Basis Data... 63 5.2.1 Tabel User... 64 5.2.2 Tabel Kategori... 65 5.2.3 Tabel Produk... 65 5.2.4 Tabel Order... 66 5.2.5 Tabel Order Details... 67 5.2.6 Tabel Media... 67 5.2.7 Tabel Pages... 68 5.2.8 Tabel Settings... 68 5.2.9 Tabel Slides... 69 5.3 Implementasi Program... 69 5.3.1 Halaman Pengguna... 69 5.3.2 Halaman Admin... 81 BAB VI PENGUJIAN DAN PEMBAHASAN... 105 6.1 Pembahasan Umum... 105 6.2 Pembahasan Sistem... 105 BAB VII PENUTUP... 117 7.1 Kesimpulan... 117 vii
7.2 Saran... 117 DAFTAR PUSTAKA... 118 viii
DAFTAR GAMBAR Gambar 3.1 Simbol Diagram Use Case... 17 Gambar 3.2 Simbol Diagram Aktifitas... 18 Gambar 3.3 Contoh dokumen HTML... 22 Gambar 3.4 Contoh dokumen PHP... 23 Gambar 3.5 Contoh dokumen CSS... 24 Gambar 3.6 Elemen Diagram Hubungan Entitas... 25 Gambar 4.1 Diagram use case... 30 Gambar 4.2 Diagram aktifitas login... 31 Gambar 4.3 Diagram aktifitas daftar... 32 Gambar 4.4 Diagram aktifitas ubah password... 33 Gambar 4.5 Diagram aktifitas ubah kategori... 34 Gambar 4.6 Diagram aktifitas tambah kategori... 35 Gambar 4.7 Diagram aktifitas ubah produk... 36 Gambar 4.8 Diagram aktifitas tambah produk... 37 Gambar 4.9 Diagram aktifitas cari produk... 38 Gambar 4.10 Diagram aktifitas edit prosedur... 39 Gambar 4.11 Diagram aktifitas edit gambar... 40 Gambar 4.12 Diagram aktifitas lihat anggota... 41 Gambar 4.13 Diagram aktifitas edit data akun... 42 Gambar 4.14 Diagram aktifitas pemesanan... 43 Gambar 4.15 Diagram aktifitas riwayat pemesanan... 44 Gambar 4.16 Diagram aktifitas pembatalan pemesanan... 45 Gambar 4.17 Diagram Flowchart aktifitas pemesanan... 46 Gambar 4.18 Diagram relasi entitas... 48 Gambar 4.19 Rancangan halaman login... 53 Gambar 4.20 Rancangan forgot password... 54 Gambar 4.21 Rancangan halaman awal admin... 54 Gambar 4.22 Rancangan halaman kelola new page... 55 Gambar 4.23 Rancangan halaman kelola pages... 55 Gambar 4.24 Rancangan halaman kelola create product... 56 Gambar 4.25 Rancangan halaman kelola product... 56 Gambar 4.26 Rancangan halaman kelola new categories... 57 Gambar 4.27 Rancangan halaman kelola categories... 57 ix
Gambar 4.28 Rancangan halaman kelola orders... 58 Gambar 4.29 Rancangan halaman kelola setting profil... 58 Gambar 4.30 Rancangan halaman kelola general settings... 59 Gambar 4.31 Rancangan halaman kelola slides... 59 Gambar 4.32 Rancangan halaman kelola use... 60 Gambar 4.33 Rancangan halaman awal member... 60 Gambar 4.34 Rancangan halaman about... 61 Gambar 4.35 Rancangan halaman product... 61 Gambar 4.36 Rancangan halaman how to shop... 62 Gambar 4.37 Rancangan halaman contact us... 62 Gambar 5.1 Basis data bulusol... 64 Gambar 5.2 Sintak pembuatan tabel users... 64 Gambar 5.3 Sintak pembuatan tabel categories... 65 Gambar 5.4 Sintak pembuatan tabel product... 66 Gambar 5.5 Sintak pembuatan tabel order... 66 Gambar 5.6 Sintak pembuatan tabel order details... 67 Gambar 5.7 Sintak pembuatan tabel media... 67 Gambar 5.8 Sintak pembuatan tabel pages... 68 Gambar 5.9 Sintak pembuatan tabel settings... 68 Gambar 5.10 Sintak pembuatan tabel slides... 69 Gambar 5.11 Halaman utama... 69 Gambar 5.12 Halaman register... 70 Gambar 5.13 Halaman login... 71 Gambar 5.14 Halman profil pengguna... 74 Gambar 5.15 Halaman Forgot password... 75 Gambar 5.16 Halaman riwayat pemesanan... 77 Gambar 5.17 Halaman produk... 78 Gambar 5.18 Halaman detail produk... 79 Gambar 5.19 Halaman cart... 80 Gambar 5.20 Halaman pembuatan laman baru... 82 Gambar 5.21 Halaman daftar laman... 83 Gambar 5.22 Halaman edit laman... 84 Gambar 5.23 Halaman tambah produk... 86 Gambar 5.24 Halaman daftar produk... 88 Gambar 5.25 Halaman edit produk... 89 x
Gambar 5.26 Halaman tambah kategori... 91 Gambar 5.27 Halaman daftar kategori... 92 Gambar 5.28 Halaman edit kategori... 93 Gambar 5.29 Halaman laporan pemesanan... 94 Gambar 5.30 Halaman detail pesanan... 95 Gambar 5.31 Halaman daftar slide... 96 Gambar 5.32 Halaman tambah slide... 97 Gambar 5.33 Halaman edit slide... 99 Gambar 5.34 Halaman daftar pengguna... 101 Gambar 5.35 Halaman tambah pengguna... 102 Gambar 5.36 Halaman edit data pengguna... 103 Gambar 6.1 Halaman tampilan email konfirmasi... 106 Gambar 6.2 Halaman login untuk pengujian... 106 Gambar 6.3 Halaman utama untuk member... 107 Gambar 6.4 Halaman utama untuk admin... 107 Gambar 6.5 Tampilan pesan produk berhasil ditambahkan ke keranjang belanja... 108 Gambar 6.6 Tampilan keranjang belanja... 108 Gambar 6.7 Tampilan halaman selesai mengirim pesanan... 109 Gambar 6.8 Tampilan data pesan di email member... 109 Gambar 6.9 Tampilan konfirmasi pembatalan pesanan... 110 Gambar 6.10 Tampilan pesanan berhasil dibatalkan... 110 Gambar 6.11 Tampilan form pengisian data produk... 111 Gambar 6.12 Tampilan penambahan produk sukses... 111 Gambar 6.13 Tampilan data produk berhasil dirubah... 112 Gambar 6.14 Tampilan konfirmasi menghapus produk... 112 Gambar 6.15 Tampilan data produk berhasil dihapus... 112 Gambar 6.16 Tampilan tambah data kategori... 113 Gambar 6.17 Tampilan kategori berhasil ditambahkan... 113 Gambar 6.18 Tampilan konfirmasi menghapus kategori... 114 Gambar 6.19 Tampilan kategori berhasil dihapus... 114 Gambar 6.20 Tampilan halaman detail pesanan... 115 Gambar 6.21 Tampilan konfirmasi pengiriman barang... 115 Gambar 6.22 Tampilan pengiriman selesai... 116 xi
DAFTAR TABEL Tabel 2.1 Tabel perbandingan... 8 Tabel 4.1 Tabel categories... 49 Tabel 4.2 Tabel media... 49 Tabel 4.3 Tabel Order... 49 Tabel 4.4 Tabel Order_details... 50 Tabel 4.5 Tabel Pages... 50 Tabel 4.6 Tabel Products... 51 Tabel 4.7 Tabel Setting... 51 Tabel 4.8 Tabel Slide... 51 Tabel 4.9 Tabel User... 52 xii