BAB VII PENUTUP Kesimpulan Saran DAFTAR PUSTAKA LAMPIRAN

Transkripsi

1 3DAFTAR ISI HALAMAN JUDUL... i HALAMAN PENGESAHAN... iii PERNYATAAN... iv PRAKATA... vi DAFTAR ISI... vii DAFTAR TABEL... xvi INTISARI... xvii ABSTRACT... xviii BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Batasan Masalah Tujuan Penelitian Manfaat Penelitian Metodologi Penelitian Sistematika Penulisan... 5 BAB II TINJAUAN PUSTAKA... 6 BAB III LANDASAN TEORI Sistem Informasi Sistem Informasi Basis Data Perancangan Basis Data SQL Pengembangan Perangkat Lunak Sistem Diagram Aliran Data Bahasa Pemrograman HTML CSS PHP Javascript, JQuery dan AJAX Perangkat Lunak Bootstrap Laravel E-commers vii

2 BAB IV ANALISIS DAN PERANCANGAN SISTEM Analisis Sistem Analisis Pengguna Sistem Informasi Analisis Kebutuhan Fungsional Perancangan Sistem Rancangan Proses Rancangan Basis Data Rancangan Struktur Menu Rancangan Antarmuka BAB V IMPLEMENTASI SISTEM Impelentasi Basis data Impelentasi Rancangan Proses dan Antarmuka Pengguna Konfigurasi dasar Komponen tampilan Halaman login Halaman awal Halaman pengolahan data bank Halaman pengolahan data rekening pembayaran Halaman pengolahan data jenis barang Halaman pengolahan data metode pembayaran Halaman pengolahan data petugas Halaman pengolahan data pemilik toko Halaman pengaturan akun Halaman pengelolaan data toko Halaman laporan Halaman-halaman verifikasi toko Halaman proses pengaduan kasus toko Halaman toko terverifikasi BAB VI HASIL PENGUJIAN DAN PEMBAHASAN Proses Login Proses Mengelola Data Mengelola data akun Mengelola data toko Mengelola data metode pembayaran Mengelola data jenis barang Mengelola data rekening pembayaran Mengelola data bank Mengelola data pemilik toko Mengelola data petugas Proses Verifikasi Toko Proses Pengaduan Kasus Toko Halaman Laporan Halaman Toko Terverifikasi Widget Verifikasi viii

3 BAB VII PENUTUP Kesimpulan Saran DAFTAR PUSTAKA LAMPIRAN ix

4 DAFTAR GAMBAR Gambar 3.1 Siklus Informasi (Jogiyanto, 2005) Gambar 3.2 Blok sistem informasi saling berinteraksi (Jogiyanto, 2005)...13 Gambar 3.3 Proses perancangan basis data...15 Gambar 3.4 Contoh dokumen HTML (Kurniawan, 1997)...21 Gambar 3.5 Contoh dokumen CSS (Riyanto, 2011)...22 Gambar 3.6 Contoh dokumen PHP (Peranginangin,2006)...22 Gambar 3.7 Contoh dokumen javascript...23 Gambar 3.8 Contoh penulisan jquery...23 Gambar 4.1 Rancangan DAD level Gambar 4.2 Rancangan DAD level Gambar 4.3 Rancangan DAD level 2 proses Gambar 4.4 Rancangan DAD Level 2 proses Gambar 4.5 Rancangan DAD level 2 proses Gambar 4.6 Rancangan DAD level 2 proses Gambar 4.7 Rancangan DAD level 2 proses Gambar 4.8 Rancangan DAD level 3 proses Gambar 4.9 Rancangan DAD level 3 proses Gambar 4.10 Rancangan DAD level 3 proses Gambar 4.11 Rancangan DAD level 3 proses Gambar 4.12 Rancangan DAD level 3 proses Gambar 4.13 Rancangan DAD level 3 proses Gambar 4.14 Rancangan DAD level 3 proses Gambar 4.15 Rancangan DAD level 3 proses Gambar 4.16 Rancangan DAD level 3 proses Gambar 4.17 Rancangan DAD level 3 proses Gambar 4.18 Rancangan DAD level 3 proses Gambar 4.19 Rancangan Entity Relationship Diagram...67 Gambar 4.20 Rancangan relasi antar tabel...68 Gambar 4.21 Rancangan struktur menu utama...82 Gambar 4.22 Rancangan menu admin...82 Gambar 4.23 Rancangan menu pengunjung...83 Gambar 4.24 Rancangan menu pemilik toko...83 Gambar 4.25 Rancangan menu petugas...84 Gambar 4.26 Rancangan bagian footer...85 Gambar 4.27 Rancangan halaman secara umum untuk pengunjung...85 Gambar 4.28 Rancangan halaman secara umum untuk pengguna login...86 Gambar 4.29 Rancangan halaman utama untuk pengunjung...86 Gambar 4.30 Rancangan halaman toko terverifikasi...87 Gambar 4.31 Rancangan halaman pendaftaranran...88 Gambar 4.32 Rancangan halaman pendaftaran pemilik toko...88 Gambar 4.33 Rancangan halaman pendaftara toko (pengunjung)...89 Gambar 4.34 Rancangan halaman laporan pengaduan kasus...90 Gambar 4.35 Rancangan halaman login...91 x

5 Gambar 4.36 Rancangan halaman detail toko (pengunjung)...91 Gambar 4.37 Rancangan halaman tentang sistem...92 Gambar 4.38 Rancangan halaman awal (pemilik toko)...93 Gambar 4.39 Rancangan halaman data toko (pemilik toko)...93 Gambar 4.40 Rancangan halaman pendaftaran toko (pemilik toko)...94 Gambar 4.41 Rancangan halaman daftar tagihan biaya...95 Gambar 4.42 Rancangan halaman konfirmasi pembayaran...95 Gambar 4.44 Rancangan halaman toko terlapor...96 Gambar 4.43 Rancangan halaman konfirmasi kasus toko...96 Gambar 4.45 Rancangan halaman akun (pemilik toko)...97 Gambar 4.46 Rancangan halaman mengubah data akun...97 Gambar 4.47 Rancangan modal mengubah password...98 Gambar 4.48 Rancangan halaman awal petugas dan admin...98 Gambar 4.49 Rancangan halaman data toko...99 Gambar 4.51 Rancangan detail data toko Gambar 4.50 Rancangan jendela konfirmasi mengubah widget Gambar 4.52 Rancangan halaman daftar pemilik toko Gambar 4.53 Rancangan halaman detail pemilik toko Gambar 4.54 Rancangan halaman ubah data pemilik toko Gambar 4.56 Rancangan halaman daftar anggaran verifikasi Gambar 4.55 Rancangan halaman daftar permintaan biaya verifikasi Gambar 4.57 Rancangan halaman buat biaya verifikasi Gambar 4.58 Rancangan halaman daftar pembayaran biaya verifikasi Gambar 4.59 Rancangan jendela konfirmasi validasi pembayaran Gambar 4.60 Rancangan halaman detail pembayaran biaya Gambar 4.62 Rancangan halaman validasi data pemilik toko Gambar 4.61 Rancangan halaman daftar toko sedang diverifikasi Gambar 4.64 Rancangan jendela konfirmasi verifikasi toko Gambar 4.63 Rancangan halaman daftar laporan kasus toko Gambar 4.65 Rancangan halaman verifikasi data toko Gambar 4.67 Rancangan jendela validasi laporan kasus toko Gambar 4.66 Rancangan halaman detail laporan kasus toko Gambar 4.68 Rancangan halaman data bank Gambar 4.69 Rancangan halaman rekening pembayaran Gambar 4.70 Rancangan halaman data widget Gambar 4.71 Rancangan halaman data jenis barang Gambar 4.72 Rancangan halaman data metode pembayaran Gambar 4.73 Rancangan halaman lihat akun Gambar 4.74 Rancangan halaman laporan (petugas) Gambar 4.75 Rancangan halaman ubah data akun Gambar 4.76 Rancangan halaman data petugas Gambar 4.77 Rancangan halaman tambah data petugas Gambar 4.78 Rancangan halaman laporan toko dan pengaduan (admin) Gambar 4.79 Rancangan halaman laporan kinerja petugas Gambar 4.80 Rancangan halaman laporan pembayaran biaya verifikasi Gambar 4.81 Jendela konfirmasi hapus data xi

6 Gambar 5.1 Sintaks membuat database verifikasi Gambar 5.2 Sintaks membuat tabel bank Gambar 5.3 Sintaks membuat tabel rekeningpembayaran Gambar 5.4 Sintaks membuat tabel jenisbarang Gambar 5.5 Sintaks membuat tabel metodepembayaran Gambar 5.6 Sintaks membuat tabel proses Gambar 5.7 Sintaks membuat tabel users Gambar 5.8 Sintaks membuat tabel password_reset Gambar 5.9 Sintaks membuat tabel admin Gambar 5.10 Sintaks membuat tabel petugas Gambar 5.11 Sintaks membuat tabel pemiliktoko Gambar 5.12 Sintaks membuat tabel toko Gambar 5.13 Sintaks membuat tabel tokonotlp Gambar 5.14 Sintaks untuk membuat tabel tokokontak Gambar 5.15 Sintaks untuk membuat tabel tokojenisbarang Gambar 5.16 Sintaks untuk membuat tabel tokopembayaran Gambar 5.17 Sintaks untuk membuat tabel rekeningbank Gambar 5.19 Sintaks untuk membuat tabel pengelolaverifikasi Gambar 5.18 Sintaks untuk membuat tabel pengaduan Gambar 5.20 Sintaks untuk membuat tabel biayaverifikasi Gambar 5.21 Sintaks untuk membuat tabel detailbiaya Gambar 5.22 Sintaks konfigurasi koneksi basisdata Gambar 5.23 Sintaks konfigurasi koneksi akun Gambar 5.24 Tampilan halaman bagian footer Gambar 5.25 Potongan kode program tampilan jendela hapus Gambar 5.26 Tampilan jendela konfirmasi hapus Gambar 5.27 Tampilan halaman login Gambar 5.28 Form halaman permintaan atur ulang password Gambar 5.30 Form halaman atur ulang password Gambar 5.29 Potongan kode program penangana login Gambar 5.31 Potongan kode program proses atur ulang password Gambar 5.32 Tampilan halaman awal petugas Gambar 5.33 Tampilan halaman awal pemilik toko Gambar 5.34 Tampilan halaman awal admin Gambar 5.35 Tampilan halaman awal pengunjung Gambar 5.36 Potongan kode menampilkan halaman awal pengunjung Gambar 5.38 Potongan kode menampilkan halaman awal petugas Gambar 5.37 Potongan kode menampilkan halaman awal pemilik toko Gambar 5.39 Potongan kode menampilkan halaman awal admin Gambar 5.40 Tampilan halaman kelola data bank Gambar 5.41 Potongan kode menampilkan daftar bank Gambar 5.42 Potongan kode mengelola data bank Gambar 5.43 Tampilan halaman kelola data rekening pembayaran Gambar 5.44 Potongan kode menampilkan rekening pembayaran Gambar 5.45 Potongan kode mengelola data rekening pembayaran Gambar 5.46 Tampilan halaman kelola data jenis barang xii

7 Gambar 5.47 Potongan kode menampilkan data jenis barang Gambar 5.48 Potongan kode menampilkan data jenis barang Gambar 5.49 Potongan kode mengubah dan meyimpan data jenis barang Gambar 5.50 Potongan kode mengelola data metode pembayaran Gambar 5.51 Tampilan halaman kelola data metode pembayaran Gambar 5.52 Tampilan halaman daftar data petugas Gambar 5.53 Tampilan jendela mengubah status petugas Gambar 5.54 Tampilan halaman menambahkan data petugas Gambar 5.55 Potongan kode menampilkan daftar petugas Gambar 5.56 Potongan kode mengubah status petugas Gambar 5.57 Potongan kode menyimpan petugas baru Gambar 5.58 Tampilan halaman daftar pemilik toko Gambar 5.59 Tampilan halaman detail pemilik toko Gambar 5.60 Tampilan halaman mengubah data pemilik toko Gambar 5.61 Potongan kode menampilkan daftar pemilik toko Gambar 5.62 Potongan kode menampilkan detail pemilik toko Gambar 5.63 Potongan kode untuk mengubah data pemilik toko Gambar 5.64 Potongan kode untuk menghapus data pemilik toko Gambar 5.65 Potongan kode menampilkan akun Gambar 5.66 Tampilan halaman akun Gambar 5.67 Tampilan form ubah data akun Gambar 5.68 Tampilan jendela ubah password Gambar 5.69 Potongan kode mengubah data akun Gambar 5.70 Potongan kode mengubah password Gambar 5.71 Tampilan daftar data toko Gambar 5.72 Tampilan jendela ubah verifikasi toko Gambar 5.73 Tampilan halaman detail toko Gambar 5.74 Potongan kode menampilkan daftar toko Gambar 5.75 Potongan kode merubah verifikasi toko Gambar 5.76 Potongan kode mengubah dan menghapus data toko Gambar 5.77 Tampilan laporan untuk petugas Gambar 5.78 Tampilan halaman laporan untuk admin Gambar 5.79 Potongan kode menampilkan laporan toko per bulan Gambar 5.80 Potongan kode menampilkan laporan pemilik toko perbulan Gambar 5.81 Potongan kode menampilkan laporan pengaduan perbulan Gambar 5.82 Potongan kode menampilkan laporan toko Gambar 5.83 Potongan kode menampilkan laporan kinerja petugas Gambar 5.84 Potongan kode untuk menampilkan form pendaftaran toko Gambar 5.85 Tampilan form pendaftaran toko online Gambar 5.86 Potongan kode menampilkan daftar toko tahap analisis biaya Gambar 5.87 Tampilan halaman daftar toko tahap analisis biaya Gambar 5.88 Tampilan halaman analisis biaya Gambar 5.89 Tampilan halaman konfirmasi pembayaran Gambar 5.90 Potongan kode menyimpan konfirmasi pembayaran Gambar 5.91 Tampilan halaman validasi pembayaran Gambar 5.92 Tampilan jendela konfirmasi validasi pembayaran xiii

8 Gambar 5.93 Potongan kode untuk validasi pembayaran Gambar 5.94 Tampilan halaman daftar toko tahap verifikasi Gambar 5.95 Tampilan halaman verifikasi pemilik toko Gambar 5.96 Tampilan halaman verifikasi toko Gambar 5.97 Potongan kode untuk mengubah verifikasi toko Gambar 5.98 Tampilan halaman pengaduan kasus toko Gambar 5.99 Potongan kode pemrograman menyimpan laporan kasus Gambar Tampilan halaman konfirmasi kasus toko Gambar Potongan kode pemrograman untuk menyimpan data konfirmasi kasus Gambar Tampilan halaman daftar laporan kasus toko online Gambar Tampilan jendela validasi kasus Gambar Potongan kode pemrograman mengibah status validasi kasus Gambar Potongan kode pemrograman menampilkan toko terverifikasi Gambar Potongan kode pemrograman menampilkan informasi toko Gambar Tampilan halaman daftar toko terverifikasi Gambar Tampilan halaman informasi toko online Gambar 6.1 Tampilan form login Gambar 6.2 Tampilan peringatan captcha belum diisi Gambar 6.3 Tampilan peringatan username tidak terdaftar Gambar 6.4 Tampilan pesan peringatan password salah Gambar 6.5 Tampilan halaman awal (pemilik toko) Gambar 6.6 Tampilan halaman awal (pengunjung) Gambar 6.7 Tampilan halaman awal (admin) Gambar 6.8 Tampilan halaman awal (petugas) Gambar 6.9 Tampilan form permintaan atur ulang password Gambar 6.10 Tampilan pemberitahuan pesan sudah dikirim Gambar 6.11 Tampilan pesan di untuk merubah password Gambar 6.12 Tampilan form memperbarui password Gambar 6.13 Tampilan pesan peringatan berhasil melakukan reset password Gambar 6.14 Tampilan halaman informasi akun pengguna Gambar 6.15 Tampilan halaman mengubah data akun Gambar 6.16 Tampilan pesan peringatan berhasil merubah data akun Gambar 6.17 Tampilan jendela untuk mengubah password Gambar 6.18 Pesan peringatan berhasil mengubah password akun Gambar 6.19 Pesan peringatan gagal mengubah password akun Gambar 6.20 Potongan tampilan halaman daftar data toko Gambar 6.21 Tampilan jendela mengubah verifikasi suatu toko Gambar 6.22 Tampilan halaman detail suatu toko online Gambar 6.23 Tampilan jendela konfirmasi hapus data toko Gambar 6.24 Tampilan potongan halaman mengelola metode pembayaran Gambar 6.25 Tampilan pesan berhasil mengelola data metode pembayaran Gambar 6.26 Tampilan potongan halaman daftar jenis barang Gambar 6.27 Pesan peringatan berhasil mengelola data kategori toko Gambar 6.28 Tampilan potongan halaman daftar rekening Gambar 6.29 Tampilan pesan peringatan gagal menambahkan data rekening xiv

9 Gambar 6.30 Tampilan pesan peringatan berhasil menambahkan data rekening 190 Gambar 6.31 Tampilan halaman daftar bank dengan pencarian Gambar 6.32 Tampilan pesan peringatan berhasil menambah data bank Gambar 6.33 Tampilan pesan gagal menambahkan data bank Gambar 6.34 Tampilan halaman pencarian data pemilik toko Gambar 6.35 Tampilan halaman detail pemilik toko Gambar 6.36 Tampilan pesan berhasil mengubah data pemilik toko Gambar 6.37 Tampilan halaman pencarian data petugas Gambar 6.38 Tampilan jendela mengubah status salah satu petugas Gambar 6.39 Tampilan pesan peringatan berhasil mengubah data petugas Gambar 6.40 Tampilan form tambah petugas Gambar 6.41 Form pendaftaran pemilik toko Gambar 6.42 Tampilan pesan berhasil mendaftarkan toko Gambar 6.43 Form pendaftaran toko Gambar 6.44 Form buat biaya verifikasi Gambar 6.45 Tampilan detail tagihan verifikasi toko (pemilik toko) Gambar 6.46 Form konfirmasi pembayaran biaya verifikasi Gambar 6.47 Daftar toko dalam tahap verifikasi Gambar 6.48 Form verifikasi toko online Gambar 6.49 Daftar toko berhasil diverifikasi Gambar 6.50 Tampilan pesan peringatan berhasil menyimpan laporan kasus Gambar 6.51 Form pengaduan kasus toko Gambar 6.52 Form konfirmasi laporan kasus toko Gambar 6.53 Jendela validasi laporan kasus toko Gambar 6.54 Pesan peringatan berhasil melakukan validasi laporan Gambar 6.55 Tampilan halaman laporan pendaftaran toko Gambar 6.56 Cetak tabel laporan pendaftaran toko perbulan Gambar 6.57 Cetak tabel laporan pengaduan kasus toko perbulan Gambar 6.58 Tampilan halaman laporan pengaduan kasus Gambar 6.59 Tampilan halaman laporan kinerja petugas Gambar 6.60 Cetak tabel laporan kinerja petugas Gambar 6.61 Tampilan halaman laporan biaya verifikasi dibayar Gambar 6.62 Cetak laporan biaya verifikasi dibayar Gambar 6.63 Tampilan halaman daftar toko terverifikasi Gambar 6.64 Tampilan halaman detail toko (pengunjung) Gambar 6.65 Tampilan widget verifikasi toko xv

10 4DAFTAR TABEL Table 2.1 Perbedaan Sistem... 8 Table 3.1 Simbol-simbol dalam ERD Table 3.2 Simbol-simbol dalam DAD Table 4.1 Rancangan tabel users Table 4.2 Rancangan tabel admin Table 4.3 Rancangan tabel petugas Table 4.4 Rancangan tabel pemiliktoko Table 4.5 Rancangan tabel metodepembayaran Table 4.6 Rancangan tabel tokoonline Table 4.7 Rancangan tabel tokopembayaran Table 4.8 Rancangan tabel tokonotlp Table 4.9 Rancangan tabel tokokontak Table 4.10 Rancangan tabel proses Table 4.11 Rancangan tabel jenisbarang Table 4.12 Rancangan tabel tokojenisbarang Table 4.13 Rancangan tabel bank Table 4.14 Rancangan tabel rekeningbank Table 4.15 Rancangan tabel rekeningpembayaran Table 4.16 Rancangan tabel biayaverifikasi Table 4.17 Rancangan tabel detailbiaya Table 4.18 Rancangan tabel pengelolaverifikasi Table 4.19 Rancangan tabel pengaduan Table 4.20 Rancangan tabel password_reset Table 4.21 Rancangan tabel komponenverifikasi xvi